:root{--bg:#0d141c;--panel:#121c26;--ink:#e8e2d5;--dim:#8fa0ad;--accent:#5aa08c;
--line:#243542;--warn:#c9a35a;--order:#d08a2e;--due:#c85a45;--err:#e2836f;
--mono:'JetBrains Mono',monospace;--serif:'Fraunces',serif;color-scheme:dark;}
/* DAY MODE — the system's own print-cream palette (Test Sheet ground + ink),
   accents darkened to hold WCAG contrast on cream. Toggled by theme.js. */
:root[data-theme="light"]{--bg:#f3eee1;--panel:#faf6ec;--ink:#152532;--dim:#5a6b78;
--accent:#2f6b5a;--line:#d9cfba;--warn:#7a5c1c;--order:#8a590e;--due:#a34a38;--err:#8f3d2c;color-scheme:light;}
:root[data-theme="light"] .pdate{color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
/* the UA's [hidden]{display:none} is user-agent origin — any author display
   rule beats it. Every JS surface here toggles .hidden, so this reset is
   load-bearing, not cosmetic. */
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.55;
padding:2rem 1.2rem;max-width:860px;margin:0 auto;overflow-wrap:break-word}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--panel);padding:.5rem .8rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
header{border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.2rem}
.brand{font-family:var(--serif);font-size:1.05rem;letter-spacing:.14em;color:var(--accent)}
.brand a{color:var(--accent)}
h1{font-family:var(--serif);font-weight:600;font-size:1.9rem;margin:.4rem 0 .2rem}
h2{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--accent);
margin:1.6rem 0 .5rem;border-bottom:1px solid var(--line);padding-bottom:.25rem}
.meta{color:var(--dim);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
nav.site{margin:.2rem 0 .6rem}
nav.site a,nav.site .cur{display:inline-block;padding:.35rem .1rem;font-size:.82rem;
letter-spacing:.08em;text-transform:uppercase}
nav.site .cur{color:var(--ink);border-bottom:2px solid var(--accent)}
nav.site .ni{white-space:nowrap}
.daybtn{margin-left:auto;background:none;border:1px solid var(--line);color:var(--dim);
font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;padding:.35rem .6rem;
border-radius:4px;cursor:pointer;min-height:36px}
.daybtn:hover{border-color:var(--accent);color:var(--accent)}
nav.site{display:flex;align-items:center;flex-wrap:wrap;gap:.15rem .35rem}
.titlerow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 .2rem}
.titlerow h1{margin:0}
.badge{display:inline-block;border:1px solid var(--accent);color:var(--accent);
padding:.12rem .5rem;border-radius:3px;font-size:.7rem;letter-spacing:.1em;white-space:nowrap}
.badge.st-need{border-color:var(--warn);color:var(--warn)}
.badge.st-order{border-color:var(--order);color:var(--order)}
.badge.st-reserved{border-color:var(--dim);color:var(--dim)}
.badge.st-due,.chip.st-due{border-color:var(--due);color:var(--due)}
.badge.note{border-style:dashed;border-color:var(--dim);color:var(--dim)}
ul{list-style:none;margin:.4rem 0}
li{padding:.34rem 0 .34rem 1.1rem;position:relative;border-bottom:1px dotted var(--line)}
li:before{content:"\00b7";color:var(--accent);position:absolute;left:.2rem}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.9rem 1rem;margin:.6rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
a.card{display:flex;flex-direction:column;gap:.3rem;background:var(--panel);border:1px solid var(--line);
border-radius:6px;padding:.7rem .8rem;color:var(--ink);min-height:44px}
a.card:hover{text-decoration:none;border-color:var(--accent)}
a.card .id{color:var(--accent);font-weight:700}
.chip{display:inline-block;font-size:.62rem;letter-spacing:.09em;border:1px solid var(--accent);
color:var(--accent);border-radius:3px;padding:.08rem .4rem;align-self:flex-start;white-space:nowrap}
.chip.st-need{border-color:var(--warn);color:var(--warn)}
.chip.st-order{border-color:var(--order);color:var(--order)}
.chip.st-reserved{border-color:var(--dim);color:var(--dim)}
a.chip,button.chip,summary.chip{padding:.45rem .6rem;min-height:44px;display:inline-flex;align-items:center;
background:none;cursor:pointer;font-family:var(--mono)}
h3{font-family:var(--serif);font-weight:500;font-size:.98rem;color:var(--dim);margin:1.1rem 0 .3rem}
.kv{color:var(--dim);font-size:.8rem;margin-top:.15rem}
footer{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:.8rem;color:var(--dim);font-size:.75rem;
display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{padding:.3rem .2rem}
.preptabs{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.4rem 0 .6rem}
.ptab,.preset{background:none;border:1px solid var(--line);color:var(--dim);font-family:var(--mono);
font-size:.72rem;letter-spacing:.08em;padding:.5rem .8rem;border-radius:4px;cursor:pointer;min-height:44px}
.ptab.on{border-color:var(--accent);color:var(--accent)}
.preset{margin-left:auto}
.pdate{background:var(--panel);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);
padding:.4rem .5rem;border-radius:4px;min-height:40px;color-scheme:dark}
ul.prep li.prow{padding:0}
ul.prep li.prow:before{content:none}
ul.prep label{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .1rem;cursor:pointer;min-height:44px}
ul.prep input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--accent);flex:none;margin-top:.15rem}
ul.prep input:checked + span{opacity:.55;text-decoration:line-through;text-decoration-color:var(--dim)}
.hidden{display:none}
.inh{opacity:.8}
.cardlink a{font-weight:700}
.keeper{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);
padding:.7rem 0;gap:1rem}
.keeper .fish{color:var(--dim);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.keeper .num{font-family:var(--serif);font-size:clamp(1.15rem,6.5vw,2rem);line-height:1.1;text-align:right;white-space:nowrap}
.keeper .num small{font-size:.85rem;color:var(--warn)}
.law{color:var(--warn);padding:.45rem 0;font-size:.85rem}
/* v2.0 New Water — trip/spot components (B1/B2 + C1/C2/C3/C6/C7 contracts) */
.rankb{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;
border:2px solid var(--accent);border-radius:50%;font-family:var(--serif);font-weight:600;
color:var(--accent);flex:none}
.rankb.lg{width:2.6rem;height:2.6rem;font-size:1.3rem}
.spotmeta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.3rem 0 .6rem}
.actrow{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 .8rem}
.navbtn,.stubbtn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--accent);
color:var(--accent);background:none;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;
padding:.55rem .9rem;border-radius:5px;cursor:pointer;min-height:44px;text-decoration:none}
.navbtn:hover,.stubbtn:hover{background:var(--panel);text-decoration:none}
.navbtn:active{transform:translateY(1px)}
/* gate banners — hard (closure/permit) = daymark 8% tint; soft = slate 12% tint */
.gate{border-radius:6px;padding:.8rem 1rem;margin:.6rem 0;font-size:.9rem}
.gate.hard{border:1px solid var(--due);background:color-mix(in srgb, var(--due) 8%, var(--bg))}
.gate.hard b{color:var(--due)}
.gate.soft{border:1px solid var(--dim);background:color-mix(in srgb, var(--dim) 12%, var(--bg))}
.gate.soft b{color:var(--dim)}
@media (prefers-reduced-motion: no-preference){
.gate{animation:gatein .22s ease-out}
@keyframes gatein{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}}
/* DOM is B2 contract order (mobile reads it verbatim); the desktop intel rail
   is grid-template-areas only — no reordering below 1200px. The area order
   tracks the emitted DOM order (guest-first, v2.3 owner ruling) so reading
   order and visual order agree at every breakpoint. */
