/* ReefNav / Marine Signal Field
   Forecast colour is the primary reading surface; controls stay translucent,
   compact and predictable across desktop, iPad and iPhone. */

.redesign{
  --bg:#061218;--s1:#091b21;--s2:#0c2229;--s3:#102b33;--s4:#173a42;
  --line:#1c3941;--line2:#315058;--tx:#edf5f3;--tx2:#a9bcbd;--tx3:#70888c;
  --acc:#46d6ce;--acc2:#20aaa7;--accTx:#03191d;--coral:#ff7157;
  --good:#53cf78;--mod:#e6b64e;--rough:#f08a48;--dgr:#ed6258;--calm:#3ec9b7;
  --mapbg:#061218;--glass:rgba(5,18,24,.84);--shadow:0 12px 32px rgba(0,0,0,.28);
  --chrome:rgba(7,23,28,.92);--chrome2:rgba(7,23,28,.92);--chrome3:rgba(13,39,46,.94);
  --chromeLine:#214049;--chromeLine2:#315058;--chromeText:#f3f7f6;
  --chromeText2:#a9bcbd;--chromeText3:#70888c;--chromeHover:#0d2c34;
  --plot:#071c22;--metric:#0a1d23;--popup:#081b21;
  --chromeShadow:0 8px 28px rgba(0,16,21,.32);
  --fs:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",sans-serif;
  --fd:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,"Segoe UI",sans-serif;
  --fm:"SF Mono",ui-monospace,Menlo,monospace;
  --rail:76px;--panel:392px;--scrub:82px;--tabs:68px;--safe:env(safe-area-inset-bottom,0px);
  color-scheme:dark;font:14px/1.45 var(--fs);letter-spacing:0;
}
.redesign:not(.dark){
  --bg:#e7efed;--s1:#f4f8f7;--s2:#edf3f1;--s3:#e3ece9;--s4:#d3e1dd;
  --line:#c9d8d4;--line2:#a9bdb7;--tx:#10282e;--tx2:#526a6d;--tx3:#74898b;
  --acc:#087e81;--acc2:#056669;--accTx:#fff;--glass:rgba(244,248,247,.93);
  --shadow:0 10px 28px rgba(8,35,39,.12);
  --chrome:rgba(244,248,247,.93);--chrome2:rgba(244,248,247,.93);--chrome3:rgba(232,241,238,.96);
  --chromeLine:#c7d7d2;--chromeLine2:#a9bdb7;--chromeText:#10282e;
  --chromeText2:#526a6d;--chromeText3:#7a8e8f;--chromeHover:#e5efeb;
  --plot:#e7f0ed;--metric:#edf3f1;--popup:#f4f8f7;--mapbg:#dfe8e6;
  --chromeShadow:0 8px 24px rgba(8,35,39,.12);color-scheme:light;
}
.redesign *{scrollbar-color:var(--line2) transparent}
.redesign button:focus,.redesign input:focus{outline:0!important;box-shadow:none!important}
.redesign button:focus-visible,.redesign input:focus-visible{outline:2px solid rgba(98,225,216,.9)!important;outline-offset:-2px}
.redesign .lbl,.redesign #sheetHead h2,.redesign .section-head{
  font-weight:750;letter-spacing:.15em;text-transform:uppercase}
.redesign .big-n,.redesign .sg b,.redesign .tnow b,.redesign .stat3 .big-n{
  font-family:var(--fm);font-variant-numeric:tabular-nums}

/* The forecast colour bitmap is retired — particles carry wind speed on their
   own and the wash competed with swell, pressure, radar and sea temp for the
   same pixels. The canvas stays in the DOM (panning and zoom bookkeeping still
   reference it) but is permanently invisible and never painted. */
.redesign #windFieldC{display:none!important}

/* Wind key. There is no colour field any more, so this is no longer a ramp —
   it is a legend for the streaks themselves: three weight/colour tiers matching
   what the particle renderer actually draws, at the thresholds it actually
   uses (15 kn and 22 kn). Colours follow the BASE MAP via .lightbase, exactly
   as the particles do, so the key never contradicts the map. */
/* The plate follows the BASE MAP, not the UI theme. The strokes are drawn in
   the particle colours, and those depend on whether the map underneath is dark
   or light — a light chrome panel in light mode over a dark satellite base
   would have shown pale streaks on near-white and read as blank. */
.redesign #windScale{position:fixed;z-index:35;left:calc(var(--rail) + 16px);bottom:calc(var(--scrub) + 72px);
  display:none;width:auto;padding:9px 12px 8px;border-radius:10px;
  box-shadow:var(--chromeShadow);backdrop-filter:blur(10px) saturate(1.06);
  border:1px solid rgba(255,255,255,.14);background:rgba(5,20,26,.8);
  --keyTx:#f2faf8;--keyTx2:#a9c2c4;--keyLine:rgba(255,255,255,.14);
  --t1:#fffaf4;--t2:#ffecce;--t3:#ffd6b4}
.redesign #windScale.lightbase{
  border-color:rgba(10,40,48,.16);background:rgba(249,252,250,.86);
  --keyTx:#0c252b;--keyTx2:#456066;--keyLine:rgba(10,40,48,.14);
  --t1:#0e4684;--t2:#b8600a;--t3:#b21434}
.redesign #windScale.on{display:block}
.redesign #windScale header{display:flex;align-items:baseline;gap:6px}
.redesign #windScale header b{font-size:9.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--keyTx)}
.redesign #windScale header span{font:8px var(--fm);color:var(--keyTx2)}
.redesign #windScale .wskey{display:flex;flex-direction:column;gap:5px;margin:8px 0 0;padding:0;list-style:none}
.redesign #windScale .wskey li{display:flex;align-items:center;gap:9px;
  font:9.5px var(--fm);color:var(--keyTx2);font-variant-numeric:tabular-nums}
