/* Vine Loop — Geolink IT Engineering
   Tokens: dark is the default (map-heavy page); light follows prefers-color-scheme.
   Amber is reserved for SIMULATED / candidate content and nothing else. */
:root{
  --bg:#13150f; --panel:#1c1f17; --panel2:#242821; --line:#30342a; --line2:#3d4236;
  --fg:#f3efe3; --muted:#a7a99a; --faint:#6f7266;
  --grape:#c9557c; --grape-ink:#2a0d18; --leaf:#8fcf4a; --soil:#9c6b3c;
  --sim:#f0a933; --sim-ink:#2b1a02; --ok:#5fc78f; --bad:#e3625a;
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:14px; --gut:16px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#e9e5d8; --panel:#f6f3ea; --panel2:#fbf9f3; --line:#d3cdbb; --line2:#bdb7a4;
    --fg:#171a12; --muted:#5c5f52; --faint:#8a8d7f;
    --grape:#9e2f57; --grape-ink:#fff4f8; --leaf:#4f8f1f; --sim:#b8740a; --sim-ink:#fff7e6;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#e9e5d8; --panel:#f6f3ea; --panel2:#fbf9f3; --line:#d3cdbb; --line2:#bdb7a4;
  --fg:#171a12; --muted:#5c5f52; --faint:#8a8d7f;
  --grape:#9e2f57; --grape-ink:#fff4f8; --leaf:#4f8f1f; --sim:#b8740a; --sim-ink:#fff7e6;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#13150f; --panel:#1c1f17; --panel2:#242821; --line:#30342a; --line2:#3d4236;
  --fg:#f3efe3; --muted:#a7a99a; --faint:#6f7266;
  --grape:#c9557c; --grape-ink:#2a0d18; --leaf:#8fcf4a; --sim:#f0a933; --sim-ink:#2b1a02;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;overflow-x:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--ui);line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;padding-bottom:84px}
a{color:var(--fg);text-decoration-color:var(--line2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--grape)}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.01em;text-wrap:balance;margin:0}
h2{font-size:clamp(28px,4.2vw,44px);line-height:1.05;font-variation-settings:"SOFT" 60,"opsz" 48}
h3{font-size:20px;line-height:1.2}
p{margin:0}
.col{max-width:1160px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:68ch}
.lede{color:var(--muted);font-size:17px;max-width:62ch}
.step{color:var(--grape);font-family:var(--display);font-size:15px;font-style:italic;margin-bottom:8px}
.step b{font-style:normal;font-weight:600;color:var(--fg)}
section{padding:56px 0 24px;scroll-margin-top:56px}
section + section{border-top:1px solid var(--line)}
.caption{color:var(--muted);font-size:14px;max-width:64ch}
.figure{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);line-height:1;font-weight:500;font-variation-settings:"opsz" 40}
.figure small{font-family:var(--ui);font-size:13px;color:var(--muted);display:block;margin-top:6px;font-weight:400}
.figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin:22px 0}
@media (min-width:760px){.figures{grid-template-columns:repeat(4,minmax(0,1fr))}}
.figures > div{border-top:1px solid var(--line);padding-top:10px}
.note{font-size:13px;color:var(--muted)}
.pending{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;border:1px dashed var(--line2);border-radius:10px;padding:10px 14px}
.pending::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--faint);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}

