/* ==========================================================================
   NBA 2026 Campaign Console — design system
   Mobile-first. Volunteers work from phones in daylight; admins from desktops.
   Light is the default (readable outdoors); dark is a selected theme.
   ========================================================================== */

/* ---- tokens -------------------------------------------------------------- */
:root{
  color-scheme: light;

  /* surfaces */
  --plane:      #f5f6f8;   /* page background            */
  --surface:    #ffffff;   /* cards / panels             */
  --surface-2:  #f2f4f7;   /* insets, table stripes      */
  --surface-3:  #e9edf3;   /* hover wash                 */
  --line:       #e5e8ee;   /* hairline                   */
  --line-2:     #d4d9e2;   /* stronger divider           */

  /* ink */
  --ink:        #101625;
  --ink-2:      #46506a;
  --ink-3:      #6b7590;

  /* brand — a deep legal indigo */
  --brand:      #4f46e5;
  --brand-600:  #4338ca;
  --brand-700:  #3730a3;
  --brand-ink:  #ffffff;
  --brand-soft: #eef0ff;
  --brand-ring: rgba(79,70,229,.28);

  /* semantic */
  --ok:      #067647;  --ok-solid:#059862;  --ok-soft:#e7f7ee;  --ok-ink:#05603a;
  --warn:    #b54708;  --warn-solid:#dc6803; --warn-soft:#fff6e8; --warn-ink:#93370d;
  --danger:  #d92d20;  --danger-solid:#e0463a; --danger-soft:#fdecea; --danger-ink:#b42318;
  --info:    #175cd3;  --info-solid:#2e6fe0; --info-soft:#eaf1fd; --info-ink:#14509b;
  --wa:      #1eb95b;  --wa-solid:#25d366;

  /* dataviz — from the validated skill palette (labels always accompany) */
  --dv-supporter: #0ca30c;
  --dv-leaning:   #2a78d6;
  --dv-undecided: #98a2b3;
  --dv-opposed:   #d03b3b;
  --dv-unknown:   #cbd2dd;
  --dv-track:     #eef1f5;

  /* effects */
  --r-xs: 7px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16,22,37,.05), 0 1px 3px rgba(16,22,37,.06);
  --sh-2: 0 2px 4px rgba(16,22,37,.05), 0 6px 16px rgba(16,22,37,.08);
  --sh-3: 0 12px 32px rgba(16,22,37,.12), 0 4px 10px rgba(16,22,37,.07);
  --sh-brand: 0 6px 18px var(--brand-ring);
  --ring: 0 0 0 3px var(--brand-ring);

  --bar-h: 58px;
  --tap: 48px;
  --wrap: 1120px;
  --read: 680px;

  --ease: cubic-bezier(.2,.7,.3,1);
  --fast: .14s var(--ease);
  --med: .24s var(--ease);
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --plane:      #0a0d13;
  --surface:    #12161f;
  --surface-2:  #1a202c;
  --surface-3:  #222a38;
  --line:       #242b39;
  --line-2:     #313a4c;

  --ink:        #e9edf4;
  --ink-2:      #a3aec2;
  --ink-3:      #727d94;

  --brand:      #818cf8;
  --brand-600:  #6f7bf6;
  --brand-700:  #5b67e6;
  --brand-ink:  #0a0d13;
  --brand-soft: #1b2140;
  --brand-ring: rgba(129,140,248,.30);

  --ok:#34d399; --ok-solid:#059862; --ok-soft:#0c2a20; --ok-ink:#6ee7b7;
  --warn:#fdb022; --warn-solid:#dc6803; --warn-soft:#2c1f0b; --warn-ink:#fdb022;
  --danger:#f97066; --danger-solid:#e0463a; --danger-soft:#33150f; --danger-ink:#fda29b;
  --info:#53b1fd; --info-solid:#2e6fe0; --info-soft:#0d2036; --info-ink:#84caff;
  --wa:#25d366; --wa-solid:#25d366;

  --dv-undecided:#667085; --dv-unknown:#3a4353; --dv-track:#1c2430;
  --dv-leaning:#3987e5;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.36);
  --sh-3: 0 16px 40px rgba(0,0,0,.55);
  --sh-brand: 0 6px 20px rgba(129,140,248,.28);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --plane:#0a0d13; --surface:#12161f; --surface-2:#1a202c; --surface-3:#222a38;
    --line:#242b39; --line-2:#313a4c; --ink:#e9edf4; --ink-2:#a3aec2; --ink-3:#727d94;
    --brand:#818cf8; --brand-600:#6f7bf6; --brand-700:#5b67e6; --brand-ink:#0a0d13;
    --brand-soft:#1b2140; --brand-ring:rgba(129,140,248,.30);
    --ok:#34d399; --ok-soft:#0c2a20; --ok-ink:#6ee7b7;
    --warn:#fdb022; --warn-soft:#2c1f0b; --warn-ink:#fdb022;
    --danger:#f97066; --danger-soft:#33150f; --danger-ink:#fda29b;
    --info:#53b1fd; --info-soft:#0d2036; --info-ink:#84caff;
    --wa:#25d366; --dv-undecided:#667085; --dv-unknown:#3a4353; --dv-track:#1c2430; --dv-leaning:#3987e5;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 6px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.36);
    --sh-3:0 16px 40px rgba(0,0,0,.55);
    --sh-brand:0 6px 20px rgba(129,140,248,.28);
  }
}