.redesign #windScale .wskey i{display:block;flex:none;border-radius:99px}
/* length and weight rise with the tier, the way the streaks themselves do */
.redesign #windScale .wskey .t1{width:20px;height:1.4px;background:var(--t1);opacity:.7}
.redesign #windScale .wskey .t2{width:29px;height:1.9px;background:var(--t2);opacity:.85}
.redesign #windScale .wskey .t3{width:38px;height:2.6px;background:var(--t3)}
.redesign #windScale .wskey li span{margin-left:auto;padding-left:8px}
.redesign #windScale small{display:block;margin-top:8px;padding-top:7px;
  border-top:1px solid var(--keyLine);font-size:8px;line-height:1.35;letter-spacing:.02em;
  color:var(--keyTx2);text-transform:none;max-width:132px;opacity:.9}


/* Map labels remain subordinate to chart and forecast fields. */
.redesign .mkl{top:15px;color:#f6fbfa;font-size:10px;font-weight:750;
  text-shadow:0 1px 2px #001015,0 0 8px #001015,0 0 12px #001015}
/* A crisp 0-blur ring reads as a cutout pasted on top of the imagery rather
   than a marker sitting on the map. A soft, translucent ring plus a blurred
   drop shadow instead of a hard-edged one lets the same dot sit IN the scene. */
.redesign .mk i{box-shadow:0 0 0 1.25px rgba(4,19,24,.55),0 1px 5px rgba(0,0,0,.4)}
.redesign .mk.sel i{box-shadow:0 0 0 1.25px rgba(4,19,24,.55),0 0 0 4px var(--acc),0 2px 8px rgba(0,0,0,.45)}
/* The hover tip. This was written ".maplibregl-popup tip", which asks for a
   <tip> ELEMENT inside the popup — there is no such element, so none of it has
   ever applied and the tip has been falling back to the full pin popup's
   padding and weight. The class is on the popup itself. */
.redesign .maplibregl-popup.tip{max-width:min(220px,calc(100vw - 24px))!important}
.redesign .maplibregl-popup.tip .maplibregl-popup-content{padding:9px 11px!important;
  border-radius:10px!important;font-size:12px;line-height:1.3}
.redesign .maplibregl-popup.tip .maplibregl-popup-content b{display:block;margin-bottom:2px;
  font-size:12.5px;font-weight:700;color:var(--chromeText)}

/* Desktop rail: intentionally narrow, edge-bound and visually weightless. */
.redesign #tabs{position:fixed;z-index:51;left:0;top:0;bottom:var(--scrub);width:var(--rail);height:auto;
  padding:12px 7px;gap:2px;border:0;border-right:1px solid var(--line);border-radius:0;
  background:var(--chrome);backdrop-filter:none;box-shadow:none}
.redesign #tabs button{position:relative;width:100%;height:68px;margin:0!important;border:0!important;
  border-radius:8px!important;background:transparent;color:var(--tx3);font-size:10px;font-weight:650}
.redesign #tabs button svg{width:22px;height:22px}
.redesign #tabs button:hover{background:color-mix(in srgb,var(--acc) 7%,transparent);color:var(--tx2)}
.redesign #tabs button:focus{outline:0!important;box-shadow:none!important}
.redesign #tabs button[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 11%,transparent);color:var(--acc)}
.redesign #tabs button[aria-pressed="true"]::after{content:"";position:absolute;left:-7px;top:17px;
  bottom:17px;width:2px;background:var(--acc)}

/* One command bar. The input is not a nested component. */
.redesign #top{left:calc(var(--rail) + 16px);right:auto;top:14px;width:min(720px,calc(100vw - 190px));height:54px;
  padding:0;gap:0;display:grid;grid-template-columns:auto minmax(220px,1fr) auto;overflow:visible;
  border:1px solid var(--chromeLine);border-radius:13px;background:var(--chrome);
  backdrop-filter:blur(10px) saturate(1.08);box-shadow:var(--chromeShadow)}
.redesign #top>*{height:52px;min-height:52px;margin:0;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.redesign .brandbtn{padding:0 15px 0 11px;gap:9px;border-right:1px solid var(--chromeLine)!important}
.redesign .brandbtn .m{width:27px;height:27px}.redesign .brandbtn b{font-size:16px;letter-spacing:-.01em;color:var(--chromeText)}
.redesign #searchWrap{width:auto;min-width:0;background:transparent!important;box-shadow:none!important}
.redesign #q{display:block;width:100%;height:52px!important;line-height:normal;padding:0 15px;
  border:0!important;outline:0;font-size:14px;color:var(--chromeText);background:transparent!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-appearance:none;appearance:none}
.redesign #q::placeholder{color:var(--chromeText3)}.redesign #q:focus{box-shadow:none!important}
.redesign .pill{padding:0 14px;border-left:1px solid var(--chromeLine)!important;color:var(--chromeText2)}
.redesign #qres{top:53px;left:-1px;right:-1px;border:1px solid var(--chromeLine);border-top-color:var(--chromeLine2);
  border-radius:0 0 10px 10px;background:var(--chrome2);box-shadow:var(--chromeShadow);overflow:hidden}
.redesign #qres div{min-height:46px;padding:9px 15px;border-bottom:1px solid var(--chromeLine)}
.redesign #qres div:last-child{border-bottom:0}

/* Map controls share one material and one geometry. */
.redesign #mctl{right:14px;top:14px;gap:0;overflow:hidden;border:1px solid var(--chromeLine);
  border-radius:13px;background:var(--chrome2);backdrop-filter:blur(10px) saturate(1.06);box-shadow:var(--shadow)}
.redesign .fab,.redesign .fab.zoom{width:46px;height:46px;border:0;border-radius:0;box-shadow:none;
  background:transparent;backdrop-filter:none;color:var(--chromeText2)}
.redesign .fab+.fab{border-top:1px solid var(--chromeLine)}
/* .fab sets display, which outranks the hidden attribute's UA rule — so a
   fab that is only present in one view has to say so itself. */
.redesign .fab[hidden]{display:none!important}
.redesign .fab:hover,.redesign .fab[aria-pressed="true"]{background:var(--chromeHover);color:var(--acc)}
.redesign .fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.redesign #layers,.redesign #sopts{right:72px;top:14px;width:280px;padding:16px;border:1px solid var(--chromeLine);
  border-radius:12px;background:var(--chrome);box-shadow:var(--chromeShadow)}