.spotgrid{display:block}
@media (min-width:1200px){
.spotgrid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0 2rem;
grid-template-areas:"cautions cautions" "sessions map" "sessions access" "structure access"
"species ratings" "regs ratings" "sources sources" "log qr"}
.b-map{grid-area:map}.b-access{grid-area:access}.b-structure{grid-area:structure}
.b-species{grid-area:species}.b-sessions{grid-area:sessions}.b-ratings{grid-area:ratings}
.b-cautions{grid-area:cautions}.b-regs{grid-area:regs}.b-sources{grid-area:sources}
.b-log{grid-area:log}.b-qr{grid-area:qr;align-self:start}}
.stickypad{display:none}
@media (max-width:767.98px){.stickypad{display:block;height:4.2rem}}
.rating{display:flex;gap:.5rem;align-items:baseline;margin:.25rem 0}
.dots{color:var(--accent);letter-spacing:.15em}
.tier{display:inline-block;font-size:.62rem;letter-spacing:.06em;border-radius:3px;
padding:.1em .35em;border:1px solid var(--dim);color:var(--dim)}
.tier.t1{border-color:var(--ink);color:var(--ink);font-weight:700}
.speciest li,.ringrow{line-height:1.9}
.zonechips{display:flex;gap:.4rem;flex-wrap:wrap}
.qrblock{text-align:center}
.qrblock img{border-radius:4px;max-width:100%}
.appnote{font-size:.85rem}
.stale{color:var(--warn)}
.approx summary{cursor:pointer;display:inline-block}
.stickyact{display:none}
@media (max-width:767.98px){
.stickyact{display:flex;position:fixed;bottom:0;left:0;right:0;gap:.5rem;z-index:40;
padding:.5rem .8rem calc(.5rem + env(safe-area-inset-bottom,0px));background:var(--bg);
border-top:1px solid var(--line)}
.stickyact .navbtn,.stickyact .stubbtn{flex:1;justify-content:center}}
/* chart surfaces (Wave N2) — SPAR pins, neatline, rail, sheet */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chartwrap{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:.6rem 0}
.chartwrap.embed{aspect-ratio:4/3}
.chartwrap.mini{aspect-ratio:5/4}
.chartwrap.full{aspect-ratio:auto;height:min(72vh,760px)}
/* maplibre-gl.css loads after this sheet and forces position:relative on the
   container — size by 100% dimensions, which hold under either positioning */
