/* Replaro "Handled" UI: tokens, base and shared components (ported from design_src/handled). Screen CSS lives in css/v2/. */
/* Handled · Soft tokens (owner 10-03: the Taste sketch's Soft look). Light is bare :root; dark via data-theme or the OS.
   Decision colours: answered = soft green, kept off (hidden) = soft rose, never alarm red; left alone = grey;
   waiting = warm amber; failed = brick. Each has a bar colour, a text colour (-t) and a soft background (-s). */
:root{
  --ground:#F2F2F5; --ground-2:#E9E9EE; --card:#FFFFFF; --card-2:#F7F7F9; --raise:#FFFFFF;
  --ink:#1D1D1F; --ink-2:#626267; --ink-3:#8E8E93; --line:#E3E3E8; --line-2:#D1D1D6;
  --ring-panel:#000000; --ring-ink:#FFFFFF; --ring-ink-2:#A1A1A6;
  --answered:#30D158; --hidden:#FF375F; --left:#8E8E93; --clear:#40C8E0; --needs:#FF9F0A; --failed:#FF453A;
  --answered-t:#1A7A33; --hidden-t:#C00C3C; --left-t:#636366; --clear-t:#0A6B7E; --needs-t:#965000; --failed-t:#B42318;
  --answered-s:#E6F8EB; --hidden-s:#FFE8EE; --left-s:#EFEFF4; --clear-s:#E3F6FA; --needs-s:#FFF2DE; --failed-s:#FFE9E7;
  --track-a:#D3F3DC; --track-h:#FFD9E2; --track-c:#D5F1F7;
  --shield:#AF52DE; --shield-t:#8A2FB8; --shield-s:#F5E9FB;
  --accent:#1D1D1F; --accent-ink:#FFFFFF; --logo-ink:#0B0D12; --logo-edge:#FFFFFF;
  --lime:#D6FF3F; --lime-ink:#0B0D12; --lime-hover:#CDF63A; --lime-soft:#F1FCD2; --lime-line:#C9EE3A;
  --focus:#15171A; --sel:rgba(215,255,69,.45); --bar:#15171A; --bar-ink:#FFFFFF;
  --side:#EDEDF2; --tab:rgba(250,250,252,.86); --bubble:#F1F3F5;
  --shadow-1:0 0 0 1px rgba(16,18,22,.05),0 1px 1px rgba(16,18,22,.03),0 24px 48px -24px rgba(16,18,22,.14);
  --shadow-2:0 0 0 1px rgba(16,18,22,.05),0 2px 6px -2px rgba(16,18,22,.05),0 32px 64px -28px rgba(16,18,22,.24);
  --shadow-3:0 24px 60px rgba(16,18,22,.18),0 6px 18px rgba(16,18,22,.08);
  --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:28px;
  --fs-1:12px; --fs-2:13px; --fs-3:15px; --fs-4:17px; --fs-5:20px; --fs-6:24px; --fs-7:32px; --fs-8:44px;
  --ease:cubic-bezier(.32,.72,0,1);
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-rtl:"Heebo","Geist",system-ui,sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#000000; --ground-2:#0E0E10; --card:#1C1C1E; --card-2:#232326; --raise:#2C2C2E;
    --ink:#F5F5F7; --ink-2:#A1A1A6; --ink-3:#7C7C80; --line:#2C2C2E; --line-2:#3A3A3C;
    --ring-panel:#1C1C1E;
    --answered:#30D158; --hidden:#FF375F; --left:#7C7C80; --clear:#40C8E0; --needs:#FF9F0A; --failed:#FF453A;
    --answered-t:#30D158; --hidden-t:#FF6482; --left-t:#C7C7CC; --clear-t:#5AD1E6; --needs-t:#FFB340; --failed-t:#FF6961;
    --answered-s:rgba(48,209,88,.14); --hidden-s:rgba(255,55,95,.15); --left-s:rgba(255,255,255,.08); --clear-s:rgba(64,200,224,.14); --needs-s:rgba(255,159,10,.15); --failed-s:rgba(255,69,58,.15);
    --track-a:rgba(48,209,88,.2); --track-h:rgba(255,55,95,.2); --track-c:rgba(64,200,224,.18);
    --shield:#BF5AF2; --shield-t:#D58CF8; --shield-s:rgba(191,90,242,.16);
    --accent:#F5F5F7; --accent-ink:#000000; --bar:#2C2C2E; --bar-ink:#F2F3F5; --logo-ink:#15171A; --logo-edge:#3A3A3C;
    --lime-hover:#E0FF6A; --lime-soft:rgba(215,255,69,.11); --lime-line:rgba(215,255,69,.45); --focus:#D7FF45; --sel:rgba(215,255,69,.28);
    --side:#0E0E10; --tab:rgba(22,22,24,.86); --bubble:#2C2C2E;
    --shadow-1:0 0 0 1px rgba(255,255,255,.05),0 1px 1px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.7);
    --shadow-2:0 0 0 1px rgba(255,255,255,.06),0 1px 1px rgba(0,0,0,.4),0 32px 64px -28px rgba(0,0,0,.8);
    --shadow-3:0 24px 60px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
    --ground:#000000; --ground-2:#0E0E10; --card:#1C1C1E; --card-2:#232326; --raise:#2C2C2E;
    --ink:#F5F5F7; --ink-2:#A1A1A6; --ink-3:#7C7C80; --line:#2C2C2E; --line-2:#3A3A3C;
    --ring-panel:#1C1C1E;
    --answered:#30D158; --hidden:#FF375F; --left:#7C7C80; --clear:#40C8E0; --needs:#FF9F0A; --failed:#FF453A;
    --answered-t:#30D158; --hidden-t:#FF6482; --left-t:#C7C7CC; --clear-t:#5AD1E6; --needs-t:#FFB340; --failed-t:#FF6961;
    --answered-s:rgba(48,209,88,.14); --hidden-s:rgba(255,55,95,.15); --left-s:rgba(255,255,255,.08); --clear-s:rgba(64,200,224,.14); --needs-s:rgba(255,159,10,.15); --failed-s:rgba(255,69,58,.15);
    --track-a:rgba(48,209,88,.2); --track-h:rgba(255,55,95,.2); --track-c:rgba(64,200,224,.18);
    --shield:#BF5AF2; --shield-t:#D58CF8; --shield-s:rgba(191,90,242,.16);
    --accent:#F5F5F7; --accent-ink:#000000; --bar:#2C2C2E; --bar-ink:#F2F3F5; --logo-ink:#15171A; --logo-edge:#3A3A3C;
    --lime-hover:#E0FF6A; --lime-soft:rgba(215,255,69,.11); --lime-line:rgba(215,255,69,.45); --focus:#D7FF45; --sel:rgba(215,255,69,.28);
    --side:#0E0E10; --tab:rgba(22,22,24,.86); --bubble:#2C2C2E;
    --shadow-1:0 0 0 1px rgba(255,255,255,.05),0 1px 1px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.7);
    --shadow-2:0 0 0 1px rgba(255,255,255,.06),0 1px 1px rgba(0,0,0,.4),0 32px 64px -28px rgba(0,0,0,.8);
    --shadow-3:0 24px 60px rgba(0,0,0,.6);
    color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--fs-3)/1.47 var(--font);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
