/* Passage planner — muted admiralty-chart palette, carried over from the
   single-file prototype this replaces. Light only: the whole point of the
   colour scheme is that it reads like paper. */

:root{
  --ink:#12211f; --ink-2:#4a5c59; --ink-3:#7d8d8a;
  --paper:#f2efe6; --panel:#fbfaf6; --rule:#cfc9b8; --dim:#e0dccf;
  --track:#8c3b1c; --gate:#0f6e56; --caution:#a8791a; --sea:#2a6f8f;
  --sail:#3b7a4f; --motorsail:#a8791a; --motor:#8c3b1c;
  --wave:#4a3aa7; --alarm:#a83232;
  --sheet-peek:250px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:ui-sans-serif,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); background:var(--paper);
  display:flex; flex-direction:column; overflow:hidden;
}
:focus-visible{outline:2px solid var(--gate); outline-offset:2px}

/* ---------------------------------------------------------------- header */

header{
  padding:8px 14px; border-bottom:1px solid var(--rule); background:var(--panel);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex:0 0 auto;
}
h1{margin:0; font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.sub{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.spacer{margin-left:auto}

.tabs{display:flex; gap:6px}
.tabs button, .pill{
  font:inherit; font-size:12px; letter-spacing:.04em; padding:6px 12px; cursor:pointer;
  background:transparent; color:var(--ink-2); border:1px solid var(--rule); border-radius:2px;
}
.tabs button:hover, .pill:hover{background:var(--paper); color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink); color:var(--panel); border-color:var(--ink)}

/* The planner tab wears the chart's sea-blue, so next to the green
   "Plan passage" action it reads as a place to go, not another control. */
.tabs #tabPlanner{background:#e0ecf2; border-color:var(--sea); color:#1d5670}
.tabs #tabPlanner:hover{background:#cfe2eb; color:#123f52}
.tabs #tabPlanner[aria-selected="true"]{background:var(--sea); border-color:var(--sea); color:var(--panel)}

.notnav{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:var(--track); border:1px solid var(--track); border-radius:2px; padding:4px 8px;
  white-space:nowrap;
}

/* ------------------------------------------------------- banners & status */

.banner{
  padding:8px 14px; font-size:12.5px; line-height:1.45; border-bottom:1px solid var(--rule);
  display:flex; gap:10px; align-items:baseline; flex:0 0 auto;
}
.banner[hidden]{display:none}
.banner b{letter-spacing:.12em; text-transform:uppercase; font-size:10.5px; white-space:nowrap}
.banner.sample{background:#f6edd5; color:#5c4a12; border-bottom-color:var(--caution)}
.banner.error{background:#f7e3de; color:#6d2a13; border-bottom-color:var(--track)}
.banner.info{background:#e6efe9; color:#123f33}

/* ------------------------------------------------------------- controls */

.controls{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
  padding:8px 14px; border-bottom:1px solid var(--rule); background:var(--panel);
  flex:0 0 auto;
}
.field{display:flex; flex-direction:column; gap:3px; min-width:0}
.field > span, .check span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.field select, .field input[type=datetime-local], .field input[type=number]{
  font:inherit; font-size:12.5px; padding:5px 6px; background:var(--panel);
  border:1px solid var(--rule); border-radius:2px; color:var(--ink); max-width:230px;
}
.check{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-2); padding-bottom:5px}
.check input{accent-color:var(--gate)}
button.go{
  font:inherit; font-size:12.5px; font-weight:600; padding:6px 14px; cursor:pointer;
  background:var(--gate); color:var(--panel); border:1px solid var(--gate); border-radius:2px;
}
button.go:hover{background:#0c5a46}
button.go[disabled]{opacity:.55; cursor:progress}

/* Determinate once the sweep reports numbers; a sliding block while waiting
   on the forecast fetch, when there is nothing honest to count yet. */
.progress{
  width:170px; height:8px; border-radius:2px; overflow:hidden;
  background:var(--dim); align-self:center; margin-bottom:8px;
}
.progress[hidden]{display:none}
.progress i{display:block; height:100%; width:0; background:var(--gate); transition:width .15s}
.progress.wait i{width:30%; animation:progslide 1.2s linear infinite}
@keyframes progslide{from{margin-left:-30%}to{margin-left:100%}}

/* ------------------------------------------------------------------ main */

main{flex:1; display:flex; min-height:0; position:relative}
.view{display:flex; flex:1; min-height:0; width:100%}
.view[hidden]{display:none}

#map{flex:1; min-height:0; background:#dfe6e6; position:relative}
/* Above Leaflet's marker pane (600), below its controls (800). */
#nightveil{
  position:absolute; inset:0; pointer-events:none; z-index:650;
  background:#0d1b2a; opacity:0; transition:opacity .6s;
}
#mapFallback{
  position:absolute; inset:0; z-index:500; display:none; place-content:center;
  padding:24px; text-align:center; font-size:13px; color:var(--ink-2); background:var(--paper);
}
#mapFallback.on{display:grid}
.leaflet-container{font-family:inherit}

/* Wind overlay. The canvas sits in Leaflet's overlay pane so it pans with the
   map; the legend is chrome, bottom-left, clear of the scale bar. */
.wind-canvas{position:absolute; top:0; left:0; z-index:250}
#windLegend{
  position:absolute; left:10px; bottom:34px; z-index:700; width:172px;
  padding:6px 8px 5px; background:var(--panel); border:1px solid var(--rule);
  border-radius:4px; box-shadow:0 1px 5px rgba(0,0,0,.14);
}
#windLegend[hidden]{display:none}
#windLegend .scale{display:flex; height:8px; border-radius:2px; overflow:hidden}
#windLegend .scale i{flex:1}
#windLegend .scale i:nth-child(1){background:#d6e8eb}
#windLegend .scale i:nth-child(2){background:#9bc8be}
#windLegend .scale i:nth-child(3){background:#b0cd8c}
#windLegend .scale i:nth-child(4){background:#ebd67a}
#windLegend .scale i:nth-child(5){background:#e2a056}
#windLegend .scale i:nth-child(6){background:#be5c40}
#windLegend .ticks{
  display:flex; justify-content:space-between; font-size:8.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums; margin-top:2px;
}
#windLegend .src{font-size:8.5px; color:var(--ink-3); margin-top:1px}

