/* Client tools: geography, marking, measurement and temperature examples. */
html:root body#top { --tool-paper:var(--ui-page,#fff); --tool-ink:var(--ui-ink,#161c24); --tool-muted:var(--ui-muted,#626b73); --tool-line:var(--ui-line,#dce1e4); --tool-soft:var(--ui-soft,#f5f6f7); }
html[data-theme="dark"] body#top { --tool-paper:#0b0c0e; --tool-ink:#f3f4f5; --tool-muted:#aeb5bb; --tool-line:#303338; --tool-soft:#151719; }
body#top :is(.cargo-label-example,[data-volume-example],#schedule-map) button:focus-visible { outline:2px solid #d9282e; outline-offset:4px; }

/* The route is the interaction; coastlines provide geographic context. */
html:root body#top main#main-content #schedule-map .map-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr); gap:0; align-items:stretch; border:1px solid var(--tool-line); border-radius:8px; overflow:hidden; background:var(--tool-paper); }
html:root body#top main#main-content #schedule-map .map-grid { padding:0!important; gap:0!important; }
html:root body#top main#main-content #schedule-map .panel-card { display:block!important; position:static!important; transform:none!important; top:auto!important; bottom:auto!important; border:0!important; border-left:1px solid var(--tool-line)!important; padding:28px!important; border-radius:0!important; }
html:root body#top main#main-content #schedule-map [hidden] { display:none!important; }
html:root body#top main#main-content #schedule-map .map-stage { min-height:0!important; border:0!important; border-radius:0!important; background:#edf2f4!important; position:relative; }
html:root body#top main#main-content #schedule-map #etlRoutesMap { height:auto!important; min-height:0!important; }
html:root body#top main#main-content #schedule-map .etl-sea { width:100%; height:auto!important; min-height:0!important; display:block; --sea-bg1:#edf2f4; --sea-bg2:#f2f5f6; --sea-node:#d9272e; --sea-text:#263743; }
html:root body#top main#main-content #schedule-map .etl-sea__land { fill:#d5dfdf; stroke:#fff; stroke-width:1.2; }
html:root body#top main#main-content #schedule-map .etl-sea__water-names { fill:#6c828e; font:400 16px var(--ui-font, sans-serif); letter-spacing:1px; }
html:root body#top main#main-content #schedule-map .etl-sea__lane { fill:none; stroke:#b58e91; stroke-width:2; stroke-dasharray:5 7; opacity:.7; }
html:root body#top main#main-content #schedule-map .etl-sea__lane.is-on { stroke:#d9272e; stroke-width:3.5; stroke-dasharray:none; opacity:1; }
html:root body#top main#main-content #schedule-map .etl-sea__label { fill:var(--sea-text); font:600 19px var(--ui-font,sans-serif); paint-order:stroke; stroke:var(--sea-bg1); stroke-width:5; stroke-linejoin:round; }
html:root body#top main#main-content #schedule-map .etl-sea__touch { fill:transparent; }
html:root body#top main#main-content #schedule-map .etl-sea__node:focus-visible { outline:0; }
html:root body#top main#main-content #schedule-map .etl-sea__node:focus-visible .etl-sea__halo { opacity:.25; fill:#d9272e; }
html:root body#top main#main-content #schedule-map .map-badge { position:absolute; inset:22px auto auto 24px; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; color:#263743; font:600 16px/1.4 var(--ui-font,sans-serif); }
html:root body#top main#main-content #schedule-map .map-badge span { display:block; color:#667985; font-size:12px; font-weight:400; margin-top:3px; }
html:root body#top main#main-content #schedule-map .map-overlay { display:none; }
html:root body#top main#main-content #schedule-map .panel-card { align-self:stretch; padding:28px; border:0; border-left:1px solid var(--tool-line); border-radius:0; background:var(--tool-paper)!important; color:var(--tool-ink); box-shadow:none; min-width:0; }
html:root body#top main#main-content #schedule-map .panel-head { padding:0; border:0; margin:0; }
html:root body#top main#main-content #schedule-map .panel-head h3 { margin:4px 0 24px!important; font:600 24px/1.2 var(--ui-font,sans-serif)!important; color:var(--tool-ink)!important; }
html:root body#top main#main-content #schedule-map .sea-kicker { margin:0!important; font-size:13px!important; color:var(--tool-muted)!important; }
html:root body#top main#main-content #schedule-map .sea-select-label { display:block; margin-bottom:8px; font:500 13px/1.5 var(--ui-font,sans-serif); }
html:root body#top main#main-content #schedule-map #rmSelect { width:100%; min-height:48px; padding:10px 34px 10px 12px; background:var(--tool-soft)!important; color:var(--tool-ink)!important; border:1px solid var(--tool-line)!important; border-radius:5px; font:500 15px/1.5 var(--ui-font,sans-serif); }
html:root body#top main#main-content #schedule-map .sea-note { font-size:14px!important; line-height:1.65!important; color:var(--tool-muted)!important; margin:20px 0!important; }
html:root body#top main#main-content #schedule-map .sea-route { margin:24px 0!important; color:var(--tool-ink)!important; font:600 19px/1.5 var(--ui-font,sans-serif)!important; }
html:root body#top main#main-content #schedule-map .sea-itinerary { display:grid; grid-template-columns:1fr; gap:18px; margin:20px 0; padding-left:18px; border-left:2px solid #d9272e; }
html:root body#top main#main-content #schedule-map .sea-itinerary span { display:block; color:var(--tool-muted); font-size:12px; margin-bottom:5px; }
html:root body#top main#main-content #schedule-map .sea-itinerary strong { font:500 17px/1.5 var(--ui-font,sans-serif); font-variant-numeric:tabular-nums; }
html:root body#top main#main-content #schedule-map .sea-facts { margin:24px 0; }
html:root body#top main#main-content #schedule-map .sea-facts div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; padding:12px 0; border-top:1px solid var(--tool-line); font-size:13px; }
html:root body#top main#main-content #schedule-map .sea-facts dt { color:var(--tool-muted); }
html:root body#top main#main-content #schedule-map .sea-facts dd { margin:0; color:var(--tool-ink); }
html:root body#top main#main-content #schedule-map .panel-actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:24px; }
html:root body#top main#main-content #schedule-map .sea-text-link { color:var(--tool-ink)!important; font-size:14px; text-underline-offset:4px; }
html[data-theme="dark"] body#top main#main-content #schedule-map .etl-sea { --sea-bg1:#111a20; --sea-bg2:#10171c; --sea-text:#e3e9eb; }
html[data-theme="dark"] body#top main#main-content #schedule-map .etl-sea__land { fill:#2a363d; stroke:#38474f; }
html[data-theme="dark"] body#top main#main-content #schedule-map .map-badge { color:#e3e9eb; }
html[data-theme="dark"] body#top main#main-content #schedule-map .map-badge span { color:#a1b1bb; }

