/* 7IT Guard control room (G8). The 7Maps cockpit language (scripts and api: public/7maps/_shared/cockpit.css) in
   both themes: one accent (the 7IT blue), status colours only for status, pill buttons, SF / Inter system stack.
   Built into api/_guardapp-assets.ts by scripts/build-guard-app.mjs. No inline styles anywhere (CSP style-src 'self'):
   the script sets only CSS custom properties through the CSSOM. */
:root{
  --bg:#f5f5f7;--bg2:#ebebf0;--panel:#fff;--panel2:#f9f9fb;--ink:#1d1d1f;--mute:#5e5e66;--dim:#6e6e73;
  --line:rgba(0,0,0,.09);--line2:rgba(0,0,0,.16);--acc:#0066cc;--acc2:#0071e3;--accs:rgba(0,113,227,.1);
  --ok:#137a3e;--warn:#8a5a00;--bad:#c4271d;--pay:#6b4fd8;--off:#6e6e73;--btn:#0071e3;--okbg:rgba(19,122,62,.1);--warnbg:rgba(176,120,0,.12);--badbg:rgba(196,39,29,.1);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);--glow:rgba(0,113,227,.18);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",Roboto,Arial,sans-serif;
  --r:18px;--tab:64px;color-scheme:light;--urg:#c4271d;--dim2:rgba(3,6,14,.55);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#05070d;--bg2:#080c17;--panel:#0b1121;--panel2:#0f172b;--ink:#e8edf7;--mute:#a3aec3;--dim:#8592a8;
  --line:rgba(130,165,225,.15);--line2:rgba(130,165,225,.28);--acc:#6cb6ff;--acc2:#2997ff;--accs:rgba(41,151,255,.14);
  --ok:#34d399;--warn:#f5b83d;--bad:#ff7b7b;--pay:#a78bfa;--off:#8592a8;--btn:#0a6fd8;--okbg:rgba(52,211,153,.12);--warnbg:rgba(245,184,61,.13);--badbg:rgba(255,107,107,.13);
  --shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.3);--glow:rgba(41,151,255,.35);color-scheme:dark;--urg:#b42c24;--dim2:rgba(0,0,0,.66);
}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);font:1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background:radial-gradient(900px 480px at 80% -12%,var(--accs),transparent 62%),radial-gradient(700px 420px at -10% 10%,var(--accs),transparent 60%)}
@media (prefers-color-scheme:dark){body::before{background:radial-gradient(1200px 600px at 70% -10%,rgba(41,151,255,.13),transparent 60%),radial-gradient(900px 500px at -10% 20%,rgba(41,151,255,.06),transparent 60%),linear-gradient(var(--line) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:linear-gradient(#000 0,rgba(0,0,0,.35) 520px,rgba(0,0,0,.15) 100%);mask-image:linear-gradient(#000 0,rgba(0,0,0,.35) 520px,rgba(0,0,0,.15) 100%)}}
::selection{background:var(--glow)}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:8px}
#main:focus{outline:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;color:var(--ink);overflow-wrap:anywhere}
h1{font-size:clamp(1.75rem,6.4vw,2.75rem);line-height:1.06;font-weight:700;letter-spacing:-.03em}
h2{font-size:1.1875rem;font-weight:650;letter-spacing:-.015em}
h3{font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
p{margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--btn);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}
.mute{color:var(--mute)}.dim{color:var(--dim)}
.eyebrow{font:600 0.75rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
code,.code{font:0.7813rem/1.45 var(--mono);word-break:break-all;color:var(--ink)}

/* frame */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.top-in{max-width:1200px;margin:0 auto;height:56px;padding:0 16px;display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 0.9375rem/1 var(--sans);letter-spacing:-.01em;flex:none}
.brand small{display:block;font:600 0.6563rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.mark{width:30px;height:30px;flex:none}
.mark .m-ring{fill:none;stroke:var(--acc2);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:70 100;transform-origin:16px 16px;animation:spin 9s linear infinite}
.mark .m-core{fill:var(--acc2)}
.mark .m-shield{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.nav{display:none;gap:4px;margin-left:auto;min-width:0}
.nav a{position:relative;display:inline-flex;align-items:center;gap:7px;color:var(--mute);text-decoration:none;font:500 0.875rem/1 var(--sans);padding:9px 12px;border-radius:999px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--accs)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--accs)}
.nav svg,.tabs svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#d70015;color:#fff;font:700 0.6875rem/18px var(--sans);text-align:center}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(6,1fr);background:color-mix(in srgb,var(--panel) 82%,transparent);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tab);color:var(--dim);text-decoration:none;font:600 0.6563rem/1 var(--sans);letter-spacing:.01em}
.tabs a[aria-current="page"]{color:var(--acc2)}
.tabs svg{width:23px;height:23px}
.tabs .count{position:absolute;top:8px;left:calc(50% + 6px)}
.wrapb{max-width:1200px;margin:0 auto;padding:0 16px}
#net .banner{margin-top:14px}
main>*,.card>*,.hero>*{min-width:0}
main{max-width:1200px;margin:0 auto;padding:22px 16px calc(var(--tab) + 40px + env(safe-area-inset-bottom));display:grid;gap:18px;min-width:0}
@media (min-width:860px){.nav{display:flex}.tabs{display:none}main{padding:34px 24px 64px;gap:22px}.top-in{padding:0 24px}}

/* cards and pieces */
.card{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;display:grid;gap:12px;min-width:0}
@media (min-width:860px){.card{padding:22px}}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rise{animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
@keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 0.6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line2);border-radius:999px;padding:5px 9px;white-space:nowrap}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--okbg)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warnbg)}
.chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--badbg)}
.chip.off{color:var(--off)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.live .dot{animation:beat 2.4s ease-out infinite}
.label{font:600 0.6875rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;appearance:none;border:0;border-radius:999px;background:var(--btn);color:#fff;font:600 0.9375rem/1 var(--sans);padding:12px 20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;text-decoration:none;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--acc);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.quiet{background:var(--accs);color:var(--acc)}
.btn.danger{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,transparent)}
.btn.small{font-size:0.875rem;padding:10px 16px;min-height:44px}
.btn[disabled]{opacity:.55;cursor:default}
.row{display:flex;align-items:center;gap:12px;min-width:0}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.between{justify-content:space-between}
.stack{display:grid;gap:6px;min-width:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.fact{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.fact b{display:block;font-size:1.375rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact span{display:block;color:var(--mute);font-size:0.8125rem}
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:34px 18px}
.empty svg{width:64px;height:64px;fill:none;stroke:var(--acc2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skel{border-radius:12px;background:linear-gradient(90deg,var(--panel2) 25%,var(--bg2) 50%,var(--panel2) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel.l{height:14px}.skel.xl{height:150px}
.banner{display:flex;align-items:center;gap:10px;border-radius:14px;padding:11px 14px;font-size:0.875rem;border:1px solid var(--line2);background:var(--panel)}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warnbg)}
.banner.info{border-color:color-mix(in srgb,var(--acc2) 40%,transparent);background:var(--accs)}
.banner svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.banner.calm{border-color:color-mix(in srgb,var(--acc2) 30%,transparent)}
.banner .okmark.sm{width:20px;height:20px;flex:none;background:none}.banner .okmark.sm svg{width:20px;height:20px;stroke-width:2.2}.okmark.still,.okmark.still svg{animation:none;stroke-dashoffset:0}
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + 18px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);opacity:0;z-index:50;background:var(--ink);color:var(--bg);font:600 0.875rem/1.3 var(--sans);padding:11px 18px;border-radius:999px;box-shadow:var(--shadow);transition:opacity .25s,transform .25s;max-width:calc(100% - 32px);text-align:center;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:860px){.toast{bottom:28px}}

/* hero */
.hero{display:grid;gap:8px;padding:4px 2px}
.hero .sub{color:var(--mute);font-size:0.9375rem}
/* 2026-10-06: the bootstrap. A copy kept on this device is dimmed while the fresh answer loads; on a copy or stale data no
   pulse, glow or live pill (the pill is not drawn at all); the line under the title says how old the data is. */
.upd{color:var(--mute);font-size:0.8125rem;margin:2px 0 0}.upd.stale{color:var(--warn);font-weight:600}
body.from-cache main{opacity:.62;transition:opacity .25s ease}
body.no-live .live .dot,body.no-live .ring.live .ro,body.no-live .sdial.live .sd-halo,body.no-live .live-dot{animation:none}
body.no-live .sumring.glow .sr-arc{filter:none}
@media (prefers-reduced-motion:reduce){body.from-cache main{transition:none}}
.sumrow{display:flex;gap:8px;flex-wrap:wrap}

/* status rings */
.ring{position:relative;width:78px;height:78px;flex:none}
.ring.big{width:120px;height:120px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .tr{fill:none;stroke:var(--line2);stroke-width:3.6}
.ring .ar{fill:none;stroke:var(--c,var(--acc2));stroke-width:3.6;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--c,var(--acc2)) 45%,transparent));stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:var(--o,100);transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.ring .ro{fill:none;stroke:var(--c,var(--acc2));stroke-width:1;opacity:.35;transform-origin:50% 50%}
.ring.live .ro{animation:ping 2.6s ease-out infinite}
@keyframes ping{from{transform:scale(.86);opacity:.45}to{transform:scale(1.06);opacity:0}}
.ring .rc{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.05}
.ring .rc b{font-size:1.0625rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ring.big .rc b{font-size:1.625rem}
.ring:not(.big) .rc small{display:none}
.ring .rc small{display:block;font:600 0.5938rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.st-up{--c:var(--ok)}.st-attention{--c:var(--warn)}.st-down{--c:var(--bad)}.st-paused,.st-waiting{--c:var(--off)}

/* app cards */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.app{display:grid;gap:14px;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.app:hover{transform:translateY(-2px);border-color:var(--line2)}
.app-h{display:flex;gap:14px;align-items:center;min-width:0}
.app-h .host{font-size:1.0625rem;font-weight:650;letter-spacing:-.01em;overflow-wrap:anywhere}
.app-h .nm{color:var(--mute);font-size:0.8125rem;overflow-wrap:anywhere}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.kv div{min-width:0}
.kv span{display:block;font:600 0.6563rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.kv b{font-weight:600;font-size:0.9063rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.deploy{border-top:1px solid var(--line);padding-top:12px;font-size:0.875rem;color:var(--mute);display:grid;gap:4px;min-width:0}
.deploy b{color:var(--ink);font-weight:600}
.w{color:var(--bad)}.b{color:var(--ok)}.n{color:var(--dim)}

/* detail */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--acc);text-decoration:none;font-weight:600;font-size:0.9375rem;justify-self:start;padding:6px 2px}
.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;min-width:0}
.dhead .stack>*,.app-h .stack>*{overflow-wrap:anywhere}
@media (max-width:480px){.dhead .ring.big{width:96px;height:96px}.ring.big .rc b{font-size:1.3125rem}}
.dhead h1{font-size:clamp(1.5rem,5.6vw,2.375rem);overflow-wrap:anywhere}
.cols{display:grid;gap:18px;min-width:0}
@media (min-width:980px){.cols{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}.cols>div{display:grid;gap:18px;min-width:0}}
.findings{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.findings li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:12px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.findings .sev{grid-row:span 2;width:4px;align-self:stretch;border-radius:4px;background:var(--off)}
.sev.critical{background:var(--bad)}.sev.warning{background:var(--warn)}.sev.info{background:var(--acc2)}
.findings .todo{color:var(--mute);font-size:0.875rem}
.tl{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:grid;gap:16px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(var(--acc2),var(--line))}
.tl li{position:relative;display:grid;gap:5px;min-width:0}
.tl li::before{content:"";position:absolute;left:-21px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--acc2)}
.tl li.worse::before{border-color:var(--bad);background:var(--badbg)}
.tl .when{font:600 0.75rem/1.3 var(--mono);color:var(--dim);letter-spacing:.04em}
.tl ul{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:0.875rem}
.tl ul li::before{display:none}
.tl ul li{padding-left:16px;position:relative}
.tl ul li span.mk{position:absolute;left:0;top:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.hdr{display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;padding:6px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);overflow-wrap:anywhere}
.hdr.no{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.hdr.yes{color:var(--ok)}
.hdr i{font-style:normal;font-weight:700}
.ev{display:grid;gap:8px;min-width:0}
.ev .code{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:0.875rem}
.checks li{display:flex;gap:8px;align-items:flex-start}
.verdict{font-weight:650}
.verdict.ok{color:var(--ok)}.verdict.no{color:var(--bad)}

/* switches and fields */
.sw{appearance:none;position:relative;width:51px;height:31px;border-radius:999px;border:0;background:var(--line2);cursor:pointer;flex:none;transition:background .2s;padding:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.sw[aria-checked="true"]{background:var(--ok)}
.sw[aria-checked="true"]::after{transform:translateX(20px)}
.sw[disabled]{opacity:.5;cursor:default}
.set{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);min-width:0}
.set:first-of-type{border-top:0}
.set .t{flex:1;min-width:0}
.set .t b{display:block;font-weight:600;overflow-wrap:anywhere}
.set .t span{display:block;color:var(--mute);font-size:0.8438rem}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:0.875rem}
.in{width:100%;min-height:46px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);padding:11px 14px;font:1rem/1.3 var(--sans)}
.in:focus-visible{outline:2px solid var(--acc2);outline-offset:1px;border-color:var(--acc2)}
select.in{padding-right:30px}
.times{display:flex;gap:10px;flex-wrap:wrap}
.times .field{flex:1;min-width:120px}
.meter{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width 1s cubic-bezier(.2,.8,.2,1)}

/* inbox */
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{appearance:none;border:0;background:transparent;border-radius:999px;padding:8px 14px;font:600 0.8438rem/1 var(--sans);color:var(--mute);cursor:pointer;min-height:34px}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.inbox{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.msg{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;border-left:0}
.msg .sev{width:4px;border-radius:4px;grid-row:span 4;align-self:stretch}
.msg.unread{border-color:color-mix(in srgb,var(--acc2) 45%,transparent)}
.msg.hl{box-shadow:0 0 0 2px var(--acc2),var(--shadow)}
.msg .meta{font:600 0.75rem/1.3 var(--mono);color:var(--dim);letter-spacing:.04em;display:flex;gap:8px;flex-wrap:wrap}
.msg .what{font-weight:600;overflow-wrap:anywhere}
.msg .todo{color:var(--mute);font-size:0.9063rem;overflow-wrap:anywhere}
.msg .acts{display:flex;gap:8px;flex-wrap:wrap}

/* sign-in */
.gate{min-height:calc(100vh - 56px);display:grid;place-items:center;padding:28px 16px}
.gate .card{width:100%;max-width:480px;gap:16px;padding:26px}
.gate .mark{width:64px;height:64px}
.gate .lede{color:var(--mute)}
.or{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:0.8125rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.err{color:var(--bad);font-size:0.875rem;font-weight:600}
.boot{min-height:70vh;display:grid;place-items:center;align-content:center;gap:14px;color:var(--mute)}
.boot .mark{width:56px;height:56px}
.devk{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accs);color:var(--acc2);flex:none}
.devk svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.list{display:grid;gap:12px}
.privacy{margin:0;padding-left:20px;color:var(--mute);font-size:0.875rem;display:grid;gap:4px}

/* G9a: Help */
.chip.h{text-transform:none;letter-spacing:0;font:600 0.7813rem/1.25 var(--sans);max-width:100%;white-space:normal;overflow-wrap:anywhere;min-width:0}
.hero .row>.sumrow{flex:1 1 240px;min-width:0}
.chip.h svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sect{margin-top:8px}
.scan{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px}
@media (max-width:480px){.scan{grid-template-columns:1fr;justify-items:center;text-align:center}.scan .scanlist{text-align:left;justify-self:stretch}}
.radar{position:relative;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle,var(--accs) 0,transparent 70%);flex:none}
.radar i{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc2) 35%,transparent)}
.radar i:nth-child(2){inset:22px}.radar i:nth-child(3){inset:50px;background:var(--acc2);border:0;box-shadow:0 0 14px var(--glow)}
.radar b{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--acc2) 55%,transparent),transparent 28%);animation:spin 2.4s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 69%,transparent 70%);mask-image:radial-gradient(circle,#000 69%,transparent 70%)}
.scanlist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;font-size:0.875rem;color:var(--mute)}
.scanlist li{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere;animation:rise .5s both;animation-delay:calc(var(--i,0) * 90ms)}
.scanlist .dot{color:var(--acc2);animation:beat 1.6s ease-out infinite}
.faults{display:grid;gap:14px}
@media (min-width:980px){.faults{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.fault{position:relative;overflow:hidden;gap:10px}
.fault::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--warn)}
.fault.sev-critical::before{background:var(--bad)}.fault.sev-info::before{background:var(--acc2)}
.fault-h{display:flex;gap:12px;align-items:center;min-width:0}
.fault .host{font-weight:500;font-size:0.875rem;color:var(--mute);overflow-wrap:anywhere}
button.link{appearance:none;border:0;background:transparent;color:var(--acc);cursor:pointer;padding:8px 0;justify-self:start;min-height:44px;font-weight:600}
.small{font-size:0.8438rem}
.btn.urgent.soft{background:var(--badbg);color:var(--bad);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 40%,transparent)}
.hero.calm{position:relative;padding-right:0}
.allclear{width:76px;height:76px;margin-bottom:4px}
@media (min-width:860px){.hero.calm{padding-right:120px}.allclear{position:absolute;right:8px;top:6px;width:96px;height:96px}}
.allclear svg{width:100%;height:100%;overflow:visible}
.ac-ring{fill:none;stroke:var(--ok);stroke-width:2;opacity:.35;transform-origin:32px 32px;animation:ping 3.2s ease-out infinite}
.ac-shield{fill:var(--okbg);stroke:var(--ok);stroke-width:2;stroke-linejoin:round}
.ac-check{fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:draw .7s .25s ease-out forwards}
.fico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--warnbg);color:var(--warn)}
.sev-critical .fico{background:var(--badbg);color:var(--bad)}
.fico svg,.tico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fault .what{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.fault h3{font:600 0.6875rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.causes,.steps{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.causes li{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);min-width:0}
.causes .ct{font-size:0.9063rem;overflow-wrap:anywhere}
.cst{display:inline-flex;align-items:center;gap:6px;font:600 0.6875rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.cst svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cs-found{border-color:color-mix(in srgb,var(--bad) 40%,transparent)!important;background:var(--badbg)!important}
.cs-found .cst{color:var(--bad)}
.cs-ruled_out .cst{color:var(--ok)}
.cs-ruled_out .ct{color:var(--mute);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--mute) 50%,transparent)}
.steps{counter-reset:st}
.steps li{counter-increment:st;position:relative;padding-left:36px;display:grid;gap:8px;justify-items:start;font-size:0.9063rem;min-width:0;overflow-wrap:anywhere}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 0.75rem/1 var(--sans);background:var(--accs);color:var(--acc)}
.btn svg,.link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:0.875rem;text-decoration:none}
.fault-f{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.btn.urgent{background:var(--urg);color:#fff}
.tiles{display:grid;gap:12px}
@media (min-width:720px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{display:grid;gap:8px;align-content:start;justify-items:start;padding:16px;border-radius:16px;background:var(--panel2);border:1px solid var(--line);min-width:0}
.tico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accs);color:var(--acc2)}
.tico.red{background:var(--badbg);color:var(--bad)}
.reqs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.req{display:grid;gap:8px;padding:14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);min-width:0}
.rtext{white-space:pre-wrap;overflow-wrap:anywhere}
.thread{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.thread li{display:grid;gap:6px;justify-items:start}
.who{font:600 0.7188rem/1.2 var(--mono);color:var(--dim);letter-spacing:.04em}
.bubble{background:var(--accs);border:1px solid color-mix(in srgb,var(--acc2) 30%,transparent);border-radius:4px 14px 14px 14px;padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
.prov{list-style:none;margin:0;padding:0;display:grid}
.prov li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.prov li:first-child{border-top:0}
.traps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.traps li{display:grid;gap:6px;min-width:0}
.two{display:grid;gap:16px}
@media (min-width:720px){.two{grid-template-columns:1fr 1fr}}
.ticks{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-size:0.9063rem}
.ticks li{display:flex;gap:8px;align-items:flex-start;min-width:0}
.ticks svg{width:18px;height:18px;flex:none;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.ticks.yes svg{stroke:var(--ok)}.ticks.no svg{stroke:var(--off)}
.faq{border-top:1px solid var(--line);padding:10px 0}
.faq:first-of-type{border-top:0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-weight:700}
.faq[open] summary::after{content:"\2212"}
.faq p{margin-top:8px}
.symp[open]{display:grid;gap:10px}.symp h3{margin:6px 0 0;font-size:0.8125rem;color:var(--dim);font-weight:600}
.form{gap:16px}
textarea.in{min-height:110px;resize:vertical;font:1rem/1.45 var(--sans)}
.attach{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:0.875rem}
.attach li{display:flex;gap:8px;align-items:flex-start;min-width:0;overflow-wrap:anywhere}
.attach svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--ok);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.paybox{display:grid;gap:4px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line2);background:var(--panel2)}
.how{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.how{grid-template-columns:repeat(4,minmax(0,1fr))}}
.how li{display:flex;gap:10px;align-items:center;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-size:0.875rem;font-weight:600;min-width:0;animation:rise .5s both;animation-delay:calc(var(--i,0) * 80ms)}
.how b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--accs);color:var(--acc);font-size:0.8125rem}
.choice{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.choice legend{font-weight:600;font-size:0.875rem;margin-bottom:8px;padding:0}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice label{padding:9px 14px;border-radius:999px;border:1px solid var(--line2);font-size:0.875rem;font-weight:600;cursor:pointer;color:var(--mute);min-height:40px;display:inline-flex;align-items:center}
.choice input:checked+label{background:var(--accs);border-color:var(--acc2);color:var(--ink)}
.choice input:focus-visible+label{outline:2px solid var(--acc2);outline-offset:2px}
.okmark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--okbg);color:var(--ok);animation:pop .5s cubic-bezier(.2,.8,.2,1) both}
.okmark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:draw .6s .2s ease-out forwards}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
/* G9a: welcome tour */
.tour{position:fixed;inset:0;z-index:60}
.tour-spot{position:fixed;left:var(--x,50%);top:var(--y,50%);width:var(--w,0);height:var(--h,0);border-radius:16px;box-shadow:0 0 0 2px var(--acc2),0 0 0 9999px var(--dim2);transition:left .35s cubic-bezier(.2,.8,.2,1),top .35s cubic-bezier(.2,.8,.2,1),width .35s,height .35s;pointer-events:none}
.tour-spot.none{left:50%;top:50%;width:0;height:0;box-shadow:0 0 0 9999px var(--dim2)}
.tour-card{position:fixed;left:var(--cx,12px);top:var(--cy,12px);width:min(400px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--line2);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:20px;display:grid;gap:10px;animation:rise .35s cubic-bezier(.2,.8,.2,1) both}
.tour-card.dock{left:12px;right:12px;top:auto;width:auto;bottom:calc(var(--tab) + 12px + env(safe-area-inset-bottom))}
.tour-card h2{outline:none}
.tour-x{display:grid;gap:8px;justify-items:start}
.tour-x:empty{display:none}
.tour-dots{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.tour-dots li{width:8px;height:8px;border-radius:50%;background:var(--line2);transition:background .25s,width .25s}
.tour-dots li.on{background:var(--acc2)}
.tour-dots li.on:last-of-type,.tour-dots li.on:not(:has(+ li.on)){width:20px;border-radius:999px}
.tour-skip{appearance:none;border:0;background:transparent;color:var(--mute);font:600 0.875rem/1 var(--sans);padding:8px 4px;cursor:pointer;min-height:36px}
.tour-skip:hover{color:var(--ink)}
/* G9c: install banner (Home) and notice (Notifications) */
.ibanner,.pbanner{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:start;padding:14px 16px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--acc2) 40%,transparent);background:linear-gradient(120deg,var(--accs),transparent 70%),var(--panel);box-shadow:var(--shadow);min-width:0}
.ibanner>.row,.pbanner>.row{grid-column:1/-1;justify-content:flex-end;flex-wrap:wrap}
.ibanner b,.pbanner b{font-size:0.9375rem}
.iico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accs);color:var(--acc);flex:none}
.iico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.4s ease-in-out 1s 2}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(3px)}}
.inotice{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:linear-gradient(120deg,var(--warnbg),transparent 70%),var(--panel)}
.inotice .iico{background:var(--warnbg);color:var(--warn)}
/* 2026-10-07: the push banner (push.js) and the iPhone's install banner */
.ibanner.ios .iico svg,.pbanner .iico svg{animation:ring 1.6s ease-in-out .5s 2;transform-origin:50% 12%}
@keyframes ring{0%,100%{transform:none}12%{transform:rotate(14deg)}26%{transform:rotate(-12deg)}40%{transform:rotate(8deg)}54%{transform:rotate(-5deg)}68%{transform:none}}
.pbanner b:focus{outline:none}
.pbanner.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:linear-gradient(120deg,var(--warnbg),transparent 70%),var(--panel)}
.pbanner.warn .iico{background:var(--warnbg);color:var(--warn)}
.pbanner.warn .iico svg{animation:none}
.pbanner.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:linear-gradient(120deg,var(--okbg),transparent 70%),var(--panel)}
.pbanner.ok .iico{background:var(--okbg);color:var(--ok);animation:pop .5s cubic-bezier(.2,.8,.2,1) both}
.pbanner.ok .iico svg{animation:none}
@keyframes pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1);opacity:1}100%{transform:none}}
.pbanner.compact{grid-template-columns:auto 1fr;padding:10px 12px;gap:6px 12px;margin-bottom:4px}
.pbanner.compact .iico{width:32px;height:32px;border-radius:10px}
.pbanner.compact .iico svg{width:17px;height:17px}
.pbanner.compact .mute{font-size:0.8438rem}
.pbanner .isteps{margin-top:6px}
.pbanner .pvnote{align-self:flex-start;white-space:normal;max-width:100%;margin-top:4px;line-height:1.35}
.pquiet{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--mute);font-size:0.875rem;min-width:0}
.pquiet .pq-i{display:grid;place-items:center;color:var(--dim);flex:none}
.pquiet .pq-i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pquiet .btn{flex:none}
.isteps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.isteps li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;font-size:0.9063rem;animation:rise .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
.isteps li b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 0.75rem/1 var(--mono);background:var(--panel2);border:1px solid var(--line2);color:var(--acc)}
/* G9c: provider outages, the Code card, GitHub */
.incs{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:linear-gradient(120deg,var(--badbg),transparent 65%),var(--panel)}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 55%,transparent);animation:beat 1.8s ease-out infinite;flex:none}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 55%,transparent)}80%,100%{box-shadow:0 0 0 10px transparent}}
.inclist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.inclist li{display:grid;gap:6px;padding:12px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);min-width:0;justify-items:start}
.inclist p{margin:0}
.repo{display:grid;gap:10px;padding:12px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);min-width:0}
.repo b{overflow-wrap:anywhere}
.repo label{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.runs{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:0.875rem}
.runs li{display:flex;gap:10px;align-items:baseline;min-width:0}
.runs li .grow{overflow-wrap:anywhere;min-width:0}
.runs .mk{font-weight:700;width:14px;flex:none}
/* G9c+: the slogan, the Home summary ring, the 7IT mark, plain-layer pieces */
.brand .bt{display:grid;min-width:0}
.brand .slogan{font:500 0.6875rem/1.25 var(--sans);letter-spacing:0;text-transform:none;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(62vw,300px)}
.slogan-l{font-weight:600;color:var(--acc);margin-top:-6px}
.hero.home{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px 22px;padding:6px 2px}
@media (max-width:520px){.hero.home{gap:14px 16px;align-items:start}.hero.home h1{font-size:1.75rem}}
.sumring{position:relative;width:92px;height:92px;flex:none;--c:var(--off)}
@media (min-width:521px){.sumring{width:132px;height:132px}}
@media (min-width:860px){.sumring{width:156px;height:156px}}
.sumring.st-up{--c:var(--ok)}.sumring.st-attention{--c:var(--warn)}.sumring.st-down{--c:var(--bad)}
.sumring svg{width:100%;height:100%;overflow:visible}
.sr-halo{fill:none;stroke:var(--c);stroke-width:1;opacity:.3;transform-origin:60px 60px;animation:ping 3s ease-out infinite}
.sr-track{fill:none;stroke:var(--line2);stroke-width:7}
.sr-arc{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:60px 60px;animation:arc 1.1s .15s cubic-bezier(.2,.8,.2,1) forwards}
.sumring.glow .sr-arc{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent))}
.sr-shield{fill:color-mix(in srgb,var(--c) 14%,transparent);stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}
.sr-core{fill:var(--c)}
@keyframes arc{to{stroke-dashoffset:0}}
.by7{display:inline-flex;align-items:center;gap:8px;font:600 0.7813rem/1.2 var(--sans);color:var(--mute);margin-top:4px}
.lx7{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--btn);color:#fff;font:800 0.75rem/1 var(--sans)}
.gate .by7{justify-self:center}
.fault .impact{color:var(--mute);font-size:0.9375rem;margin-top:-4px}
.fault-f p{margin-bottom:8px}
.big-num{font-size:0.9375rem;color:var(--mute)}.big-num b{font-size:1.75rem;color:var(--ink);margin-right:4px}
/* G9c+: the launch splash (always dark, like the manifest's background and the iOS launch image) */
.splash{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#05070d;color:#e8edf7;padding:24px;transition:opacity .26s ease;cursor:pointer}
.splash.out{opacity:0;pointer-events:none}
.sp-in{display:grid;justify-items:center;gap:14px;text-align:center;max-width:340px}
.sp-mark{width:132px;height:132px;overflow:visible}
.sp-track{fill:none;stroke:rgba(130,165,225,.18);stroke-width:6}
.sp-ring{fill:none;stroke:#2997ff;stroke-width:6;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:60px 60px;animation:sp-draw .65s .3s cubic-bezier(.3,.7,.2,1) forwards,sp-green .3s .95s ease forwards}
.sp-l,.sp-r{fill:rgba(52,211,153,.1);stroke:#e8edf7;stroke-width:2.6;stroke-linejoin:round;opacity:0}
.sp-l{animation:sp-in-l .42s .02s cubic-bezier(.2,.8,.2,1) forwards}.sp-r{animation:sp-in-r .42s .08s cubic-bezier(.2,.8,.2,1) forwards}
.sp-core{fill:#34d399;opacity:0;transform-origin:60px 57px;animation:sp-pop .3s .42s cubic-bezier(.2,.8,.2,1.4) forwards}
.sp-name{font:700 1.375rem/1 var(--sans);letter-spacing:-.02em;opacity:0;animation:sp-fade .3s .5s ease forwards}
.sp-slogan{font:500 0.9375rem/1.4 var(--sans);color:#a3aec3;min-height:2.8em}
.sp-slogan span{opacity:0;animation:sp-fade .16s ease forwards;animation-delay:calc(.62s + var(--i,0) * 70ms)}
@keyframes sp-draw{to{stroke-dashoffset:0}}
@keyframes sp-green{to{stroke:#34d399;filter:drop-shadow(0 0 8px rgba(52,211,153,.75))}}
@keyframes sp-in-l{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes sp-in-r{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes sp-pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes sp-fade{to{opacity:1}}
/* The still version (reduced motion): the final frame. */
.splash.still .sp-ring{stroke-dashoffset:0;stroke:#34d399;filter:drop-shadow(0 0 8px rgba(52,211,153,.75))}
.splash.still .sp-l,.splash.still .sp-r,.splash.still .sp-core,.splash.still .sp-name,.splash.still .sp-slogan span{opacity:1}
/* The first paint of the installed app follows the dark launch image. */
@media (display-mode:standalone){#root>.boot{position:fixed;inset:0;min-height:0;background:#05070d;color:#a3aec3}#root>.boot .m-shield{stroke:#e8edf7}}

/* Self-help (data/guard-selfhelp/catalog.json): the search, the picker, the guided flows. For people who are not technical
   and for low vision: large type (18 px and up, steps 22 px), targets of 48 px and more, words and shapes for severity (never
   colour only), AA contrast on the existing tokens in both themes, motion only through .rise (off with reduced motion). */
.shsearch{display:grid;gap:8px;margin-top:8px;max-width:760px}
.shl{font-weight:650;font-size:1.125rem;color:var(--ink)}
.in.big{min-height:56px;font-size:1.125rem;border-radius:14px}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.prow{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);color:var(--ink);text-decoration:none;min-width:0;transition:border-color .2s,transform .2s}
.card .prow{background:var(--panel2)}
.prow:hover{border-color:var(--acc2);transform:translateY(-1px)}
.prow b{font-size:1.125rem;font-weight:650;letter-spacing:-.01em;overflow-wrap:anywhere}
.prow .mute{font-size:0.9688rem;overflow-wrap:anywhere}
.prow>svg,.ptile>svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-left:auto}
.pico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--accs);color:var(--acc)}
.pico.bad{background:var(--badbg);color:var(--bad)}.pico.warn{background:var(--warnbg);color:var(--warn)}.pico.ok{background:var(--okbg);color:var(--ok)}
.pico svg,.chip.sevc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip.found{justify-self:start;font-size:0.8125rem}
.ptiles{display:grid;gap:12px}
@media (min-width:720px){.ptiles{grid-template-columns:1fr 1fr}}
.ptile{display:flex;align-items:center;gap:16px;min-height:108px;padding:18px;border-radius:18px;border:1px solid var(--line2);background:linear-gradient(135deg,var(--accs),transparent 70%),var(--panel2);color:var(--ink);text-decoration:none;min-width:0;transition:transform .2s,border-color .2s}
.ptile:hover{border-color:var(--acc2);transform:translateY(-2px)}
.ptile b{font-size:1.375rem;letter-spacing:-.015em}
.ptile .mute{font-size:0.9688rem}
.tico.big{width:56px;height:56px;border-radius:16px;flex:none}
.tico.big svg{width:28px;height:28px}
.found-now{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.fhead{gap:10px}
.fhead .means{font-size:1.1875rem;line-height:1.45;color:var(--ink);max-width:760px}
.chip.sevc{text-transform:none;letter-spacing:0;font:650 0.9063rem/1 var(--sans);padding:7px 12px}
.chip.sevc svg{width:17px;height:17px;stroke-width:2.2}
.fbody{display:grid;gap:14px;max-width:820px;min-width:0}
main>.field{max-width:520px}
.step{gap:16px;padding:22px;font-size:1.0625rem}
.step .do{font-size:1.375rem;line-height:1.35;font-weight:650;letter-spacing:-.01em;outline:none;overflow-wrap:anywhere}
@media (min-width:860px){.step .do{font-size:1.5625rem}}
.step .ask{font-weight:650;font-size:1.125rem;margin-top:2px}
.step .mute{font-size:1.0625rem}
.yn,.answers{display:grid;gap:10px}
@media (min-width:600px){.yn{grid-template-columns:1fr 1fr}}
.btn.big{min-height:56px;font-size:1.0938rem;padding:14px 22px}
.yn .btn,.answers .btn{width:100%}
.answers .btn{justify-content:flex-start;text-align:left;white-space:normal;line-height:1.3}
.step>.btn.big,.step>a.btn.big,.fixit{justify-self:start}
@media (max-width:599px){.step>.btn.big,.step>a.btn.big,.step .row>.btn.big,.step .row>a.btn.big{width:100%}}
.btn.yes{background:var(--ok);color:#fff}
@media (prefers-color-scheme:dark){.btn.yes{background:#0f7a45}}
.btn.no{color:var(--ink);box-shadow:inset 0 0 0 2px var(--line2)}
.pdots{list-style:none;margin:0;padding:0;display:flex;gap:7px;flex-wrap:wrap}
.pdots li{width:11px;height:11px;border-radius:50%;background:var(--line2)}
.pdots li.on{background:var(--acc2)}
button.back-step{font-size:1rem;min-height:48px}
.ai{display:grid;gap:12px;padding:16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--acc2) 40%,transparent);background:var(--accs);min-width:0}
.ai h3{font-size:1.1875rem}
.ai .mute{font-size:1rem}
textarea.prompt{min-height:160px;font:0.9375rem/1.55 var(--mono);background:var(--panel);resize:vertical}
.bpick{gap:10px}.bpick legend{font-size:1.0625rem}
.bpick label{min-height:48px;font-size:1rem;padding:10px 16px}
.done{justify-items:start}
.verdict{font-size:1.125rem}
.verdict.b{color:var(--ok)}.verdict.w{color:var(--bad)}.verdict.n{color:var(--mute)}
.esc{border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.fnow summary{font-size:1rem}
.step h2[tabindex]{outline:none}
.confirm-q{font-size:1.125rem;font-weight:650;outline:none;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.okmark svg,.ac-check,.sr-arc{stroke-dashoffset:0}}
@media (forced-colors:active){.card,.fact{border:1px solid CanvasText}.dot,.sev{forced-color-adjust:none}}

/* G10d: custom checks (Your checks, the check's page, the library). Status is a word plus a light (never colour only);
   targets 48 px and up; locked cards stay readable (AA) and only lose colour, never their text. */
.light{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--off);flex:none}
.light.big{width:16px;height:16px;box-shadow:0 0 0 4px var(--panel)}
.l-ok{background:var(--ok)}.l-warn{background:var(--warn)}.l-fail{background:var(--bad)}.l-new,.l-paused{background:transparent;border:2px solid var(--off)}
.prow.ck .stack{gap:2px;min-width:0}
.prow.ck .dim{font-size:0.8438rem}
.ckcard .row{margin-top:4px}
.histbox{border-radius:12px;background:var(--panel2);border:1px solid var(--line);padding:10px}
svg.hist{display:block;width:100%;height:56px}
.hb-ok{fill:var(--ok)}.hb-warn{fill:var(--warn)}.hb-fail{fill:var(--bad)}.hb-none{fill:var(--line2)}
.sug{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;border-radius:14px;background:var(--okbg)}
.sug p{margin:0;font-size:0.9688rem}
.limf{display:grid;gap:6px}.limf label{font-weight:600}
.limf .row{flex-wrap:wrap}.limf input.in{max-width:130px}.limf select.in{width:auto}
.in.mono{font-family:var(--mono);font-size:0.8438rem}
.ckhead .means{margin-top:6px}
.kv.adv{grid-template-columns:1fr}
.lockb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ltiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ltile{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:96px;padding:14px 16px;border-radius:16px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,transform .2s}
.ltile b{font-size:1.0625rem;letter-spacing:-.01em}.ltile .mute{font-size:0.875rem}
.ltile:hover{border-color:var(--acc2);transform:translateY(-1px)}
.ltile[aria-pressed="true"]{border:2px solid var(--acc2);background:linear-gradient(135deg,var(--accs),transparent 75%),var(--panel)}
.seg.lf{display:flex;flex-wrap:wrap;border-radius:18px;max-width:100%}
.seg.lf button{min-height:48px;white-space:normal;text-align:left}
.lcards{display:grid;gap:12px}
.lhead h2{margin:6px 0 2px}
.lcard h3{margin:0;font-size:1.125rem;overflow-wrap:anywhere;flex:1 1 200px}
.lcard p{margin:6px 0}
.lrisk{margin:4px 0 2px}
.lrisk summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warnbg);color:var(--ink);font-weight:600;font-size:0.8125rem;cursor:pointer;list-style:none}
.lrisk summary::-webkit-details-marker{display:none}
.lrisk summary::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--warn);color:var(--warn);font-size:0.6875rem;font-weight:700}
.lrisk summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lrisk[open] summary{border-color:var(--warn)}
.lrisk p{margin:8px 0 0;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);background:var(--warnbg);color:var(--ink);line-height:1.5}
.lrisk[open] p{animation:lrisk .2s ease}
@keyframes lrisk{from{opacity:0;transform:translateY(-4px)}}
.chip.mth{text-transform:none;letter-spacing:0;font:600 0.7813rem/1.25 var(--sans);white-space:normal}
.chip.mth svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lcard.locked{filter:grayscale(1)}
.lcard.locked h3::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:3px;border:2px solid var(--off)}
.lcard.copied{border-color:var(--ok)}
.lcard .verdict{display:flex;align-items:center;gap:8px}.lcard .verdict svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4}
@media (min-width:900px){.lcards{grid-template-columns:1fr 1fr}.lhead{grid-column:1/-1}}.lcards{align-items:start}.lcard{align-content:start}.lcard .stack{justify-items:start}.lcard .stack textarea,.lcard .stack .verdict{justify-self:stretch}

/* Cockpit (the plain layer's instrument panel, 2026-10-05): the 7Maps desk language (hardware faces, screws, ticks, LEDs)
   in both themes: a dark panel by night, a day panel in light. Gauges are SVG drawn by app.js; every state is a word plus a
   shape, colour only adds. Motion: needles, arcs, segments and bars sweep in through animations whose end state is the
   element's own style (the reduced-motion rule above turns every animation off and the final state shows). Sizes come
   from the viewBox and fixed boxes, so nothing shifts once drawn. Advanced details does not use any of this. */
:root{--ck-panel:linear-gradient(180deg,#ffffff,#f2f4f8);--ck-face:#fdfdfe;--ck-face2:#e8ecf3;--ck-bez:rgba(15,23,42,.14);--ck-tk:rgba(29,29,31,.3);--ck-tk2:rgba(29,29,31,.62);--ck-off:#cfd5e0;--ck-tray:#e9edf4}
@media (prefers-color-scheme:dark){:root{--ck-panel:linear-gradient(180deg,rgba(255,255,255,.035),transparent 140px),linear-gradient(180deg,#0c1326,#070b16);--ck-face:#0b1224;--ck-face2:#050913;--ck-bez:rgba(130,165,225,.22);--ck-tk:rgba(170,195,240,.3);--ck-tk2:rgba(205,222,255,.72);--ck-off:#222c44;--ck-tray:#03050b}}
.apps.cockpit{grid-template-columns:minmax(0,1fr);gap:18px}
.ckpt{position:relative;gap:16px;background:var(--ck-panel)}
.ckpt::before,.ckpt::after{content:"";position:absolute;top:10px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--ck-tk2),var(--ck-bez) 72%);opacity:.75}
.ckpt::before{left:10px}.ckpt::after{right:10px}
.app.ckpt:hover{transform:none;border-color:var(--line)}
.ck-top{display:flex;gap:12px;align-items:flex-start;min-width:0}
.ck-top .host{font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.ck-top .host:hover{color:var(--acc)}
.ck-top .nm{color:var(--mute);font-size:0.875rem;overflow-wrap:anywhere}
.ck-top .btn{flex:none}
.ck-top .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ck-body{display:grid;gap:16px;align-items:center;min-width:0}
@media (min-width:760px){.ck-body{grid-template-columns:196px minmax(0,1fr)}}
.gauges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
@media (min-width:560px){.gauges{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.ckpt .gauges{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ck-foot{font-size:0.8438rem}
/* a gauge tile */
.gauge{--c:var(--off);display:grid;justify-items:center;align-content:start;text-align:center;gap:2px;padding:12px 8px;border-radius:16px;border:1px solid var(--line);min-width:0;
  background:radial-gradient(120% 90% at 50% 0%,var(--ck-face),var(--ck-face2));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -10px 22px rgba(0,0,0,.07)}
.st-ok{--c:var(--ok)}.st-warn{--c:var(--warn)}.st-bad{--c:var(--bad)}.st-off{--c:var(--off)}
.g-t{font:650 0.9375rem/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.g-dial{width:100%;max-width:150px}
.g-dial svg{display:block;width:100%;height:auto;overflow:visible}
.g-w{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:650 0.9688rem/1.25 var(--sans);color:var(--ink);margin-top:-6px;max-width:100%}
.g-w span{overflow-wrap:anywhere}
.gi{width:17px;height:17px;flex:none;fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.g-n{font:500 0.7813rem/1.3 var(--sans);color:var(--mute);min-height:1.3em;overflow-wrap:anywhere}
.g-f{font:600 0.875rem/1.3 var(--sans);color:var(--ink);margin-top:4px}
.g-face{fill:none;stroke:var(--ck-face2);stroke-width:22;opacity:.7}
.g-zone{fill:none;stroke-width:3.4;stroke-linecap:round;opacity:.4}
.g-zone.on{opacity:1}
.z-ok{stroke:var(--ok)}.z-warn{stroke:var(--warn)}.z-bad{stroke:var(--bad)}
.g-track{fill:none;stroke:var(--line2);stroke-width:7;stroke-linecap:round}
.g-val{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:var(--o);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 50%,transparent));animation:g-fill 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes g-fill{from{stroke-dashoffset:100}}
.g-tk{fill:none;stroke:var(--ck-tk);stroke-width:1;stroke-linecap:round}.g-tk.mj{stroke:var(--ck-tk2);stroke-width:1.6}
.g-nd{transform-origin:60px 60px;transform:rotate(var(--a));animation:g-sweep 1.3s .1s cubic-bezier(.3,1.35,.5,1) both}
.g-nd path{fill:var(--ink)}.g-nd .g-tail{fill:var(--c)}
@keyframes g-sweep{from{transform:rotate(-120deg)}}
.g-hub{fill:var(--ink);stroke:var(--ck-face);stroke-width:2}
.g-mark{fill:var(--ink)}
.g-lock{fill:color-mix(in srgb,var(--c) 12%,transparent);stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.g-seg{fill:none;stroke:var(--ck-off);stroke-width:8}
.g-seg.lit{stroke:var(--c);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 55%,transparent));animation:g-lit .45s calc(.15s + var(--i,0) * 90ms) both}
@keyframes g-lit{from{stroke:var(--ck-off);filter:none}}
.g-shield{fill:color-mix(in srgb,var(--c) 14%,transparent);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.g-sh-ok{fill:none;stroke:var(--c);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.g-bezel{fill:var(--ck-face2);stroke:var(--ck-bez);stroke-width:2}
.g-lamp{fill:color-mix(in srgb,var(--c) 20%,var(--ck-face));stroke:var(--c);stroke-width:2.2;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--c) 55%,transparent));animation:g-on .6s .2s ease-out both}
.st-off .g-lamp{filter:none;fill:var(--ck-face)}
@keyframes g-on{from{fill:var(--ck-face);filter:none}}
.g-lamp-i{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* the big status dial */
.sdial{position:relative;width:156px;height:156px;flex:none;justify-self:center}
@media (min-width:760px){.ck-body .sdial{width:184px;height:184px}}
.sdial.sz-S{width:132px;height:132px}
.sdial.sz-L{width:220px;height:220px}.sdial.sz-L .sd-in b{font-size:1.375rem}.sdial.sz-L .sd-i{width:40px;height:40px}
@media (max-width:480px){.sdial.sz-S{width:108px;height:108px}}
.sdial.sz-S .sd-in b{font-size:0.875rem}.sdial.sz-S .sd-i{width:22px;height:22px}
.sdial>svg{width:100%;height:100%;overflow:visible}
.sdial,.g-dial{scroll-margin-top:96px}
.sd-bez{fill:var(--ck-face2);stroke:var(--ck-bez);stroke-width:1.5}
.sd-tk{fill:none;stroke:var(--ck-tk);stroke-width:1.2}
.sd-track{fill:var(--ck-face);stroke:var(--line2);stroke-width:6}
.sd-arc{fill:none;stroke:var(--c);stroke-width:6;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:60px 60px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent));animation:g-fill 1.2s .1s cubic-bezier(.2,.8,.2,1) both}
.sd-halo{fill:none;stroke:var(--c);stroke-width:1;opacity:0;transform-origin:60px 60px}
.sdial.live .sd-halo{animation:ping 3s ease-out infinite}
.sd-in{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;text-align:center;padding:0 21%}
.sd-i{width:30px;height:30px;fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sd-in b{font:700 1.0625rem/1.15 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.sdial.chg .sd-in{animation:sd-chg 1s ease-out 2}
@keyframes sd-chg{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}
/* warning lights */
.lamps-w{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px;min-width:0;container-type:inline-size}
.lamps-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;justify-content:space-between}
.lamps-t{font:650 0.9375rem/1.2 var(--sans)}
.lamps-h .dim{font-size:0.8438rem}
.lamps{list-style:none;margin:0;padding:6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border-radius:14px;background:var(--ck-tray);box-shadow:inset 0 2px 7px rgba(0,0,0,.14),0 0 0 1px var(--line)}
@container (min-width:460px){.lamps{grid-template-columns:repeat(6,minmax(0,1fr))}}
.lamps li{display:grid;min-width:0}
.lamp{--c:var(--warn);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:64px;padding:8px 4px;border-radius:10px;color:var(--mute);text-decoration:none;font:600 0.7813rem/1.2 var(--sans);text-align:center;overflow-wrap:anywhere}
.lamp>svg{width:24px;height:24px;fill:none;stroke:var(--dim);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.lamp.on{color:var(--ink);background:color-mix(in srgb,var(--c) 15%,var(--panel));box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent),0 0 14px color-mix(in srgb,var(--c) 32%,transparent);animation:lamp 2.4s ease-in-out 3;transition:transform .15s}
.lamp.on.bad{--c:var(--bad)}
.lamp.on>svg{stroke:var(--c);opacity:1;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 70%,transparent))}
.lamp.on:hover{transform:translateY(-1px)}
.lamp .lb{position:absolute;top:4px;right:4px;width:15px;height:15px}
@keyframes lamp{50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 80%,transparent),0 0 24px color-mix(in srgb,var(--c) 55%,transparent)}}
/* the site's page: the larger cockpit, the last 30 days, the updates as lights */
.gauge.sz-M .g-dial{max-width:170px}.gauge.sz-M .g-w{font-size:1.0313rem}
.ck-two{display:grid;gap:18px;border-top:1px solid var(--line);padding-top:14px;min-width:0}
@media (min-width:980px){.ck-two{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.ck-sec{display:grid;gap:8px;min-width:0;align-content:start}
.ck-sec h3{font-size:1rem}
svg.days{display:block;width:100%;height:56px}
svg.days rect{transform-box:fill-box;transform-origin:50% 100%;animation:bar .5s calc(var(--i,0) * 16ms) cubic-bezier(.2,.8,.2,1) both}
@keyframes bar{from{transform:scaleY(0)}}
.ck-ends{font-size:0.7813rem;margin-top:-4px}
.dlamps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 8px}
.dl{display:grid;justify-items:center;gap:4px;min-width:46px}
.dl-l{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--c) 16%,var(--ck-face));box-shadow:0 0 0 2px var(--c),0 0 10px color-mix(in srgb,var(--c) 35%,transparent);animation:pop .4s calc(.1s + var(--i,0) * 60ms) cubic-bezier(.2,.8,.2,1.3) both}
.dl.st-off .dl-l{box-shadow:0 0 0 2px var(--line2)}
.dl-l .gi{width:16px;height:16px}
.dl-d{font:600 0.75rem/1.2 var(--sans);color:var(--mute);white-space:nowrap}
.dlegend{gap:6px 14px;font-size:0.8125rem}
.dlegend span{display:inline-flex;align-items:center;gap:5px}
.dlegend .gi{width:14px;height:14px}
.dlegend span:nth-child(1){--c:var(--ok)}.dlegend span:nth-child(2){--c:var(--warn)}.dlegend span:nth-child(3){--c:var(--off)}
/* a check's page: the big gauge beside the words */
.ckhead.withg{grid-template-columns:minmax(0,1fr);align-items:center;gap:16px}
@media (min-width:720px){.ckhead.withg{grid-template-columns:minmax(0,1fr) 280px}}
.gauge.sz-L{width:100%;max-width:300px;justify-self:center;padding:16px 12px}
.gauge.sz-L .g-dial{max-width:240px}
.gauge.sz-L .g-t{font-size:1rem;margin-bottom:8px}.gauge.sz-L .g-w{font-size:1.1875rem}.gauge.sz-L .gi{width:20px;height:20px}.gauge.sz-L .g-n{font-size:0.875rem}
/* the owner's checks as lights with a sparkline */
.cktiles{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.cktiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cktiles .prow{height:100%}
.prow.ck .spark{width:76px;height:28px;flex:none;margin-left:auto;overflow:visible}
.spark polyline{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .sp-none{fill:none;stroke:var(--line2);stroke-width:2;stroke-dasharray:3 4}
@media (max-width:359px){.prow.ck .spark{display:none}}
@media (forced-colors:active){.gauge,.lamp,.sdial{border:1px solid CanvasText}.lamp.on{outline:3px solid Highlight}}
/* G11 (2026-10-05): the widget dashboard and the iOS patterns. Tiles are fixed boxes on a square-celled grid (container
   units inside every tile, so nothing grows it), the cockpit components shrink to fit; edit mode jiggles with the
   individual rotate property and slides neighbours with translate (FLIP), so the two never fight; reduced motion turns
   every animation off (the rule above) and the transitions with it. */
.dash{display:grid;gap:12px;min-width:0;container-type:inline-size}
.wbar{display:flex;align-items:center;gap:10px;min-width:0}
.wbar-t{font-size:1.375rem;letter-spacing:-.02em;margin-right:auto}
.wtip{font-size:.875rem;margin-top:-4px}
/* 2026-10-07: the site switcher (a row of pills, scrolls sideways on a phone) and the primary site picker in edit mode */
.wsw{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px;scroll-padding:0 16px;-webkit-overflow-scrolling:touch}
.wsw::-webkit-scrollbar{display:none}
.wsw button{appearance:none;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--mute);font:600 .8438rem/1 var(--sans);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.wsw button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:#fff}
.wsw button:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.wsw-p svg{width:13px;height:13px;fill:currentColor;stroke:none}
.wprim{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;font-size:.875rem;color:var(--mute);min-width:0}
.wprim span{white-space:nowrap}
.wprim select{min-height:36px;width:100%;min-width:0;text-overflow:ellipsis;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);padding:0 10px;font:inherit}
@media (forced-colors:active){.wsw button[aria-pressed="true"]{outline:2px solid Highlight}}
.wgrid{--cols:4;--gap:12px;--mspan:4;position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));grid-auto-flow:row dense;gap:var(--gap);margin:0;padding:0;min-width:0}
@container (max-width:299px){.wgrid{--cols:2;--mspan:2}}
@container (min-width:700px){.wgrid{--cols:8;--gap:14px}}
@container (min-width:1060px){.wgrid{--cols:12;--gap:16px}}
.wd-S{grid-column:span 2;grid-row:span 2}.wd-M{grid-column:span var(--mspan);grid-row:span 2}.wd-L{grid-column:span var(--mspan);grid-row:span 4}
.wd{position:relative;container-type:size;border-radius:22px;background:var(--ck-panel);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;min-width:0;transition:translate .28s cubic-bezier(.2,.8,.2,1),box-shadow .2s;animation:rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 30ms)}
.wd.flip{translate:var(--fx,0) var(--fy,0);transition:none}
.wd-b{position:absolute;inset:0;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:0}
.wd-go{position:absolute;inset:0;z-index:1;border-radius:inherit}
.wd-go:focus-visible{outline:3px solid var(--acc2);outline-offset:-3px}
.wd-b a,.wd-b button{position:relative;z-index:2}
.wd-site{font:600 .75rem/1.2 var(--sans);color:var(--mute);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.wd-h{font:650 .9375rem/1.2 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-txt{min-width:0;align-content:center;gap:4px}.wd-txt .wd-site{text-align:left}
.wd-txt .mute,.wd-txt .dim{font-size:.8125rem;line-height:1.3}
.wd .gauge{border:0;background:none;box-shadow:none;padding:0;flex:1 1 auto;min-height:0;gap:0;align-content:center}
.wd .g-t{font-size:.875rem}
.wd .g-dial{max-width:min(100%,calc((100cqh - 74px) * 1.32))}
.wd .g-w{font-size:.875rem;margin-top:-4px}.wd .g-w .gi{width:14px;height:14px}
.wd .g-n,.wd .g-f{display:none}
.wd-M .wd-b{flex-direction:row;align-items:center;gap:12px}
.wd-M .gauge{flex:0 0 46%}
.wd-M.wt-lights .wd-b,.wd-M.wt-updates .wd-b,.wd-M.wt-days .wd-b,.wd-M.wt-checks .wd-b,.wd-M.wt-attention .wd-b,.wd-M.wt-week .wd-b,.wd-M.wt-outage .wd-b,.wd-M.wt-github .wd-b,.wd-M.wt-stack .wd-b{flex-direction:column;align-items:stretch;gap:4px}
.wd .sdial,.wd .ring{width:min(100%,calc(100cqh - 36px));height:auto;aspect-ratio:1;align-self:center;flex:none}
.wd-M .sdial,.wd-M .ring{width:calc(100cqh - 20px)}
.wd-L .sdial,.wd-L .ring{width:min(50cqw,36cqh)}
.wd-L.wt-status .wd-b{align-items:stretch}.wd-L.wt-status .wd-txt{align-content:start;flex:1;min-height:0;overflow:hidden}
.wd .sdial .sd-in b{font-size:clamp(.75rem,9cqmin,1.125rem)}.wd .sdial .sd-i{width:clamp(16px,14cqmin,30px);height:clamp(16px,14cqmin,30px)}
.wd .ring .rc b{font-size:clamp(.8rem,10cqmin,1.4rem)}
.wd-lamps{display:flex;gap:3px;flex-wrap:wrap}
.wd-lamps .mini{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--ck-tray)}
.wd-lamps svg{width:13px;height:13px;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.wd-lamps .on{--c:var(--warn);background:color-mix(in srgb,var(--c) 18%,var(--panel));box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent)}.wd-lamps .on.bad{--c:var(--bad)}
.wd-lamps .on svg{stroke:var(--c);opacity:1}
.wd .lamps-w{border:0;padding:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.wd .lamps-h .dim{display:none}
.wd .lamps{flex:1;grid-auto-rows:1fr;padding:4px;gap:4px}
.wd .lamp{min-height:0;padding:2px;gap:2px;font-size:.6875rem}
.wd .lamp>svg{width:20px;height:20px}.wd .lamp .lb{width:11px;height:11px;top:2px;right:2px}
.wd .ck-sec{gap:4px;flex:1;min-height:0}.wd .ck-sec h3{font-size:.875rem}
.wd .histbox{padding:6px}.wd svg.days{height:calc(100cqh - 96px);min-height:24px;max-height:120px}
.wd .ck-ends{display:none}.wd .ck-sec .mute{font-size:.75rem}
.wd-M .dlegend{display:none}.wd .dl-l{width:26px;height:26px}.wd .dlamps{gap:6px}.wd .dl{min-width:36px}
.wlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-width:0}.wlist li{min-width:0}
.wlist a{display:flex;gap:8px;align-items:center;min-height:36px;padding:4px 10px;border-radius:10px;background:var(--panel2);color:var(--ink);text-decoration:none;font-size:.875rem;min-width:0}
.wlist a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wlist a .grow{flex:1 1 auto;min-width:4.5em}.wlist a .dim{flex:0 1 auto;max-width:58%}.wlist .gi{width:16px;height:16px}
.wlist a:hover{background:var(--accs)}
.wd-big{display:flex;align-items:center;gap:8px;font:650 1.0625rem/1.2 var(--sans);flex:1}.wd-big .gi{width:26px;height:26px}
.wd p.dim{font-size:.75rem;line-height:1.3}
.wd .skel.l{margin:auto 0}
/* the week (Screen Time) */
.week{display:flex;flex-direction:column;gap:4px;min-height:0;flex:1}
.wk-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:end}
.wk-n{font-size:1.75rem;letter-spacing:-.03em}
.wk-d{font:600 .75rem/1.2 var(--sans)}
svg.wkbars{display:block;width:100%;height:calc(100cqh - 112px);min-height:30px;max-height:150px}
svg.wkbars rect{transform-box:fill-box;transform-origin:50% 100%;animation:bar .5s calc(var(--i,0) * 40ms) cubic-bezier(.2,.8,.2,1) both}
.wk-L svg.wkbars{height:calc(100cqh - 214px)}
.wk-days{display:grid;grid-template-columns:repeat(7,1fr);font-size:.6875rem;text-align:center;margin-left:auto;width:calc(100% - 96px)}
.wk-L .wk-days{width:100%}.wk-L .wk-top{grid-template-columns:1fr}
.wk-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wk-g div{display:grid;gap:2px;padding:8px;border-radius:12px;background:var(--panel2)}.wk-g b{font-size:1.25rem}.wk-g span{font-size:.75rem;color:var(--mute)}
.wd-M .week p.dim{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Smart Stack */
.stk{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:clip}
.stk-p,.stk-in{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;overflow:clip}
.wd-M .stk-in:has(> .gauge){flex-direction:row}
.stk-d{display:flex;gap:4px;justify-content:center;padding-top:2px}.stk-d i{width:5px;height:5px;border-radius:50%;background:var(--line2)}.stk-d i.on{background:var(--ink)}
.stk-b{position:absolute;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:50%;border:0;background:color-mix(in srgb,var(--panel) 80%,transparent);color:var(--ink);display:grid;place-items:center;opacity:0;transition:opacity .2s;z-index:3}
.stk-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.stk-b.prev{left:-4px}.stk-b.next{right:-4px}
.stk:hover .stk-b,.stk-b:focus-visible{opacity:1}
/* edit mode */
.wgrid.editing .wd{animation:jig .3s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -67ms);cursor:grab;touch-action:none}
.wgrid.editing .wd-b{pointer-events:none}
.wgrid.editing{-webkit-user-select:none;user-select:none}
@keyframes jig{from{rotate:-.8deg}to{rotate:.8deg}}
.wd.drag{z-index:6;translate:var(--dx,0) var(--dy,0);scale:1.04;animation:none!important;transition:none;box-shadow:0 18px 44px rgba(0,0,0,.4);cursor:grabbing}
.wd-x{position:absolute;top:6px;left:6px;z-index:4;width:30px;height:30px;border-radius:50%;border:0;background:#636366;color:#fff;font:700 1.375rem/1 var(--sans);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.wd-mv{position:absolute;right:6px;bottom:6px;z-index:4;display:flex;gap:4px}
.wd-mv button{width:30px;height:30px;border-radius:50%;border:0;background:color-mix(in srgb,var(--panel) 85%,transparent);color:var(--ink);display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.wd-mv svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wd-x:focus-visible,.wd-mv button:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
/* the long-press menu */
.ctx{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.ctx-bg{position:absolute;inset:0;background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:fadein .2s both}
.ctx-in{position:relative;display:grid;gap:12px;justify-items:center;width:min(360px,100%);animation:pop .26s cubic-bezier(.2,.8,.2,1.2) both}
.ctx-pv.wd-S,.gal-pv .wd-S{width:170px;height:170px}.ctx-pv.wd-M,.gal-pv .wd-M{width:min(340px,100%);height:170px}.ctx-pv.wd-L,.gal-pv .wd-L{width:min(340px,100%);aspect-ratio:1}
.ctx-pv{animation:none}
.ctx-m{width:min(270px,100%);background:color-mix(in srgb,var(--panel) 90%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:14px;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,.3)}
.ctx-i{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 16px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:500 1rem/1.2 var(--sans);text-decoration:none;text-align:left;cursor:pointer}
.ctx-i:last-child{border-bottom:0}.ctx-i:hover,.ctx-i:focus-visible{background:var(--accs);outline:none}
.ctx-i svg{width:18px;height:18px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;order:2;margin-left:auto}
@keyframes fadein{from{opacity:0}}
/* bottom sheets */
.sheet-w{position:fixed;inset:0;z-index:85}
/* G19: plan icons (src/shared/plan-icons.mjs), the yearly chip, the seal card, getting set up */
.pi{display:inline-block;flex:none;vertical-align:middle}
.pi .pi-t{fill:#e6effb}.pi .pi-a{fill:var(--acc2)}.pi .pi-as{fill:none;stroke:var(--acc2);stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}
.pi .pi-w{fill:var(--panel);stroke:#3a3a40;stroke-width:2.25;stroke-linejoin:round}.pi .pi-n{fill:none;stroke:#3a3a40;stroke-width:2.25;stroke-linecap:round}.pi .pi-nf{fill:#86868b}
.pi .pi-k{fill:none;stroke:#fff;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-color-scheme:dark){.pi .pi-t{fill:#132640}.pi .pi-w{fill:var(--panel2);stroke:#c3cde0}.pi .pi-n{stroke:#c3cde0}.pi .pi-nf{fill:#8592a8}}
.chip.save{color:#fff;background:#137a3e;border-color:#137a3e;text-transform:none;font:650 .8125rem/1 var(--sans);letter-spacing:0;padding:6px 10px;justify-self:start;width:max-content}
@media (prefers-color-scheme:dark){.chip.save{color:#03140b;background:#34d399;border-color:#34d399}}
.popt{gap:12px}.popt .pt{display:grid;gap:2px;min-width:0}.popt .pt .small{font-size:.8125rem}
.popt .chip.save{margin-top:4px}
.opts .seg{margin-bottom:10px}
.amt{display:inline-block;margin-left:8px;font:600 .875rem/1.2 var(--sans);color:var(--ink)}
.addon{align-items:center}.addon .pi{align-self:start}
.upnote{position:relative}.upnote>.pi{float:left;margin:2px 12px 4px 0}
.seal-h{display:flex;gap:16px;align-items:center}
.seal-ring{width:104px;height:104px;flex:none}
.seal-ring svg{width:100%;height:100%;overflow:visible}
.seal-ring .sr-t{fill:none;stroke:var(--line2);stroke-width:8}
.seal-ring .sr-a{fill:none;stroke:var(--acc2);stroke-width:8;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:var(--o,100);transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1)}
.seal-ring.lv3 .sr-a{stroke:var(--ok)}
.seal-ring .sr-s{fill:var(--accs);stroke:var(--acc2);stroke-width:2.5;stroke-linejoin:round}
.seal-ring .sr-k{fill:none;stroke:var(--acc2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.seal-forms{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.seal-forms li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.sub-h{margin-top:6px}
@media (max-width:420px){.seal-h{flex-direction:column;align-items:flex-start}.seal-forms li{flex-wrap:wrap}}
.act .meter{margin:8px 0 4px}
.sum-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.sum-g>*{min-width:0}
@media (min-width:700px){.sum-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.act-l{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.act-l li{display:flex;gap:12px;align-items:center;min-height:52px;border-top:1px solid var(--line)}
.act-l li:first-child{border-top:0}
.act-l li>svg{width:18px;height:18px;fill:none;stroke:var(--dim);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.act-c{width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;flex:none}
.act-l li.ok .act-c{background:var(--ok);border-color:var(--ok)}
.act-c svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-color-scheme:dark){.act-c svg{stroke:#03140b}}
.act-l li.ok span{color:var(--mute)}
.act-a{display:grid;gap:2px;text-decoration:none;color:inherit;padding:8px 0}
.act-a b{color:var(--acc)}
.act.done{display:flex;gap:14px;align-items:center}
.act-ok{width:36px;height:36px;border-radius:50%;background:var(--okbg);display:grid;place-items:center;flex:none}
.act-ok svg{width:20px;height:20px;fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.seal-ring .sr-a{transition:none}}
/* An open overlay pins the page at its scroll offset (fix 2026-10-05, iPhone) */
html.locked{overflow:hidden}html.locked body{position:fixed;left:0;right:0;top:var(--lock-y,0);overflow:hidden}
/* Spotlight: a fixed overlay at the top of the screen, above the iPhone keyboard (visualViewport) */
.spot-w{position:fixed;inset:0;z-index:86}
.spot-w.on .sheet-bg{opacity:1}
.spot{position:absolute;left:0;right:0;top:calc(var(--vvt,0px) + env(safe-area-inset-top) + 8px);margin:0 auto;width:calc(100% - 16px);max-width:640px;max-height:calc(var(--vvh,100dvh) - env(safe-area-inset-top) - 16px);display:flex;flex-direction:column;background:var(--panel);color:var(--ink);border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.35);outline:none;opacity:0;translate:0 -8px;transition:opacity .18s,translate .22s cubic-bezier(.2,.85,.2,1)}
.spot-w.on .spot{opacity:1;translate:0 0}.spot-w.out .spot{opacity:0}.spot-w.out .sheet-bg{opacity:0}
.spot-h{display:flex;gap:10px;align-items:center;padding:12px 12px 8px;flex:none}
.spot-h .in{flex:1;min-width:0}
.spot-b{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 16px 16px}
@media (prefers-reduced-motion:reduce){.spot{transition:none;translate:none}}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.42);opacity:0;transition:opacity .25s}
.sheet-w.on .sheet-bg{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:640px;background:var(--panel);color:var(--ink);border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;transform:translateY(calc(100% + 24px));transition:transform .34s cubic-bezier(.2,.85,.2,1),height .3s;padding-bottom:env(safe-area-inset-bottom);outline:none}
.sheet.medium{height:62vh}.sheet.large{height:92vh}
.sheet-w.on .sheet{transform:translateY(var(--sy,0px))}
.sheet.dragging{transition:none}
.sheet-w.out .sheet{transform:translateY(100%)}.sheet-w.out .sheet-bg{opacity:0}
.sh-grab{display:grid;place-items:center;height:24px;cursor:grab;touch-action:none;flex:none}
.sh-grab span{width:38px;height:5px;border-radius:3px;background:var(--line2)}
.sh-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 10px;touch-action:none;flex:none}
.sh-h h2{font-size:1.25rem}
.sh-x{width:36px;height:36px;border-radius:50%;border:0;background:var(--bg2);color:var(--mute);display:grid;place-items:center;cursor:pointer;flex:none}
.sh-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.sh-b{flex:1;overflow:auto;padding:4px 16px 24px;overscroll-behavior:contain;display:grid;align-content:start;gap:12px}
.co-f{display:block;width:100%;height:calc(92vh - 170px);min-height:420px;border:0;border-radius:14px;background:#fff}
.gal-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gal-i{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;width:100%;min-height:60px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.gal-i b{font-size:1rem}.gal-i .mute{font-size:.875rem;grid-column:1}.gal-i svg{grid-row:1/3;grid-column:2;width:18px;height:18px;fill:none;stroke:var(--acc);stroke-width:2.2}
.gal-i:hover{border-color:var(--acc2)}
.gal-site{display:grid;gap:6px;font-weight:600}
.gal-pv{display:grid;place-items:center;padding:16px;border-radius:18px;background:var(--bg2)}
.gal-pv .wd{animation:none}
.back-l{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--acc);font:600 1rem var(--sans);padding:6px 0;min-height:44px;cursor:pointer;justify-self:start}
.back-l svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.wn-l{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.wn-l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.wn-l b{font-size:1.0625rem}.wn-l p{font-size:.9375rem;margin-top:2px}
.wn .btn{justify-self:stretch}
/* Spotlight */
.sp-r{display:grid;gap:14px}
.sp-s h3{font:650 .75rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.sp-s .wlist a{min-height:44px}
.srch{width:42px;height:42px;border-radius:50%;border:0;background:transparent;color:var(--mute);display:grid;place-items:center;flex:none;cursor:pointer;margin-left:4px}
.srch:hover{background:var(--accs);color:var(--ink)}
.srch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:859px){.srch{margin-left:auto}}
/* the live pill (Dynamic Island style; in the flow under the bar, sticky while scrolling) */
.livebar{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);margin:12px auto 0}
.livec{display:none;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border-radius:999px;border:0;background:#000;color:#fff;font:600 .8125rem/1.2 var(--sans);box-shadow:0 0 0 1px rgba(255,255,255,.12);cursor:pointer;flex:none;white-space:nowrap}
.livec .live-dot{width:8px;height:8px}.livec.warn .live-dot{background:#ffd60a;color:#ffd60a}
.top.live-c .livec{display:inline-flex;animation:island .35s cubic-bezier(.2,.9,.3,1.2) both}
.livec:focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
@media (max-width:859px){.livec{position:absolute;left:50%;translate:-50% 0}.top.live-c .ttl{opacity:0!important}}
@media (min-width:860px){.livec{margin-left:14px}}
.live-p{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px;border-radius:999px;border:0;background:#000;color:#fff;font:600 .875rem/1.2 var(--sans);box-shadow:0 8px 26px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1);cursor:pointer;animation:island .55s cubic-bezier(.2,.9,.3,1.25) both;transition:padding .25s}
.livebar.open .live-p{padding:10px 22px}
.live-dot{width:10px;height:10px;border-radius:50%;background:#ff453a;color:#ff453a;animation:beat 1.8s ease-out infinite}
.live-p.warn .live-dot{background:#ffd60a;color:#ffd60a}
.live-d{background:#000;color:#f2f2f7;border-radius:24px;padding:12px;width:min(420px,calc(100vw - 32px));display:grid;grid-template-columns:minmax(0,1fr);gap:8px;box-shadow:0 14px 40px rgba(0,0,0,.45);animation:pop .3s cubic-bezier(.2,.8,.2,1.15) both}
.live-d .wlist a{background:rgba(255,255,255,.1);color:#fff;min-height:44px}.live-d .dim{color:#c7c7cc}
@keyframes island{from{scale:.6;opacity:0}}
/* pull to refresh */
.ptr{position:fixed;top:calc(62px + env(safe-area-inset-top));left:50%;width:30px;height:30px;margin-left:-15px;z-index:28;opacity:0;translate:0 calc(var(--py,0px) - 34px);transition:opacity .2s,translate .25s;pointer-events:none}
.ptr.on{opacity:1}.ptr.on:not(.spin){transition:opacity .2s}
.ptr svg{width:100%;height:100%;fill:none}
.ptr path{stroke:var(--mute);stroke-width:2.4;stroke-linecap:round;transform-origin:12px 12px;rotate:calc(var(--k) * 45deg);opacity:calc(.22 + var(--k) * .1)}
.ptr.ready svg,.ptr.spin svg{scale:1.1}.ptr.spin svg{animation:spin .8s steps(8) infinite}
/* swipe actions on inbox lines */
.inbox{overflow-x:clip}
.msg{transition:translate .22s cubic-bezier(.2,.8,.2,1)}
.msg.swiping{translate:var(--sx,0) 0;transition:none}
.inbox{overflow-x:hidden;overflow-x:clip}
.swa{visibility:hidden;position:absolute;top:0;bottom:0;width:150px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);font:650 .875rem/1.2 var(--sans);color:#fff;opacity:0;transition:opacity .15s;pointer-events:none;padding:0 10px;text-align:center}
.swa.l{left:calc(100% + 8px);background:var(--ok)}.swa.r{right:calc(100% + 8px);background:var(--btn)}
.msg.sw-l .swa.l,.msg.sw-r .swa.r{opacity:.65;visibility:visible}.msg.sw-go .swa{visibility:visible}.msg.sw-go .swa{opacity:1}
/* large titles that collapse into the bar (phones) */
.top-in{position:relative}
.ttl{position:absolute;left:50%;translate:-50% 0;font:650 1rem/1.2 var(--sans);color:var(--ink);opacity:0;transition:opacity .2s;pointer-events:none;max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:859px){.top.collapsed .ttl{opacity:1}.top.collapsed .bt{opacity:0;transition:opacity .2s}}
/* View Transitions: a widget grows into its page */
.wd.vt-src{view-transition-name:grow}
.dhead,.ckhead{view-transition-name:grow}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
::view-transition-group(grow){animation-duration:.36s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
/* Apple-style controls */
.seg{background:color-mix(in srgb,var(--ink) 7%,transparent);border:0;border-radius:10px;padding:2px}
.seg button{border-radius:8px;transition:background .2s,box-shadow .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--panel);box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
@media (prefers-color-scheme:dark){.seg button[aria-pressed="true"]{background:#3a3a3c;color:#fff}}
select.in{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px;background-repeat:no-repeat}
@media (prefers-reduced-motion:reduce){.wgrid.editing .wd{animation:none!important;rotate:none}.wd,.sheet,.msg,.ptr,.live-p{transition:none!important}.top.live-c .livec{animation:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media (forced-colors:active){.wd,.sheet,.ctx-m,.live-p{border:1px solid CanvasText}}
/* Dynamic Type: on iPhone and iPad the page follows the system text size (font sizes are in rem). */
@supports (font:-apple-system-body) and (-webkit-touch-callout:none){html{font:-apple-system-body}}

/* ---------------------------------------------------------------- G13: the app at no cost (greyed features, Upgrade) */
/* What the plan does not include is drawn greyed (the dial without data, nothing lit) with a lock, the word "Guard Pro" and
   an Upgrade link; text keeps its usual contrast (only the drawing is faded). No new motion. */
.lk-i{display:inline-grid;place-items:center;flex:none}
.lk-i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.locked .g-dial svg,.locked .lamps{filter:grayscale(1);opacity:.42}
.locked .g-w{color:var(--mute)}
.lkw{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.lkw>.up{align-self:center}
.lkw.lkl{grid-column:1/-1}
.btn.up{gap:6px}
.btn.up svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lkbox{display:grid;gap:8px;padding:14px;border-radius:14px;border:1px dashed var(--line2);background:var(--panel2);min-width:0}
.lk-h{gap:8px;align-items:center;flex-wrap:wrap}.lk-h b{font-size:1rem}
.lkbox p{margin:0}
.lkcard .lkbox{border:0;background:none;padding:0}.lkcard .lk-h{display:none}
.upnote{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--accs);color:var(--ink)}
.upnote p{margin:0;flex:1 1 220px}
.msg .upnote{margin:2px 0 4px}
.gal-i.locked{border-style:dashed;color:var(--mute);cursor:pointer}
.gal-i.locked b{display:flex;align-items:center;gap:6px;color:var(--ink)}
.gal-i.locked .lk-i svg{grid-row:auto;grid-column:auto;width:16px;height:16px;stroke:var(--mute)}
.gal-i.locked .chip{grid-row:1/3;grid-column:2}
.siteflow pre.lines{margin:0;padding:10px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);white-space:pre-wrap;word-break:break-all;font:0.8125rem/1.5 var(--mono)}
.siteflow h3{font-size:1.125rem;margin:0}
/* inside a widget tile: the dial gives room to the Upgrade link; nothing grows the tile */
.wd .lkw{flex:1 1 auto;min-height:0;gap:2px}
.wd .lkw .gauge{flex:1 1 auto;min-height:0}
.wd .lkw .g-dial{max-width:min(100%,calc((100cqh - 112px) * 1.32))}
.wd .lkw>.up{min-height:44px;padding:8px 14px;font-size:.8125rem;flex:none}
.wd-M .lkw{flex:0 0 52%}
.wd .lkbox{border:0;background:none;padding:0;flex:1;align-content:center;gap:6px}
.wd .lkbox p{font-size:.8125rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wd-S .lkbox p{display:none}
@media (forced-colors:active){.lkbox,.upnote{border:1px solid CanvasText}}
.wd .lkw{overflow:hidden}
.wd .lkw .lamps-w{flex:1 1 0;min-height:0;overflow:hidden}
.wd .lkw.lkl>.up{margin-top:4px}
.siteflow h3[tabindex]:focus{outline:none}
.wd .lkw.lkl .lamps-w{flex:1 1 auto}.wd .lkw.lkl .lamps{min-height:0;overflow:hidden}
/* G14: one request flow for the human services (no payment): the service cards, the note, the plan card's guidance row */
.svc-pick{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.svc-pick legend{font-weight:600;font-size:0.875rem;margin-bottom:8px;padding:0}
@media (min-width:720px){.svc-pick{grid-template-columns:repeat(3,minmax(0,1fr))}.svc-pick legend{grid-column:1/-1}}
.svc-pick input{position:absolute;opacity:0;width:1px;height:1px}
.svc-c{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;min-width:0;transition:border-color .2s,box-shadow .2s,transform .2s}
.svc-c .stack{gap:4px;min-width:0}
.svc-c b{font-size:0.9375rem;line-height:1.3}
.svc-c .mute{font-size:0.8125rem;line-height:1.45;overflow-wrap:anywhere}
.svc-c .tico{flex:none;width:36px;height:36px;border-radius:12px}
.svc-c .tico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-c:hover{border-color:var(--acc2)}
.svc-pick input:checked+.svc-c{border-color:var(--acc2);box-shadow:0 0 0 1px var(--acc2),0 8px 24px var(--accs);background:var(--panel)}
.svc-pick input:focus-visible+.svc-c{outline:2px solid var(--acc2);outline-offset:2px}
.svc-c.off{opacity:.72}
.svc-c.off .tico{filter:grayscale(1)}
.reqnote{display:block;padding:12px 14px;border-radius:14px;border:1px dashed var(--line2);background:var(--panel2);font-size:0.875rem;line-height:1.5}
.guide{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:14px;border-radius:16px;background:var(--panel2);border:1px solid var(--line);margin-top:6px;min-width:0}
.guide .stack{gap:4px;min-width:min(100%,220px)}
.guide .tico{flex:none;width:40px;height:40px}
.guide .tico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reqdone{justify-items:center;text-align:center}
.reqdone h2[tabindex]:focus{outline:none}
@media (prefers-reduced-motion:reduce){.svc-c{transition:none}}
/* 2026-10-05: add-ons, sites set aside, the cost limit note, the alert channel */
.addons,.held{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.addon{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.addon .grow{min-width:min(100%,220px);display:grid;gap:4px}
.addon p{margin:0}
.addon .chip{justify-self:start}
.held li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere}
.held .grow{flex:1 1 160px;min-width:0;font-weight:600}
.capnote{grid-template-columns:auto 1fr;align-items:start;border-color:color-mix(in srgb,var(--warn,#b25000) 45%,var(--line))}
.capnote>svg{width:22px;height:22px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.capnote p{margin:4px 0 0}
/* G12a (2026-10-05): three continents and World view. The map is inline SVG in a fixed 2:1 box; the dots' words sit on it as
   text positioned in percent of that box (never colour alone: the time, Down or No data is written beside each dot). */
.geoline{display:flex;align-items:center;gap:8px;margin:0;color:var(--mute);font-size:.875rem;line-height:1.35}
.geo-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.geoline[data-geo="confirm"] .geo-i{color:var(--ok)}
.geodown{display:flex;gap:12px;align-items:flex-start}
.geodown>.geo-i{width:24px;height:24px;margin-top:2px}
.geodown.conf{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}.geodown.conf>.geo-i{color:var(--bad)}
.geodown.one{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}.geodown.one>.geo-i{color:var(--warn)}
.geodown p{margin:4px 0 0}
.geosoft{margin:6px 0 8px;font-size:.9063rem}
.wv{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.ckpt .wv{border-top:1px solid var(--line);padding-top:12px}
.wv-h{display:flex;align-items:center;gap:8px;min-width:0}
.wv-h b{font:650 .9375rem/1.2 var(--sans)}
.wv-h .wv-when{margin-left:auto;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wv-h .chip{margin-left:auto}
.wv-body{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.wv-map{position:relative;width:100%;aspect-ratio:2/1;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc2) 7%,transparent),transparent),var(--panel2);border:1px solid var(--line);overflow:hidden;flex:none}
.wv-svg{position:absolute;inset:0;width:100%;height:100%}
.wv-grid{fill:none;stroke:var(--line);stroke-width:.5}
.wv-land{fill:color-mix(in srgb,var(--mute) 22%,transparent);stroke:color-mix(in srgb,var(--mute) 35%,transparent);stroke-width:.6}
.wv-dot{fill:var(--c,var(--off));stroke:var(--panel);stroke-width:1.6}
.wv-dot.hollow{fill:var(--panel);stroke:var(--off);stroke-width:1.4;stroke-dasharray:2 1.6}
.wv-ring{fill:none;stroke:var(--c,var(--off));stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:wv-ping 2.6s ease-out 3;animation-delay:calc(var(--i,0) * .35s)}
.wv-ring.st-off{display:none}
@keyframes wv-ping{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.wv .st-ok{--c:var(--ok)}.wv .st-warn{--c:var(--warn)}.wv .st-bad{--c:var(--bad)}.wv .st-off{--c:var(--off)}
.wv-tag{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,9px);display:grid;justify-items:center;gap:0;padding:2px 6px;border-radius:8px;background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);font:600 .75rem/1.2 var(--sans);color:var(--ink);white-space:nowrap;pointer-events:none}
.wv-tag.s-l{transform:translate(calc(-100% - 7px),-50%)}.wv-tag.s-r{transform:translate(7px,-50%)}.wv-tag.s-b{transform:translate(-50%,8px)}
.wv-map{container-type:inline-size}
@container (max-width:259px){.wv-tag b{display:none}.wv-tag{padding:1px 4px;font-size:.6875rem}.wv-tag.s-l{transform:translate(calc(-100% - 5px),-50%)}.wv-tag.s-r{transform:translate(5px,-50%)}}
.wv-tag b{font:600 .6875rem/1.2 var(--sans);color:var(--mute)}
.wv-tag span{color:var(--c,var(--ink))}
.wv-tag.st-off span{color:var(--mute)}
.wv-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.wv-list li{display:flex;align-items:center;gap:8px;min-width:0;font-size:.875rem;color:var(--c,var(--ink))}
.wv-list li .grow{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wv-list li b{color:var(--ink);font-weight:650}
.wv-list li .dim{font-size:.75rem;white-space:nowrap}
.wv-list .gi{width:16px;height:16px;flex:none}
.wv.locked .wv-land{fill:color-mix(in srgb,var(--off) 14%,transparent)}
.wv.locked .wv-map{filter:saturate(.6)}
.wv-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wv-cta p{margin:0;flex:1 1 180px;font-size:.875rem}
@media (min-width:640px){.ckpt .wv.sz-M .wv-body,.card>.wv.sz-M .wv-body{flex-direction:row;align-items:center}.ckpt .wv.sz-M .wv-map,.card>.wv.sz-M .wv-map{flex:0 0 58%}.ckpt .wv.sz-M .wv-list,.card>.wv.sz-M .wv-list{flex:1}}
/* in a widget tile: the map fills what the title leaves; M puts the list beside it, L under it */
.wd.wt-world .wd-b{flex-direction:column;align-items:stretch;gap:0}
.wd .wv{flex:1 1 auto;gap:4px}
.wd .wv-body{flex:1 1 auto;min-height:0}
.wd .wv-map{width:auto;max-width:100%;height:auto;max-height:100%;align-self:center}
.wd-S .wv-map{width:min(100%,calc((100cqh - 30px) * 2))}
.wd-S .wv-tag{font-size:.6875rem;padding:1px 4px}
.wd-S .wv-cta p,.wd-S .wv-h .chip,.wd .wv-h .wv-when{display:none}
.wd-S .wv.locked .wv-map{width:min(100%,calc((100cqh - 74px) * 2))}
.wd-M .wv-body{flex-direction:row;align-items:center;gap:10px}
.wd-M .wv-map{flex:0 0 auto;width:min(58%,calc((100cqh - 36px) * 2))}
.wd-M .wv-list{flex:1;gap:3px}.wd-M .wv-list li{font-size:.8125rem}
.wd-M .wv.locked .wv-map{width:min(52%,calc((100cqh - 36px) * 2))}
.wd-M .wv-cta{position:absolute;right:10px;bottom:8px}.wd-M .wv-cta p{display:none}
.wd-L .wv-map{width:min(100%,calc((100cqh - 150px) * 2))}
.wd .wv-btn{min-height:32px;padding:6px 12px;font-size:.8125rem}
.wd-S .wv-cta{justify-content:center}
@media (prefers-reduced-motion:reduce){.wv-ring{animation:none;opacity:0}}
@media (forced-colors:active){.wv-dot{fill:CanvasText}.wv-dot.hollow{fill:Canvas}.wv-map{border-color:CanvasText}}

/* 2026-10-05: My subscription (plan choices in the change sheet, the payment banner) */
.opts{border:0;margin:0;padding:0;min-width:0}
.opts legend{font-weight:600;font-size:0.875rem;margin-bottom:8px;padding:0}
.opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;min-height:48px;transition:border-color .2s,background .2s}
.opt input{accent-color:var(--acc);width:20px;height:20px;flex:none;margin:0}
.opt:has(input:checked){border-color:var(--acc2);background:var(--accs)}
.opt:has(input:disabled){cursor:default;opacity:.75}
.opt:has(input:focus-visible){outline:2px solid var(--acc2);outline-offset:2px}
.chg li{animation:rise .4s both}
.paybar{flex-wrap:wrap}
.paybar .btn{flex:none}
#sub-plan .kv{margin-top:6px}
@media (prefers-reduced-motion:reduce){.chg li{animation:none}.opt{transition:none}}
/* ---------------------------------------------------------------- G14: the demo (/guard/app/demo; demo.js draws these) */
/* The banner stays at the top of every screen; on a wide screen it also stays in view while scrolling. On a phone the bar
   keeps a small "Demo" chip instead (the banner would cover a third of the screen), which scrolls back to the banner. */
@media (min-width:860px){html.demo .wrapb{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:29}}
.dtop{flex:none;margin-left:auto;border:0;cursor:pointer;font:700 0.6563rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--btn);padding:7px 10px;border-radius:999px;min-height:30px}
.dtop+.srch{margin-left:0}
@media (min-width:860px){.dtop{display:none}}
.demob{margin-top:10px;border-radius:18px;padding:10px 10px 10px 14px;display:grid;gap:8px;background:color-mix(in srgb,var(--panel) 90%,transparent);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);border:1px solid color-mix(in srgb,var(--acc2) 45%,transparent);box-shadow:var(--shadow)}
.demob-r{display:flex;align-items:center;gap:10px;min-width:0}
.demob .dchip{flex:none;font:700 0.6563rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--btn);padding:6px 9px;border-radius:999px}
.demob .dtxt{flex:1 1 auto;min-width:0;font:600 0.875rem/1.3 var(--sans);color:var(--ink)}
.demob .dx{flex:none;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:var(--mute);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:-6px -2px -6px 0}
.demob .dx:hover{background:var(--accs);color:var(--ink)}
.demob .dx svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.demob-a{display:flex;flex-wrap:wrap;gap:8px}
.demob-a .btn{min-height:40px;padding:8px 14px;font-size:0.8438rem}
.demob-a .btn svg{width:14px;height:14px;fill:currentColor;stroke:none}
.dstory{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.dstory .dtime{font:600 0.75rem/1 var(--mono);letter-spacing:.08em;color:var(--acc)}
.dstory .dline{font-size:0.9375rem;line-height:1.4;color:var(--ink)}
.dprog{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.dprog i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .5s linear}
.dsteps{display:flex;gap:4px}
.dsteps span{flex:1;height:3px;border-radius:3px;background:var(--line)}
.dsteps span.on{background:var(--acc2)}
.dnote{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 10px);z-index:60;width:min(440px,calc(100% - 24px));display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:22px;background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border:1px solid var(--line2);box-shadow:0 18px 50px rgba(0,0,0,.28);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transform:translate(-50%,-150%);transition:transform .5s cubic-bezier(.2,.9,.25,1.1)}
.dnote.on{transform:translate(-50%,0)}
.dnote .dn-i{flex:none;width:38px;height:38px;border-radius:10px;background:#05070d;display:flex;align-items:center;justify-content:center}
.dnote .dn-i svg{width:26px;height:26px}
.dnote .dn-b{display:grid;gap:2px;min-width:0}
.dnote .dn-h{display:flex;gap:8px;font:600 0.75rem/1.2 var(--sans);color:var(--dim)}
.dnote .dn-h b{color:var(--ink)}
.dnote .dn-t{font:600 0.9375rem/1.3 var(--sans)}
.dnote .dn-s{font-size:0.875rem;line-height:1.35;color:var(--mute)}
@media (min-width:860px){html.demo .wrapb{padding:0 24px}.dnote{left:auto;right:20px;top:76px;transform:translateX(130%)}.dnote.on{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.dnote,.dprog i{transition:none}}

/* ---------------------------------------------------------------- G12b: planned work, G12e: several values per check */
/* Planned work is the accent colour (calm, not an alarm); a word and a wrench, never colour alone. Targets 44 px and up. */
.chip.mw{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:var(--accs);text-transform:none;letter-spacing:0;font:600 0.7813rem/1.25 var(--sans);white-space:normal}
.chip.mw svg,.mwnow>svg,.mwline svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mwnow{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:var(--accs);color:var(--ink)}
.mwnow>svg{width:22px;height:22px;color:var(--acc);margin-top:2px}
.mwnow .stack{min-width:0;flex:1 1 200px}
.mwline{display:inline-flex;align-items:center;gap:6px;color:var(--acc);font-weight:600;font-size:0.8438rem;min-width:0}
.dim.mwline{color:var(--acc)}
.mwq{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.mwq .t{display:grid;gap:2px}.mwq .t span{color:var(--mute);font-size:0.9375rem}
.mwq .row{gap:8px}
.mwlist,.chlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mwlist li{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);min-width:0}
.mwlist li.on{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.mwlist li .stack{min-width:0;flex:1 1 180px;gap:2px}
.mwlist li b{overflow-wrap:anywhere}
.mwadd{border-top:1px solid var(--line);padding-top:12px}
.mwadd summary{cursor:pointer;font-weight:600;color:var(--acc);min-height:44px;display:flex;align-items:center}
.mwadd form{margin-top:8px}
.mwrow{gap:10px;align-items:flex-end}
.mwrow .field{flex:1 1 130px;min-width:0}
.mwdays{display:flex;flex-wrap:wrap;gap:6px}
.mwday{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);cursor:pointer;font-weight:600;font-size:0.875rem}
.mwday input{width:18px;height:18px;margin:0;accent-color:var(--btn)}
.mwday:has(input:checked){border-color:var(--acc);background:var(--accs);color:var(--acc)}
.flabel{font-weight:600}
.mwdeps{border-top:1px solid var(--line);padding-top:10px}
.tl li.mwi::before{border-color:var(--acc);background:var(--accs)}
.chrow{display:grid;gap:6px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);min-width:0}
.chhead{gap:10px;align-items:center;min-width:0}
.chhead b.grow{overflow-wrap:anywhere;min-width:0}
.chrow .limf label span{font-size:0.8438rem;font-weight:600}
.chrow .limf input.in{max-width:150px}
/* G15 + G12c: Check now, Check from this phone (and its quiet hint), Acknowledge, pause, the timeline */
.phbox[hidden]{display:none}
.phint{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 12px;padding:10px 14px;border-radius:14px;border:1px dashed var(--line2);color:var(--mute);font-size:0.9375rem;line-height:1.4}
.phint svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.phint .dim{flex-basis:100%}
.actc h3{margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--line)}
.actc .phl[hidden]{display:none}
.actc .btn svg,.ckacts .btn svg{flex:none}
.note-q{font-style:italic;color:var(--mute);overflow-wrap:anywhere}
textarea.note{min-height:84px}
.tl.acts li{animation:rise .35s both}
@media (prefers-reduced-motion:reduce){.tl.acts li{animation:none}}
/* ---------------------------------------------------------------- G12d/G16: history charts and reports */
.rp-entry .card-h{align-items:center}
.rp-mini{width:70px;height:24px;flex:none}.rp-mini rect.ok{fill:var(--ok)}.rp-mini rect.wn{fill:var(--warn)}.rp-mini rect.bd{fill:var(--bad)}.rp-mini rect.nd{fill:var(--line2)}
.rp-ctl{gap:14px}
.rp-seg{display:flex;flex-wrap:wrap;max-width:100%;border-radius:18px}
.rp-seg button{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.rp-seg button.lk{color:var(--dim)}
.rp-dates{align-items:flex-end}.rp-dates .field{min-width:0}.rp-dates input.in{max-width:180px}
.rp-acts{gap:10px}
.rp-cmp{display:inline-flex;align-items:center;gap:8px;font-size:0.875rem;color:var(--mute);cursor:pointer;min-height:44px}
.rp-cmp input{width:20px;height:20px;accent-color:var(--acc2)}
.zc-w{display:grid;gap:8px;min-width:0}
.zc-w h3{margin:0;font-size:1rem}
.zc-a{position:relative;height:180px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);touch-action:pan-y;cursor:crosshair;overflow:hidden}
.zc-a:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.zc{position:absolute;inset:0;width:100%;height:100%;display:block}
.zc .g{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.zc .ln{fill:none;stroke:var(--acc2);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.zc .ln.draw{animation:zc-in .7s ease both}
@keyframes zc-in{from{opacity:0;transform:translateY(6px)}}
.zc .pv{fill:none;stroke:var(--dim);stroke-width:1.6;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.zc .mx{fill:none;stroke:var(--warn);stroke-width:1.2;opacity:.6;vector-effect:non-scaling-stroke}
.zc .pt{fill:var(--acc2);vector-effect:non-scaling-stroke}
.zc-y{position:absolute;inset:6px auto 6px 8px;display:flex;flex-direction:column;justify-content:space-between;font-size:0.6875rem;color:var(--dim);font-variant-numeric:tabular-nums;pointer-events:none}
.zc-y span{background:var(--panel2);padding:0 3px;border-radius:4px}
.zc-sel{position:absolute;top:0;bottom:0;background:var(--accs);border-left:1px solid var(--acc2);border-right:1px solid var(--acc2);pointer-events:none}
.zc-cur{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--mute);pointer-events:none}
.zc-ax{display:flex;justify-content:space-between;color:var(--dim);font-size:0.8125rem;font-variant-numeric:tabular-nums}
.zc-read{margin:0;font-size:0.875rem;color:var(--mute);font-variant-numeric:tabular-nums;min-height:1.4em}
.zc-leg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:0.8125rem}
.zc-leg .k{display:inline-block;width:22px;height:0;border-top:2.5px solid var(--acc2)}.zc-leg .k.pv{border-top:2px dashed var(--dim)}.zc-leg .k.mx{border-top:1.5px solid var(--warn)}
.rp-list{margin:0;padding-left:20px;display:grid;gap:6px;overflow-wrap:anywhere}
.rp-list .chip{margin-left:6px}
.rp-shares{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rp-shares li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);min-width:0}
.rp-shares li .grow{min-width:0;overflow-wrap:anywhere}
pre.code{white-space:pre-wrap;word-break:break-all}
@media (prefers-reduced-motion:reduce){.zc .ln.draw{animation:none}}
/* ---------------------------------------------------------------- G12f/G12g: groups, tags, edit several, copy, suggestions, flows */
.chip.tag{text-transform:none;letter-spacing:0;font:600 0.8125rem/1.2 var(--sans);color:var(--ink);background:var(--panel2);gap:4px;padding:6px 6px 6px 11px;white-space:normal;overflow-wrap:anywhere}
.chip.tag>span:only-child{padding-right:5px}
.tag-x{appearance:none;border:0;background:transparent;color:var(--mute);border-radius:999px;min-width:44px;min-height:44px;margin:-12px -8px -12px -6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tag-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.tag-x:focus-visible{outline:2px solid var(--acc2);outline-offset:-6px}
.ckmore{margin-top:4px}
.grpc h2{margin:0;overflow-wrap:anywhere;min-width:0}
.bklist{gap:8px}
.bkrow{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);min-width:0}
.bkrow input{width:24px;height:24px;flex:none;accent-color:var(--acc)}
.bkrow label{cursor:pointer;min-width:0;overflow-wrap:anywhere}
.bkrow .dim{overflow-wrap:anywhere}
.bkprev{margin:0;padding-left:20px;display:grid;gap:6px;overflow-wrap:anywhere}
.dsclist{gap:12px}
.dsc{padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);display:grid;gap:8px;min-width:0}
.dsc b{font-size:1.0625rem;overflow-wrap:anywhere;min-width:0}
.dsc .mute{margin:0}
.flowl{counter-reset:fl}
.flowl li{position:relative}
#fl-card .choice .row,#grp-card .row{min-width:0}
#fl-card .choice label{overflow-wrap:anywhere;white-space:normal}
#cl-card input[type=checkbox]{width:24px;height:24px;accent-color:var(--acc);flex:none}
#cl-card label{overflow-wrap:anywhere;min-width:0}

/* 2026-10-06: the Agency plans: the link from Home, the all-sites overview and the white-label card. */
.ov-link{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-height:56px}
.ov-link svg{width:24px;height:24px;flex:none}
.ov-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.ov-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);text-decoration:none;color:inherit;min-height:56px;min-width:0}
.ov-row:hover,.ov-row:focus-visible{border-color:var(--acc)}
.ov-row .grow{min-width:0}.ov-row b,.ov-row .dim{overflow-wrap:anywhere}
.ov-row>svg{width:18px;height:18px;flex:none;opacity:.6}
.brandprev{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line);min-width:0}
.brandprev img{height:32px;width:auto;max-width:140px;object-fit:contain;border-radius:6px}
.brandprev b{overflow-wrap:anywhere}
/* 2026-10-07 (stage A2): the console (Clients, a client, Client access), the end client's header, the device cap screen */
body.console main{max-width:1320px}
body.console .top-in,body.console .wrapb{max-width:1320px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.cltable{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:640px}
.cltable th,.cltable td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cltable thead th{font:600 .75rem/1.2 var(--sans);color:var(--mute);text-transform:none;white-space:nowrap}
.cltable tbody th{font-weight:600}
.cltable tbody th a{color:inherit;text-decoration:none}
.cltable tbody th a:hover,.cltable tbody th a:focus-visible{text-decoration:underline;color:var(--acc)}
.cltable td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.cltable td.badn{color:var(--bad);font-weight:700}
.cltable .ck{width:44px}
.cltable input[type=checkbox]{width:20px;height:20px;accent-color:var(--acc2)}
.thb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:32px;border-radius:6px}
.thb:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
th[aria-sort=ascending] .thb::after{content:"\25B2";font-size:.6rem}
th[aria-sort=descending] .thb::after{content:"\25BC";font-size:.6rem}
.clacts{gap:8px;align-items:center;padding:6px 0 10px}
.clacts .dim{flex:1 1 200px}
select.in.small{min-height:36px;padding:6px 28px 6px 10px;font-size:.875rem;width:auto;max-width:220px}
.brand .aglogo{width:28px;height:28px;object-fit:contain;border-radius:6px;flex:none}
.devcap li{min-height:56px}
@media (max-width:640px){.cltable{min-width:560px;font-size:.875rem}}
/* 2026-10-08: the backup vault card on Home (vaultCard in app.js). The door's drawing rules, tokens and motion come from
   src/shared/vault-door.mjs vaultCss(), appended by scripts/build-guard-app.mjs; here only the card's layout. */
.vcard{grid-template-columns:84px minmax(0,1fr);grid-template-areas:"art hd" "bd bd";align-items:center;column-gap:16px;overflow:hidden}
.vcard .vt-stage{grid-area:art;width:84px}.vcard .vc-hd{grid-area:hd}.vcard .vc-bd{grid-area:bd}
.vcard .chip{justify-self:start;color:var(--acc);border-color:var(--accs);background:var(--accs)}
.vcard p{margin:0;font-size:.9375rem;line-height:1.45}
.vcard .row{flex-wrap:wrap;justify-content:space-between;margin-top:4px}
.vt-stage.still *{animation:none!important;transition:none!important}
@media (min-width:720px){.vcard{grid-template-columns:168px minmax(0,1fr);grid-template-areas:"art hd" "art bd";align-items:end;column-gap:28px;padding:22px 24px}.vcard .vc-bd{align-self:start}.vcard .vt-stage{width:168px;align-self:center}}

/* M4 (2026-10-07): the reverse trial's screens (scripts/guard-app/trial.js). The Pro badge, the 14-segment strip (fills as the
   days pass, never red), the first look, the welcome sheet's rows, the snapshot before sign-in. Motion is short and stops with
   reduced motion. */
.tslot{display:contents}
.chip.pro{color:var(--acc);border-color:color-mix(in srgb,var(--acc2) 45%,transparent);background:var(--accs);text-transform:none;letter-spacing:0;font:650 .8125rem/1 var(--sans);padding:6px 10px}
.chip.pro svg{width:14px;height:14px;fill:currentColor;stroke:none}
button.chip.pro.tap{cursor:pointer;min-height:44px;padding:0 14px;appearance:none}
.rtcard{display:grid;gap:12px}
.rtcard .row>.stack.tight,.stack.tight{gap:2px;display:grid}
.rtstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(10px,1fr));gap:4px;height:10px}
.rtstrip i{display:block;border-radius:999px;background:var(--line2);transform-origin:left;transition:background .4s}
.rtstrip i.on{background:var(--acc2)}
.rtstrip i.now{background:linear-gradient(90deg,var(--acc2),color-mix(in srgb,var(--acc2) 35%,transparent))}
.rtstrip i.dd{background:repeating-linear-gradient(135deg,var(--line2) 0 3px,transparent 3px 6px)}
.rtstrip.go i.on,.rtstrip.go i.now{animation:rtfill .5s cubic-bezier(.2,.8,.2,1) both}
.rtstrip i:nth-child(n){animation-delay:calc(var(--n,0) * 30ms)}
@keyframes rtfill{from{transform:scaleX(.2);opacity:.3}to{transform:none;opacity:1}}
.flook{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line2);border-radius:14px;padding:12px 14px;background:var(--panel2)}
.flook p,.flook b{margin:0}
.fl-i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accs);color:var(--acc)}
.fl-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flook.run .fl-i svg{animation:flspin 2.4s linear infinite}
@keyframes flspin{to{transform:rotate(360deg)}}
.welcome{text-align:left}
.wl-badge{justify-self:center;display:grid;place-items:center;width:96px;height:96px;border-radius:28px;background:var(--accs);margin:4px auto 0;animation:wlsettle .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes wlsettle{from{transform:translateY(-18px) scale(.85);opacity:0}to{transform:none;opacity:1}}
.wl-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wl-rows li{display:flex;gap:12px;align-items:flex-start;animation:rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(200ms + var(--i,0) * 90ms)}
.wl-i{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--okbg);color:var(--ok)}
.wl-i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wl-rows.prev .wl-i{background:var(--accs);color:var(--acc)}
.rtbar .btn.small{min-height:40px}
.upnote.offer{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.upnote.offer p{margin:0 0 6px}
.snap{display:grid;gap:12px;border:1px solid var(--line2);border-radius:var(--r);padding:16px;background:var(--panel2)}
.snap h2{margin:0;font-size:1.0625rem;overflow-wrap:anywhere}
.snap p{margin:0}
.snap-pro{gap:12px;margin-top:4px}
.snap-pro p{margin:0}
/* 2026-10-08: the page as a link preview, the response-time clock, a certificate that ends soon, what verifying opens */
.snap-prev{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;border:1px solid var(--line2);border-radius:calc(var(--r) - 4px);padding:10px;background:var(--panel)}
.snap-prev:not(:has(.snap-img)){grid-template-columns:minmax(0,1fr)}
.snap-img{width:96px;height:64px;object-fit:cover;border-radius:8px;background:var(--panel2)}
.snap-pt{display:grid;gap:3px;min-width:0}
.snap-pt b{font-size:0.9375rem;overflow-wrap:anywhere}
.snap-pt span{color:var(--mute);font-size:0.8438rem;line-height:1.35;overflow-wrap:anywhere}
.snap-pt small{color:var(--dim);font:600 0.6875rem/1.2 var(--mono)}
.snap-clk{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:calc(var(--r) - 4px);border:1px solid var(--line2)}
.snap-clk svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.snap-clk b{font-size:1.125rem;font-variant-numeric:tabular-nums}
.snap-clk span{font:600 0.6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-left:auto}
.snap-clk.ok{color:var(--ok);background:var(--okbg);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.snap-clk.warn{color:var(--warn);background:var(--warnbg);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.snap-clk.bad{color:var(--bad);background:var(--badbg);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.snap-clk.ok svg{animation:clk 2.4s ease-in-out 1}
@keyframes clk{0%{transform:rotate(-20deg)}60%{transform:rotate(8deg)}100%{transform:rotate(0)}}
.kv .snap-warn b{color:var(--warn)}
.snap-slot:empty{display:none}
.vgain{display:grid;gap:12px;border:1px dashed color-mix(in srgb,var(--acc) 55%,transparent);border-radius:var(--r);padding:16px;background:var(--accs)}
.vgain p{margin:0}
.vg-h{display:flex;align-items:center;gap:10px;color:var(--acc)}
.vg-h svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vg-h b{font-size:1rem}
.wl-rows.locked li{opacity:.78}
@media (prefers-reduced-motion:reduce){.snap-clk svg{animation:none!important}}
.plancard{display:grid;gap:10px}
.plancard h2{margin:0}
.plancard p{margin:0}
.pc-inc{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pc-inc li{display:flex;gap:12px;align-items:center;border:1px solid var(--line2);border-radius:calc(var(--r) - 4px);padding:10px 12px;background:var(--panel2)}
.pc-inc li .pi{width:32px;height:32px;flex:none}
.pc-inc li div{display:grid;gap:2px;min-width:0}
.how{margin:0;border-left:3px solid var(--acc2);padding-left:10px}
@media (prefers-reduced-motion:reduce){.wl-badge,.wl-rows li,.rtstrip.go i,.flook.run .fl-i svg{animation:none!important}}
/* 2026-10-07 (Lior): the sensors on Home: the line and "Browse all N sensors" when there are few; greyed with the lock without them. */
.ckbrowse{display:grid;gap:10px;margin:2px 0 6px}
.ckbrowse p{margin:0}
.btn.lockd{background:var(--line2);color:var(--mute)}
/* M4: an inbox line may carry the offer line and the no-cost actions: every part stays in the text column, and the severity bar
   runs along all of them (--rows, set per line). */
.msg>:not(.sev):not(.swa){grid-column:2}
.msg .sev{grid-row:span var(--rows,4)}
.msg .tslot{display:none}
/* T-083: Time display (the zone, the date and time formats; the screen is in the lazy module) */
.td-seg{display:flex;flex-wrap:wrap;border-radius:18px;max-width:100%}
.td-seg button{min-height:44px;white-space:normal;flex:1 1 auto;line-height:1.25}
.tdnow{display:grid;gap:2px}.tdnow .num{font-size:2.25rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tdlist{list-style:none;margin:0;padding:6px 0 0;max-height:340px;overflow:auto;display:grid;gap:2px;border-top:1px solid var(--line);overscroll-behavior:contain}
.tdz{appearance:none;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);padding:10px 12px;border-radius:12px;display:grid;gap:2px;cursor:pointer;font:inherit;min-height:44px}
.tdz b{overflow-wrap:anywhere;font-weight:600}.tdz:hover{background:var(--panel2)}
.tdz[aria-pressed="true"]{background:var(--panel2);box-shadow:inset 0 0 0 2px var(--acc2)}
@media (prefers-reduced-motion:no-preference){.tdz{transition:background .15s}}

/* ---------------------------------------------------------------- 2026-10-07: red and amber, the gauge sheets (gauge.js)
   Lior: "the problem indication is tiny; it must be marked in red". A gauge, light, status card or site in a problem state
   is red (sv-bad), one that needs a look amber (sv-warn): a tinted card, a coloured border, the status line in the colour
   with its shape, and a badge with the word ("Problem" / "Needs a look"): never colour alone. Red pulses three times (the
   app's reduced-motion rule turns every animation off). The hero, the status dials and chips follow the worst state. */
.st-problem{--c:var(--bad)}
.sv-bad{--sv:var(--bad)}.sv-warn{--sv:var(--warn)}
.wd.sv-bad,.wd.sv-warn,.gtap.sv-bad>.gauge,.gtap.sv-warn>.gauge{border:2px solid color-mix(in srgb,var(--sv) 75%,transparent);background:linear-gradient(color-mix(in srgb,var(--sv) 13%,transparent),color-mix(in srgb,var(--sv) 13%,transparent)),var(--ck-panel)}
.gtap.sv-bad>.gauge,.gtap.sv-warn>.gauge{background:linear-gradient(color-mix(in srgb,var(--sv) 13%,transparent),color-mix(in srgb,var(--sv) 13%,transparent)),radial-gradient(120% 90% at 50% 0%,var(--ck-face),var(--ck-face2))}
.sv-bad .g-w,.sv-warn .g-w,.sv-bad .wd-txt .chip,.sv-warn .wd-txt .chip{color:var(--sv)}
.sv-bad .g-w .gi,.sv-warn .g-w .gi{stroke:var(--sv)}
.sv-bad .g-w,.sv-warn .g-w{font-weight:750}
.svb{display:inline-flex;align-items:center;gap:4px;align-self:center;flex:none;max-width:100%;font:700 .6875rem/1.1 var(--sans);letter-spacing:.01em;padding:3px 8px;border-radius:999px;background:var(--sv,var(--bad));color:var(--panel);white-space:nowrap}
.svb.bad{--sv:var(--bad)}.svb.warn{--sv:var(--warn)}
.svb .gi{width:12px;height:12px;stroke:currentColor;stroke-width:2.6}
.wd .svb{margin:0 auto 2px}.wd .wd-txt .svb{margin:0 0 2px;align-self:flex-start}
.wd.sv-bad .g-dial,.wd.sv-warn .g-dial{max-width:min(100%,calc((100cqh - 96px) * 1.32))}
.sv-bad::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;animation:svp 2.4s ease-in-out 3}
@keyframes svp{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 38%,transparent),0 0 18px color-mix(in srgb,var(--bad) 30%,transparent)}}
.gtap{position:relative;display:grid;gap:6px;justify-items:stretch;align-content:start;padding:0;border:0;margin:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;border-radius:16px;min-width:0}
.gtap>.gauge{height:100%}.gtap:hover>.gauge{border-color:var(--line2)}
.gtap:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
.gtap .svb{justify-self:center}
.hero.home.hv-down h1{color:var(--bad)}.hero.home.hv-attention h1{color:var(--warn)}
.hero.home h1 .hi{width:.85em;height:.85em;vertical-align:-.06em;margin-right:.3em;stroke:currentColor}
.sumring.st-problem{--c:var(--bad)}
.redbar{position:sticky;top:calc(env(safe-area-inset-top) + 64px);z-index:20;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 16px;border:0;border-radius:16px;background:var(--bad);color:var(--panel);font:650 .9375rem/1.3 var(--sans);text-align:left;cursor:pointer;box-shadow:0 8px 24px color-mix(in srgb,var(--bad) 35%,transparent)}
.redbar .gi{width:22px;height:22px;stroke:currentColor}
.redbar b{flex:none;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--panel) 22%,transparent);font-size:.8125rem;white-space:nowrap}
.redbar:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.redbar .grow{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* the sheets: a bottom sheet on a phone, a side panel from 900 px */
@media (min-width:900px){
  .sheet.side{left:auto;right:0;top:0;bottom:0;margin:0;width:min(480px,100vw);max-width:none;height:auto!important;border-radius:22px 0 0 22px;transform:translateX(calc(100% + 24px))}
  .sheet-w.on .sheet.side{transform:none}.sheet-w.out .sheet.side{transform:translateX(100%)}
  .sheet.side .sh-grab{display:none}
}
.gs{display:grid;gap:16px;padding-bottom:12px}
.gs-top{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--panel2)}
.gs-top.sv-bad,.gs-top.sv-warn{border:2px solid color-mix(in srgb,var(--sv) 70%,transparent);background:linear-gradient(color-mix(in srgb,var(--sv) 12%,transparent),color-mix(in srgb,var(--sv) 12%,transparent)),var(--panel2)}
.gs-g{flex:0 0 112px;max-width:112px}.gs-g .gauge{padding:6px 4px;border:0;background:none;box-shadow:none}.gs-g .g-t,.gs-g .g-n,.gs-g .g-f,.gs-g .g-w{display:none}
.gs-st{display:flex;align-items:center;gap:8px;margin:0;font-size:1.0625rem}.gs-st .gi{width:20px;height:20px}
.gs-top.sv-bad .gs-st,.gs-top.sv-warn .gs-st{color:var(--sv)}.gs-top.sv-bad .gs-st .gi,.gs-top.sv-warn .gs-st .gi{stroke:var(--sv)}
.gs-top .svb{align-self:flex-start}
.gs-top .dim{margin:0}
.gs-sec{display:grid;gap:8px}.gs-sec h3{margin:0;font-size:1rem}.gs-sec p{margin:0}
.gs-why{margin:0;padding-left:20px;display:grid;gap:4px}
.gs-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gs-steps li{display:flex;gap:10px;align-items:flex-start}
.gs-steps li>b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accs);color:var(--acc);font-size:.8125rem}
.gs-act{gap:8px}
.gs-ok{display:flex;align-items:center;gap:8px;margin:0;font-weight:650;color:var(--ok)}.gs-ok .gi{--c:var(--ok)}
.gs-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gs-list>li{display:grid;gap:6px;padding:12px 14px;border-radius:16px;border:2px solid color-mix(in srgb,var(--sv) 70%,transparent);background:linear-gradient(color-mix(in srgb,var(--sv) 10%,transparent),color-mix(in srgb,var(--sv) 10%,transparent)),var(--panel2)}
.gs-list .gs-st{color:var(--sv);font-size:1rem;flex-wrap:wrap}.gs-list .gs-st .gi{stroke:var(--sv)}.gs-list p{margin:0}
.gs-list .btn{justify-self:start}
.gs-got{width:100%}
@media (forced-colors:active){.svb,.redbar{border:1px solid CanvasText}.wd.sv-bad,.wd.sv-warn{border:3px solid CanvasText}}
.rbslot{min-height:52px}
.hero.home h1{overflow-wrap:anywhere}
.gs-top .svb{justify-self:start;width:max-content}
/* T-086: Check everything now (check.js). The button on a site's card, in an alert and on the site page; the run's sheet:
   the overall ring (n of N, the worst colour so far), every gauge and check waiting (dimmed), running (a pulsing scan
   ring) or landed on its result (red = problem, amber = needs a look, each with its shape and word). */
.cab{gap:6px}.cab svg{width:15px;height:15px}
.wd .cab{padding:4px 10px;font-size:.8rem;min-height:28px}
.ca-top{display:flex;gap:16px;align-items:center}
.ca-host{overflow-wrap:anywhere}
.ca-ring{--c:var(--acc2);--p:0;position:relative;width:100px;height:100px;flex:none}
.ca-ring.st-ok{--c:var(--ok)}.ca-ring.st-warn{--c:var(--warn)}.ca-ring.st-bad{--c:var(--bad)}.ca-ring.st-off{--c:var(--off)}
.ca-ring svg{width:100%;height:100%;overflow:visible}
.ca-tr{fill:none;stroke:var(--line2);stroke-width:8}
.ca-arc{fill:none;stroke:var(--c);stroke-width:8;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p));transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset .45s cubic-bezier(.2,.8,.2,1),stroke .3s}
.ca-scan{fill:none;stroke:var(--c);stroke-width:2;opacity:0;transform-origin:60px 60px}
.ca-ring:not(.end) .ca-scan{animation:ca-ping 1.4s ease-out infinite}
.ca-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.ca-n{font-size:1.02rem;font-variant-numeric:tabular-nums;white-space:nowrap}.ca-w{font-size:.66rem;color:var(--mute);max-width:66px;margin:0 auto;line-height:1.15}
.ca-ring.end .ca-w{color:var(--c);font-weight:600}
@keyframes ca-ping{0%{transform:scale(.86);opacity:.55}100%{transform:scale(1.08);opacity:0}}
.ca-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ca-it{--sv:var(--off);display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);transition:opacity .3s,border-color .3s}
.ca-it.is-wait{opacity:.42}
.ca-it.is-run{--sv:var(--acc2);border-color:color-mix(in srgb,var(--acc2) 45%,transparent)}
.ca-it.st-ok{--sv:var(--ok)}.ca-it.st-warn{--sv:var(--warn);border:2px solid var(--warn)}.ca-it.st-bad{--sv:var(--bad);border:2px solid var(--bad)}
.ca-it.land{animation:ca-land .42s cubic-bezier(.2,.8,.2,1)}
@keyframes ca-land{0%{transform:scale(.96);opacity:.5}60%{transform:scale(1.02)}100%{transform:none;opacity:1}}
.ca-dot{--c:var(--sv);width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%}
.ca-dot .gi{width:20px;height:20px;stroke:var(--sv)}
.ca-sr{width:22px;height:22px;fill:none;stroke:var(--sv);stroke-width:2;opacity:.6}
.ca-it.is-run .ca-sr{stroke-dasharray:14 43;animation:spin 1s linear infinite;opacity:1}
.ca-it.is-run .ca-dot{animation:ca-beat 1.4s ease-out infinite}
@keyframes ca-beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc2) 55%,transparent)}80%,100%{box-shadow:0 0 0 8px transparent}}
.ca-tx{display:grid;gap:2px;min-width:0}.ca-tx b{overflow-wrap:anywhere}
.ca-wd{font-size:.86rem;color:var(--sv);font-weight:600}.ca-it.is-wait .ca-wd,.ca-it.is-run .ca-wd{color:var(--mute);font-weight:400}
.ca-ln{font-size:.82rem;color:var(--mute)}
.ca-st{margin:0;color:var(--mute)}
@media (max-width:420px){.ca-list{grid-template-columns:1fr}.ca-top .mute{font-size:.9rem}}
@media (max-width:330px){.ca-top{flex-direction:column;align-items:flex-start}}
@media (forced-colors:active){.ca-it.st-warn,.ca-it.st-bad{border:3px solid CanvasText}}
.vnf{display:grid;gap:8px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warnbg);border-radius:calc(var(--r) - 4px);padding:12px 14px}
.vnf[hidden]{display:none}
.vnf b{color:var(--warn)}
.vnf ol{margin:0;padding-left:20px;display:grid;gap:6px}
.vnf p{margin:0}
.vnf a{overflow-wrap:anywhere}
/* 2026-10-08 (Lior): the first site, a bold card with the steps on a rail beside it */
.card.ob{border:1.5px solid var(--acc);background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 16%,var(--panel)) 0%,var(--panel) 55%);box-shadow:0 0 0 4px var(--accs)}
.card.ob>h2{color:var(--acc)}
.obg{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:start}
.obbox{min-width:0;display:grid;gap:14px}
.obr{list-style:none;margin:0;padding:0;display:grid;gap:0;position:sticky;top:12px}
.obr li{position:relative;display:flex;gap:10px;align-items:flex-start;padding:0 0 22px;color:var(--dim);font-size:0.875rem;line-height:1.3}
.obr li:last-child{padding-bottom:0}
.obr li::before{content:"";position:absolute;left:13px;top:28px;bottom:2px;width:2px;background:var(--line2)}
.obr li:last-child::before{display:none}
.obr .obn{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line2);font:700 0.8125rem/1 var(--mono);background:var(--panel)}
.obr li span:last-child{padding-top:5px}
.obr li.cur{color:var(--ink);font-weight:650}
.obr li.cur .obn{border-color:var(--acc);background:var(--acc);color:#fff;box-shadow:0 0 0 4px var(--accs)}
.obr li.done{color:var(--mute)}
.obr li.done .obn{border-color:var(--ok);color:var(--ok)}
.obr li.done::before{background:var(--ok)}
.obr .obb{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:flex-start;width:100%;border-radius:8px}
.obr .obb:not(:disabled){cursor:pointer}
.obr .obb:not(:disabled):hover span:last-child{text-decoration:underline}
.obr .obb:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.obnav{gap:6px}
@media (max-width:719px){.obg{grid-template-columns:1fr;gap:14px}.obr{position:static;display:flex;gap:6px;overflow-x:auto}.obr li{flex:1 1 0;flex-direction:column;align-items:center;text-align:center;padding:0;font-size:0.75rem;min-width:70px}.obr li::before{left:calc(50% + 18px);right:calc(-50% + 18px);top:13px;bottom:auto;width:auto;height:2px}.obr li span:last-child{padding-top:0}.obr li{min-width:0}.obr .obb{flex-direction:column;align-items:center;gap:6px}}
.addon .amt-was{margin-left:8px;font-weight:400;color:var(--mute);text-decoration:line-through}
.addon .amt-was + .amt{margin-left:6px}
.addon .amt-now{display:block;margin-top:4px;color:var(--acc);font-size:0.8438rem;line-height:1.35}
/* 2026-10-08 (backup vault V5, vault.js): the Vault gauge (a ring, a shape and one word), the card rows, the streak, restore. */
.vg{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;flex:none;--c:var(--off)}.vg.big{width:76px;height:76px}
.vg svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.vg-t{fill:none;stroke:var(--line);stroke-width:4}.vg-a{fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round;stroke-dasharray:100 100}
.vg-new .vg-a{stroke-dasharray:18 100}.vg-check .vg-a{stroke-dasharray:66 100}.vg-risk .vg-a{stroke-dasharray:33 100}
.vg-safe{--c:var(--ok)}.vg-check{--c:var(--warn)}.vg-risk{--c:var(--bad)}.vg .vg-i{width:18px;height:18px;color:var(--c)}.vg.big .vg-i{width:24px;height:24px}
.vg-w{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);font-size:0.6875rem;font-weight:700;color:var(--c);white-space:nowrap}.vg-new .vg-w,.vg-new .vg-i{color:var(--mute)}
.vbox .row{gap:14px;align-items:center}.vbox .vg{margin-bottom:16px}.vb-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vb-row{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;padding:6px 0}.vb-row .stack{gap:2px;min-width:0}
.vb-pr{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--panel2);margin-top:6px}.vb-pr .stack{gap:3px}
.vb-up{margin-top:6px;gap:8px}.vb-more{gap:8px;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}.vb-setup{gap:8px}
.vb-alt{gap:8px;margin-top:4px;border-top:1px solid var(--line);padding-top:10px}.vb-manual{gap:8px}.vb-opt{gap:6px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--panel2)}.vb-opt h3{margin:0;font-size:0.9375rem}.vb-opt .row{gap:8px}
.vb-st{display:flex;flex-wrap:wrap;gap:4px;color:var(--ok)}.vb-st .gi{width:16px;height:16px}
.vr-dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.vr-d{appearance:none;display:grid;gap:2px;text-align:left;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:12px;padding:10px 12px;font:inherit;cursor:pointer;min-height:44px}
.vr-d[aria-checked="true"]{border-color:var(--acc);box-shadow:0 0 0 2px var(--accs)}.vr-modes{gap:8px;margin-bottom:12px}.vr-out{gap:8px}.vr-out h3{margin:8px 0 0;font-size:0.9375rem}
@media (prefers-reduced-motion:no-preference){.vg-a{transition:stroke-dasharray .6s ease}}

/* 2026-10-14: Home, calm at the front (Marty's direction A; docs/features/home-calm.md). The status block (#hs) and the plan
   line sit on the page's own background: no card, no border, no shadow; the dashboard below keeps its raised tiles, so the eye
   reads "sentence first, instruments below". Every row and button is at least 44 px; a state is a word and a shape. */
#hs{padding:4px 2px 2px}
#hs h1{font-size:1.75rem;line-height:1.2;font-weight:650;letter-spacing:-.02em}
#hs .sub{font-size:.9375rem;margin:0}
#hs .upd:not(.stale){display:none}
#hs:focus{outline:none}
@media (max-width:520px){.hero.home .sumring{width:112px;height:112px}}
#hs>.hs-a{grid-column:1/-1;min-width:0}
@media (min-width:521px){#hs>.hs-a{grid-column:2}}
#hs>.hs-a>.btn{justify-self:start}
#hs .stack>*{min-width:0}#hs .flook :is(p,b){overflow-wrap:anywhere}
#hs .btn+.cab{background:transparent;color:var(--acc);box-shadow:inset 0 0 0 1px var(--line2)}
.hrows{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px;min-width:0}
.hrows li{min-width:0}
.hrow{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 12px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer}
.hrow .gi{width:20px;height:20px;stroke:var(--sv)}
.hrow b{font-weight:600;font-size:.9375rem}
.hrow .dim{font-size:.8125rem;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow>svg:last-child{width:18px;height:18px;flex:none;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hrow:hover{border-color:var(--acc2)}
/* The ring: drawn once a session; a redraw is still, a new state redraws the arc and a red arrival pulses once. Nothing loops on
   Home while all is good (hs-calm): no halo, no live dot, no spinning mark. */
.sumring .sr-halo{animation:none;opacity:0}
.sumring.still .sr-arc{animation:none;stroke-dashoffset:0}
.sumring.chg .sr-arc{animation-duration:.6s;animation-delay:0s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
.sumring.chg.st-down .sr-halo{opacity:.5;animation:ping 1s ease-out 1}
.sumring circle{transition:stroke .3s ease,fill .3s ease}
#hs h1.chg{animation:hsx .2s ease-out both}
@keyframes hsx{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}
.hs-calm :is(.m-ring,.sd-halo,.ring.live .ro,.live .dot){animation:none!important}
/* .rise plays on the first Home of a session only, and shorter; a redraw (pull to refresh, coming back) is instant. */
main:has(>#hs) .rise{animation-duration:.3s}
main:has(>#hs.still) .rise{animation:none}
.ibanner.still .iico svg{animation:none}
/* The needles sweep once a session, when the grid first comes into view. */
.wgrid.wait :is(.g-val,.g-nd,.g-seg.lit,.sd-arc){animation-play-state:paused}
.wgrid.still :is(.g-val,.g-nd,.g-seg.lit,.sd-arc){animation:none}
/* The red bar: not while the status block is in view; once it scrolls away it floats under the top bar (no layout shift). */
.hs-on .rbslot{min-height:0}
.hs-on .redbar{position:fixed;left:16px;right:16px;margin:0 auto;max-width:1168px;width:auto;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.hs-on.hs-away .redbar{visibility:visible;opacity:1;transform:none;transition:opacity .2s ease,transform .2s ease}
.livec .gi{width:14px;height:14px;stroke:currentColor}
.livec.ok{background:var(--panel);color:var(--ok);box-shadow:0 0 0 1px var(--line2)}.livec.off{background:var(--panel);color:var(--mute);box-shadow:0 0 0 1px var(--line2)}
.livec.bad .gi{stroke:#ff6b63}.livec.warn .gi{stroke:#ffd60a}
/* The plan line: one row on the background, hairlines above and below, never a card or a colour block. */
.planl{display:grid;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2px 0}
.planl>.row{gap:8px}
.pl-b{appearance:none;flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 2px;border:0;background:none;color:var(--ink);font:500 .9375rem/1.3 var(--sans);text-align:left;cursor:pointer}
div.pl-b{cursor:default}
.pl-b>svg:first-child{width:22px;height:22px;flex:none;fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round}
.pl-b>svg.pi{stroke:none}
.pl-b>svg:last-child:not(.pi){width:18px;height:18px;flex:none;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round}
.pl-b .rtstrip{height:4px;gap:2px;margin-top:4px}
.planl .link{min-height:44px;padding:0 4px;flex:none}
.pl-t{padding:0 2px 12px}.pl-t p{margin:0;font-size:.9375rem}.pl-t .btn{justify-self:start}
/* A tip (app.js tip): the full guidance the first time, then one quiet line with a "?" that opens it in a sheet. */
.tip{display:grid;gap:10px;padding:14px 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tip>.btn{justify-self:start}
.tip>.row b,.tip-l b{font-size:1rem;font-weight:600}
.tip p{margin:0}
.tip-l{appearance:none;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 2px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.tip-l .dim,.tip>.row .dim{font-size:.8125rem}
.tip-i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--accs);color:var(--acc)}
.tip-i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tip-l>svg:last-child{width:18px;height:18px;flex:none;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round}
.tip-q{appearance:none;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--acc);font:700 .875rem/1 var(--sans)}
button.tip-q{position:relative;cursor:pointer}button.tip-q::before{content:"";position:absolute;inset:-8px}
.tip-l.done .tip-i{background:var(--okbg);color:var(--ok)}
.tip-sh .card,.tip .card{box-shadow:none}
.fl-l{gap:8px}.fl-l .dim{font-size:.875rem}
/* For you: after the dashboard, a plain list of rows. The footer line closes Home. */
.foryou{display:grid;gap:4px}
.foryou h2{font-size:1.125rem;margin:0 0 4px}
.fy-l{display:grid}
.hfoot{display:grid;justify-items:center;padding:4px 0 0}
.vcard.vsh{display:block}.vcard.vsh .vt-stage{width:120px;margin:0 auto}
button.wd-go{appearance:none;border:0;background:none;padding:0;cursor:pointer}
.hskel{height:48px;border-radius:12px}
@media (forced-colors:active){.hrow,.tip-q{border:1px solid CanvasText}}
/* the Connect sheet (2026-10-16, Lior: "an interface like Supabase's Connect"): the way tiles, option rows (label and help
   on the left, the control on the right), numbered steps on a rail, code blocks with a copy button, the live last step */
@media (min-width:900px){.sheet.side.wide{width:min(720px,100vw)}}
.cn{display:grid;gap:18px;padding-bottom:12px}
.cn-ways{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.cn-way{appearance:none;border:0;border-left:1px solid var(--line2);background:var(--panel2);color:var(--mute);padding:14px 10px;display:grid;justify-items:center;gap:4px;text-align:center;cursor:pointer;min-height:84px;transition:background .2s,color .2s,box-shadow .2s}
.cn-way:first-child{border-left:0}
.cn-way svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cn-way b{color:var(--ink);font-size:.9375rem;font-weight:650}
.cn-way span{font-size:.8125rem}
.cn-way[aria-pressed="true"]{background:var(--panel);color:var(--acc);box-shadow:inset 0 0 0 2px var(--acc2);border-radius:13px}
.cn-way:hover{color:var(--ink)}
.cn-opts{display:grid;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cn-row{display:grid;gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.cn-row:first-child{border-top:0}
.cn-l b{display:block;font-weight:600}
.cn-l span{display:block;color:var(--mute);font-size:.8438rem}
.cn-c{display:flex;align-items:center;min-width:0}
.cn-c .in{min-height:44px}
@media (min-width:600px){.cn-row{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center;gap:20px}.cn-c .sw{margin-left:0}}
.cn-sh{align-items:center;gap:12px}
.cn-sh h3{font-size:1.0625rem}
.cn-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none}
.cn-step{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding-bottom:22px}
.cn-step:not(:last-child)::before{content:"";position:absolute;left:13.5px;top:30px;bottom:2px;width:1px;background:var(--line2)}
.cn-n{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);background:var(--panel2);display:grid;place-items:center;font:600 .8125rem/1 var(--mono);color:var(--mute)}
.cn-sb{display:grid;gap:8px;min-width:0}
.cn-sb h4{margin:3px 0 0;font-size:.9688rem;font-weight:650}
.cn-code{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--bg2);min-width:0}
.cn-pre{margin:0;padding:12px 48px 12px 14px;max-height:220px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:.8125rem/1.55 var(--mono);color:var(--ink)}
.cn-cp{position:absolute;top:6px;right:6px;width:36px;height:36px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--mute);display:grid;place-items:center;cursor:pointer;transition:color .15s,background .15s}
.cn-cp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cn-cp:hover{color:var(--ink)}
.cn-cp.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--okbg)}
.cn-live{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;border:1px dashed var(--line2);color:var(--mute);font-weight:600}
.cn-live .grow{flex:1 1 180px}
.cn-dot{width:10px;height:10px;border-radius:50%;background:var(--off);flex:none;color:var(--off)}
.cn-live.wait{color:var(--ink);border-color:color-mix(in srgb,var(--acc2) 45%,transparent);background:var(--accs)}
.cn-live.wait .cn-dot{background:var(--acc2);color:var(--acc2);animation:beat 1.6s ease-out infinite}
.cn-live.ok{color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);background:var(--okbg)}
.cn-live.ok .cn-dot{background:var(--ok)}
@media (prefers-reduced-motion:reduce){.cn-live .cn-dot{animation:none!important}.cn-way{transition:none}}
@media (forced-colors:active){.cn-way[aria-pressed="true"]{outline:2px solid Highlight}.cn-live{border:1px solid CanvasText}}
@media (max-width:599px){.cn-row.tg{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}}
.vcard{--vt-s1:#fbfbfd;--vt-s2:#e4e4e9;--vt-s3:#c4c4cc;--vt-d1:#f2f2f5;--vt-d2:#d6d6dd;--vt-d3:#a9a9b3;--vt-edge:#a1a1aa;--vt-hair:rgba(29,29,31,.14);--vt-in1:#24222e;--vt-in2:#0b0b10;--vt-bolt:#8e8e96;--vt-knob:#3a3a40;--vt-dial:#1d1d1f;--vt-tick:#f5f5f7;--vt-acc:var(--acc2);--vt-acc-in:#2997ff;--vt-ok:#30d158}@media (prefers-color-scheme:dark){.vcard{--vt-s1:#3a3a40;--vt-s2:#26262b;--vt-s3:#151518;--vt-d1:#48484f;--vt-d2:#2c2c32;--vt-d3:#18181c;--vt-edge:#5a5a62;--vt-hair:rgba(255,255,255,.12);--vt-in1:#1d1b28;--vt-in2:#050507;--vt-bolt:#6e6e76;--vt-knob:#d2d2d7;--vt-dial:#0b0b0e;--vt-tick:#e8e8ed;--vt-acc:var(--acc2)}}.vt-stage{position:relative;width:min(100%,440px);aspect-ratio:1;margin:0 auto;perspective:1400px}.vt-stage svg{display:block;width:100%;height:100%;overflow:visible}.vt-frame{filter:drop-shadow(0 30px 50px rgba(0,0,0,.18))}.vt-door{position:absolute;inset:0;transform-origin:12.5% 50%;transform-style:preserve-3d;will-change:transform;transition:transform 1.7s cubic-bezier(.6,0,.2,1) 3s}.vt-door svg{filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}.vt-s1{stop-color:var(--vt-s1)}.vt-s2{stop-color:var(--vt-s2)}.vt-s3{stop-color:var(--vt-s3)}.vt-d1{stop-color:var(--vt-d1)}.vt-d2{stop-color:var(--vt-d2)}.vt-d3{stop-color:var(--vt-d3)}.vt-in1{stop-color:var(--vt-in1)}.vt-in2{stop-color:var(--vt-in2)}.vt-edge{stroke:var(--vt-edge);stroke-width:1.2}.vt-hair{fill:none;stroke:var(--vt-hair);stroke-width:1.4}.vt-soft{opacity:.6}.vt-shine{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linecap:round}.vt-screw circle{fill:var(--vt-s2);stroke:var(--vt-edge)}.vt-screw path{stroke:var(--vt-edge);stroke-width:1.4;stroke-linecap:round}.vt-hinge{fill:var(--vt-s3);stroke:var(--vt-edge)}.vt-recess{stroke:var(--vt-edge);stroke-width:2}.vt-shelf{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2;stroke-linecap:round}.vt-copy{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.22);opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}.vt-copy:nth-child(1){transition-delay:3.4s}.vt-copy:nth-child(2){transition-delay:3.48s}.vt-copy:nth-child(3){transition-delay:3.56s}.vt-copy:nth-child(4){transition-delay:3.64s}.vt-copy:nth-child(5){transition-delay:3.72s}.vt-copy:nth-child(6){transition-delay:3.8s}.vt-copy:nth-child(7){transition-delay:3.88s}.vt-copy.is-new{fill:var(--vt-acc-in);stroke:var(--vt-acc-in)}.vt-pass circle{fill:none;stroke:var(--vt-ok);stroke-width:2.5;opacity:0;transition:opacity .6s ease 4.1s}.vt-pass path{fill:none;stroke:var(--vt-ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1) 4.3s}.vt-tx{fill:rgba(255,255,255,.72);font:600 11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;text-anchor:middle;opacity:0;transition:opacity .6s ease 4.6s}.vt-bolt{fill:none;stroke:var(--vt-bolt);stroke-width:12;transform-origin:200px 200px;transition:transform .6s cubic-bezier(.65,0,.35,1) 2.5s}.vt-spoke{fill:none;stroke:var(--vt-knob);stroke-width:10;stroke-linecap:round}.vt-knob{fill:var(--vt-knob);stroke:var(--vt-edge)}.vt-wheel{transform-origin:200px 200px;transition:transform 1s cubic-bezier(.65,0,.35,1) 1.8s}.vt-dial-base{fill:var(--vt-dial);stroke:var(--vt-edge);stroke-width:2}.vt-dial{transform-origin:200px 200px}.vt-tick{fill:none;stroke:var(--vt-tick);stroke-width:1;opacity:.55}.vt-tick.is-long{stroke-width:2;opacity:.95}.vt-dial-cap{fill:var(--vt-d2);stroke:var(--vt-edge)}.vt-dial-grip{fill:none;stroke:var(--vt-d3);stroke-width:6;stroke-linecap:round}.vt-fp{fill:var(--vt-s2)}.vt-fi{fill:var(--vt-in2)}.vt-fd{fill:var(--vt-d2)}.vt-index{fill:var(--vt-acc)}.vt-stage.is-open .vt-dial{animation:vt-dial 1.6s cubic-bezier(.45,0,.25,1) .2s both}@keyframes vt-dial{0%{transform:none}40%{transform:rotate(250deg)}72%{transform:rotate(130deg)}100%{transform:rotate(200deg)}}.vt-stage.is-open .vt-wheel{transform:rotate(90deg)}.vt-stage.is-open .vt-bolt{transform:scale(.86)}.vt-stage.is-open .vt-door{transform:rotateY(-80deg)}.vt-stage.is-open .vt-copy{opacity:1;transform:none}.vt-stage.is-open .vt-copy.is-new{animation:vt-new 2.6s ease-in-out 5s infinite}@keyframes vt-new{50%{opacity:.45}}.vt-stage.is-open .vt-pass circle,.vt-stage.is-open .vt-tx{opacity:1}.vt-stage.is-open .vt-pass path{stroke-dashoffset:0}@media (prefers-reduced-motion:reduce){.vt-door,.vt-wheel,.vt-bolt,.vt-copy,.vt-pass circle,.vt-pass path,.vt-tx{transition:none!important}.vt-dial,.vt-copy.is-new{animation:none!important}.vt-stage .vt-door{transform:rotateY(-80deg)}.vt-stage .vt-wheel{transform:rotate(90deg)}.vt-stage .vt-bolt{transform:scale(.86)}.vt-stage .vt-dial{transform:rotate(200deg)}.vt-stage .vt-copy{opacity:1;transform:none}.vt-stage .vt-pass circle,.vt-stage .vt-tx{opacity:1}.vt-stage .vt-pass path{stroke-dashoffset:0}}