.chart{position:absolute;inset:0;width:100%;height:100%}
/* overlay family: light Slate, dark Fog-lift (A5 row: neatline+ticks) —
   explicit tokens, not --dim: the rose uses the same pair */
.chart{--chartline:#9DB0BD}
:root[data-theme="light"] .chart{--chartline:#46525E}
.chart-attr{position:absolute;right:.4rem;bottom:.3rem;z-index:5;font-family:var(--mono);
font-size:.625rem;color:var(--dim);background:color-mix(in srgb, var(--bg) 80%, transparent);
padding:.1rem .35rem;border-radius:3px}
.chart-neatline{position:absolute;inset:6px;border:1.4px solid var(--chartline);
outline:0.6px solid var(--chartline);outline-offset:2px;pointer-events:none;z-index:4}
.chart-ticks{position:absolute;inset:0;pointer-events:none;z-index:4;color:var(--chartline)}
.chart-ticks .tx{position:absolute;width:1px;height:5px;background:currentColor}
.chart-ticks .ty{position:absolute;width:5px;height:1px;background:currentColor}
.chart-corners{position:absolute;inset:10px;pointer-events:none;z-index:4;font-size:.625rem;color:var(--chartline)}
.chart-corners span:first-child{position:absolute;top:0;left:0}
.chart-corners span:last-child{position:absolute;bottom:0;right:0}
.chart-cart{position:absolute;top:12px;left:14px;z-index:4;pointer-events:none;
display:flex;flex-direction:column;gap:.1rem;background:color-mix(in srgb, var(--bg) 72%, transparent);
padding:.3rem .55rem;border:1px solid var(--chartline);border-radius:3px}
.chart-cart .cart-title{font-family:var(--serif);font-size:.8rem;letter-spacing:.06em;color:var(--ink)}
.chart-cart .cart-sub{font-size:.625rem;color:var(--dim)}
.chart-rose{position:absolute;top:14px;right:14px;z-index:4;pointer-events:none;opacity:.85}
.chart-bar{position:absolute;left:14px;bottom:20px;z-index:4;pointer-events:none;font-size:.625rem;color:var(--dim)}
.chart-bar .seg{display:inline-block;height:4px;border:1px solid var(--dim);vertical-align:middle;
background:repeating-linear-gradient(90deg,var(--dim) 0 25%,transparent 0 50%)}
.chart-status{position:absolute;inset:auto 0 40% 0;text-align:center;z-index:6;font-size:.7rem;
color:var(--dim);letter-spacing:.08em}
.chart-status .tick{display:inline-block}
@media (prefers-reduced-motion: no-preference){
.chart-status .tick{animation:tickspin 1.1s steps(8) infinite}
@keyframes tickspin{to{transform:rotate(360deg)}}}
.chart-nomatch{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6;
background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:.5rem .9rem;
font-size:.7rem;letter-spacing:.08em;color:var(--dim)}
/* SPAR pins — MapLibre owns the button's inline transform; every animation
   and offset below lives on the inner SVG parts, never the button */
.spar-pin{background:none;border:none;padding:0;cursor:pointer;position:relative;
transition:opacity .16s}
.spar-pin img,.spar-pin svg{display:block;overflow:visible}
.spar-pin .selring{opacity:0;stroke-dashoffset:0}
.spar-pin:hover .selring{opacity:.7}
/* A6: focus ring = selected ring style */
.spar-pin:focus-visible{outline:none}
.spar-pin:focus-visible .selring{opacity:1}
.pin-selected .selring{opacity:1}
@media (prefers-reduced-motion: no-preference){
.pin-selected .selring{animation:seldraw .26s ease-in-out forwards}
@keyframes seldraw{from{stroke-dashoffset:85}to{stroke-dashoffset:0}}
.pin-intro .stem{animation:stemdraw .24s ease-out backwards;animation-delay:var(--pd,0ms)}
.pin-intro .badge{animation:badgein .14s ease-out backwards;
animation-delay:calc(var(--pd,0ms) + 80ms);transform-origin:22px 16px;transform-box:view-box}
.pin-intro .pennant{animation:unfurl .18s ease-out backwards;
animation-delay:calc(var(--pd,0ms) + 160ms);transform-origin:22px 8px;transform-box:view-box}
@keyframes stemdraw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes badgein{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes unfurl{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
/* plate — engine: cream card, slate hairline, uppercase Mono (both themes) */
.pin-plate{position:absolute;left:50%;top:-1.6rem;transform:translateX(-50%);white-space:nowrap;
background:#F3EEE1;border:1px solid #46525E;border-radius:3px;padding:.1rem .45rem;
font-family:var(--mono);font-size:.66rem;color:#152532;text-transform:uppercase}
/* B3 sheet: bottom sheet ≤767 · dock right 768-1199 · float top-right ≥1200 */
.spot-sheet{position:absolute;left:0;right:0;bottom:0;z-index:7;background:var(--bg);
border-top:1px solid var(--line);padding:.5rem 1rem calc(.8rem + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion: no-preference){
.spot-sheet{animation:sheetup .2s ease-out}
@keyframes sheetup{from{transform:translateY(24px);opacity:0}}}
.spot-sheet .drag-handle{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto .45rem}
.spot-sheet .sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.spot-sheet .sheet-x{background:none;border:none;color:var(--dim);cursor:pointer;
font-size:.8rem;min-width:44px;min-height:32px}
.spot-sheet .sheet-role{font-family:var(--serif);margin:.25rem 0}
.spot-sheet .sheet-links{display:flex;gap:1rem;align-items:baseline;margin-top:.3rem}
@media (min-width:768px) and (max-width:1199px){
.spot-sheet{left:auto;top:0;bottom:0;width:300px;border-top:none;border-left:1px solid var(--line);
padding:.8rem 1rem}
.spot-sheet .drag-handle{display:none}}
@media (min-width:1200px){
.spot-sheet{left:auto;right:14px;top:14px;bottom:auto;width:300px;border:1px solid var(--line);
border-radius:4px;padding:.8rem 1rem}
.spot-sheet .drag-handle{display:none}}
.gatechip{font-size:.6rem;border:1px solid var(--due);color:var(--due);border-radius:3px;padding:.05em .35em}
.gatechip.gated{border-color:var(--dim);color:var(--dim)}
/* B3 rail — fieldsets per group; ≤767 chips scroll across the top */
.maplayout{display:flex;flex-direction:column;gap:.6rem}
.maprail{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap}
.maprail fieldset{border:none;padding:0;margin:0;display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}
.maprail legend{float:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
color:var(--dim);margin-right:.3rem}
.maprail .chip{cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;min-height:44px;padding:.3rem .6rem}
.maprail input{accent-color:var(--accent)}
.maprail .railfoot{width:100%;border-top:1px dotted var(--line);padding-top:.4rem}
@media (max-width:767.98px){
.maprail{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.2rem}
.maprail fieldset{flex-wrap:nowrap}
.maprail .chip{white-space:nowrap}
.maprail .railfoot{width:auto;border-top:none;padding-top:0}
.chartwrap.mini{aspect-ratio:16/9}
/* the fixed bars overlap focused controls when tabbing */
html{scroll-padding-bottom:5.5rem;scroll-padding-top:4.5rem}}
/* ≥1200 (B3 §6): full-bleed chart behind a 264px rail pinned left */
@media (min-width:1200px){
.maplayout{position:relative;display:block;margin:0 calc(50% - 50vw)}
.chartwrap.full{height:calc(100vh - 210px);margin:0;border-radius:0;border-left:none;border-right:none}
.maprail{position:absolute;left:0;top:0;bottom:0;z-index:8;width:264px;overflow-y:auto;
flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:.7rem;
background:color-mix(in srgb, var(--bg) 88%, transparent);border-right:1px solid var(--line);
padding:.8rem}
.maprail fieldset{flex-direction:column;align-items:flex-start}
.maprail legend{float:none}
.maprail .railfoot{margin-top:auto}}
/* B4 Today — picker, instruments, window bar (skeletons: chart-paper
   stripes, NO shimmer — WS4) */
.todaypick{position:sticky;top:0;z-index:20;display:block;margin:.6rem 0;padding:.6rem .8rem}
.todaypick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
/* the real select is invisible, so the focus ring has to live on the shell */
.todaypick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.pickface .rankb{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
border-radius:50%;background:var(--ink);color:var(--bg);font-family:var(--mono);font-weight:700;font-size:.8rem}
.pickcaret{position:absolute;right:.8rem;top:.7rem;color:var(--dim)}
.todayspot .win b{font-family:var(--serif)}
.winline{margin:.25rem 0}
.winbar{position:relative;height:26px;margin-top:.4rem;border-top:1px solid var(--line);
font-family:var(--mono);font-size:.625rem;color:var(--dim)}
.winbar .wb-lab{position:absolute;top:6px}
.winbar [data-wb-start]{left:0}
.winbar [data-wb-end]{right:0}
.winbar .wb-mid{position:absolute;top:6px;left:50%;transform:translateX(-50%);color:var(--ink)}
.winbar .wb-seg{position:absolute;top:-2px;height:3px;background:var(--accent)}
.winbar .wb-now{position:absolute;top:-6px;width:2px;height:11px;background:var(--due)}
@media (prefers-reduced-motion: no-preference){.winbar .wb-now{transition:left .4s linear}}
.skel{margin-top:.35rem}
.skel span{display:block;height:.85rem;margin:.3rem 0;max-width:70%;
background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.skel span:last-child{max-width:45%}
.tidenum{font-family:var(--mono);font-size:1.5rem;font-weight:700}
.livedot{color:var(--accent)}
.caution{margin:.5rem 0}
.gatealt{border-left:2px solid var(--accent)}
.sessionpick select{min-height:44px;background:var(--panel);border:1px solid var(--line);
color:var(--ink);font-family:var(--mono);border-radius:4px;padding:.3rem .5rem}
/* B4 motion: tide arrow crossfade 160ms · gate swap 240ms · reduced-motion off */
@media (prefers-reduced-motion: no-preference){
.tidenum,.tide [data-tide-body]{transition:opacity .16s ease}
.tide.swapping [data-tide-body]{opacity:0}
.gatealt{animation:gatein .24s ease-in-out}
@keyframes gatein{from{opacity:0;transform:translateY(-6px)}}
:root{transition:background-color .3s ease,color .3s ease}}
.todayact{display:none}
@media (min-width:768px){.todayspot:not([hidden]){display:grid;grid-template-columns:1fr 1fr;
gap:0 1rem;align-items:start}
.todayspot .gate,.todayspot [data-gate-alt]{grid-column:1/-1}
.todayinstr{grid-column:1}
.todaysession{grid-column:2}
/* the sticky bar is phone-only; desktop keeps the same two actions inline */
.todayact{display:flex;gap:.5rem;margin:.8rem 0}}
.nwerr{background:var(--panel);padding:.1rem .3rem;border-radius:3px}
/* B5 New Water — underline fields (a form you fill in with a pen) */
.nwlayout{display:flex;flex-direction:column;gap:1rem}
@media (min-width:1200px){.nwlayout{flex-direction:row;align-items:flex-start}
.nwform{flex:1}.nwpreview{width:340px;flex:none;position:sticky;top:1rem}}
.nwform{display:flex;flex-direction:column;gap:.9rem}
.nwrow{display:flex;gap:1rem;flex-wrap:wrap}
.nwfield{display:flex;flex-direction:column;gap:.15rem;min-width:8rem;flex:1}
.nwfield input,.nwfield textarea{min-height:44px;background:none;border:none;border-bottom:1.5px solid var(--dim);
color:var(--ink);font-family:var(--serif);font-size:1.05rem;padding:.25rem 0;border-radius:0}
.nwfield input[type=date],.nwfield input[type=number],.nwfield input[name=base]{font-family:var(--mono);font-size:.95rem}
.nwfield input:focus-visible,.nwfield textarea:focus-visible{outline:2px solid var(--accent);
outline-offset:3px;border-bottom:2.5px solid var(--accent)}
@media (prefers-reduced-motion: no-preference){
.nwfield input,.nwfield textarea{transition:border-bottom-width .12s ease,border-color .12s ease}
.nwpreview pre{transition:opacity .14s ease}}
.nwfield textarea{field-sizing:content}
.nwerr{color:var(--err)}
.nwchips{border:none;padding:0;margin:0;display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.nwchips label.chip{min-height:44px;display:inline-flex;align-items:center;cursor:pointer}
.nwflag{min-height:44px;display:inline-flex;align-items:center}
.nwaddrow{display:flex;gap:.4rem;align-items:center}
.nwchips legend{float:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--dim);
margin-right:.4rem}
.nwadd{min-height:44px;background:none;border:none;border-bottom:1px dashed var(--dim);color:var(--ink);
font-family:var(--mono);font-size:.75rem;padding:.25rem 0;min-width:11rem}
.nwflag{cursor:pointer}
.nwmeter .meter{font-family:var(--mono);letter-spacing:.2em;margin-right:.5rem}
.nwgen{align-self:flex-start}
.nwpreview pre{border:1px solid var(--line);border-radius:4px;padding:.7rem .9rem;
font-size:.78rem;overflow-x:auto}
.nwsuccess .serif{font-family:var(--serif);font-size:1.1rem}
.nwsteps{margin:.4rem 0 .6rem 1.2rem}
.nwsteps li{margin:.3rem 0}
@media (prefers-reduced-motion: no-preference){
.nwsuccess:not([hidden]){animation:nwin .24s ease-out}
.nwsuccess:not([hidden]) .nwsteps li{animation:nwin .3s ease-out backwards}
.nwsuccess:not([hidden]) .nwsteps li:nth-child(2){animation-delay:60ms}
.nwsuccess:not([hidden]) .nwsteps li:nth-child(3){animation-delay:120ms}
.nwsuccess:not([hidden]) .nwsteps li:nth-child(4){animation-delay:180ms}
@keyframes nwin{from{opacity:0;transform:translateY(8px)}}}
.tripcard{display:flex;flex-direction:column;gap:.45rem;margin:.8rem 0 1.1rem}
.tripcard .tc-head{display:flex;gap:.6rem;align-items:baseline;justify-content:space-between}
.tripcard .tc-head b{font-family:var(--serif);font-size:1.1rem;font-weight:600}
.tripcard .tc-links{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.triprow{margin-top:-.3rem}
nav.site a.sect{border-bottom:1px dotted var(--accent)}
nav.site a,nav.site .cur{display:inline-flex;align-items:center;min-height:44px}
.qmcrumb a,.qmcrumb .cur{display:inline-flex;align-items:center;min-height:44px}
.daybtn{min-height:44px}
.slugkey{list-style:none;margin:.3rem 0 0;display:flex;flex-direction:column;gap:.15rem}
.slugkey li{padding-left:7.5ch;text-indent:-7.5ch;font-size:.82rem}
.stickyact .stubbtn,.todayact .stubbtn{white-space:nowrap}
.log{border-left:2px solid var(--accent);padding-left:.8rem;margin:.9rem 0}
.log h3{font-family:var(--mono);font-size:.95rem;font-weight:700;margin-bottom:.1rem}
h2.month{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:var(--dim);border-bottom:1px dotted var(--line)}
@media (max-width:480px){body{padding:1.4rem .9rem}h1{font-size:1.55rem}}
@media print{
body{background:#fff;color:#152532;max-width:none}
a{color:#2f6b5a}
.panel,a.card{background:#fff;border-color:#bbb}
nav.site,.skip,footer .totop{display:none}
.badge,.chip{color:#152532;border-color:#152532}
h2,.brand{color:#2f6b5a}
.meta,.kv{color:#555}
.law{color:#6b5310}
.keeper .fish{color:#555}
.preptabs{display:none}
ul.prep.hidden{display:block}
}