p{margin:0}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img,svg{display:block;max-width:100%}
::selection{background:var(--sel)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
.num,.tnum{font-variant-numeric:tabular-nums}
[dir="rtl"],.rtl{font-family:var(--font-rtl)}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid transparent;background-clip:content-box}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--ink-2)}
.small{font-size:var(--fs-2)}
.tiny{font-size:var(--fs-1)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- shell ---------- */
.v2app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{position:sticky;top:0;height:100vh;height:100dvh;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;padding:14px 12px 14px;overflow:auto}
.ws{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-m);text-align:left;width:100%}
.ws:hover{background:var(--ground-2)}
.ws .logo{width:34px;height:34px;border-radius:10px;background:var(--card);box-shadow:var(--shadow-1);display:grid;place-items:center;flex:none}
.ws b{display:block;font-size:var(--fs-3);font-weight:600;line-height:1.2}
.ws small{display:block;font-size:var(--fs-1);color:var(--ink-2)}
.ws .chev{margin-left:auto;color:var(--ink-3)}
.search{display:flex;align-items:center;gap:8px;margin:4px 2px 8px;padding:7px 10px;border-radius:10px;background:var(--ground-2);color:var(--ink-2);font-size:var(--fs-2);width:calc(100% - 4px);text-align:left}
.search kbd{margin-left:auto}
.nav{display:grid;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;text-decoration:none;font-size:var(--fs-3);font-weight:500;color:var(--ink)}
.nav a:hover{background:var(--ground-2)}
.nav a[aria-current="page"]{background:var(--card);box-shadow:var(--shadow-1)}
.nav a .count{margin-left:auto;font-size:var(--fs-1);font-weight:600;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 6px;background:var(--needs);color:#1D1D1F}
.side h6{margin:14px 10px 4px;font-size:var(--fs-1);font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.plist{display:grid;gap:2px}
.plist a{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;text-decoration:none;font-size:var(--fs-2)}
.plist a:hover{background:var(--ground-2)}
.plist a[aria-current="page"]{background:var(--card);box-shadow:var(--shadow-1)}
.plist .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .foot{margin-top:auto;display:grid;gap:10px;padding:10px 8px 2px}
.usage{display:grid;gap:6px;font-size:var(--fs-1);color:var(--ink-2)}
.main{min-width:0;padding:28px clamp(16px,3.2vw,44px) 64px;max-width:1240px;width:100%;margin:0 auto}
.tabbar{display:none}
@media (max-width:959px){
  .v2app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .main{padding:16px 16px calc(96px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--tab);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line);padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px))}
  .tabbar a{display:grid;justify-items:center;gap:2px;font-size:11px;font-weight:500;color:var(--ink-3);text-decoration:none;padding:4px 0;position:relative}
  .tabbar a[aria-current="page"]{color:var(--ink)}
  .tabbar .count{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--needs);color:#1D1D1F;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}
}
body.bare .side,body.bare .tabbar{display:none}
body.bare .v2app{grid-template-columns:minmax(0,1fr)}
body.bare .main{max-width:none;padding:0}