.redesign .seg{padding:3px;border-radius:8px;background:var(--chrome3)}.redesign .seg button{border-radius:6px}
.redesign .seg button[aria-pressed="true"]{background:var(--chrome2);color:var(--chromeText)}

/* Layer bar: every item uses the same shape, fill and active convention. */
.redesign #lbar{left:calc(var(--rail) + 16px);bottom:calc(var(--scrub) + 14px);max-width:calc(100vw - 190px);
  gap:0;padding:0;overflow-x:auto;border:1px solid var(--chromeLine);border-radius:10px;
  background:var(--chrome);box-shadow:var(--chromeShadow);backdrop-filter:blur(10px) saturate(1.06);
  mask-image:none;-webkit-mask-image:none}
.redesign #lbar button{height:44px;min-height:44px;padding:0 13px;border:0;border-right:1px solid var(--chromeLine);
  border-radius:0!important;background:transparent!important;color:var(--chromeText2);font-size:12px;font-weight:650;
  position:relative;transition:color .12s ease}
.redesign #lbar button:last-child{border-right:0}
.redesign #lbar button:hover{color:var(--chromeText)}
.redesign #lbar button[aria-pressed="true"]{color:var(--chromeText);background:color-mix(in srgb,var(--acc) 12%,transparent)!important}
.redesign #lbar button[aria-pressed="true"]::after{content:"";position:absolute;left:11px;right:11px;bottom:0;
  height:2px;background:var(--acc)}
.redesign #lbar button svg{width:17px;height:17px}
.redesign #mapLegend{position:fixed;z-index:34;left:calc(var(--rail) + 16px);bottom:calc(var(--scrub) + 66px);
  display:none;align-items:center;gap:8px;height:29px;padding:0 10px;border:1px solid var(--chromeLine);border-radius:8px;
  background:var(--chrome);color:var(--chromeText2);font-size:10.5px;box-shadow:var(--chromeShadow)}