/* A sample shipping label is paper, with selectable explanations. */
body#top .cargo-label-example { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.65fr); gap:24px; margin-top:24px; align-items:center; }
body#top .cargo-label-paper { background:var(--tool-paper); border:1px solid var(--tool-line); border-radius:4px; box-shadow:0 12px 24px #18232a0b; overflow:hidden; }
body#top .cargo-label-top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; border-bottom:2px solid #d9272e; }
body#top .cargo-label-top strong { font:400 22px var(--ui-font-display,sans-serif); }
body#top .cargo-label-top span { font-size:11px; color:var(--tool-muted); }
body#top .cargo-label-paper .cargo-label-field { display:block; width:100%; margin:0; min-height:64px; padding:14px 18px; border:0; border-bottom:1px solid var(--tool-line); border-radius:0; text-align:left; color:var(--tool-ink); background:transparent; cursor:pointer; box-shadow:none; }
body#top .cargo-label-paper .cargo-label-field.is-active { background:var(--tool-soft); box-shadow:inset 3px 0 #d9272e; }
body#top .cargo-label-field > span { display:block; margin-bottom:6px; font:400 11px/1.4 var(--ui-font,sans-serif); color:var(--tool-muted); }
body#top .cargo-label-field strong { font:500 13px/1.5 var(--ui-font,sans-serif); }
body#top .cargo-label-field :is(.cargo-label-city,.cargo-label-number) { font:400 23px/1.4 var(--ui-font-display,sans-serif); }
body#top .cargo-label-pair { display:grid; grid-template-columns:1fr 1fr; }
body#top .cargo-label-pair > :first-child { border-right:1px solid var(--tool-line); }
body#top .cargo-label-bottom { padding:12px 18px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:var(--tool-muted); font-size:10px; line-height:1.5; }
body#top .cargo-label-explanation { padding-left:18px; border-left:1px solid var(--tool-line); }
body#top .cargo-label-explanation > span { color:var(--tool-muted); font-size:12px; }
body#top .cargo-label-explanation h3 { font:600 17px/1.4 var(--ui-font,sans-serif)!important; margin:10px 0!important; }
body#top .cargo-label-explanation p { font-size:14px!important; line-height:1.65!important; margin:0!important; }

