/* Chesapeake Bay chart desk.
   One dark field, hairline rules instead of cards, a serif for names, tabular
   monospace for every number, and a single warm lamp-amber for "now"/selected.
   The map keeps its own colour; the chrome around it stays quiet. */
:root{
  color-scheme:dark;
  --bg:#07090c;--bg-2:#0b0e12;--rule:#1f252b;--rule-2:#2b333b;
  --ink:#e9e3d6;--ink-2:#b7b2a7;--dim:#787f86;
  --lamp:#e2b05a;--lamp-2:#9a7536;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
.num,.clock strong,.seg span,.unit,.tag,.legend-labels,.stations td,.stations th,.spot strong,.spot dd,.sun-grid dd,.tide-next dd,.map-readout span,.model-status,.runline,.time-axis text,#spotCoordinates,#readingAge,.row-head span+span{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Masthead */
.masthead{height:48px;display:flex;align-items:center;gap:28px;padding:0 18px;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.brand-name{font-size:17px;letter-spacing:.01em}
.brand-sub{color:var(--ink-2);font-style:italic}
.masthead nav{display:flex;gap:18px;margin-left:auto}
.masthead nav a{text-decoration:none;color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a[aria-current]{color:var(--ink);border-bottom-color:var(--lamp)}
.model-status{font-size:11.5px;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:7px}
.model-status i{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.model-status.ok i{background:#6fb37a}.model-status.stale i{background:var(--lamp)}.model-status.err i{background:#c9584f}

/* Three columns */
.desk-grid{display:grid;grid-template-columns:272px minmax(360px,1fr) 332px;height:calc(100dvh - 48px);min-height:600px}
.col{padding:18px 18px 24px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent}
.col-model{border-right:1px solid var(--rule)}
.col-obs{border-left:1px solid var(--rule)}
h1{font:400 30px/1.05 var(--serif);letter-spacing:-.015em;margin:4px 0 6px}
.runline{margin:0 0 18px;font-size:11px;color:var(--dim);line-height:1.5}
.block{padding:14px 0;border-top:1px solid var(--rule)}
.block:first-of-type{border-top:0;padding-top:0}
.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;font-style:italic;color:var(--ink-2)}
.row-head em{font-style:normal;color:var(--ink)}
.row-head span+span{font-style:normal;font-size:11px;color:var(--dim)}
.note{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--dim)}
.note a{color:var(--ink-2)}
.sources{padding-top:14px;border-top:1px solid var(--rule)}

/* Clock + scrubber */
.clock{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.clock strong{font-weight:500;font-size:24px;letter-spacing:-.02em}
.clock>span{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.tag{font-size:10.5px;color:var(--dim);text-transform:lowercase}
.tag.forecast{color:var(--lamp)}
.scrubber{margin:8px 0 4px}
input[type=range]{display:block;width:100%;margin:0;height:22px;background:transparent;-webkit-appearance:none;appearance:none}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--rule-2)}
input[type=range]::-moz-range-track{height:1px;background:var(--rule-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--lamp);border:0;box-shadow:0 0 0 3px var(--bg)}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--lamp);border:0;box-shadow:0 0 0 3px var(--bg)}
input[type=range]:disabled::-webkit-slider-thumb{background:var(--dim)}
.time-axis{display:block;width:100%;height:30px;overflow:visible}
.time-axis line{stroke:var(--rule-2)}
.time-axis .past{fill:#ffffff;opacity:.035}
.time-axis .now{stroke:var(--lamp)}
.time-axis text{fill:var(--dim);font-size:10px}
.time-axis text.now{fill:var(--lamp)}
.transport{display:flex;align-items:center;gap:8px;margin-top:8px}
.speed-row{justify-content:space-between;margin-top:10px}
.btn{height:28px;padding:0 11px;border:1px solid var(--rule-2);border-radius:3px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:7px;background:var(--bg-2)}
.btn:hover{border-color:var(--ink-2)}
.btn:disabled{opacity:.4;cursor:default}
.btn[aria-pressed=true]{border-color:var(--lamp);color:var(--lamp)}
.btn .glyph{font-size:10px}
.unit{font-size:10.5px;color:var(--dim)}

/* Segmented radios */
.seg{display:inline-flex;margin:0;padding:0;border:1px solid var(--rule-2);border-radius:3px;overflow:hidden}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:block;padding:5px 10px;font-size:12px;color:var(--ink-2);border-left:1px solid var(--rule-2);pointer-events:none}
.seg label:first-child span{border-left:0}
.seg input:checked+span{background:var(--ink);color:var(--bg)}
.seg input:focus-visible+span{outline:1px solid var(--lamp);outline-offset:-1px}
.seg-speed span{padding:4px 7px;min-width:25px;text-align:center}

/* Legend + toggles */
.legend{margin:12px 0 10px}
.legend-ramp{height:6px;border-radius:2px;background:linear-gradient(90deg,#122478,#1a40b0,#2264ce,#2c92de,#34c4c4,#6ed678,#d6be50,#e8703e,#cc388e)}
.legend-note{margin:4px 0 0;font:10.5px var(--mono);color:var(--dim)}
.legend-labels{display:flex;justify-content:space-between;margin-top:5px;font-size:10.5px;color:var(--dim)}
.legend-labels span:nth-child(2){color:var(--ink-2)}
.toggles{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--ink-2)}
.toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.toggle input{margin:0;accent-color:var(--lamp);width:13px;height:13px}
.toggle-select select{background:none;border:0;border-bottom:1px solid var(--rule-2);padding:0 2px;font-size:12.5px;color:var(--ink)}
.toggle-select select:focus{outline:none;border-bottom-color:var(--lamp)}

/* Places */
.places{margin:0;display:flex;flex-wrap:wrap;gap:2px 0;font-size:13px}
.places button{color:var(--ink-2);padding:2px 0;border-bottom:1px solid transparent}
.places button:hover{color:var(--ink);border-bottom-color:var(--ink-2)}
.places button+button::before{content:"·";color:var(--rule-2);margin:0 8px;display:inline-block}

/* Sun */
.sun-grid,.spot-grid,.tide-next{display:grid;margin:0;gap:6px 12px}
.sun-grid{grid-template-columns:repeat(4,1fr)}
.sun-grid div,.spot-grid div,.tide-next div{display:flex;flex-direction:column;gap:1px}
dt{font-size:10.5px;color:var(--dim);font-style:italic}
dd{margin:0;font-size:13px;color:var(--ink)}
.sun-grid dd{font-size:11.5px;white-space:nowrap}
.sun-grid div:nth-child(2) dd,.sun-grid div:nth-child(3) dd{color:var(--lamp)}

/* Map */
.col-map{position:relative;min-height:0;overflow:hidden;background:#02070e;isolation:isolate}
#map,#fieldCanvas,#flowCanvas{position:absolute;inset:0;width:100%;height:100%}
#map{background:#020710}
#map.leaflet-container{background:#02070e;font:inherit}
#fieldCanvas{display:none}
#flowCanvas{z-index:410;pointer-events:none;transition:opacity .25s}
#map.basemap-fallback .leaflet-tile-pane{filter:grayscale(1) invert(1) brightness(.43) contrast(1.25) hue-rotate(178deg)}
.leaflet-control-attribution{font:9.5px var(--mono)!important;background:rgba(7,9,12,.75)!important;color:var(--dim)!important;padding:2px 6px!important}
.leaflet-control-attribution a{color:var(--ink-2)!important}
.map-readout{position:absolute;z-index:500;top:12px;left:14px;pointer-events:none;padding:6px 10px;border-left:2px solid var(--lamp);background:rgba(7,9,12,.72);backdrop-filter:blur(3px)}
.map-readout strong{display:block;font-weight:400;font-size:15px;line-height:1.2}
.map-readout span{display:block;margin-top:2px;font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-zoom{position:absolute;z-index:500;top:12px;right:12px;display:grid;border:1px solid var(--rule-2);border-radius:3px;overflow:hidden;background:rgba(7,9,12,.8)}
.map-zoom button{width:30px;height:30px;font:18px var(--mono);color:var(--ink-2)}
.map-zoom button+button{border-top:1px solid var(--rule-2)}
.map-zoom button:hover{color:var(--ink);background:var(--bg-2)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--bg-2);color:var(--ink);border-radius:3px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.leaflet-tooltip{background:var(--bg-2);color:var(--ink);border:1px solid var(--rule-2);font:12px var(--serif);box-shadow:none}
.leaflet-tooltip::before{display:none}

/* Cursor sample */
.spot-main{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.arrow{width:34px;height:34px;flex:0 0 auto;color:var(--lamp);transition:transform .35s ease;opacity:.35}
.spot.live .arrow{opacity:1}
.spot-main strong{font-weight:500;font-size:26px;letter-spacing:-.02em;line-height:1}
.u{font-size:11px;color:var(--dim);margin-left:4px}
.spot-main small{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-2)}
.spot-grid{grid-template-columns:1fr 1fr}
.spot-grid dd{font-size:17px}
.spot-foot{display:block;margin-top:9px;font-size:11px;color:var(--dim);line-height:1.5}

/* Station table */
.stations{width:100%;border-collapse:collapse;font-size:12.5px}
.stations th{font-weight:400;font-size:10.5px;color:var(--dim);text-align:right;padding:0 0 6px;border-bottom:1px solid var(--rule-2)}
.stations th:first-child,.stations td:first-child{text-align:left}
.stations td{padding:6px 0 6px 6px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap;color:var(--ink-2)}
.stations td:first-child{padding-left:0;font-family:var(--serif);font-size:13px;color:var(--ink);cursor:pointer}
.stations td:first-child small{display:block;font:10px var(--mono);color:var(--dim)}
.stations tr:hover td:first-child{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.stations tr.selected td{color:var(--ink)}
.stations tr.selected td:first-child{box-shadow:inset 2px 0 var(--lamp);padding-left:8px}
.stations td.na{color:var(--rule-2)}
.stations td .w{display:inline-block;width:9px;transform-origin:50% 50%;color:var(--lamp);margin-right:3px}

/* Tide */
.tide-chart-wrap{height:190px;width:100%}
#tideChart{display:block;width:100%;height:100%}
.tide-next{grid-template-columns:1fr 1fr 1fr;margin-top:10px}
.tide-next dd{font-size:13px}
.tide-next dd small{display:block;font-size:10.5px;color:var(--dim)}
#tideStatus{margin-top:8px}

/* Narrower desktops */
@media(max-width:1180px){
  .desk-grid{grid-template-columns:250px minmax(320px,1fr);height:auto;min-height:0}
  .col-map{min-height:72vh}
  .col-model{max-height:72vh}
  .col-obs{grid-column:1/-1;border-left:0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 28px;align-items:start}
  .col-obs .block{border-top:0;padding-top:0}
  .col-obs .sources{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:12px}
}
/* Phones: map first, then the controls, then observations */
@media(max-width:700px){
  .masthead{height:auto;flex-wrap:wrap;gap:10px 18px;padding:10px 14px}
  .masthead nav{margin-left:0;width:100%;gap:16px;order:3}
  .model-status{margin-left:auto}
  .desk-grid{display:flex;flex-direction:column;height:auto;min-height:0}
  .col-map{order:1;height:62vh;min-height:380px}
  .col-model{order:2;border-right:0;max-height:none}
  .col-obs{order:3;display:block;border-top:1px solid var(--rule)}
  .col{padding:16px 14px 22px}
  .col-obs .block{border-top:1px solid var(--rule);padding-top:14px}
  .col-obs .block:first-of-type{border-top:0;padding-top:0}
  .map-readout{top:10px;left:10px;max-width:calc(100% - 62px)}
  .map-readout strong{font-size:13.5px}
}