/* Tonka Explorer v2 — css/sheet.css (owner: sheet-ui, 2.0.19)
   The bottom sheet as a place card: header chip, hero, big pill actions, glance chips, quiet detail rows, "More".
   Tokens come from css/app.css; every colour here is a token (--ink/--mute/--line/--surf/--card/--navy/--ok/--warn/--bad
   and their -bg pairs) so css/dark.css re-points the lot and needs no dark rules of its own. The older #sheet rules in
   app.css still carry the shell (grip, ×, .body, .btn, .acts, .src) because js/edits.js renders its editor with them.
   Icon rules are scoped to `svg.shi` on purpose: a lake-marker glyph (`svg.mkg`, red / green / orange fills from
   chart.js) must keep its own fill and stroke — a CSS `stroke:currentColor` would beat its presentation attributes.
   MUST BE LINKED from index.html and listed in sw.js PRECACHE — js/sheet.js adds the <link> itself if it is missing. */

#sheet svg.shi{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- header ---------- */
#sheet .sh-hd{display:flex;align-items:flex-start;gap:12px;padding:2px 44px 0 0}
/* the hairline ring keeps a dark type colour (dock #164C70, hazard #2B2F33) off the dark card without a dark-mode rule */
#sheet .sh-ic{flex:none;width:44px;height:44px;border-radius:13px;background:var(--k,#5A6A74);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.18)}
#sheet .sh-ic > svg.shi{width:26px;height:26px;stroke-width:1.7}
#sheet .sh-ic.glyph{background:var(--surf);border:1px solid var(--line)}
#sheet .sh-ic.glyph > svg.mkg{width:30px;height:30px;display:block}
#sheet .sh-ht{flex:1;min-width:0}
#sheet .sh-hd h3{margin:1px 0 0;font-size:22px;line-height:1.12;overflow-wrap:anywhere}
#sheet .sh-hd .bay{display:block;margin-top:3px;font:500 13px/1.35 var(--font);color:var(--mute);overflow-wrap:anywhere}

/* ---------- hero: the bridge clearance, as one number ---------- */
#sheet .sh-hero{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--surf);border:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start}
#sheet .sh-hero .hk{font:700 11px/1.2 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
#sheet .sh-hero .hv{font:700 40px/1.05 var(--font);color:var(--ink);margin-top:4px;letter-spacing:-.02em}
#sheet .sh-hero .hv.small{font-size:26px;line-height:1.15}
#sheet .sh-hero .hv.low{color:var(--bad)}
#sheet .sh-hero .hs{margin-top:3px;font:500 12px/1.4 var(--font);color:var(--mute)}
#sheet .sh-hero .fit{display:flex;align-items:center;gap:7px;margin-top:10px;padding:7px 11px 7px 9px;border-radius:10px;font:700 13px/1.3 var(--font)}
#sheet .sh-hero .fit > svg.shi{width:18px;height:18px;stroke-width:2}
#sheet .sh-hero .fit.ok{background:var(--ok-bg);color:var(--ok)}
#sheet .sh-hero .fit.warn{background:var(--warn-bg);color:var(--warn)}
#sheet .sh-hero .fit.bad{background:var(--bad-bg);color:var(--bad)}

/* ---------- hero: what a buoy or zone means, in plain language ---------- */
#sheet .sh-say{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--surf);border:1px solid var(--line)}
#sheet .sh-say b{display:block;font:700 18px/1.25 var(--font);color:var(--ink)}
#sheet .sh-say span{display:block;margin-top:5px;font:400 14px/1.45 var(--font);color:var(--mute)}

/* ---------- primary actions: 2–4 big pills, icon over label ---------- */
#sheet .sh-acts{display:grid;gap:8px;margin-top:14px}
#sheet .sh-acts.n1{grid-template-columns:1fr}
#sheet .sh-acts.n1 .sha{flex-direction:row;gap:9px;min-height:52px;font-size:15px}
#sheet .sh-acts.n2{grid-template-columns:1fr 1fr}
#sheet .sh-acts.n3{grid-template-columns:repeat(3,1fr)}
#sheet .sh-acts.n4{grid-template-columns:repeat(4,1fr)}
#sheet .sha{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;padding:8px 4px;border-radius:14px;background:var(--surf);border:1px solid var(--line);color:var(--ink);font:600 11.5px/1.15 var(--font);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sheet .sha > svg.shi{width:22px;height:22px}
#sheet .sha span{display:block;min-width:0;overflow-wrap:anywhere}
/* --card, not #fff: light = white on deep navy, dark = near-black on the light-blue --navy. Both ≥ 5:1; a literal white
   would be 3.2:1 on the dark theme's --navy, which is under AA for 11.5 px bold. */