/* Editable volume example, using packaged outer dimensions. */
html:root body#top main#main-content #volume.prep-example { padding:28px; background:var(--tool-paper)!important; border:1px solid var(--tool-line); }
body#top #volume .tool-eyebrow { font:500 12px/1.4 var(--ui-font,sans-serif)!important; color:var(--tool-muted)!important; margin:0 0 8px!important; }
body#top #volume .volume-dimensions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:0; border:0; min-width:0; }
body#top #volume .volume-dimensions legend { margin-bottom:12px; color:var(--tool-muted); font:400 13px/1.5 var(--ui-font,sans-serif); }
body#top #volume .volume-dimensions label { font-size:12px; color:var(--tool-muted); }
body#top #volume input { display:block; width:100%; min-width:0; min-height:44px; padding:10px; border:1px solid var(--tool-line)!important; background:var(--tool-soft)!important; color:var(--tool-ink)!important; font:500 16px/1.4 var(--ui-font,sans-serif); border-radius:4px!important; box-sizing:border-box; margin-top:6px; }
body#top #volume input[aria-invalid="true"] { border-color:#d9272e!important; }
body#top #volume .volume-places { display:flex; align-items:center; gap:16px; justify-content:space-between; font-size:13px; margin:16px 0; }
body#top #volume .volume-places input { width:84px; margin:0; }
body#top #volume .volume-live-result { border-block:1px solid var(--tool-line); padding:18px 0; margin-bottom:20px; }
body#top #volume .volume-live-result > span { display:block; color:var(--tool-muted); font-size:13px; margin-bottom:16px; }
body#top #volume .volume-live-result > div { display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-top:14px; }
body#top #volume .volume-live-result div span { color:var(--tool-muted); font-size:13px; }
body#top #volume .volume-live-result strong { color:var(--tool-ink); font:400 25px/1.5 var(--ui-font-display,sans-serif); white-space:nowrap; }
body#top #volume [data-volume-error] { color:#c62930; font-size:13px; }
body#top #volume [aria-disabled="true"] { color:var(--tool-muted)!important; text-decoration:none; cursor:default; }
body#top #volume .volume-live-diagram[aria-hidden="true"] { visibility:hidden; }