/* ---- reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0; background:var(--plane); color:var(--ink);
  font:400 16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh;
}
h1,h2,h3,h4,p{margin:0}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
svg{display:block}
::selection{background:var(--brand-ring)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

.ic{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:currentColor;stroke:none}
.tnum{font-variant-numeric:tabular-nums}

/* ---- app bar ------------------------------------------------------------- */
.appbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  height:var(--bar-h);padding:0 clamp(12px,3vw,22px);
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{width:32px;height:32px;border-radius:9px;flex:none;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--brand) 0%,var(--brand-700) 100%);
  box-shadow:var(--sh-brand)}
.brand-mark .ic{width:19px;height:19px;stroke-width:2}
.brand b{font-size:15px;line-height:1}
.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.appbar-sp{flex:1}
.appbar-right{display:flex;align-items:center;gap:6px}

.iconbtn{width:var(--tap);height:var(--tap);border-radius:var(--r-sm);border:1px solid transparent;
  background:transparent;color:var(--ink-2);display:grid;place-items:center;transition:var(--fast)}
.iconbtn:hover{background:var(--surface-3);color:var(--ink)}
.iconbtn .ic{width:20px;height:20px}

.userchip{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);text-decoration:none}
.userchip:hover{text-decoration:none;border-color:var(--line-2);background:var(--surface-2)}
.userchip .who{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.userchip .who b{font-size:13px;color:var(--ink);font-weight:650;max-width:130px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.userchip .who span{font-size:10.5px;color:var(--ink-3);text-transform:capitalize}
@media(max-width:560px){.userchip .who{display:none}}

.avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em}

/* ---- primary nav --------------------------------------------------------- */
.nav{position:sticky;top:var(--bar-h);z-index:30;
  background:color-mix(in srgb,var(--plane) 88%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  display:flex;gap:2px;padding:7px clamp(10px,3vw,20px);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:8px 13px;border-radius:var(--r-sm);color:var(--ink-2);font-size:13.5px;font-weight:600;
  text-decoration:none;transition:var(--fast)}
.nav a .ic{width:16px;height:16px}
.nav a:hover{background:var(--surface-3);color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{background:var(--brand-soft);color:var(--brand-600)}
:root[data-theme="dark"] .nav a[aria-current="page"]{color:var(--brand)}

/* ---- shell --------------------------------------------------------------- */
main{max-width:var(--wrap);margin:0 auto;padding:clamp(14px,3vw,26px) clamp(12px,3vw,22px) 96px}
main.narrow{max-width:var(--read)}
.stack{display:flex;flex-direction:column;gap:16px}

/* ---- banners ------------------------------------------------------------- */
.banner{display:flex;align-items:center;gap:10px;justify-content:center;text-align:center;
  padding:10px 16px;font-size:13.5px;font-weight:650;letter-spacing:.01em}
.banner .ic{width:17px;height:17px}
.banner-stop{background:var(--danger);color:#fff}
.banner-gotv{background:linear-gradient(90deg,var(--brand-700),var(--brand));color:#fff}

/* ---- cards / panels ------------------------------------------------------ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1)}
.card-pad{padding:clamp(16px,3vw,22px)}
.card-hd{display:flex;align-items:center;gap:12px;padding:16px clamp(16px,3vw,22px);
  border-bottom:1px solid var(--line)}
.card-hd .ic{width:18px;height:18px;color:var(--ink-3)}
.card-hd h2{font-size:14px;font-weight:700;letter-spacing:-.01em;flex:1}
.card-hd .sub{font-size:12.5px;color:var(--ink-3);font-weight:500}
.card.center{text-align:center}

.section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin:2px 0 2px}

/* ---- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:12px 18px;border-radius:var(--r);border:1px solid transparent;
  font-size:15px;font-weight:650;letter-spacing:-.01em;text-decoration:none;
  transition:transform var(--fast),box-shadow var(--fast),background var(--fast),border-color var(--fast);
  user-select:none;white-space:nowrap}
.btn .ic{width:19px;height:19px}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.btn-block{width:100%}
.btn-lg{min-height:56px;font-size:16px;border-radius:var(--r-lg)}
.btn-sm{min-height:38px;padding:8px 13px;font-size:13.5px;border-radius:var(--r-sm)}

.btn-primary{background:var(--brand);color:var(--brand-ink);box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--brand-600)}
.btn-success{background:var(--ok-solid);color:#fff;box-shadow:0 6px 16px rgba(5,152,98,.26)}
.btn-success:hover{filter:brightness(1.05)}
.btn-wa{background:var(--wa-solid);color:#04310f;box-shadow:0 6px 16px rgba(37,211,102,.26)}
.btn-wa:hover{filter:brightness(1.03)}
.btn-danger{background:var(--danger-solid);color:#fff}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-soft{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.btn-soft:hover{background:var(--surface-3);color:var(--ink)}
.btn-off{background:var(--surface-2);color:var(--ink-3);pointer-events:none;box-shadow:none}
.btn[data-loading]{color:transparent!important;position:relative;pointer-events:none}
.btn[data-loading]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2.5px solid currentColor;border-top-color:transparent;opacity:.9;
  animation:spin .7s linear infinite;color:#fff}
@keyframes spin{to{transform:rotate(1turn)}}

.btnrow{display:flex;gap:10px}
.btnrow>.btn{flex:1;min-width:0}
@media(max-width:460px){.btnrow{flex-direction:column}}

/* ---- badges / pills ------------------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;line-height:1.4;border:1px solid transparent}
.badge .ic{width:12px;height:12px;stroke-width:2.4}
.badge-hot{background:var(--warn-soft);color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.badge-dia{background:var(--info-soft);color:var(--info-ink);border-color:color-mix(in srgb,var(--info) 26%,transparent)}
.badge-neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.badge-ok{background:var(--ok-soft);color:var(--ok-ink)}
.badge-danger{background:var(--danger-soft);color:var(--danger-ink)}

.tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:650;
  padding:2px 7px;border-radius:var(--r-xs);background:var(--surface-2);color:var(--ink-2);text-transform:capitalize}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.tag-supporter{color:var(--dv-supporter);background:color-mix(in srgb,var(--dv-supporter) 12%,var(--surface))}
.tag-leaning{color:var(--dv-leaning);background:color-mix(in srgb,var(--dv-leaning) 12%,var(--surface))}
.tag-undecided{color:var(--ink-2)}
.tag-opposed{color:var(--dv-opposed);background:color-mix(in srgb,var(--dv-opposed) 12%,var(--surface))}
.tag-voted{color:#7c3aed;background:color-mix(in srgb,#7c3aed 12%,var(--surface))}

/* ---- alerts / flash ------------------------------------------------------ */
.alert{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface-2);font-size:14px;line-height:1.5}
.alert .ic{width:19px;height:19px;flex:none;margin-top:1px}
.alert-ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok-ink)}
.alert-err{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 24%,transparent);color:var(--danger-ink)}
.alert-info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 22%,transparent);color:var(--info-ink)}
.alert-warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 24%,transparent);color:var(--warn-ink)}