.redesign #mapLegend.on{display:flex}.redesign #mapLegend b{color:var(--chromeText);font-size:10.5px}
.redesign #mapLegend small{padding-left:8px;border-left:1px solid var(--chromeLine2);color:var(--chromeText3)}
.redesign .legend-ramp{width:56px;height:5px;border-radius:4px;background:linear-gradient(90deg,#253b7e,#31b9c4,#e8d552,#e86940)}
.redesign .legend-ramp.sst{background:linear-gradient(90deg,#244aa4,#20b7c2,#e5d759,#ec7544)}
.redesign .legend-ramp.radar{background:linear-gradient(90deg,#2b91d1,#53d09c,#f0d54c,#ed6148)}
.redesign .legend-flow{width:28px;height:1px;background:var(--acc);position:relative}
.redesign .legend-flow::after{content:"";position:absolute;right:0;top:-3px;border-left:5px solid var(--acc);border-top:3px solid transparent;border-bottom:3px solid transparent}
.redesign #attrib{z-index:34;left:auto!important;right:14px;bottom:calc(var(--scrub) + 6px);
  width:max-content;text-align:right}

/* Timeline dock: joined to the viewport, not a floating white capsule. */
.redesign #scrub{left:var(--rail);right:0;bottom:0;height:var(--scrub);padding:9px 14px;gap:11px;
  border:0;border-top:1px solid var(--chromeLine);border-radius:0;background:var(--chrome);
  backdrop-filter:none;box-shadow:var(--chromeShadow);overflow:hidden}
.redesign #scrub .sbtn{width:44px;height:44px;border:1px solid var(--chromeLine2);border-radius:9px;background:var(--chrome3);color:var(--chromeText)}
.redesign #scrub .sbtn:hover{background:var(--chromeHover);color:var(--chromeText)}
.redesign .tnow{display:grid;grid-template-columns:auto auto;column-gap:8px;align-content:center;min-width:184px}
.redesign .tnow span{grid-column:1/-1;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--chromeText3)}
.redesign .tnow b{font-size:16px;color:var(--chromeText)}.redesign .tnow s{align-self:end;text-decoration:none;font-size:11px;color:var(--chromeText3)}
.redesign #ribwrap{height:58px;overflow:hidden;border:1px solid var(--chromeLine2);border-radius:7px;background:var(--plot)}
.redesign #ribdays{font-weight:700;letter-spacing:.1em;color:var(--chromeText2)}

/* Desktop inspector: edge-bound, dense and calm. No white card stack. */
.redesign #sheet{left:var(--rail);top:0;bottom:var(--scrub);width:var(--panel);height:auto;overflow:hidden;
  transform:translateX(-100%);visibility:hidden;opacity:0;border:0;border-right:1px solid var(--line);
  border-radius:0;background:var(--s1);box-shadow:12px 0 30px #00101544;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .14s ease,visibility 0s linear .22s}
.redesign #sheet.open{transform:translateX(0);visibility:visible;opacity:1;border-radius:0;transition-delay:0s}
.redesign #grip{display:none}
.redesign #sheetHead{height:58px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--s1)}
.redesign #sheetHead h2{font-size:10.5px;color:var(--tx2)}
.redesign #sheetHead .close{width:34px;height:34px;border-radius:7px;color:var(--tx3)}
.redesign #sheetBody{padding:15px 17px 28px;background:var(--s1)}
.redesign .card{margin:0;padding:17px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.redesign .card:first-child{padding-top:0}.redesign .card:last-child{border-bottom:0}
.redesign .verdictbar{margin:0;padding:18px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.redesign .vb-name{font:700 22px/1.1 var(--fd);letter-spacing:-.025em;color:var(--tx)}
.redesign .vb-sub{margin-top:5px;font-size:9.5px;letter-spacing:.15em}.redesign .vb-call{border-radius:999px!important;padding:6px 10px!important}
.redesign .vb-sig{gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--line)}
.redesign .sg{border:0!important;border-radius:0!important;background:var(--metric)!important;padding:11px}
.redesign .sg b{font-size:19px}
/* Was one inline run of button + plain text + " · " separators, which wraps
   wherever the browser finds a space — including mid-phrase ("High 21:00"
   split across two lines). Each fact is now a non-breaking chip in a
   flex-wrap row: it can still wrap between facts on a narrow panel, just
   never inside one. */
.redesign .vb-foot{padding-top:10px;border-top:1px solid var(--line);line-height:1.6;
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px;row-gap:4px}
.redesign .vb-chip{white-space:nowrap}
.redesign .vb-chip::before{content:"·";margin-right:5px;opacity:.5}
.redesign .sourceTag{display:inline-flex;margin-right:5px;padding:2px 6px;border:1px solid var(--line2);border-radius:4px;color:var(--tx2)}
.redesign details.eviD>summary{min-height:46px;display:flex;align-items:center;color:var(--tx2)}
/* One button/badge/warning language for the whole app, not a per-instance
   patch. Before this, .btn, .wbadge and .warncard each carried their own
   height/radius from whichever of ui.css's several (sometimes conflicting —
   ui.css itself defines .btn twice, at 40px/10px and 38px/11px) legacy
   rules happened to win the cascade in that spot, plus one-off redesign.css
   overrides for specific rows. Two buttons that were supposed to read as
   the same kind of control could end up a few pixels different in height —
   small, but exactly the kind of thing that reads as "doesn't look right"
   without an obvious reason why. Unified here: .btn and .wbadge share one
   height and radius, and both get the same hover/press feedback so every
   clickable control in the app — not just this one row — moves the same
   way under a pointer. */
.redesign .btn,.redesign .wbadge{min-height:42px;border-radius:8px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .08s ease,box-shadow .15s ease}
.redesign .btn:active,.redesign .wbadge:active{transform:scale(.97)}
.redesign .btn.sec:hover,.redesign .wbadge:hover{border-color:var(--acc);color:var(--tx)}
.redesign .btn.pri{background:var(--acc);color:var(--accTx);border-color:var(--acc)}
.redesign .btn.pri:hover{filter:brightness(1.06)}
.redesign .btn:focus-visible,.redesign .wbadge:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
/* .wbadge sits beside .btn.iconb in the same row and both must read as the
   same size square/pill family — square icon button, pill text badge, same
   height and radius, so neither looks like it wandered in from elsewhere. */
.redesign .wbadge{padding:0 13px;border:1px solid color-mix(in srgb,var(--dgr) 32%,transparent)}
.redesign .vb-act .btn.iconb{width:42px}
/* The bigger warning block (route hazards, stale-outlook notices) shares
   the same radius language and gets the same soft hover/press treatment as
   an interactive warncard (some are clickable) rather than reading as a
   different design system entirely. */
.redesign .warncard{border-radius:8px;transition:border-color .15s ease}
.redesign input,.redesign select{border-radius:8px!important}.redesign .row{min-height:43px}
.redesign .note{font-size:12px;line-height:1.6;color:var(--tx3)}

/* Fishing quality is carried by a small label, not a coloured rail. */
.redesign .bite{position:relative;margin:0;padding:14px 0;border:0!important;border-bottom:1px solid var(--line)!important;
  border-radius:0;background:transparent}
.redesign .bite:last-child{border-bottom:0!important}.redesign .bite::before{display:none!important}
.redesign .bite.hot{background:transparent}.redesign .bite .bt{font:700 16px/1.25 var(--fd)}
.redesign .bite .bw{margin-top:4px;font-size:12px;color:var(--tx3)}
.redesign .bite .good{padding:3px 7px;border-radius:4px;
  background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.redesign .tlbox,.redesign .fishgrp{border-radius:8px!important}

/* Route weather stays embedded in Plan. */
.redesign .passage-block{margin:15px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.redesign .section-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:13px;color:var(--tx2);font-size:10px}
.redesign .section-head small{font-family:var(--fs);font-weight:500;text-transform:none;letter-spacing:0;color:var(--tx3)}
.redesign .passage-profile{display:grid;grid-template-columns:repeat(5,1fr);position:relative;gap:3px}
.redesign .passage-profile::before{content:"";position:absolute;left:8%;right:8%;top:4px;height:1px;background:var(--line2)}
.redesign .passage-stop{position:relative;display:flex;flex-direction:column;min-width:0;padding-top:14px;font-size:10.5px}
.redesign .route-node{position:absolute;z-index:1;top:0;left:50%;width:8px;height:8px;transform:translateX(-50%);border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--s1)}
.redesign .passage-stop b,.redesign .passage-stop time,.redesign .passage-stop span,.redesign .passage-stop small{white-space:nowrap}
.redesign .passage-stop time,.redesign .passage-stop span{font-family:var(--fm)}
.redesign .passage-stop b{font-size:10px;color:var(--tx2)}.redesign .passage-stop time{font-size:10px;color:var(--tx3)}
.redesign .passage-stop span{font-size:11.5px;color:var(--tx)}.redesign .passage-stop small{font-size:9.5px;color:var(--tx3)}
.redesign .forecast-link{display:none}

/* ---- popups on the map ---------------------------------------------------
   A popup is a floating map object, like the control stack, the layer bar and
   the legend — so it is made of the same thing they are: the chrome material,
   its line, its text, its shadow. It used to be built from the PANEL tokens
   instead, which is why it read as a plain white card dropped on the map
   while everything around it was tinted glass, and why it changed character
   between themes in a way none of its neighbours did.

   It also sits ABOVE the controls. The stack is 40; a popup that opened under
   the zoom buttons was clipped by them, which is the other half of why this
   looked unfinished. */
.redesign .maplibregl-popup{z-index:46}
.redesign .maplibregl-popup-content{border:1px solid var(--chromeLine)!important;border-radius:14px!important;
  background:var(--chrome)!important;color:var(--chromeText)!important;
  box-shadow:var(--chromeShadow)!important;backdrop-filter:blur(10px) saturate(1.06)}
.redesign .maplibregl-popup-tip{background:var(--chrome)!important;border-color:var(--chromeLine)!important}
.redesign .maplibregl-popup-close-button{top:9px!important;right:9px!important;color:var(--chromeText3)!important}
.redesign .pin{padding:15px 15px 14px}
.redesign .pin-meta{padding:0 28px 11px 0;border-bottom:1px solid var(--chromeLine)}
.redesign .pin-time{margin:0 0 4px;font-size:9px;font-weight:760;letter-spacing:.15em;text-transform:uppercase;color:var(--acc)}
.redesign .pin-co{padding:0;font:570 11px/1.2 var(--fm);letter-spacing:.01em;color:var(--chromeText3)}
.redesign .pin-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 12px;border-bottom:1px solid var(--chromeLine)}
.redesign .pin-stats>div{min-width:0;padding:11px 11px 11px 0}.redesign .pin-stats>div+div{padding-left:12px;border-left:1px solid var(--chromeLine)}
.redesign .pin-stats small{display:block;margin-bottom:2px;font-size:8px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--chromeText3)}
.redesign .pin-stats span{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.redesign .pin-stats b{font:700 20px/1 var(--fm);letter-spacing:-.05em;color:var(--chromeText)}
.redesign .pin-stats em{overflow:hidden;text-overflow:ellipsis;font:550 10px/1 var(--fm);font-style:normal;color:var(--chromeText2)}
.redesign .pin-act{display:block;margin:0}.redesign .pin-secondary{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
.redesign .pbtn{height:36px!important;min-width:0;border:1px solid var(--chromeLine)!important;border-radius:9px!important;
  background:var(--chrome3)!important;color:var(--chromeText)!important;font-size:11px!important;font-weight:670!important;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:6px;padding:0 9px!important}
.redesign .pbtn svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}


/* "Forecast here" spans the secondary grid rather than sitting in its own row,
   so the grid's own 7px gap does the spacing. It was styled as the quiet
   middle rank back when "View structure" was the accent primary above it;
   that button is gone — structure is the map now — and this was left as a
   popup with no primary at all. It is the primary. See .pin-secondary .fc. */
.redesign .pbtn.fc{grid-column:1/-1;justify-content:center}
.redesign .pbtn.ghost{background:transparent!important;color:var(--chromeText2)!important;border-color:var(--chromeLine)!important}
.redesign .pbtn:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--chromeLine))!important;background:var(--chromeHover)!important}