/* Simulated time and conditions, worn on the chart itself. Above the night
   veil (650), below Leaflet's controls (800) so popups still win. */
/* Fixed width: the digits and descriptors change with every step, and a box
   that breathes with its text is more distracting than the numbers in it. */
#mapHud{
  position:absolute; top:10px; right:10px; z-index:700; width:290px;
  display:flex; flex-direction:column; gap:6px; align-items:stretch;
}
#mapClock{
  display:flex; align-items:center; gap:9px; padding:7px 10px 7px 7px; width:100%;
  background:var(--panel); border:1px solid var(--rule); border-radius:4px;
  box-shadow:0 1px 5px rgba(0,0,0,.14);
}
#mapWx{
  display:flex; align-items:center; gap:8px; padding:6px 10px 6px 8px; width:100%;
  background:var(--panel); border:1px solid var(--rule); border-radius:4px;
  box-shadow:0 1px 5px rgba(0,0,0,.14);
}
#wxText{min-width:0}
#mapBoat{
  width:100%; padding:4px 6px 2px;
  background:var(--panel); border:1px solid var(--rule); border-radius:4px;
  box-shadow:0 1px 5px rgba(0,0,0,.14);
}
#mapBoat svg{width:100%; display:block}
#boatView3d{width:100%; height:180px; border-radius:3px; overflow:hidden}
#boatView3d[hidden]{display:none}
#boatView3d canvas{display:block; width:100% !important; height:100% !important}
#boatCaption{
  display:flex; justify-content:space-between; padding:3px 2px 1px;
  font-size:8.5px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase;
}
/* The slot keeps its size when there is no sky data, so the text never shifts. */
#wxSky{flex:0 0 auto; width:26px; height:26px}
#wxSky svg{width:26px; height:26px; display:block}
#wxArrow{width:26px; height:26px; flex:0 0 auto}
#wxWind{font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.25}
#wxSea{font-size:10.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
#wxSource{font-size:9px; color:var(--ink-3); margin-top:2px; letter-spacing:.03em}
#clockFace{width:64px; height:64px; display:block}
#clockMeta{display:flex; flex-direction:column; gap:1px; align-items:flex-start}
#clockDigits{font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.15}
#clockDigits .zone{font-size:10px; font-weight:600; color:var(--sea); letter-spacing:.08em}
#clockDay{font-size:10px; color:var(--ink-3); font-variant-numeric:tabular-nums}

