/* ══════════════════════════════════════════════════════════════════════════
   MINISTRY COMMAND — design system                                  V3.88
   A leadership operating system for pastors.

   Principles
   · Typography carries the hierarchy. Schibsted Grotesk for display, Instrument
     Sans for the interface, Instrument Serif italic only for scripture.
   · Ivory ground, white surfaces, hairline rules. No glass, no glow.
   · Gold is the brand mark — rules, active states, counts. It never carries
     text on ivory (1.96:1); text-safe gold is --accent-ink.
   · Colour means status: ok / warn / bad. The one exception is the notification
     type tile (section 23): six indicator colours, on the tile only.
   · Ink is the action colour: primary buttons and the navigation dock.

   Layer order: app.css (legacy layout) → mc.css (this file, authoritative).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Typefaces (self-hosted, OFL — see /fonts/LICENSE-*) ─────────────── */
@font-face{font-family:'Schibsted Grotesk';src:url('/fonts/schibsted-grotesk.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrument-sans.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrument-sans-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root{
  /* the brief's five */
  --mc-gold:#D4AF37; --mc-ivory:#F8F7F3; --mc-ink:#111111; --mc-slate:#6B7280; --mc-stone:#E7E5E4;

  /* neutrals */
  --bg:#F8F7F3;            /* page ground */
  --surface:#FFFFFF;       /* cards, sheets, inputs */
  --surface-2:#F3F1EC;     /* sunken: hover, tracks, empty states */
  --surface-3:#EBE8E1;     /* pressed / selected */
  --line:#E7E5E4;          /* hairline */
  --line-strong:#D6D3D1;   /* input borders, emphasised rules */
  --ink:#111111;           /* primary text 17.6:1 */
  --ink-dim:#3D4148;       /* strong secondary */
  --muted:#5F6470;         /* secondary text — the brief's #6B7280 darkened so it holds AA on every surface (4.8:1 worst case) */
  --muted-2:#565B66;       /* micro-caps labels */
  --faint:#8A8F99;         /* placeholders, disabled */

  /* brand */
  --accent:#D4AF37;        /* gold — fills, rules, marks */
  --accent-ink:#7A5D0E;    /* gold that can carry text, 5.8:1 */
  --accent-soft:#FAF3DD;   /* gold wash */
  --accent-line:#E9D58F;
  --on-accent:#111111;     /* anything placed on gold */

  /* status — the only other colours in the system */
  --ok:#166534;   --ok-dot:#16A34A;   --ok-soft:#EDF7EF;
  --warn:#92400E; --warn-dot:#D97706; --warn-soft:#FDF3E3; --warn-num:#B45309;
  --bad:#B91C1C;  --bad-dot:#DC2626;  --bad-soft:#FCEDED;
  --info:#5F6470; --info-soft:#F3F1EC;
  --ok-soft-legacy:var(--ok-soft);

  /* type */
  --display:'Schibsted Grotesk','Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  /* shape + depth */
  --r-sm:8px; --r:10px; --r-lg:12px; --r-xl:16px;
  --elev-1:0 1px 2px rgba(17,17,17,.04);
  --elev-2:0 1px 2px rgba(17,17,17,.04),0 6px 16px -10px rgba(17,17,17,.12);
  --elev-3:0 18px 44px -18px rgba(17,17,17,.28),0 2px 6px rgba(17,17,17,.05);
  --ring:0 0 0 3px rgba(212,175,55,.40);
  --ease:cubic-bezier(.2,.8,.2,1);
  --sidebar-w:248px;
  --dock-h:60px;

  /* legacy aliases — app.css still reads these */
  --base:var(--bg); --base-2:#FBFAF7; --ember:var(--bg); --ember-2:#FBFAF7;
  --glass-border:var(--line); --line-2:var(--line-strong);
  --accent-2:var(--accent-ink);
  --accent-grad:linear-gradient(0deg,#D4AF37,#D4AF37);
  --accent-glow:rgba(17,17,17,0);
  --aur-1:#D4AF37; --aur-2:#D4AF37; --aur-3:#D4AF37; --aur-grad:var(--accent-grad);
  --fire-1:#D4AF37; --fire-2:#D4AF37; --fire-3:#D4AF37; --fire-grad:var(--accent-grad);
  --gold-1:#D4AF37; --gold-2:#D4AF37; --gold-3:#D4AF37; --gold-grad:var(--accent-grad);
  --dunamis:var(--ink-dim); --koinonia:var(--ink-dim); --rhema:var(--ink-dim); --agape:var(--ink-dim); --phos:var(--ink-dim);
  --dunamis-grad:var(--surface-3); --koinonia-grad:var(--surface-3); --rhema-grad:var(--surface-3); --agape-grad:var(--surface-3); --phos-grad:var(--surface-3);
  --ok-soft-a:var(--ok-soft); --warn-soft-a:var(--warn-soft); --bad-soft-a:var(--bad-soft);
  --rail:transparent;
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:15px;line-height:1.5;color:var(--ink);background:var(--bg) !important;background-image:none !important;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}
button{color:inherit}
::selection{background:rgba(212,175,55,.32);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D9D6CF;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#C8C4BB}
a{color:var(--ink);text-decoration-color:var(--line-strong);text-underline-offset:3px}

/* retired atmosphere: orbs, grid, ember canvas */
.bg-wrap,.bg-orb,.bg-grid,#ember-canvas{display:none !important}

/* every legacy entrance animation collapses to one quiet fade */
.module.active{animation:mcIn .2s var(--ease) both}
.module.active .sec{animation:none}
@keyframes mcIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── 3. Typography ──────────────────────────────────────────────────────── */
h1,h2,h3,.tb-title,.mht,.login-title,.phead h1,.page-head h1{font-family:var(--display);color:var(--ink);letter-spacing:-.02em}
.mc-eyebrow{font:700 11px/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.mc-num{font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.tbl td,.tbl th,.att-card-v,.att-stat-v,.sum-line .sv,.metric .mn,.navnum,.att-badge,.nbadge,
.pc-v,.na-n,.up-day,.fsc-v,.fnc-v,.fmc-v,.cc-v,.dv,.cmp-v{font-variant-numeric:tabular-nums}

/* section labels: tracked micro-caps with a rule that runs to the edge */
.block-label,.att-eyebrow,.mdash-h,.sec-title,.att-consist-t,.bday-h,.fin-panel-h,.oc-head{
  display:flex;align-items:center;gap:12px;
  font:700 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  margin:26px 0 12px;background:none}
.block-label::after,.att-eyebrow::after,.mdash-h::after,.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}
.att-sech{display:flex;align-items:center;gap:12px;margin:26px 0 12px}
.att-sech .att-eyebrow{margin:0 !important;flex:1}

/* numbered section headers (01/02…) were decoration, not sequence */
.sec-h{display:flex;align-items:center;gap:12px;margin:30px 0 14px;flex-wrap:wrap}
.sec-h .ey{display:none}
.sec-h h2{font-family:var(--display);font-size:19px;font-weight:750;letter-spacing:-.02em;margin:0}
.sec-h .ln2{flex:1;height:1px;background:var(--line)}

/* ── 4. Shell — sidebar ─────────────────────────────────────────────────── */
.sidebar{background:var(--base-2) !important;border-right:1px solid var(--line);box-shadow:none;padding:18px 12px 14px;gap:0}
.brand,.brand-btn{display:flex;align-items:center;gap:11px;padding:4px 10px 22px;background:none;border:none;cursor:pointer;width:100%;text-align:left}
.brand img{display:none}
.mc-mark{width:30px;height:22px;flex:none;color:var(--accent)}
.mc-word{display:flex;flex-direction:column;gap:3px;min-width:0}
.mc-word b{font:800 11.5px/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.mc-word span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{gap:1px;margin-top:0}
.nav-group{margin-bottom:6px}
.nav-sec{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;
  font:700 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);padding:16px 12px 8px}
.nav-sec-caret{font-size:10px;color:var(--faint)}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:var(--r);border:none !important;
  background:none;color:var(--ink-dim);font-size:14px;font-weight:550;letter-spacing:0;min-height:38px;width:100%;text-align:left;cursor:pointer}
.nav-item .ni{width:20px;color:var(--muted);display:inline-flex;justify-content:center}
.nav-item:hover{background:var(--surface-2);color:var(--ink);padding-left:12px}
.nav-item.active{background:#ECEAE4;color:var(--ink);font-weight:650;border-radius:var(--r) !important}
.nav-item.active .ni{color:var(--ink)}
.nav-item.active::before,.nav-item.active::after{display:none}
.navnum{background:var(--accent);color:var(--on-accent);font:800 10.5px/1 var(--body);border-radius:999px;padding:3px 7px;margin-left:auto}
.nav-foot{border-top:1px solid var(--line);padding:14px 10px 4px;color:var(--muted);font-size:12px;margin-top:auto}
.nav-foot b{color:var(--ink-dim)}
.sb-foot-acts{display:flex;gap:8px;margin-top:10px}
.sb-toggle{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:999px}

/* ── 5. Shell — top bar ─────────────────────────────────────────────────── */
.topbar{background:var(--bg) !important;border-bottom:1px solid var(--line);box-shadow:none !important;padding:12px 28px;min-height:64px;gap:10px}
.topbar::before,.topbar::after{display:none}
.menu-btn{background:transparent;border:none;color:var(--ink);width:40px;height:40px;border-radius:999px;font-size:20px}
.menu-btn:hover{background:var(--surface-2)}
.tb-title{font-family:var(--display);font-size:19px;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
.tb-sub{font-size:12.5px;color:var(--muted)}
.topbar .search{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:8px 12px;min-width:240px;box-shadow:none}
.topbar .search input{color:var(--ink);font-size:14px}
.search input::placeholder{color:var(--faint)}
.icon-btn{background:transparent;border:1px solid transparent;color:var(--ink-dim);width:40px;height:40px;border-radius:999px;display:grid;place-items:center;box-shadow:none !important}
.icon-btn:hover{background:var(--surface-2);border-color:transparent}
.icon-btn .svgic{width:20px;height:20px}
.nbadge{background:var(--accent) !important;color:var(--on-accent) !important;font:800 10px/1 var(--body);min-width:18px;height:18px;border-radius:999px;
  display:grid;place-items:center;padding:0 5px;top:2px;right:0;border:2px solid var(--bg);box-shadow:none}
.leader-chip{background:transparent !important;border:none !important;box-shadow:none !important;padding:4px 6px 4px 4px;gap:10px;border-radius:999px}
.leader-chip:hover{background:var(--surface-2) !important}
.leader-chip .av{width:34px;height:34px;border-radius:999px;background-color:var(--ink) !important;color:#FFF !important;font:700 12.5px var(--body);letter-spacing:.04em}
.leader-chip .lt .lr{font-size:11.5px;color:var(--muted)}
.leader-chip .lt .ln{font-size:13.5px;font-weight:650;color:var(--ink)}
.switch-role{display:none}                 /* sign out lives in the menu now */
.crumbs{padding:14px 28px 0;font-size:12.5px;color:var(--muted)}
.crumbs button,.crumbs a{color:var(--muted)}
.crumbs b,.crumbs .cur{color:var(--ink)}
.content{padding:24px 32px 120px;max-width:1180px}

/* ── 6. Shell — mobile: drawer + floating dock ──────────────────────────── */
.scrim{background:rgba(17,17,17,.28) !important}
@media(max-width:1080px){
  .sidebar{background:var(--surface) !important;width:288px;box-shadow:var(--elev-3);z-index:120}
}
@media(max-width:720px){
  .topbar{padding:10px 12px;min-height:58px}
  .tb-title{font-size:18px}
  .crumbs{padding:12px 16px 0}
  .content{padding:14px 16px calc(var(--dock-h) + 44px + env(safe-area-inset-bottom,0px))}
  .leader-chip{padding:2px}
}

/* the dock: one ink object floating above the page. Inactive = icon only;
   the active destination expands into a gold capsule with its label. */
.botnav{display:none}
@media(max-width:720px){
  .botnav{display:flex !important;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    height:var(--dock-h);padding:6px;gap:4px;align-items:center;justify-content:space-between;
    background:#111111 !important;border:none !important;border-radius:22px;z-index:80;
    box-shadow:0 14px 34px -12px rgba(17,17,17,.45),0 2px 6px rgba(17,17,17,.12) !important;
    max-width:520px;margin:0 auto}
  .bn-item{position:relative;flex:1 1 0;min-width:44px;height:48px;display:flex;align-items:center;justify-content:center;gap:7px;
    background:transparent;border:none;border-radius:16px;color:rgba(248,247,243,.66);cursor:pointer;padding:0 10px;
    transition:flex-grow .25s var(--ease),background .2s var(--ease),color .2s var(--ease)}
  .bn-item::before{display:none !important}
  .bn-item .bn-ic{display:grid;place-items:center}
  .bn-item .bn-ic .svgic{width:22px;height:22px}
  .bn-item .bn-lb{display:none;font:700 13px/1 var(--body);letter-spacing:.01em;white-space:nowrap}
  .bn-item.on{flex:2.3 1 0;background:var(--accent);color:var(--on-accent)}
  .bn-item.on .bn-lb{display:inline}
  .bn-item:not(.on):active{background:rgba(248,247,243,.08)}
  .bn-dot{position:absolute;top:8px;right:calc(50% - 16px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;
    background:var(--accent);color:var(--on-accent);font:800 9.5px/16px var(--body);text-align:center;border:2px solid #111}
  .bn-item.on .bn-dot{display:none}
  /* inside a conversation the dock steps aside — the thread owns the screen */
  body.chat-fs .botnav{display:none !important}
}

/* ── 7. Buttons ─────────────────────────────────────────────────────────── */
.btn{font-family:var(--body);font-weight:650;font-size:14px;letter-spacing:0;border-radius:var(--r);padding:9px 16px;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  box-shadow:none !important;transform:none !important;filter:none !important;transition:background .15s,border-color .15s,color .15s}
.btn-sm{min-height:34px;padding:6px 12px;font-size:13px;border-radius:var(--r-sm)}
.btn-primary{background:var(--ink) !important;background-image:none !important;color:#FFFFFF !important;border-color:var(--ink) !important}
.btn-primary:hover{background:#2B2B2B !important;border-color:#2B2B2B !important}
.btn-primary:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:var(--surface);color:var(--ink) !important;border-color:var(--line-strong) !important}
.btn-ghost:hover{background:var(--surface-2) !important;border-color:var(--line-strong) !important;color:var(--ink) !important}
.btn-gold{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-gold:hover{background:#C9A42E}
.btn-danger{background:var(--surface) !important;color:var(--bad) !important;border-color:#EBC5C5 !important}
.btn-danger:hover{background:var(--bad-soft) !important}
.btn .svgic{width:16px;height:16px}
.linklike,.lnk{background:none;border:none;color:var(--ink);font-weight:650;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;padding:0}
.linklike:hover,.lnk:hover{text-decoration-color:var(--ink)}
.mc-link{background:none;border:none;padding:0;cursor:pointer;font:650 13px var(--body);color:var(--accent-ink);display:inline-flex;align-items:center;gap:4px}
.mc-link:hover{color:var(--ink)}

/* ── 8. Forms ───────────────────────────────────────────────────────────── */
.field{gap:7px}
.field label,.fld-label{font-size:13px;font-weight:650;color:var(--ink-dim);letter-spacing:0;text-transform:none}
.field label .req,.req{color:var(--bad)}
.field input,.field select,.field textarea,.notes-area,.sel-wrap select,.msg-reply input,
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=password],input[type=search],select,textarea{
  background:var(--surface) !important;border:1px solid var(--line-strong) !important;border-radius:var(--r) !important;
  color:var(--ink) !important;font:400 15px/1.4 var(--body);padding:10px 12px;min-height:44px;box-shadow:none !important}
textarea,.notes-area{min-height:96px;line-height:1.5}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C4C0BA !important}
.field input:focus,.field select:focus,.field textarea:focus,.notes-area:focus,.sel-wrap select:focus,.msg-reply input:focus,
input:focus,select:focus,textarea:focus{border-color:var(--ink) !important;box-shadow:var(--ring) !important;outline:none}
input::placeholder,textarea::placeholder{color:var(--faint) !important;opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--ink);width:18px;height:18px;min-height:0;padding:0}
.sel-wrap{position:relative}
.sel-wrap .chev,.chev{color:var(--muted);font-size:10px}
.remember{color:var(--ink-dim);font-size:13.5px}
.login-err,.err{color:var(--bad);font-size:13px;font-weight:600}
.fgrid{gap:14px 16px}

/* ── 9. Surfaces: cards, panels, rows ───────────────────────────────────── */
.glass,.metric,.chart-card,.rcard,.lead-card,.res-card,.vid-card,.book,.mis-card,.stu-card,.teevo-card,.insight,
.overlay-card,.fin-panel,.fin-stat,.sum-card,.role-card,.card,.att-card,.mcard,.ts-list,.tcard,.cal-wrap{
  background:var(--surface) !important;background-image:none !important;border:1px solid var(--line) !important;
  border-radius:var(--r-lg);box-shadow:var(--elev-1) !important}
.glass::before,.glass::after,.metric::before,.metric::after{display:none !important}
.pad{padding:20px}
.chart-card{padding:18px 20px}
.cc-h .cct{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--ink)}
.cc-h .ccs{font-size:12px;color:var(--muted)}
.sum-line{border-bottom:1px solid var(--line);padding:9px 0}
.sum-line .sk{color:var(--muted)} .sum-line .sv{color:var(--ink);font-weight:650}
.scope-note{background:none !important;border:none !important;box-shadow:none !important;padding:0 0 4px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}
.scope-note .sni{display:none}
.sec-note,.muted{color:var(--muted)}

/* list rows — status rails appear only when the row carries a status */
.att-row,.att-qrow,.rep-row,.msg-row,.mis-card{background:var(--surface) !important;border:1px solid var(--line) !important;
  border-radius:var(--r-lg);box-shadow:none !important;position:relative;overflow:hidden}
.att-row::before,.att-qrow::before,.rep-row::before,.msg-row::before,.mis-card::before,.lg-stat::before{background:var(--rail) !important;width:3px !important}
.att-row:has(.chip-bad),.att-qrow:has(.chip-bad),.rep-row:has(.sev-High),.rep-row:has(.sev-Urgent){--rail:var(--bad-dot)}
.att-row:has(.chip-warn),.att-qrow:has(.chip-warn){--rail:var(--warn-dot)}
.att-row:has(.chip-ok),.att-qrow:has(.chip-ok){--rail:var(--ok-dot)}
.att-row-sub,.rep-m,.ms2,.lm2,.pmeta{color:var(--muted)}
.msg-sub{color:var(--ink)}
.rep-t,.ln2,.mn2{color:var(--ink)}
.rep-chev{color:var(--faint)}
.rep-list{gap:8px}

/* ── 10. Chips, badges, pills ───────────────────────────────────────────── */
.att-chip,.chip,.ci-tag,.rolebadge,.role-chip,.leader-tag,.squad-tag,.badge,.hpill,.msg-kind,.fschip,.rc-pill,.pick-role{
  display:inline-flex;align-items:center;gap:5px;background:var(--surface-2) !important;background-image:none !important;
  border:1px solid var(--line) !important;color:var(--ink-dim) !important;border-radius:999px;
  font:650 11.5px/1.2 var(--body) !important;letter-spacing:.01em !important;text-transform:none !important;padding:3px 9px !important;white-space:nowrap;box-shadow:none !important}
.squad-tag{color:var(--ink-dim) !important}
.chip-ok,.b-yes,.b-grad,.hp-excellent,.hp-healthy,.st-ok{background:var(--ok-soft) !important;border-color:#CDE7D3 !important;color:var(--ok) !important}
.chip-warn,.b-pend,.b-warn,.hp-attention,.st-warn{background:var(--warn-soft) !important;border-color:#F3DDB8 !important;color:var(--warn) !important}
.chip-bad,.hp-critical,.st-bad{background:var(--bad-soft) !important;border-color:#F2CACA !important;color:var(--bad) !important}
.b-no,.b-neutral,.b-enr{background:var(--surface-2) !important;color:var(--ink-dim) !important}
.chip-gold{background:var(--accent-soft) !important;border-color:var(--accent-line) !important;color:var(--accent-ink) !important}
.att-badge{background:var(--accent) !important;color:var(--on-accent) !important;border:none !important;font:800 10.5px/1 var(--body);border-radius:999px;padding:3px 7px;margin-left:6px}
.mc-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
.mc-dot.ok{background:var(--ok-dot)} .mc-dot.warn{background:var(--warn-dot)} .mc-dot.bad{background:var(--bad-dot)} .mc-dot.gold{background:var(--accent)}

/* avatars: neutral by default — identity comes from initials and photos, not colour */
.ma,.pav,.ca,.la,.av,.mlite .ma,.bday-row .ma,.chat-li .ca,.mc-av{background-color:#ECEAE4 !important;color:var(--ink-dim) !important;
  font-family:var(--body) !important;font-weight:700 !important;letter-spacing:.02em}
.ma.has-photo,.pav.has-photo{background-size:cover !important;background-position:center !important;color:transparent !important}
.ma{border-radius:999px !important}
.pres-dot,.av-on::after{background:var(--ok-dot) !important;border-color:var(--surface) !important}

/* ── 11. Tabs and segmented controls ───────────────────────────────────── */
.att-tabs,.tabs,.tabbar,.ptabs{display:flex;gap:22px !important;border-bottom:1px solid var(--line);padding:0 !important;margin-bottom:18px;
  overflow-x:auto;scrollbar-width:none;background:transparent !important;position:static !important}
.att-tabs::-webkit-scrollbar,.tabbar::-webkit-scrollbar{display:none}
.tab-pill{background:none !important;border:none !important;border-radius:0 !important;padding:11px 0 !important;margin:0 !important;
  color:var(--muted) !important;font:650 14px/1 var(--body) !important;border-bottom:2px solid transparent !important;box-shadow:none !important;white-space:nowrap;cursor:pointer}
.tab-pill:hover{color:var(--ink) !important}
.tab-pill.on{color:var(--ink) !important;border-bottom-color:var(--ink) !important}
/* second-level switches (views inside a tab) are segmented controls */
.seg,.mc-seg{display:inline-flex;background:var(--surface-2) !important;border:1px solid var(--line) !important;border-radius:var(--r);padding:3px;gap:2px}
.seg-b,.mc-seg button,[data-att-view],[data-att-sumtab],[data-mematt]{background:transparent !important;border:none !important;border-radius:var(--r-sm) !important;
  color:var(--muted-2) !important;font:650 13px/1 var(--body) !important;padding:8px 12px !important;margin:0 !important;cursor:pointer;white-space:nowrap}
.seg-b.active,.mc-seg button.on,[data-att-view].on,[data-att-sumtab].on,[data-mematt].on{background:var(--surface) !important;color:var(--ink) !important;box-shadow:var(--elev-2) !important}

/* ── 12. Tables ─────────────────────────────────────────────────────────── */
.tbl{border-collapse:separate;border-spacing:0;font-size:14px}
.tbl th{background:var(--surface-2) !important;color:var(--muted-2) !important;font:700 10.5px/1.2 var(--body) !important;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--line) !important;padding:10px 12px}
.tbl td{color:var(--ink);border-bottom:1px solid var(--line) !important;padding:12px}
.tbl tr:last-child td{border-bottom:none !important}
.tbl tr:hover td{background:#FBFAF7}
.tbl-wrap,.att-tblwrap{border-radius:var(--r-lg)}
.rank{font-family:var(--display);font-weight:750;color:var(--muted)}

/* ── 13. Overlays: modals become sheets on phones ───────────────────────── */
.overlay{background:rgba(17,17,17,.34) !important}
.modal,.pal{background:var(--surface) !important;background-image:none !important;border:1px solid var(--line) !important;border-radius:var(--r-xl) !important;
  box-shadow:var(--elev-3) !important;color:var(--ink)}
.modal-h{border-bottom:1px solid var(--line);padding:18px 20px;gap:12px}
.modal-h .mhi{width:38px;height:38px;border-radius:var(--r);background:var(--surface-2) !important;color:var(--ink);font-size:17px;border:1px solid var(--line)}
.modal-h .mht{font-family:var(--display);font-weight:750;font-size:19px;letter-spacing:-.02em}
.modal-h .mhs{color:var(--muted);font-size:13px}
.modal-h .mx{border:none !important;background:var(--surface-2) !important;color:var(--ink-dim) !important;border-radius:999px;width:34px;height:34px}
.modal-b{padding:20px}
.modal-f{border-top:1px solid var(--line);padding:14px 20px;background:var(--surface)}
@media(max-width:720px){
  .overlay{align-items:flex-end !important;padding:0 !important}
  .modal{max-width:100% !important;width:100% !important;border-radius:18px 18px 0 0 !important;max-height:92dvh;border-bottom:none !important}
  .modal-b{max-height:calc(92dvh - 150px)}
  .modal-f{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}

/* dropdown panels: notifications, search */
.drop{background:var(--surface) !important;background-image:none !important;border:1px solid var(--line) !important;border-radius:14px !important;box-shadow:var(--elev-3) !important;padding:6px}
.drop-h{color:var(--ink);font-weight:700;font-size:14px;border-bottom:1px solid var(--line);padding:10px 12px}
.sr,.nf-row,.notif-row{color:var(--ink);border-radius:var(--r-sm)}
.sr:hover,.nf-row:hover{background:var(--surface-2)}
.sr-h{font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.srm{color:var(--muted)}
.pal-hint{color:var(--muted)}

/* toasts: ink, quiet, above the dock */
.toast{background:var(--ink) !important;background-image:none !important;color:#F8F7F3 !important;border:none !important;border-radius:var(--r-lg);
  box-shadow:var(--elev-3) !important;font-size:14px;font-weight:550}
.toast .ti{display:none}
.toast.warn{background:#3A1414 !important}
@media(max-width:720px){ .toasts{bottom:calc(var(--dock-h) + 24px + env(safe-area-inset-bottom,0px)) !important} }

/* empty + loading */
.empty{background:var(--surface-2) !important;border:none !important;border-radius:var(--r-lg);color:var(--muted-2) !important;font-style:normal !important;
  font-size:14px;padding:22px 18px;text-align:center}
.fin-loading,.mc-loading{color:var(--muted)}
.mc-skel{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2) 0%,#ECE9E2 50%,var(--surface-2) 100%);background-size:200% 100%;animation:mcSkel 1.2s linear infinite}
@keyframes mcSkel{from{background-position:200% 0}to{background-position:-200% 0}}

/* inline SVG icons inherit colour */
.svgic{flex:none;vertical-align:-3px}

/* ── 14. Login ─────────────────────────────────────────────────────────── */
.login{background:var(--bg) !important;align-items:center}
.login-box{max-width:420px !important}
.login-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.login-brand img{display:none}
.login-brand img.login-logo{display:block;width:184px;height:auto;max-width:60%;margin:0 0 26px -6px}
.login-mark{display:flex;align-items:center;gap:12px}
.login-mark .mc-mark{width:36px;height:26px}
.login-mark b{font:800 12.5px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.login-ver{font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.login-title{text-align:left !important;font-family:var(--display) !important;font-weight:800;font-size:44px !important;letter-spacing:-.04em !important;line-height:1 !important;margin-top:34px}
.login-title em{background:none !important;-webkit-text-fill-color:currentColor;color:var(--ink) !important;font-style:normal}
.login-rule{width:40px;height:3px;background:var(--accent);border-radius:2px;margin:18px 0 16px}
.login-sub{text-align:left !important;color:var(--muted) !important;font-size:15px}
.login-card{background:var(--surface) !important;border:1px solid var(--line) !important;box-shadow:var(--elev-2) !important;padding:22px !important;border-radius:var(--r-xl) !important}
.login-note{text-align:left !important;color:var(--muted) !important;font-size:12.5px}

/* ══════════════════════════════════════════════════════════════════════════
   SCREENS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 15. Home: the pastor's briefing ───────────────────────────────────── */
.hd{max-width:1120px;margin:0 auto}
.hd-hero{position:relative;padding:12px 0 30px;border-bottom:1px solid var(--line)}
.hd-top{display:flex;align-items:flex-start;gap:16px}
.hd-eyebrow{font:700 11px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.hd-name{font-family:var(--display);font-weight:800;font-size:clamp(40px,10.5vw,64px);line-height:.98;letter-spacing:-.045em;color:var(--ink);margin:12px 0 0}
.hd-rule{width:44px;height:3px;border-radius:2px;background:var(--accent);margin:20px 0 18px}
.hd-word{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(19px,4.9vw,24px);line-height:1.3;color:var(--ink);max-width:32ch;margin:0}
.hd-ref{margin-top:10px;font:700 10.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
.hd-meta{margin-top:18px;font-size:13px;color:var(--muted)}
.hd-teevo{margin-left:auto;flex:none}
.hd-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.hd-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:44px;margin-top:30px;align-items:start}
.hd-col{display:flex;flex-direction:column;gap:38px;min-width:0}
.hd-sec-h{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.hd-sec-t{font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.hd-sec-t::after{content:"";flex:1;height:1px;background:var(--line)}
.hd-count{font:800 11px/1 var(--body);color:var(--on-accent);background:var(--accent);border-radius:999px;padding:3px 7px;letter-spacing:0}
@media(max-width:900px){
  .hd-grid{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:26px}
  .hd-col{display:contents}
  .hd-attn{order:1} .hd-up{order:2} .hd-pulse{order:3} .hd-act{order:4}
  .hd-grid>.hd-col>section{margin-bottom:0}
}

/* needs attention — a ledger: the number leads, the sentence explains */
.na{border-top:2px solid var(--ink)}
.na-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:16px 2px;
  background:none;border:none;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;color:var(--ink)}
.na-row:hover{background:#FBFAF7}
.na-n{font-family:var(--display);font-weight:750;font-size:31px;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.na-row.t-bad .na-n{color:var(--bad)}
.na-row.t-warn .na-n{color:var(--warn-num)}
.na-l{font-size:15.5px;font-weight:620;line-height:1.3;color:var(--ink)}
.na-s{font-size:13px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-chev{color:var(--faint);transition:transform .2s var(--ease);display:grid;place-items:center}
.na-row[aria-expanded="true"] .na-chev{transform:rotate(90deg);color:var(--ink)}
.na-items{padding:2px 0 14px 70px;border-bottom:1px solid var(--line)}
.na-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.na-item:first-child{border-top:none}
.na-item-main{flex:1;min-width:0;cursor:pointer}
.na-item-t{font-size:14.5px;font-weight:620;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-item-s{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-item-acts{display:flex;gap:6px;flex:none}
.na-more{padding-top:10px}
.na-clear{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r-lg);background:var(--accent-soft);border:1px solid var(--accent-line);margin-top:4px}
.na-clear-ic{width:40px;height:40px;border-radius:999px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
.na-clear b{font-family:var(--display);font-size:17px;font-weight:750;letter-spacing:-.01em;display:block}
.na-clear span{font-size:13.5px;color:var(--ink-dim)}
@media(max-width:720px){
  .na-row{grid-template-columns:50px minmax(0,1fr) auto;padding:15px 0}
  .na-n{font-size:28px}
  .na-items{padding-left:0}
  .na-item{flex-wrap:wrap}
  .na-item-acts{width:100%;justify-content:flex-start}
}

/* upcoming — agenda, not calendar */
.up{border-top:1px solid var(--line)}
.up-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;padding:12px 0;
  border:none;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--ink)}
.up-date{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.up-dow{font:700 9.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.up-day{font-family:var(--display);font-weight:750;font-size:19px;line-height:1.05;margin-top:4px}
.up-date.today{background:var(--ink);border-color:var(--ink);color:#FFF}
.up-date.today .up-dow{color:rgba(248,247,243,.78)}
.up-name{font-size:15px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-meta{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-kind{font:700 10px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.up-bday{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-dim)}
.up-bday b{color:var(--ink)}
.up-empty{padding:16px 0;color:var(--muted);font-size:14px;border-bottom:1px solid var(--line)}

/* ministry pulse — four quiet figures */
.pulse{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.pc{padding:16px 0;border-bottom:1px solid var(--line);background:none;border-left:none;border-right:none;border-top:none;text-align:left;cursor:pointer;color:var(--ink);min-width:0}
.pc:nth-child(odd){padding-right:16px;border-right:1px solid var(--line)}
.pc:nth-child(even){padding-left:16px}
.pc-v{font-family:var(--display);font-weight:750;font-size:28px;line-height:1;letter-spacing:-.035em;color:var(--ink)}
.pc-l{font-size:13px;color:var(--muted);margin-top:7px}
.pc-s{font-size:12px;font-weight:700;margin-top:3px}
.pc-s.ok{color:var(--ok)} .pc-s.warn{color:var(--warn)} .pc-s.bad{color:var(--bad)} .pc-s.mute{color:var(--muted)}

/* recent activity */
.act{border-top:1px solid var(--line)}
.act-row{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 0;border:none;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--ink)}
.act-ic{width:32px;height:32px;border-radius:999px;background:var(--surface-2);color:var(--ink-dim);display:grid;place-items:center;flex:none}
.act-ic .svgic{width:15px;height:15px}
.act-body{flex:1;min-width:0}
.act-t{font-size:14px;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.act-m{font-size:12px;color:var(--muted);margin-top:3px}

/* ── 16. Attendance: insights first ────────────────────────────────────── */
.ai-sel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.ai-opt{background:none;border:none;border-right:1px solid var(--line);padding:14px 14px 13px;text-align:left;cursor:pointer;color:var(--ink);min-width:0;position:relative}
.ai-opt:last-child{border-right:none}
.ai-opt .ai-n{font-family:var(--display);font-weight:750;font-size:26px;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.ai-opt .ai-l{font-size:12.5px;font-weight:650;margin-top:6px;color:var(--ink-dim);display:flex;align-items:center;gap:6px;white-space:nowrap}
.ai-opt .ai-d{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-opt.on{background:#FBFAF7}
.ai-opt.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink)}
.ai-list{margin-top:14px;border-top:1px solid var(--line)}
.ai-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ai-main{flex:1;min-width:0;cursor:pointer}
.ai-t{font-weight:620;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-s{font-size:12.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ai-trend{display:inline-flex;gap:2px;vertical-align:middle}
.ai-trend i{width:6px;height:12px;border-radius:2px;background:var(--surface-3);display:block}
.ai-trend i.p{background:var(--ink)}
.ai-acts{display:flex;gap:6px;flex:none}
.ai-note{font-size:12.5px;color:var(--muted);margin-top:10px}
@media(max-width:720px){
  .ai-sel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-opt:nth-child(2){border-right:none}
  .ai-opt:nth-child(1),.ai-opt:nth-child(2){border-bottom:1px solid var(--line)}
}
/* the six workflow tiles become a compact strip */
.att-cards{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0 !important;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.att-card{border:none !important;border-radius:0 !important;box-shadow:none !important;border-right:1px solid var(--line) !important;border-bottom:1px solid var(--line) !important;
  padding:14px 16px !important;min-height:0 !important;background:var(--surface) !important}
.att-card:nth-child(3n){border-right:none !important}
.att-card:nth-child(n+4){border-bottom:none !important}
.att-card-l{font:650 12px/1.3 var(--body) !important;letter-spacing:0 !important;text-transform:none !important;color:var(--muted) !important;min-height:0 !important}
.att-card-v{font-family:var(--display) !important;font-weight:750 !important;font-size:24px !important;color:var(--ink) !important;margin-top:6px !important;letter-spacing:-.03em}
.att-card.clk{cursor:pointer;padding-right:16px !important}
.att-card.clk::after{display:none}
.att-card.clk:hover{background:#FBFAF7 !important}
@media(max-width:720px){
  .att-cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .att-card:nth-child(3n){border-right:1px solid var(--line) !important}
  .att-card:nth-child(2n){border-right:none !important}
  .att-card:nth-child(n+4){border-bottom:1px solid var(--line) !important}
  .att-card:nth-child(n+5){border-bottom:none !important}
}
.att-qt{font-weight:650;font-size:15px}
.ft-done{font-size:12.5px;color:var(--ok);font-weight:650;display:inline-flex;align-items:center;gap:5px}

/* ── 17. People: search first ──────────────────────────────────────────── */
.pd-search{position:relative;margin-bottom:14px}
.pd-search .svgic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.pd-search input{width:100%;min-height:50px !important;padding:12px 14px 12px 42px !important;font-size:16px !important;border-radius:var(--r-lg) !important}
.pd-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pd-count{font-size:13px;color:var(--muted);margin:14px 0 4px}
.pd-list{border-top:1px solid var(--line)}
.pd-row{display:flex;align-items:center;gap:13px;width:100%;padding:12px 2px;border:none;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--ink)}
.pd-row:hover{background:#FBFAF7}
.pd-row .ma,.pd-row .mc-av{width:42px !important;height:42px !important;border-radius:999px !important;display:grid;place-items:center;font-size:13.5px;flex:none}
.pd-main{flex:1;min-width:0}
.pd-name{font-size:15.5px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-sub{font-size:12.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.pd-sub .sep{color:var(--line-strong)}
.pd-st{display:inline-flex;align-items:center;gap:5px}
.pd-st.bad{color:var(--bad)} .pd-st.warn{color:var(--warn)} .pd-st.ok{color:var(--ok)}
.pd-role{font:700 10.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:999px;padding:4px 8px;flex:none}
.pd-chev{color:var(--faint);flex:none}
#peopleList{margin:0 !important}

/* profile header */
.ph{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:6px 0 22px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ph .pav,.ph .ma{width:76px !important;height:76px !important;border-radius:999px !important;font-size:24px !important;display:grid;place-items:center}
.ph-name{font-family:var(--display);font-weight:800;font-size:clamp(28px,7vw,40px);line-height:1.02;letter-spacing:-.04em;margin:0}
.ph-meta{font-size:13.5px;color:var(--muted);margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.ph-state{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;font-weight:620}
.ph-acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.ph-trend{display:flex;align-items:flex-end;gap:3px;margin-top:4px}
.ph-trend i{width:10px;height:22px;border-radius:3px;background:var(--surface-3);display:block}
.ph-trend i.p{background:var(--ink)}
.ph-trend-l{font-size:11.5px;color:var(--muted);margin-top:6px}
@media(max-width:720px){ .ph{grid-template-columns:minmax(0,1fr);gap:14px} }

/* timeline */
.mtl{position:relative;padding-left:22px;margin-top:6px}
.mtl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-strong)}
.mtl-i{position:relative;padding:0 0 18px}
.mtl-i::before{content:"";position:absolute;left:-21px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--ink)}
.mtl-i.bad::before{border-color:var(--bad-dot)} .mtl-i.ok::before{border-color:var(--ok-dot)} .mtl-i.gold::before{border-color:var(--accent);background:var(--accent)}
.mtl-t{font-size:14.5px;font-weight:620;color:var(--ink)}
.mtl-m{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ── 18. Module corrections for the light ground ───────────────────────── */
/* chat */
.chat{background:var(--surface) !important;border:1px solid var(--line) !important;box-shadow:var(--elev-1) !important}
.chat-list,.chat-list-h{background:var(--surface) !important;border-color:var(--line) !important}
.chat-li{border-bottom-color:var(--line) !important;color:var(--ink)}
.chat-li:hover,.chat-li.on{background:var(--surface-2) !important}
.chat-h{background:var(--surface) !important;border-bottom:1px solid var(--line) !important}
.chat-msgs{background:var(--bg) !important}
.bub{box-shadow:none !important;font-size:14.5px}
.bub.me{background:#F4E9C6 !important;color:var(--ink) !important;font-weight:450}
.bub.them{background:var(--surface) !important;border:1px solid var(--line) !important;color:var(--ink) !important}
.bub .bm{color:var(--muted);opacity:1}
.bub .tick-read{color:var(--accent-ink) !important}
.chat-in{background:var(--surface) !important;border-top:1px solid var(--line) !important}
.chat-in input{background:var(--surface-2) !important;border:1px solid var(--line) !important;border-radius:999px !important}
.chat-send{background:var(--ink) !important;color:#FFF !important}
.chat-call{color:var(--ink) !important}
@media(max-width:720px){
  .chat{height:calc(100dvh - 160px - var(--dock-h) - env(safe-area-inset-bottom,0px)) !important;border-radius:var(--r-lg) !important}
  body.chat-fs .chat{height:100vh !important;height:100dvh !important;border:none !important;border-radius:0 !important}
  body.chat-fs .chat-in{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important}
}

/* testimonies */
.tcard.feat{border-color:var(--accent-line) !important;background:var(--surface) !important}
.tcard .tb2{color:var(--ink-dim) !important;font-size:15px;line-height:1.7}
.tt2{font-family:var(--display);font-weight:750;letter-spacing:-.02em;color:var(--ink)}
.react button{background:var(--surface) !important;border:1px solid var(--line-strong) !important;color:var(--ink-dim) !important;border-radius:999px}
.react button.on{background:var(--accent-soft) !important;border-color:var(--accent-line) !important;color:var(--accent-ink) !important}
.ts-row{border-bottom-color:var(--line) !important}

/* calendar */
.cal-day{background:var(--surface) !important;border-color:var(--line) !important;color:var(--ink)}
.cal-day.today,.wk-day.today{border-color:var(--ink) !important}
.cal-day.other,.cal-day.out{background:var(--surface-2) !important;color:var(--faint)}
.wk-day{background:var(--surface) !important;border-color:var(--line) !important}

/* finance */
.fin-stat-cell,.fin-net-cell,.fmc{background:var(--surface) !important;border-color:var(--line) !important}
.fsc-l,.fnc-l,.fmc-l{color:var(--muted) !important}
.fsc-v,.fnc-v,.fmc-v{color:var(--ink) !important;font-family:var(--display)}

/* misc legacy surfaces */
.myweek,.mbanner,.attn-card,.mcard,.qa-card,.lg-stat{background:var(--surface) !important;border:1px solid var(--line) !important;box-shadow:none !important}
.mw-row{border-color:var(--line) !important}
.feed-row{border-color:var(--line) !important;color:var(--ink)}
.info-grid .ic,.info-cell{border-color:var(--line) !important}
.vital,.vitals .vital{background:var(--surface) !important;border-color:var(--line) !important}
.hier-name{color:var(--ink)}
.disc-bar,.cmp-bar,.bar,.prog{background:var(--surface-2) !important}
.update-banner,#updateBanner{background:var(--ink) !important;color:#F8F7F3 !important}
.fab{background:var(--ink) !important;color:#FFF !important;box-shadow:var(--elev-3) !important}
@media(max-width:720px){ .fab{bottom:calc(var(--dock-h) + 24px + env(safe-area-inset-bottom,0px)) !important} }

/* ── 19. Inline structure for the new screens ──────────────────────────── */
.pd-name,.na-l,.na-s,.act-m,.up-name,.up-meta{display:block}
.na-body,.pd-main,.act-body,.ph-id{min-width:0}
a.btn{text-decoration:none}
.mc-ei{display:inline-flex;vertical-align:-2px;margin-right:4px}
.mc-ei .svgic{width:14px;height:14px}
.pc-v small{font-size:15px;font-weight:650;color:var(--muted);letter-spacing:0;margin-left:2px}
.ph-meta .sep,.pd-sub .sep{color:var(--muted)}
.stpill{display:inline-flex;align-items:center;font:650 11.5px/1.2 var(--body);padding:3px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.sevdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
/* profile tabs (tabBtns) use the same underline language as page tabs */
.ptabs button{background:none;border:none;border-bottom:2px solid transparent;padding:11px 0;margin:0;color:var(--muted);font:650 14px/1 var(--body);cursor:pointer;white-space:nowrap}
.ptabs button:hover{color:var(--ink)}
.ptabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
@keyframes mcFlash{0%{background:var(--accent-soft)}100%{background:transparent}}
.mc-flash{animation:mcFlash 1.6s var(--ease)}

/* ── 20. QA corrections (first sweep) ──────────────────────────────────── */
/* dock: icon and label sit side by side in the active capsule */
@media(max-width:720px){
  .bn-item{flex-direction:row !important;gap:7px !important;padding:0 10px !important}
  .bn-item .bn-lb{font-size:13px !important}
  /* the list keeps the dock; a thread takes the whole screen */
  body.chat-fs .botnav{display:flex !important}
  body.chat-fs.chat-thread .botnav{display:none !important}
  body.chat-fs:not(.chat-thread) .chat{height:calc(100dvh - var(--dock-h) - 22px - env(safe-area-inset-bottom,0px)) !important}
  /* hero actions: one swipeable row instead of a wrapped block */
  .hd-actions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .hd-actions::-webkit-scrollbar{display:none}
  .hd-actions .btn{flex:none}
}
@media(max-width:720px){ .leader-chip .lt{display:none !important} }
/* event cards sit on white like every other record */
.ev-card{background:var(--surface) !important;background-image:none !important;border:1px solid var(--line) !important;box-shadow:none !important}
.ev-meta{color:var(--muted-2) !important}
/* yes/no and choice switches inside forms */
.seg2,.chipsel{display:inline-flex;background:var(--surface-2) !important;border:1px solid var(--line) !important;border-radius:var(--r);padding:3px;gap:2px}
.seg2 button,.chipsel button{background:transparent !important;border:none !important;border-radius:var(--r-sm) !important;color:var(--muted-2) !important;font:650 13px/1 var(--body) !important;padding:9px 14px !important;cursor:pointer;box-shadow:none !important}
.seg2 button.on,.chipsel button.on,.seg2 button.active,.chipsel button.active{background:var(--surface) !important;color:var(--ink) !important;box-shadow:var(--elev-2) !important}
/* form section headings inside modals */
.fsec-h{font:700 11px/1.2 var(--body) !important;letter-spacing:.16em !important;text-transform:uppercase;color:var(--muted-2) !important;background:none !important}
/* group assignment: the chosen letter is an ink key */
.gt-btn.on{background:var(--ink) !important;color:#FFF !important}
/* today in the calendar: ink numeral on the gold mark */
.cal-day.today .dn,.wk-day.today .wk-num{color:var(--on-accent) !important}
/* Home needs no breadcrumb and no floating button */
body.mod-dash .crumbs,body.mod-dash .fab{display:none !important}
/* one rule per section: the eyebrow's hairline, or the ledger's ink rule */
.up,.act,.pulse{border-top:none}
.hd-attn .hd-sec-t::after{display:none}
/* top bar: search is one field, the leader chip stacks role over name */
.search input,.topbar .search input{border:none !important;background:transparent !important;box-shadow:none !important;min-height:0 !important;padding:0 !important}
.search:focus-within{border-color:var(--ink);box-shadow:var(--ring)}
.leader-chip .lt{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
/* avatars carry no shadow */
.ma,.pav,.ca,.la,.av,.mc-av{box-shadow:none !important}
/* people toolbar */
.pd-top{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.pd-top .pd-search{flex:1;margin:0;min-width:0}
.pd-add{flex:none;width:50px;height:50px;border-radius:var(--r-lg);border:none;background:var(--ink);color:#FFF;display:grid;place-items:center;cursor:pointer}
.pd-add:hover{background:#2B2B2B}
.pd-bar .seg{max-width:100%;overflow-x:auto}
.pd-foot{padding:18px 0 6px}
/* profile overview: label / value pairs on hairlines, not boxes in a box */
.info-grid{gap:0 24px !important}
.info-cell{background:none !important;border:none !important;border-bottom:1px solid var(--line) !important;border-radius:0 !important;padding:12px 0 !important;box-shadow:none !important}
.ic-l{font:700 10.5px/1.2 var(--body) !important;letter-spacing:.14em !important;text-transform:uppercase;color:var(--muted-2) !important}
.ic-v{font-size:15px !important;color:var(--ink) !important;margin-top:5px;font-weight:500}
/* missing-report blocks */
.att-missblock{padding:0 !important;overflow:hidden}
.att-miss-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px}
.att-miss-toggle{background:none;border:none;cursor:pointer;color:var(--ink);font:650 14.5px/1.35 var(--body);display:flex;align-items:center;gap:8px;text-align:left;flex:1 1 200px;min-width:0;padding:0}
.att-caret{color:var(--faint);font-size:10px;flex:none}
.att-miss-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink)}
.chip-muted{background:var(--surface-2) !important;color:var(--muted-2) !important}
@media(max-width:720px){ .att-miss-toggle{flex-basis:100%} }
/* planner view switch: same underline language as tabs */
.tabbar button:not(.btn){background:none !important;border:none !important;border-bottom:2px solid transparent !important;border-radius:0 !important;padding:11px 0 !important;margin:0 !important;
  color:var(--muted) !important;font:650 14px/1 var(--body) !important;box-shadow:none !important;cursor:pointer}
.tabbar button.on:not(.btn){color:var(--ink) !important;border-bottom-color:var(--ink) !important;background:none !important}
.cal-day .dot2,.cal-day .dot{border:none}
/* floating action button: an ink circle */
.fab{width:54px !important;height:54px !important;border-radius:999px !important;place-items:center;align-items:center;justify-content:center;border:none !important}
.fab .svgic,.fab .mc-ei .svgic{width:22px;height:22px}
.sb-toggle{width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:11px;margin:8px 10px}
@media(max-width:720px){ .sb-toggle{display:none !important} }   /* collapsing is a desktop affordance */

/* ── 21. Review corrections (deep states) ───────────────────────────────── */
:root{--hairline:linear-gradient(0deg,#E7E5E4,#E7E5E4)}   /* the legacy gold fade becomes a plain rule */

/* page headers for squads, leaders, services and events */
.phead{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:4px 0 18px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.phead .pav{width:60px !important;height:60px !important;border-radius:999px !important;display:grid;place-items:center;
  font:750 21px/1 var(--display) !important;color:var(--ink-dim) !important;flex:none}
.phead .pav .svgic{width:24px;height:24px}
.phead h1{font-size:clamp(24px,6vw,32px) !important;font-weight:800;letter-spacing:-.035em !important;line-height:1.08;margin:0}
.phead .pmeta{font-size:13.5px;color:var(--muted);margin-top:6px}
.phead > div:not(.spacer){min-width:0}
.phead .spacer{flex:1 1 auto}
.pav-btn{background:none;border:none;padding:0;border-radius:999px;cursor:zoom-in;flex:none}
@media(max-width:720px){ .phead .spacer{flex-basis:100%;height:0} }

/* hints inside section labels: a quiet second line in sentence case */
.block-label{flex-wrap:wrap;row-gap:3px}
.block-label::after{order:2;min-width:24px}
.bl-hint{order:3;flex:1 0 100%;font:400 12.5px/1.45 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.bl-hint::first-letter{text-transform:uppercase}

/* metric numerals are ink; gradient-clipped text is gone everywhere */
.metric .mn,.ring .ring-pct,.cap-n b,.login-title em,.mh-name,.brand .bt b{background:none !important;-webkit-background-clip:border-box !important;
  background-clip:border-box !important;-webkit-text-fill-color:currentColor !important;color:var(--ink) !important}
.metric .mn{font-size:30px !important;font-weight:750 !important;letter-spacing:-.035em !important}
.metric .mi{background:none !important;color:var(--muted-2);width:auto !important;height:auto !important;border-radius:0 !important}
.metric .mi .svgic{width:18px;height:18px}
.chart-card::before,.mis-card::before,.stu-card::before,.teevo-card::before{display:none !important}
.metric:hover,.lead-card:hover,.res-card:hover,.vid-card:hover,.book:hover,.mis-card:hover,.stu-card:hover{transform:none !important}
.metric.clk:hover{border-color:var(--line-strong) !important}

/* checkboxes: square, visible when ticked, wherever they sit */
input[type=checkbox],.field input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px !important;height:20px !important;min-width:20px;
  min-height:0 !important;padding:0 !important;margin:0;border-radius:6px !important;border:1.5px solid var(--faint) !important;
  background:var(--surface) !important;position:relative;flex:none;cursor:pointer;vertical-align:-4px}
input[type=checkbox]:hover{border-color:var(--ink-dim) !important}
input[type=checkbox]:checked,.field input[type=checkbox]:checked{background:var(--ink) !important;border-color:var(--ink) !important}
input[type=checkbox]:checked::after{content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:10px;border:solid #FFFFFF;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}
.remember{display:block !important;position:relative;padding-left:30px;line-height:1.45;cursor:pointer}
.remember input[type=checkbox]{position:absolute;left:0;top:0}
.field .remember{font-weight:400;color:var(--ink-dim);font-size:13.5px !important}
.remember b{font-weight:650;color:var(--ink)}
.glass > .block-label:first-child,.pad > .block-label:first-child,.glass > .att-eyebrow:first-child{margin-top:0}

/* file inputs */
input[type=file]{font:400 13.5px var(--body);color:var(--muted-2) !important;padding:6px !important;min-height:0 !important;cursor:pointer}
input[type=file]::file-selector-button{font:650 13px/1 var(--body);color:var(--ink);background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:9px 12px;margin-right:12px;cursor:pointer}
input[type=file]::-webkit-file-upload-button{font:650 13px/1 var(--body);color:var(--ink);background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:9px 12px;margin-right:12px;cursor:pointer}

/* member profile: attendance summary and the archive row */
.ma-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.ma-cell{padding:14px 14px 13px;border-right:1px solid var(--line);min-width:0}
.ma-cell:last-child{border-right:none}
.ma-v{font:750 26px/1 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ma-v.bad{color:var(--bad)} .ma-v.warn{color:var(--warn-num)}
.ma-l{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.35}
.ph-danger{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.ph-danger b{display:block;font-size:14px;font-weight:650;color:var(--ink)}
.ph-danger span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.ph-danger .btn{flex:none}
@media(max-width:720px){
  .ptabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .ptabs::after{content:"";flex:0 0 28px}
  .ma-v{font-size:22px}
}

/* attendance reports */
.att-viewbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.att-viewbar .mc-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.att-viewbar .mc-seg .att-badge{margin-left:6px}
@media(max-width:720px){ .att-viewbar .mc-seg{display:flex;width:100%} .att-viewbar .mc-seg button{flex:1 1 auto} }
.att-stats{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 !important;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface);margin:14px 0 !important}
.att-stat{background:none !important;border:none !important;border-radius:0 !important;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);
  text-align:left !important;padding:12px 14px !important;min-width:0 !important}
.att-stat-v{color:var(--ink) !important;font-size:20px !important;font-weight:750 !important;letter-spacing:-.02em;white-space:nowrap}
.att-stat-l{font-size:10.5px !important;letter-spacing:.08em !important;color:var(--muted) !important;margin-top:4px !important}
@media(min-width:721px){ .att-stats{grid-template-columns:repeat(5,minmax(0,1fr))} }
.att-tr-bar{background:var(--surface-3) !important;border-radius:6px 6px 2px 2px !important}
.att-tr-col:last-child .att-tr-bar{background:var(--accent) !important}
.att-tr-v{color:var(--ink) !important;font-weight:700 !important}
@media(max-width:720px){ .ai-row.ft{flex-wrap:wrap} .ai-row.ft .ai-acts{flex-basis:100%} }

/* events list: neutral date tiles, status-only colour */
.ev-date{background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:var(--r) !important}
.ev-date-d{color:var(--ink) !important;font-weight:750 !important}
.ev-date-m{color:var(--muted-2) !important}
.ev-status{font:700 10.5px/1 var(--body) !important;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px !important;border-radius:999px !important}
.ev-tone-blue,.ev-tone-grey{background:var(--surface-2) !important;border:1px solid var(--line) !important;color:var(--muted-2) !important}
.ev-tone-green{background:var(--ok-soft) !important;border:1px solid #CFE6D4 !important;color:var(--ok) !important}
.ev-flag{color:var(--muted-2) !important;display:inline-flex;align-items:center;gap:4px}

/* notifications: see section 23 (V3.86) */
.fin-net{background:var(--surface) !important;border-color:var(--line) !important}
/* the sidebar list scrolls; its last line fades so the scroll is discoverable */
#navMain{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);padding-bottom:24px}
/* scope notes that carry a title and a paragraph stack them */
.scope-note{flex-wrap:wrap}
.scope-note > div:not(.spacer){flex:1 1 100%}
/* large single figures read better in proportional numerals (tabular stays in tables) */
.att-card-v,.att-stat-v,.fsc-v,.fnc-v,.fmc-v,.cc-v,.dv,.cmp-v,.metric .mn,.pc-v,.ma-v,.ai-n,.fin-stat b,.mstat-v,.metric-v,.lg-v{font-variant-numeric:proportional-nums lining-nums !important}
/* a section label that opens a card sits on the card's padding, not below it */
:is(.glass,.pad,.fin-panel,.chart-card,.fin-card,.fa-card,.rank-card) > :is(.block-label,.att-eyebrow,.fin-panel-h,.mdash-h,.sec-title):first-child{margin-top:0}
/* page-level actions: one row above the content, right-aligned on desktop */
.pg-acts{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.fin-acts .sm{display:none}
@media(max-width:720px){
  .pg-acts{justify-content:flex-start}
  .fin-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .fin-acts .btn{justify-content:center}
  .fin-acts .lg{display:none}
  .fin-acts .sm{display:inline}
}
/* command chain: an ink thread, the member's own node in gold */
.hier-dot{background:var(--surface) !important;border:2px solid var(--ink-dim);box-shadow:none !important;width:11px;height:11px}
.hier-row:last-child .hier-dot{background:var(--accent) !important;border-color:var(--accent)}
.hier-line{background:var(--line-strong) !important;width:1px !important}

/* ── 22. V3.85 ───────────────────────────────────────────────────────────── */
/* photo avatars: the inline photo wins over the neutral tint */
.has-photo{background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;color:transparent !important}
.ma:not(.has-photo),.pav:not(.has-photo),.ca:not(.has-photo),.la:not(.has-photo),.av:not(.has-photo),.mc-av:not(.has-photo){background-image:none !important}
.leader-chip .av.has-photo{background-color:var(--surface-2) !important}

/* names may take two lines beside a role pill rather than being cut */
.pd-name{white-space:normal !important;display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}

/* sign-in: browser autofill keeps the field white */
input:-webkit-autofill,input:-webkit-autofill:hover{-webkit-text-fill-color:var(--ink) !important;-webkit-box-shadow:0 0 0 1000px var(--surface) inset !important;box-shadow:0 0 0 1000px var(--surface) inset !important;caret-color:var(--ink)}
input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--surface) inset,0 0 0 3px rgba(212,175,55,.40) !important;box-shadow:0 0 0 1000px var(--surface) inset,0 0 0 3px rgba(212,175,55,.40) !important}

/* training videos: a real frame, a white play disc, an ink duration */
.vid-card{background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:var(--r-lg) !important;box-shadow:var(--elev-1) !important;overflow:hidden}
.vid-thumb{height:auto !important;aspect-ratio:16/9;background-color:var(--surface-3) !important;background-size:cover !important;background-position:center !important;border-radius:0}
.vid-thumb:not(.has-thumb),.vid-thumb-ph{background-image:none !important}
.vid-thumb:not(.has-thumb) .play{background:var(--ink) !important;color:#FFF !important}
.vid-thumb.has-thumb::before{background:rgba(17,17,17,.16) !important}
.vid-card:hover .vid-thumb.has-thumb::before{background:rgba(17,17,17,.06) !important}
.vid-thumb-ph::after{display:none !important}
.vid-thumb .play{width:56px;height:56px;border-radius:999px;background:rgba(255,255,255,.94) !important;border:none !important;color:var(--ink) !important;box-shadow:var(--elev-2);display:grid;place-items:center;transform:none !important}
.vid-thumb .play .svgic{width:22px;height:22px;margin-left:3px;fill:currentColor}
.vid-card:hover .play{background:var(--accent) !important;color:var(--on-accent) !important}
.vid-thumb .dur{background:rgba(17,17,17,.78) !important;color:#FFF !important;font:650 11.5px/1 var(--body) !important;padding:4px 7px !important;border-radius:6px !important}
.vid-thumb .wk{background:var(--surface) !important;color:var(--ink) !important;border-radius:999px !important}
.vid-prov{background:rgba(255,255,255,.92) !important;color:var(--ink-dim) !important;font:650 11px/1.2 var(--body) !important;top:10px !important;left:10px !important;padding:4px 9px !important;border-radius:999px !important}
.vid-b{padding:16px 18px 18px !important}
.vid-b .vt{font-family:var(--display);font-weight:750;font-size:17px;letter-spacing:-.015em;color:var(--ink);margin-bottom:6px}
.vid-b .vd{font-size:13.5px;color:var(--muted);line-height:1.5}
.watched{color:var(--ok) !important;font-size:12.5px !important;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.views-tag{font-size:12.5px !important;color:var(--muted) !important}

/* ── 23. Notifications (V3.86) ──────────────────────────────────────────────
   One anatomy on every surface — the centre, the in-app banner, Home's activity:
       [type tile]  Title                       time  •
                    one line of context
                    Action →
   Type colours are the only colours outside status, and they mark the tile, never the
   row: gold event · green new member · blue approval · purple prayer · orange needs
   attention · red urgent. Every other type is ink. Unread is a gold dot. */
:root{
  --nt-gold-bg:var(--accent-soft);  --nt-gold-fg:var(--accent-ink);
  --nt-green-bg:var(--ok-soft);     --nt-green-fg:var(--ok);
  --nt-blue-bg:#EEF3FC;             --nt-blue-fg:#1D4ED8;      /* 6.0:1 */
  --nt-purple-bg:#F4EFFC;           --nt-purple-fg:#6D28D9;    /* 6.3:1 */
  --nt-orange-bg:var(--warn-soft);  --nt-orange-fg:var(--warn);
  --nt-red-bg:var(--bad-soft);      --nt-red-fg:var(--bad);
  --nt-ink-bg:var(--surface-2);     --nt-ink-fg:var(--ink-dim);
}
.nt-gold{background:var(--nt-gold-bg) !important;color:var(--nt-gold-fg) !important}
.nt-green{background:var(--nt-green-bg) !important;color:var(--nt-green-fg) !important}
.nt-blue{background:var(--nt-blue-bg) !important;color:var(--nt-blue-fg) !important}
.nt-purple{background:var(--nt-purple-bg) !important;color:var(--nt-purple-fg) !important}
.nt-orange{background:var(--nt-orange-bg) !important;color:var(--nt-orange-fg) !important}
.nt-red{background:var(--nt-red-bg) !important;color:var(--nt-red-fg) !important}
.nt-ink{background:var(--nt-ink-bg) !important;color:var(--nt-ink-fg) !important}

/* the type tile */
.nc-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}
.nc-ic .svgic{width:18px;height:18px}

/* the centre — a panel under the bell on a computer, a full-screen sheet on a phone */
#notifPanel.nc{position:fixed;top:62px;right:20px;left:auto;bottom:auto;width:420px;max-width:calc(100vw - 24px);
  max-height:min(680px,calc(100vh - 84px));display:none;flex-direction:column;overflow:hidden;padding:0 !important;
  border-radius:16px !important;z-index:160}
#notifPanel.nc.show{display:flex;animation:ncDrop .18s var(--ease)}
@keyframes ncDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nc-head{display:flex;align-items:center;gap:4px;padding:16px 12px 6px 20px}
.nc-title{flex:1;margin:0;font:750 18px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.nc-tool{background:none;border:none;border-radius:8px;padding:7px 9px;font:650 13px var(--body);color:var(--accent-ink);cursor:pointer}
.nc-tool:hover{background:var(--surface-2);color:var(--ink)}
.nc-tool:disabled{color:var(--faint);background:none;cursor:default}
.nc-tool:focus-visible,.nc-close:focus-visible,.nc-filter button:focus-visible,.nc-x:focus-visible{outline:none;box-shadow:var(--ring)}
.nc-close{display:none}
.nc-filter{display:flex;gap:6px;padding:6px 20px 12px;border-bottom:1px solid var(--line)}
.nc-filter button{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font:650 13px var(--body);color:var(--ink-dim);cursor:pointer}
.nc-filter button:hover{background:var(--surface-2)}
#notifPanel.nc:focus{outline:none}
#notifBtn[aria-expanded="true"]{background:var(--surface-2);color:var(--ink)}
.nc-filter button.on{background:var(--ink);border-color:var(--ink);color:#FFF}
.nc-tabn{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font:800 10.5px/18px var(--body);text-align:center;font-variant-numeric:tabular-nums}
.nc-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 8px}
.nc-sec{margin:0}
.nc-group{margin:0;padding:16px 12px 6px;font:750 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.nc-card{display:flex;flex-direction:column}
.nc-item{position:relative;border-radius:12px}
@media(hover:hover){ .nc-item:hover{background:var(--surface-2)} }
.nc-item:active{background:var(--surface-2)}
.nc-main{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;width:100%;padding:12px 40px 12px 12px;
  background:none;border:none;border-radius:12px;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.nc-main:focus-visible{outline:none;box-shadow:var(--ring)}
.nc-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.nc-top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:start}
.nc-t{font:550 14.5px/1.35 var(--body);color:var(--ink-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-item.is-unread .nc-t{color:var(--ink);font-weight:650}
.nc-meta{display:flex;align-items:center;gap:7px;padding-top:2px}
.nc-time{font:500 12px/1.3 var(--body);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.nc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.nc-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--surface-3);color:var(--ink-dim);font:750 10.5px/18px var(--body);text-align:center}
.nc-c{font:400 13.5px/1.4 var(--body);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-a{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font:650 13px/1.3 var(--body);color:var(--accent-ink)}
.nc-a .svgic{width:13px;height:13px;transition:transform .15s var(--ease)}
.nc-main:hover .nc-a .svgic,.nb-main:hover .nc-a .svgic{transform:translateX(2px)}
.nc-x{position:absolute;top:9px;right:6px;width:30px;height:30px;border-radius:8px;border:none;background:none;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s}
.nc-x:focus-visible{opacity:1}
@media(hover:hover){ .nc-item:hover .nc-x{opacity:1} .nc-x:hover{background:var(--surface-3);color:var(--ink)} }
@media(hover:none){ .nc-x{opacity:1;color:var(--faint)} }
.nc-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:56px 28px 60px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted)}
.nc-empty-ic{width:48px;height:48px;border-radius:999px;background:var(--surface-2);color:var(--muted-2);display:grid;place-items:center;margin-bottom:10px}
.nc-empty b{font:650 15.5px var(--body);color:var(--ink)}
.nc-foot{display:flex;justify-content:center;padding:6px 12px;border-top:1px solid var(--line)}
.nc-foot .nc-tool{color:var(--muted)}
@media(max-width:720px){
  #notifPanel.nc{inset:0;top:0;right:0;width:auto;max-width:none;max-height:none;border:none !important;border-radius:0 !important;
    box-shadow:none !important;background:var(--bg) !important;padding-top:env(safe-area-inset-top,0px) !important}
  #notifPanel.nc.show{animation:ncSheet .22s var(--ease)}
  .nc-head{padding:12px 12px 4px 20px;min-height:58px}
  .nc-title{font-size:24px}
  .nc-close{display:grid;place-items:center;width:40px;height:40px;margin-left:4px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
  .nc-filter{padding:6px 16px 14px;border-bottom:none}
  .nc-list{padding:0 16px calc(28px + env(safe-area-inset-bottom,0px))}
  .nc-group{padding:14px 4px 8px}
  /* on the ivory sheet each day is one white card, rows divided by an inset rule */
  .nc-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .nc-item{border-radius:0}
  .nc-item + .nc-item::before{content:"";position:absolute;top:0;left:60px;right:0;height:1px;background:var(--line)}
  .nc-main{border-radius:0;padding:14px 44px 14px 12px}
  .nc-foot{border-top:none;padding:0 0 calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg)}
  body.nc-open{overflow:hidden}
}
@keyframes ncSheet{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* the in-app banner: something arrived while the app is open */
.nb{position:fixed;z-index:250;top:calc(10px + env(safe-area-inset-top,0px));left:50%;width:min(420px,calc(100vw - 20px));
  --nb-dy:0px;transform:translate(-50%,calc(-16px + var(--nb-dy)));opacity:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--elev-3);
  transition:transform .28s var(--ease),opacity .2s var(--ease)}
.nb.in{transform:translate(-50%,var(--nb-dy));opacity:1}
.nb.out{transform:translate(-50%,-16px);opacity:0}
.nb.drag{transition:none}
@media(min-width:721px){
  .nb{left:auto;right:20px;top:74px;transform:translate(0,calc(-10px + var(--nb-dy)))}
  .nb.in{transform:translate(0,var(--nb-dy))}
  .nb.out{transform:translate(0,-10px)}
}
.nb-main{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:14px 6px 14px 14px;
  background:none;border:none;border-radius:16px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;min-width:0}
.nb-main:focus-visible,.nb-x:focus-visible,.nb-more:focus-visible{outline:none;box-shadow:var(--ring)}
.nb-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.nb-t{font:650 14.5px/1.35 var(--body);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nb-c{font:400 13.5px/1.4 var(--body);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-foot{display:flex;align-items:center;justify-content:space-between;min-height:22px}
.nb-x{margin:10px 10px 0 0;width:30px;height:30px;border-radius:8px;border:none;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
@media(hover:hover){ .nb-x:hover{background:var(--surface-2);color:var(--ink)} }
.nb-more{position:absolute;right:12px;bottom:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-dim);
  border-radius:999px;padding:3px 10px;font:650 12px var(--body);cursor:pointer}
.nb-more:hover{background:var(--surface-3)}

/* Home's recent activity uses the same tile */
.act-ic.nt-gold,.act-ic.nt-green,.act-ic.nt-blue,.act-ic.nt-purple,.act-ic.nt-orange,.act-ic.nt-red,.act-ic.nt-ink{border-radius:10px}
.act-row.is-unread .act-t{font-weight:650}
.act-m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-body{min-width:0;flex:1}

/* found by the V3.86 audit with notification-era data: two small counts and chevrons */
.count-pill{background:var(--accent) !important;color:var(--on-accent) !important}
.rep-chev{color:var(--muted-2) !important}

/* the bell's number */
#notifBtn{position:relative}


/* ── 24. Service recordings (V3.88) ─────────────────────────────────────────
   The teens' services by date: a section per year, the latest service large, then a grid of
   frames (rows on a phone). Under every picture sits a date tile, which shows while the
   picture loads and stays when there is none. Uploads in progress appear at the top. */
.svr-tools{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:0 0 16px}
.svr-add{margin-left:auto;flex:none}
.svr-search{position:relative;flex:1 1 280px;max-width:440px;display:block}
.svr-search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);display:grid;pointer-events:none}
.svr-search input{width:100%;padding-left:40px !important}
.svr-years{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.svr-years::-webkit-scrollbar{display:none}
.svr-years button{flex:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;
  font:650 13px/1.1 var(--body);color:var(--ink-dim);cursor:pointer;font-variant-numeric:tabular-nums}
.svr-years button:hover{background:var(--surface-2)}
.svr-years button.on{background:var(--ink);border-color:var(--ink);color:#FFF}
.svr-years button:focus-visible{outline:none;box-shadow:var(--ring)}
.svr-year{margin-top:30px}
.svr-yh{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;font:inherit}
.svr-yn{font:800 24px/1 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.svr-yc{font:600 13px/1 var(--body);color:var(--muted)}
.svr-yh::after{content:"";flex:1;height:1px;background:var(--line);align-self:center}
.svr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:24px 18px}

/* a card: the frame, then the date, the title, the speaker */
.svr-card{display:flex;flex-direction:column;gap:11px;width:100%;padding:0;margin:0;background:none;border:none;border-radius:12px;
  text-align:left;font:inherit;color:var(--ink);cursor:pointer;min-width:0}
.svr-card:focus-visible{outline:none}
.svr-card:focus-visible .svr-th{box-shadow:var(--ring)}
.svr-th{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--surface-3);
  border:none;padding:0;margin:0;cursor:pointer;isolation:isolate}
.svr-th::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(17,17,17,.06);pointer-events:none;z-index:3}
.svr-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:linear-gradient(180deg,#EFECE5 0%,#E6E2D9 100%);color:var(--ink-dim)}
.svr-ph b{font:800 34px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.svr-ph i{font:700 11px/1 var(--body);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.svr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;background:transparent}
.svr-th:has(.svr-img) .svr-ph > *{visibility:hidden}               /* a picture is coming: a plain panel until it lands */
.svr-th:not(:has(.svr-img)) .svr-play{opacity:0}                   /* no picture: the date is the face of the card */
@media(hover:hover){ .svr-card:hover .svr-th .svr-play,.svr-th-lg:hover .svr-play{opacity:1} }
.svr-play{position:absolute;left:50%;top:50%;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;box-shadow:var(--elev-2);transition:background .15s,color .15s,transform .15s var(--ease)}
.svr-play .svgic{width:18px;height:18px;margin-left:2px;fill:currentColor}
@media(hover:hover){
  .svr-card:hover .svr-play,.svr-th-lg:hover .svr-play{background:var(--accent);color:var(--on-accent);transform:scale(1.04)}
  .svr-card:hover .svr-title{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
}
.svr-dur{position:absolute;right:8px;bottom:8px;z-index:2;background:rgba(17,17,17,.8);color:#FFF;border-radius:6px;padding:3px 6px;
  font:650 11.5px/1.2 var(--body);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.svr-cb{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0 2px}
.svr-date{font:700 11px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.svr-title{font:650 15.5px/1.35 var(--body);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svr-sub{font:400 13.5px/1.35 var(--body);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the latest service */
.svr-feat{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--elev-1);margin:0 0 26px}
.svr-th-lg{border-radius:0;aspect-ratio:16/9}
.svr-th-lg::after{display:none}
.svr-th-lg .svr-play{width:62px;height:62px;margin:-31px 0 0 -31px}
.svr-th-lg .svr-play .svgic{width:24px;height:24px;margin-left:3px}
.svr-th-lg:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--accent)}
.svr-th-lg .svr-ph b{font-size:56px}
.svr-fb{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:26px 28px;min-width:0}
.svr-eyebrow{display:flex;align-items:center;gap:10px;font:700 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.svr-eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--accent)}
.svr-ftitle{margin:2px 0 0;font:750 26px/1.15 var(--display);letter-spacing:-.025em;color:var(--ink)}
.svr-fmeta{font:500 14.5px/1.4 var(--body);color:var(--muted)}
.svr-dot{margin:0 7px;color:var(--muted)}
.svr-fnotes{margin:4px 0 0;font:400 14.5px/1.55 var(--body);color:var(--ink-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svr-fact{margin-top:10px}

/* nothing posted yet */
.svr-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:56px 24px 60px;margin-top:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--muted);font-size:14px;line-height:1.5}
.svr-empty b{font:650 16.5px/1.3 var(--body);color:var(--ink)}
.svr-empty span{max-width:440px}
.svr-empty .btn{margin-top:12px}
.svr-empty-ic{width:54px;height:54px;border-radius:999px;background:var(--surface-2);color:var(--ink-dim);display:grid;place-items:center;margin-bottom:8px}
.svr-empty-ic .svgic{width:24px;height:24px}
.svr-none{margin-top:18px}

/* uploads on their way */
.svr-jobs{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.svr-job{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px 10px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px}
.svr-job-th{width:72px;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:var(--surface-3);display:grid;place-items:center;color:var(--muted)}
.svr-job-th img{width:100%;height:100%;object-fit:cover;display:block}
.svr-job-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.svr-job-t{font:650 14px/1.3 var(--body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svr-job-bar{display:block;height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.svr-job-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:4px;transition:width .35s var(--ease)}
.svr-job-s{font:500 12.5px/1.3 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.svr-job-acts{display:flex;gap:14px}
.svr-job-x{color:var(--muted) !important}
.svr-job-x:hover{color:var(--bad) !important}
.svr-job.is-warn .svr-job-bar i{background:var(--warn-dot)}
.svr-job.is-warn .svr-job-s{color:var(--warn)}
.svr-job.is-bad{border-color:#F2CACA}
.svr-job.is-bad .svr-job-s{color:var(--bad)}

/* the player */
.svr-media{border-radius:12px}
.svr-video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain;display:block}
.svr-pinfo{margin-top:14px}
.svr-pnotes{margin:0 0 8px;font:400 14.5px/1.55 var(--body);color:var(--ink-dim);white-space:pre-wrap}
.svr-pby{font:500 12.5px/1.4 var(--body);color:var(--muted)}
.svr-pacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.svr-pact-sp{flex:1}
.svr-pacts a.btn{text-decoration:none}

/* the sheet */
#svrOverlay [hidden]{display:none !important}
.svr-src{margin:0 0 16px}
.svr-src .mc-seg{display:flex;width:100%}
.svr-src .mc-seg button{flex:1;justify-content:center;text-align:center;padding:10px 12px !important}
.svr-hint{display:flex;align-items:flex-start;gap:7px;margin-top:7px;font:500 13px/1.45 var(--body);color:var(--muted)}
.svr-hint:empty{display:none}
.svr-hint .svgic{flex:none;margin-top:2px;color:var(--ok)}
.svr-hint > span{min-width:0}
.svr-hint-t{color:var(--ink);font-weight:600}
.svr-hint .mc-link{margin-left:auto;flex:none;white-space:nowrap;padding-left:8px}
.svr-hint.warn{color:var(--warn)}
.svr-hint.bad{color:var(--bad)}
.svr-up{position:relative}
.svr-file-in{position:absolute !important;width:1px !important;height:1px !important;opacity:0;overflow:hidden;clip:rect(0 0 0 0);padding:0 !important;margin:0;border:0}
.svr-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 18px 24px;border:1.5px dashed var(--line-strong);border-radius:14px;
  background:var(--surface-2);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.svr-drop:hover,.svr-up.is-over .svr-drop{border-color:var(--ink);background:var(--accent-soft)}
.svr-file-in:focus-visible + .svr-drop{box-shadow:var(--ring);border-color:var(--ink)}
.svr-drop b{font:650 15px/1.3 var(--body);color:var(--ink)}
.svr-drop > span:last-child{font:400 13px/1.45 var(--body);color:var(--muted);max-width:340px}
.svr-drop-ic{width:44px;height:44px;border-radius:999px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);margin-bottom:6px}
.svr-file{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface)}
.svr-file-ic{width:38px;height:38px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-dim);flex:none}
.svr-file-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;font:400 13px/1.4 var(--body);color:var(--muted)}
.svr-file-b b{font:650 14px/1.35 var(--body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svr-file-resume{color:var(--ok)}
.svr-file-big{color:var(--warn)}
.svr-file .mc-link{flex:none}
.svr-thumb{display:grid;grid-template-columns:208px minmax(0,1fr);gap:16px;align-items:center;margin:16px 0 2px}
.svr-thumb-img{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--surface-3);display:grid;place-items:center}
.svr-thumb-img .svr-img{z-index:0}
.svr-thumb-none{font:500 12.5px/1.3 var(--body);color:var(--muted)}
.svr-thumb.is-busy .svr-thumb-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,241,236,.0) 0%,rgba(255,255,255,.65) 50%,rgba(243,241,236,0) 100%);
  background-size:200% 100%;animation:mcSkel 1.1s linear infinite}
.svr-thumb-side{display:flex;flex-direction:column;gap:4px;min-width:0}
.svr-thumb-l{font:700 11px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.svr-thumb-note{font:400 13px/1.45 var(--body);color:var(--muted)}
.svr-thumb-note:empty{display:none}
.svr-thumb-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.svr-thumb-acts:empty{display:none}
.svr-fields{margin-top:18px}
.svr-opt{font-weight:500;color:var(--muted);font-size:12px;margin-left:4px}

/* the corner card for uploads (every page; on Service recordings the list above shows them) */
.ul-pill{position:fixed;right:24px;bottom:96px;z-index:140;width:330px;max-width:calc(100vw - 24px);display:none;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--elev-3);padding:4px 16px}
.ul-pill.show{display:block}
body.mod-recordings .ul-row.ul-rec{display:none}
body.mod-recordings .ul-pill:not(:has(.ul-row:not(.ul-rec))){display:none}
.ul-row{padding:11px 0}
.ul-row + .ul-row{border-top:1px solid var(--line)}
.ul-h{display:flex;align-items:center;gap:8px}
.ul-ic{display:grid;color:var(--muted-2);flex:none}
.ul-name{flex:1;min-width:0;font:650 13.5px/1.3 var(--body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ul-pct{font:700 12.5px/1 var(--body);color:var(--ink);font-variant-numeric:tabular-nums}
.ul-bar{height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin:9px 0 6px}
.ul-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:4px;transition:width .35s var(--ease)}
.ul-st{font:500 12.5px/1.4 var(--body);color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.ul-acts{display:flex;gap:16px;margin-top:6px}
.ul-acts button{background:none;border:none;padding:2px 0;font:650 13px var(--body);color:var(--accent-ink);cursor:pointer}
.ul-acts button:hover{color:var(--ink)}
.ul-acts button:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.ul-row.is-warn .ul-ic,.ul-row.is-warn .ul-st{color:var(--warn)}
.ul-row.is-warn .ul-bar i{background:var(--warn-dot)}
.ul-row.is-bad .ul-ic,.ul-row.is-bad .ul-st{color:var(--bad)}
.ul-row.is-ok .ul-ic,.ul-row.is-ok .ul-st{color:var(--ok)}

@media(max-width:720px){
  .svr-tools{gap:10px}
  .svr-add{order:-1;margin-left:0;width:100%}
  .svr-search{flex-basis:100%;max-width:none}
  .svr-years{width:100%}
  .svr-year{margin-top:24px}
  .svr-yh{margin-bottom:12px}
  .svr-yn{font-size:22px}
  .svr-feat{grid-template-columns:1fr;margin-bottom:18px}
  .svr-fb{padding:16px 18px 18px;gap:6px}
  .svr-ftitle{font-size:22px}
  .svr-fact .btn{width:100%}
  /* the rest are rows: a frame on the left, the words on the right */
  .svr-grid{grid-template-columns:1fr;gap:14px}
  .svr-card{flex-direction:row;align-items:center;gap:14px}
  .svr-card .svr-th{width:44%;max-width:184px;flex:none;border-radius:10px}
  .svr-card .svr-play{display:none}
  .svr-card .svr-ph b{font-size:24px}
  .svr-card .svr-ph i{font-size:9.5px}
  .svr-card .svr-dur{right:6px;bottom:6px;font-size:11px;padding:2px 5px}
  .svr-title{font-size:15px}
  .svr-job{grid-template-columns:60px minmax(0,1fr);row-gap:8px}
  .svr-job-th{width:60px}
  .svr-job-acts{grid-column:2}
  .svr-thumb{grid-template-columns:1fr;gap:10px}
  .ul-pill{left:12px;right:12px;width:auto;max-width:none;bottom:calc(var(--dock-h) + 22px + env(safe-area-inset-bottom,0px))}
}

@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} }