/* ---------- page header ---------- */
.ph{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin-bottom:22px}
.ph .t{display:grid;gap:4px;min-width:0}
.ph h1{font-size:var(--fs-7);line-height:1.1}
.ph .sub{color:var(--ink-2);font-size:var(--fs-3);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ph .acts{display:flex;flex-wrap:wrap;gap:8px}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-size:var(--fs-2);text-decoration:none;margin-bottom:6px}
.back:hover{color:var(--ink)}
@media (max-width:959px){.ph h1{font-size:28px}}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:28px 2px 10px}
.sec-h h2{font-size:var(--fs-5)}
.sec-h a,.sec-h button{font-size:var(--fs-2);color:var(--ink-2);text-decoration:none}
.sec-h a:hover,.sec-h button:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;font-size:var(--fs-2);font-weight:600;white-space:nowrap;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);text-decoration:none}
.btn:hover{background:var(--card-2)}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.btn-primary:hover{background:var(--accent);filter:brightness(1.25)}
.btn-ghost{background:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--ground-2)}
.btn-danger{color:var(--failed-t)}
.btn-l{height:44px;padding:0 18px;font-size:var(--fs-3)}
.btn-s{height:30px;padding:0 11px;font-size:var(--fs-1)}
.btn-icon{width:36px;padding:0}
.btn-s.btn-icon{width:30px}
.btn .kbd{margin-left:2px}
.btn-go{background:var(--answered-s);color:var(--answered-t);box-shadow:none}
.btn-go:hover{background:var(--answered-s);filter:brightness(.97)}
.btn-hide{background:var(--hidden-s);color:var(--hidden-t);box-shadow:none}
.btn-hide:hover{background:var(--hidden-s);filter:brightness(.97)}
.btn-fb{background:#1877F2;color:#fff;box-shadow:none}
.link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2)}
.link:hover{text-decoration-color:currentColor}
kbd,.kbd{font:600 11px/1 var(--font);padding:3px 5px;border-radius:5px;background:var(--ground-2);color:var(--ink-2);box-shadow:inset 0 -1px 0 var(--line-2)}