#sheet .sha.pri{background:var(--navy);border-color:var(--navy);color:var(--card)}
#sheet .sha.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
@media (hover:hover){#sheet .sha:hover{border-color:var(--navy)}}
@media (prefers-reduced-motion:no-preference){#sheet .sha{transition:transform .1s ease,border-color .12s linear}#sheet .sha:active{transform:scale(.97)}}

/* ---------- at a glance ---------- */
#sheet .sh-gl{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#sheet .gl{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:4px 10px;border-radius:14px;background:var(--surf);border:1px solid var(--line);color:var(--ink);font:600 12px/1.25 var(--font)}
#sheet .gl > svg.shi{width:15px;height:15px;stroke-width:1.9}
#sheet .gl.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
#sheet .gl.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
#sheet .gl.no{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
#sheet .gl.mute{color:var(--mute)}
#sheet .gl.featured{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
#sheet .gl.baymk > svg.mkg{width:16px;height:16px;display:block}

/* ---------- quiet detail rows ---------- */
#sheet .sh-rows{margin-top:14px}
#sheet .sh-row{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
#sheet .sh-row:first-child{border-top:0;padding-top:2px}
#sheet .sh-row > svg.shi{width:20px;height:20px;align-self:center;color:var(--mute);stroke-width:1.7}
#sheet .sh-row .rx{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1px 12px;min-width:0}
#sheet .sh-row .rk{font:500 13.5px/1.35 var(--font);color:var(--mute);flex:none}
#sheet .sh-row .rv{flex:1 1 auto;min-width:0;text-align:right;font:400 15px/1.35 var(--font);color:var(--ink);overflow-wrap:anywhere}
#sheet .sh-row .rv.wide{flex-basis:100%;text-align:left;margin-top:2px}
#sheet .sh-row .rv b{font-weight:700;font-size:16px}
#sheet .sh-row .rv small{display:block;font:500 12px/1.35 var(--font);color:var(--mute);margin-top:1px}
/* the two inline targets in a row (tap-to-copy position, tel: link) get a 44 px hit pad without changing the layout */
#sheet .sh-row .rv b[data-act="copy"],#sheet .sh-row .rv a{position:relative;display:inline-block;cursor:pointer}
#sheet .sh-row .rv b[data-act="copy"]::before,#sheet .sh-row .rv a::before{content:'';position:absolute;top:50%;right:-6px;left:-6px;height:44px;transform:translateY(-50%)}
#sheet .sh-row .rv b[data-act="copy"]{font-size:15px;font-variant-numeric:tabular-nums}
#sheet .sh-row .rv a{color:var(--navy-2)}
#sheet .sh-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

/* ---------- prose ---------- */
#sheet p.notes{margin-top:12px;font:400 15px/1.5 var(--font);color:var(--ink)}
#sheet p.notes + p.notes{margin-top:8px}
#sheet p.notes b{font-weight:700}

/* ---------- More: overflow links and anything that changes the map ---------- */
#sheet .sh-more{margin-top:14px;border-top:1px solid var(--line)}
#sheet .sh-more > summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;font:700 14px var(--font);color:var(--navy-2);cursor:pointer}
#sheet .sh-more > summary::-webkit-details-marker{display:none}
#sheet .sh-more > summary::after{content:'';width:9px;height:9px;flex:none;border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
#sheet .sh-more[open] > summary::after{transform:translateY(2px) rotate(225deg)}
@media (prefers-reduced-motion:no-preference){#sheet .sh-more > summary::after{transition:transform .15s ease}}
#sheet .sh-more > summary:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
#sheet .sh-mrows{display:flex;flex-direction:column;gap:8px;padding-bottom:4px}
#sheet .shm{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border-radius:12px;background:var(--surf);border:1px solid var(--line);color:var(--ink);font:600 15px var(--font);text-align:left;text-decoration:none;cursor:pointer}
#sheet .shm > svg.shi{width:20px;height:20px}
/* Remove: the danger is carried by the tinted panel, the border and the bin icon (graphics, 3:1) while the label stays
   --ink. Dark's --bad on --bad-bg is 4.08:1, under AA for a 15 px label — this keeps the row readable without a literal colour. */
#sheet .shm.bad{background:var(--bad-bg);border-color:var(--bad)}
#sheet .shm.bad > svg.shi{color:var(--bad)}

/* ---------- footnote ---------- */
#sheet .sh-foot{margin-top:14px;font:400 12px/1.5 var(--font);color:var(--mute)}

/* ---------- bay sheet rows (2.0.9 markup, restyled) ---------- */
#sheet .bayh{font:700 11px var(--font);color:var(--mute);letter-spacing:.07em;text-transform:uppercase;margin:16px 0 0}
#sheet .baylist{margin-top:8px;display:flex;flex-direction:column}
#sheet .bayrow{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 2px;border-top:1px solid var(--line);background:none;font:600 15px/1.25 var(--font);color:var(--ink);text-align:left}
#sheet .bayrow i{width:32px;height:32px;border-radius:10px;background:var(--k,#5A6A74);color:#fff;font-style:normal;display:flex;align-items:center;justify-content:center;flex:none}
#sheet .bayrow i.zi{background:var(--surf);border:1px solid var(--line);color:var(--mute)}
#sheet .bayrow i > svg.shi{width:19px;height:19px}
#sheet .bayrow > span{flex:1;min-width:0}
#sheet .bayrow small{display:block;font:500 12px/1.3 var(--font);color:var(--mute);margin-top:2px}
#sheet .bayrow::after{content:'';width:8px;height:8px;flex:none;border-right:2px solid var(--mute);border-top:2px solid var(--mute);transform:rotate(45deg);margin-right:4px}
#sheet .baymore{font-size:13px;color:var(--mute);padding:10px 2px 0}

/* ---------- a wider window: the card stays a card, never a stretched banner ---------- */
@media (min-width:560px){#sheet .body > *{max-width:560px;margin-left:auto;margin-right:auto}}
@media (max-width:340px){#sheet .sh-acts.n4{grid-template-columns:1fr 1fr}#sheet .sha{min-height:56px}}