/* A tactile scale and a large temperature instrument, not eight boxed tabs. */
html:root body#top main#main-content #temperature #temp-range { padding:24px 0!important; }
html:root body#top main#main-content #temperature .temperature-explorer { display:grid; grid-template-columns:minmax(200px,.55fr) minmax(0,1.45fr); margin-top:28px; gap:48px; align-items:start; }
html:root body#top main#main-content #temperature .temperature-instrument { padding:28px 24px; position:relative; min-height:286px; background:var(--tool-soft)!important; border:1px solid var(--tool-line); border-radius:6px; display:flex; flex-direction:column; justify-content:center; gap:16px; overflow:hidden; }
html:root body#top main#main-content #temperature .temperature-instrument-caption { color:var(--tool-muted); font-size:12px; }
html:root body#top main#main-content #temperature .temperature-instrument strong { font:400 clamp(38px,4vw,68px)/1.1 var(--ui-font-display,sans-serif); color:var(--tool-ink); position:relative; }
html:root body#top main#main-content #temperature .temperature-instrument > span:last-child { max-width:14ch; color:var(--tool-muted); font-size:13px; }
html:root body#top main#main-content #temperature .temperature-tube { width:18px; height:180px; position:absolute; right:24px; bottom:28px; background:var(--tool-line); border:5px solid var(--tool-paper); border-radius:12px; box-shadow:0 2px 8px #00000010; overflow:hidden; }
html:root body#top main#main-content #temperature .temperature-tube span { display:block; width:100%; height:100%; background:#cf343b; transform-origin:bottom; transition:transform .22s ease-out; }
html:root body#top main#main-content #temperature .temp-scale { margin:0 0 28px!important; }
html:root body#top main#main-content #temperature .temperature-slider-label { display:block; margin-bottom:18px; font-size:14px; color:var(--tool-muted); }
html:root body#top main#main-content #temperature #tempExampleRange { display:block; width:100%; height:36px; margin:0 0 8px; padding:0; accent-color:#d9272e; cursor:ew-resize; background:transparent; border:0; box-shadow:none; }
html:root body#top main#main-content #temperature .temp-points { gap:0!important; border-bottom:1px solid var(--tool-line); }
html:root body#top main#main-content #temperature .temp-point button { min-height:44px; padding:10px 2px!important; border:0!important; border-bottom:2px solid transparent!important; border-radius:0!important; }
html:root body#top main#main-content #temperature .temp-point button[aria-pressed="true"] { background:transparent!important; border-bottom-color:#d9272e!important; color:#d9272e!important; }
html:root body#top main#main-content #temperature .temp-point-label { font-size:13px!important; }
html:root body#top main#main-content #temperature .temp-display { grid-template-columns:minmax(0,1fr)!important; gap:20px!important; }
html:root body#top main#main-content #temperature :is(.temp-display-card,.temp-live) { border:0!important; padding:0!important; }
html:root body#top main#main-content #temperature .temp-display-value strong { display:none; }
html:root body#top main#main-content #temperature .temp-display-value small { font-size:23px!important; font-weight:600!important; }
html:root body#top main#main-content #temperature .temp-display-note { margin-top:12px; font-size:15px!important; }
html:root body#top main#main-content #temperature .temp-live { border-top:1px solid var(--tool-line)!important; padding-top:18px!important; }
html:root body#top main#main-content #temperature .temp-live p { font-size:14px!important; margin-top:8px!important; }
html:root body#top #temperature .temperature-example-action { margin-top:24px; padding-top:20px; border-top:1px solid var(--tool-line); }
html:root body#top #temperature .temperature-example-action a { display:inline-flex; align-items:center; gap:16px; min-height:44px; color:var(--tool-ink); font-size:16px; font-weight:600; }
html:root body#top #temperature .temperature-example-action p { margin:6px 0 0; color:var(--tool-muted); font-size:13px; line-height:1.6; }
@media(max-width:1000px) {
 html:root body#top main#main-content #schedule-map .map-grid { grid-template-columns:minmax(0,1fr); }
 html:root body#top main#main-content #schedule-map .panel-card { border-left:0; border-top:1px solid var(--tool-line); }
 html:root body#top main#main-content #schedule-map .etl-sea { max-height:600px; }
 body#top .cargo-label-example { grid-template-columns:1fr; }
}
@media(max-width:600px) {
 html:root body#top main#main-content #schedule-map .panel-card { padding:22px 18px; }
 html:root body#top main#main-content #schedule-map .map-badge { inset:14px auto auto 16px; font-size:13px; }
 html:root body#top main#main-content #schedule-map .etl-sea__label { font-size:36px; }
 html:root body#top main#main-content #schedule-map .etl-sea__touch { r:64px; }
 html:root body#top main#main-content #schedule-map .etl-sea__water-names { font-size:22px; }
 html:root body#top main#main-content #temperature .temperature-explorer { grid-template-columns:1fr; gap:24px; }
 html:root body#top main#main-content #temperature .temperature-instrument { min-height:140px; padding:22px; }
 html:root body#top main#main-content #temperature .temperature-tube { height:110px; }
 html:root body#top main#main-content #temperature .temp-points { grid-template-columns:repeat(4,minmax(0,1fr))!important; }
 html:root body#top main#main-content #temperature .temp-range-head { display:block; }
 html:root body#top main#main-content #temperature .temp-range-badge { display:none; }
 body#top #volume .volume-live-result strong { font-size:21px; }
}
@media(prefers-reduced-motion:reduce){html:root body#top main#main-content #temperature .temperature-tube span { transition:none; }}