.hint{color:var(--ink-3);font-size:13.5px;line-height:1.55}
.muted{color:var(--ink-3)}

/* ---- contact / call card ------------------------------------------------- */
.contact-hd{display:flex;align-items:center;gap:14px}
.contact-hd .avatar{width:52px;height:52px;font-size:19px;box-shadow:var(--sh-1)}
.contact-id{min-width:0;flex:1}
.contact-id h1{font-size:clamp(20px,5vw,25px);font-weight:750;letter-spacing:-.02em;line-height:1.15}
.contact-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}

.progress{margin-top:2px}
.progress-track{height:7px;border-radius:var(--r-pill);background:var(--dv-track);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand),var(--brand-600));transition:width var(--med)}
.progress-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:6px}
.progress-meta b{color:var(--ink-2);font-weight:650}

.callout{display:flex;gap:12px;align-items:center;padding:13px 15px;border-radius:var(--r);
  background:linear-gradient(100deg,var(--warn-soft),color-mix(in srgb,var(--warn-soft) 40%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--warn) 24%,transparent)}
.callout .cico{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--warn-solid);color:#fff;box-shadow:0 4px 10px rgba(220,104,3,.3)}
.callout .cico .ic{width:20px;height:20px;stroke-width:2.2}
.callout b{color:var(--warn-ink);font-weight:750}
.callout p{font-size:13px;color:var(--warn-ink);opacity:.92;margin-top:1px}