/* Desktop: map furniture shifts only when the inspector is visible. */
@media (min-width:1180px){
  .redesign.sheetOpen #top{left:calc(var(--rail) + var(--panel) + 16px);width:min(720px,calc(100vw - var(--rail) - var(--panel) - 110px))}
  .redesign.sheetOpen #lbar{left:calc(var(--rail) + var(--panel) + 16px);max-width:calc(100vw - var(--rail) - var(--panel) - 105px)}
  .redesign.sheetOpen #mapLegend{left:calc(var(--rail) + var(--panel) + 16px)}
  .redesign.sheetOpen #windScale{left:calc(var(--rail) + var(--panel) + 16px)}
  .redesign.sheetOpen #attrib{left:auto;right:14px}
  .redesign .vb-sig{grid-template-columns:repeat(3,1fr)}
}

/* iPad landscape: the navigation stays in the rail. This prevents the desktop
   rail offset from becoming an empty strip and avoids stacking tabs under time. */
@media (min-width:901px) and (max-width:1179px) and (orientation:landscape){
  .redesign{--rail:76px;--panel:360px;--tabs:0px;--scrub:72px}
  .redesign #tabs{left:0;right:auto;top:0;bottom:0;width:var(--rail)!important;height:auto;padding:10px 0;
    display:flex;flex-direction:column;border:0;border-right:1px solid var(--line)}
  .redesign #tabs button{width:100%;min-width:0;height:68px;flex:none}
  .redesign #tabs button[aria-pressed="true"]::after{left:0;right:auto;top:17px;bottom:17px;width:2px;height:auto}
  .redesign #map,.redesign:not(.sheetOpen) #map{left:var(--rail)}
  .redesign #sheet{left:var(--rail);right:auto;top:0;bottom:0;width:var(--panel);transform:translateX(-100%);
    border-left:0;border-right:1px solid var(--line);padding-top:0}
  .redesign #sheet.open{transform:translateX(0)}
  .redesign #top{left:calc(var(--rail) + var(--panel) + 14px);right:70px;width:auto}
  .redesign:not(.sheetOpen) #top{left:calc(var(--rail) + 14px);right:70px;width:auto}
  .redesign #mctl{right:12px;top:78px}
  .redesign #scrub{left:calc(var(--rail) + var(--panel));right:0;bottom:0;width:auto;height:var(--scrub);
    display:flex;padding:9px 12px;gap:10px;grid-template:none}
  .redesign #scrub .sbtn{width:42px;height:42px}.redesign #ribwrap{height:52px}
  .redesign:not(.sheetOpen) #scrub{left:var(--rail);width:auto}
  .redesign #lbar{left:calc(var(--rail) + var(--panel) + 14px);bottom:calc(var(--scrub) + 12px);
    max-width:calc(100vw - var(--rail) - var(--panel) - 28px)}
  .redesign #lbar button{padding:0 8px;font-size:11px}.redesign #lbar button svg{width:16px;height:16px}
  .redesign:not(.sheetOpen) #lbar{left:calc(var(--rail) + 14px);max-width:calc(100vw - var(--rail) - 28px)}
  .redesign #mapLegend{left:calc(var(--rail) + var(--panel) + 14px);bottom:calc(var(--scrub) + 64px)}
  .redesign:not(.sheetOpen) #mapLegend{left:calc(var(--rail) + 14px)}
  .redesign #windScale{left:calc(var(--rail) + var(--panel) + 14px);bottom:calc(var(--scrub) + 70px)}
  .redesign:not(.sheetOpen) #windScale{left:calc(var(--rail) + 14px)}
  .redesign #attrib,.redesign:not(.sheetOpen) #attrib{left:auto;right:12px;bottom:calc(var(--scrub) + 6px)}
  .redesign .passage-profile{grid-template-columns:repeat(3,1fr)}.redesign .passage-stop:nth-child(n+4){display:none}
}

