/* ═══════════ TYPE FLOOR — 11px, enforced by tests/test_type_floor.py ═══════════
   Nothing in this file may declare a font-size below 11px, in any state, at any breakpoint.
   The audience reads this on a flybridge in daylight, often on a wet screen, and the console is
   deliberately dense — the floor buys legibility without buying whitespace.

   178 declarations used to sit below 11px on a 7 / 8 / 8.5 / 9 / 9.5 / 10 / 10.5 ramp. They were
   raised onto this four-step ladder, which is MONOTONE: sizes that differed before still differ
   after, so the cascade survives (.pill 10.5 > .pill.sm 9.5 became 12.5 > 11.5, and every
   `body.authed` override still sits at or above the base rule it lifts).

     11px    THE FLOOR. Smallest type that exists. Badge and status-chip text, permission tags,
             map attribution, column eyebrows, the infra badge — glyph-like labels read in one
             glance, never in a sentence.  (was 7 / 8 / 8.5)
     11.5px  Secondary metadata one step above the floor: table column heads, timeline and legend
             labels, field captions, verdict glyphs, sub-rows under a title.  (was 9 / 9.5)
     12px    Dense control and body text: buttons, rows, filter chips, list meta, the majority of
             what is actually READ rather than scanned.  (was 10)
     12.5px  The top of the former sub-floor band — the few labels that were deliberately the
             largest of the small type, e.g. .pill and the tab rail.  (was 10.5)

   Do NOT "normalise" this by value. `.pill` is declared in four rules and `.pill.sm` in three;
   mapping a VALUE to a single token collapses them together and silently voids the `body.authed`
   override. Change sizes per selector, then re-run the floor test. */