/* buttons, inputs */
button,.btn{font:inherit;font-size:14px;color:var(--fg);background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:8px 16px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none}
button:hover,.btn:hover{border-color:var(--muted)}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--grape);outline-offset:2px}
button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
button.primary,.btn.primary{background:var(--grape);color:#fff;border-color:var(--grape)}
button.primary:hover{filter:brightness(1.08)}
button.icon{width:44px;height:44px;padding:0;border-radius:50%}
button:disabled{opacity:.5;cursor:default}
input[type=range]{accent-color:var(--grape);height:44px;width:100%;margin:0}
input[type=number],input[type=text],textarea,select{font:inherit;color:var(--fg);background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;min-height:44px;width:100%}
textarea{min-height:64px;resize:vertical}
label{font-size:13px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.seg{display:inline-flex;gap:6px;flex-wrap:wrap}
.seg button{min-height:40px;padding:6px 14px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.02em;padding:3px 10px;border-radius:999px;border:1px solid currentColor;line-height:1.5;white-space:nowrap}
.badge.real{color:var(--leaf)}
.badge.derived{color:var(--muted)}
.badge.model{color:var(--grape)}
.badge.sim{color:var(--sim-ink);border-color:var(--sim);background:repeating-linear-gradient(135deg,var(--sim) 0 6px,#ffd27a 6px 12px)}
.sim-outline{outline:2px solid var(--sim);outline-offset:3px;border-radius:var(--radius)}
.sim-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--sim);color:var(--sim-ink);font-weight:500;font-size:14px;padding:10px var(--gut);margin:18px 0;border-top:6px solid;border-bottom:6px solid;border-image:repeating-linear-gradient(135deg,var(--sim-ink) 0 10px,var(--sim) 10px 20px) 6}
.sim-banner .badge.sim{background:var(--sim-ink);color:var(--sim);border-color:var(--sim-ink)}
:root[data-theme="light"] .sim-banner,:root:not([data-theme="dark"]) .sim-banner{--sim-ink:#2b1a02;--sim:#f0a933}

/* header */
header.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .col{display:flex;align-items:center;gap:12px;min-height:56px}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:19px;font-weight:600;text-decoration:none;white-space:nowrap}
.logo i{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 200deg,var(--leaf),var(--soil),var(--grape),var(--leaf));display:inline-block}
.logo small{font-family:var(--ui);font-weight:400;font-size:12px;color:var(--muted)}
.prov{margin-left:auto;font-size:12px;color:var(--muted);border:1px solid var(--line2);background:var(--panel);border-radius:999px;padding:6px 12px;min-height:36px;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.prov .long{display:none}
.prov .short b,.prov .short em{font-size:10px;margin-right:2px}
@media (min-width:700px){.prov .short{display:none}.prov .long{display:inline}}
.prov b{color:var(--leaf);font-weight:600}
.prov em{color:var(--sim);font-style:normal;font-weight:600}
.theme{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%}

/* source panel (dialog) */
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line2);border-radius:var(--radius);padding:20px;max-width:min(560px,calc(100vw - 32px));width:100%}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h3{margin-bottom:10px}
dialog table{width:100%;border-collapse:collapse;font-size:13px}
dialog td{padding:6px 4px;border-top:1px solid var(--line);vertical-align:top}
dialog td:first-child{color:var(--muted);width:34%}

/* loop ring nav */
nav.loop{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-bottom))}
nav.loop ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
nav.loop a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--muted);font-size:10.5px;min-height:56px;justify-content:center;border-radius:10px}
nav.loop a i{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;font-family:var(--display);font-style:normal;font-size:13px;transition:background .2s,color .2s,border-color .2s}
nav.loop a.active{color:var(--fg)}
nav.loop a.active i{background:var(--grape);border-color:var(--grape);color:#fff}
nav.loop a.done i{border-color:var(--grape);color:var(--grape)}
@media (min-width:1100px){
  body{padding-bottom:0}
  nav.loop{left:12px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);border:1px solid var(--line);border-radius:16px;padding:8px}
  nav.loop ol{grid-template-columns:1fr;gap:6px}
  nav.loop a{flex-direction:row;justify-content:flex-start;gap:10px;padding:4px 10px 4px 4px;min-height:44px;font-size:12px}
  .mapwrap .float.rail-aware{left:160px!important}
}

/* maps */
.mapwrap{position:relative;height:min(78vh,760px);min-height:460px;background:var(--panel)}
.mapwrap .map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font-size:10px}
.maplibregl-cooperative-gesture-screen{font-family:var(--ui)}
.float{position:absolute;z-index:3;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--radius)}
.explore{position:absolute;z-index:4;right:12px;top:12px}
.explore button{background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(8px)}
.mapwrap.free .explore button{background:var(--fg);color:var(--bg)}