/* iPad portrait: map and inspector coexist; controls never share a lane. */
@media (min-width:601px) and (max-width:1199px) and (orientation:portrait){
  .redesign{--tabletPanel:min(400px,46vw);--tabs:64px;--scrub:104px}
  .redesign #tabs{left:0;right:0;top:auto;bottom:0;width:auto;height:var(--tabs);padding:3px 7px;
    display:flex;border:0;border-top:1px solid var(--line)}
  .redesign #tabs button{width:auto;min-width:0;height:57px;flex:1}.redesign #tabs button[aria-pressed="true"]::after{
    left:24%;right:24%;top:auto;bottom:-3px;width:auto;height:2px}
  .redesign #top{left:12px;right:12px;width:auto}
  .redesign:not(.sheetOpen) #top{left:12px;right:12px;width:auto}
  .redesign.sheetOpen #top{right:calc(var(--tabletPanel) + 12px)}
  .redesign #mctl{right:12px;top:78px}
  .redesign.sheetOpen #mctl{right:calc(var(--tabletPanel) + 12px)}
  .redesign #sheet{left:auto;right:0;top:0;bottom:var(--tabs);width:var(--tabletPanel);
    transform:translateX(100%);border-left:1px solid var(--line);border-right:0;box-shadow:-12px 0 30px #00101555}
  .redesign #sheet.open{transform:translateX(0)}
  .redesign #scrub{left:0;right:0;bottom:var(--tabs);height:var(--scrub);padding:7px 10px;
    gap:6px 10px;grid-template-rows:36px 48px}
  .redesign #scrub .sbtn{width:36px;height:36px}.redesign #ribwrap{height:48px}
  .redesign.sheetOpen #scrub{right:var(--tabletPanel)}
  .redesign #sheet.open~#scrub{bottom:var(--tabs);height:var(--scrub);background:var(--chrome);
    border:0;border-top:1px solid var(--chromeLine);border-radius:0;box-shadow:var(--chromeShadow)}
  .redesign #lbar{left:12px;bottom:calc(var(--tabs) + var(--scrub) + 12px);max-width:calc(100vw - 24px)}
  .redesign.sheetOpen #lbar,.redesign.sheetOpen #mapLegend{display:none!important}
  .redesign #mapLegend{left:12px;bottom:calc(var(--tabs) + var(--scrub) + 64px)}
  .redesign #windScale{left:12px;bottom:calc(var(--tabs) + var(--scrub) + 70px)}
  .redesign.sheetOpen #windScale{display:none!important}
  .redesign #attrib{left:auto;right:12px;bottom:calc(var(--tabs) + var(--scrub) + 6px)}
  .redesign.sheetOpen #attrib{right:calc(var(--tabletPanel) + 12px)}
  .redesign .passage-profile{grid-template-columns:repeat(3,1fr)}.redesign .passage-stop:nth-child(n+4){display:none}
}

/* iPhone: top instrument, map, layer rail, timeline, sheet, tabs — one continuous stack. */
@media (max-width:600px){
  .redesign{--tabs:64px;--scrub:88px;--mobile-sheet:46dvh}
  .redesign[data-view="fish"],.redesign[data-view="out"],.redesign[data-view="more"]{--mobile-sheet:62dvh}
  .redesign #top{left:8px;right:8px;top:8px;width:auto;height:48px;grid-template-columns:44px 1fr auto;border-radius:10px}
  .redesign #top>*{height:46px;min-height:46px}.redesign .brandbtn{width:44px;padding:0;justify-content:center}
  .redesign .brandbtn b{display:none}.redesign .brandbtn .m{width:27px;height:27px}
  .redesign #q{height:46px!important;line-height:46px;padding:0 11px;font-size:13px}
  .redesign .pill{display:flex;padding:0 9px}.redesign #statTx{font-size:11px}
  .redesign #mctl{top:66px;right:8px}.redesign #fTrack,.redesign #fIn,.redesign #fOut{display:none}
  .redesign .fab,.redesign .fab.zoom{width:46px;height:46px}
  .redesign #layers{top:66px;left:8px;right:62px;width:auto}
  .redesign #tabs{left:0;right:0;top:auto;bottom:0;width:auto;height:calc(var(--tabs) + var(--safe));
    padding:0 3px var(--safe);display:flex;border:0;border-top:1px solid var(--line);background:var(--chrome)}
  .redesign #tabs button{height:var(--tabs);flex:1;min-width:0;font-size:9.5px;border-radius:0!important}
  .redesign #tabs button svg{width:20px;height:20px}.redesign #tabs button[data-t="out"]{display:flex}
  .redesign #tabs button[aria-pressed="true"]::after{left:24%;right:24%;top:0;bottom:auto;width:auto;height:2px}
  .redesign #sheet{left:0;right:0;top:auto;bottom:calc(var(--tabs) + var(--safe));width:auto;height:var(--mobile-sheet);
    transform:translateY(100%);border:0;border-top:1px solid var(--line);border-radius:0;background:var(--s1);box-shadow:none;
    transition:height .22s ease,transform .22s ease,opacity .12s ease,visibility 0s linear .22s}
  .redesign #sheet.open{transform:translateY(0);border-radius:0;transition-delay:0s}
  .redesign #sheet.full{height:calc(100dvh - var(--tabs) - var(--safe));border-radius:0}
  .redesign #grip{display:flex;height:18px}.redesign #sheetHead{height:40px;padding:0 13px}
  .redesign #sheetBody{padding:10px 13px 22px}
  .redesign #scrub{left:0;right:0;bottom:calc(var(--tabs) + var(--safe));height:var(--scrub);padding:6px 8px;
    grid-template-columns:38px 1fr 38px;grid-template-rows:30px 40px;gap:4px 7px;border-radius:0}
  .redesign.sheetOpen #scrub{bottom:calc(var(--tabs) + var(--safe) + var(--mobile-sheet));z-index:49}
  .redesign #sheet.open~#scrub{bottom:calc(var(--tabs) + var(--safe) + var(--mobile-sheet));
    background:var(--chrome);border:0;border-top:1px solid var(--chromeLine);border-radius:0;
    box-shadow:var(--chromeShadow)}
  .redesign #sheet.full~#scrub{display:none}
  .redesign #scrub .sbtn{width:38px;height:30px;border-radius:6px}
  .redesign .tnow{min-width:0;grid-template-columns:auto 1fr auto}.redesign .tnow span{display:none}
  .redesign .tnow b{font-size:13px}.redesign #ribwrap{height:40px;border-radius:5px}
  .redesign #lbar{left:0;right:0;bottom:calc(var(--tabs) + var(--scrub) + var(--safe));max-width:none;
    border-left:0;border-right:0;border-radius:0;padding:0;overflow-x:auto}
  .redesign.sheetOpen #lbar{display:none}.redesign #lbar button{height:42px;min-height:42px;padding:0 11px}
  .redesign #mapLegend{left:8px;bottom:calc(var(--tabs) + var(--scrub) + var(--safe) + 52px);max-width:calc(100vw - 72px)}
  .redesign.sheetOpen #mapLegend{display:none!important}
  .redesign:not(.structure-view) #mapLegend small{display:none}
  /* Phone: the key lies down into one row so it costs a strip, not a corner. */
  .redesign #windScale{left:8px;bottom:calc(var(--tabs) + var(--scrub) + var(--safe) + 51px);
    width:auto;max-width:calc(100vw - 16px);padding:5px 10px;border-radius:8px;
    display:none;align-items:center;gap:10px}
  .redesign #windScale.on{display:flex}
  .redesign #windScale header{gap:4px}
  .redesign #windScale header b{font-size:8.5px;letter-spacing:.1em}
  .redesign #windScale .wskey{flex-direction:row;gap:10px;margin:0}
  .redesign #windScale .wskey li{gap:5px;font-size:8.5px}
  .redesign #windScale .wskey li span{margin-left:0;padding-left:0}
  .redesign #windScale .wskey .t1{width:14px}
  .redesign #windScale .wskey .t2{width:20px}
  .redesign #windScale .wskey .t3{width:26px}
  .redesign #windScale small{display:none}
  .redesign.sheetOpen #windScale{display:none!important}
  .redesign #attrib{left:auto;right:8px;bottom:calc(var(--tabs) + var(--scrub) + var(--safe) + 53px);
    max-width:calc(100vw - 214px);text-align:right}
  .redesign .vb-name{font-size:21px}.redesign .vb-sig{grid-template-columns:repeat(3,1fr)}
  .redesign .sg{min-height:80px;padding:9px 8px}.redesign .sg b{font-size:18px}
  /* Was flex-wrap with a hand-tuned flex-basis on #browseB: depending on
     exact content width that produced either 3 items on row one and the
     warning badge orphaned alone on row two, or #browseB alone stretching
     to the full row (flex-grow has no upper bound just because flex-basis
     is set). A 2-column grid removes the guesswork: row one is always the
     two primary actions in equal columns, row two is always the two small
     icon actions, sized to content and left-aligned next to each other. */
  .redesign .vb-act{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:8px}
  .redesign .vb-act .btn{flex:none;width:100%}
  .redesign .vb-act #shareB,.redesign .vb-act .wbadge{width:auto;justify-self:start}
  .redesign .forecast-link{display:inline-flex}
  .redesign .passage-profile{grid-template-columns:repeat(3,1fr)}.redesign .passage-stop:nth-child(n+4){display:none}
}