:root{
  --bg:#060a12; --bg2:#0a1120; --pan:#0d1626; --edge:#16233c; --grid:#11203a;
  --ink:#e9eff8; --dim:#90a4c4; --faint:#7488ab;
  --brand:#f2a93b; --teal:#3fd0c9; --go:#4ee39f; --caution:#ffc24d; --nogo:#ff8080;
  --swell:#7c6cff; --wind:#5fb0ff; --violet:#b98cff; --brand2:#ffd07a; --pan2:#101c31;
  /* Wind-speed ramp for the anchor overview field: a SEQUENTIAL axis (calm -> gale), deliberately
     its own scale and not the categorical GO/CAUTION/NO-GO triad. Values duplicate --teal and
     --brand rather than referencing them so that retuning a brand or verdict hue cannot silently
     restripe gale-force wind; --wind-r40 is likewise NOT --nogo. The 28->40kt step is the ramp's
     strongest lightness separation because it is the one boundary that means "this is now
     dangerous" — see test_wind_ramp_terminal_step_is_its_strongest. */
  --wind-r0:#3fa0e8; --wind-r10:#3fd0c9; --wind-r18:#f2c94b; --wind-r28:#f2a93b; --wind-r40:#ff5d5d;
  --radius-sm:12px; --radius-md:16px; --radius-lg:22px; --radius-xl:28px;
  --shadow:0 24px 80px rgba(0,0,0,.44); --soft-shadow:0 14px 40px rgba(0,0,0,.26);
  --disp:Inter,ui-sans-serif,'Helvetica Neue',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono','Menlo',monospace;
  /* Aliases for names the app already uses. An undefined var() is invalid at computed-value time:
     the declaration still wins the cascade and then computes to unset, so it does NOT fall back to
     the class rule. Without --amber, `.btn style="background:var(--amber);color:#000"` lost .btn's
     gradient entirely and rendered black-on-transparent (1.16:1) — every SAVE/SHARE button. Without
     --body, each `font:` shorthand using it dropped its size and line-height too. Keep these defined. */
  --amber:var(--brand);
  --body:var(--disp);
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{background:radial-gradient(120% 80% at 50% -10%,#0c1730 0%,var(--bg) 60%);
  color:var(--ink);font-family:var(--disp);overflow:hidden}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 18px;border-bottom:1px solid var(--edge);background:#0a112099;backdrop-filter:blur(8px)}
.lock{font:800 19px var(--disp);letter-spacing:2.5px} .lock b{color:var(--brand);font-weight:800}
.tag{color:var(--faint);font:600 11.5px var(--mono);letter-spacing:2.5px;margin-top:2px}
.controls{display:flex;align-items:center;gap:10px}
.sel{display:flex;flex-direction:column;gap:3px}
.sel span{font:600 11px var(--mono);letter-spacing:1.5px;color:var(--faint)}
.sel select{background:var(--pan);color:var(--ink);border:1px solid var(--edge);border-radius:6px;
  padding:7px 10px;font:600 12px var(--disp);min-width:150px;cursor:pointer}
.btn{background:linear-gradient(180deg,#f2a93b,#d8902a);color:#1a1205;border:0;border-radius:6px;
  padding:9px 14px;font:700 11px var(--mono);letter-spacing:1px;cursor:pointer;align-self:flex-end}
.btn:active{transform:translateY(1px)}

.stage{flex:1;display:grid;grid-template-columns:1fr 360px;gap:0;min-height:0}
.chart-wrap{position:relative;overflow:hidden;border-right:1px solid var(--edge)}
#chart{width:100%;height:100%;display:block}
.chart-hud{position:absolute;top:14px;left:16px;pointer-events:none}
.hud-loc{font:700 15px var(--disp);letter-spacing:1px;text-shadow:0 1px 6px #000}
.hud-model{font:600 11.5px var(--mono);letter-spacing:2px;color:var(--teal);margin-top:2px}
.compass{position:absolute;top:14px;right:16px;font:700 11px var(--mono);color:var(--dim);
  border:1px solid var(--edge);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;background:#0a112088}
.fleet{position:absolute;left:16px;bottom:16px;display:flex;gap:8px}
.fchip{display:flex;align-items:center;gap:7px;background:#0c1730cc;border:1px solid var(--edge);
  border-radius:7px;padding:6px 10px;font:600 11px var(--mono);backdrop-filter:blur(4px);cursor:pointer}
.fchip .fdot{width:9px;height:9px;border-radius:50%}
.fchip.active{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}

.panel{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--bg2)}
.panel>*{flex:0 0 auto}  /* children must not flex-shrink: the panel scrolls; shrink crushed ANCHOR PLAN to its header once OpsLayers overflowed the column */
.now-card{position:relative;background:var(--pan);border:1px solid var(--edge);border-radius:10px;
  padding:16px;text-align:center}
.now-call{font:800 22px var(--mono);letter-spacing:3px}
.gauge{position:relative;width:120px;height:120px;margin:8px auto 2px}
.gauge svg{transform:rotate(-90deg)} .g-bg{fill:none;stroke:#16233c;stroke-width:9}
.g-fg{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1),stroke .6s}
.g-num{position:absolute;inset:0;display:grid;place-items:center;font:800 30px var(--disp);margin-top:6px}
.g-lab{position:absolute;left:0;right:0;bottom:20px;font:600 11px var(--mono);letter-spacing:2px;color:var(--faint)}
.now-vessel{font:700 13px var(--disp);letter-spacing:.5px;margin-top:4px}
.now-limit{font:500 12px var(--mono);color:var(--dim);margin-top:3px}

.box{background:var(--pan);border:1px solid var(--edge);border-radius:10px;padding:12px}
.bh{font:700 12px var(--mono);letter-spacing:2px;color:var(--brand);
  border-bottom:1px solid var(--edge);padding-bottom:7px;margin-bottom:9px}
.kv{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dotted var(--edge)}
.kv:last-child{border:0} .kv span{color:var(--dim);font:500 11px var(--mono)} .kv b{font:600 12px var(--mono)}
.op-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px dotted var(--edge)}
.op-row:last-child{border:0} .op-row .opn{color:var(--dim);font-size:12px}
.cbadge{font:700 12px var(--mono);letter-spacing:.5px;padding:2px 8px;border-radius:4px;border:1px solid}

.tl-row{margin-bottom:9px} .tl-row:last-child{margin-bottom:0}
.tl-lab{font:500 11.5px var(--mono);color:var(--dim);margin-bottom:3px;display:flex;justify-content:space-between}
.tl-bar{display:flex;height:13px;border-radius:3px;overflow:hidden;border:1px solid var(--edge)}
.tl-bar i{flex:1}

.disclaimer{padding:8px 18px;border-top:1px solid var(--edge);text-align:center;
  /* Raised 9px -> 11px and #ff7a7a -> #ff9b9b (7.47:1 -> 9.35:1 on this band's own #0a1120
     background). This is the line that qualifies everything above it on a planning-grade tool,
     so it should not be the hardest text on the page to read. It stays a full-width band
     rather than a corner badge because a corner badge qualifies nothing.

     Raised again 11px -> 12.5px by the type floor. The floor lifted .infra-badge from 8px to the
     11px floor, which would have left the safety line the SAME size as the infrastructure note
     that is explicitly supposed to rank below it. The line keeps a clear step over the badge, and
     is now the largest text in the footer band as well as the only bold, red, full-width one. */
  font:700 12.5px var(--mono);letter-spacing:1.2px;color:#ff9b9b;background:#0a1120}
.disclaimer span{color:var(--faint)}

/* The SAME safety line, repeated at the foot of the guide reader document. It used to be painted
   from an inline `font:` shorthand in guideview.js at 8.5px, which beat every rule in this file —
   so raising .disclaimer to 12.5px did nothing for it, and the type floor lifting the guide body
   around it made the safety line RELATIVELY smaller than before. It is a rule here now so it lives
   in the cascade with everything else, and it carries .disclaimer's size and colour because it is
   the same sentence doing the same job. */
.guide-doc-footer{margin-top:26px;padding-top:12px;border-top:1px solid var(--edge);text-align:center;
  font:700 12.5px var(--mono);letter-spacing:1.2px;color:#ff9b9b}

/* tabs + views */
.tabs{display:flex;gap:4px;margin-left:auto}
.tab{background:transparent;color:var(--dim);border:1px solid transparent;border-radius:7px;
  padding:8px 13px;font:700 11px var(--mono);letter-spacing:1.2px;cursor:pointer}
.tab:hover{color:var(--ink)} .tab.active{color:var(--brand);border-color:var(--edge);background:#0d1626}
.view{flex:1;min-height:0} .view[hidden]{display:none}
.view-pad{overflow-y:auto;padding:16px;background:var(--bg2)}
.console-ctl{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}
.btn.block{width:100%;margin-top:4px}

/* compare */
.vhead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.vh-title{font:800 16px var(--disp);letter-spacing:2px;color:var(--brand)}
.vh-ctl{display:flex;gap:10px}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cmp-card{background:var(--pan);border:1px solid var(--edge);border-radius:10px;padding:14px;border-top:3px solid var(--edge)}
.cmp-card .cn{font:700 14px var(--disp);letter-spacing:.5px}
.cmp-card .cm{font:600 12px var(--mono);color:var(--dim);margin:2px 0 10px}
.cmp-big{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.cmp-score{font:800 30px var(--disp)} .cmp-call{font:700 12px var(--mono);letter-spacing:1px}
.cmp-row{display:flex;justify-content:space-between;font:500 11px var(--mono);color:var(--dim);padding:3px 0;border-bottom:1px dotted var(--edge)}
.cmp-row b{color:var(--ink)}
.cmp-spark{display:flex;height:9px;border-radius:3px;overflow:hidden;border:1px solid var(--edge);margin-top:9px}
.cmp-spark i{flex:1}

/* form fields */
.fld{display:block;margin-bottom:11px} .fld>span{display:block;font:600 11.5px var(--mono);letter-spacing:1px;color:var(--faint);margin-bottom:4px}
.fld>span i{color:var(--teal);font-style:normal}
.fld select,.fld input[type=datetime-local],.fld input[type=time],.fld input[type=number]{width:100%;background:var(--bg2);color:var(--ink);
  border:1px solid var(--edge);border-radius:6px;padding:7px 9px;font:600 12px var(--disp)}
.fld input[type=range]{width:100%;accent-color:var(--teal)}
.chk{display:flex;flex-wrap:wrap;gap:6px} .chk label{display:flex;gap:5px;align-items:center;font:600 11px var(--mono);
  background:var(--bg2);border:1px solid var(--edge);border-radius:6px;padding:6px 9px;cursor:pointer}

/* anchor alert */
.an-alert{position:absolute;left:14px;bottom:14px;right:14px;max-width:520px;border-radius:9px;padding:11px 13px;
  font:700 12px var(--mono);letter-spacing:.5px;backdrop-filter:blur(6px);border:1px solid}
.an-alert.conflict{background:#2a0d12cc;border-color:var(--nogo);color:#ffb3b3}
.an-alert.tight{background:#2a210dcc;border-color:var(--caution);color:#ffe0a3}
.an-alert.clear{background:#0d2a1ecc;border-color:var(--go);color:#aef3d4}
.an-alert .sg{display:block;margin-top:6px;font:600 11px var(--mono);color:#fff}
.an-alert button{margin-top:8px;background:#fff2;border:1px solid #fff5;color:#fff;border-radius:5px;
  padding:5px 10px;font:700 12px var(--mono);cursor:pointer}
#anStatusBody .st{font:800 16px var(--mono);letter-spacing:1px}
.env-row{display:flex;justify-content:space-between;font:600 11px var(--mono);padding:5px 0;border-bottom:1px dotted var(--edge)}
.env-row .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* briefings */
.bf-cols{display:grid;grid-template-columns:320px 1fr 1fr;gap:14px}
.list{display:flex;flex-direction:column;gap:8px}
.li{background:var(--bg2);border:1px solid var(--edge);border-radius:8px;padding:10px 11px}
.li .lt{font:700 12px var(--disp)} .li .ls{font:500 12px var(--mono);color:var(--dim);margin-top:2px}
.li .la{display:flex;gap:8px;margin-top:7px}
.li .la a,.li .la button{font:700 11.5px var(--mono);letter-spacing:.5px;text-decoration:none;cursor:pointer;
  padding:4px 8px;border-radius:5px;border:1px solid var(--edge);background:transparent;color:var(--teal)}
.li .la button.del{color:var(--nogo)}
.pill{font:700 11px var(--mono);padding:2px 6px;border-radius:4px;border:1px solid color-mix(in srgb, var(--teal) 33%, transparent);color:var(--teal)}
.hint{font:500 12px var(--mono);color:var(--faint);margin-top:8px;line-height:1.5}

/* tap-anywhere meteogram popup */
.met-pop{position:absolute;width:218px;z-index:20;background:#0b1628f0;border:1px solid var(--edge);
  border-radius:10px;padding:12px 13px;backdrop-filter:blur(14px);box-shadow:0 6px 28px #0009;pointer-events:auto}
.met-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.met-loc{font:600 11.5px var(--mono);letter-spacing:.8px;color:var(--dim)}
.met-x{background:none;border:none;color:var(--faint);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.met-x:hover{color:var(--ink)}
.met-callrow{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.met-call{font:800 20px var(--mono);letter-spacing:2px}
.met-scorenum{font:700 20px var(--disp);color:var(--dim)}
.met-vessel{font:500 11.5px var(--mono);color:var(--faint);letter-spacing:.5px;margin-bottom:6px}
.met-window{font:600 11.5px var(--mono);color:var(--dim);margin-bottom:6px}
.met-stats{font:600 12px var(--mono);color:var(--dim);display:flex;flex-direction:column;gap:3px;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:7px 0;margin-bottom:8px}
.met-section{font:700 11px var(--mono);letter-spacing:2px;color:var(--faint);margin-bottom:4px}
.met-bar{display:flex;height:18px;border-radius:3px;overflow:hidden;border:1px solid var(--edge);margin-bottom:3px}
.met-bar i{flex:1}
.met-bar-lab{display:flex;justify-content:space-between;font:500 11px var(--mono);color:var(--faint);margin-bottom:0}
.met-spin{font:500 12px var(--mono);color:var(--faint);padding:10px 0;text-align:center}

@media (max-width:820px){
  .stage{grid-template-columns:1fr;grid-template-rows:minmax(240px,40vh) 1fr}
  .chart-wrap{border-right:0;border-bottom:1px solid var(--edge)}
  .tag{display:none} .topbar{flex-wrap:wrap;gap:8px} .tabs{margin-left:0;width:100%;overflow-x:auto}
  .tab{padding:7px 10px} .bf-cols{grid-template-columns:1fr} .console-ctl{position:static;margin-top:8px}
  .chart-wrap{position:relative}
}
.panel::-webkit-scrollbar{width:8px} .panel::-webkit-scrollbar-thumb{background:var(--edge);border-radius:8px}

/* tile drag-to-reorder */
.tile-drag{transition:opacity .15s}
.tile-drag.dragging{opacity:.3;pointer-events:none}
.tile-drag.drag-over{outline:1px solid var(--teal);outline-offset:-1px}
.tile-drag .bh .grip,.tile-grip-abs{color:var(--faint);cursor:grab;user-select:none;opacity:.45;transition:opacity .15s;font-size:13px}
.tile-drag:hover .bh .grip,.tile-drag:hover .tile-grip-abs{opacity:1}
.tile-drag .bh .grip{float:right}
.tile-grip-abs{position:absolute;top:8px;right:10px}

/* maplibre basemap z-stack — map under the symbology canvas */
#anchorMap{position:absolute;inset:0;z-index:1;background:#08101f}
#view-anchor #anchorCv{position:absolute;inset:0;z-index:2;background:transparent;cursor:grab;
  touch-action:none;-webkit-user-select:none;user-select:none}
#view-anchor #anchorCv:active{cursor:grabbing}
/* Photoreal 3D surface — one class for every chart in the app. Sits ABOVE the chart it covers
   while open, and is [hidden] every other moment, so the 2D view underneath keeps its state and
   comes straight back when the view closes. z-index 3 clears the anchor plan's overlay canvas (2);
   the map controls sit above it so ◈ stays clickable to close. */
.photo3d-host,#view-anchor #anPhoto3d{position:absolute;inset:0;z-index:3;background:#08101f}
.photo3d-host[hidden],#view-anchor #anPhoto3d[hidden]{display:none}
.chart-wrap .map-ctrl{z-index:4}
.map-btn.photo3d-btn.on{background:var(--accent,#e0a63c);color:#0a1220;font-weight:700}
/* The host is absolutely positioned, so the CHARTS panel needs a positioned parent to fill. The
   wrapper must take its height FROM .mer-enc-map (charts.css: clamp(340px,52vh,620px)) rather than
   imposing one — an earlier version set #chartsMap to height:100% of a zero-height wrapper and
   collapsed the chart to a sliver. */
.charts-mapwrap{position:relative}
.charts-maphead .photo3d-btn{margin-left:auto}
/* keyboard focus must be visible even though .chart-wrap clips overflow — draw it inset */
#view-anchor #anchorCv:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
#view-anchor #anchorCv:focus:not(:focus-visible){outline:none}
/* smaller button variant + 2-col preset grid for the presentation box */
.btn.sm{padding:7px 11px;font-size:11.5px;letter-spacing:.7px}
.pres-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pres-grid .btn{margin:0}
/* client-facing presentation card floated over the chart in plan mode */
.present-card{position:absolute;top:12px;left:12px;z-index:6;width:236px;max-width:calc(100% - 24px);
  background:linear-gradient(180deg,rgba(16,28,49,.94),rgba(10,17,32,.92));border:1px solid var(--edge);
  border-radius:var(--radius-md);padding:13px 14px;box-shadow:var(--soft-shadow);backdrop-filter:blur(8px)}
.present-card .pc-eyebrow{font:800 11px var(--mono);letter-spacing:2px;color:var(--teal);opacity:.85}
.present-card .pc-name{font:700 16px var(--disp);color:var(--ink);margin-top:3px;line-height:1.15}
.present-card .pc-go{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.present-card .pc-call{font:800 15px var(--mono);letter-spacing:.5px}
.present-card .pc-score{font:600 12px var(--mono);color:var(--dim)}
.present-card .pc-row{display:flex;justify-content:space-between;gap:8px;margin-top:5px;font:600 12px var(--mono);color:var(--dim)}
.present-card .pc-actions{display:flex;gap:5px;margin-top:11px}
.present-card .pc-actions .btn{flex:1;margin:0;padding:6px 4px;font-size:11px;letter-spacing:.4px}
@media (max-width:820px){.present-card{width:200px;top:8px;left:8px}}
/* cinematic flyover: superimposed vessel markers (ride the pitched/terrain camera) + clean chrome */
.fly-vessel{display:flex;align-items:center;gap:5px;pointer-events:none;transform:translateY(-50%);white-space:nowrap}
.fly-vessel .fv-dot{width:9px;height:9px;border-radius:50%;background:var(--vc,#3fd0c9);box-shadow:0 0 0 2px #08101f,0 0 10px var(--vc,#3fd0c9);flex:0 0 auto}
.fly-vessel .fv-lbl{font:700 12px var(--mono);color:#eef5ff;text-shadow:0 1px 3px #000,0 0 6px #000;letter-spacing:.3px}
.fly-vessel .fv-call{font-weight:800;margin-left:2px}
.fly-vessel .fv-wind{color:#bcd6f5;font-weight:600;margin-left:2px}
#view-anchor.an-flying .map-ctrl,#view-anchor.an-flying .chart-hud .hud-model,#view-anchor.an-flying .compass{opacity:0;transition:opacity .5s;pointer-events:none}
#view-anchor.an-flying #anchorCv{cursor:default}
/* per-vessel mode rows (anchor vs DP hold) + brief preview rows */
.vm-row{display:flex;align-items:center;gap:6px;font:600 12px var(--mono);color:var(--dim);padding:4px 0;border-bottom:1px dotted var(--edge)}
.vm-row:last-child{border:0}
.vm-row .vm-name{flex:1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vm-row select{font:600 11.5px var(--mono);background:var(--bg2);color:var(--ink);border:1px solid var(--edge);border-radius:6px;padding:3px 5px}
.vm-row .vm-place{font:700 11.5px var(--mono);border:1px solid var(--teal);background:transparent;color:var(--teal);border-radius:6px;padding:3px 7px;cursor:pointer}
#anBriefPreview .bp-row{display:flex;justify-content:space-between;gap:8px;font:600 12px var(--mono);padding:4px 0;border-bottom:1px dotted var(--edge)}
#anBriefPreview .bp-row:last-child{border:0}
#anBriefPreview .bp-row>span{color:var(--dim)} #anBriefPreview .bp-row b{color:var(--ink);text-align:right}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
/* island mini-locator + advisor popup */
.an-locator{margin:2px 0 8px;text-align:center}
.an-locator svg{width:100%;max-width:220px;height:auto;display:block;margin:0 auto}
.an-locator span{font:700 11px var(--mono);letter-spacing:2px;color:var(--faint)}
#anAdvisorPop{position:absolute;inset:0;z-index:40;background:rgba(4,8,16,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center}
#anAdvisorPop .ap-card{width:min(560px,92%);max-height:82%;display:flex;flex-direction:column;background:var(--pan);border:1px solid var(--edge);border-radius:var(--radius-md);box-shadow:var(--shadow)}
#anAdvisorPop .ap-hd{display:flex;justify-content:space-between;align-items:center;font:800 11px var(--mono);letter-spacing:1.5px;color:var(--brand);padding:12px 14px;border-bottom:1px solid var(--edge)}
#anAdvisorPop .ap-x{background:transparent;border:0;color:var(--dim);font-size:14px;cursor:pointer}
#anAdvisorPop .ap-bd{overflow-y:auto;padding:4px 14px}
#anAdvisorPop .ap-ft{font:600 11.5px var(--mono);color:var(--faint);padding:10px 14px;border-top:1px solid var(--edge)}
#view-anchor .chart-wrap{overscroll-behavior:none}
/* overview (whole-islands, no anchorage chosen) vs plan-editing mode — swap which controls show */
#view-anchor #anOverview{display:none}
#view-anchor.an-wide #anOverview{display:block}
#view-anchor.an-wide #anPlanControls,
#view-anchor.an-wide .an-plan-only{display:none}
#view-anchor:not(.an-wide) #anBackWide{display:block}   /* back-to-overview shows only in plan mode (overrides [hidden]) */
.ov-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  text-align:left;background:transparent;border:1px solid var(--edge);border-radius:8px;
  padding:7px 10px;margin-bottom:6px;cursor:pointer;font:600 12px var(--mono);color:var(--ink);
  transition:border-color .15s,background .15s}
.ov-row:hover,.ov-row:focus-visible{border-color:var(--teal);background:rgba(63,208,201,.08);outline:none}
.ov-row .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.ov-row b{color:var(--dim);font-weight:600;white-space:nowrap}
#view-anchor .compass{z-index:5}
.map-attrib{position:absolute;right:10px;bottom:4px;z-index:4;
  font:600 11px var(--mono);letter-spacing:.3px;color:#aebccf;background:#0b1628aa;
  padding:2px 6px;border-radius:4px;backdrop-filter:blur(3px);max-width:62%;text-align:right}
.map-attrib a{color:#bcd0e8;text-decoration:none}
.map-attrib a:hover{text-decoration:underline}
.maplibregl-ctrl-group,.maplibregl-ctrl-attrib{display:none!important}
.bm-switch{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bm-lab{font:700 11px var(--mono);letter-spacing:1px;color:var(--faint)}
.bm-btn{font:600 12px var(--mono);padding:4px 9px;border-radius:5px;border:1px solid var(--edge);
  background:var(--bg2);color:var(--dim);cursor:pointer;transition:all .12s}
.bm-btn:hover{color:var(--ink)} .bm-btn.active{border-color:var(--teal);color:var(--teal);background:#3fd0c911}
.bm-chk{display:flex;align-items:center;gap:4px;font:600 12px var(--mono);color:var(--dim);cursor:pointer;margin-left:auto}
.bm-chk input{accent-color:var(--teal)}

/* offline library */
#offlineBox .off-est{background:var(--bg2);border:1px solid var(--edge);border-radius:7px;padding:8px 10px;margin-bottom:9px}
.off-est-head{display:flex;justify-content:space-between;align-items:baseline}
.off-size{font:800 18px var(--disp);color:var(--teal)}
.off-tiles{font:600 12px var(--mono);color:var(--dim)}
.off-range{font:500 11.5px var(--mono);color:var(--faint);margin-top:3px}
#offSave.warn{background:linear-gradient(180deg,#f2a93b,#d8902a)}
.off-prog{margin-top:8px}
.off-prog-track{height:6px;background:var(--bg2);border:1px solid var(--edge);border-radius:4px;overflow:hidden}
.off-prog-track i{display:block;height:100%;width:0;background:var(--teal);transition:width .15s}
.off-prog-txt{font:500 11.5px var(--mono);color:var(--faint);margin-top:3px;display:block;text-align:center}
.off-note{font:500 11.5px var(--mono);color:var(--faint);line-height:1.45;margin-top:8px}
.off-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.off-row{display:flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid var(--edge);border-radius:7px;padding:7px 9px}
.off-row-main{flex:1;min-width:0}
.off-row-name{font:600 11px var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.off-row-meta{font:500 11.5px var(--mono);color:var(--faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.off-go,.off-del{flex-shrink:0;font-size:12px;padding:3px 6px;border-radius:5px;border:1px solid var(--edge);background:transparent;cursor:pointer;color:var(--dim);transition:all .12s}
.off-go:hover{color:var(--teal);border-color:var(--teal)}
.off-del:hover{color:var(--nogo);border-color:var(--nogo)}
.off-total{font:600 11.5px var(--mono);color:var(--faint);margin-top:9px;text-align:center}

/* rollover tooltips */
.tip-pop{position:fixed;z-index:1000;max-width:240px;pointer-events:none;
  background:#0b1628f2;border:1px solid var(--edge);border-radius:8px;padding:8px 11px;
  box-shadow:0 8px 28px #000a;backdrop-filter:blur(10px);opacity:0;transition:opacity .12s;display:none}
.tip-pop b{display:block;font:700 11px var(--disp);color:var(--ink);letter-spacing:.3px;margin-bottom:3px}
.tip-pop span{display:block;font:500 12px var(--mono);color:var(--dim);line-height:1.5}
.tip-pop::after{content:"";position:absolute;left:var(--ax,50%);top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#0b1628f2}
.tip-pop.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#0b1628f2}

/* GPS positions */
.gps-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 12px var(--mono);padding:5px 0;border-bottom:1px dotted var(--edge)}
.gps-row:last-child{border:0}
.gps-row>span{color:var(--dim)} .gps-row b{color:var(--ink);letter-spacing:.3px;white-space:nowrap}
.gps-row .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* topbar tools + refresh */
.topbar-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#refreshBtn.spinning{animation:spin .7s linear infinite;color:var(--teal);border-color:var(--teal)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- tenancy: header controls ---------------- */
.topbar .brand{flex-shrink:0}
/* margin-left:auto on the base .tabs rule was eating 820px of the header on a wide viewport,
   pushing the strip right while 593px of tabs stayed scrolled out of reach — dead space on one
   side, hidden navigation on the other. The topbar is already justify-content:space-between and
   .tabs is flex:1 1 auto, so the auto margin was doing nothing but starving the nav. */
.topbar .tabs{flex:1 1 auto;min-width:0;margin-left:0;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
/* The tagline is the longest thing in the brand block and it is decoration, not navigation.
   Let it wrap out of the way before the nav loses room. */
.topbar .brand{flex-shrink:1;min-width:0}
.topbar .tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tab{flex-shrink:0}
.topbar .tabs::-webkit-scrollbar{height:0}
.topbar-tools{flex-shrink:0}
.tenant-switch,.user-btn{width:auto!important;height:34px;padding:0 10px;display:flex;align-items:center;gap:7px;
  white-space:nowrap;flex-shrink:0;font:600 11px var(--mono);color:var(--dim)}
.tenant-switch *,.user-btn *{white-space:nowrap}
.tenant-switch:hover,.user-btn:hover{color:var(--ink);border-color:var(--teal)}
.tsw-cap{display:none}
.tsw-val{font:700 11px var(--disp);letter-spacing:.3px;color:var(--ink)}
.uava{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#08101f;font:800 12px var(--disp);flex-shrink:0}
.uava.lg{width:38px;height:38px;font-size:14px}
.uinfo{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.uinfo b{font:700 11px var(--disp);color:var(--ink)} .uinfo i{font:500 11px var(--mono);color:var(--faint);font-style:normal}
.user-btn .uinfo i{display:none}
@media (max-width:920px){.user-btn .uinfo{display:none}}

/* popovers */
.tnt-pop{position:fixed;z-index:300;min-width:230px;max-width:320px;background:#0b1628f7;border:1px solid var(--edge);
  border-radius:11px;padding:7px;box-shadow:0 18px 50px #000a;backdrop-filter:blur(14px);max-height:78vh;overflow-y:auto}
.tnt-pop-hd{font:700 11px var(--mono);letter-spacing:1.5px;color:var(--faint);padding:8px 8px 5px}
.tnt-row{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;
  background:transparent;border:0;border-radius:7px;color:var(--ink);font:600 12px var(--disp);padding:9px 9px;cursor:pointer}
.tnt-row:hover{background:#ffffff0c} .tnt-row.on{color:var(--teal)} .tnt-row.sm{font-size:11px;padding:7px 9px}
.tnt-row.sm i{font:500 11.5px var(--mono);color:var(--faint);font-style:normal}
.tnt-row i{font-style:normal}
.tnt-tick{color:var(--teal)}
.tnt-me{display:flex;gap:10px;align-items:center;padding:8px 9px 10px}
/* Switch-user (impersonation) */
.tnt-imp-note{font:600 11px var(--disp);color:var(--caut,#f2a93b);background:#f2a93b18;border:1px solid #f2a93b55;border-radius:7px;padding:8px 10px;margin:2px 4px 6px;line-height:1.45}
.imp-banner{position:fixed;left:0;right:0;bottom:0;z-index:950;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(180deg,#3a2a0a,#2a1e07);border-top:2px solid var(--caut,#f2a93b);color:#ffe6b0;
  font:600 12px var(--disp);padding:9px 16px;box-shadow:0 -6px 18px #0007}
.imp-banner b{color:#fff}
.imp-banner button{background:var(--caut,#f2a93b);color:#1a1204;border:0;border-radius:7px;font:800 11px var(--disp);letter-spacing:.04em;padding:7px 13px;cursor:pointer}
.imp-banner button:hover{filter:brightness(1.08)}
.imp-banner button:disabled{opacity:.6;cursor:default}
body.impersonating{box-shadow:inset 0 0 0 3px #f2a93b88}
/* Act-as-organization (tenant switcher). Teal, not amber: acting-as is a legitimate scoped mode,
   while impersonation is a borrowed identity — they must never be mistaken for one another, and
   they are mutually exclusive server-side (_may_act_as refuses while impersonating). */
.tnt-pop-sep{height:1px;background:var(--edge);margin:6px 4px}
.tnt-pop-note{font:500 11px var(--disp);color:var(--faint);padding:6px 9px}
.org-switch.acting{border-color:var(--teal);background:#3fd0c918}
.org-switch.acting .tsw-val{color:var(--teal)}
.act-banner{position:fixed;left:0;right:0;bottom:0;z-index:949;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(180deg,#062a2c,#041e20);border-top:2px solid var(--teal);color:#c9f4f1;
  font:600 12px var(--disp);padding:9px 16px;box-shadow:0 -6px 18px #0007}
.act-banner b{color:#fff}
.act-banner button{background:var(--teal);color:#04161a;border:0;border-radius:7px;font:800 11px var(--disp);letter-spacing:.04em;padding:7px 13px;cursor:pointer}
.act-banner button:hover{filter:brightness(1.08)}
.act-banner button:disabled{opacity:.6;cursor:default}
body.acting-org{box-shadow:inset 0 0 0 3px #3fd0c988}
/* The act-as banner is position:fixed at bottom:0 with z-index 949; the footer disclaimer is static.
   Hit-tested on the deployed app: with the banner present, document.elementFromPoint() at the
   footer's centre returned the BANNER, not the disclaimer — the banner covered the footer's entire
   36px height. That footer carries NOT FOR NAVIGATION, which on a planning-grade tool is the single
   line that must never be obscured, and it was invisible in exactly the state where an operator is
   working inside someone else's tenant. Reserve the banner's height so the footer clears it.
   Uses the safe-area inset so it also holds on a notched phone in landscape. */
body.acting-org #app{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
/* Header logout link */
.logout-link{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 11px}
.logout-link .lo-ic{font-size:14px;line-height:1}
.logout-link .lo-tx{font:700 11px var(--mono,ui-monospace);letter-spacing:.06em}
.logout-link:hover{color:var(--nogo,#ff5d5d)}
@media (max-width:640px){.logout-link .lo-tx{display:none}}
.tnt-me b{font:700 13px var(--disp)} .tnt-sub{font:500 11.5px var(--mono);color:var(--faint);margin-top:2px}
.tnt-switchlist{max-height:240px;overflow-y:auto}
.tnt-note{font:500 11.5px var(--mono);color:var(--faint);line-height:1.5;padding:9px;border-top:1px solid var(--edge);margin-top:5px}

/* modals */
.tnt-modal-bg{position:fixed;inset:0;z-index:400;background:#00000094;backdrop-filter:blur(5px);display:flex;align-items:flex-start;justify-content:center;padding:48px 14px;overflow-y:auto}
.tnt-modal{background:var(--bg2);border:1px solid var(--edge);border-radius:14px;width:min(620px,96vw);box-shadow:0 24px 80px #000b}
.tnt-modal-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--edge);font:800 14px var(--disp);letter-spacing:.5px}
.tnt-x{background:none;border:0;color:var(--faint);font-size:18px;cursor:pointer} .tnt-x:hover{color:var(--ink)}
.tnt-modal-bd{padding:16px;max-height:74vh;overflow-y:auto}
.tnt-area{width:100%;min-height:74px;background:var(--bg);border:1px solid var(--edge);border-radius:6px;color:var(--ink);font:500 12px var(--disp);padding:8px 10px;resize:vertical}
.tnt-empty{padding:30px;text-align:center;color:var(--faint);font:500 12px var(--mono)} .tnt-empty.sm{padding:14px}

/* admin console */
.admin-banner{background:#2a210d;border:1px solid var(--caution);color:#ffe0a3;font:600 12px var(--mono);
  padding:8px 12px;border-radius:8px;margin-bottom:14px;letter-spacing:.3px}
.admin-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.admin-sub{font:600 12px var(--mono);color:var(--faint)}
.admin-nav{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--edge);padding-bottom:10px}
.anav{background:transparent;border:1px solid transparent;border-radius:7px;color:var(--dim);font:700 12px var(--mono);letter-spacing:.8px;padding:7px 12px;cursor:pointer}
.anav:hover{color:var(--ink)} .anav.on{color:var(--brand);border-color:var(--edge);background:var(--pan)}
.admin-tools{display:flex;gap:8px;margin-bottom:12px}
.atable{width:100%;border-collapse:collapse}
.atable th{font:700 11px var(--mono);letter-spacing:1px;color:var(--faint);text-align:left;padding:7px 9px;border-bottom:1px solid var(--edge)}
.atable td{font:500 12px var(--disp);padding:9px;border-bottom:1px solid var(--grid);vertical-align:middle}
.atable tr:hover td{background:#ffffff05}
.arow-sub{font:500 11.5px var(--mono);color:var(--faint);margin-top:2px}
.arow-act{display:flex;gap:4px;justify-content:flex-end}
.arow-act button{font-size:12px;padding:3px 7px;border-radius:5px;border:1px solid var(--edge);background:transparent;cursor:pointer;color:var(--dim)}
.arow-act button:hover{color:var(--teal);border-color:var(--teal)} .arow-act .sr-del:hover{color:var(--nogo);border-color:var(--nogo)}
.pill{font:700 11px var(--mono);padding:2px 7px;border-radius:4px;border:1px solid color-mix(in srgb, var(--teal) 40%, transparent);color:var(--teal)} .pill.sm{font-size:11px;padding:1px 5px}
.dotstat{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--go)} .dotstat.suspended{background:var(--nogo)}
.role-block{margin-bottom:18px} .role-block-h{font:700 11px var(--disp);letter-spacing:.5px;color:var(--brand);margin-bottom:7px}
.intake-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.intake-card{background:var(--pan);border:1px solid var(--edge);border-radius:10px;padding:16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .15s}
.intake-card:hover{border-color:var(--teal)} .ic-ico{font-size:22px;margin-bottom:4px}
.intake-card b{font:700 13px var(--disp)} .intake-card span{font:500 12px var(--mono);color:var(--faint);line-height:1.4}
.intake-list-h{font:700 11.5px var(--mono);letter-spacing:1.5px;color:var(--faint);margin:6px 0 8px}
.audit-list{display:flex;flex-direction:column}
.audit-row{display:grid;grid-template-columns:120px 130px 110px 1fr;gap:10px;font:500 12px var(--mono);padding:7px 4px;border-bottom:1px solid var(--grid)}
.audit-at{color:var(--faint)} .audit-actor{color:var(--ink)} .audit-act{color:var(--teal)} .audit-detail{color:var(--dim)}

/* login & activity console (webapp/activity.js) */
.act-scope{font:600 11.5px var(--mono);color:var(--caution);border:1px solid color-mix(in srgb, var(--caution) 40%, transparent);
  border-radius:8px;padding:7px 10px;margin-bottom:12px}
.act-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.act-kpi{background:var(--pan);border:1px solid var(--edge);border-radius:10px;padding:12px 14px}
.act-kpi.warn{border-color:color-mix(in srgb, var(--caution) 55%, transparent)}
.act-kpi.bad{border-color:color-mix(in srgb, var(--nogo) 55%, transparent)}
.act-kpi-n{font:800 24px var(--disp);color:var(--ink);line-height:1.1}
.act-kpi-l{font:700 11px var(--mono);letter-spacing:1px;color:var(--dim);margin-top:4px}
.act-kpi-s{font:500 11px var(--mono);color:var(--faint);margin-top:2px}
.act-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.act-tabs{display:flex;gap:4px} .anav.sm{font-size:11px;padding:5px 9px}
.act-sel,.act-inp{background:var(--pan);border:1px solid var(--edge);border-radius:8px;color:var(--ink);
  font:500 12px var(--mono);padding:6px 9px}
.act-inp{flex:1;min-width:180px}
.act-table td{vertical-align:top} .act-table .num{text-align:right;font-variant-numeric:tabular-nums}
.act-never{color:var(--faint);font-style:italic}
.act-ok{color:var(--go);font:700 11px var(--mono)}
.act-bad,.act-warn{color:var(--nogo);font:700 11px var(--mono)}
.act-row-fail td{background:color-mix(in srgb, var(--nogo) 7%, transparent)}
.act-ua{color:var(--faint);font:500 11.5px var(--mono);max-width:170px}
.act-detail{color:var(--dim);word-break:break-word;max-width:420px}
.act-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.act-chip{background:transparent;border:1px solid var(--edge);border-radius:20px;color:var(--faint);
  font:600 11px var(--mono);padding:3px 10px;cursor:pointer}
.act-chip:hover{color:var(--ink)} .act-chip.on{color:var(--brand);border-color:var(--brand)}
.act-pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px;
  font:500 11.5px var(--mono);color:var(--faint)}
.act-modal{max-width:1000px;width:94vw}
.act-who{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:500 12px var(--mono);color:var(--dim);margin-bottom:14px}
.act-who b{font:800 15px var(--disp);color:var(--ink)}
.act-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.act-sub-h{font:700 11px var(--mono);letter-spacing:1.4px;color:var(--brand);margin-bottom:6px}
.act-two .audit-row{grid-template-columns:130px 1fr 1fr}
@media(max-width:820px){.act-two{grid-template-columns:1fr}.act-ua{display:none}}

/* permissions matrix */
.prof-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:18px}
.perm-title{font:700 11.5px var(--mono);letter-spacing:1.5px;color:var(--brand);margin:4px 0 8px}
.perm-grp{margin-bottom:12px} .perm-grp-h{font:700 11.5px var(--mono);letter-spacing:1px;color:var(--dim);margin-bottom:5px}
.perm-cap{font:500 11px var(--mono);padding:3px 0;color:var(--faint)} .perm-cap.on{color:var(--go)}
.perm-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.perm-edit{display:flex;align-items:center;gap:8px;font:500 11px var(--mono);padding:4px 0;cursor:pointer;color:var(--dim)}
.perm-edit input{accent-color:var(--teal)} .perm-edit span{flex:1}
.perm-tag{font:700 11px var(--mono);letter-spacing:.5px;padding:1px 5px;border-radius:3px}
.perm-tag.role{color:var(--dim);background:var(--edge)} .perm-tag.grant{color:var(--go);background:#37d39a22} .perm-tag.revoke{color:var(--nogo);background:#ff5d5d22} .perm-tag.none{color:var(--faint)}
@media (max-width:640px){.prof-grid,.perm-cols{grid-template-columns:1fr}}

/* service desk */
.svc-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.svc-f{background:var(--bg2);border:1px solid var(--edge);border-radius:7px;color:var(--dim);font:600 12px var(--mono);letter-spacing:.5px;padding:6px 11px;cursor:pointer}
.svc-f:hover{color:var(--ink)} .svc-f.on{color:var(--brand);border-color:color-mix(in srgb, var(--brand) 40%, transparent);background:#f2a93b14}
.svc-f i{font-style:normal;color:var(--faint)} .svc-f.on i{color:var(--brand)}
/* SERVICE DESK view toggle (Cards / Timeline) */
.svc-toggle{display:inline-flex;border:1px solid var(--edge);border-radius:8px;overflow:hidden;margin-right:8px}
.svc-vt{background:var(--bg2);border:0;color:var(--dim);font:600 12px var(--mono);letter-spacing:.5px;padding:6px 13px;cursor:pointer}
.svc-vt:hover{color:var(--ink)} .svc-vt.on{background:color-mix(in srgb, var(--brand) 16%, transparent);color:var(--brand)}
.svc-vt+.svc-vt{border-left:1px solid var(--edge)}
/* by-vessel Gantt */
.gantt{border:1px solid var(--edge);border-radius:10px;background:var(--pan);overflow:hidden}
.g-axis{position:relative;border-bottom:1px solid var(--edge);background:var(--bg2)}
.g-row{display:flex;align-items:stretch;border-bottom:1px solid color-mix(in srgb, var(--edge) 60%, transparent)}
.g-row:last-child{border-bottom:0}
.g-row-h{flex:0 0 150px;padding:9px 12px;font:600 12px var(--mono);color:var(--ink);border-right:1px solid var(--edge);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--bg2)}
.g-track{position:relative;flex:1;min-height:40px}
.g-ticks{min-height:24px}
.gx-tick{position:absolute;top:5px;transform:translateX(-50%);font:600 11px var(--mono);color:var(--faint);white-space:nowrap}
.gx-tick::before{content:"";position:absolute;top:18px;left:50%;width:1px;height:2000px;background:color-mix(in srgb, var(--edge) 45%, transparent)}
.g-lane{position:absolute;left:0;right:0;height:24px;cursor:pointer}
.g-lane:hover .g-bar{filter:brightness(1.3)}
.g-lane:hover .g-bar-l{color:var(--ink)}
.g-bar{position:absolute;top:0;height:24px;border:1px solid var(--accent);border-radius:5px;
  min-width:12px;box-sizing:border-box;transition:filter .12s}
.g-bar-l{position:absolute;top:0;height:24px;display:inline-flex;align-items:center;gap:6px;
  font:600 12px var(--disp);color:var(--dim);white-space:nowrap;max-width:46%;pointer-events:none;transition:color .12s}
.g-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%}
.g-appr{position:absolute;top:-3px;width:2px;height:30px;background:var(--go);box-shadow:0 0 0 1px color-mix(in srgb, var(--go) 40%, transparent)}
.g-undated{margin-top:12px;padding:10px 12px;border:1px dashed var(--edge);border-radius:8px}
.g-undated-h{font:600 11px var(--mono);color:var(--faint);letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}
.g-undated-i{background:var(--bg2);border:1px solid var(--edge);border-radius:6px;color:var(--dim);
  font:600 12px var(--disp);padding:5px 10px;margin:0 6px 6px 0;cursor:pointer}
.g-undated-i:hover{color:var(--ink);border-color:var(--faint)}
/* Unified Comms Inbox (COMMS view) */
.cx-stats{display:flex;gap:16px;font:600 12px var(--mono);color:var(--faint)}
.cx-stats b{color:var(--ink)}
.cx-breach{margin:0 0 12px;padding:9px 13px;border:1px solid color-mix(in srgb, var(--caution) 45%, transparent);
  background:color-mix(in srgb, var(--caution) 10%, transparent);border-radius:9px;color:var(--ink);
  font:600 12.5px var(--disp);cursor:pointer}
.cx-breach b{color:var(--caution)}
.cx-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.cx-sel{background:var(--bg2);border:1px solid var(--edge);border-radius:7px;color:var(--ink);
  font:600 12px var(--mono);padding:6px 10px;cursor:pointer}
.cx-chip{background:var(--bg2);border:1px solid var(--edge);border-radius:7px;color:var(--dim);
  font:600 12px var(--mono);letter-spacing:.4px;padding:6px 11px;cursor:pointer}
.cx-chip.on{color:var(--brand);border-color:color-mix(in srgb, var(--brand) 40%, transparent);background:#f2a93b14}
.cx-list{display:flex;flex-direction:column;gap:8px}
.cx-row{display:block;width:100%;text-align:left;background:var(--pan);border:1px solid var(--edge);
  border-left:3px solid var(--edge);border-radius:10px;padding:11px 13px;cursor:pointer;transition:border-color .15s}
.cx-row:hover{border-color:var(--teal)}
.cx-row.cx-in{border-left-color:var(--teal)}
.cx-row.cx-out{border-left-color:color-mix(in srgb, var(--go) 60%, transparent)}
.cx-row-h{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.cx-vessel{font:700 12px var(--mono);color:var(--ink);letter-spacing:.4px}
.cx-title{font:600 12.5px var(--disp);color:var(--dim);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-meta{display:flex;align-items:center;gap:6px;font-size:12px}
.cx-when{color:var(--faint);font:600 11px var(--mono);white-space:nowrap}
.cx-draft{background:color-mix(in srgb, var(--brand) 16%, transparent);color:var(--brand);
  font:700 11px var(--mono);padding:2px 7px;border-radius:20px;letter-spacing:.3px}
.cx-overdue{background:color-mix(in srgb, var(--caution) 18%, transparent);color:var(--caution);
  font:700 11px var(--mono);padding:2px 7px;border-radius:20px;letter-spacing:.5px}
.cx-preview{font:400 12.5px var(--disp);color:var(--faint);line-height:1.45;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cx-preview b{color:var(--dim);font-weight:700}
.cx-dir{color:var(--teal);font-weight:800}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.svc-card{background:var(--pan);border:1px solid var(--edge);border-left:3px solid var(--edge);border-radius:10px;padding:13px;cursor:pointer;transition:border-color .15s}
.svc-card:hover{border-color:var(--teal);border-left-color:inherit}

/* weather super-view sub-nav (Console + Compare merged) */
.weather-subnav{display:flex;gap:6px;padding:10px 16px 0;background:var(--bg2);border-bottom:1px solid var(--edge)}
.weather-subnav[hidden]{display:none}
.wsub{background:transparent;border:1px solid transparent;border-bottom:none;border-radius:7px 7px 0 0;color:var(--dim);font:700 12px var(--mono);letter-spacing:.8px;padding:8px 14px;cursor:pointer}
.wsub:hover{color:var(--ink)} .wsub.on{color:var(--brand);border-color:var(--edge);background:var(--pan)}

/* Coming-soon stub slots (BUILD 1 IA skeleton) */
.stub-wrap{display:flex;align-items:center;justify-content:center;min-height:55vh;padding:24px}
.stub-card{max-width:440px;text-align:center;background:var(--pan);border:1px solid var(--edge);border-radius:14px;padding:34px 30px}
.stub-badge{display:inline-block;font:700 11px var(--mono);letter-spacing:2px;color:var(--teal);border:1px solid var(--teal);border-radius:4px;padding:3px 9px;margin-bottom:16px}
.stub-title{font:700 22px var(--disp);letter-spacing:.5px;color:var(--ink);margin-bottom:10px}
.stub-blurb{font:500 13px var(--disp);line-height:1.55;color:var(--dim)}
.svc-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:5px}
.svc-card-h b{font:700 13px var(--disp);line-height:1.25}
.svc-badge{font:700 11px var(--mono);letter-spacing:.5px;padding:2px 7px;border-radius:4px;border:1px solid;white-space:nowrap}
.svc-meta{font:500 12px var(--mono);color:var(--dim);margin-bottom:8px}
.svc-foot{display:flex;justify-content:space-between;align-items:center;font:500 12px var(--mono);color:var(--faint);border-top:1px dotted var(--edge);padding-top:8px}
.svc-foot b{color:var(--ink)}
.svc-detail{font:500 12px var(--disp);color:var(--dim);line-height:1.55;background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:11px;margin:10px 0}
.quote-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dotted var(--edge)}
.quote-amt{font:700 13px var(--mono);color:var(--ink)}
.appr-box{border-radius:8px;padding:10px 12px;font:600 11px var(--mono);margin-top:6px}
.appr-box.approved{background:#0d2a1e;border:1px solid var(--go);color:#aef3d4} .appr-box.declined{background:#2a0d12;border:1px solid var(--nogo);color:#ffb3b3}
.appr-pending{font:600 11px var(--mono);color:var(--caution);background:#2a210d;border:1px solid color-mix(in srgb, var(--caution) 33%, transparent);border-radius:8px;padding:10px 12px;margin:6px 0}
.appr-pending b{color:#ffe0a3}
/* ADR-0006 #4/#5: the approval tier, and the provenance caption every ceiling travels with. */
.appr-tier{font:600 11px var(--mono);color:var(--dim);background:var(--pan);border:1px solid var(--edge);border-radius:8px;padding:10px 12px;margin:6px 0}
.appr-tier b{color:var(--ink)}
.appr-tier.escalated{border-color:color-mix(in srgb, var(--caution) 45%, transparent);color:var(--caution)}
.appr-tier.escalated b{color:#ffe0a3}
.appr-prov{display:inline-block;font:600 11px var(--mono);font-style:normal;letter-spacing:.04em;color:var(--faint);border:1px solid var(--edge);border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.appr-actions{display:flex;gap:8px;margin-top:10px}
.btn.ok{background:linear-gradient(180deg,#37d39a,#2bb182);color:#06231a} .btn.no{background:linear-gradient(180deg,#ff6b6b,#e04848);color:#2a0606}
.btn.ghost{background:transparent;border:1px solid var(--edge);color:var(--teal)} .btn.ghost:hover{border-color:var(--teal)}

/* login overlay (server mode) */
/* HARD AUTH GATE — no operational UI renders until authenticated */
body:not(.authed) #app{display:none!important}
.login-ov{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;
  background:radial-gradient(120% 80% at 50% -10%,#0c1730 0%,var(--bg) 60%)}
.login-card{width:min(420px,94vw);background:var(--bg2);border:1px solid var(--edge);border-radius:16px;padding:26px 24px;box-shadow:0 30px 90px #000b}
.login-brand{font:800 22px var(--disp);letter-spacing:2.5px;text-align:center} .login-brand b{color:var(--brand)}
.login-sub{text-align:center;font:700 11px var(--mono);letter-spacing:2.5px;color:var(--faint);margin:4px 0 20px}
.login-card .fld input{width:100%}
.login-err{color:var(--nogo);font:600 12px var(--mono);min-height:14px;margin:2px 0 8px}
.login-hint{font:500 11.5px var(--mono);color:var(--faint);line-height:1.6;margin-top:14px;text-align:center} .login-hint b{color:var(--dim)}

/* The same infrastructure badge the app footer carries, repeated on the login panel. It is not
   redundant: the login overlay covers the whole app including that footer, so sign-in — the one
   moment a user is handing over a credential — was the only screen where the disclosure was
   absent. Same rules as the footer copy: facts the reader can check, no credential claim, and
   inert markup with no third-party fetch. */
.login-infra{margin-top:14px;display:flex;justify-content:center}
.login-infra .infra-badge{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;
  padding:4px 10px;border:1px solid var(--edge);border-radius:999px;font:600 11px var(--mono);
  letter-spacing:.5px;color:var(--faint);line-height:1.7;text-align:center}
.login-infra .infra-badge a{color:var(--faint);text-decoration:underline;text-underline-offset:2px}
.login-infra .infra-badge a:hover{color:var(--ink)}
.login-google{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 14px;margin-top:4px;background:#fff;color:#3c4043;border:1px solid #dadce0;border-radius:6px;font:500 13px var(--body);cursor:pointer;transition:background .15s,box-shadow .15s}
.login-google:hover{background:#f8f9fa;box-shadow:0 1px 4px #0002}
.login-google:active{background:#f1f3f4}
.login-google svg{flex-shrink:0}
.login-divider{display:flex;align-items:center;gap:10px;margin:12px 0 8px;color:var(--faint);font:600 11.5px var(--mono);letter-spacing:1px}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--edge)}
.login-demo{display:block;width:100%;background:none;border:0;color:var(--teal);font:600 12px var(--mono);margin-top:14px;cursor:pointer;padding:6px}
.login-demo:hover{text-decoration:underline}
/* redesigned login / landing */
.login-shell{width:min(860px,95vw);display:grid;grid-template-columns:1.15fr .85fr;background:var(--bg2);border:1px solid var(--edge);border-radius:16px;overflow:hidden;box-shadow:0 30px 90px #000b}
.login-hero{padding:34px 30px;border-right:1px solid var(--edge)}
.login-panel{padding:34px 28px;background:var(--bg);display:flex;flex-direction:column;justify-content:center}
.login-shell .login-brand{text-align:left;font:800 20px var(--disp);letter-spacing:1.5px}
.login-shell .login-sub{text-align:left;margin:6px 0 0}
.login-head{font:500 25px/1.25 var(--disp);color:var(--ink);margin:24px 0 12px}
.login-lede{font:400 13px/1.6 var(--body);color:var(--dim);margin-bottom:20px}
.login-vps{display:flex;flex-direction:column;gap:10px}
.login-vp{display:flex;align-items:center;gap:10px;font:400 12.5px var(--body);color:#cdd8ea}
.login-vp i{color:var(--teal);font-style:normal;font-size:12px}
.login-install{margin-top:24px;padding-top:18px;border-top:1px solid var(--edge)}
.login-install-h{font:700 11.5px var(--mono);letter-spacing:1px;color:var(--faint);margin-bottom:10px}
.login-store-row{display:flex;gap:10px;flex-wrap:wrap}
.login-store{display:flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid var(--edge);border-radius:8px;background:var(--bg2);color:var(--ink);cursor:pointer;transition:border-color .12s}
.login-store:hover{border-color:var(--teal)}
.login-store .ls-ico{display:flex;color:var(--ink)}
.login-store .ls-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.login-store .ls-txt i{font-style:normal;font:400 11.5px var(--body);color:var(--faint)}
.login-store .ls-txt b{font:500 13px var(--body)}
.login-install-note{margin-top:10px;font:500 11px/1.5 var(--body);color:var(--teal);background:color-mix(in srgb, var(--teal) 7%, transparent);border:1px solid color-mix(in srgb, var(--teal) 20%, transparent);border-radius:7px;padding:8px 10px}
.login-psub{font:700 11px var(--mono);letter-spacing:1px;color:var(--dim);margin-bottom:14px}
.login-panel .fld input{width:100%}
@media(max-width:680px){.login-shell{grid-template-columns:1fr;width:min(440px,95vw)}.login-hero{border-right:none;border-bottom:1px solid var(--edge)}.login-head{font-size:21px}}

/* departure optimizer */
.dept-loading{font:500 12px var(--mono);color:var(--faint);padding:8px 0;text-align:center}
.dept-dest{font:600 11.5px var(--mono);letter-spacing:1px;color:var(--brand);margin:8px 0 4px}
.dept-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dotted var(--edge)}
.dept-row:last-child{border:0}
.dept-rank{font:700 14px var(--mono);color:var(--faint);min-width:12px;text-align:center}
.dept-info{flex:1;display:flex;flex-direction:column;gap:1px}
.dept-when{font:600 11px var(--mono)}
.dept-meta{font:500 11.5px var(--mono);color:var(--faint)}

/* map controls overlay */
.map-ctrl{position:absolute;right:12px;bottom:56px;display:flex;flex-direction:column;gap:4px;z-index:10}
.map-btn{width:30px;height:30px;background:#0b1628cc;border:1px solid var(--edge);border-radius:6px;
  color:var(--dim);font:600 14px var(--mono);cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:border-color .15s,color .15s;line-height:1;padding:0}
.map-btn:hover{color:var(--ink);border-color:var(--teal);background:#0f1e3bcc}
.map-divider{height:1px;background:var(--edge);margin:2px 0}
.search-trigger{width:34px;height:34px;border-radius:8px;font-size:18px;
  background:#0b1628cc;border:1px solid var(--edge);cursor:pointer;display:grid;place-items:center;
  color:var(--dim);backdrop-filter:blur(6px);transition:all .15s}
.search-trigger:hover{color:var(--ink);border-color:var(--teal)}
.search-trigger[hidden]{display:none}

/* search / fleet management modal */
.search-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;
  padding-top:68px;background:#00000090;backdrop-filter:blur(5px)}
.search-modal[hidden]{display:none}
.search-box{background:var(--bg2);border:1px solid var(--edge);border-radius:14px;
  width:min(520px,96vw);max-height:80vh;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 80px #0009}
.search-bar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--edge);flex-shrink:0}
.search-input{flex:1;background:var(--bg);border:1px solid var(--edge);border-radius:8px;
  color:var(--ink);font:500 14px var(--disp);padding:9px 12px;outline:none;transition:border-color .15s}
.search-input:focus{border-color:var(--teal)}
.search-close{background:none;border:none;color:var(--faint);font-size:20px;cursor:pointer;padding:0 4px;line-height:1}
.search-close:hover{color:var(--ink)}
.search-results{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:0}
.search-section{margin-bottom:16px}
.search-sh{font:700 11.5px var(--mono);letter-spacing:2px;color:var(--brand);margin-bottom:8px}
.search-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;
  background:var(--pan);border:1px solid var(--edge);margin-bottom:5px;transition:border-color .15s}
.search-row:hover{border-color:var(--teal)}
.sr-pin{font-size:14px;flex-shrink:0;opacity:.7}
.sr-name{font:600 13px var(--disp);margin-bottom:2px}
.sr-meta{font:500 12px var(--mono);color:var(--dim)}
.sr-badge{font:700 11px var(--mono);color:var(--faint);letter-spacing:.5px;
  background:var(--bg);border:1px solid var(--edge);border-radius:3px;padding:1px 4px;vertical-align:middle}
.sr-active{font:700 11.5px var(--mono);color:var(--teal);letter-spacing:.5px}
.sr-act{display:flex;gap:5px;align-items:center;flex-shrink:0}
.sr-act button,.sr-edit,.sr-del{font:600 12px var(--mono);padding:3px 7px;border-radius:5px;cursor:pointer;
  border:1px solid var(--edge);background:transparent;color:var(--dim);transition:all .12s}
.sr-edit:hover{color:var(--teal);border-color:var(--teal)}
.sr-del:hover{color:var(--nogo);border-color:var(--nogo)}
.search-add{width:100%;background:transparent;border:1px dashed var(--edge);border-radius:7px;
  color:var(--teal);font:600 12px var(--mono);padding:8px;cursor:pointer;margin-top:4px;
  letter-spacing:.3px;transition:all .12s}
.search-add:hover{border-color:var(--teal);background:#3fd0c911}
.search-add-inline{font:600 11.5px var(--mono);padding:4px 9px;border-radius:5px;cursor:pointer;
  border:1px solid var(--teal);background:transparent;color:var(--teal);flex-shrink:0;transition:all .12s}
.search-add-inline:hover{background:var(--teal);color:#08101f}
.sr-hidden{display:none}
.vessel-form{background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:12px;margin-top:8px}
.vf-row{display:flex;gap:8px;margin-bottom:0}
.vf-row .fld{flex:1;margin-bottom:8px}
.vf-note{font:600 11.5px var(--mono);color:var(--teal);margin-bottom:8px;padding:5px 7px;
  background:color-mix(in srgb, var(--teal) 7%, transparent);border-radius:4px;border:1px solid color-mix(in srgb, var(--teal) 20%, transparent)}

/* ===================== CLIENT ONBOARDING (CRM pipeline) ===================== */
.ob-metrics{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 14px}
.ob-metric{flex:1;min-width:90px;background:var(--bg2);border:1px solid var(--edge);border-radius:8px;padding:9px 12px;display:flex;flex-direction:column;gap:2px}
.ob-metric.wide{min-width:150px;flex:1.6}
.ob-metric b{font:700 18px var(--disp);color:var(--ink)}
.ob-metric span{font:600 11.5px var(--mono);letter-spacing:.6px;color:var(--faint);text-transform:uppercase}
.ob-board{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:start}
.ob-col{background:var(--bg2);border:1px solid var(--edge);border-radius:8px;overflow:hidden}
.ob-col-h{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-bottom:2px solid var(--edge);font:700 12px var(--mono);letter-spacing:.8px;color:var(--ink);text-transform:uppercase}
.ob-col-h i{font-style:normal;background:var(--bg);color:var(--faint);border-radius:10px;padding:1px 7px;font-size:12px}
.ob-col-body{padding:8px;display:flex;flex-direction:column;gap:7px;min-height:50px}
.ob-empty{color:var(--faint);font:600 11px var(--mono);text-align:center;padding:10px 0;opacity:.5}
.ob-card{background:var(--bg);border:1px solid var(--edge);border-radius:7px;padding:9px;cursor:pointer;transition:border-color .12s,transform .12s}
.ob-card:hover{border-color:var(--teal);transform:translateY(-1px)}
.ob-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.ob-card-name{font:600 12px var(--disp);color:var(--ink);line-height:1.25}
.ob-card-meta{font:500 12px var(--mono);color:var(--faint);margin-top:3px}
.ob-opp{font:700 11px var(--mono);color:var(--teal);background:color-mix(in srgb, var(--teal) 8%, transparent);border-radius:9px;padding:1px 7px}
.ob-chip{display:inline-block;font:700 11.5px var(--mono);letter-spacing:.4px;padding:2px 7px;border-radius:10px;border:1px solid;text-transform:uppercase}
.ob-parked-h{font:700 11.5px var(--mono);letter-spacing:1px;color:var(--faint);margin:18px 0 8px;text-transform:uppercase}
.ob-parked{display:flex;flex-wrap:wrap;gap:8px}
.ob-parked .ob-card{width:200px;opacity:.7}
.ob-detail-top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ob-detail-co{font:500 12px var(--mono);color:var(--faint)}
.ob-scores{display:flex;flex-direction:column;gap:7px;margin-bottom:6px}
.ob-score{display:flex;align-items:center;gap:9px;font:600 12px var(--mono);color:var(--faint)}
.ob-score>span{width:80px;text-transform:uppercase;letter-spacing:.5px}
.ob-bar{flex:1;height:7px;background:var(--bg);border-radius:4px;overflow:hidden;border:1px solid var(--edge)}
.ob-bar i{display:block;height:100%;border-radius:4px}
/* the score itself stays one ladder step above its own row label, as it was before the floor */
.ob-score b{width:26px;text-align:right;font-size:12.5px}
.ob-note-sm{font:500 12px var(--mono);color:var(--faint);margin:6px 0 2px;opacity:.85}
.ob-stepper{display:flex;align-items:center;margin:6px 0}
.ob-step{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--edge);background:var(--bg);flex-shrink:0}
.ob-step u{text-decoration:none;font:700 11.5px var(--mono);color:var(--faint)}
.ob-step.done{background:color-mix(in srgb, var(--teal) 20%, transparent);border-color:var(--teal)}
.ob-step.done u{color:var(--teal)}
.ob-step.cur{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent)}
.ob-step.cur u{color:#04121a}
.ob-step-line{flex:1;height:1px;background:var(--edge);min-width:3px}
.ob-advance{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.ob-adv{background:transparent;border:1px solid var(--teal);color:var(--teal);border-radius:6px;padding:6px 11px;font:700 12px var(--mono);letter-spacing:.4px;cursor:pointer;transition:background .12s}
.ob-adv:hover{background:color-mix(in srgb, var(--teal) 10%, transparent)}
.ob-adv.danger{border-color:var(--nogo);color:var(--nogo)}
.ob-adv.danger:hover{background:color-mix(in srgb, var(--nogo) 10%, transparent)}
.ob-pain{background:var(--bg);border:1px solid var(--edge);border-left:2px solid var(--caution);border-radius:6px;padding:8px 10px;font:400 12px var(--body);color:var(--ink);margin-top:6px;white-space:pre-wrap}
.ob-contact{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid var(--edge)}
.ob-contact:last-child{border-bottom:none}
.ob-contact-c{font:500 11px var(--mono);color:var(--faint);text-align:right}
.ob-timeline{display:flex;flex-direction:column;gap:6px}
.ob-tl-row{display:flex;gap:10px;font:500 11px var(--body)}
.ob-tl-at{font:600 11.5px var(--mono);color:var(--faint);white-space:nowrap;padding-top:1px;min-width:88px}
.ob-tl-body{color:var(--ink)}
.ob-detail-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.ob-sub{font:700 11.5px var(--mono);letter-spacing:.8px;color:var(--faint);text-transform:uppercase;margin:10px 0 6px}
.ob-prim{display:flex;align-items:center;gap:7px;font:500 12px var(--body);color:var(--ink);margin:4px 0}
@media(max-width:900px){.ob-board{grid-template-columns:1fr 1fr;gap:8px}}
@media(max-width:560px){.ob-board{grid-template-columns:1fr}}
/* discovery artifacts */
.ob-disc-status{font:700 11px var(--mono);letter-spacing:.6px;color:var(--teal);border:1px solid color-mix(in srgb, var(--teal) 40%, transparent);background:color-mix(in srgb, var(--teal) 8%, transparent);border-radius:9px;padding:1px 7px;text-transform:uppercase;margin-left:6px}
.ob-disc-actions{display:flex;gap:8px;margin:8px 0 4px}
.ob-art{background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:10px 12px;margin-top:8px}
.ob-art-h{font:700 11.5px var(--mono);letter-spacing:.8px;color:var(--teal);text-transform:uppercase;margin-bottom:7px}
.ob-art-body{font:400 12px var(--body);color:var(--ink);line-height:1.5;white-space:pre-wrap}
.ob-mod-grp{display:flex;align-items:flex-start;gap:8px;margin:5px 0}
.ob-mod-grp>span{font:700 11px var(--mono);letter-spacing:.5px;color:var(--faint);text-transform:uppercase;min-width:78px;padding-top:4px}
.ob-mod-grp>div{display:flex;flex-wrap:wrap;gap:5px}
.ob-mod{display:inline-block;font:600 12px var(--mono);color:var(--ink);background:var(--bg2);border:1px solid var(--edge);border-radius:5px;padding:3px 8px;cursor:help}
.ob-req-sec{margin:7px 0}
.ob-req-sec>b{display:block;font:700 12px var(--disp);color:var(--ink);margin-bottom:4px}
.ob-req-item{display:flex;align-items:center;gap:8px;font:500 11px var(--body);color:var(--ink);padding:2px 0}
.ob-pri{font:700 11px var(--mono);letter-spacing:.4px;border-radius:4px;padding:1px 6px;text-transform:uppercase;flex-shrink:0;width:46px;text-align:center}
.ob-pri.high{color:#ff7a7a;background:#ff5d5d1a;border:1px solid #ff5d5d44}
.ob-pri.medium{color:#f2c14e;background:#f2a93b1a;border:1px solid #f2a93b44}
.ob-pri.low{color:#7fd6c2;background:#37d39a14;border:1px solid #37d39a33}
.ob-risk-f{display:flex;gap:9px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--edge)}
.ob-risk-f:last-child{border-bottom:none}
.ob-risk-f b{font:600 11px var(--disp);color:var(--ink)}
.ob-sev{font:700 11px var(--mono);letter-spacing:.4px;border-radius:4px;padding:2px 6px;text-transform:uppercase;flex-shrink:0;width:54px;text-align:center}
.ob-sev.high{color:#ff7a7a;background:#ff5d5d1a;border:1px solid #ff5d5d44}
.ob-sev.medium{color:#f2c14e;background:#f2a93b1a;border:1px solid #f2a93b44}
.ob-sev.low{color:#7fd6c2;background:#37d39a14;border:1px solid #37d39a33}
/* requirements questionnaire */
.ob-req-form{background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:9px 12px;margin-top:8px}
.ob-req-form-h{font:700 12px var(--mono);letter-spacing:.6px;color:var(--ink);text-transform:uppercase;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--edge)}
.ob-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;font:500 12px var(--body);color:var(--ink)}
.ob-q>span{flex:1}
.ob-q.textarea{flex-direction:column;align-items:stretch;gap:5px}
.ob-qi{background:var(--bg2);color:var(--ink);border:1px solid var(--edge);border-radius:5px;padding:5px 8px;font:500 12px var(--body);min-width:160px}
.ob-q.textarea .ob-qi{width:100%;min-height:48px;resize:vertical}
select.ob-qi{cursor:pointer}
input[type=checkbox].ob-qi{min-width:0;width:16px;height:16px;accent-color:var(--teal);cursor:pointer}
.ob-req-tag{margin-left:auto;font:600 11px var(--mono);color:var(--faint);font-style:normal;background:var(--bg2);border-radius:4px;padding:1px 6px;text-transform:uppercase}
/* deal room — page-by-page conversion */
.ob-deal-modal{width:min(960px,95vw);max-width:none;padding:0;overflow:hidden}
.ob-deal-modal .tnt-modal-hd{padding:12px 16px;border-bottom:1px solid var(--edge);margin:0}
.ob-deal{display:flex;min-height:440px;max-height:74vh}
.ob-deal-rail{width:214px;flex-shrink:0;border-right:1px solid var(--edge);display:flex;flex-direction:column;background:var(--bg)}
.ob-rail-list{flex:1;overflow-y:auto;padding:8px}
.ob-rail-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:none;border-radius:6px;padding:7px 8px;cursor:pointer;color:var(--ink);transition:background .12s}
.ob-rail-item:hover{background:var(--bg2)}
.ob-rail-item.foc{background:var(--bg2);box-shadow:inset 2px 0 0 var(--sc,var(--teal))}
.ob-rail-dot{width:22px;height:22px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 12px var(--mono);border:1px solid var(--edge);background:var(--bg2);color:var(--faint)}
.ob-rail-item.done .ob-rail-dot,.ob-rail-item.cur .ob-rail-dot{background:var(--sc,var(--teal));border-color:var(--sc,var(--teal));color:#04121a}
.ob-rail-item.future{opacity:.5}
.ob-rail-lab{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ob-rail-lab b{font:600 11px var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-rail-lab i{font:500 11px var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.4px}
.ob-rail-foot{border-top:1px solid var(--edge);padding:10px;background:var(--bg)}
.ob-deal-main{flex:1;overflow-y:auto;padding:16px 18px;min-width:0}
.ob-page-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--edge)}
.ob-page-stage{font:700 11.5px var(--mono);letter-spacing:1px;color:var(--faint);text-transform:uppercase}
.ob-page-title{font:700 20px var(--disp);color:var(--ink);margin-top:3px}
.ob-page-badge{font:700 11px var(--mono);letter-spacing:.6px;padding:3px 8px;border-radius:10px;text-transform:uppercase;flex-shrink:0;align-self:flex-start;background:color-mix(in srgb, var(--teal) 10%, transparent);color:var(--teal);border:1px solid color-mix(in srgb, var(--teal) 27%, transparent)}
.ob-page-badge.done{background:#37d39a14;color:#37d39a;border-color:#37d39a44}
.ob-page-badge.soon{background:var(--bg2);color:var(--faint);border-color:var(--edge)}
.ob-card-sec{margin-bottom:8px}
.ob-cta{margin-top:14px;background:var(--teal);color:#04121a;border:none;font:700 12px var(--mono);letter-spacing:.5px;padding:11px}
.ob-cta:hover{filter:brightness(1.08)}
.ob-page-foot{display:flex;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--edge)}
.ob-active-hero{display:flex;align-items:center;gap:14px;padding:14px;background:#37d39a12;border:1px solid #37d39a33;border-radius:10px;margin-bottom:10px}
.ob-active-hero span{font-size:32px}
.ob-active-hero b{font:700 16px var(--disp);color:var(--ink)}
.sr-del.block{display:block;width:100%;text-align:center;margin-top:6px}
.ob-qbo{display:flex;align-items:center;gap:10px;margin:6px 0 4px;font:600 11px var(--mono)}
.ob-qbo-on{color:#37d39a}
.ob-qbo-off{color:var(--faint)}
.ob-invpaid{margin-left:auto;font:700 11.5px var(--mono);letter-spacing:.3px;border:1px solid var(--teal);background:transparent;color:var(--teal);border-radius:5px;padding:2px 9px;cursor:pointer}
.ob-invpaid:hover{background:color-mix(in srgb, var(--teal) 10%, transparent)}
/* client intake — document tabs */
.ob-itabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;border-bottom:1px solid var(--edge);padding-bottom:8px}
.ob-itab{font:600 12px var(--mono);letter-spacing:.3px;background:var(--bg2);color:var(--dim);border:1px solid var(--edge);border-radius:6px;padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .12s}
.ob-itab:hover{color:var(--ink)}
.ob-itab.on{background:color-mix(in srgb, var(--teal) 10%, transparent);color:var(--teal);border-color:color-mix(in srgb, var(--teal) 40%, transparent)}
.ob-itab.req{border-color:color-mix(in srgb, var(--caution) 33%, transparent)}
.ob-itab i{font-style:normal;background:var(--teal);color:#04121a;border-radius:8px;padding:0 6px;font-size:11.5px;font-weight:700}
.ob-itab-body{padding:10px 0 2px}
.ob-doc-row{display:flex;align-items:center;gap:10px;padding:7px 9px;background:var(--bg);border:1px solid var(--edge);border-radius:7px;margin-bottom:6px}
.ob-doc-ico{font-size:18px;flex-shrink:0}
.ob-doc-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.ob-doc-meta b{font:600 12px var(--disp);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-doc-meta i{font:500 12px var(--mono);color:var(--faint)}
.ob-doc-dl,.ob-doc-del{width:26px;height:26px;flex-shrink:0;border-radius:5px;border:1px solid var(--edge);background:var(--bg2);color:var(--dim);cursor:pointer;font:700 13px var(--mono)}
.ob-doc-dl:hover{color:var(--teal);border-color:color-mix(in srgb, var(--teal) 40%, transparent)}
.ob-doc-del:hover{color:var(--nogo);border-color:color-mix(in srgb, var(--nogo) 40%, transparent)}
.ob-upload{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding:14px;border:1px dashed color-mix(in srgb, var(--teal) 40%, transparent);border-radius:8px;color:var(--teal);font:700 11px var(--mono);letter-spacing:.4px;cursor:pointer;background:color-mix(in srgb, var(--teal) 5%, transparent);transition:background .12s}
.ob-upload:hover{background:color-mix(in srgb, var(--teal) 10%, transparent)}
/* service packages + dynamic quote */
.ob-pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.ob-pkg{position:relative;display:block;background:var(--bg);border:1px solid var(--edge);border-radius:10px;padding:14px 13px;cursor:pointer;transition:border-color .12s}
.ob-pkg:hover{border-color:var(--dim)}
.ob-pkg.on{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.ob-pkg-rec{position:absolute;top:-9px;right:10px;font:700 11px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:#04121a;background:var(--teal);border-radius:8px;padding:2px 8px}
.ob-pkg-name{font:600 14px var(--disp);color:var(--ink)}
.ob-pkg-tag{font:400 12.5px var(--body);color:var(--faint);margin:2px 0 10px;min-height:26px}
.ob-pkg-price{font:700 18px var(--disp);color:var(--ink)}
.ob-pkg-price i{font:400 11.5px var(--mono);color:var(--faint);font-style:normal;margin-left:5px}
.ob-pkg-price2{font:500 12px var(--mono);color:var(--teal);margin:3px 0 10px}
.ob-pkg-price2 i{color:var(--faint);font-style:normal}
.ob-pkg-del{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--edge);padding-top:9px}
.ob-pkg-del>div{font:400 11px var(--body);color:var(--dim);display:flex;gap:6px;align-items:flex-start}
.ob-pkg-del>div::before{content:'✓';color:var(--teal);font-size:12px;flex-shrink:0}
.ob-pkg-more{color:var(--faint)!important}
.ob-pkg-more::before{content:''!important}
.ob-svc-list{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;margin-top:8px}
.ob-svc{display:flex;align-items:center;gap:8px;font:400 12px var(--body);color:var(--ink);padding:3px 0;cursor:pointer}
.ob-svc input{accent-color:var(--teal);width:15px;height:15px;flex-shrink:0}
.ob-svc i{margin-left:auto;font:600 12px var(--mono);color:var(--faint);font-style:normal;white-space:nowrap}
.ob-quote{background:var(--bg2);border:1px solid color-mix(in srgb, var(--teal) 27%, transparent);border-radius:10px;padding:14px;margin-top:12px}
.ob-quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.ob-quote-grid>div{display:flex;flex-direction:column;gap:3px}
.ob-quote-grid span{font:600 11.5px var(--mono);letter-spacing:.4px;color:var(--faint);text-transform:uppercase}
.ob-quote-grid b{font:700 18px var(--disp);color:var(--ink)}
.ob-quote-dep b{color:var(--teal)!important}
.ob-tier{font:700 11px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:#04121a;background:var(--teal);border-radius:8px;padding:2px 9px;margin-left:8px}
.ob-svc.locked{opacity:.9}
.ob-incl{font-style:normal;font:600 11px var(--mono);color:var(--go);background:color-mix(in srgb, var(--go) 10%, transparent);border-radius:4px;padding:1px 5px;text-transform:uppercase;margin-left:4px}
@media(max-width:680px){.ob-pkgs{grid-template-columns:1fr}.ob-svc-list{grid-template-columns:1fr}}
@media(max-width:640px){.ob-deal{flex-direction:column;max-height:82vh}.ob-deal-rail{width:auto;border-right:none;border-bottom:1px solid var(--edge)}.ob-rail-list{display:flex;overflow-x:auto;padding:6px}.ob-rail-item{flex-direction:column;min-width:66px;gap:3px;text-align:center}.ob-rail-lab b{font-size:11.5px}.ob-rail-lab i{display:none}}

/* ---- Tenant-tailored command dashboard (persona-hero look; accent set inline via --accent) ---- */
.cmd-hero{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:center;padding:22px 24px;margin:0 0 16px;border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,0.02),transparent 55%),var(--pan)}
.cmd-hero::before{content:"";position:absolute;top:-42%;right:-6%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--accent,#3fd0c9),transparent 68%);opacity:.15;pointer-events:none}
.cmd-hero-main{position:relative;z-index:1;min-width:0}
.cmd-eyebrow{margin:0 0 6px;font:700 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent,#3fd0c9)}
.cmd-head{margin:0;font:800 clamp(20px,2.6vw,30px)/1.08 var(--disp);color:var(--ink);letter-spacing:-.01em}
.cmd-sub{margin:8px 0 0;color:var(--faint);font:600 12px var(--mono)}
.cmd-kpis{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{border:1px solid var(--edge);border-radius:10px;padding:12px 14px;background:var(--bg2)}
.kpi b{display:block;font:800 24px var(--disp);color:var(--ink);line-height:1}
.kpi span{display:block;margin-top:5px;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.qa{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--edge);border-radius:999px;background:rgba(255,255,255,0.02);color:var(--ink);font:700 12px var(--disp);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.qa i{font-style:normal;color:var(--accent,#3fd0c9)}
.qa:hover{border-color:var(--accent,#3fd0c9);background:rgba(255,255,255,0.05);transform:translateY(-1px)}
.qa:focus-visible{outline:2px solid var(--accent,#3fd0c9);outline-offset:2px}
@media (max-width:820px){.cmd-hero{grid-template-columns:1fr}.cmd-kpis{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.cmd-kpis{grid-template-columns:repeat(2,1fr)}}

/* ---- Insights: CSS bar charts (tenant-tailored analytics) ---- */
.ins-card .ins-bars{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.ins-bar-row{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:10px}
.ins-bar-label{font:600 11px var(--mono);color:var(--dim);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-bar-track{height:10px;border-radius:6px;background:var(--bg2);overflow:hidden}
.ins-bar-fill{display:block;height:100%;border-radius:6px;min-width:2px;transition:width .3s ease}
.ins-bar-val{font:700 13px var(--disp);color:var(--ink);min-width:20px;text-align:right}
.ins-note{margin-top:10px;padding-top:8px;border-top:1px solid var(--edge);font:600 12px var(--mono);color:var(--faint);display:flex;justify-content:space-between;gap:8px}
.ins-note b{color:var(--ink)}

/* ---- WEATHER · OPS CHART (slide-program maps/references/filter views) ---- */
#view-opschart .chart-wrap{position:relative}
#wxMap{position:absolute;inset:0}
/* Same fill-the-chart-wrap rule as #wxMap. Without it the container is 0px tall, MapLibre
   initialises into nothing, and the track renders invisibly with no error. */
#crossingMap{position:absolute;inset:0}
.wx-locator{position:absolute;right:12px;bottom:34px;width:200px;background:rgba(5,9,17,.82);border:1px solid var(--edge);border-radius:8px;padding:8px;z-index:5}
.wx-locator svg{display:block;width:100%;height:auto}
.wx-locator span{display:block;margin-top:4px;font:600 11px var(--mono);letter-spacing:.14em;color:var(--faint);text-align:center}
.wx-loc-isl{fill:#22344f;stroke:#3d5578;stroke-width:.7;cursor:pointer;transition:fill .15s}
.wx-loc-isl:hover{fill:#2c4266}
.wx-loc-isl.on{fill:#3fd0c94d;stroke:var(--teal)}
.wx-loc-pin{fill:var(--teal)}.wx-loc-pin.wmg{fill:var(--brand)}
.wx-mk{display:flex;align-items:center;gap:5px;cursor:pointer;pointer-events:auto}
.wx-mk .wx-dot{width:10px;height:10px;border-radius:50%;background:var(--teal);border:2px solid #06101c;box-shadow:0 0 6px #3fd0c9aa;flex:none}
.wx-mk.wmg .wx-dot{background:var(--brand);border-radius:2px;transform:rotate(45deg);box-shadow:0 0 6px #f2a93baa}
.wx-mk .wx-lbl{font:700 12px var(--mono);letter-spacing:.06em;color:#f2f7f7;text-shadow:0 1px 3px #000,0 0 6px #000;white-space:nowrap}
.wx-mk.wmg .wx-lbl{color:#ffd07a}
.wx-reg-lbl{font:800 11.5px var(--mono);letter-spacing:.1em;color:#ffb4a6;background:rgba(60,12,8,.85);border:1px solid #e85d4a88;border-radius:4px;padding:3px 7px;white-space:nowrap}
.wx-reg-badge{font:800 11px var(--mono);letter-spacing:.08em;color:#ffb4a6;background:rgba(60,12,8,.75);border:1px solid #e85d4a55;border-radius:4px;padding:2px 6px;white-space:nowrap;cursor:pointer}
.wx-buoy{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:help}
.wx-buoy b{font:800 11.5px var(--mono);color:#8fe3ff;text-shadow:0 1px 3px #000}
.wx-buoy i{font:600 11.5px var(--mono);font-style:normal;color:#cfe8ff;background:rgba(5,9,17,.75);border:1px solid #4a6a8a66;border-radius:3px;padding:1px 5px;white-space:nowrap}
.wx-chiprow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.wx-chip{font:700 12px var(--mono);letter-spacing:.08em;color:var(--dim);background:var(--bg2);border:1px solid var(--edge);border-radius:999px;padding:5px 10px;cursor:pointer}
.wx-chip.on{color:var(--teal);border-color:#3fd0c977;background:#3fd0c914}
.wx-chip.aud.on{color:var(--brand);border-color:#f2a93b77;background:#f2a93b14}
.wx-check{display:flex;align-items:center;gap:8px;font:600 11px var(--mono);color:var(--dim);margin:0 0 7px;cursor:pointer}
.wx-check input{accent-color:var(--teal)}
.wx-site-name{font:800 13px var(--disp);color:var(--ink);margin:2px 0 8px}
.wx-note{margin:7px 0;padding:7px 9px;border:1px solid var(--edge);border-left:3px solid var(--teal);border-radius:6px;font:500 11px/1.5 var(--sans,system-ui);color:var(--dim)}
.wx-note.reg{border-left-color:#e85d4a;color:#ffcdc4}
/* .dim is the QUIETER variant of .wx-note, so it sits at the floor rather than above it — the
   ladder would otherwise have lifted 10px past .wx-note's 11px and made the aside louder than
   the note it qualifies. */
.wx-note.dim{border-left-color:var(--edge);color:var(--faint);font-size:11px}
.wx-subhead{margin:10px 0 4px;font:700 11.5px var(--mono);letter-spacing:.14em;color:var(--faint)}
.src-id{color:var(--brand);font:800 12px var(--mono);margin-right:4px}
.src-note{display:block;color:var(--faint);font:500 11.5px var(--mono);font-style:normal}
/* the scoped source/reference labels were deliberately a step UNDER the generic .kv span (11px);
   the floor cannot keep them under it, so they sit level with it rather than above it */
#wxRefs .kv span,#wxSources .kv span{font:600 11px var(--mono)}
.maplibregl-ctrl-scale{background:rgba(5,9,17,.7);color:#cfe8ff;border-color:#4a6a8a;font:600 11.5px var(--mono)}

/* ---- OPS LAYERS (shared: anchor + ops chart) ---- */
.ops-row{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.ops-btn{flex:none;width:24px;height:24px;border:1px solid var(--edge);border-radius:5px;background:var(--bg2);color:var(--dim);font-size:12px;cursor:pointer}
.ops-btn:hover{color:var(--ink);border-color:#3fd0c977}
.wx-mk.kmz .wx-dot{background:#8E7CFF;box-shadow:0 0 6px #8E7CFFaa;border-radius:50%}
.wx-mk.kmz .wx-lbl{color:#cfc4ff}

/* ═══════════ DESIGN SYSTEM v2 — public-site grammar (meridian-public) applied app-wide ═══════════
   Later rules override the console-era defaults above. Grammar: layered radial glows + faint grid,
   pill nav/buttons, sheened cards w/ teal hairline, glowing eyebrows, tight display headlines. */

/* backdrop: glow + grid (public body treatment), showing through translucent surfaces */
body{background:
  radial-gradient(circle at 74% -4%, rgba(95,176,255,.13), transparent 30rem),
  radial-gradient(circle at 12% 12%, rgba(63,208,201,.10), transparent 24rem),
  linear-gradient(180deg,#08111f 0%,var(--bg) 52%,#05080e 100%)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(17,32,58,.45) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,32,58,.38) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 78%)}
#app{position:relative;z-index:1}
.view-pad{background:rgba(10,17,32,.62)}
.panel{background:rgba(10,17,32,.72)}

/* shell: header + brand + pill tab rail */
.topbar{min-height:60px;padding:10px 18px;background:rgba(6,10,18,.82);backdrop-filter:blur(14px)}
.lock{display:flex;align-items:center;gap:9px;font:800 17px var(--disp);letter-spacing:2.5px}
.lock::before{content:"✦";font-size:19px;line-height:1;color:var(--teal);
  text-shadow:0 0 14px rgba(63,208,201,.85);letter-spacing:0}
/* No max-width. The 980px ceiling that used to sit here was the REAL cause of the clipped nav:
   flex-grow cannot exceed max-width, so the strip stayed pinned at 980px while 1829px was available
   and 593px of tabs — VENDORS, DOCUMENTS, PREP, ADMIN, FLEET, SERVICE — sat unreachable behind a
   hidden scrollbar (scrollbar-width:none, so there was not even an affordance). Measured on the
   deployed app: 17 tabs need 1571px. The topbar is flex with brand and tools both flex-shrink:0, so
   `flex:1 1 auto` + `min-width:0` already yields exactly the leftover space and scrolls only when
   the viewport genuinely cannot fit the strip. */
.tabs{border:1px solid rgba(22,35,60,.55);border-radius:999px;padding:3px;gap:2px;
  background:rgba(10,17,32,.78);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
@media (max-width:820px){
  .tabs{max-width:100%;width:100%;scrollbar-width:thin}
  .tabs::-webkit-scrollbar{display:block;height:5px}
  .tabs::-webkit-scrollbar-thumb{background:rgba(63,208,201,.4);border-radius:999px}
}
.tab{border-radius:999px;padding:7px 12px;font:760 12.5px var(--mono);letter-spacing:1px;border:0;flex:none}
.tab.active{color:var(--brand);background:rgba(255,255,255,.055);border:0;box-shadow:inset 0 0 0 1px rgba(242,169,59,.28)}
.search-trigger{border-radius:999px}

/* weather sub-nav → pill rail */
.weather-subnav{gap:4px;padding:10px 16px;border-bottom:1px solid rgba(22,35,60,.6);background:rgba(10,17,32,.62)}
.wsub{border:0;border-radius:999px;padding:7px 14px;font:760 12px var(--mono);letter-spacing:1px}
.wsub.on{color:var(--brand);background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(242,169,59,.28);border:0}

/* buttons → pills (public .button/.button-primary) */
.btn{border-radius:999px;padding:9px 16px;font:800 12.5px var(--mono);letter-spacing:1.2px;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.btn:not(.ghost):not(.ok):not(.no){background:linear-gradient(135deg,var(--brand),var(--brand2));color:#1a1205;
  box-shadow:0 10px 26px rgba(242,169,59,.16)}
.btn[style*="background:transparent"],.btn[style*="background: transparent"]{box-shadow:none}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 14px 34px rgba(242,169,59,.22)}
.btn:active{transform:translateY(0)}
.arow-act button,.ops-btn{border-radius:8px}

/* cards: sheen + teal hairline (public .card) — applied to every shared surface */
.box,.cmp-card,.now-card,.stub-card,.ob-metric,.cmd-hero,.kpi{
  background:linear-gradient(180deg,rgba(255,255,255,.032),transparent 58%),rgba(13,22,38,.85);
  border:1px solid rgba(22,35,60,.92);box-shadow:var(--soft-shadow)}
.box,.cmp-card,.now-card{border-radius:var(--radius-md);padding:13px;position:relative;overflow:hidden}
.box::before,.now-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,208,201,.5),transparent);opacity:.55;pointer-events:none}
.cmp-card{border-top-width:3px}   /* keep the per-anchorage GO/CAUTION/NO-GO status strip */
.cmd-hero{border-radius:var(--radius-lg)}
.kpi,.ob-metric{border-radius:var(--radius-sm)}
.ob-metric b{font:800 22px var(--disp);letter-spacing:-.04em}
.stub-card{border-radius:var(--radius-xl)}

/* box headers: glowing eyebrow dot (public .eyebrow) */
.bh{position:relative;padding-left:13px;font:800 12px var(--mono);letter-spacing:1.8px;
  color:var(--brand);border-bottom:1px solid rgba(22,35,60,.85);padding-bottom:8px;margin-bottom:10px}
.bh::before{content:"";position:absolute;left:0;top:3px;width:6px;height:6px;border-radius:999px;
  background:var(--teal);box-shadow:0 0 12px var(--teal)}

/* view heroes: eyebrow + tight display title (public .section-head/h1) */
.vhead{margin-bottom:16px}
.vh-eyebrow{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 6px;color:var(--teal);
  font:900 11.5px var(--mono);letter-spacing:2.4px;text-transform:uppercase}
.vh-eyebrow::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor;box-shadow:0 0 14px currentColor}
.vh-title{font:800 clamp(18px,2.1vw,26px)/1.05 var(--disp);letter-spacing:-.015em;color:var(--ink)}

/* tables (admin + module lists) */
.atable th{font:800 11px var(--mono);letter-spacing:1.4px;color:var(--faint);padding:8px 10px}
.atable td{padding:10px;border-bottom:1px solid rgba(17,32,58,.8)}
.atable tr:hover td{background:rgba(255,255,255,.035)}

/* modals + popovers */
.tnt-modal{border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),#0c1626;
  box-shadow:var(--shadow)}
.tnt-modal-hd{font:800 16px var(--disp);letter-spacing:-.01em;padding:16px 18px}
.tnt-modal-bd{padding:18px}
.tnt-pop{border-radius:var(--radius-sm);box-shadow:var(--shadow)}

/* empty states */
.tnt-empty{border:1px dashed rgba(22,35,60,.9);border-radius:var(--radius-md);background:rgba(13,22,38,.4)}
.tnt-empty.sm{border:0;background:transparent}

/* forms: rounded fields + visible focus */
.sel select,.fld select,.fld input[type=datetime-local],.fld input[type=time],.fld input[type=number],
.fld input[type=text],.fld input[type=email],.fld input[type=password],.chk label{border-radius:10px}
:where(button,select,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.tab:focus-visible,.wsub:focus-visible{outline-offset:-2px}

/* login: public split-hero polish */
.login-shell{border-radius:var(--radius-xl);box-shadow:var(--shadow);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 45%),var(--bg2)}
.login-shell .login-brand{display:flex;align-items:center;gap:9px}
.login-shell .login-brand::before{content:"✦";color:var(--teal);font-size:20px;text-shadow:0 0 14px rgba(63,208,201,.85)}
.login-store,.login-panel .btn{border-radius:999px}

/* scrollbars */
.view-pad::-webkit-scrollbar,.panel::-webkit-scrollbar,.tnt-modal-bd::-webkit-scrollbar{width:10px}
.view-pad::-webkit-scrollbar-thumb,.panel::-webkit-scrollbar-thumb,.tnt-modal-bd::-webkit-scrollbar-thumb{
  background:rgba(22,35,60,.9);border-radius:999px;border:2px solid transparent;background-clip:content-box}

/* reduced motion (public a11y parity) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ── v2.1 density & type balance: minimize dead space, raise tiny-type floor ── */
.topbar{min-height:52px;padding:8px 16px}
.view-pad{padding:13px 14px}
.vhead{margin-bottom:10px}
.vh-eyebrow{margin:0 0 4px}
.vh-title{font-size:clamp(17px,1.8vw,22px)}
.cmd-hero{padding:15px 18px;gap:16px;margin-bottom:12px}
.cmd-head{font-size:clamp(17px,1.9vw,23px)}
.cmd-sub{margin-top:6px}
.quick-actions{margin-top:11px}
.kpi{padding:10px 12px}
.kpi b{font-size:20px}
.dash-grid{grid-template-columns:repeat(auto-fill,minmax(285px,1fr))!important;gap:11px!important}
.box{padding:12px}
.bh{padding-bottom:6px;margin-bottom:8px}
.ob-metrics{margin:2px 0 10px;gap:8px}
.ob-metric{padding:8px 11px}
.ob-metric b{font-size:20px}
.tnt-empty{padding:18px}
.panel{padding:12px;gap:10px}
/* tiny-type floor: nothing below 9px */
.tag{font-size:11.5px}
.sel span{font-size:11.5px}
.atable th{font-size:11.5px}
.pill{font-size:11.5px}.pill.sm{font-size:11px}
.tl-lab{font-size:11.5px}
.ob-metric span{font-size:11.5px}
.tnt-pop-hd{font-size:11.5px}
.fld>span{font-size:11.5px}
.arow-sub{font-size:11.5px}

/* ── Realm lenses (Command view): Executive & Billing = large, plain-English reads ── */
.realm-bar{display:flex;align-items:center;gap:6px;margin:0 0 12px}
.realm-chip{font:800 12px var(--mono);letter-spacing:1.4px;color:var(--dim);background:rgba(10,17,32,.78);
  border:1px solid var(--edge);border-radius:999px;padding:7px 14px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.realm-chip:hover{color:var(--ink)}
.realm-chip.on{color:var(--brand);border-color:rgba(242,169,59,.5);background:rgba(242,169,59,.08)}
.realm-note{margin-left:6px;color:var(--faint);font:600 12px var(--mono);letter-spacing:.4px}
.exec-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  border:1px solid var(--edge);border-radius:var(--radius-lg);overflow:hidden;background:var(--edge);
  box-shadow:var(--soft-shadow);margin:0 0 12px}
.exec-stat{padding:18px 20px;background:rgba(13,22,38,.92)}
.exec-stat b{display:block;font:800 clamp(24px,2.6vw,34px)/1 var(--disp);letter-spacing:-.04em;color:var(--ink)}
.exec-stat span{display:block;margin-top:7px;color:var(--dim);font:500 12.5px var(--disp)}
.exec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;align-items:start}
.exec-brief .exec-line{margin:0 0 10px;color:var(--ink);font:500 14.5px/1.55 var(--disp);letter-spacing:-.01em}
.exec-brief .exec-line:last-child{margin-bottom:0}
.exec-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:1px solid rgba(17,32,58,.8);font:500 13.5px var(--disp)}
.exec-row:last-child{border-bottom:0}
.exec-row span{color:var(--dim)} .exec-row b{color:var(--ink);font-weight:700}

/* font/layout parity with the public site (Inter-first, tight tracking) */
body{letter-spacing:-.008em}

/* ── notifications bell + feed ── */
#notifBtn{position:relative}
.ntf-badge{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--brand);color:#1a1205;font:800 11.5px var(--mono);display:grid;place-items:center;border:2px solid var(--bg)}
.ntf-pop{position:fixed;z-index:420;width:min(400px,94vw);max-height:70vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),#0c1626;border:1px solid var(--edge);
  border-radius:var(--radius-md);box-shadow:var(--shadow)}
.ntf-hd{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--edge);
  font:800 11.5px var(--mono);letter-spacing:1.8px;color:var(--brand)}
.ntf-hd-act{display:flex;gap:5px}
.ntf-list{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
.ntf-item{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:9px 10px;border:1px solid transparent;
  border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.ntf-item:hover{background:rgba(255,255,255,.04);border-color:var(--edge)}
.ntf-item.unread{background:rgba(63,208,201,.05);border-color:rgba(63,208,201,.22)}
.ntf-ico{flex:none;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:8px;background:var(--bg2);font-size:12px}
.ntf-main{min-width:0}
.ntf-main b{display:block;font:700 12.5px var(--disp);letter-spacing:-.01em}
.ntf-main i{display:block;font:500 11px var(--disp);color:var(--dim);font-style:normal;margin-top:1px}
.ntf-main u{display:block;font:600 11.5px var(--mono);color:var(--faint);text-decoration:none;margin-top:3px}

/* ── attachments panel ── */
.att-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.att-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border:1px solid var(--edge);border-radius:10px;background:rgba(6,10,18,.4)}
.att-thumb{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:8px;
  background:var(--bg2);overflow:hidden;font-size:16px}
.att-thumb img{width:100%;height:100%;object-fit:cover}
.att-meta{flex:1;min-width:0}
.att-meta b{display:block;font:700 12px var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-meta i{display:block;font:500 12px var(--mono);color:var(--faint);font-style:normal;margin-top:2px}
.att-act{display:flex;gap:4px}
body:not(.authed) #notifBtn{display:none}

/* ═══════════ DESIGN SYSTEM v2.3 — LEGIBILITY (post-login "easier to see") ═══════════
   Scoped to body.authed so the login screen is untouched. Only color / font-size /
   line-height / letter-spacing are changed here — never display, float, or border
   shorthands (those reset longhands set earlier and broke layout in the v2 pass). Two
   moves: (1) lift the low-contrast secondary-text tokens; (2) raise the tiny-type floor
   from ~9px to ~11.5px so labels, chips, captions and table cells are readable.

   This block is NO LONGER the floor — it never was one. It is a hand-written allowlist of 26
   selectors, of which only 17 ever landed on tiny type, so ~156 selectors below 11px were never
   covered. The floor now lives in the base rules (see the TYPE FLOOR ladder note at the top of
   this file) and this block is only the post-login comfort lift on top of it. Consequence: every
   value here must stay >= whatever the same selector resolves to anonymously, or the authed layer
   would SHRINK text after login. `tests/test_type_floor.py` pins both halves. */
body.authed{ --dim:#aebfdc; --faint:#93a7c8; }
body.authed{ font-size:14px; line-height:1.5; }

/* Secondary/label text — a comfort lift above the floor, not the floor itself. */
body.authed .tag{font-size:11.5px}
body.authed .sel span{font-size:11.5px}
body.authed .atable th{font-size:11.5px;letter-spacing:.4px}
body.authed .atable td{font-size:12.5px}
body.authed .pill{font-size:12.5px}
body.authed .pill.sm{font-size:11.5px}
body.authed .tl-lab{font-size:11.5px}
body.authed .ob-metric span{font-size:11.5px}
body.authed .tnt-pop-hd{font-size:12.5px}
body.authed .fld>span{font-size:11.5px}
body.authed .arow-sub{font-size:11.5px}
body.authed .ob-itab i{font-size:12.5px}
body.authed .wx-note,body.authed .wx-note.dim{font-size:11.5px}
body.authed .ntf-main u{font-size:12.5px}
body.authed .ntf-main i{font-size:12px}
body.authed .att-meta i{font-size:12px}
body.authed .ob-chip{font-size:11.5px}
body.authed .op-row .opn{font-size:12.5px}

/* Primary reading surfaces — nudge up the body-copy sizes and lift dim labels. */
body.authed .kv{font-size:12.5px;line-height:1.5}
body.authed .kv>span{color:var(--dim)}
body.authed .tnt-row{font-size:13px}
body.authed .tnt-row.sm{font-size:12px}
body.authed .box>.bh,body.authed .perm-title{letter-spacing:.6px}
body.authed .quick-actions .qa{font-size:12px}
body.authed .kpi span{font-size:12px;color:var(--dim)}
/* Tab rail: a touch larger + clearer, without forcing a wrap. */
body.authed #tabs .tab{font-size:12.5px}
/* Vessel album tiles inherit the lifted tokens; keep captions comfortably readable. */
body.authed .al-tile{font-size:12px}

/* ═══════════ BATCH 1 UX FIXES (2026-07-02) — colorblind, mobile-touch, safe-area ═══════════ */

/* [16][75] GO/CAUTION/NO-GO now carry a color-INDEPENDENT texture channel (deuteranopia-safe):
   GO = solid · CAUTION = light diagonal hatch · NO-GO = dense diagonal hatch. Reused by the
   console 96-h timelines (.tl-bar i) and the compare sparklines (.cmp-spark i). */
/* Each verdict carries THREE independent channels — hue, fill texture, and a glyph — because the
   GO/CAUTION greyscale separation is 1.02:1: hue alone is unreadable in glare, in a greyscale print
   of a briefing, and for a red-green colour-blind reader. A go/no-go call that only a colour-sighted
   user can decode is a safety problem, not a styling preference. */
.gc-g{background:var(--go)}
.gc-g::after,.gc-c::after,.gc-n::after{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font:800 11.5px var(--mono);color:#04121a;opacity:.72;pointer-events:none}
.gc-g,.gc-c,.gc-n{position:relative}
.gc-g::after{content:"\2713"}
.gc-c::after{content:"\0021"}
.gc-n::after{content:"\00D7";color:#2a0508}
.gc-c{background:var(--caution);background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.32) 0 1.6px,transparent 1.6px 3.6px)}
.gc-n{background:var(--nogo);background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.5) 0 1.4px,transparent 1.4px 3px)}
.tl-legend{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:9px;
  font:600 11.5px var(--mono);letter-spacing:.6px;color:var(--dim)}
.tl-legend span{display:inline-flex;align-items:center}
.tl-legend i{width:16px;height:9px;border-radius:2px;border:1px solid var(--edge);margin-right:5px}
body.authed .tl-legend{font-size:11.5px}

/* [32] Tab strip: give the overflow scroll a visible affordance at ALL widths (was hidden on
   desktop, so 15 tabs truncated with no hint more existed). */
.topbar .tabs{scrollbar-width:thin;scrollbar-color:rgba(63,208,201,.4) transparent}
.topbar .tabs::-webkit-scrollbar{height:5px}
.topbar .tabs::-webkit-scrollbar-thumb{background:rgba(63,208,201,.4);border-radius:999px}

/* [26] Safe-area insets for notched iOS (viewport-fit=cover was set with no insets used). */
body.authed .topbar{padding-top:max(8px,env(safe-area-inset-top));
  padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.disclaimer{padding-bottom:max(8px,env(safe-area-inset-bottom))}

/* [34] wx-locator inset must not clip on small screens. */
@media (max-width:560px){.wx-locator{width:150px;right:8px;bottom:24px}}

/* [31][33] Touch devices (iPad on the bridge is a primary device): 16px inputs to defeat iOS
   auto-zoom, and ≥40px tap targets. Scoped to (pointer:coarse) so desktop density is untouched. */
@media (pointer:coarse){
  .fld select,.fld input[type=datetime-local],.fld input[type=time],.fld input[type=number],
  .fld input[type=text],.fld input[type=email],.fld input[type=password],
  .sel select,.search-input,.tnt-area{font-size:16px}
  .map-btn{width:44px;height:44px}
  .search-trigger{width:44px;height:44px;font-size:20px}
  .topbar{min-height:60px}
  .off-go,.off-del{min-height:36px;padding:7px 10px}
  .wsub{padding:9px 16px}
}

/* ── online vessel-registry lookup (add-vessel modals) ── */
.rv-lk-row{display:block;width:100%;text-align:left;background:var(--bg2);color:var(--ink);
  border:1px solid var(--edge);border-radius:6px;padding:7px 9px;margin:0 0 4px;cursor:pointer;
  font:500 12px var(--disp);transition:border-color .12s}
.rv-lk-row:hover{border-color:var(--teal)}
.rv-lk-row b{display:block;font:700 12px var(--disp);letter-spacing:.3px}
.rv-lk-row span{display:block;font:500 12px var(--mono);color:var(--faint);margin-top:2px}
#rvLookupRes{max-height:180px;overflow-y:auto}
/* stays at or above the base .vf-note it refines — it was deliberately the larger of the two */
#vfOnline .vf-note{font:500 11.5px var(--mono);color:var(--teal);padding:6px 2px}

/* ═══ ANCHOR LAYOUT REORG: left rail · chart+top strip · right rail ═══ */
.stage-anchor{grid-template-columns:300px minmax(0,1fr) 330px;grid-template-areas:"pl chart pr"}
.stage-anchor .panel-left{grid-area:pl;border-right:1px solid var(--edge)}
.stage-anchor .chart-wrap{grid-area:chart}
.stage-anchor .panel-right{grid-area:pr;border-left:1px solid var(--edge)}
.stage-anchor .panel{padding:8px;gap:5px}
.stage-anchor .box{padding:10px}
@media (max-width:1200px){.stage-anchor{grid-template-columns:260px minmax(0,1fr) 290px}}
@media (max-width:1080px){
  .stage-anchor{grid-template-columns:1fr;grid-template-areas:"chart" "pl" "pr";
    grid-template-rows:minmax(240px,44vh) auto auto;overflow-y:auto}
  .stage-anchor .panel{overflow:visible;border-left:0;border-right:0}
}
/* island pickers are an overview-mode concern; the ⤺ back button covers plan mode */
#view-anchor:not(.an-wide) .an-wide-only{display:none}
/* growing lists must scroll inside their box, not push the rail */
#anVessels{max-height:140px;overflow-y:auto}
#anOverviewList{max-height:min(255px,29vh);overflow-y:auto}
.an-sliders2{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.an-sliders2 .fld{margin-bottom:6px}

/* collapsible boxes: header always visible, state persisted per user */
.stage-anchor .panel .box>.bh{cursor:pointer;user-select:none}
.stage-anchor .panel .box>.bh::after{content:"−";float:right;color:var(--faint);font:700 12px var(--mono)}
.stage-anchor .panel .box.clpsd>.bh::after{content:"+"}
.stage-anchor .panel .box.clpsd>*:not(.bh){display:none!important}  /* beats inline display:block (e.g. tide canvas) */
.stage-anchor .panel .box.clpsd>.bh{margin-bottom:0;padding-bottom:0}
.stage-anchor .panel .box.clpsd{padding:4px 10px}

/* top strip over the chart: forecast window + plan actions */
#anTopStrip{position:absolute;top:12px;left:calc(50% + 34px);transform:translateX(-50%);z-index:6;
  display:flex;gap:8px;align-items:end;flex-wrap:wrap;max-width:min(92%,640px);
  background:rgba(10,17,32,.82);border:1px solid var(--edge);border-radius:10px;
  padding:7px 10px;backdrop-filter:blur(6px)}
#anTopStrip .ts-fld{display:flex;flex-direction:column;gap:3px}
#anTopStrip .ts-fld>span{font:600 11px var(--mono);letter-spacing:1px;color:var(--faint)}
#anTopStrip .ts-note{align-self:center;font:600 11.5px var(--mono);letter-spacing:.5px;color:var(--amber);max-width:38ch}
#anTopStrip input[type=date]{background:var(--bg2);color:var(--ink);border:1px solid var(--edge);
  border-radius:6px;padding:4px 6px;font:500 11px var(--mono)}
#anTopStrip .btn{margin:0;padding:6px 10px;font-size:12px;width:auto;display:inline-block}
#view-anchor:not(.an-wide) #anTopStrip #anBackWide{display:inline-block}
@media (max-width:1080px){#anTopStrip{top:8px;gap:6px;padding:6px 8px}}
@media (max-width:560px){#anTopStrip{top:auto;bottom:26px;left:50%;max-width:96%}}

/* ── review fixes: overlays were painted under the z:1 basemap / clipped ── */
#view-anchor .an-alert{z-index:7}          /* CONFLICT banner was invisible+unclickable */
#view-anchor .chart-hud{z-index:5}         /* anchorage name + gesture hints under map  */
#view-anchor .present-card{z-index:5}
@media (max-width:820px){                  /* zoom +/− grew past the clipped wrap top   */
  #view-anchor .map-ctrl{bottom:auto;top:64px}
}
/* left rail: keep the decorative island locator compact so overview mode fits one screen */
.stage-anchor .panel-left .an-locator svg{max-width:168px}

/* densest case (author role: every box present) must still fit one screen */
.stage-anchor #anBriefBox .pres-grid .btn{padding:6px 8px}
.stage-anchor #anBriefBox #anFlyover{padding:8px}
.stage-anchor .panel .box>.bh{padding-bottom:5px;margin-bottom:6px}

/* Infrastructure badge in the global footer. Deliberately quiet: it states where the app runs, not
   what it is certified as. Wraps to its own line on narrow viewports so it never crowds the
   NOT-FOR-NAVIGATION disclaimer, which outranks it. */
.disclaimer .infra-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;margin-left:10px;
  padding:2px 8px;border:1px solid var(--edge);border-radius:999px;font:600 11px var(--mono);
  letter-spacing:.6px;color:var(--faint);white-space:normal}
.disclaimer .infra-badge a{color:var(--faint);text-decoration:underline;text-underline-offset:2px}
.disclaimer .infra-badge a:hover{color:var(--ink)}
@media (max-width:720px){.disclaimer .infra-badge{display:flex;margin:6px auto 0;justify-content:center}}

/* ═══ Left navigation rail ═══════════════════════════════════════════════════
   Replaces the 17-tab horizontal scroller. That strip needed 1571px and silently
   hid whatever did not fit behind `scrollbar-width:none` — no affordance, no
   overflow cue, six views unreachable. A vertical rail shows every item at once,
   which is the whole point: grouping errors stop being navigation failures when
   nothing is concealed.
   Grouping is TEMPORAL (see NAV_SECTIONS in auth.js for why it is not the
   server's functional operate/plan/assets/manage taxonomy). */
#shell{display:flex;flex:1;min-height:0}
#main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#rail{flex:0 0 210px;width:210px;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 10px 14px;border-right:1px solid var(--edge);
  background:rgba(8,13,24,.72);backdrop-filter:blur(10px)}
#rail::-webkit-scrollbar{width:6px}
#rail::-webkit-scrollbar-thumb{background:rgba(63,208,201,.28);border-radius:999px}

/* Undo the pill-strip geometry: the rail is a single column, full width. */
#rail .tabs{display:flex;flex-direction:column;align-items:stretch;gap:1px;
  border:0;border-radius:0;padding:0;margin:0;background:none;overflow:visible;max-width:none;width:auto}
.rail-sec{display:flex;flex-direction:column;gap:1px}
.rail-sec + .rail-sec{margin-top:10px;padding-top:9px;border-top:1px solid rgba(22,35,60,.6)}
.rail-sec-h{font:750 11px var(--mono);letter-spacing:1.4px;color:var(--dim);
  opacity:.72;padding:0 10px 4px}
/* Phase caption, not a control: a phase is a property of a visit record, so it is
   never clickable. Choosing one filters Visits — that belongs in the view, not here. */
.rail-phase{font:600 11px var(--mono);letter-spacing:.8px;color:var(--teal);
  opacity:.62;padding:6px 10px 2px;display:flex;align-items:center;gap:7px}
.rail-phase::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28}
.rail-sec .rail-phase:first-of-type{padding-top:2px}
#rail .tab{display:block;width:100%;text-align:left;border-radius:7px;
  padding:5px 10px;font:700 12.5px var(--mono);letter-spacing:.7px;
  border:0;flex:none;position:relative;white-space:normal;line-height:1.22}
#rail .tab:hover{background:rgba(255,255,255,.045);color:var(--ink)}
#rail .tab.active{color:var(--brand);background:rgba(242,169,59,.10);box-shadow:none}
#rail .tab.active::before{content:"";position:absolute;left:0;top:5px;bottom:5px;
  width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
#rail .tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
/* Locked module teaser (ADR-0004 §1.2), rendered only behind MERIDIAN_SHOW_LOCKED_MODULES.
   Deliberately NOT a .tab and not focusable: it is merchandising, not a destination. */
.rail-locked{display:flex;align-items:center;gap:7px;width:100%;text-align:left;
  border-radius:7px;padding:5px 10px;font:700 12.5px var(--mono);letter-spacing:.7px;
  line-height:1.22;color:var(--dim);opacity:.5;cursor:default;user-select:none}
.rail-lock{margin-left:auto;font-size:11px;opacity:.8}

.rail-toggle{display:none;background:transparent;border:1px solid var(--edge);
  color:var(--ink);border-radius:8px;padding:5px 11px;font-size:16px;cursor:pointer}
#railScrim{display:none}

@media (max-width:1180px){#rail{flex-basis:178px;width:178px;padding:12px 8px 20px}
  #rail .tab{font-size:12px;padding:6px 9px}}

/* Narrow: the rail becomes an off-canvas drawer. It must overlay rather than
   compress — at 178px a rail plus a chart leaves neither usable. */
@media (max-width:820px){
  .rail-toggle{display:inline-block}
  #rail{position:fixed;top:0;left:0;bottom:0;z-index:60;width:250px;flex-basis:250px;
    transform:translateX(-100%);transition:transform .18s ease;padding-top:16px;
    background:rgba(6,10,18,.98)}
  body.rail-open #rail{transform:none}
  body.rail-open #railScrim{display:block;position:fixed;inset:0;z-index:59;
    background:rgba(2,5,12,.6)}
  #rail .tab{font-size:13px;padding:9px 11px}
}
@media (prefers-reduced-motion:reduce){#rail{transition:none}}

/* ═══════════ WEATHER CONSOLE — readable GO windows + observed-vs-modelled (v126) ═══════════
   The 96-hour strip used to be 96 anonymous cells: no time axis, no hover, and (because _gcls
   emitted a bare 'g'/'c'/'n' that matched no rule) no colour either. These rules give it the
   day boundaries, the ruler and the plain-language verdict line that make it answer "when". */
.tl-day{box-shadow:inset 1px 0 0 rgba(255,255,255,.55)}   /* HST midnight — no layout cost, unlike a border */
.tl-note{display:block;margin-top:4px;font:600 11px var(--mono);letter-spacing:.4px;color:var(--dim)}
.tl-note.g{color:var(--go)} .tl-note.c{color:var(--caution)} .tl-note.n{color:var(--nogo)}
/* Type sits AT the 11px floor here, not below it (tests/test_type_floor.py). The ruler and the
   REALITY CHECK stamps are read in daylight on a flybridge — the surface the floor exists for —
   so they get more letter-spacing and a shorter label instead of a smaller size. */
.tl-ruler{position:relative;height:15px;margin-top:2px;
  font:600 11px var(--mono);letter-spacing:.5px;color:var(--faint)}
.tl-ruler span{position:absolute;top:0;white-space:nowrap;transform:translateX(-1px)}
.tl-ruler span:first-child{transform:none}
.tl-hint{color:var(--faint);font-weight:500;letter-spacing:.3px}
.tl-bar i{min-width:1px}   /* 96 cells inside a narrow rail: never let one collapse to zero width */

/* REALITY CHECK tile — live instruments beside the model, so the console is checkable. */
.obs-sub{margin:9px 0 3px;font:700 11px var(--mono);letter-spacing:1.4px;color:var(--brand)}
.obs-stamp{margin-top:6px;font:500 11px var(--mono);letter-spacing:.4px;color:var(--faint)}

/* Narrow screens tighten the ruler's SPACING, never its size — the shrink that used to live here
   (9.5px/10.5px) put the two smallest labels on the console below the floor on exactly the device
   most likely to be read outdoors. */
@media (max-width:820px){
  .tl-ruler{letter-spacing:.2px}
  .tl-note{letter-spacing:.2px}
}

/* ITINERARY tab */
.itn-wrap{max-width:1100px;margin:0 auto;padding:8px 0 40px}
.itn-card{background:var(--panel,#141b25);border:1px solid var(--line,#26323f);border-radius:14px;padding:16px 18px;margin:14px 0}
.itn-h{font-weight:650;font-size:15px;margin-bottom:10px}
.itn-dim{color:var(--dim,#9fb0c0);font-weight:400;font-size:13px}
.itn-chips{display:flex;flex-wrap:wrap;gap:8px}
.itn-chip{cursor:pointer;border:1px solid var(--line,#26323f);background:var(--panel2,#1a232f);color:var(--dim,#9fb0c0);border-radius:22px;padding:6px 12px;font-size:13px;transition:.15s}
.itn-chip.on{border-color:#c9a24a;color:#e6cd8a;background:rgba(201,162,74,.14)}
.itn-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.itn-grid{grid-template-columns:1fr}}
.itn-rec{border-left:3px solid #26323f;padding:8px 12px;margin:8px 0;background:rgba(255,255,255,.02);border-radius:0 8px 8px 0}
.itn-caveat{color:#f0968f;font-size:12.5px;margin-top:5px}
.itn-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;margin:3px 4px 0 0;color:var(--bc,#6c7d8d);border:1px solid var(--bc,#6c7d8d);background:color-mix(in srgb,var(--bc,#6c7d8d) 14%,transparent)}
.itn-tagrow{margin-top:4px}
.itn-leg{margin:14px 0}
.itn-legh{font-family:monospace;font-size:12px;letter-spacing:.05em;color:#e6cd8a;border-bottom:1px solid var(--line,#26323f);padding-bottom:6px;margin-bottom:8px}
.itn-day{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.itn-daynum{flex:0 0 30px;height:30px;border-radius:50%;background:var(--panel2,#1a232f);border:1px solid var(--line,#26323f);display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:12px;color:#e6cd8a}
.itn-dayh{font-weight:600;font-size:13.5px}
.itn-foot{color:var(--dim,#9fb0c0);font-size:11.5px;text-align:center;margin-top:18px}

/* ── EXCEPTION RAIL (webapp/exceptions.js) ─────────────────────────────────
   The alert surface: what is off-track right now. Two severities only —
   `crit` (before the day starts) and `warn` (today). A third tier was
   deliberately not introduced; in the systems this was modelled on it
   became noise, and a rail people skim past is worse than no rail. */
.xc-rail{border:1px solid var(--edge);border-radius:12px;padding:12px 13px 11px;
  margin:0 0 14px;background:linear-gradient(180deg,rgba(255,194,77,.05),transparent 70%)}
.xc-rail.has-crit{border-color:rgba(255,128,128,.42);
  background:linear-gradient(180deg,rgba(255,128,128,.07),transparent 70%)}
.xc-rail.clear{background:none;border-color:rgba(78,227,159,.28)}
.xc-head{font:750 11px var(--mono);letter-spacing:1.4px;color:var(--dim);
  display:flex;align-items:center;gap:10px;padding-bottom:8px}
.xc-counts{font-weight:600;letter-spacing:.6px;color:var(--faint)}
.xc-n{font-weight:800}
.xc-n.crit{color:var(--nogo)} .xc-n.warn{color:var(--caution)}
.xc-ok{color:var(--go);font-size:13px}
.xc-sub{margin:0;font-size:12.5px;color:var(--faint)}
.xc-rows{display:flex;flex-direction:column;gap:1px}
.xc-row{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  border:0;background:transparent;color:inherit;cursor:pointer;
  border-radius:8px;padding:7px 9px;font:inherit}
.xc-row:hover{background:rgba(255,255,255,.05)}
.xc-row:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.xc-dot{flex:none;width:7px;height:7px;border-radius:50%;margin-top:6px}
.xc-row.crit .xc-dot{background:var(--nogo)}
.xc-row.warn .xc-dot{background:var(--caution)}
.xc-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.xc-title{font:700 13px var(--body);color:var(--ink);line-height:1.3}
.xc-detail{font-size:12px;color:var(--faint);line-height:1.35}
.xc-age{flex:none;font:700 11px var(--mono);color:var(--dim);opacity:.8;margin-top:2px}
.xc-arrow{flex:none;color:var(--faint);font-style:normal;margin-top:1px}
.xc-more{margin:8px 2px 0;font-size:11.5px;color:var(--faint)}

/* Nav count badge. Absent at zero — a rail of "0"s trains the eye to skip the
   one place a real number will appear. */
.rail-badge{display:inline-block;margin-left:7px;min-width:17px;text-align:center;
  padding:1px 5px;border-radius:9px;font:800 11px var(--mono);
  background:rgba(255,128,128,.16);color:var(--nogo);vertical-align:1px}

/* ── TIER 2: the workflow arc (rail stage rows) ────────────────────────────
   Structurally BETWEEN a section heading and a module row, and it has to read
   that way — indented under the heading, lighter weight than a module, but a
   real control with a hover, a focus ring and an active mark. If it read like
   a second kind of module the rail would gain depth without gaining meaning. */
.rail-arc{display:flex;flex-direction:column;gap:1px;margin:2px 0 7px;
  padding-left:9px;border-left:1px solid rgba(63,208,201,.22)}
.rail-stage{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:0;background:transparent;cursor:pointer;border-radius:6px;
  padding:4px 8px 4px 7px;font:600 11.5px var(--mono);letter-spacing:.7px;
  color:var(--dim);line-height:1.25;position:relative}
.rail-stage:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.rail-stage:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.rail-stage.active{color:var(--teal);background:rgba(63,208,201,.10)}
.rail-stage.active::before{content:"";position:absolute;left:-10px;top:4px;bottom:4px;
  width:2px;border-radius:0 2px 2px 0;background:var(--teal)}
.rail-stage-l{flex:1;min-width:0}
.rail-stage-n{flex:none;font-weight:800;font-size:11px;opacity:.85}
.rail-stage.active .rail-stage-n{opacity:1}

/* Filter banner on the VISITS board. A filtered board that does not SAY it is
   filtered is how a user concludes their records vanished. */
.ob-filter{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  padding:8px 12px;border:1px solid rgba(63,208,201,.3);border-radius:9px;
  background:rgba(63,208,201,.06)}
.ob-filter-l{font:750 11px var(--mono);letter-spacing:1.3px;color:var(--teal);opacity:.85}
.ob-filter b{font:700 13px var(--body);color:var(--ink)}
.ob-filter-n{font:600 11.5px var(--mono);color:var(--faint)}
.ob-filter-x{margin-left:auto;border:1px solid var(--edge);background:transparent;
  color:var(--dim);border-radius:7px;padding:4px 10px;font:700 11px var(--mono);
  letter-spacing:.6px;cursor:pointer}
.ob-filter-x:hover{color:var(--ink);border-color:var(--teal)}

/* Inline "show all" inside the filtered empty state. A link, not a button-looking
   control: it sits mid-sentence and should read as part of the sentence. */
.ob-empty-link{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.ob-empty-link:hover{color:var(--ink)}
.ob-empty-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}

/* Who approved a spend, and when. Renders only once a decision exists — an
   empty "Approved by —" is worse than saying nothing. */
.svc-decision{margin-top:7px;padding-top:6px;border-top:1px solid var(--edge);
  font:600 11.5px var(--mono);letter-spacing:.4px;line-height:1.45}
.svc-decision.yes b{color:var(--go)}
.svc-decision.no b{color:var(--nogo)}
.svc-decision i{display:block;font-style:italic;font-weight:500;color:var(--faint);
  font-family:var(--body);font-size:12px;margin-top:2px}

/* ── HYANS vessel-intake modal sheet (intake.js) — floats over the dashboard ── */
.inScrim{position:fixed;inset:0;background:rgba(4,7,13,.62);backdrop-filter:blur(3px);z-index:220}
.inSheetWrap{position:fixed;inset:0;display:block;padding:0;z-index:221;pointer-events:none}
.inSheetWrap[hidden]{display:none}   /* display:flex above outranks the UA [hidden] rule; Close/Minimize did nothing without this */
.inSheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;
  width:min(1080px,calc(100vw - 32px));height:min(840px,calc(100dvh - 56px));min-width:820px;min-height:580px;
  max-width:calc(100vw - 32px);max-height:calc(100dvh - 56px);display:flex;flex-direction:column;resize:both;
  background:var(--pan);border:1px solid var(--edge);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden}
.inHead{display:flex;align-items:flex-start;gap:12px;padding:16px 22px 10px;user-select:none}
.inDragHandle{cursor:grab;touch-action:none}.inDragHandle.dragging{cursor:grabbing}
.inDragHandle:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.inDragHandle button{cursor:pointer}
.inTitle{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.inSubT{font-size:12px;color:var(--faint);margin-top:2px}
.inSavedTag{color:var(--go);font-size:11px;margin-left:8px}
.inHeadSp{flex:1}
.inMin{border:1px solid var(--edge);background:var(--pan2);color:var(--dim);border-radius:9px;
  font-size:12px;padding:5px 12px;cursor:pointer;font-family:inherit}
.inMin:hover{color:var(--ink);border-color:var(--faint)}
.inSteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:4px;padding:8px 22px;
  border-bottom:1px solid var(--edge);background:var(--pan)}
.inSteps button{min-width:0;border:1px solid transparent;background:transparent;color:var(--faint);
  border-radius:8px;padding:5px 8px;font-size:11.5px;cursor:pointer;font-weight:500;font-family:inherit;
  white-space:normal;line-height:1.2;text-align:center}
.inSteps button:hover{color:var(--dim)}
.inSteps button.active{background:var(--pan2);border-color:var(--edge);color:var(--brand)}
.inBody{flex:1;overflow-y:auto;padding:18px 22px 10px}
.inBody h2{font-size:15px;font-weight:600;margin:0 0 3px;letter-spacing:-.01em;color:var(--ink)}
.inBody h3{font-size:11.5px;font-weight:600;margin:18px 0 6px;color:var(--brand);text-transform:uppercase;letter-spacing:.08em}
.inBody h4{font-size:11px;font-weight:600;color:var(--brand);margin:14px 0 5px;text-transform:uppercase;
  letter-spacing:.08em;border-bottom:1px solid var(--edge);padding-bottom:4px}
.inSub{color:var(--faint);font-size:12.5px;margin:0 0 14px;max-width:72ch}
.inWelcome{max-width:760px;margin:auto;padding:16px 0}
.inWelcome h2{font-size:28px;margin-bottom:10px}
.inWelcome .inLead{font-size:17px;color:var(--brand);margin-bottom:12px}
.inWelcome p{line-height:1.55;margin:8px 0}
.inProfileGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.inProfile{height:100%;box-sizing:border-box;margin:0}
.inProfile small{display:block;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:3px}
.inProfileCue{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--edge));
  border-radius:var(--radius-sm);background:color-mix(in srgb,var(--brand) 7%,var(--pan2));margin-bottom:14px}
.inProfileCue b{flex:none;color:var(--brand);font-size:12.5px}.inProfileCue span{color:var(--dim);font-size:12.5px;line-height:1.45}
.inPaperActions{display:flex;gap:8px;margin:10px 0 0;flex-wrap:wrap}
.inThanks{margin:18px 0!important;padding:14px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--edge));border-radius:var(--radius-sm);background:color-mix(in srgb,var(--brand) 7%,var(--pan2))}
.inThanks b{color:var(--brand);font-size:16px}
.inField{display:flex;flex-direction:column;min-width:0;align-self:start}
.inFieldFull{grid-column:1/-1}
.inL{display:block;font-size:11.5px;font-weight:600;color:var(--dim);margin:0 0 5px;line-height:1.35}
.inF{width:100%;border:1px solid var(--edge);border-radius:var(--radius-sm);padding:8px 12px;
  font-size:13.5px;font-family:inherit;background:var(--pan2);color:var(--ink);box-sizing:border-box}
.inF:focus{outline:none;border-color:var(--brand)}
textarea.inF{min-height:60px;resize:vertical}
.inG2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.inG3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px}
.inSection{border:1px solid var(--edge);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--pan2) 58%,transparent);padding:14px 16px;margin:12px 0}
.inSectionHead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--edge)}
.inBody .inSectionHead h3{margin:0}.inSectionHead p{color:var(--faint);font-size:11.5px!important;max-width:58ch;text-align:right}
.inPaperWorkspace{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);gap:18px;height:100%;min-height:0}
.inPaperDecision{min-width:0;overflow:auto;padding-right:3px}
.inPaperPane{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--edge);border-radius:var(--radius-sm);padding:10px;background:var(--pan2)}
.inPaperTabs{display:flex;gap:5px;padding-bottom:9px;border-bottom:1px solid var(--edge)}
.inPaperTabs button{border:1px solid var(--edge);border-radius:8px;background:var(--pan);color:var(--dim);padding:7px 11px;font:600 11.5px var(--body);cursor:pointer}
.inPaperTabs button.active{color:var(--brand);border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--pan))}
.inPaperPreview{flex:1;min-height:260px;overflow:auto;overscroll-behavior:contain;margin-top:9px;padding:22px 24px;background:#fff;color:#18202b;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(18,28,42,.14)}
.inPaperPreview .agreement-preview{max-width:760px;margin:0 auto;font:400 12.5px/1.55 Georgia,serif}
.inPaperPreview .agreement-preview h2{color:#172130;font:700 20px/1.25 Georgia,serif;margin:8px 0 18px}
.inPaperPreview .agreement-preview p{color:#273244;font-size:12.5px;margin:0 0 10px}
.inPaperPreview .agreement-draft-mark{color:#8b2e24!important;font:700 11.5px/1.35 var(--body)!important;letter-spacing:.05em;text-transform:uppercase}
.inPaperPreview table{border-collapse:collapse;width:100%;margin:12px 0;font-size:11.5px}.inPaperPreview td{border:1px solid #cdd3db;padding:6px;vertical-align:top}
.inPaperLoading,.inPaperError{color:#556172!important;font-family:var(--body)!important}.inPaperError b{color:#8b2e24}
@media(max-width:920px){
  .inSheet{min-width:calc(100vw - 32px)}
  .inPaperWorkspace{grid-template-columns:1fr;height:auto}.inPaperDecision{overflow:visible}.inPaperPreview{height:420px;flex:none}
  .inSectionHead{align-items:flex-start;flex-direction:column;gap:4px}.inSectionHead p{text-align:left}
}
@media(max-width:640px){
  .inSheetWrap{padding:0}
  .inSheet{left:0!important;top:0!important;transform:none!important;width:100vw;height:100dvh;min-width:0;min-height:0;max-width:100vw;max-height:100dvh;resize:none;border-radius:0;border-left:0;border-right:0}
  .inDragHandle{cursor:default;touch-action:auto}
  .inHead{padding:12px 14px 7px}.inSteps{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 14px;gap:2px}
  .inSteps button{font-size:11px;padding:4px 5px}.inBody{padding:14px}.inFoot{padding:10px 14px}
  .inG2,.inG3{grid-template-columns:1fr}.inProfileGrid{grid-template-columns:1fr}.inProfileCue{flex-direction:column;gap:4px}
  .inSection{padding:12px}.inPaperPreview{height:52dvh;padding:16px 14px}.inPaperTabs{overflow-x:auto}.inPaperTabs button{flex:1;white-space:nowrap}
}
.inChoice{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--edge);
  border-radius:var(--radius-sm);padding:12px 14px;margin:8px 0;cursor:pointer;background:var(--pan2)}
.inChoice:hover{border-color:var(--faint)}
.inChoice.sel{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}
.inChoice input{margin-top:3px;accent-color:var(--brand)}
.inChoice b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.inChoice span{font-size:12px;color:var(--faint)}
.inChk{display:flex;gap:9px;align-items:flex-start;margin:6px 0;font-size:13px;color:var(--ink)}
.inChk input{margin-top:3px;accent-color:var(--brand)}
.inNote{background:var(--pan2);border:1px solid var(--edge);border-left:2px solid var(--teal);
  border-radius:var(--radius-sm);padding:10px 14px;font-size:12px;color:var(--dim);margin:12px 0}
.inNote.inFlag{border-left-color:var(--nogo)}
.inNote.inFlag b{color:var(--nogo)}
.inConfirm{color:var(--caution);font-size:11px;font-weight:700;font-family:var(--mono)}
.inDocs{list-style:none;padding:0;margin:0}
.inK{color:var(--faint)}
.inBody p{font-size:13px;margin:3px 0;color:var(--ink)}
.inFoot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--edge);
  padding:12px 22px;background:var(--pan)}
.inStepN{font-size:11px;color:var(--faint)}
.inResume,.inLaunch{position:fixed;right:22px;bottom:22px;z-index:210;background:var(--brand);color:#1d1503;
  border:none;border-radius:100px;padding:11px 22px;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow);font-family:inherit}
.inResume:hover,.inLaunch:hover{filter:brightness(1.08)}

/* intake rail group + documents overview */
.in-rail{display:flex;flex-direction:column;gap:1px;margin:0 0 3px}
.in-rail-head{display:flex;align-items:stretch}
.in-rail-main{flex:1;text-align:left;border:none;background:transparent;color:var(--dim);
  padding:5px 10px;font:700 12.5px var(--mono);letter-spacing:.7px;cursor:pointer;border-radius:7px;line-height:1.22}
.in-rail-main:hover{color:var(--ink);background:var(--pan2)}
.in-rail-caret{border:none;background:transparent;color:var(--faint);cursor:pointer;
  padding:7px 10px;font-size:11px;font-family:inherit;border-radius:8px}
.in-rail-caret:hover{color:var(--ink);background:var(--pan2)}
.in-rail-steps{margin:2px 0 4px}
.in-rail-step{display:block;width:100%;text-align:left;border:none;background:transparent;
  color:var(--faint);padding:5px 10px 5px 22px;font-size:12px;cursor:pointer;font-family:inherit;border-radius:8px}
.in-rail-step:hover{color:var(--ink);background:var(--pan2)}
.in-rail-step.on{color:var(--brand)}
.inDocRow{border-bottom:1px solid var(--edge);padding:4px 0}
.inDocHead{display:flex;align-items:flex-start;gap:10px}
.inDocHead .inChk{flex:1}
.inUp{border:1px solid var(--edge);background:var(--pan2);color:var(--dim);border-radius:8px;
  font-size:11.5px;padding:4px 12px;cursor:pointer;font-family:inherit;flex:none}
.inUp:hover{color:var(--ink);border-color:var(--faint)}
.inUp:disabled{opacity:.4;cursor:default}
.inFile{display:flex;align-items:center;gap:10px;margin:3px 0 3px 26px;font-size:12.5px}
.inFileName{color:var(--teal);cursor:pointer}
.inFileName:hover{text-decoration:underline}
.inFileMeta{color:var(--faint);font-size:11px}
.inFileDel{border:none;background:transparent;color:var(--faint);cursor:pointer;font-size:14px;padding:0 4px}
.inFileDel:hover{color:var(--nogo)}
.inDocFoot{margin:10px 0 0}
.inDrive{font-size:11px;font-weight:600;color:var(--faint);border:1px solid var(--edge);
  border-radius:100px;padding:2px 10px;vertical-align:3px;margin-left:8px}
.inDrive.on{color:var(--go);border-color:color-mix(in srgb,var(--go) 40%,transparent)}

/* ── MOTION AT ANCHOR: camera row + transport ────────────────────────────────────────────── */
.mv-cams{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.mv-cams button{flex:1 1 auto;min-width:56px;padding:3px 5px;font-size:11px;letter-spacing:.02em;
  background:transparent;border:1px solid var(--edge);color:var(--dim);border-radius:2px;cursor:pointer}
.mv-cams button:hover{color:var(--ink);border-color:var(--dim)}
.mv-cams button.on{background:var(--edge);color:var(--ink);border-color:var(--dim)}
.mv-transport{display:flex;align-items:center;gap:5px;margin-top:5px}
.mv-transport input[type=range]{accent-color:var(--brand);height:14px}
.mv-rate{background:transparent;border:1px solid var(--edge);color:var(--dim);border-radius:2px;
  font-size:11px;padding:2px 3px}
#anMotionClock{font-variant-numeric:tabular-nums;color:var(--ink)}
#anMotionClock .mv-call{font-weight:700;margin-left:6px}

/* CHANNEL CROSSING — departure window strip. One cell per candidate departure, coloured by the
   worst leg of the passage it would produce. Wraps rather than scrolls: the point is to see the
   whole week at once and spot where the good water sits. */
.x-strip{display:flex;flex-wrap:wrap;gap:3px}
.x-cell{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:52px;
  padding:5px 5px;border:1px solid var(--edge);border-radius:3px;background:var(--bg2);
  color:var(--ink);font:600 11px/1.15 var(--mono);letter-spacing:.4px;cursor:pointer}
.x-cell:hover{filter:brightness(1.25)}
.x-cell:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.x-cell-d{opacity:.75}
.x-cell-h{font-size:12px}
.x-cell.go{border-color:#2f9e5e;color:#7fe0a6}
.x-cell.caution{border-color:#d8a11a;color:#f0cd6b}
.x-cell.nogo{border-color:#c8452f;color:#f0917f}
#xResult .kv b.go{color:#7fe0a6}
#xResult .kv b.caution{color:#f0cd6b}
#xResult .kv b.nogo{color:#f0917f}

/* ── SPEC STRIP — the vessel the command home is tuned to (webapp/dashboard.js specStrip) ──
   Sits between the hero and the realm bar in the operations lens. Reads as a continuation of
   the hero (same card grammar, same accent variable) rather than as a second banner. */
.spec-strip{border:1px solid var(--edge);border-radius:14px;padding:16px 18px;margin:14px 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pan) 92%,transparent),var(--pan))}
.spec-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between}
.spec-id{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline}
.spec-eyebrow{font:700 11px/1 var(--body);letter-spacing:.14em;color:var(--faint)}
.spec-id b{font:600 19px/1.2 var(--display,var(--body));color:var(--ink)}
.spec-id i{font:400 12px var(--body);color:var(--dim);font-style:normal}
.spec-lens{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.spec-lens span{font:700 11.5px/1 var(--body);letter-spacing:.08em;color:var(--accent,#3fd0c9)}
.spec-lens i{font:400 11.5px var(--body);color:var(--faint);font-style:normal}
.spec-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--edge)}
.spec-fact{display:flex;flex-direction:column;gap:3px}
.spec-fact span{font:700 11px/1 var(--body);letter-spacing:.13em;color:var(--faint)}
.spec-fact b{font:600 14.5px/1.25 var(--body);color:var(--ink)}
.spec-tiles{margin-top:15px;padding-top:13px;border-top:1px solid var(--edge);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.spec-tiles-h{grid-column:1/-1;font:700 11px/1 var(--body);letter-spacing:.13em;color:var(--faint);margin-bottom:1px}
.spec-tile{border:1px solid var(--edge);border-radius:10px;padding:11px 12px;background:var(--bg);
  display:flex;flex-direction:column;gap:5px;transition:border-color .12s,transform .12s}
.spec-tile:not(.locked):hover{border-color:color-mix(in srgb,var(--accent,#3fd0c9) 55%,var(--edge));transform:translateY(-1px)}
.spec-tile b{font:600 13px/1.25 var(--body);color:var(--ink)}
.spec-tile i{font:400 11.5px/1.45 var(--body);color:var(--dim);font-style:normal}
.spec-tile-go{font:700 11px/1 var(--body);letter-spacing:.09em;color:var(--accent,#3fd0c9);margin-top:2px}
.spec-tile.locked{opacity:.55}
.spec-tile.locked .spec-tile-go{color:var(--faint)}
@media (max-width:640px){.spec-lens{align-items:flex-start;text-align:left}}

/* App-wide workspace controls: the rail can be pinned away, while focus mode turns any active
   view/player into the whole screen. Focus mode keeps #main as the fullscreen target so browser
   Escape restores both native fullscreen and the CSS shell in one gesture. */
body.rail-hidden #rail{display:none}
body.rail-hidden #railScrim{display:none!important}
body.focus-mode .topbar,body.focus-mode #rail,body.focus-mode #railScrim,body.focus-mode .disclaimer{display:none!important}
body.focus-mode #shell,body.focus-mode #main{height:100vh;height:100dvh}
body.focus-mode #main{background:var(--bg)}
body.focus-mode .view-pad{padding:12px}
#focusBtn[aria-pressed="true"],#railPin[aria-pressed="true"]{color:var(--brand);border-color:var(--brand)}
@media (max-width:820px){body.rail-hidden #rail{display:block}#railPin{display:none}}

/* Daily operations player — compact top-right command-home surface. The weather graphic is an
   orientation cue only; sourced values and narration remain in the native Weather player. */
.ops-command-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:14px;align-items:start}
.ops-command-side{position:sticky;top:8px}
@media (max-width:980px){.ops-command-grid{grid-template-columns:1fr}.ops-command-side{position:static}}
.opsb-viewport iframe.opsb-wx{position:absolute;inset:0;width:100%;height:100%;border:0;background:#061020}
.opsb-viewport iframe[hidden]{display:none}
.opsb-caption{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;padding:7px 10px;border-radius:8px;background:rgba(4,9,18,.78);border:1px solid var(--edge);backdrop-filter:blur(6px);font:500 12px/1.4 var(--sans,system-ui);color:var(--ink)}
.opsb-caption i{display:block;margin-top:2px;font:700 11px var(--mono);font-style:normal;letter-spacing:.14em;color:var(--faint)}
.opsb-caption:empty{display:none}
.opsb-act{position:absolute;left:10px;top:10px;z-index:3;padding:5px 9px;border-radius:7px;background:rgba(4,9,18,.72);border:1px solid var(--edge);font:800 11px var(--disp);letter-spacing:.12em;color:var(--ink)}
.opsb-act i{display:block;font:600 11px var(--mono);font-style:normal;letter-spacing:.1em;color:var(--brand);margin-top:2px}
.opsb-unmute{position:absolute;right:10px;bottom:44px;z-index:4;padding:6px 10px;border-radius:999px;border:1px solid var(--brand);background:rgba(242,169,59,.16);color:var(--brand);font:700 11px var(--mono);cursor:pointer}
.opsb-unmute[hidden]{display:none}
.opsb-stages button.loop{border-style:dashed}
.ops-command-main{min-width:0}
.opsb-card{border:1px solid var(--edge);border-radius:16px;overflow:hidden;background:var(--pan);box-shadow:var(--soft-shadow)}
.opsb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-bottom:1px solid var(--edge)}
.opsb-head>div:first-child{display:flex;flex-direction:column;gap:3px}
.opsb-head span{font:700 11px var(--mono);letter-spacing:1.3px;color:var(--faint)}
.opsb-head b{font:700 15px var(--disp);color:var(--ink)}
.opsb-actions{display:flex;gap:5px}.opsb-btn,.opsb-stages button,.opsb-tools button,.opsb-open{border:1px solid var(--edge);background:var(--bg2);color:var(--dim);border-radius:999px;font:700 11px var(--mono);cursor:pointer}
.opsb-btn{padding:7px 9px}.opsb-btn:hover,.opsb-stages button:hover,.opsb-tools button:hover{color:var(--ink);border-color:var(--teal)}
.opsb-btn[aria-pressed="true"],.opsb-stages button.on,.opsb-tools button[aria-pressed="true"]{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 55%,var(--edge));background:color-mix(in srgb,var(--brand) 10%,var(--bg2))}
.opsb-viewport{position:relative;aspect-ratio:16/9;min-height:210px;background:radial-gradient(circle at 40% 48%,#17355a 0 8%,#081426 38%,#030812 75%);overflow:hidden}
.opsb-native{position:absolute;inset:0;display:grid;place-items:center;background-image:linear-gradient(rgba(95,176,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(95,176,255,.08) 1px,transparent 1px);background-size:32px 32px}
.opsb-native[hidden],#opsbFrame[hidden]{display:none}
.opsb-orbit{width:62%;aspect-ratio:1;border:1px solid rgba(63,208,201,.45);border-radius:50%;box-shadow:0 0 45px rgba(95,176,255,.18);transition:transform 1.2s ease}
.opsb-viewport[data-scope="hawaii"] .opsb-orbit{transform:scale(1.45)}
.opsb-viewport[data-scope="honolulu"] .opsb-orbit{transform:scale(2.4)}
.opsb-islands{position:absolute;font:800 12px var(--mono);letter-spacing:2px;color:var(--teal);text-shadow:0 1px 8px #000}
.opsb-open{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:8px 12px;color:var(--ink);white-space:nowrap}
#opsbFrame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#02050a}
.opsb-detail{padding:8px 12px;font:600 11.5px var(--mono);color:var(--dim);border-top:1px solid var(--edge)}
.opsb-stages,.opsb-tools{display:flex;flex-wrap:wrap;gap:5px;padding:9px 11px 0}
.opsb-stages button,.opsb-tools button{padding:6px 9px}.opsb-tools{padding-bottom:9px;border-bottom:1px solid var(--edge)}
.opsb-card>p{margin:0;padding:9px 12px 11px;font:500 11px/1.4 var(--mono);color:var(--faint)}
@media (max-width:1100px){.ops-command-grid{grid-template-columns:1fr}.ops-command-grid #opsBroadcastMount{grid-row:1}.opsb-viewport{min-height:240px}}
@media (max-width:540px){.opsb-head{align-items:flex-start;flex-direction:column}.opsb-viewport{min-height:190px}.opsb-open{white-space:normal;width:80%}}

/* Map and broadcast responsive contract. Keep scroll ownership local: an overflowing weather tab
   rail must never programmatically pan #main and move the active chart off-screen. */
.weather-subnav{max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;flex:none;
  overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(63,208,201,.4) transparent}
.weather-subnav::-webkit-scrollbar{height:5px}
.weather-subnav::-webkit-scrollbar-thumb{background:rgba(63,208,201,.4);border-radius:999px}
#view-broadcast .an-sliders2{grid-template-columns:minmax(0,1fr)}

@media (max-width:560px){
  body.authed .topbar{overflow-x:clip;align-items:flex-start}
  body.authed .topbar-tools{flex:1 1 100%;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-start}
  .wx-locator{width:112px;right:8px;bottom:28px;padding:6px}
  .wx-locator span{font-size:11px;letter-spacing:.08em}
  .wx-mk .wx-lbl{display:none}
  .wx-mk .wx-dot{width:18px;height:18px;border-width:3px}
  .wx-reg-lbl,.wx-reg-badge{max-width:min(180px,calc(100vw - 32px));white-space:normal;
    text-align:center;line-height:1.25;overflow-wrap:anywhere}
  .disclaimer{padding:6px 10px;line-height:1.35;letter-spacing:.7px}
  .disclaimer .infra-badge,.disclaimer-meta{display:none}
  #view-anchor .map-attrib{right:6px;bottom:4px;max-width:46%;line-height:1.25;overflow-wrap:anywhere}
}

@media (pointer:coarse){
  .wx-chip{min-height:40px;display:inline-flex;align-items:center}
  .wx-check{min-height:32px}
}

.wx-card__imglink--loading,
.wx-card__imglink--unavailable{display:grid;place-items:center;min-height:180px;background:var(--panel2);color:var(--dim)}
.wx-card__imglink--loading::after{content:'Loading official NOAA product…'}
.wx-card__imglink--unavailable::after{content:'Preview unavailable · Open NOAA source';padding:18px;text-align:center}

/* ── MEDIA WALL — every map, chart and graph as an animated thumbnail (webapp/mediawall.js) ── */
.mw{margin:14px 0 6px}
.mw-head{display:flex;align-items:baseline;gap:12px;margin:0 0 8px}
.mw-eyebrow{font:700 11px var(--mono);letter-spacing:1.4px;color:var(--faint)}
.mw-head b{font:700 14px var(--disp);color:var(--ink)}
.mw-group{margin:8px 0 12px}
.mw-group-h{font:750 11px var(--mono);letter-spacing:1.3px;color:var(--dim);margin:0 0 6px}
.mw-group-h i{font-style:normal;color:var(--faint);margin-left:6px}
.mw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.mw-tile{position:relative;display:block;padding:0;border:1px solid var(--edge);border-radius:12px;overflow:hidden;background:var(--pan);cursor:pointer;text-align:left;color:inherit;font:inherit;transition:border-color .2s,transform .2s}
.mw-tile:hover{border-color:var(--teal);transform:translateY(-1px)}
.mw-media{position:relative;aspect-ratio:16/10;background:#071021;overflow:hidden}
.mw-media canvas,.mw-media img,.mw-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.mw-windy{pointer-events:none}
.mw-cap{padding:7px 9px 8px}
.mw-cap b{display:block;font:700 11.5px var(--mono);letter-spacing:.6px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-cap i{display:block;margin-top:2px;font:500 11px var(--sans,system-ui);font-style:normal;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ken Burns: the animation IS the thumbnail's liveness cue. Transform-only, so it costs nothing. */
@keyframes mw-kb{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.09) translate(-1.5%,1%)}100%{transform:scale(1) translate(0,0)}}
.mw-kb{animation:mw-kb 26s ease-in-out infinite;transform-origin:50% 50%}
.mw-kb-soft{animation-duration:40s}
@media (prefers-reduced-motion:reduce){.mw-kb{animation:none}}