aside{
  width:35%; min-width:320px; max-width:460px; border-left:1px solid var(--rule);
  background:var(--panel); overflow-y:auto; padding:12px 14px; font-size:13px; line-height:1.5;
}
aside h2{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  margin:14px 0 7px; font-weight:600;
}
aside h2:first-of-type{margin-top:0}

/* Space is reserved for the longest narrative the data can produce, so that
   scrubbing never shoves the instruments up and down the panel. */
#story{
  margin:0 0 10px; font-size:13.5px; line-height:1.5; padding:9px 10px;
  background:var(--paper); border-radius:3px; min-height:122px;
}

.tile{background:var(--paper); border-radius:3px; padding:6px; position:relative}

/* fuel settings ----------------------------------------------------------- */

#fuelCfg{
  position:absolute; top:3px; right:3px; padding:1px 4px; cursor:pointer;
  font-size:12px; line-height:1; color:var(--ink-3);
  background:transparent; border:0; border-radius:2px;
}
#fuelCfg:hover{color:var(--ink); background:var(--dim)}
#fuelPop{
  position:absolute; top:22px; right:3px; z-index:20; width:180px;
  background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:9px 10px; box-shadow:0 2px 8px rgba(0,0,0,.15);
  display:flex; flex-direction:column; gap:7px; font-size:11.5px;
}
#fuelPop[hidden]{display:none}
#fuelPop label{display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--ink-2)}
#fuelPop input{
  width:64px; font:inherit; font-size:12px; padding:3px 4px;
  border:1px solid var(--rule); border-radius:2px; background:var(--panel); color:var(--ink);
}
#fuelPop .row{display:flex; gap:6px}
#fuelPop .row button{
  font:inherit; font-size:11px; padding:4px 7px; cursor:pointer; border-radius:2px;
  border:1px solid var(--rule); background:var(--panel); color:var(--ink-2);
}
#fuelPop .row button:hover{background:var(--paper); color:var(--ink)}
#fuelPop .row #fuelApply{background:var(--gate); border-color:var(--gate); color:var(--panel); font-weight:600}
#fuelPop .row #fuelApply:hover{background:#0c5a46}
.instruments{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px}
.instruments svg{width:100%; display:block}

#dialWrap{
  background:var(--paper); border-radius:4px; padding:8px 10px; margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
#dial{width:158px; flex:0 0 auto}
#posLabel{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
#pos{font-size:15px; font-weight:600; line-height:1.25}
#dialSub{font-size:11.5px; color:var(--ink-3); margin-top:3px; font-variant-numeric:tabular-nums}

/* the two things the prototype could not show ------------------------------ */