/* Provider notice stays legible without consuming mobile map space. */
.redesign #attrib.aho{font-size:7px;line-height:1.2;padding:2px 5px;max-width:calc(100vw - 16px);opacity:.82}

@media (prefers-reduced-motion:reduce){.redesign *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* =========================================================
   TWO KEYS, ONE COLUMN
   Wind always has a key; Swell / Sea temp / Pressure / Radar
   add theirs. They were pinned to nearly the same offset, so
   the second covered the first. #mapLegend precedes #windScale
   in the DOM, so a plain sibling rule stacks them — no :has(),
   no JS, correct at every breakpoint.
   ========================================================= */
.redesign #mapLegend.on ~ #windScale.on{bottom:calc(var(--scrub) + 103px)}
@media (min-width:901px) and (max-width:1179px) and (orientation:landscape){
  .redesign #mapLegend.on ~ #windScale.on{bottom:calc(var(--scrub) + 101px)}
}
@media (min-width:601px) and (max-width:1199px) and (orientation:portrait){
  .redesign #mapLegend.on ~ #windScale.on{bottom:calc(var(--tabs) + var(--scrub) + 101px)}
}
@media (max-width:600px){
  .redesign #mapLegend.on ~ #windScale.on{bottom:calc(var(--tabs) + var(--scrub) + var(--safe) + 89px)}
}

/* The small "i" that opens the BLEND-NQ explainer. */
.redesign .srcInfo{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font:inherit;color:var(--tx2)}
.redesign .srcInfo i{display:inline-grid;place-items:center;width:13px;height:13px;flex:none;
  border:1px solid currentColor;border-radius:50%;font:700 8.5px/1 var(--fm);font-style:normal;opacity:.7}
.redesign .srcInfo:hover{color:var(--acc)}
.redesign .srcInfo:hover i{opacity:1}
.redesign .srcInfo.bare{padding:0;border:0;background:none;color:var(--tx3);margin-right:0}
.redesign .blendpop{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.redesign .blendpop p{font-size:11.5px;line-height:1.6;color:var(--tx3);margin-top:7px}
.redesign .blendpop p:first-child{margin-top:0}

/* Spring / neap chip. Sits inside the Tide label so it adds no row and no
   height — the card's alignment and the 3-column metric grid are untouched. */
.redesign .runchip{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:20px;
  font:600 10px/1.5 var(--fs);letter-spacing:.04em;text-transform:none;vertical-align:1px;
  border:1px solid var(--line2);color:var(--tx2);background:var(--s2)}
.redesign .runchip.neap{border-color:var(--line2);color:var(--tx3)}
.redesign .runchip.spring{border-color:var(--acc);color:var(--acc);
  background:color-mix(in srgb,var(--acc) 12%,transparent)}

.redesign .mdlbias{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}




/* Structure is a separate map workspace, independent of forecast overlays.
   It hides the forecast layer bar and its fields — but NOT the legend, which
   is the same pill saying the same kind of thing about a different surface. */
.redesign.structure-view .lyr,.redesign.structure-view #lbar,
.redesign.structure-view #scrub,.redesign.structure-view #windScale,
.redesign.structure-view #hud{display:none!important}
.redesign.structure-view #map{bottom:0}
.redesign.structure-view #tabs{bottom:0}
/* One floating credit fewer. In Structure the licence line rides in the
   legend pill — where the reader is already looking to find out what the
   colours mean — instead of being a second box competing with the bar for the
   same corner. The unabridged text is in the Shading popover. */
.redesign.structure-view #attrib{display:none!important}
.redesign #mapLegend .cred{padding-left:8px;border-left:1px solid var(--chromeLine2);
 color:var(--chromeText3);font-size:9px;letter-spacing:.01em}
/* Structure's popover IS #layers — same box, same anchor, same material — so
   only its identity is declared here. It used to hang off a tray of its own in
   the bottom-left corner, which is why it read as a bolted-on panel rather
   than part of the map; its button now lives in the map's control stack and
   the popover opens beside it like every other one.

   Structure has no scrubber any more (it went with the current-load drape
   — nothing left in Structure is time-varying), so the legend always sits
   close to the bottom edge now: the .structure-time variant that used to
   ride it up above the scrubber is dead code and has been removed rather
   than left matching a class nothing sets any more. Also shrunk — this was
   flagged as too tall and too far off the bottom edge, more chrome than a
   depth key needs. */
.redesign.structure-view #mapLegend{bottom:10px;height:24px;padding:0 8px;font-size:10px;opacity:.88}
.redesign.structure-view #mapLegend:hover{opacity:1}
#sopts{position:fixed;z-index:45;display:none}
#sopts.on{display:block}
#sopts .lbl{margin:0 0 8px}
#sopts .lbl+.lbl,#sopts input+.lbl{margin-top:16px}
#sopts output{float:right;font-variant-numeric:tabular-nums;color:var(--acc);
 letter-spacing:0;text-transform:none}
