/* CIVE60008 full-width teaching workspace. Matches the Imperial site palette. */
.transport-page{margin:0;background:#fff;color:#161A1D;font-family:ImperialText,Arial,sans-serif;font-size:17px;line-height:1.45}
.transport-page #main.transport-main{display:block;max-width:none;width:100%;padding:20px 32px 48px;box-sizing:border-box}
.transport-page .transport-main *{box-sizing:border-box}
.transport-page .transport-main h1{font-size:clamp(28px,2.8vw,39px);line-height:1.2;margin:0 0 8px;font-weight:400;text-align:left}
.transport-main h2{font-size:23px;line-height:1.2;font-weight:500;margin:0 0 16px;text-align:left}
.transport-main h3{font-size:19px;font-weight:500;margin:18px 0 10px;text-align:left}
.transport-main p{margin:0 0 14px;text-align:left}
.transport-main button,.transport-main select,.transport-main input{font:inherit;letter-spacing:normal;border-radius:0}
.transport-main button,.transport-main select{min-height:40px;border:1px solid #C4C7CE;background:#fff;color:#161A1D;padding:7px 12px;cursor:pointer}
.transport-main button:hover{border-color:#0000CD;color:#0000CD;background:#F1F2F4}
.transport-main button[aria-pressed=true],.transport-main button.primary{background:#0000CD;color:white;border-color:#0000CD}
.transport-main button:disabled{opacity:.45;cursor:default}
.transport-main :focus-visible{outline:3px solid #0000CD;outline-offset:3px}
.transport-main input{min-width:0;border:1px solid #C4C7CE;padding:6px 8px;background:#fff;color:#161A1D;min-height:38px;width:100%}
.transport-main input[type=range]{padding:0;accent-color:#0000CD;min-width:130px;max-width:200px}
.transport-main label{display:flex;flex-direction:column;gap:4px;color:#4B5560;font-size:15px}
.transport-main label>select{max-width:100%;color:#161A1D}
.demo-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:20px}
.demo-heading .lecture-label{font-size:16px;color:#4B5560;margin:0 0 6px}
.demo-switch{display:flex;align-items:flex-end;gap:8px;flex:0 1 410px}
.demo-switch label{flex:1;min-width:180px}
.demo-switch select{width:100%}
.demo-intro{max-width:850px;color:#3D464F;margin-bottom:0!important}
.demo-toolbar{display:flex;gap:12px 18px;flex-wrap:wrap;align-items:flex-end;border-top:2px solid #161A1D;border-bottom:1px solid #C4C7CE;padding:14px 0;margin-bottom:20px}
.demo-toolbar .button-row{display:flex;gap:6px;flex-wrap:wrap}
.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr);gap:24px;align-items:start}
.graph-panel{min-width:0;background:#F1F2F4;border:1px solid #E4E6EA;position:relative}
.graph-panel .graph-caption{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;color:#4B5560;border-top:1px solid #E4E6EA;font-size:15px;background:white;min-height:42px}
.graph-panel .network-svg{display:block;width:100%;height:auto;min-height:300px;max-height:calc(100vh - 260px);touch-action:pan-y;overflow:visible}
.graph-node{cursor:pointer;outline:none}
.graph-node:focus-visible circle{stroke:#0000CD;stroke-width:6}
.network-svg text{font-family:inherit;font-size:19px}
.network-svg .edge-label{paint-order:stroke;stroke:#F1F2F4;stroke-width:6px;stroke-linejoin:round;fill:#4B5560;text-anchor:middle;font-size:18px}
.network-svg .edge{cursor:pointer;pointer-events:stroke}
.network-svg .building{fill:#E0E3E8;stroke:#C4C7CE;stroke-width:.5}
.analysis-panel{min-width:0;max-height:calc(100vh - 280px);min-height:330px;overflow:auto;padding:0 3px 12px}
.panel-tabs{display:flex;gap:16px;flex-wrap:wrap;border-bottom:1px solid #C4C7CE;margin-bottom:16px}
.transport-main .panel-tabs button{padding:5px 0 9px;border:0;border-bottom:3px solid transparent;min-height:36px;background:white;color:#4B5560}
.transport-main .panel-tabs button[aria-pressed=true]{color:#161A1D;border-bottom-color:#0000CD}
.table-scroll{overflow:auto;max-height:420px;border-bottom:1px solid #C4C7CE;scrollbar-gutter:stable}
.transport-main table{border-collapse:collapse;width:100%;font-size:15px;margin:0;white-space:nowrap}
.transport-main th,.transport-main td{padding:8px 10px;text-align:right;border-bottom:1px solid #E4E6EA;font-weight:400;color:#161A1D}
.transport-main th:first-child{text-align:left}
.transport-main thead th{position:sticky;top:0;background:#fff;font-weight:500;border-bottom:1px solid #161A1D;z-index:1}
.transport-main table button{min-height:30px;padding:2px 6px;border-color:transparent;width:100%;font-size:15px}
.transport-main .matrix td,.transport-main .matrix th{padding:2px;min-width:32px}
.transport-main .matrix button{font-variant-numeric:tabular-nums}
.transport-main .cell-active{background:#0000CD;color:white}
.transport-main tr.selected-row{background:#F1F2F4}
.inspector{margin-top:18px;border-top:1px solid #C4C7CE;padding-top:14px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.explanation{background:#F1F2F4;padding:14px 16px;margin:14px 0;color:#3D464F}
.status-line{padding:14px 0;border-top:1px solid #C4C7CE;margin-top:18px;min-height:50px;font-size:17px}
.data-note{font-size:15px;color:#4B5560;max-width:1100px;padding-top:12px}
.data-note a{color:#0000CD}
.data-note details{margin-top:8px}
.metric-line{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 16px}
.metric-line span{color:#4B5560;font-size:15px}
.metric-line strong{display:block;color:#161A1D;font-size:23px;font-weight:500;font-variant-numeric:tabular-nums}
.histogram{height:200px;display:flex;gap:3px;align-items:flex-end;border-bottom:1px solid #4B5560;margin:20px 0 8px;overflow:auto}
.transport-main .hist-column{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;flex:1;min-width:25px;padding:0 2px;border:0;background:transparent;font-size:14px}
.hist-bar{display:block;width:100%;max-width:35px;background:#687785}
.chosen .hist-bar{background:#0000CD}.axis-caption{font-size:15px;color:#4B5560}
.route-list{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:12px 0}
.route-list span{border:1px solid #C4C7CE;padding:3px 7px;font-size:15px}
.route-list b{font-weight:400;color:#4B5560}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:15px;color:#4B5560;margin-bottom:12px}
.legend i{display:inline-block;width:10px;height:10px;margin-right:5px;border:2px solid #4B5560;background:#fff}
.legend i.blue{background:#0000CD;border-color:#0000CD}.legend i.grey{background:#687785;border-color:#687785}
.progress-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}
.transport-main .compact-note{font-size:15px;color:#4B5560}
.transport-main:fullscreen{overflow:auto;background:white;padding:20px}
.transport-main .error{color:#C4122F}
.transport-main .loading{padding:60px 20px;font-size:22px}
.credits-content{max-width:1000px}
@media(min-width:1700px){.workspace{grid-template-columns:minmax(0,1.9fr) minmax(420px,1fr)}.graph-panel .network-svg{max-height:720px}}
@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr)}.demo-heading{display:block}.demo-switch{margin-top:16px;max-width:550px}.analysis-panel{max-height:650px}.graph-panel .network-svg{min-height:250px;max-height:none}}
@media(max-width:760px){.transport-page #main.transport-main{padding:16px}.workspace{grid-template-columns:1fr}.analysis-panel{max-height:none}.demo-toolbar{gap:12px}.demo-toolbar label{flex:1 1 135px}.demo-switch{flex-wrap:wrap}.graph-panel .network-svg{min-height:240px}.graph-panel .graph-caption{font-size:14px}.transport-main table{font-size:15px}.network-svg text{font-size:23px}.network-svg .edge-label{font-size:21px}.demo-heading h1{font-size:29px}.data-note{font-size:15px}}
@media(prefers-reduced-motion:reduce){.transport-main *{scroll-behavior:auto!important}}

/* Use the host site's type scale, including its mobile body-size floor. */
.transport-page{font-family:var(--sans,ImperialText,Arial,sans-serif);font-size:var(--step-0,17px)}
.transport-page .transport-main h1{font-size:var(--step-4,34px);line-height:var(--line-snug,1.2)}
.transport-main h2,.transport-main .metric-line strong{font-size:var(--step-2,24px)}
.transport-main h3,.transport-main .status-line{font-size:var(--step-0,17px)}
.transport-main label,.demo-heading .lecture-label,.graph-panel .graph-caption,.transport-main table,.transport-main table button,.data-note,.metric-line span,.transport-main .hist-column,.axis-caption,.route-list span,.legend,.transport-main .compact-note{font-size:var(--step--1,16px)}
.transport-main .matrix td,.transport-main .matrix th{padding:2px;min-width:30px}
.transport-main .demo-toolbar select{max-width:300px}
.transport-main .demo-toolbar label{min-width:0}
.transport-main .demo-switch select{min-width:0}
.transport-main .graph-caption{flex-wrap:wrap}
.transport-main .network-svg .graph-node text{pointer-events:none}
@media(max-width:760px){.transport-main .demo-toolbar select{width:100%;max-width:100%}.demo-switch{max-width:100%}.demo-switch label{min-width:0}.transport-main .graph-panel .network-svg{min-height:0;aspect-ratio:1000/650}}
.transport-main .graph-panel{padding:0}

/* Consistent fields across every Transport Systems demonstration. */
.transport-main select{
 appearance:none;-webkit-appearance:none;
 font-family:inherit;font-size:var(--step-0,17px);line-height:1.45;
 min-height:44px;padding:8px 40px 8px 12px;
 border:1px solid var(--hairline,#C4C7CE);border-radius:0;
 color:var(--ink,#161A1D);background-color:var(--paper,#fff);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%230000CD' stroke-width='1.5'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
 box-shadow:none;cursor:pointer;
}
.transport-main select:hover{border-color:var(--imperial,#0000CD)}
.transport-main select:focus-visible{outline:2px solid var(--imperial,#0000CD);outline-offset:2px}
.transport-main select option{font:inherit;color:var(--ink,#161A1D);background:var(--paper,#fff)}
.transport-main .control-group{display:flex;flex-direction:column;gap:4px;min-width:0}
.transport-main .control-label{font-size:var(--step--1,16px);color:var(--muted,#4B5560)}
.transport-main .segmented-control{display:flex;flex-wrap:wrap;gap:0}
.transport-main .segmented-control button{min-height:44px;padding:8px 12px;border-color:var(--hairline,#C4C7CE)}
.transport-main .segmented-control button+button{margin-left:-1px}
.transport-main .segmented-control button[aria-pressed=true]{position:relative;border-color:var(--imperial,#0000CD)}
.transport-main .editor-help{flex-basis:100%;margin:0!important;font-size:var(--step--1,16px);color:var(--muted,#4B5560)}
.transport-main .representation-tabs{gap:16px;margin-top:16px}
.transport-main .representation-heading{margin-top:0}
.transport-main .representation-note{margin-top:16px}
.transport-main .forward-offsets table button{min-width:32px}
.transport-main .forward-arcs tr:has(button[aria-pressed=true]){background:var(--surface,#F1F2F4)}
.transport-main #graph[data-tool=add] svg{cursor:crosshair}
.transport-main #graph[data-tool=connect] .graph-node{cursor:crosshair}
.transport-main #graph[data-tool=select] .graph-node{cursor:grab}
.transport-main #graph svg:focus-visible{outline:2px solid var(--imperial,#0000CD);outline-offset:-3px}
@media(max-width:760px){
 .transport-main .control-group{max-width:100%}
 .transport-main .segmented-control button{padding:8px 10px}
 .transport-main .representation-tabs{gap:12px}
}
@media(forced-colors:active){.transport-main select{appearance:auto;background-image:none}}

.transport-main .demo-toolbar .button-row button,.transport-main .demo-switch button{min-height:44px}

.transport-main .analysis-stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.transport-main .cycle-browser{padding:16px;background:var(--surface,#F1F2F4);border:1px solid var(--hairline,#C4C7CE);border-top:2px solid var(--ink,#161A1D);min-width:0}
.transport-main .cycle-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.transport-main .cycle-panel-heading h2{margin:0}
.transport-main .cycle-panel-heading button{flex-shrink:0}
.transport-main .cycle-browser .progress-controls{margin:12px 0}
.transport-main .cycle-links{max-height:150px;overflow:auto;margin:0;padding-left:24px;font-size:var(--step--1,16px)}
.transport-main .cycle-browser>p{overflow-wrap:anywhere}

.transport-main .tube-legend{display:flex;flex-wrap:wrap;gap:6px 16px;width:100%}
.transport-main .tube-legend span{display:inline-flex;align-items:center;gap:6px}
.transport-main .tube-legend i{display:inline-block;width:24px;height:5px}
.transport-main .network-svg .service-track{cursor:pointer;pointer-events:stroke}

/* Layer controls for Representing London. */
.transport-main .london-workspace{grid-template-columns:minmax(0,1fr) minmax(320px,380px)}
.transport-main .london-workspace .analysis-panel{max-height:calc(100vh - 245px);padding-right:10px}
.transport-main .map-controls{border:0;border-bottom:1px solid var(--hairline,#C4C7CE);padding:0 0 16px;margin:0 0 16px;min-width:0}
.transport-main .map-controls legend{font-size:var(--step-0,17px);font-weight:500;padding:0;margin-bottom:12px}
.transport-main .map-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.transport-main .map-check-list{display:grid;gap:10px}
.transport-main label.map-check{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--ink,#161A1D);min-height:30px;font-size:var(--step--1,16px)}
.transport-main .map-check input[type=checkbox]{appearance:auto;width:18px;height:18px;min-width:18px;min-height:18px;margin:0;padding:0;accent-color:var(--imperial,#0000CD);flex:none}
.transport-main .map-controls>.map-check{margin-top:12px}
.transport-main .road-swatch{display:inline-block;flex:none;width:18px;border-top:var(--road-width) solid var(--road-colour)}
.transport-main .map-controls .control-group{margin:16px 0 10px}
.transport-main .map-controls .segmented-control button{font-size:var(--step--1,16px);flex:1;padding:7px}
.transport-main .map-network-size{margin:8px 0 0}
.transport-main .map-inspector{padding-bottom:12px}
.transport-main .map-inspector h3{margin-top:0}
.transport-main .map-route-list{padding-left:20px;font-size:var(--step--1,16px)}
.transport-main .london-road,.transport-main .london-building-footprint{cursor:pointer}
.transport-main .london-road{pointer-events:stroke}
.transport-main .london-centroid:focus-visible rect{stroke-width:5}
.transport-main .london-building:focus-visible path{stroke:#0000CD;stroke-width:4}
@media(max-width:760px){.transport-main .london-workspace{grid-template-columns:1fr}.transport-main .london-workspace .analysis-panel{max-height:none;padding:0}.transport-main .map-check-grid{gap:8px}.transport-main label.map-check{min-height:36px}}

.transport-main .road-level-control{gap:8px;color:var(--ink,#161A1D)}
.transport-main .road-level-control input[type=range]{width:100%;max-width:none;min-height:28px}
.transport-main .road-level-scale{display:flex;justify-content:space-between;font-size:var(--step--1,16px);color:var(--muted,#4B5560)}
.transport-main .road-level-included{display:flex;flex-wrap:wrap;gap:8px 14px;margin:12px 0;font-size:var(--step--1,16px)}
.transport-main .road-level-included span{display:inline-flex;align-items:center;gap:6px}

/* Geographic degree explorer: quiet context, explicit route selection. */
.transport-main .degree-workspace{grid-template-columns:minmax(0,1fr) minmax(320px,380px)}
.transport-main .degree-workspace .analysis-panel{max-height:calc(100vh - 260px)}
.transport-main .degree-map{overflow:hidden;cursor:grab;touch-action:none}
.transport-main .degree-map:active{cursor:grabbing}
.transport-main .degree-map .graph-node{cursor:pointer}
.transport-main .degree-map .geographic-context,.transport-main .degree-map .map-place-labels,.transport-main .degree-map .degree-edge{pointer-events:none}
.transport-main .degree-map .map-place{font-size:17px;fill:#59636D;text-anchor:middle;paint-order:stroke;stroke:#FFFFFF;stroke-width:4px;stroke-linejoin:round}
.transport-main .degree-map .selected-place{font-size:19px;fill:#0000CD;paint-order:stroke;stroke:#FFFFFF;stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.transport-main .degree-map-check{display:flex;flex-direction:row;align-items:center;gap:8px;align-self:end;min-height:40px}
.transport-main .degree-map-check input{width:18px;height:18px;accent-color:#0000CD}
.transport-main .degree-route-controls{display:flex;gap:0;align-self:end}
.transport-main .degree-route-controls button+button{margin-left:-1px}
.transport-main .degree-map-tools{display:flex;gap:8px;margin-bottom:10px}
.transport-main .degree-map-hint{display:block;margin-top:6px}
.transport-main .degree-search{display:flex;flex-direction:column;gap:6px}
.transport-main .degree-search input{width:100%;padding:8px;border:1px solid #687785;background:#FFFFFF;color:#161A1D;font:inherit;border-radius:0}
.transport-main .degree-source{margin-top:20px}
.transport-main .degree-source .data-note{margin-top:12px}
@media(max-width:760px){.transport-main .degree-workspace{grid-template-columns:1fr}.transport-main .degree-workspace .analysis-panel{max-height:none}.transport-main .degree-map-check{flex:0 1 auto}.transport-main .degree-map-tools{flex-wrap:wrap}}

.transport-main .degree-histogram{display:block;width:100%;height:auto;margin-top:12px;overflow:visible}
.transport-main .degree-histogram text{font-size:14px;fill:#4B5560}
.transport-main .degree-histogram [data-bin]{cursor:pointer}
.transport-main .degree-histogram [data-bin]:focus-visible{outline:2px solid #0000CD}
.transport-main .degree-histogram [data-bin]:hover .degree-hist-bar{fill:#0000CD}
.transport-main .degree-workspace .graph-caption{display:block}

@media(max-width:760px){.transport-main .graph-panel .degree-map-national{aspect-ratio:500/650}}