/* who did you speak to */
.people{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.people-hd{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.people-hd .section-title{margin:0}
.linkbtn{background:none;border:0;color:var(--brand);font-size:12.5px;font-weight:650;padding:4px 6px;border-radius:6px}
.linkbtn:hover{background:var(--surface-3)}
.person{display:flex;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:var(--fast)}
.person:last-child{border-bottom:0}
.person:hover{background:var(--surface-2)}
.person input{position:absolute;opacity:0;width:0;height:0}
.person .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line-2);flex:none;
  display:grid;place-items:center;color:#fff;transition:var(--fast)}
.person .box .ic{width:14px;height:14px;stroke-width:3;opacity:0;transform:scale(.6)}
.person input:checked+.box{background:var(--brand);border-color:var(--brand)}
.person input:checked+.box .ic{opacity:1;transform:none}
.person input:focus-visible+.box{box-shadow:var(--ring)}
.person .meta{min-width:0;flex:1}
.person .meta b{display:block;font-size:14.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person .meta small{display:block;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person .tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}

/* outcomes */
.og{display:flex;flex-direction:column;gap:9px}
.ogrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.o{display:flex;align-items:center;gap:9px;min-height:54px;padding:11px 13px;
  border-radius:var(--r);border:1.5px solid var(--line-2);background:var(--surface);
  color:var(--ink);font-size:14.5px;font-weight:650;text-align:left;transition:var(--fast)}
.o .ic{width:18px;height:18px;flex:none;opacity:.85}
.o:hover{border-color:var(--ink-3);background:var(--surface-2)}
.o:active{transform:scale(.985)}
.o-sup{border-color:transparent;background:var(--ok-solid);color:#fff}
.o-sup:hover{filter:brightness(1.05);background:var(--ok-solid)}
.o-lean{border-color:transparent;background:var(--info-solid);color:#fff}
.o-lean:hover{filter:brightness(1.05);background:var(--info-solid)}
.o-und{border-color:transparent;background:#5b6472;color:#fff}
.o-und:hover{background:#5b6472;filter:brightness(1.06)}
.o-opp{border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:var(--danger-soft);color:var(--danger-ink)}
.o-dnc{border-color:transparent;background:var(--danger-solid);color:#fff}
.o-dnc:hover{background:var(--danger-solid);filter:brightness(1.05)}

.field{position:relative;margin-top:2px}
textarea,input.text{width:100%;background:var(--surface);color:var(--ink);
  border:1.5px solid var(--line-2);border-radius:var(--r);padding:13px 14px;font:inherit;
  transition:var(--fast);resize:vertical}
textarea:focus,input.text:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
textarea::placeholder,input.text::placeholder{color:var(--ink-3)}
label.lbl{display:block;font-size:12.5px;font-weight:650;color:var(--ink-2);margin-bottom:6px}
select.text{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:40px}

.foot-note{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:13px;margin-top:2px;line-height:1.5}
.foot-note .ic{width:15px;height:15px;flex:none;margin-top:1px}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* toggle switch */
.switch{display:flex;align-items:flex-start;gap:12px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:42px;height:25px;border-radius:999px;background:var(--line-2);flex:none;
  position:relative;transition:var(--fast);margin-top:1px}
.switch .knob{position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:var(--fast)}
.switch input:checked~.track{background:var(--brand)}
.switch input:checked~.track .knob{transform:translateX(17px)}
.switch input:focus-visible~.track{box-shadow:var(--ring)}
.switch-lbl b{display:block;font-size:14.5px;font-weight:650}
.switch-lbl small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ---- stat tiles / KPI ---------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.kpi .kico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px;
  background:var(--brand-soft);color:var(--brand-600)}
.kpi .kico .ic{width:18px;height:18px}
.kpi.k-ok .kico{background:var(--ok-soft);color:var(--ok)}
.kpi.k-warn .kico{background:var(--warn-soft);color:var(--warn)}
.kpi.k-danger .kico{background:var(--danger-soft);color:var(--danger)}
.kpi.k-info .kico{background:var(--info-soft);color:var(--info)}
.kpi b{display:block;font-size:28px;font-weight:750;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px;font-weight:500}

/* ---- charts -------------------------------------------------------------- */
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.legend i{width:11px;height:11px;border-radius:3px;flex:none}

.stack-bar{display:flex;height:34px;border-radius:9px;overflow:hidden;background:var(--dv-track);
  border:1px solid var(--line)}
.stack-bar span{height:100%;transition:width var(--med)}
.stack-bar span+span{box-shadow:-2px 0 0 var(--surface)}

.hbars{display:flex;flex-direction:column;gap:12px}
.hbar-row{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;font-size:13px}
.hbar-row .lab{color:var(--ink-2);font-weight:600;text-transform:capitalize;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{height:12px;border-radius:var(--r-pill);background:var(--dv-track);overflow:hidden}
.hbar-fill{height:100%;border-radius:var(--r-pill);min-width:4px;transition:width var(--med)}
.hbar-row .val{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
@media(max-width:480px){.hbar-row{grid-template-columns:92px 1fr auto;gap:9px}}

.coverage-ring{display:flex;align-items:center;gap:18px}
.coverage-ring figure{margin:0;position:relative;width:112px;height:112px;flex:none}
.coverage-ring figcaption{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.coverage-ring .pct{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.coverage-ring .pct b{font-size:24px;font-weight:750;font-variant-numeric:tabular-nums}
.coverage-ring .pct span{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}

/* ---- tables -------------------------------------------------------------- */
.wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;padding:11px 16px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-3);background:var(--surface-2);border-bottom:1px solid var(--line);
  position:sticky;top:0}
tbody td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.rank{width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--surface-3);color:var(--ink-2)}
.rank-1{background:#fef0c7;color:#b54708}
:root[data-theme="dark"] .rank-1{background:#2c1f0b;color:#fdb022}
.cellname{display:flex;align-items:center;gap:10px}

/* ---- login / hero -------------------------------------------------------- */
.hero{min-height:calc(100dvh - var(--bar-h));display:grid;place-items:center;padding:24px 16px}
.hero-card{width:100%;max-width:400px;text-align:center}
.hero-mark{width:60px;height:60px;border-radius:16px;margin:0 auto 18px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(140deg,var(--brand),var(--brand-700));box-shadow:var(--sh-brand)}
.hero-mark .ic{width:32px;height:32px;stroke-width:1.8}
.hero h1{font-size:23px;font-weight:750;letter-spacing:-.02em}
.hero .sub{color:var(--ink-3);font-size:14px;margin-top:6px;margin-bottom:22px}
.code-in{width:100%;text-align:center;font-size:22px;font-weight:600;letter-spacing:.28em;
  padding:15px;text-transform:uppercase;font-variant-numeric:tabular-nums}
.big-code{display:block;font-size:23px;font-weight:700;letter-spacing:.16em;padding:14px;text-align:center;
  background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;word-break:break-all}
code{background:var(--surface-2);padding:2px 7px;border-radius:6px;font-size:.92em;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* ---- misc ---------------------------------------------------------------- */
.empty-state{text-align:center;padding:28px 18px}
.empty-state .eico{width:56px;height:56px;border-radius:16px;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-3)}
.empty-state .eico .ic{width:26px;height:26px}
.empty-state h1{font-size:19px;font-weight:700}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.grid-2{grid-template-columns:1fr}}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   Mobile app frame — bottom tab bar + More sheet (native-app feel)
   ========================================================================== */
.tabbar{display:none}
.sheet,.sheet-backdrop{display:none}

@media(max-width:820px){
  /* the top pill nav is replaced by a bottom bar on phones/tablets */
  .nav{display:none}
  main{padding-bottom:calc(66px + env(safe-area-inset-bottom, 0px))}

  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:var(--surface);
    background:color-mix(in srgb,var(--surface) 90%,transparent);
    backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .tabbar a,.tabbar button{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 2px 6px;background:none;border:0;color:var(--ink-3);
    font-size:10.5px;font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent;
  }
  .tabbar .ic-wrap{display:grid;place-items:center;width:52px;height:30px;border-radius:999px;transition:var(--fast)}
  .tabbar .ic{width:23px;height:23px}
  .tabbar a[aria-current="page"],.tabbar .tab-more.on{color:var(--brand)}
  .tabbar a[aria-current="page"] .ic-wrap,.tabbar .tab-more.on .ic-wrap{background:var(--brand-soft)}
  .tabbar a:active .ic-wrap,.tabbar button:active .ic-wrap{transform:scale(.9)}

  /* the app bar loses the collapsible user chip on phones — identity lives in More */
  .userchip .who{display:none}

  .sheet-backdrop{display:block;position:fixed;inset:0;z-index:60;background:rgba(6,9,15,.45);
    opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px)}
  .sheet-backdrop.open{opacity:1;pointer-events:auto}
  .sheet{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:61;
    background:var(--surface);border-top:1px solid var(--line);
    border-radius:22px 22px 0 0;box-shadow:0 -18px 50px rgba(6,9,15,.28);
    transform:translateY(101%);transition:transform .3s var(--ease);
    padding:0 12px calc(env(safe-area-inset-bottom, 0px) + 14px);
    max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .sheet.open{transform:none}
}

.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--line-2);margin:9px auto 4px}
.sheet-id{display:flex;align-items:center;gap:12px;padding:8px 8px 14px;border-bottom:1px solid var(--line)}
.sheet-id .avatar{width:42px;height:42px;font-size:15px}
.sheet-id b{display:block;font-size:15.5px;font-weight:650}
.sheet-id span{font-size:12.5px;color:var(--ink-3);text-transform:capitalize}
.sheet-id .iconbtn{margin-left:auto}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:14px 4px}
.menu-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;border-radius:14px;
  color:var(--ink-2);text-decoration:none;font-size:11.5px;font-weight:600;text-align:center;line-height:1.2}
.menu-item .ic{width:23px;height:23px}
.menu-item:active{background:var(--surface-2)}
.menu-item[aria-current="page"]{background:var(--brand-soft);color:var(--brand)}
.sheet-actions{border-top:1px solid var(--line);padding-top:8px}
.sheet-row{display:flex;align-items:center;gap:13px;width:100%;padding:13px 10px;border:0;background:none;
  color:var(--ink);font:inherit;font-size:15px;font-weight:550;text-decoration:none;border-radius:12px;text-align:left}
.sheet-row:active{background:var(--surface-2)}
.sheet-row .ic{width:20px;height:20px;color:var(--ink-3);flex:none}
.sheet-row em{margin-left:auto;color:var(--ink-3);font-style:normal;font-size:13px;font-weight:600}

/* ---- small-screen refinements ------------------------------------------- */
@media(max-width:520px){
  .btnrow{flex-direction:column}
  .spread.stack-sm{flex-direction:column;align-items:stretch}
  .spread.stack-sm>form{width:100%}
  .spread.stack-sm .btn{width:100%}
  .card-hd{flex-wrap:wrap}
  .card-hd .sub{width:100%;order:3}
}
@media(max-width:820px){.appbar-install{display:none}}
@media(max-width:400px){
  .brand small{display:none}
  .menu-grid{grid-template-columns:repeat(3,1fr)}
}
body.sheet-open{overflow:hidden}