.headline{border:1px solid var(--rule); border-radius:4px; padding:9px 10px; margin-bottom:6px}
.headline.tide{background:#eaf1f4; border-color:#bcd3dd}
.streamrow{display:flex; gap:10px; align-items:center}
#streamRose{width:104px; height:104px; flex:0 0 auto}
.readouts{display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; flex:1; min-width:0}
.readouts div{min-width:0; min-height:50px}
.readouts em{
  display:block; font-style:normal; font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}
.readouts b{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; display:block}
.readouts s{text-decoration:none; font-size:11px; color:var(--ink-2)}

/* Always present, in one of three states — an answer to "is she holding the
   line?" that never moves the panel underneath it. */
.alarm{
  margin:7px 0 0; padding:6px 8px; border-radius:3px; background:#f7e3de;
  color:#6d2a13; font-size:12px; line-height:1.4; border-left:3px solid var(--track);
  min-height:70px;
}
.alarm.caution{background:#f6edd5; color:#5c4a12; border-left-color:var(--caution)}
.alarm.calm{background:transparent; color:var(--ink-3); border-left-color:var(--rule)}

.mixbar{display:flex; height:12px; border-radius:2px; overflow:hidden; margin-bottom:6px; background:var(--dim)}
.mixbar i{height:100%; transition:width .25s}
.legend{font-size:11.5px; color:var(--ink-2); line-height:1.7}
.legend .sw{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px}
.figures{display:flex; gap:14px; margin-top:6px; font-size:12px; color:var(--ink-2); flex-wrap:wrap}
.figures b{font-variant-numeric:tabular-nums; color:var(--ink)}

/* seasickness ------------------------------------------------------------- */

.meter{margin-bottom:8px}
.meter .lab{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); margin-bottom:3px}
.meter .lab b{color:var(--ink); font-variant-numeric:tabular-nums; font-size:12px}
.meter .bar{height:8px; background:var(--dim); border-radius:2px; overflow:hidden}
.meter .bar i{display:block; height:100%; transition:width .2s}
.bands{display:flex; gap:2px; margin:8px 0 5px}
.bands i{flex:1; height:9px; background:var(--dim)}
.bands i:first-child{border-radius:2px 0 0 2px}
.bands i:last-child{border-radius:0 2px 2px 0}
.bandscale{display:flex; justify-content:space-between; font-size:10px; color:var(--ink-3)}
#sickVerdict{font-size:15px; font-weight:600; margin:6px 0 3px; min-height:46px}
#sickWhy{font-size:12px; color:var(--ink-2); line-height:1.5; min-height:74px}

/* honesty panels ---------------------------------------------------------- */

ul.plain{list-style:none; margin:0; padding:0}
ul.plain li{
  font-size:12px; line-height:1.45; padding:6px 8px; margin-bottom:5px;
  border-left:3px solid var(--rule); background:var(--paper); border-radius:0 3px 3px 0;
}
li.made{border-left-color:var(--gate)}
li.missed{border-left-color:var(--track); background:#f7e3de}
li.warn{border-left-color:var(--caution); background:#f6edd5}
li.caution{border-left-color:var(--caution)}
li b{display:block; font-weight:600}
li .meta{display:block; color:var(--ink-2); font-variant-numeric:tabular-nums}

.chartbox{position:relative; height:104px; margin-bottom:4px}
.note{margin-top:14px; padding-top:10px; border-top:1px solid var(--rule); font-size:11px; color:var(--ink-3); line-height:1.5}
.note .warnword{color:var(--track); font-weight:600}
.note a{color:var(--sea)}

/* ----------------------------------------------------------- transport bar */

.scrub{
  padding:8px 14px; border-top:1px solid var(--rule); background:var(--panel);
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
}
.scrub[hidden]{display:none}
.transport{display:flex; gap:4px}
.tbtn{
  font:inherit; font-size:12px; line-height:1; padding:8px 11px; cursor:pointer;
  background:var(--panel); color:var(--ink-2); border:1px solid var(--rule); border-radius:3px;
  transition:background .15s,color .15s;
}
.tbtn:hover{background:var(--paper); color:var(--ink)}
.speedsel{
  font:inherit; font-size:12px; padding:7px 5px; cursor:pointer;
  background:var(--panel); color:var(--ink-2); border:1px solid var(--rule);
  border-radius:3px;
}
.speedsel:hover{background:var(--paper); color:var(--ink)}
.tbtn.play{
  background:var(--gate); border-color:var(--gate); color:var(--panel); min-width:82px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:600;
}
.tbtn.play:hover{background:#0c5a46; color:var(--panel)}
.clockwrap{width:150px; flex:0 0 auto}   /* fixed, so the flags cannot resize it */
.flags{display:flex; gap:4px; margin-top:2px; min-height:15px; flex-wrap:wrap}
.flag{font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; padding:1px 5px; border-radius:2px}
.flag.night{background:#0d1b2a; color:#dbe4ec}
.flag.extrap{background:repeating-linear-gradient(45deg,#f6edd5,#f6edd5 3px,#e3d3a4 3px,#e3d3a4 6px); color:#5c4a12; border:1px solid var(--caution)}
.flag.tide{background:#f7e3de; color:#6d2a13; border:1px solid var(--track)}

.scrubtrack{flex:1; position:relative; min-width:80px; display:flex; align-items:center}
.scrubtrack input{width:100%; accent-color:var(--gate); height:4px; position:relative; z-index:2}
#extrapMark{
  position:absolute; top:50%; transform:translateY(-50%); height:10px; right:0; z-index:1;
  background:repeating-linear-gradient(45deg,rgba(168,121,26,.30),rgba(168,121,26,.30) 3px,transparent 3px,transparent 6px);
  border-left:1px solid var(--caution); pointer-events:none; border-radius:0 2px 2px 0;
}
#remaining{min-width:74px; text-align:right}

/* ------------------------------------------------------- departure planner */

#view-planner{display:block; overflow-y:auto; padding:14px 16px 28px}
#view-planner[hidden]{display:none}
.planner-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:16px; align-items:start}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:4px; padding:12px 14px}
.card h2{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px; font-weight:600}
#sweepChartWrap{overflow-x:auto}
#sweepChart{width:100%; min-width:520px; height:auto; display:block}
#sweepChart .opt{cursor:pointer}
#sweepChart .opt:focus-visible{outline:2px solid var(--gate)}
.best{background:#e6efe9; border-color:var(--gate)}
.best b{font-size:16px}

.tablewrap{overflow:auto; max-height:44vh; margin-top:8px}
table.opts{border-collapse:collapse; width:100%; font-size:12px; font-variant-numeric:tabular-nums}
table.opts th{
  position:sticky; top:0; background:var(--panel); text-align:right; font-weight:600;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  padding:5px 7px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
table.opts th:first-child, table.opts td:first-child{text-align:left}
table.opts td{padding:4px 7px; border-bottom:1px solid #e9e5d9; text-align:right; white-space:nowrap}
table.opts tbody tr{cursor:pointer}
table.opts tbody tr:hover{background:var(--paper)}
table.opts tr.nonviable td{color:var(--ink-3)}
table.opts tr.chosen{background:#e6efe9}
.tick{color:var(--gate); font-weight:700}
.cross{color:var(--track); font-weight:700}

/* -------------------------------------------------------------- responsive */

/* Wide screens: the panel doubles in width and splits into two fixed columns —
   narrative and instruments on the left, gates/warnings/charts on the right —
   so the whole briefing is visible at once. Each column scrolls independently
   only if it must; nothing can overflow sideways. Below the breakpoint the two
   wrappers stack and the panel stays a single scrolling column. */
@media (min-width:1500px){
  aside{
    width:52%; max-width:940px; display:flex; gap:0; overflow-y:hidden; padding:0;
    font-size:12.5px;
  }
  aside .pcol{flex:1 1 0; min-width:0; overflow-y:auto; padding:10px 14px}
  aside .pcol + .pcol{border-left:1px solid var(--rule)}

  /* Compact enough that both columns fit a typical desktop window with no
     vertical scroll: smaller reserved narrative space, one row of gauges,
     tighter section rhythm, slightly shorter charts. */
  aside h2{margin:10px 0 6px}
  #story{min-height:92px; font-size:13px; margin-bottom:8px; padding:7px 9px}
  #dialWrap{margin-bottom:8px; padding:6px 9px}
  #dial{width:165px}
  .instruments{margin-bottom:8px}
  .instruments svg{max-height:128px}
  #streamRose{width:86px; height:86px}
  .headline{padding:7px 9px}
  .readouts div{min-height:42px}
  .alarm{min-height:44px}
  .meter{margin-bottom:6px}
  .bands{margin:6px 0 4px}
  #sickVerdict{min-height:0; margin:5px 0 2px; font-size:14px}
  #sickWhy{min-height:52px}
  ul.plain li{padding:5px 8px; margin-bottom:4px; font-size:11.5px}
  .chartbox{height:90px}
  .note{margin-top:10px; padding-top:8px}
}

#sheetHandle{display:none}
@media (max-width:900px){
  .planner-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  header{gap:8px; padding:7px 10px}
  h1{font-size:12.5px}
  /* The control strip scrolls sideways rather than collapsing on itself. */
  .controls{gap:10px; padding:7px 10px; overflow-x:auto; flex-wrap:nowrap}
  .field, .check, button.go{flex:0 0 auto}
  .field select{min-width:150px}
  .field input[type=datetime-local]{min-width:186px}
  .field input[type=number]{min-width:80px}
  .check{white-space:nowrap}
  main{display:block; position:relative; flex:1}
  .view{display:block; height:100%}
  #map{position:absolute; inset:0; height:100%}
  /* The chart HUD — clock, weather card, 3D boat — is a luxury of a wide
     screen. On a phone it would cover a third of the map, and the 3D scene
     costs battery for something the panel already says in words. */
  #mapHud{display:none}
  #windLegend{bottom:10px; width:140px}
  /* The sheet is one scrolling column again: the two-column split is a
     wide-screen layout, and its per-column scrolling must not survive here. */
  aside{overflow-y:auto; -webkit-overflow-scrolling:touch}
  aside .pcol{display:block; overflow:visible; padding:0; border-left:0}
  aside{
    position:fixed; left:0; right:0; bottom:62px; width:auto; max-width:none; min-width:0;
    max-height:76vh; border-left:0; border-top:1px solid var(--rule);
    border-radius:14px 14px 0 0; z-index:1000;
    transform:translateY(calc(100% - var(--sheet-peek))); transition:transform .32s ease;
    box-shadow:0 -6px 20px rgba(0,0,0,.14); padding:0 12px 12px;
  }
  aside.open{transform:translateY(0)}
  #sheetHandle{
    display:block; width:100%; background:var(--panel); border:0; padding:7px 0 4px;
    cursor:pointer; position:sticky; top:0; z-index:2;
  }
  #sheetHandle span{display:block; width:38px; height:4px; border-radius:2px; background:var(--rule); margin:0 auto}
  .instruments{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:8px; padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }
  .instruments > div{flex:0 0 46%; scroll-snap-align:center}
  .instruments svg{max-height:96px}
  #dialWrap{padding:6px 8px}
  #dial{width:104px}
  .scrub{position:fixed; left:0; right:0; bottom:0; z-index:1001; padding:7px 8px; gap:8px}
  .clockwrap{width:auto; min-width:78px}
  .clockdate{display:none}
  .scrub .check span{display:none}   /* the checkbox keeps its aria-label */
  .tbtn{padding:7px 9px}
  .tbtn.play{min-width:60px}
  .tbtn.play span{display:none}
  #remaining{display:none}
  #view-planner{padding:12px 10px 80px}
  /* The sweep table is the one thing here that cannot be made narrow enough
     to fit; let it scroll sideways inside its own box rather than stretching
     the page. */
  .tablewrap{max-height:none; overflow:auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  #nightveil{transition:none}
}