/* ---------- surfaces ---------- */
.card{background:var(--card);border-radius:var(--r-l);padding:20px;box-shadow:var(--shadow-1)}
.card-pad-s{padding:14px 16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.stack{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.row{display:flex;align-items:center;gap:10px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}

/* iOS inset grouped list */
.group{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow-1);overflow:clip}
.group>.gi{display:flex;align-items:center;gap:12px;padding:13px 16px;min-height:52px;position:relative}
.group>.gi+.gi::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--line)}
.group>.gi .gt{flex:1;min-width:0;display:grid;gap:2px}
.group>.gi .gt b{font-weight:500}
.group>.gi .gt small{color:var(--ink-2);font-size:var(--fs-2)}
.group-h{margin:26px 16px 8px;font-size:var(--fs-2);color:var(--ink-2);font-weight:500}
.group-f{margin:8px 16px 0;font-size:var(--fs-2);color:var(--ink-2)}

/* ---------- state chips (colour + icon + word) ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:999px;font-size:var(--fs-1);font-weight:600;white-space:nowrap;background:var(--ground-2);color:var(--ink-2)}
.chip svg{width:13px;height:13px}
.chip.answered{background:var(--answered-s);color:var(--answered-t)}
.chip.hidden{background:var(--hidden-s);color:var(--hidden-t)}
.chip.needs{background:var(--needs-s);color:var(--needs-t)}
.chip.clear{background:var(--clear-s);color:var(--clear-t)}
.chip.failed{background:var(--failed-s);color:var(--failed-t)}
.chip.left{background:var(--left-s);color:var(--left-t)}
.chip.work{background:var(--ground-2);color:var(--ink-2)}
.chip.quiet{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.answered{background:var(--answered)}.dot.hidden{background:var(--hidden)}.dot.clear{background:var(--clear)}.dot.needs{background:var(--needs)}.dot.left{background:var(--left)}.dot.failed{background:var(--failed)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-1);font-weight:600;height:24px;padding:0 10px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.live .dot{background:var(--answered);box-shadow:0 0 0 0 rgba(76,138,88,.5);animation:breathe 2.4s var(--ease) infinite}
.live.draft .dot{background:var(--needs);animation:none}
.live.paused .dot{background:var(--ink-3);animation:none}
.live.off .dot{background:var(--failed);animation:none}
@keyframes breathe{0%{box-shadow:0 0 0 0 rgba(76,138,88,.45)}70%{box-shadow:0 0 0 7px rgba(76,138,88,0)}100%{box-shadow:0 0 0 0 rgba(76,138,88,0)}}
.extra{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:600;background:linear-gradient(90deg,var(--clear-s),var(--answered-s));color:var(--clear-t);vertical-align:2px}
.extra svg{width:11px;height:11px}

/* ---------- avatars ---------- */
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:var(--fs-2);color:#1D1D1F;background:color-mix(in srgb,var(--c,#8E8E93) 34%,#fff);flex:none;position:relative}
.av-s{width:28px;height:28px;font-size:11px}
.av-sq{border-radius:10px;box-shadow:inset 0 0 0 1px var(--line-2)}
.av .pf{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 2px var(--card)}
.av .pf.fb{background:#1877F2}
.av .pf.ig{background:radial-gradient(circle at 30% 110%,#FFD600 0%,#FF7A00 25%,#FF0069 55%,#D300C5 75%,#7638FA 100%)}
.av .pf svg{width:10px;height:10px}

/* ---------- forms ---------- */
.field{display:grid;gap:6px}
.field label,.field .lbl{font-size:var(--fs-2);font-weight:600}
.field .hint{font-size:var(--fs-2);color:var(--ink-2)}
.input,.select,.textarea{width:100%;border:0;border-radius:var(--r-m);background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line);padding:10px 12px;font-size:var(--fs-3);color:var(--ink);transition:box-shadow .15s var(--ease)}
.textarea{min-height:96px;resize:vertical;line-height:1.5}
.input:focus,.select:focus,.textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--focus);background:var(--card)}
.input::placeholder,.textarea::placeholder{color:var(--ink-2);opacity:.85}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.switch{appearance:none;width:51px;height:31px;border-radius:999px;background:var(--line-2);position:relative;flex:none;cursor:pointer;transition:background .2s var(--ease)}
.switch::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,.2);transition:transform .25s var(--ease)}
.switch:checked{background:var(--answered)}
.switch:checked::after{transform:translateX(20px)}
.switch:disabled{opacity:.45;cursor:not-allowed}
.radio-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;background:var(--card)}
.radio-card:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.radio-card input{margin-top:3px;accent-color:var(--ink)}
.check{accent-color:var(--ink);width:18px;height:18px}
input[type=radio],input[type=checkbox]{accent-color:var(--ink)}