/* hero */
.hero{height:calc(100svh - 56px);min-height:600px;max-height:980px}
.hero .title{left:12px;top:12px;max-width:min(430px,calc(100% - 24px));padding:16px 18px}
.hero .title .explore{position:static;margin-top:12px}
.hero .title .explore button{min-height:40px;padding:6px 14px;font-size:13px}
@media (max-width:1099px){.hero .bar{bottom:calc(12px + 78px)}.sheet{bottom:76px}}
@media (min-width:1100px){.hero .title{left:160px}}
.hero h1{font-size:clamp(30px,5vw,54px);line-height:.98;font-variation-settings:"SOFT" 80,"opsz" 72;margin-bottom:10px}
.hero .title p{color:var(--muted);font-size:14px;max-width:38ch}
.hero .bar{left:50%;transform:translateX(-50%);bottom:12px;width:min(900px,calc(100% - 24px));padding:10px 14px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center}
.hero .bar .chip{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:13px;color:var(--muted)}
.hero .bar .chip b{font-family:var(--display);font-size:24px;color:var(--fg);font-weight:500;min-width:7.5ch;line-height:1}
.hero .bar .chip .w{color:var(--fg)}
.hero .bar .chip .w.pend{color:var(--faint)}
.legend{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);grid-column:1/-1}
.ramp{flex:1;max-width:160px;height:6px;border-radius:3px;background:linear-gradient(90deg,#7d4f24,#c7a35e,#a9c94a,#4a9a30,#1d5a2c)}

/* bottom sheet (S1) */
.sheet{position:absolute;z-index:5;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line2);border-radius:18px 18px 0 0;padding:10px 16px 16px;transform:translateY(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);max-height:72%;overflow:auto}
.sheet.open{transform:none}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 10px}
.sheet .head{display:flex;align-items:flex-start;gap:10px}
.sheet .head h3{font-size:22px}
.sheet .head small{display:block;color:var(--muted);font-size:13px}
.sheet .close{margin-left:auto}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.kv b{display:block;font-family:var(--display);font-weight:500;font-size:22px;line-height:1.1}
.kv span{font-size:12px;color:var(--muted)}
.spark{width:100%;height:72px;display:block}
.spark .l{fill:none;stroke:var(--leaf);stroke-width:1.6}
.spark .a{fill:var(--leaf);opacity:.14}
.spark .g{stroke:var(--line2);stroke-width:1}
.spark text{fill:var(--muted);font-size:10px;font-family:var(--ui)}
.spark .x{stroke:var(--grape);stroke-width:1.2}
@media (min-width:900px){
  .sheet{left:auto;right:12px;bottom:auto;top:12px;width:340px;border-radius:var(--radius);border:1px solid var(--line);transform:translateX(120%);max-height:calc(100% - 24px)}
  .sheet.open{transform:none}
}

/* pulse: same tick as the map event */
@keyframes pulse{0%{transform:translateY(-2px) scale(1.015)}100%{transform:none}}
.pulse{animation:pulse .5s cubic-bezier(.2,.8,.2,1)}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.pin{width:14px;height:14px;border-radius:50%;background:var(--grape);border:2px solid #fff;position:relative}
.pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--grape);animation:ping 1.1s ease-out 1}
.pin.sim{background:var(--sim)}
.pin.sim::after{border-color:var(--sim)}
.pin.ok{background:var(--ok)}
.pin.bad{background:var(--bad)}