#sopts input[type=range]{width:100%;accent-color:var(--acc)}
#sopts .seg.wrap button{font-size:12px}
.redesign .legend-ramp.bathy{background:linear-gradient(90deg,#bee8e2,#2896b6,#143766,#11264c)}
.redesign .legend-ramp.bathy.spectrum{background:linear-gradient(90deg,#f6dd82,#70d3a5,#29adbe,#2a66b2,#3f2c70)}
.redesign .legend-ramp.bathy.relief{background:linear-gradient(90deg,#e8eeee,#9db4b5,#5d6d6e)}
/* Must match FLOW_RAMP in seabed.js — the legend is the key to that image,
   and a key drawn from different colours is worse than none. */
.redesign .legend-ramp.press{background:linear-gradient(90deg,#1a96d6,#18ceb2,#96de48,#f8ce34,#f68422,#e22a36)}
.redesign .legend-ramp.load{width:34px;margin-right:6px;vertical-align:middle;display:inline-block;
 background:linear-gradient(90deg,rgba(255,214,120,.55),#ffab3d,#f4552f,#c9134e)}

@media(max-width:600px){
 .redesign #tabs button{font-size:9px;min-width:0}
 /* The popover pins to the edges here, exactly as #layers does. */
 .redesign #sopts{top:66px;left:8px;right:62px;bottom:auto;width:auto;padding:14px}
 .redesign.structure-view #tabs{bottom:0}
 .redesign.structure-view #map{bottom:var(--tabs)}
 /* left+right used to both be pinned here, which stretched this into a
    full-width bar - the one legend in the app that didn't size to its own
    content. Every other key (this one included, off mobile) is a pill that
    hugs its text; matching that instead of carving out a special case. */
 .redesign.structure-view #mapLegend{left:8px;right:auto;bottom:calc(var(--tabs) + 8px);
  height:auto;min-height:24px;padding:4px 8px;flex-wrap:wrap;width:auto;max-width:calc(100vw - 16px)}
}
@media(min-width:601px) and (max-width:1199px) and (orientation:portrait){
 .redesign.structure-view #map{bottom:var(--tabs)}
 .redesign #sopts{right:72px;top:78px;bottom:auto}
 .redesign.structure-view #mapLegend{bottom:calc(var(--tabs) + 8px)}
}

/* Structure: the map is the interface, and its settings open from the map's
   own control stack — the geometry above (right:72px, top:14px) is #layers's,
   shared rather than restated. */
.redesign #sopts svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;flex:none}
.redesign #sopts{width:300px;max-height:calc(100dvh - 120px);overflow:auto;color:var(--chromeText)}
.sopts-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:15px}
#sClose{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--chromeText3);font-size:22px}
.sopts-toggles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:18px}
.sopts-toggles button{display:flex;align-items:center;gap:8px;min-height:42px;border:1px solid var(--chromeLine);border-radius:8px;color:var(--chromeText2);background:transparent;font:600 12px var(--fs);padding:8px}
.sopts-toggles button[aria-pressed=true]{color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,transparent);border-color:color-mix(in srgb,var(--acc) 35%,var(--chromeLine))}
.redesign #mapLegend .cred{max-width:240px;white-space:normal;line-height:1.3;font-size:9px}
.redesign .pin{padding:14px 15px 13px}
.redesign .pin-meta{padding-right:20px;gap:8px}
.redesign .pin-co{font-size:10px;opacity:.75}
.redesign .pin-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:18px 0}
.redesign .pin-stats small{font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.redesign .pin-stats b{font-size:23px;line-height:1.2;font-variant-numeric:tabular-nums}
.redesign .pin-stats em{font-size:10px}
.redesign .pin-secondary{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.redesign .pin-secondary .fc{grid-column:1/-1;background:var(--acc)!important;color:var(--accTx)!important;border-color:var(--acc)!important}
.redesign .pin-secondary .pbtn{min-height:38px;font-size:11px;border-radius:8px}
@media(max-width:600px){
 .redesign #sopts{max-height:52dvh}
 .redesign #mapLegend .cred{display:none}
 /* Not .tip: the hover tip sets its own 260px via the Popup constructor
    (mkMarker's opts.maxWidth) because its content is two short stat lines,
    not the pin popup's full card. This rule used to clamp EVERY popup to
    320px regardless, so the tip rendered nearly twice as wide as its text
    needed — the box looked half-empty and the gap under the title read as
    a spacing bug when it was really just excess width. */
 .redesign .maplibregl-popup:not(.tip){max-width:min(320px,calc(100vw - 24px))!important}
}