/* ---------- segmented tabs ---------- */
.seg{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--ground-2);overflow-x:auto;max-width:100%;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg a,.seg button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;font-size:var(--fs-2);font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.seg a:hover,.seg button:hover{color:var(--ink)}
.seg [aria-current="page"],.seg [aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-1);font-weight:600}
.seg .n{font-size:11px;font-weight:600;color:var(--ink-3)}
.seg .n.hot{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--needs);color:#1D1D1F;display:grid;place-items:center}

/* ---------- meters / progress ---------- */
.meter{height:6px;border-radius:999px;background:var(--ground-2);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:inherit;background:var(--ink)}
.meter.go>i{background:var(--answered)}
.meter.warn>i{background:var(--needs)}
.prog{display:grid;gap:8px;padding:14px 16px;border-radius:var(--r-l);background:var(--card);box-shadow:var(--shadow-1)}
.prog .meter>i{transition:width .6s var(--ease)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--ground-2),var(--card-2),var(--ground-2));background-size:200% 100%;animation:sh 1.4s linear infinite;border-radius:8px}
@keyframes sh{to{background-position:-200% 0}}

/* ---------- medals ---------- */
.medal{display:grid;justify-items:center;gap:8px;text-align:center;padding:16px 10px 14px;border-radius:var(--r-l);background:var(--card);box-shadow:var(--shadow-1);min-width:0}
.medal .disc{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:inset 0 0 0 3px rgba(255,255,255,.28),0 6px 16px rgba(0,0,0,.12)}
.medal .disc svg{width:26px;height:26px}
.medal b{font-size:var(--fs-2);font-weight:600;line-height:1.25}
.medal small{font-size:var(--fs-1);color:var(--ink-2);line-height:1.3}
.medal.locked .disc{background:var(--ground-2)!important;color:var(--ink-3);box-shadow:inset 0 0 0 2px var(--line-2)}
.medal.new{animation:pop .7s var(--ease) both}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
.m-night{background:linear-gradient(140deg,#5E5CE6,#2A1570)}
.m-shield{background:linear-gradient(140deg,#3AA6B3,#1B5961)}
.m-chat{background:linear-gradient(140deg,#30D158,#0A6328)}
.m-bolt{background:linear-gradient(140deg,#FF9F0A,#A04C00)}
.m-check{background:linear-gradient(140deg,#40C8E0,#0A5F70)}
.m-voice{background:linear-gradient(140deg,#BF5AF2,#5B1A86)}
.m-sweep{background:linear-gradient(140deg,#64D2FF,#1A4F9C)}
.m-auto{background:linear-gradient(140deg,#8E8E93,#2C2C2E)}

/* ---------- stats ---------- */
.stat{background:var(--card);border-radius:var(--r-l);padding:14px 16px;box-shadow:var(--shadow-1);display:grid;gap:2px;min-width:0}
.stat big{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat small{display:flex;align-items:center;gap:6px;font-size:var(--fs-2);color:var(--ink-2)}

/* ---------- toast / sheet / palette ---------- */
#layer{position:relative;z-index:60}
.toasts{position:fixed;left:50%;bottom:calc(24px + var(--rpl-cb, 0px));transform:translateX(-50%);display:grid;gap:8px;z-index:70;width:min(440px,calc(100vw - 32px))}
@media (max-width:959px){.toasts{bottom:calc(84px + var(--rpl-cb, 0px) + env(safe-area-inset-bottom,0px))}}
.toast{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:14px;background:#15171A;color:#F2F3F5;box-shadow:var(--shadow-3);font-size:var(--fs-2);animation:tin .35s var(--ease) both}
:root[data-theme="dark"] .toast{background:#2A2D32}
.toast .grow{flex:1}
.toast button{color:var(--lime);font-weight:600}
@keyframes tin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.36);backdrop-filter:blur(2px);z-index:80;display:grid;place-items:center;padding:16px;animation:fade .2s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow-3);width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:22px;display:grid;gap:14px;animation:up .3s var(--ease) both}
.sheet.wide{width:min(860px,100%)}
.sheet h3{font-size:var(--fs-5)}
.sheet .acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:4px}
@keyframes up{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){.scrim{place-items:end center;padding:0}.sheet{border-radius:22px 22px 0 0;width:100%;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}}
.pal{width:min(600px,100%);padding:0;gap:0}
.pal input{border:0;border-bottom:1px solid var(--line);padding:16px 18px;font-size:var(--fs-4);background:transparent;width:100%}
.pal input:focus{outline:none}
.pal ul{list-style:none;margin:0;padding:6px;max-height:360px;overflow:auto}
.pal li a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none}
.pal li a:hover,.pal li a.on{background:var(--ground-2)}
.pal li small{margin-left:auto;color:var(--ink-3);font-size:var(--fs-1)}

/* ---------- empty states ---------- */
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:40px 20px;color:var(--ink-2)}
.empty h3{color:var(--ink);font-size:var(--fs-5)}
.empty p{max-width:44ch}

/* ---------- shared small pieces ---------- */
.grow{flex:1;min-width:0}
.clamp1{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.h3{font-size:var(--fs-4);font-weight:600;letter-spacing:-.01em}
.banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-l);background:var(--card);box-shadow:var(--shadow-1);margin-bottom:12px;font-size:var(--fs-2)}
.banner>svg{flex:none;color:var(--ink-2)}
.banner>span{flex:1;min-width:0}
.banner.warm{background:var(--needs-s)}
.banner.warm>svg{color:var(--needs-t)}
.banner.bad{background:var(--failed-s)}
.banner.bad>svg{color:var(--failed-t)}
.banner.good{background:var(--answered-s)}
.banner.good>svg{color:var(--answered-t)}
@media (max-width:640px){.banner{flex-wrap:wrap}.banner>span{flex-basis:calc(100% - 34px)}}
.select-s{height:36px;padding-top:6px;padding-bottom:6px;font-size:var(--fs-2);width:auto}
.mi{width:30px;height:30px;border-radius:8px;background:var(--ground-2);display:grid;place-items:center;flex:none}
.tick{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:var(--fs-1);font-weight:700;background:var(--ground-2);color:var(--ink-2)}
.tick.done{background:var(--answered-s);color:var(--answered-t)}
.group a.gi{text-decoration:none;color:inherit}
.group a.gi:hover,.group button.gi:hover{background:var(--card-2)}
.btn-fb:hover{background:#166FE5;filter:none}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--failed)}
.field .err{font-size:var(--fs-2);color:var(--failed-t);display:flex;gap:6px;align-items:flex-start}
@media (max-width:959px){.ph{padding-right:38px}}

/* Replaro lime: approving what Replaro suggests (the logo's own bubble colour) */
.btn.fx-go,.btn-lime{background:var(--lime);color:var(--lime-ink);box-shadow:none}
.btn.fx-go:hover,.btn-lime:hover{background:var(--lime-hover);filter:none}
.btn-lime:focus-visible{outline-color:var(--focus)}

.linkish{color:var(--ink-2);font-weight:600;font-size:var(--fs-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.linkish:hover{color:var(--ink);text-decoration-color:currentColor}

/* coverage bar (replaces the rings) + page status dot */
.covbar{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;width:100%;background:var(--ground-2)}
.covbar i{display:block;min-width:4px}
.covbar i.answered{background:var(--answered)}.covbar i.hidden{background:var(--hidden)}.covbar i.left{background:var(--left)}.covbar i.needs{background:var(--needs)}
.covbar.mini{height:6px;width:100%}
.covbar.big{height:16px;gap:3px}
.cbar0{display:block;height:10px;border-radius:999px;background:repeating-linear-gradient(90deg,var(--ground-2) 0 6px,transparent 6px 10px);width:100%}
.pdot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;background:var(--answered);box-shadow:0 0 0 3px color-mix(in srgb,var(--answered) 18%,transparent)}
.pdot.draft{background:var(--needs);box-shadow:0 0 0 3px color-mix(in srgb,var(--needs) 20%,transparent)}
.pdot.paused{background:var(--left);box-shadow:none}
.pdot.off{background:var(--failed);box-shadow:0 0 0 3px color-mix(in srgb,var(--failed) 18%,transparent)}

/* "Replaro is on" status pill */
.rpill{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 8px;padding:8px 10px;border-radius:12px;background:var(--card);box-shadow:var(--shadow-1);text-align:left}
.rpill:hover{box-shadow:var(--shadow-2)}
.rp-dot{width:10px;height:10px;border-radius:50%;background:var(--answered);flex:none;animation:breathe 2.4s var(--ease) infinite}
.rpill.paused .rp-dot{background:var(--needs);animation:none}
.rp-t{flex:1;min-width:0;display:grid;line-height:1.25}
.rp-t b{font-size:var(--fs-2);font-weight:600}
.rp-t small{font-size:var(--fs-1);color:var(--ink-2)}
.rpill.inline{width:auto;display:inline-flex;margin:0;padding:5px 10px;border-radius:999px}
.rpill.inline .rp-t{display:flex;gap:6px;align-items:baseline}

/* Moving between screens (owner 10-06: on every tab tap Safari showed the old page shifted for a frame before the new
   one). In Safari a same-origin navigation is a view transition: the browser holds the old screen still until the new
   one is ready, then swaps it in one short fade; the sidebar and the phone tab bar keep exactly their place. The opt-in
   (@view-transition) is written by js/v2/vt.js (loaded in the head of app_v2/base.html), for Apple's engine only (Safari and every iOS
   browser, verified in WebKit): Chrome stalled on it in every automated test here (even a bare two-page site), so Chrome,
   Android and in-app browsers navigate as before until checked on a real device. */
.tabbar{view-transition-name:tabbar}
.side{view-transition-name:side}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}