/* two-column section layout */
.split{display:grid;gap:20px;margin-top:22px}
@media (min-width:1000px){.split{grid-template-columns:minmax(0,1fr) 360px;align-items:start}.split.rev{grid-template-columns:360px minmax(0,1fr)}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.panel h3{margin-bottom:8px}
.panel + .panel{margin-top:14px}

/* S2 / S8 swipe */
.swipe{position:relative;height:min(70vh,640px);min-height:400px;overflow:hidden;border-radius:var(--radius);background:var(--panel);touch-action:pan-y}
.swipe .map{position:absolute;inset:0}
.swipe .top{clip-path:inset(0 var(--cut,50%) 0 0)}
.swipe .divider{position:absolute;top:0;bottom:0;left:calc(100% - var(--cut,50%));width:2px;background:#fff;z-index:4;transform:translateX(-1px)}
.swipe .handle{position:absolute;top:50%;left:calc(100% - var(--cut,50%));z-index:5;width:44px;height:44px;border-radius:50%;background:var(--fg);color:var(--bg);transform:translate(-50%,-50%);display:grid;place-items:center;font-size:16px;cursor:ew-resize;touch-action:none;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.swipe .lab{position:absolute;top:10px;z-index:4;font-size:12px;background:color-mix(in srgb,var(--panel) 85%,transparent);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.swipe .lab.l{left:10px}.swipe .lab.r{right:10px}
.swipe .state{position:absolute;inset:0;display:grid;place-items:center;z-index:6;padding:20px;text-align:center;background:color-mix(in srgb,var(--panel) 70%,transparent)}

/* S3 */
.counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.counters b{display:block;font-family:var(--display);font-size:24px;font-weight:500;line-height:1.1}
.counters span{font-size:12px;color:var(--muted)}
.counters .gap b{color:var(--sim)}

/* S4 risk chart */
.risk{width:100%;height:220px;display:block}
.risk text{font-size:10px;fill:var(--muted);font-family:var(--ui)}
.risk .band{opacity:.12}
.risk .gt{fill:none;stroke:var(--grape);stroke-width:1.6}
.risk .rain{fill:#6aa9e6;opacity:.7}
.risk .dm{fill:var(--sim)}
.risk .cur{stroke:var(--fg);stroke-width:1}
.scoutlist{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.scoutlist li{display:flex;justify-content:space-between;gap:8px;font-size:14px;border-top:1px solid var(--line);padding-top:6px}

/* S5 phone frame: real phone proportions 310x640 */
.phonewrap{display:flex;justify-content:center}
.phone{width:310px;height:640px;border-radius:38px;background:#0b0c09;border:6px solid #2b2d26;box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 0 0 1px #000;position:relative;overflow:hidden;color:#f3efe3;font-size:14px;display:flex;flex-direction:column;flex:none}
.phone .notch{height:26px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:11px;color:#bbb}
.phone .notch i{display:inline-block;width:70px;height:16px;background:#000;border-radius:8px}
.phone .appbar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#161a12;border-bottom:1px solid #2a2e24}
.phone .appbar b{font-family:var(--display);font-weight:500;font-size:16px}
.phone .net{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:#bbb}
.phone .net .sw{width:36px;height:22px;border-radius:11px;background:#3a3f33;position:relative;border:0;min-height:0;padding:0}
.phone .net .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.phone .net .sw.off{background:var(--sim)}
.phone .net .sw.off::after{left:17px}
.phone .simstrip{background:repeating-linear-gradient(135deg,#f0a933 0 8px,#ffc866 8px 16px);color:#2b1a02;font-size:11px;font-weight:700;text-align:center;padding:3px}
.phone .body{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:#0f110c}
.phone .badges{display:flex;gap:6px;font-size:11px}
.phone .badges span{border:1px solid #3a3f33;border-radius:999px;padding:2px 8px}
.phone .badges .pend{color:var(--sim);border-color:var(--sim)}
.phone .badges .sync{color:var(--ok);border-color:var(--ok)}
.phone .wa{align-self:flex-start;background:#1f2c20;border:1px solid #2f4a33;border-radius:12px 12px 12px 3px;padding:8px 10px;max-width:92%;font-size:13px;line-height:1.35}
.phone .wa small{display:block;color:#8fb59a;font-size:10px;margin-bottom:2px}
.phone .wa .t{display:block;text-align:right;color:#8fb59a;font-size:10px;margin-top:2px}
.phone .pt{display:flex;align-items:center;gap:10px;background:#161a12;border:1px solid #2a2e24;border-radius:12px;padding:10px;min-height:52px;cursor:pointer;color:inherit;text-align:left;font:inherit;width:100%}
.phone .pt i{width:26px;height:26px;border-radius:50%;background:var(--sim);color:#2b1a02;font-style:normal;font-weight:700;display:grid;place-items:center;font-size:12px;flex:none}
.phone .pt b{display:block;font-size:13px}
.phone .pt small{color:#9aa08f;font-size:11px}
.phone .pt.done i{background:var(--ok)}
.phone .pt.done.bad i{background:var(--bad)}
.phone .form{background:#161a12;border:1px solid #2a2e24;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.phone .form .seg button{min-height:40px;font-size:12px;padding:4px 10px;background:#0f110c;border-color:#3a3f33;color:#f3efe3}
.phone .form .seg button.on{background:#f3efe3;color:#0f110c}
.phone textarea,.phone input[type=text]{background:#0f110c;border-color:#3a3f33;color:#f3efe3;font-size:13px;min-height:40px}
.phone .photo{border:1px dashed #3a3f33;border-radius:10px;padding:8px;font-size:12px;color:#9aa08f;text-align:center;cursor:pointer;min-height:44px;display:grid;place-items:center}
.phone .photo.has{border-style:solid;color:var(--ok)}
.phone .photo input{display:none}
.phone .save{background:var(--grape);color:#fff;border-color:var(--grape);min-height:44px;font-size:14px}
.phone .foot{font-size:10px;color:#6f7266;text-align:center;padding:6px}
.phone .empty{color:#9aa08f;font-size:12px;text-align:center;padding:16px 8px;border:1px dashed #3a3f33;border-radius:12px}

/* S6 zones */
.zones table{width:100%;border-collapse:collapse;font-size:14px}
.zones th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:4px 6px}
.zones td{padding:6px;border-top:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.zones td:first-child{white-space:normal}
.zones td input{min-height:40px;padding:4px 8px;width:84px}
.zones .sw{width:14px;height:14px;border-radius:3px;display:inline-block;vertical-align:-2px;margin-right:6px}
.result{font-family:var(--display);font-size:26px;line-height:1.15;margin:10px 0 2px;font-weight:500}
.result small{display:block;font-family:var(--ui);font-size:13px;color:var(--muted);font-weight:400;margin-top:4px}
.exports{display:grid;gap:8px;margin-top:10px}
.exports button{justify-content:space-between;text-align:left;font-size:13px}
.exports button span{color:var(--muted);font-size:12px}

/* S7 replay */
.events{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.events li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;opacity:.45;font-size:14px}
.events li i{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;font-style:normal;font-size:12px}
.events li.lit{opacity:1;border-color:var(--sim)}
.events li.lit i{background:var(--sim);color:var(--sim-ink);border-color:var(--sim)}
.events li time{font-size:12px;color:var(--muted)}
.comp{display:grid;gap:8px;font-size:14px}
.comp div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:6px}
.comp div span:first-child{color:var(--muted)}
.comp .pend{color:var(--faint)}

/* S8 delta bars */
.delta{width:100%;height:160px;display:block}
.delta text{font-size:11px;fill:var(--muted);font-family:var(--ui)}
.delta .p{fill:var(--leaf)}.delta .n{fill:var(--bad)}

/* S9 report */
.gadgets{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
@media (min-width:760px){.gadgets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gadget{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:8px}
.gadget h3{font-size:17px}
.donutwrap{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
@media (max-width:599px){.donutwrap{grid-template-columns:1fr;justify-items:center}.donutwrap .legendlist{width:100%}}
.donut{width:120px;height:120px}
.donut .c{fill:none;stroke-width:16}
.donut text{fill:var(--fg);font-family:var(--display);font-size:20px;text-anchor:middle}
.donut .s{font-family:var(--ui);font-size:9px;fill:var(--muted)}
.legendlist{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:13px}
.legendlist li{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center}
.legendlist i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legendlist b{font-weight:500}
.minibars{display:grid;gap:6px;font-size:13px}
.minibars div{display:grid;grid-template-columns:90px 1fr 70px;gap:8px;align-items:center}
.minibars i{display:block;height:8px;border-radius:4px;background:var(--leaf);min-width:2px}
.minibars em{font-style:normal;text-align:right;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:999px;padding:6px 12px;font-size:13px}
.chips span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.chips span.sim::before{background:var(--sim)}
.chips span.pend{color:var(--faint)}
.chips span.pend::before{background:var(--faint)}
.chips b{font-family:var(--display);font-size:17px;font-weight:500}

/* S10 */
.three{display:grid;gap:14px;margin-top:22px}
@media (min-width:860px){.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.three .panel p{color:var(--muted);font-size:14px;margin-top:6px}
.honesty{width:100%;border-collapse:collapse;font-size:13px;margin-top:16px}
.honesty th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:6px 6px;border-bottom:1px solid var(--line2)}
.honesty td{padding:8px 6px;border-top:1px solid var(--line);vertical-align:top}
.honesty td:first-child{font-weight:500}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.methods{display:grid;gap:10px;margin-top:16px;font-size:14px;color:var(--muted)}
.methods b{color:var(--fg);font-weight:500}
.cta{margin-top:28px;padding:24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);display:grid;gap:12px}
.cta h3{font-size:26px}
.cta .row a{min-height:44px}
footer{color:var(--muted);font-size:12px;padding:40px 0 32px;line-height:1.7}

/* toast */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:40;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
@media print{
  header.top,nav.loop,.mapwrap,.phonewrap,.explore,.exports,button,.toast,.swipe,#s0,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s10{display:none!important}
  body{background:#fff;color:#000;padding:0}
  :root{--bg:#fff;--fg:#000;--muted:#444;--panel:#fff;--line:#ccc;--line2:#999}
  section{padding:12px 0;border:0}
  .gadgets{grid-template-columns:1fr 1fr}
  @page{size:A4;margin:16mm}
}