/* =====================================================================
   PENIEL CHURCH SYSTEM — DESIGN SYSTEM
   One pass, one cascade. Tokens define everything; components read
   tokens and nothing else. Nothing here overrides anything above it.

   The thesis: lit glass over deep water. A single dark navy field,
   every surface a pane held above it and edged with light on its top
   edge only, because the light comes from above. One hot colour —
   ember — spent only on the current thing and the primary action.
   Everything else is light, shadow and hairline.
   ===================================================================== */

:root{
  /* ---- field ---- */
  --void:#04070e;
  --deep:#080e1c;
  --navy:#12213b;
  --navy-2:#1b2f52;
  --lift:#1e3560;

  /* ---- the one hot colour ---- */
  --ember:#e2503c;          /* interactive: reads on dark */
  --ember-hi:#f26a54;
  --ember-fill:#cf3f2c;   /* 4.77:1 against white — use wherever white text sits on ember */
  --ember-deep:#b8362a;     /* brand red, kept for print + gradients */
  --red:var(--ember);       /* legacy alias */
  --red-dark:var(--ember-deep);
  --ember-glow:rgba(226,80,60,.34);

  /* ---- status: semantic only, never decorative ---- */
  --sig-green:#5ac489;
  --sig-amber:#e6b25f;
  --sig-blue:#7aa7f0;
  --sig-violet:#a58bf0;
  --sig-red:var(--ember);

  /* ---- glass ---- */
  --pane:rgba(255,255,255,.055);
  --pane-hi:rgba(255,255,255,.10);
  --pane-solid:rgba(16,26,46,.72);
  --edge:rgba(255,255,255,.11);
  --edge-hi:rgba(255,255,255,.20);
  --sheen:inset 0 1px 0 rgba(255,255,255,.10);
  --sheen-hi:inset 0 1px 0 rgba(255,255,255,.18);
  --blur:18px;

  /* ---- text ---- */
  --text:#eef2f9;
  --text-2:#b6c0d4;
  --text-3:#95a1b8;
  --ink:var(--text);
  --ink-soft:var(--text-2);
  --line:var(--edge);

  /* ---- elevation ---- */
  --e1:0 1px 2px rgba(0,0,0,.30), 0 3px 10px rgba(0,0,0,.20);
  --e2:0 2px 6px rgba(0,0,0,.32), 0 12px 30px rgba(0,0,0,.30);
  --e3:0 6px 18px rgba(0,0,0,.36), 0 32px 70px rgba(0,0,0,.44);
  --shadow-sm:var(--e1);
  --shadow-md:var(--e2);
  --shadow-lg:var(--e3);

  /* ---- radii ---- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg);

  /* ---- rhythm ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px; --s-6:30px; --s-7:42px;

  /* ---- type ---- */
  --font-ui:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  --cm-mono:var(--font-mono);
  --t-2xs:10.5px; --t-xs:11.5px; --t-sm:12.5px; --t-base:13.5px;
  --t-md:15px; --t-lg:17px; --t-xl:21px; --t-2xl:27px; --t-3xl:34px; --t-4xl:44px;

  --ease:cubic-bezier(.32,.72,0,1);

  /* ---- legacy aliases, so preserved paper + kiosk blocks inherit ---- */
  --cm-amber:var(--sig-amber); --cm-green:var(--sig-green);
  --fin-amber:var(--sig-amber); --fin-green:var(--sig-green); --fin-red:var(--sig-red);
  --g-bg-deep:var(--void); --g-bg-base:var(--deep); --g-bg-raise:#0d1626;
  --g-accent:var(--ember-deep); --g-accent-bright:var(--ember); --g-accent-deep:#8f2820;
  --g-accent-glow:var(--ember-glow);
  --g-good:var(--sig-green); --g-good-glow:rgba(90,196,137,.16);
  --g-info:var(--sig-blue);  --g-info-glow:rgba(122,167,240,.14);
  --g-warn:var(--sig-amber); --g-warn-glow:rgba(230,178,95,.16);
  --g-text:var(--text); --g-mute:var(--text-2); --g-dim:var(--text-3);
  --g-glass:var(--pane-solid); --g-glass-hi:rgba(24,36,60,.80);
  --g-line:var(--edge); --g-line-hi:var(--edge-hi);
  --g-sheen:var(--sheen); --g-lift-1:var(--e1); --g-lift-2:var(--e2);
  --g-blur:var(--blur);
  --bg:var(--deep); --card:var(--pane);
  --amber-bg:rgba(230,178,95,.14); --amber-ink:var(--sig-amber);
  --green-bg:rgba(90,196,137,.14); --green-ink:var(--sig-green);
}

/* =====================================================================
   1. RESET & BASE
   ===================================================================== */
*{box-sizing:border-box;}
*,*::before,*::after{-webkit-tap-highlight-color:transparent;}

html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--t-base);
  font-weight:500;
  background:var(--deep);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
#app{min-height:100vh;position:relative;z-index:1;}
a{color:var(--sig-blue);text-decoration-color:rgba(122,167,240,.4);text-underline-offset:2px;}
a:hover{color:#9dbdf5;}
::selection{background:var(--ember-fill);color:#fff;}

*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.30);background-clip:content-box;}

:focus{outline:none;}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:var(--r-xs);}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0;}

/* =====================================================================
   2. THE FIELD — one continuous dark surface behind every pane
   ===================================================================== */
body::before{
  content:'';position:fixed;inset:-15%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40rem 32rem at 8% 2%,   rgba(198,62,48,.52), transparent 60%),
    radial-gradient(38rem 34rem at 94% -4%, rgba(48,96,200,.50), transparent 58%),
    radial-gradient(44rem 36rem at 82% 86%, rgba(226,80,60,.34), transparent 62%),
    radial-gradient(50rem 34rem at 52% 26%, rgba(58,104,196,.34), transparent 66%),
    radial-gradient(34rem 30rem at 12% 98%, rgba(40,124,190,.38), transparent 60%);
  filter:blur(58px);
  animation:fieldDrift 40s var(--ease) infinite alternate;
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(130% 95% at 50% -12%, rgba(10,20,40,0), rgba(4,8,16,.42) 74%),
    linear-gradient(180deg, rgba(5,9,18,.06), rgba(3,6,12,.62));
  background-size:72px 72px, 72px 72px, cover, cover;
}
@keyframes fieldDrift{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(-2.5%,1.5%,0) scale(1.06);}
}

/* the church seal, sunk into the field so glass reads over it */
.bg-watermark{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.bg-watermark img{
  width:620px;height:620px;max-width:68vw;max-height:68vw;
  opacity:.13;filter:grayscale(1) brightness(2.1) contrast(.75);
  mix-blend-mode:overlay;
}
.login-wrap .bg-watermark img{width:660px;height:660px;max-width:80vw;max-height:80vw;opacity:.16;}

/* =====================================================================
   3. TYPOGRAPHY
   Fraunces carries the church's own register and is spent only on
   titles. Manrope does all the work. Figures are always tabular.
   ===================================================================== */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.35px;line-height:1.2;color:var(--text);}
h1{font-family:var(--font-display);font-weight:600;font-size:var(--t-2xl);letter-spacing:-.5px;font-optical-sizing:auto;}
h2{font-size:var(--t-xl);}
h3{font-size:var(--t-md);}
p{line-height:1.6;}

.muted,.sub,.hint{color:var(--text-2);}
.hint{font-size:var(--t-sm);margin-top:14px;line-height:1.55;}
.footer-note{font-size:var(--t-sm);color:var(--text-3);margin-top:var(--s-6);line-height:1.65;border-top:1px solid var(--edge);padding-top:var(--s-4);}

label{
  display:block;font-size:var(--t-xs);color:var(--text-2);margin-bottom:5px;
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.field{margin-bottom:var(--s-3);}
.row{display:flex;gap:var(--s-3);}
.row>.field{flex:1;}

/* =====================================================================
   4. TOPBAR
   ===================================================================== */
.topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:12px 26px;
  background:linear-gradient(180deg, rgba(14,24,44,.86), rgba(8,14,28,.74));
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border-bottom:1px solid var(--edge);
  box-shadow:var(--sheen), 0 8px 30px rgba(0,0,0,.32);
  color:var(--text);
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);letter-spacing:-.3px;}
.brand .mark{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--edge);
  box-shadow:var(--sheen);
}
.brand .mark img{width:100%;height:100%;object-fit:cover;}
.who{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);color:var(--text-2);}
.role-pill{
  background:rgba(255,255,255,.06);border:1px solid var(--edge-hi);
  padding:6px 13px;border-radius:99px;font-size:var(--t-xs);font-weight:700;
  color:var(--text);letter-spacing:.2px;box-shadow:var(--sheen);
}
.topbar button{
  background:rgba(255,255,255,.05);color:var(--text-2);
  border-color:var(--edge);font-size:var(--t-xs);padding:8px 12px;
}
.topbar button:hover{background:rgba(255,255,255,.12);color:var(--text);}
.search-label{margin-left:6px;}

/* language switch — a segmented control, both options always legible */
.lang-switch{
  display:inline-flex;padding:3px;gap:2px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--edge);box-shadow:var(--sheen);
}
.lang-switch .lang-opt{
  border:none;background:none;color:var(--text-3);
  padding:5px 11px;border-radius:99px;font-size:var(--t-xs);font-weight:700;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.lang-switch .lang-opt:hover:not(.active){background:rgba(255,255,255,.08);color:var(--text);}
.lang-switch .lang-opt.active{background:var(--ember-fill);color:#fff;box-shadow:none;}

/* =====================================================================
   5. SHELL & SIDEBAR
   ===================================================================== */
.shell-outer{max-width:1360px;margin:0 auto;display:flex;align-items:flex-start;gap:var(--s-2);}

.sidebar{
  width:228px;flex-shrink:0;padding:26px 10px 40px 20px;
  position:sticky;top:0;align-self:flex-start;
}
.sidebar-group{margin-bottom:var(--s-5);}
.sidebar-group-label{
  font-size:var(--t-2xs);font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-3);padding:0 13px;margin-bottom:var(--s-2);
}
.sidebar-item,.sidebar-action-item{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:9px 13px;font-size:var(--t-base);font-weight:600;
  color:var(--text-2);border-radius:var(--r-sm);cursor:pointer;margin-bottom:2px;
  transition:background .18s var(--ease),color .18s var(--ease),padding-left .18s var(--ease);
}
.sidebar-item svg,.sidebar-action-item svg{opacity:.62;flex-shrink:0;transition:opacity .18s var(--ease);}
.sidebar-item:hover,.sidebar-action-item:hover{background:rgba(255,255,255,.06);color:var(--text);padding-left:16px;}
.sidebar-item:hover svg,.sidebar-action-item:hover svg{opacity:1;}
/* the current place: an ember pill with a light bar on its leading edge.
   A left edge bar means "state of this row" everywhere in the system. */
.sidebar-item.active{
  background:linear-gradient(100deg, rgba(228,32,44,.20), rgba(228,32,44,.06));
  border:1px solid rgba(228,32,44,.72);
  color:#fff;font-weight:700;
  box-shadow:none;
  padding-left:13px;
}
.sidebar-item.active svg{opacity:1;color:var(--ember-hi);}
.sidebar-item.active::before{
  content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:3px;height:62%;border-radius:0 3px 3px 0;
  background:#e4202c;
}

.shell{
  flex:1;min-width:0;position:relative;z-index:1;
  padding:44px 40px 110px;
  min-height:calc(100vh - 71px);
  background:linear-gradient(180deg, rgba(40,60,102,.30), rgba(14,24,46,.18));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--edge);border-bottom:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sheen), 0 -10px 50px rgba(0,0,0,.34);
  color:var(--text);
}
.shell::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 26%),
    radial-gradient(60rem 30rem at 18% 6%,  rgba(232,40,54,.13), transparent 62%),
    radial-gradient(56rem 32rem at 86% 12%, rgba(60,110,205,.16), transparent 60%),
    radial-gradient(50rem 30rem at 60% 92%, rgba(48,96,190,.10), transparent 62%);
}
.shell > *{position:relative;}

/* =====================================================================
   6. BUTTONS
   ===================================================================== */
button{
  cursor:pointer;font-family:inherit;font-size:var(--t-base);font-weight:700;
  padding:9px 15px;border-radius:var(--r-sm);
  border:1px solid var(--edge-hi);
  background:rgba(255,255,255,.06);
  color:var(--text);
  letter-spacing:.1px;
  box-shadow:var(--sheen);
  transition:background .18s var(--ease),border-color .18s var(--ease),
             box-shadow .18s var(--ease),transform .1s var(--ease),color .18s var(--ease);
}
button:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);}
button:active:not(:disabled){transform:translateY(1px);}
button:disabled{opacity:.4;cursor:not-allowed;transform:none;}

/* primary: the only place ember becomes a fill */
button.primary{
  background:linear-gradient(180deg, #d9452f, var(--ember-fill));
  background-color:var(--ember-fill);
  border-color:rgba(255,255,255,.26);
  color:#fff;
  box-shadow:var(--sheen-hi), 0 1px 3px rgba(0,0,0,.35);
}
button.primary:hover:not(:disabled){
  background:linear-gradient(180deg, #e2503c, #c93a28);
  box-shadow:var(--sheen-hi), 0 2px 6px rgba(0,0,0,.4);
}
button.ghost-danger{color:#f3a297;border-color:rgba(226,80,60,.36);background:rgba(226,80,60,.08);}
button.ghost-danger:hover:not(:disabled){background:rgba(226,80,60,.18);color:#fff;border-color:rgba(226,80,60,.55);}

.close-x{
  background:none;border:none;color:var(--text-2);font-size:19px;line-height:1;
  padding:4px 8px;border-radius:var(--r-xs);box-shadow:none;
  transition:background .18s var(--ease),transform .28s var(--ease),color .18s var(--ease);
}
.close-x:hover{background:rgba(255,255,255,.09);color:var(--text);transform:rotate(90deg);}
.remove-x{position:absolute;top:8px;right:8px;background:none;border:none;box-shadow:none;color:var(--text-3);font-size:15px;padding:2px 6px;}
.remove-x:hover{color:var(--ember-hi);background:none;}

/* =====================================================================
   7. FORM CONTROLS
   ===================================================================== */
input,select,textarea{
  font-family:inherit;font-size:var(--t-base);font-weight:500;
  width:100%;padding:9px 12px;
  border:1px solid var(--edge-hi);border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);
  color:var(--text);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--text-3);}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);
}
input:focus,select:focus,textarea:focus{
  outline:none;background:rgba(255,255,255,.09);
  border-color:var(--ember);box-shadow:0 0 0 3px rgba(226,80,60,.20);
}
input:disabled,select:disabled,textarea:disabled{opacity:.45;cursor:not-allowed;}
select{
  appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),
                   linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 16px) center, calc(100% - 11px) center;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
}
select option{background:#101a2e;color:var(--text);}

fieldset{
  border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:16px 16px 6px;margin:0 0 var(--s-4);
  background:rgba(255,255,255,.022);
}
legend{
  font-size:var(--t-2xs);font-weight:800;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ember-hi);padding:0 8px;
}

.toolbar{display:flex;gap:var(--s-2);margin-bottom:var(--s-4);flex-wrap:wrap;align-items:center;}
.toolbar input[type=text]{flex:1;min-width:190px;}
.toolbar select{width:auto;}

/* =====================================================================
   8. SURFACES — every card is one pane, lit from above
   ===================================================================== */
.hh-card,.chart-card,.req-card,.budget-summary,.budget-context,.stat,.service-bar,.kid-tile,.cm-dock-inner{
  background:var(--pane);
  border:1px solid var(--edge);
  box-shadow:var(--sheen), var(--e1);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
}

.hh-list{display:flex;flex-direction:column;gap:var(--s-2);}
.hh-card{
  border-radius:var(--r-md);padding:15px 18px;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             transform .18s var(--ease),box-shadow .18s var(--ease);
}
.hh-card:hover{
  background:var(--pane-hi);border-color:var(--edge-hi);
  transform:translateY(-1px);box-shadow:var(--sheen-hi), var(--e2);
}
.hh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3);}

/* A card that is one big click target is a real <button>, per the rule that
   interactive things are buttons and not divs with a role. A button may only
   contain phrasing content, so the inner boxes are spans promoted to blocks
   rather than divs. These rules restore everything the button UA stylesheet
   takes away. */
button.hh-card{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;
  -webkit-appearance:none;appearance:none;
}
.hh-lead{display:flex;gap:12px;align-items:flex-start;min-width:0;}
.hh-body{display:block;min-width:0;}
.hh-tags{display:block;margin-top:2px;}
.hh-flags{display:flex;gap:6px;align-items:center;flex-shrink:0;}
/* The real Households screen carries two rows of badges — household status
   on top, then a per-person status for anyone not simply active. .is-stack
   turns the flag cluster into a column for that case, leaving the single-row
   version in the reference mockup untouched. */
.hh-flags.is-stack{flex-direction:column;align-items:flex-end;max-width:180px;}
.hh-flag-row{display:flex;gap:6px;align-items:center;}
.hh-flag-row.is-wrap{flex-wrap:wrap;justify-content:flex-end;gap:4px;}
.hh-flag-row:empty{display:none;}
/* A qualifier that sits inline after a name — "(child)" on Members. Inline
   rather than block so it stays on the same line as the name it modifies. */
.hh-qualifier{font-weight:400;color:var(--text-2);font-size:12px;}
/* The claim-code stub appears inside a <button> on check-out, so it needs to
   be a flex box again after being demoted to a span. */
.hh-card .code-stub{display:inline-flex;}
/* Screen tables were each wrapped in an inline overflow-x div with its own
   min-width. .dtable-wrap replaces that: one scroll container, one radius,
   no presentation in markup. .is-spaced is for the ones that sat inside a
   detail panel and needed the gap above. */
.dtable-wrap.is-spaced{margin-top:12px;}
.dtable.preview{width:100%;margin-top:0;}
/* .kid-tile is a <button>, so its inner boxes are spans and need promoting
   back to blocks — same treatment as .hh-card and .metric. */
.kid-tile-body{display:block;min-width:0;flex:1;}
.kid-tile-name,.kid-tile-meta,.kid-tile-flag{display:block;}
.kid-tile-flag{display:inline-flex;}
.kid-tile-meta.is-in-service{color:var(--sig-green);font-weight:600;margin-top:6px;}
/* Column count on a stat rail is passed as --cols, never as an inline
   grid-template-columns — that is what stopped the responsive rules from
   ever winning on mobile. Spacing variants likewise live here, not inline. */
.stats.is-spaced{margin-bottom:22px;}
.stats.is-spaced-lg{margin-bottom:26px;}
.hh-name,.hh-sub{display:block;}
.hh-name{font-weight:700;font-size:var(--t-md);color:#fff;letter-spacing:-.2px;}
.hh-sub{font-size:var(--t-sm);color:var(--text-2);margin-top:3px;}
.hh-avatar,.kid-tile-av{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-sm);font-weight:800;color:#fff;letter-spacing:.3px;
  background:linear-gradient(140deg, var(--lift), var(--navy));
  border:1px solid var(--edge-hi);box-shadow:var(--sheen);
}
.hh-list > .hh-card:nth-child(3n+2) .hh-avatar{background:linear-gradient(140deg,#2b4a7e,#16294a);}
.hh-list > .hh-card:nth-child(3n)   .hh-avatar{background:linear-gradient(140deg,#7a3229,#3d1b17);}

/* =====================================================================
   9. THE STAT RAIL — the signature
   Four readings fused into one instrument strip, divided by hairlines
   rather than floated apart. Figures are tabular so they never jitter.
   ===================================================================== */
.stats{
  display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:0;
  margin-bottom:30px;
  border:1px solid var(--edge);border-radius:var(--r-lg);
  background:var(--pane);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:var(--sheen), var(--e1);
  overflow:hidden;
}
.stats .stat{
  position:relative;
  background:none;border:none;border-radius:0;box-shadow:none;backdrop-filter:none;
  padding:22px 24px;
  transition:background .2s var(--ease);
}
.stats .stat + .stat{border-left:1px solid var(--edge);}
.stats .stat::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);
  opacity:0;transition:opacity .2s var(--ease);
}
.stats .stat:hover{background:rgba(255,255,255,.045);}
.stats .stat:hover::after{opacity:.9;}
.stat .n{
  font-size:var(--t-3xl);font-weight:700;color:#fff;
  letter-spacing:-1.6px;line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum';
}
.stat .l{
  font-family:var(--font-mono);font-size:9.5px;color:var(--text-3);margin-top:9px;
  font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
}
/* a stat used on its own still needs a pane */
.stat{border-radius:var(--r-md);padding:16px 18px;}

/* =====================================================================
   10. BADGES, TAGS, CHIPS
   Tinted glass with a matching dot. No pale pastel blocks on dark.
   ===================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2px;
  padding:4px 11px;border-radius:99px;white-space:nowrap;
  border:1px solid transparent;
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.badge.married,.badge.approved,.badge.active{background:rgba(90,196,137,.13);color:var(--sig-green);border-color:rgba(90,196,137,.28);}
.badge.pending,.badge.review{background:rgba(230,178,95,.13);color:var(--sig-amber);border-color:rgba(230,178,95,.30);}
.badge.denied,.badge.rejected,.badge.deceased{background:rgba(226,80,60,.13);color:#f0907f;border-color:rgba(226,80,60,.30);}
.badge.individual{background:rgba(255,255,255,.07);color:var(--text-2);border-color:var(--edge-hi);}
.badge.moved{background:rgba(122,167,240,.13);color:var(--sig-blue);border-color:rgba(122,167,240,.28);}
.badge.attends_elsewhere,.badge.elsewhere{background:rgba(165,139,240,.13);color:var(--sig-violet);border-color:rgba(165,139,240,.28);}

.tag{
  display:inline-block;background:rgba(255,255,255,.06);border:1px solid var(--edge);
  border-radius:var(--r-xs);padding:3px 9px;font-size:var(--t-xs);font-weight:600;
  color:var(--text-2);margin-right:5px;margin-top:6px;
}

.chip-grid{display:flex;flex-wrap:wrap;gap:var(--s-2);}
.chip{
  display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  text-transform:none;letter-spacing:0;margin-bottom:0;
  border:1px solid var(--edge-hi);border-radius:var(--r-sm);
  padding:7px 12px;font-size:var(--t-sm);font-weight:600;
  background:rgba(255,255,255,.04);color:var(--text-2);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.chip:hover{background:rgba(255,255,255,.09);color:var(--text);}
.chip input{width:auto;padding:0;margin:0;box-shadow:none;accent-color:var(--ember);}
.chip.checked{
  background:rgba(226,80,60,.16);border-color:rgba(226,80,60,.42);color:#fff;
  box-shadow:var(--sheen);
}
.child-row{border:1px solid var(--edge);border-radius:var(--r-md);padding:14px;margin-bottom:10px;position:relative;background:rgba(255,255,255,.03);}

/* =====================================================================
   11. TABLES
   ===================================================================== */
table.preview{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:var(--t-sm);margin-top:var(--s-4);
  border:1px solid var(--edge);border-radius:var(--r-md);overflow:hidden;
  background:rgba(255,255,255,.025);
}
table.preview th{
  background:rgba(255,255,255,.06);
  font-size:var(--t-2xs);font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--text-2);padding:10px 13px;text-align:left;
  border-bottom:1px solid var(--edge-hi);
}
table.preview td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--edge);color:var(--text);}
table.preview tr:last-child td{border-bottom:none;}
table.preview tbody tr:hover td,table.preview tr:hover td{background:rgba(255,255,255,.04);}

/* =====================================================================
   12. TABS
   ===================================================================== */
.tabs{
  display:flex;gap:2px;padding:4px;max-width:100%;overflow-x:auto;
  background:rgba(255,255,255,.06);border:1px solid var(--edge-hi);border-radius:var(--r-md);
  box-shadow:var(--sheen);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
}
.tab{
  padding:9px 16px;font-size:var(--t-base);font-weight:600;
  color:var(--text-2);border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.tab:hover{color:var(--text);background:rgba(255,255,255,.07);}
.tab.active{
  color:#fff;font-weight:700;
  background:linear-gradient(180deg, #d9452f, var(--ember-fill));background-color:var(--ember-fill);
  box-shadow:var(--sheen-hi), 0 1px 3px rgba(0,0,0,.35);
}

/* =====================================================================
   13. MODALS
   ===================================================================== */
.overlay{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow-y:auto;
  background:rgba(4,8,16,.66);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:overlayIn .22s var(--ease);
}
.panel{
  width:100%;max-width:640px;margin-bottom:40px;padding:28px 30px;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(24,36,62,.94), rgba(14,23,42,.96));
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--edge-hi);
  box-shadow:var(--sheen-hi), var(--e3);
  color:var(--text);
  animation:panelIn .28s var(--ease);
}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes panelIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5);}
.panel-head h2{font-family:var(--font-display);font-weight:600;font-size:var(--t-xl);letter-spacing:-.3px;color:#fff;}
.panel p{color:var(--text-2);}
.panel-actions{
  display:flex;justify-content:flex-end;gap:var(--s-2);
  margin-top:var(--s-2);border-top:1px solid var(--edge);padding-top:var(--s-4);
}

/* =====================================================================
   14. LOGIN
   ===================================================================== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{
  position:relative;z-index:1;width:352px;padding:38px 36px;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(24,38,66,.62), rgba(12,20,38,.66));
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--edge-hi);
  box-shadow:var(--sheen-hi), var(--e3);
}
.login-card h1{color:#fff;}
.login-card p,.login-card label,.login-card .hint{color:var(--text-2);}
.login-card .mark{
  width:56px;height:56px;border-radius:16px;margin-bottom:var(--s-4);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--edge-hi);box-shadow:var(--sheen);
}
.login-card .mark img{width:100%;height:100%;object-fit:cover;}
.login-err{color:#f3a297;font-size:var(--t-sm);margin-top:var(--s-2);line-height:1.55;}

/* =====================================================================
   15. EMPTY STATES & NOTICES
   ===================================================================== */
.empty{
  padding:40px 26px;text-align:center;color:var(--text-2);
  font-size:var(--t-base);line-height:1.65;
  border:1px dashed var(--edge-hi);border-radius:var(--r-lg);
  background:rgba(255,255,255,.02);
}
.empty i{font-size:var(--t-sm);color:var(--text-3);}
.warn-box{
  background:rgba(230,178,95,.10);color:#f0d3a0;
  border:1px solid rgba(230,178,95,.30);border-left:3px solid var(--sig-amber);
  border-radius:var(--r-md);padding:13px 16px;font-size:var(--t-sm);
  line-height:1.6;margin-bottom:var(--s-4);
}
.offline-strip{
  position:fixed;left:0;right:0;bottom:0;z-index:998;
  display:flex;align-items:center;gap:var(--s-4);
  background:linear-gradient(180deg,#6d4a12,#553809);color:#fff;
  padding:12px 18px;font-size:var(--t-base);line-height:1.45;
  border-top:1px solid rgba(255,255,255,.18);
  box-shadow:0 -6px 26px rgba(0,0,0,.42);
}
.offline-strip .offline-text{flex:1;}
.offline-strip button{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.34);flex-shrink:0;padding:6px 13px;}
.save-alert{
  position:fixed;top:0;left:0;right:0;z-index:999;
  display:flex;align-items:flex-start;gap:var(--s-3);
  background:linear-gradient(180deg,#8f2b20,#6d1f16);color:#fff;
  padding:12px 18px;font-size:var(--t-base);line-height:1.5;
  border-bottom:1px solid rgba(255,255,255,.2);
  box-shadow:0 6px 26px rgba(0,0,0,.45);
}
.save-alert b{display:block;margin-bottom:2px;}
.save-alert button{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.34);flex-shrink:0;}

/* =====================================================================
   16. COMMAND SEARCH
   ===================================================================== */
.search-panel{max-width:620px;width:100%;padding:0;overflow:hidden;}
.search-panel > input{
  border:none;border-radius:0;border-bottom:1px solid var(--edge);
  font-size:var(--t-lg);font-weight:600;padding:20px 22px;
  background:rgba(255,255,255,.03);box-shadow:none;
}
.search-panel > input:focus{box-shadow:none;border-color:var(--edge-hi);background:rgba(255,255,255,.05);}
.search-results{max-height:52vh;overflow-y:auto;}
.search-row{
  display:flex;align-items:center;gap:13px;padding:12px 22px;cursor:pointer;
  border-bottom:1px solid var(--edge);
  border-left:2px solid transparent;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.search-row:hover{background:rgba(255,255,255,.05);}
.search-row.is-active{background:rgba(226,80,60,.12);border-left-color:var(--ember);}
.search-icon{font-size:16px;flex-shrink:0;opacity:.8;}
.search-title{display:block;font-weight:700;font-size:var(--t-base);color:#fff;line-height:1.3;}
.search-sub{display:block;font-size:var(--t-sm);color:var(--text-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-type{font-size:var(--t-2xs);letter-spacing:1.1px;text-transform:uppercase;font-weight:800;color:var(--text-3);flex-shrink:0;}
.search-hint{padding:28px 22px;text-align:center;color:var(--text-2);font-size:var(--t-base);}
.search-foot{
  padding:11px 22px;background:rgba(0,0,0,.22);font-size:var(--t-xs);
  color:var(--text-3);border-top:1px solid var(--edge);
}
.search-foot kbd{
  background:rgba(255,255,255,.08);border:1px solid var(--edge-hi);border-radius:4px;
  padding:2px 6px;font-size:var(--t-2xs);font-family:var(--font-mono);margin-right:4px;color:var(--text-2);
}

/* =====================================================================
   17. IMPORT
   ===================================================================== */
.drop{
  border:1.5px dashed var(--edge-hi);border-radius:var(--r-lg);
  padding:34px;text-align:center;color:var(--text-2);margin-bottom:var(--s-4);
  background:rgba(255,255,255,.025);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.drop:hover{background:rgba(255,255,255,.05);border-color:rgba(226,80,60,.42);}
.drop input{display:none;}
.drop label{
  cursor:pointer;color:var(--ember-hi);font-weight:700;
  display:inline;text-transform:none;letter-spacing:0;font-size:var(--t-base);
}

/* =====================================================================
   18. FINANCE & REQUESTS
   Money earns trust through precision: tabular figures, right-aligned
   amounts, and the budget headroom shown beside every decision.
   ===================================================================== */
.fin-money{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';}
.fin-amount{font-variant-numeric:tabular-nums;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1;}
.fin-amount.sm{font-size:var(--t-md);} .fin-amount.md{font-size:var(--t-xl);} .fin-amount.lg{font-size:var(--t-3xl);}
.fin-amount .cur{font-size:.6em;font-weight:700;color:var(--text-3);margin-right:2px;vertical-align:.14em;}

.req-card{border-radius:var(--r-lg);padding:18px;margin-bottom:var(--s-3);transition:background .18s var(--ease),border-color .18s var(--ease);}
.req-card:hover{background:var(--pane-hi);border-color:var(--edge-hi);}
.req-card.is-pending{border-left:3px solid var(--sig-amber);}
.req-card.is-approved{border-left:3px solid var(--sig-green);}
.req-card.is-denied{border-left:3px solid var(--sig-red);}
.req-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;}
.req-kind{font-size:var(--t-2xs);letter-spacing:1.5px;text-transform:uppercase;font-weight:800;color:var(--text-3);margin-bottom:5px;}
.req-title{font-size:var(--t-md);font-weight:700;color:#fff;line-height:1.3;letter-spacing:-.2px;}
.req-by{font-size:var(--t-sm);color:var(--text-2);margin-top:4px;}
.req-reason{font-size:var(--t-base);color:var(--text-2);line-height:1.6;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--edge);}
.req-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.req-fact{font-size:var(--t-xs);color:var(--text-2);background:rgba(255,255,255,.06);border:1px solid var(--edge);border-radius:var(--r-xs);padding:4px 9px;}
.req-fact b{color:#fff;font-weight:700;}
.req-actions{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--edge);}

.budget-context{border-radius:var(--r-md);padding:13px 15px;margin-top:var(--s-3);}
.budget-context-top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-sm);color:var(--text-2);margin-bottom:var(--s-2);}
.budget-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;display:flex;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);}
.budget-bar span{display:block;height:100%;}
.budget-bar .used{background:var(--sig-green);}
.budget-bar .pend{background:var(--sig-amber);}
.budget-bar .over{background:var(--sig-red);}
.budget-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s-2);font-size:var(--t-xs);color:var(--text-2);}
.budget-legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;}

.budget-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:var(--s-5);align-items:start;}
.budget-main{min-width:0;}
.budget-aside{position:sticky;top:var(--s-4);}

.ledger-group{margin-bottom:var(--s-5);}
.ledger-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:0 12px 7px;}
.ledger-group-title{font-size:var(--t-2xs);letter-spacing:1.4px;text-transform:uppercase;font-weight:800;color:var(--text-3);}
.ledger{display:flex;flex-direction:column;gap:1px;}
.ledger-row{
  position:relative;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr) 104px 52px 88px 88px;gap:10px;align-items:center;
  padding:8px 12px;border-radius:var(--r-xs);background:rgba(255,255,255,.03);
  transition:background .18s var(--ease);
}
.ledger-row:hover{background:rgba(255,255,255,.07);}
.ledger-row > *{position:relative;}
.ledger-row.head{background:none;padding:2px 12px 5px;font-size:var(--t-2xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);font-weight:800;}
.ledger-row.head:hover{background:none;}
.ledger-share{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(226,80,60,.30),rgba(226,80,60,.04));pointer-events:none;}
.ledger-name{display:flex;align-items:center;gap:9px;min-width:0;}
.ledger-icon{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.08);border:1px solid var(--edge);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.ledger-title{display:block;font-weight:600;font-size:var(--t-sm);color:#fff;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ledger-am{display:block;font-size:var(--t-2xs);color:var(--text-3);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ledger-row input{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--t-sm);margin:0;padding:5px 8px;}
.ledger-readonly{text-align:right;font-size:var(--t-sm);font-weight:700;color:#fff;font-variant-numeric:tabular-nums;}
.ledger-share-pct,.ledger-prior{text-align:right;font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;}
.ledger-delta{text-align:right;font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums;}

.share-row{
  position:relative;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr) auto 46px;gap:14px;align-items:center;
  padding:10px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);
  margin-bottom:4px;transition:background .18s var(--ease);
}
.share-row:hover{background:rgba(255,255,255,.07);}
.share-row > *{position:relative;}
.share-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(226,80,60,.28),rgba(226,80,60,.04));border-radius:var(--r-sm);pointer-events:none;transition:width .6s var(--ease);}
.share-label{display:flex;align-items:center;font-size:var(--t-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.share-val{text-align:right;white-space:nowrap;}
.share-pct{text-align:right;font-size:var(--t-xs);font-variant-numeric:tabular-nums;color:var(--text-3);}

.budget-summary{border-radius:var(--r-lg);padding:16px 18px;}
.bs-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:7px 0;font-size:var(--t-sm);color:var(--text-2);}
.bs-row .fin-money{color:#fff;font-weight:700;}
.bs-row.is-sub{border-top:1px solid var(--edge);margin-top:6px;padding-top:11px;color:#fff;font-weight:700;}
.bs-row.is-grand{border-top:1px solid var(--edge-hi);margin-top:4px;padding-top:11px;font-size:var(--t-base);color:#fff;font-weight:800;}
.bs-row.is-grand .fin-money{color:var(--ember-hi);font-size:var(--t-lg);}
.bs-row.is-delta{padding-top:2px;}
.bs-bar{height:6px;border-radius:99px;background:var(--ember);overflow:hidden;margin:2px 0 4px;}
.bs-bar span{display:block;height:100%;background:var(--navy-2);}
.bs-split{display:flex;justify-content:space-between;font-size:var(--t-2xs);color:var(--text-3);margin-bottom:4px;}
.budget-save{margin-top:var(--s-3);}

/* =====================================================================
   19. CHILDREN'S MINISTRY
   Built for a volunteer standing at a station with a queue in front of
   them: big targets, one obvious action, and the claim code treated as
   the artifact it is — a coat-check stub for a child.
   ===================================================================== */
.cm-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--edge);
}
.cm-head-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;font-weight:500;color:var(--text-3);margin-bottom:12px;}
.cm-head h2{font-family:var(--font-display);font-weight:600;font-size:var(--t-4xl);margin:0;letter-spacing:-1.4px;line-height:1.05;color:#fff;font-optical-sizing:auto;}
.cm-head p{font-size:var(--t-md);color:var(--text-2);margin:12px 0 0;max-width:56ch;line-height:1.62;font-weight:450;}
.cm-head-stat{text-align:right;flex-shrink:0;}
.cm-head-stat .v{font-size:var(--t-4xl);font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-1px;}
.cm-head-stat .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-3);margin-top:8px;font-weight:500;}

.code-stub{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,#ffffff,#eef1f6);color:var(--navy);
  border-radius:var(--r-xs);padding:9px 16px;
  font-family:var(--font-mono);font-weight:700;font-size:19px;letter-spacing:5px;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.code-stub::before,.code-stub::after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:var(--deep);top:50%;transform:translateY(-50%);}
.code-stub::before{left:-5px;} .code-stub::after{right:-5px;}
.code-stub .lbl{font-family:var(--font-ui);font-size:8.5px;letter-spacing:1.4px;font-weight:800;color:#7a8398;writing-mode:vertical-rl;text-orientation:mixed;}

.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-3);}
.kid-tile{
  position:relative;display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  padding:15px;border-radius:var(--r-md);cursor:pointer;color:inherit;font:inherit;
  border-width:1.5px;
  transition:transform .12s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.kid-tile:hover:not(.is-in){background:var(--pane-hi);border-color:var(--edge-hi);}
.kid-tile:active:not(.is-in){transform:scale(.985);}
.kid-tile.is-selected{border-color:var(--ember);background:rgba(226,80,60,.16);box-shadow:var(--sheen), 0 0 0 1px rgba(226,80,60,.4);}
.kid-tile.is-in{opacity:.45;cursor:default;}
.kid-tile-av{width:42px;height:42px;border-radius:13px;font-size:var(--t-md);}
.kid-tile.is-selected .kid-tile-av{background:linear-gradient(140deg,var(--ember-fill),var(--ember-deep));}
.kid-tile-name{font-weight:700;font-size:var(--t-md);color:#fff;line-height:1.25;letter-spacing:-.2px;}
.kid-tile-meta{font-size:var(--t-sm);color:var(--text-2);margin-top:3px;line-height:1.4;}
.kid-tile-flag{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-size:var(--t-xs);font-weight:700;color:var(--sig-amber);
  background:rgba(230,178,95,.13);border:1px solid rgba(230,178,95,.28);
  border-radius:var(--r-xs);padding:3px 8px;
}
.kid-tile-tick{
  position:absolute;top:11px;right:11px;width:21px;height:21px;border-radius:50%;
  background:var(--ember-fill);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;box-shadow:none;
}

.cm-dock{
  position:sticky;bottom:0;z-index:6;margin:var(--s-5) -22px -80px;padding:16px 22px 20px;
  background:linear-gradient(to top, rgba(6,11,22,.98) 58%, rgba(6,11,22,0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.cm-dock-inner{
  display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  background:rgba(20,32,56,.88);border:1px solid var(--edge-hi);
  border-radius:var(--r-lg);padding:14px 18px;
  box-shadow:var(--sheen-hi), 0 -6px 30px rgba(0,0,0,.5);
}
.cm-dock-count{font-size:var(--t-2xl);font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1px;}

.code-entry{max-width:420px;margin:0 auto;text-align:center;}
.code-entry input{
  width:100%;text-align:center;font-family:var(--font-mono);
  font-size:44px;font-weight:700;letter-spacing:14px;text-indent:14px;
  padding:18px 10px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.96);color:var(--navy);border:2px solid transparent;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.code-entry input:focus{border-color:var(--ember);outline:none;box-shadow:0 0 0 4px var(--ember-glow);}
.code-entry.is-match input{border-color:var(--sig-green);box-shadow:0 0 0 4px rgba(90,196,137,.25);}
.code-entry.is-miss input{border-color:var(--sig-red);box-shadow:0 0 0 4px rgba(226,80,60,.25);}
.code-verdict{margin-top:var(--s-4);font-size:var(--t-base);font-weight:700;}

.service-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-radius:var(--r-md);padding:12px 16px;margin-bottom:var(--s-4);
}
.service-bar-label{font-size:var(--t-2xs);letter-spacing:1.3px;text-transform:uppercase;font-weight:800;color:var(--text-3);}
.service-options{display:flex;gap:var(--s-2);flex-wrap:wrap;}
.service-option{
  padding:10px 18px;font-size:var(--t-base);font-weight:700;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);color:var(--text-2);border:1px solid var(--edge-hi);
  cursor:pointer;box-shadow:var(--sheen);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.service-option:hover{background:rgba(255,255,255,.11);color:var(--text);}
.service-option.active{
  background:linear-gradient(180deg,#d9452f,var(--ember-fill));background-color:var(--ember-fill);color:#fff;
  border-color:rgba(255,255,255,.26);box-shadow:var(--sheen-hi), 0 1px 3px rgba(0,0,0,.35);
}

.label-preview{display:flex;flex-wrap:wrap;gap:10px;}
.label-preview .kid-label{
  width:62mm;height:40mm;box-sizing:border-box;padding:1.5mm;
  background:#fff;color:#000;font-family:-apple-system,'Segoe UI',sans-serif;
  border-radius:3px;box-shadow:var(--e2);
}

/* =====================================================================
   20. CHARTS
   ===================================================================== */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
.chart-card{border-radius:var(--r-lg);padding:18px 20px;}
.chart-card h3{font-size:var(--t-base);margin-bottom:var(--s-3);color:var(--text);font-weight:700;letter-spacing:.1px;}
.chart-card.full{grid-column:1 / -1;}
.chart-card canvas{max-height:240px;}
@media (max-width:720px){.chart-grid{grid-template-columns:1fr;}}

@keyframes vbarGrow{from{transform:scaleY(0);opacity:.4;}to{transform:scaleY(1);opacity:1;}}
@keyframes hbarGrow{from{transform:scaleX(0);opacity:.4;}to{transform:scaleX(1);opacity:1;}}
@keyframes donutIn{from{opacity:0;transform:rotate(-90deg) scale(.8);}to{opacity:1;transform:rotate(-90deg) scale(1);}}
@keyframes lineDraw{to{stroke-dashoffset:0;}}
@keyframes dotIn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}

/* =====================================================================
   21. MOTION
   ===================================================================== */
.cm-head,.stats,.hh-list,.chart-grid,.ledger,.budget-layout,.cm-grid{animation:contentIn .3s var(--ease) both;}
@keyframes contentIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  body::before{animation:none !important;}
  .sidebar-item:hover,.sidebar-action-item:hover{padding-left:13px;}
  .hh-card:hover{transform:none;}
  #chMinistry rect,#chType circle,#chAge rect,#chLoc circle,#chGrowth path,#chGrowth circle{
    animation:none !important;opacity:1 !important;stroke-dashoffset:0 !important;
  }
}

.mobile-nav-toggle{display:none;}
.mobile-account-actions{display:none;}

/* =====================================================================
   22. RESPONSIVE
   ===================================================================== */
@media (max-width:860px){
  .stats{grid-template-columns:repeat(min(var(--cols,4),2),1fr);}
}
@media (max-width:960px){
  .budget-layout{grid-template-columns:1fr;}
  .budget-aside{position:static;}
  .ledger-row{grid-template-columns:minmax(0,1fr) 96px 48px;}
  .ledger-row .ledger-prior,.ledger-row .ledger-delta{display:none;}
  .ledger-row.head{display:none;}
  .sidebar{width:196px;padding-left:14px;}
}

@media (max-width:640px){
  .topbar{padding:14px 16px;flex-direction:column;align-items:center;text-align:center;gap:10px;}
  .brand{font-size:var(--t-md);justify-content:center;}
  .who{gap:var(--s-2);font-size:var(--t-sm);justify-content:center;flex-wrap:wrap;}
  .who button{padding:7px 10px;font-size:var(--t-xs);}
  #changePass,#signout{display:none;}
  #openSearch .search-label{display:none;}
  #openSearch{padding:8px;}
  .role-pill{display:inline-block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;padding:5px 10px;}
  .shell{padding:18px 14px 60px;border-radius:var(--r-lg) var(--r-lg) 0 0;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stats .stat{padding:14px 16px;}
  .stats .stat + .stat{border-left:none;}
  .stats .stat:nth-child(even){border-left:1px solid var(--edge);}
  .stats .stat:nth-child(n+3){border-top:1px solid var(--edge);}
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar select,.toolbar input,.toolbar button{width:100%;}
  .hh-top{flex-wrap:wrap;gap:var(--s-2);}
  .panel{padding:22px 18px;max-width:100%;}
  .row{flex-direction:column;gap:0;}
  table.preview{display:block;overflow-x:auto;white-space:nowrap;}
  .login-card{width:calc(100vw - 40px);padding:30px 24px;}
  .mobile-nav-toggle{
    display:flex;align-items:center;justify-content:center;width:34px;height:34px;
    font-size:18px;line-height:1;border-radius:var(--r-sm);
    background:rgba(255,255,255,.07);color:#fff;border:1px solid var(--edge-hi);flex-shrink:0;padding:0;
  }
  .shell-outer{flex-direction:column;position:relative;gap:0;}
  .sidebar{display:none;width:100%;position:static;padding:14px;flex-direction:column;gap:14px;}
  .sidebar.sidebar-open{
    display:flex;background:rgba(20,32,56,.72);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    border:1px solid var(--edge);border-radius:var(--r-lg);margin:0 12px 12px;
  }
  .sidebar-group{margin-bottom:0;}
  .sidebar-group-label{padding:0 4px;}
  .sidebar-item{white-space:normal;}
  .mobile-account-actions{display:block;border-top:1px solid var(--edge);margin-top:var(--s-2);padding-top:var(--s-3);}
  .cm-grid{grid-template-columns:1fr;}
  .cm-dock{margin:var(--s-4) -14px -60px;padding:14px;}
  .code-entry input{font-size:34px;letter-spacing:9px;text-indent:9px;}
  .cm-head h2{font-size:var(--t-xl);}
  .service-bar{flex-direction:column;align-items:stretch;gap:var(--s-2);}
  .service-options{display:grid;grid-template-columns:1fr 1fr;}
  .service-option{text-align:center;}
  .cert-grid{grid-template-columns:1fr!important;gap:16px!important;}
  #certificatePrintArea{aspect-ratio:unset!important;}
}

/* =====================================================================
   23. PRINT — screen chrome never reaches paper
   ===================================================================== */
@media print{
  .sidebar,.topbar,.toolbar,.cm-dock,.save-alert,.offline-strip,.bg-watermark{display:none !important;}
  body.printing-doc > *:not(#printClone){display:none!important;}
  #printClone{display:block!important;position:static!important;margin:0!important;box-sizing:border-box!important;}
  #printClone.print-landscape{width:297mm!important;height:210mm!important;}
  #printClone.print-portrait{width:210mm!important;height:297mm!important;}
  #printClone.print-labels{width:62mm!important;}
  #printClone.print-labels .kid-label{
    width:62mm;height:40mm;box-sizing:border-box;padding:1.5mm;
    page-break-after:always;break-after:page;
    font-family:-apple-system,'Segoe UI',sans-serif;color:#000;
  }
  #printClone.print-labels .kid-label:last-child{page-break-after:auto;break-after:auto;}
}

/* printable pickup report — class-scoped so it survives being cloned */
.pickup-report-print table,.pickup-report-print table.preview{width:100%;border-collapse:collapse;font-size:9pt;margin:0 0 14px;border:none;border-radius:0;background:none;}
.pickup-report-print table th,.pickup-report-print table td,
.pickup-report-print table.preview th,.pickup-report-print table.preview td{border:1px solid #999;padding:4px 6px;text-align:left;color:#000;background:none;}
.pickup-report-print table th,.pickup-report-print table.preview th{background:#eee;color:#000;}
.pickup-report-print h3{font-size:11pt;margin:0 0 6px;color:#000;}
.pickup-report-print .badge{border:1px solid #999;padding:1px 4px;font-size:8pt;background:none;color:#000;}
.pickup-report-print .badge::before{display:none;}
.pickup-report-print .hh-sub{color:#444;font-size:9pt;}

  /* ================================================================
     GLASS LAYER 6 — PRINTABLE FINANCE REPORTS
     The report is built into #printMount, which is hidden on screen and
     is the only thing shown when printing. Printing to "Save as PDF"
     gives a clean black-on-white document; the glass theme is stripped
     entirely because coloured backgrounds waste toner and read badly.
     ================================================================ */

  #printMount{ display:none; }

  @media print{
    /* Everything here is scoped to .printing-report. The kids tags and the
       document printer put their own clone in the body and set their own
       page size; an unscoped rule here blanked those pages out. The @page
       for reports is injected at print time for the same reason. */
    body.printing-report > *:not(#printMount){ display:none !important; }
    body.printing-report::before,
    body.printing-report::after{ display:none !important; }
    body.printing-report #printMount{ display:block !important; }

    body.printing-report{
      background:#fff !important;
      color:#000 !important;
      font-family:Georgia,"Times New Roman",serif;
      font-size:10.5pt;
    }
    body.printing-report .rpt *{ color:#000 !important; box-shadow:none !important; }

    /* ---------- letterhead ---------- */
    body.printing-report .rpt-head{
      display:flex; align-items:center; gap:14px;
      border-bottom:2.5px solid #000; padding-bottom:10px; margin-bottom:4px;
    }
    body.printing-report .rpt-logo{ width:58px; height:58px; object-fit:contain; filter:grayscale(1) contrast(1.15); }
    body.printing-report .rpt-org{ flex:1; }
    body.printing-report .rpt-church{ font-size:15pt; font-weight:700; letter-spacing:.2px; line-height:1.15; }
    body.printing-report .rpt-sub{ font-size:9pt; letter-spacing:1.6px; text-transform:uppercase; margin-top:2px; }
    body.printing-report .rpt-meta{ text-align:right; font-size:8.6pt; line-height:1.5; }
    body.printing-report .rpt-meta .rpt-title{ font-size:11.5pt; font-weight:700; letter-spacing:.2px; }

    body.printing-report .rpt-strap{
      display:flex; justify-content:space-between;
      font-size:8.2pt; letter-spacing:.4px;
      border-bottom:.75px solid #000; padding:4px 0 8px; margin-bottom:14px;
    }

    body.printing-report .rpt-note{
      font-size:8.8pt; font-style:italic;
      border-left:2.5px solid #000; padding:5px 0 5px 9px; margin:0 0 14px;
    }

    /* ---------- tables ---------- */
    body.printing-report .rpt table{ width:100%; border-collapse:collapse; margin-bottom:6px; }
    body.printing-report .rpt thead{ display:table-header-group; }   /* repeat header on every page */
    body.printing-report .rpt tr{ page-break-inside:avoid; }
    body.printing-report .rpt th{
      font-size:8.2pt; text-transform:uppercase; letter-spacing:.7px;
      text-align:left; padding:6px 6px; border-bottom:1.5px solid #000;
      background:#fff !important;
    }
    body.printing-report .rpt td{
      font-size:9.6pt; padding:5px 6px;
      border-bottom:.5px solid #999;
    }
    body.printing-report .rpt .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
    body.printing-report .rpt .idx{ width:22px; color:#444 !important; font-size:8.5pt; }
    body.printing-report .rpt tbody tr:nth-child(even) td{ background:#f4f4f4 !important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }

    body.printing-report .rpt tr.rpt-sub-row td{ font-weight:700; border-top:1.2px solid #000; background:#fff !important; }
    body.printing-report .rpt tr.rpt-total td{
      font-weight:700; font-size:11pt;
      border-top:1.5px solid #000; border-bottom:2.5px double #000;
      background:#fff !important;
    }
    /* Over-budget lines are marked with a rule and a symbol, not colour,
       so they survive a black-and-white printer. */
    body.printing-report .rpt tr.rpt-over td{ font-weight:700; }
    body.printing-report .rpt tr.rpt-over td:first-child::before{ content:"\25B8 "; }

    body.printing-report .rpt-sectionhead{
      font-size:9.4pt; font-weight:700; text-transform:uppercase;
      letter-spacing:1.2px; margin:16px 0 5px; padding-bottom:3px;
      border-bottom:.75px solid #000;
    }
    body.printing-report .rpt-legend{ font-size:8.4pt; margin-top:8px; line-height:1.6; }

    /* ---------- sign-off ---------- */
    body.printing-report .rpt-signs{
      display:flex; gap:34px; margin-top:30px; page-break-inside:avoid;
    }
    body.printing-report .rpt-signs > div{ flex:1; }
    body.printing-report .rpt-sign-line{ border-bottom:.75px solid #000; height:30px; }
    body.printing-report .rpt-sign-label{ font-size:8.2pt; text-transform:uppercase; letter-spacing:.8px; padding-top:4px; }

    body.printing-report .rpt-foot{
      margin-top:22px; padding-top:7px; border-top:.75px solid #000;
      font-size:7.8pt; display:flex; justify-content:space-between;
    }
  }


  /* ================================================================
     UNIVERSAL PRINT RESET
     Applies to every print job — kids tags, documents and finance
     reports alike. None of this hides content; it only neutralises
     decoration that must never reach paper:

       - body::before / ::after are the aurora. They are position:fixed
         and cover the page, so they paint over non-positioned print
         clones and can blank the output entirely.
       - backdrop-filter is a known cause of blank or black areas when
         printing in Chrome, and there is no reason to blur anything
         on paper.

     Scoping these to one screen was my mistake; they are always wrong
     on paper, whatever is being printed.
     ================================================================ */
  @media print{
    body::before, body::after{ content:none !important; display:none !important; }
    .bg-watermark{ display:none !important; }

    *{
      -webkit-backdrop-filter:none !important;
      backdrop-filter:none !important;
      text-shadow:none !important;
      box-shadow:none !important;
      animation:none !important;
      transition:none !important;
    }

    html, body{
      background:#fff !important;
      background-image:none !important;
    }

    /* The print clones sit directly on the body and must be allowed to
       establish their own stacking, above anything left behind. */
    /* The report is staged off-screen at left:-9999px before being cloned.
       position:static makes that offset inert; forcing relative here brought
       it back and pushed the whole report off the page, printing blank.
       Static is correct — and the offsets are cleared as well, so an inline
       left/top on any future print source cannot do the same thing again. */
    #printClone, #printMount{
      position:static !important;
      left:auto !important; right:auto !important;
      top:auto !important; bottom:auto !important;
      transform:none !important;
      background:#fff !important;
    }
    #printClone *{ background-color:transparent !important; }
    #printClone.print-labels .kid-label{
      color:#000 !important;
      background:#fff !important;
    }
  }


  /* ================================================================
     KIOSK MODE — the check-in station
     Every selector is prefixed with body.kiosk. Without it these lose to
     the generic `button:not(.primary)` rule, which has higher specificity
     and was painting every control dim grey on near-transparent — the
     reason nothing could be read.
     Sizing assumes a tablet at arm's length: nothing below 16px, touch
     targets at least 56px, and contrast well clear of AA.
     ================================================================ */
  body.kiosk .sidebar,
  body.kiosk .topbar,
  body.kiosk .offline-strip{ display:none !important; }
  body.kiosk .shell{ margin:0 !important; border-radius:0 !important; border:none !important; background:transparent !important; }
  body.kiosk #app{ padding:0 !important; }
  body.kiosk{ overflow:hidden; }

  body.kiosk .kio{
    min-height:100vh; display:flex; flex-direction:column;
    padding:clamp(18px,2.6vw,36px);
    color:#f4f7fb;
  }

  /* ---------- header ---------- */
  body.kiosk .kio-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:18px; padding-bottom:clamp(14px,1.8vw,22px);
    border-bottom:1px solid rgba(255,255,255,.12);
    margin-bottom:clamp(16px,2.2vw,28px);
  }
  body.kiosk .kio-brand{ display:flex; align-items:center; gap:15px; }
  body.kiosk .kio-brand img{ width:52px; height:52px; object-fit:contain; }
  body.kiosk .kio-title{
    font-family:var(--font-display); font-size:clamp(21px,2.3vw,30px);
    line-height:1.12; color:#fff; letter-spacing:-.01em;
  }
  body.kiosk .kio-sub{
    font-size:clamp(11px,1vw,13px); letter-spacing:1.6px; text-transform:uppercase;
    color:#9fb0c9; margin-top:3px;
  }
  body.kiosk .kio-who{ text-align:right; line-height:1.45; }
  body.kiosk .kio-who span{ font-size:clamp(11px,1vw,13px); letter-spacing:1.2px; text-transform:uppercase; color:#9fb0c9; }
  body.kiosk .kio-who b{ display:block; color:#fff; font-size:clamp(16px,1.6vw,20px); font-weight:650; }

  /* ---------- mode switch ---------- */
  body.kiosk .kio-modes{ display:flex; gap:12px; margin-bottom:clamp(16px,2.2vw,26px); }
  body.kiosk .kio-mode{
    flex:1; min-height:60px; padding:clamp(14px,1.7vw,20px);
    border-radius:16px; cursor:pointer;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06) !important;
    color:#c8d4e4 !important;
    font-size:clamp(16px,1.6vw,20px); font-weight:640; letter-spacing:.01em;
    display:flex; align-items:center; justify-content:center; gap:10px;
    transition:background .18s cubic-bezier(.32,.72,0,1), color .18s, border-color .18s, box-shadow .18s;
  }
  body.kiosk .kio-mode:hover{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
  body.kiosk .kio-mode.on{
    background:linear-gradient(135deg,#e5484d,#c0392b 58%,#8f2820) !important;
    border-color:rgba(255,255,255,.28) !important; color:#fff !important;
    box-shadow:0 8px 26px rgba(229,72,77,.34), inset 0 1px 0 rgba(255,255,255,.16);
  }

  /* ---------- layout ---------- */
  body.kiosk .kio-body{
    flex:1; display:grid; grid-template-columns:minmax(300px,390px) 1fr;
    gap:clamp(18px,2.4vw,32px); min-height:0;
  }
  @media (max-width:900px){ body.kiosk .kio-body{ grid-template-columns:1fr; } }

  /* ---------- search field ---------- */
  body.kiosk .kio-find{
    width:100%; min-height:66px;
    font-size:clamp(19px,2vw,25px); font-weight:600;
    padding:16px 20px; border-radius:16px;
    background:rgba(255,255,255,.09) !important;
    border:1.5px solid rgba(255,255,255,.20) !important;
    color:#fff !important;
    text-align:center; letter-spacing:.02em;
    margin-bottom:12px;
  }
  body.kiosk .kio-find::placeholder{ color:#8496ae !important; font-weight:400; letter-spacing:0; font-size:.72em; }
  body.kiosk .kio-find:focus{
    outline:none;
    border-color:rgba(229,72,77,.75) !important;
    background:rgba(255,255,255,.13) !important;
    box-shadow:0 0 0 4px rgba(229,72,77,.22);
  }
  body.kiosk .kio-hint{
    font-size:clamp(12px,1.1vw,14px); color:#9fb0c9;
    text-align:center; margin-bottom:14px; line-height:1.5;
  }

  /* ---------- number pad ---------- */
  body.kiosk .kio-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  body.kiosk .kio-key{
    min-height:clamp(58px,6.4vw,76px);
    border-radius:16px; cursor:pointer;
    border:1px solid rgba(255,255,255,.14) !important;
    background:rgba(255,255,255,.08) !important;
    color:#ffffff !important;
    font-size:clamp(22px,2.5vw,30px); font-weight:600;
    font-variant-numeric:tabular-nums;
    transition:transform .09s, background .16s;
    -webkit-user-select:none; user-select:none;
  }
  body.kiosk .kio-key:hover{ background:rgba(255,255,255,.15) !important; }
  body.kiosk .kio-key:active{ transform:scale(.94); background:rgba(229,72,77,.42) !important; }
  body.kiosk .kio-key.util{
    font-size:clamp(14px,1.4vw,17px); font-weight:600;
    color:#c8d4e4 !important; background:rgba(255,255,255,.05) !important;
  }

  /* ---------- child cards ---------- */
  body.kiosk .kio-kids{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:13px; align-content:start;
  }
  body.kiosk .kio-kid{
    padding:clamp(14px,1.6vw,19px); border-radius:18px; cursor:pointer;
    border:1.5px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    transition:all .18s cubic-bezier(.32,.72,0,1);
    display:flex; gap:13px; align-items:flex-start;
  }
  body.kiosk .kio-kid:hover{ background:rgba(255,255,255,.11); transform:translateY(-2px); }
  body.kiosk .kio-kid.picked{
    border-color:#e5484d; background:rgba(229,72,77,.20);
    box-shadow:0 0 0 3px rgba(229,72,77,.26), 0 8px 24px rgba(229,72,77,.20);
  }
  body.kiosk .kio-kid.already{ opacity:.5; cursor:default; }
  body.kiosk .kio-kid.already:hover{ transform:none; background:rgba(255,255,255,.06); }
  body.kiosk .kio-av{
    width:46px; height:46px; flex-shrink:0; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; font-weight:700; color:#fff;
    background:linear-gradient(145deg,rgba(229,72,77,.55),rgba(143,40,32,.42));
    border:1px solid rgba(255,255,255,.18);
  }
  body.kiosk .kio-kid-name{
    font-size:clamp(17px,1.7vw,21px); font-weight:660; color:#fff;
    margin-bottom:3px; line-height:1.2;
  }
  body.kiosk .kio-kid-meta{ font-size:clamp(13px,1.2vw,15px); color:#a9b8cc; line-height:1.4; }
  body.kiosk .kio-tick{
    margin-left:auto; width:28px; height:28px; border-radius:50%; flex-shrink:0;
    border:2px solid rgba(255,255,255,.28);
  }
  body.kiosk .kio-kid.picked .kio-tick{
    background:#e5484d; border-color:#e5484d;
    box-shadow:0 0 0 4px rgba(229,72,77,.24);
  }
  body.kiosk .kio-kid-alert{
    margin-top:9px; padding:7px 11px; border-radius:10px;
    font-size:clamp(13px,1.2vw,15px); font-weight:620; line-height:1.35;
    background:rgba(224,169,74,.20); color:#ffd489;
    border:1px solid rgba(224,169,74,.42);
  }
  body.kiosk .kio-kid-barred{
    margin-top:7px; padding:7px 11px; border-radius:10px;
    font-size:clamp(13px,1.2vw,15px); font-weight:700; line-height:1.35;
    background:rgba(229,72,77,.24); color:#ffc2c4;
    border:1px solid rgba(229,72,77,.55);
  }

  /* ---------- messages ---------- */
  body.kiosk .kio-msg{
    padding:clamp(16px,1.9vw,22px); border-radius:16px;
    font-size:clamp(15px,1.5vw,18px); line-height:1.55;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06); color:#dbe4f0;
  }
  body.kiosk .kio-msg b{ color:#fff; }
  body.kiosk .kio-msg.good{
    background:rgba(62,207,142,.16); border-color:rgba(62,207,142,.48); color:#b6f4d8;
  }
  body.kiosk .kio-msg.good b{ color:#8ff0c4; }
  body.kiosk .kio-msg.bad{
    background:rgba(229,72,77,.20); border-color:rgba(229,72,77,.60);
    color:#ffcdcf; font-weight:600;
  }
  body.kiosk .kio-msg.bad b{ color:#fff; }
  body.kiosk .kio-code{
    display:block; font-size:clamp(34px,4.4vw,54px); font-weight:750;
    letter-spacing:.16em; margin:10px 0 4px; color:#fff;
    font-variant-numeric:tabular-nums;
  }

  /* ---------- actions ---------- */
  body.kiosk .kio-action{ margin-top:18px; padding-top:16px; display:flex; gap:12px; align-items:center; }
  body.kiosk .kio-go{
    flex:1; min-height:68px; padding:18px 26px; border-radius:999px;
    border:1px solid rgba(255,255,255,.22) !important;
    font-size:clamp(17px,1.9vw,22px); font-weight:690; cursor:pointer;
    color:#ffffff !important;
    background:linear-gradient(135deg,#e5484d,#c0392b 58%,#8f2820) !important;
    box-shadow:0 10px 30px rgba(229,72,77,.34), inset 0 1px 0 rgba(255,255,255,.18);
  }
  body.kiosk .kio-go:hover:not(:disabled){ filter:brightness(1.08); }
  body.kiosk .kio-go:disabled{
    opacity:.34; cursor:not-allowed; box-shadow:none;
    background:rgba(255,255,255,.09) !important; color:#8496ae !important;
    border-color:rgba(255,255,255,.12) !important;
  }
  body.kiosk .kio-exit{
    min-height:68px; padding:16px 24px; border-radius:999px; cursor:pointer;
    background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    color:#c8d4e4 !important; font-size:clamp(13px,1.2vw,15px); font-weight:600;
  }
  body.kiosk .kio-exit:hover{ background:rgba(255,255,255,.13) !important; color:#fff !important; }

  /* ---------- shift sign-on ---------- */
  body.kiosk .kio-names{ display:flex; flex-wrap:wrap; gap:11px; margin-top:16px; }
  body.kiosk .kio-name{
    min-height:60px; padding:15px 26px; border-radius:999px; cursor:pointer;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.08) !important;
    color:#ffffff !important; font-size:clamp(16px,1.6vw,19px); font-weight:600;
  }
  body.kiosk .kio-name:hover{
    background:rgba(229,72,77,.28) !important; border-color:rgba(229,72,77,.55) !important;
  }
  body.kiosk .kio-label{
    display:block; font-size:clamp(12px,1.1vw,14px); letter-spacing:1.2px;
    text-transform:uppercase; color:#9fb0c9; margin-bottom:8px;
  }
  body.kiosk input[type=text]{
    background:rgba(255,255,255,.09) !important;
    border:1.5px solid rgba(255,255,255,.20) !important;
    color:#fff !important;
    border-radius:14px; padding:15px 18px; font-size:clamp(16px,1.6vw,19px);
    min-height:60px;
  }
  body.kiosk input[type=text]::placeholder{ color:#8496ae !important; }
  body.kiosk input[type=text]:focus{
    outline:none; border-color:rgba(229,72,77,.75) !important;
    box-shadow:0 0 0 4px rgba(229,72,77,.22);
  }
  
  /* ================================================================
     PICKUP REPORT — print layout
     Nine columns on A4 landscape. The on-screen table carries a
     min-width for horizontal scrolling, which in print pushes the last
     columns off the page; it is cleared here. Headers repeat on every
     sheet and a row is never split across a page break, because half a
     child's record at the foot of a page is worse than a short page.
     ================================================================ */
  @media print{
    .pickup-report-print{ padding:8mm !important; }

    .pickup-report-print table,
    .pickup-report-print table.preview{
      min-width:0 !important; width:100% !important;
      table-layout:fixed; border-collapse:collapse;
      font-size:7.6pt;
    }
    .pickup-report-print thead{ display:table-header-group; }
    .pickup-report-print tr{ page-break-inside:avoid; break-inside:avoid; }
    .pickup-report-print table th,
    .pickup-report-print table td,
    .pickup-report-print table.preview th,
    .pickup-report-print table.preview td{
      padding:3px 4px !important;
      word-break:break-word; overflow-wrap:anywhere;
      vertical-align:top;
    }
    .pickup-report-print table th,
    .pickup-report-print table.preview th{
      font-size:7pt; text-transform:uppercase; letter-spacing:.3px;
      background:#eaeaea !important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact;
    }
    /* Date, Service, Class, Code, Dropped off, Checked in, Collected,
       Released at, Released by — widths tuned so names get the room and
       the short columns do not hog it. */
    .pickup-report-print table th:nth-child(1),
    .pickup-report-print table td:nth-child(1){ width:8%; }
    .pickup-report-print table th:nth-child(2),
    .pickup-report-print table td:nth-child(2){ width:11%; }
    .pickup-report-print table th:nth-child(3),
    .pickup-report-print table td:nth-child(3){ width:10%; }
    .pickup-report-print table th:nth-child(4),
    .pickup-report-print table td:nth-child(4){ width:7%; font-weight:700; letter-spacing:.5px; }
    .pickup-report-print table th:nth-child(5),
    .pickup-report-print table td:nth-child(5){ width:13%; }
    .pickup-report-print table th:nth-child(6),
    .pickup-report-print table td:nth-child(6){ width:12%; }
    .pickup-report-print table th:nth-child(7),
    .pickup-report-print table td:nth-child(7){ width:13%; }
    .pickup-report-print table th:nth-child(8),
    .pickup-report-print table td:nth-child(8){ width:13%; }
    .pickup-report-print table th:nth-child(9),
    .pickup-report-print table td:nth-child(9){ width:13%; }

    /* Keep a child's heading with at least the start of their table. */
    .pickup-report-print h3{ page-break-after:avoid; break-after:avoid; }
    .pickup-report-print > div > div{ page-break-inside:auto; }

    /* "Still checked in" must stand out on paper without colour. */
    .pickup-report-print .badge.pending{
      border:1.2px solid #000 !important; font-weight:700; background:none !important;
    }
  }

/* =====================================================================
   24. CHART SYSTEM
   Charts are read, not admired: gridlines sit behind, figures are mono
   and tabular, and every series can be interrogated by hovering it.
   ===================================================================== */
.chart-grid{gap:20px;}
.chart-card{padding:24px 26px 22px;border-radius:var(--r-xl);}
.chart-card h3{
  font-size:var(--t-md);font-weight:600;color:#fff;letter-spacing:-.3px;margin:0 0 4px;
}
.ch-sub{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-3);margin-bottom:20px;
}
.ch-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap;}
.ch-big{
  font-size:var(--t-4xl);font-weight:700;color:#fff;letter-spacing:-2px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.ch-big small{font-size:20px;font-weight:500;color:var(--text-2);letter-spacing:-.5px;}
.ch-delta{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.6px;color:var(--text-2);
}
.ch-delta b{font-weight:500;}
.ch-delta .up{color:var(--sig-green);} .ch-delta .down{color:var(--ember-hi);}
.ch-note{
  text-align:right;font-family:var(--font-mono);font-size:10px;letter-spacing:1.3px;
  color:var(--text-3);line-height:1.9;text-transform:uppercase;
}
.ch-note b{display:block;font-size:14px;color:var(--text);font-weight:500;letter-spacing:-.2px;text-transform:none;}

.ch{position:relative;}
.ch svg{display:block;width:100%;overflow:visible;}
.ch-gl{stroke:rgba(255,255,255,.055);stroke-width:1;}
.ch-base{stroke:rgba(255,255,255,.14);stroke-width:1;}
.ch-ax{font-family:'JetBrains Mono',monospace;font-size:10px;fill:var(--text-3);letter-spacing:.5px;}
.ch-val{font-family:'JetBrains Mono',monospace;font-size:10.5px;fill:#fff;font-weight:500;}

.ch-bar{transition:opacity .2s var(--ease),transform .2s var(--ease);transform-origin:center bottom;}
.ch svg:hover .ch-bar{opacity:.42;}
.ch svg .ch-bar:hover{opacity:1;}
.ch-line{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.ch-line.prior{stroke:rgba(255,255,255,.24);stroke-width:1.5;stroke-dasharray:4 5;filter:none;}
.ch-dot{fill:var(--deep);stroke:#fff;stroke-width:2;}
.ch-dot.live{fill:var(--ember);stroke:#fff;}
.ch-guide{stroke:var(--ember);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .15s;}

.ch-tip{
  position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-120%);
  padding:9px 12px;border-radius:var(--r-sm);white-space:nowrap;z-index:6;
  background:rgba(12,20,38,.94);border:1px solid var(--edge-hi);
  box-shadow:0 12px 34px rgba(0,0,0,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:opacity .15s var(--ease);
}
.ch-tip .k{font-family:var(--font-mono);font-size:9px;letter-spacing:1.4px;color:var(--text-3);text-transform:uppercase;}
.ch-tip .v{font-size:15px;font-weight:700;color:#fff;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.4px;}
.ch-tip .s{font-size:11px;color:var(--text-2);margin-top:2px;}

.ch-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--edge);}
.ch-leg{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--text-2);}
.ch-leg i{width:15px;height:2.5px;border-radius:2px;background:#fff;}
.ch-leg.dash i{background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 4px,transparent 4px 8px);}
.ch-leg.now i{width:9px;height:9px;border-radius:50%;background:var(--ember);}

/* donut with the total living in the hole */
.ch-donut{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.ch-donut-svg{position:relative;width:186px;flex-shrink:0;}
.ch-donut-mid{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.ch-donut-mid .v{font-size:27px;font-weight:700;color:#fff;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;line-height:1;}
.ch-donut-mid .k{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:var(--text-3);margin-top:6px;text-transform:uppercase;}
.ch-arc{transition:opacity .2s var(--ease);cursor:pointer;}
.ch-donut-svg:hover .ch-arc{opacity:.35;}
.ch-donut-svg .ch-arc:hover{opacity:1;}
.ch-keys{display:flex;flex-direction:column;gap:11px;flex:1;min-width:170px;}
.ch-key{display:grid;grid-template-columns:9px 1fr auto;gap:11px;align-items:center;font-size:var(--t-sm);}
.ch-key i{width:9px;height:9px;border-radius:3px;}
.ch-key span{color:var(--text);font-weight:500;}
.ch-key b{font-family:var(--font-mono);font-size:11.5px;color:var(--text-2);font-weight:500;font-variant-numeric:tabular-nums;}

/* ranked share rows, restyled to match the chart family */
.share-row{padding:12px 16px;border-radius:var(--r-md);}
.share-label{font-size:var(--t-base);font-weight:500;}
.share-val{font-family:var(--font-mono);font-size:12px;color:#fff;font-weight:500;font-variant-numeric:tabular-nums;}
.share-pct{font-family:var(--font-mono);font-size:10.5px;}

@media (max-width:640px){
  .chart-card{padding:18px 16px;}
  .ch-donut{gap:18px;justify-content:center;}
  .ch-big{font-size:32px;}
}

/* =====================================================================
   25. ACCESSIBILITY, DENSITY, PERFORMANCE, STATES
   ===================================================================== */

/* ---- skip link: first stop for a keyboard user ---- */
.skip-link{
  position:fixed;left:12px;top:-60px;z-index:200;
  padding:10px 16px;border-radius:var(--r-sm);
  background:var(--ember-fill);color:#fff;font-weight:700;font-size:var(--t-base);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:top .18s var(--ease);
}
.skip-link:focus{top:12px;}

/* nav items are real buttons now — strip the UA chrome, keep the look */
button.sidebar-item{
  width:100%;text-align:left;font-family:inherit;
  background:none;border:1px solid transparent;box-shadow:none;
}
button.sidebar-item:hover{box-shadow:none;}
.sidebar-item[aria-current="page"]{}

/* ---- long names must never break the layout ---- */
.hh-name,.msg-name,.ledger-title,.share-label,.kid-tile-name,.req-title,.search-title{
  overflow-wrap:anywhere;
}
.hh-name{line-height:1.3;}

/* ---- DENSITY ---- */
body.dense .shell{padding:26px 24px 80px;}
body.dense .cm-head{margin-bottom:20px;padding-bottom:16px;}
body.dense .cm-head h2{font-size:30px;letter-spacing:-1px;}
body.dense .cm-head p{margin-top:7px;font-size:var(--t-base);}
body.dense .stats{margin-bottom:16px;}
body.dense .stats .stat{padding:13px 16px;}
body.dense .stat .n{font-size:23px;}
body.dense .hh-card{padding:9px 14px;}
body.dense .hh-list{gap:5px;}
body.dense .chart-card{padding:16px 18px;}
body.dense .tag{margin-top:3px;padding:2px 7px;}

/* ---- DATA TABLE: what a 168-row list actually needs ---- */
.dtable-wrap{
  /* overflow-x:auto rather than hidden. Today's tables all fit, so this
     changes nothing on screen — it is a guard. With overflow:hidden a table
     wider than its card (a six-column export, a long ministry name) would be
     silently clipped with no way to reach the cut-off columns. auto lets it
     scroll inside its own card instead, which is what the rule about wide
     content asks for. The radius still clips either way. */
  border:1px solid var(--edge);border-radius:var(--r-lg);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  background:var(--pane);box-shadow:var(--sheen),var(--e1);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
}
.dtable{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-base);}
.dtable th{
  position:sticky;top:0;z-index:2;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:500;color:var(--text-3);text-align:left;padding:11px 16px;
  background:rgba(18,30,52,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--edge-hi);white-space:nowrap;
}
.dtable td{padding:11px 16px;border-bottom:1px solid var(--edge);vertical-align:middle;}
.dtable tr:last-child td{border-bottom:none;}
.dtable tbody tr{cursor:pointer;transition:background .15s var(--ease);}
.dtable tbody tr:hover td{background:rgba(255,255,255,.05);}
.dtable tbody tr:focus-visible{outline:2px solid var(--ember);outline-offset:-2px;}
.dtable .t-name{font-weight:600;color:#fff;}
.dtable .t-am{font-size:var(--t-xs);color:var(--text-3);margin-top:2px;}
.dtable .t-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;}
body.dense .dtable th,body.dense .dtable td{padding:7px 14px;}
.dtable-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--edge);background:rgba(0,0,0,.16);
  font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--text-3);
}

/* segmented view / density switch */
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid var(--edge);}
.seg button{
  border:none;background:none;box-shadow:none;color:var(--text-2);
  padding:6px 12px;border-radius:var(--r-xs);font-size:var(--t-xs);font-weight:700;
}
.seg button:hover{background:rgba(255,255,255,.08);color:#fff;}
.seg button[aria-pressed="true"]{background:var(--ember-fill);color:#fff;box-shadow:none;}

/* ---- STATES: empty, loading, error ---- */
.state{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:56px 28px;border:1px dashed var(--edge-hi);border-radius:var(--r-lg);
  background:rgba(255,255,255,.02);
}
.state-ico{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(255,255,255,.06);border:1px solid var(--edge-hi);color:var(--text-2);
}
.state-ico svg{width:22px;height:22px;}
.state h3{font-size:var(--t-lg);color:#fff;margin-bottom:8px;letter-spacing:-.3px;}
.state p{font-size:var(--t-base);color:var(--text-2);max-width:44ch;line-height:1.65;margin-bottom:20px;}
.state-acts{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center;}
.state.is-error{border-style:solid;border-color:rgba(226,80,60,.34);background:rgba(226,80,60,.05);}
.state.is-error .state-ico{background:rgba(226,80,60,.12);border-color:rgba(226,80,60,.34);color:var(--ember-hi);}

/* skeletons: the shape of the answer while it loads */
.sk{border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 37%,rgba(255,255,255,.05) 63%);
    background-size:400% 100%;animation:shimmer 1.5s linear infinite;}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.sk-card{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--pane);margin-bottom:8px;}
.sk-av{width:38px;height:38px;border-radius:12px;flex-shrink:0;}
.sk-lines{flex:1;}
.sk-l{height:11px;margin-bottom:8px;}
@media (prefers-reduced-motion:reduce){ .sk{animation:none;} }

/* ---- PERFORMANCE MODE: glass is expensive on a Sunday tablet ---- */
body.perf-lite *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
body.perf-lite::before{animation:none !important;opacity:.5;}
body.perf-lite .shell{background:#0f1a30;}
body.perf-lite .hh-card,body.perf-lite .chart-card,body.perf-lite .req-card,
body.perf-lite .stats,body.perf-lite .dtable-wrap,body.perf-lite .stat,
body.perf-lite .service-bar,body.perf-lite .kid-tile,body.perf-lite .tabs{background:#16223c;}
body.perf-lite .panel{background:#18243f;}
body.perf-lite .topbar{background:#0d1729;}
body.perf-lite .cm-dock-inner{background:#16223c;}
body.kiosk{}
body.kiosk .bg-watermark{display:none;}

/* ---- COMMAND PALETTE ---- */
.cmdk-mark{background:rgba(226,80,60,.28);color:#fff;border-radius:3px;padding:0 2px;}
.search-row .search-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kbd{
  display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:10px;
  padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.07);
  border:1px solid var(--edge-hi);color:var(--text-2);
}

/* ---- CHART HONESTY ---- */
.ch-axisnote{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--sig-amber);background:rgba(230,178,95,.10);
  border:1px solid rgba(230,178,95,.26);border-radius:99px;padding:5px 11px;
}
.ch-axisnote button{
  border:none;background:none;box-shadow:none;padding:0;color:inherit;
  font-family:inherit;font-size:inherit;letter-spacing:inherit;text-decoration:underline;
  text-underline-offset:2px;font-weight:700;
}
.ch-axisnote button:hover{color:#fff;background:none;}

/* =====================================================================
   26. DASHBOARD SYSTEM
   Borrowed structure: every card announces itself with an icon chip and
   a label, the hero chart carries its own controls, and a target is
   always shown as required-vs-actual so the verdict is checkable.
   ===================================================================== */

/* ---- the icon chip that titles every card ---- */
.chip-ico{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;color:var(--text-2);
  background:rgba(255,255,255,.06);border:1px solid var(--edge);
  box-shadow:var(--sheen);
}
.chip-ico.hot{color:var(--ember-hi);background:rgba(226,80,60,.13);border-color:rgba(226,80,60,.30);}
.chip-ico.good{color:var(--sig-green);background:rgba(90,196,137,.13);border-color:rgba(90,196,137,.30);}
.chip-ico.warn{color:var(--sig-amber);background:rgba(230,178,95,.13);border-color:rgba(230,178,95,.30);}

.card-title{display:flex;align-items:center;gap:11px;}
.card-title h3{font-size:var(--t-md);font-weight:600;color:#fff;letter-spacing:-.3px;margin:0;}
.card-title .amt{font-size:var(--t-2xl);font-weight:700;letter-spacing:-1.2px;color:#fff;font-variant-numeric:tabular-nums;}
.card-title .unit{font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;color:var(--text-3);align-self:flex-end;padding-bottom:5px;}

/* ---- hero panel: chart with its own controls in the header ---- */
.hero{
  background:var(--pane);border:1px solid var(--edge);border-radius:var(--r-xl);
  box-shadow:var(--sheen),var(--e2);padding:20px 22px 18px;
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.hero-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* timeframe pills — the control that makes a chart feel alive */
.tf{display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid var(--edge);}
.tf button{
  border:none;background:none;box-shadow:none;color:var(--text-3);
  padding:5px 11px;border-radius:var(--r-xs);font-family:var(--font-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.6px;
}
.tf button:hover{background:rgba(255,255,255,.08);color:#fff;}
.tf button[aria-pressed="true"]{background:var(--ember-fill);color:#fff;box-shadow:none;}

.icon-btn{
  width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:var(--r-sm);
}

/* ---- dashboard grid: hero beside a limits rail ---- */
.dash{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;margin-bottom:18px;}
@media (max-width:1100px){ .dash{grid-template-columns:1fr !important;} }

/* ---- limit bars: a ceiling you can see yourself approaching ---- */
.limit{padding:14px 0;border-bottom:1px solid var(--edge);}
.limit:last-child{border-bottom:none;padding-bottom:2px;}
.limit-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px;}
.limit-name{font-size:var(--t-base);font-weight:600;color:#fff;}
.limit-pct{font-family:var(--font-mono);font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums;}
.limit-pct.over{color:#f0907f;font-weight:700;}
.limit-track{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35);}
.limit-fill{display:block;height:100%;border-radius:99px;width:0;transition:width 1s var(--ease);}
.limit-fill.ok{background:linear-gradient(90deg,rgba(90,196,137,.55),var(--sig-green));}
.limit-fill.warn{background:linear-gradient(90deg,rgba(230,178,95,.55),var(--sig-amber));}
.limit-fill.over{background:linear-gradient(90deg,#e2503c,#ff7a63);}
.limit-foot{display:flex;justify-content:space-between;gap:10px;margin-top:7px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.8px;color:var(--text-3);}

/* ---- metric row: icon chip, label, then the number ---- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
@media (max-width:1400px){ .metrics{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .metrics{grid-template-columns:1fr;} }
.metric{
  background:var(--pane);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--sheen),var(--e1);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.metric:hover{background:var(--pane-hi);border-color:var(--edge-hi);transform:translateY(-1px);}
.metric-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
/* A metric that navigates somewhere is a real <button>, so its inner boxes
   are spans and need promoting back to blocks. Same treatment as .hh-card. */
button.metric{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
button.metric .metric-top{display:flex;}
button.metric .metric-val,
button.metric .metric-sub,
button.metric .metric-lbl{display:block;}
button.metric:hover{background:var(--pane-hi);border-color:var(--edge-hi);}
.metric-val.neg{color:var(--ember-hi);}
.metric-lbl{font-size:var(--t-sm);font-weight:600;color:var(--text-2);}
.metric-val{font-size:28px;font-weight:700;color:#fff;letter-spacing:-1.3px;line-height:1;font-variant-numeric:tabular-nums;}
.metric-val.neg{color:#f0907f;}
.metric-val.pos{color:var(--sig-green);}
.metric-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.1px;color:var(--text-3);margin-top:9px;text-transform:uppercase;}

/* ---- goal cards: required vs actual, with a verdict ---- */
.goals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:1400px){ .goals{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .goals{grid-template-columns:1fr;} }
.goal-c{
  position:relative;overflow:hidden;
  background:var(--pane);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--sheen),var(--e1);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
}
.goal-c::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:radial-gradient(80% 100% at 50% 130%, rgba(90,196,137,.20), transparent 70%);
}
.goal-c.is-behind::after{background:radial-gradient(80% 100% at 50% 130%, rgba(230,178,95,.20), transparent 70%);}
.goal-c.is-miss::after{background:radial-gradient(80% 100% at 50% 130%, rgba(226,80,60,.20), transparent 70%);}
.goal-c > *{position:relative;}
.goal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}
.goal-head .l{display:flex;align-items:center;gap:10px;min-width:0;}
.goal-name{font-size:var(--t-base);font-weight:600;color:#fff;overflow-wrap:anywhere;}
.verdict{
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.3px;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;flex-shrink:0;font-weight:500;
}
.verdict.pass{background:rgba(90,196,137,.14);color:var(--sig-green);border:1px solid rgba(90,196,137,.30);}
.verdict.behind{background:rgba(230,178,95,.14);color:var(--sig-amber);border:1px solid rgba(230,178,95,.30);}
.verdict.miss{background:rgba(226,80,60,.14);color:#f0907f;border:1px solid rgba(226,80,60,.30);}
.goal-cmp{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;}
.goal-cmp .k{font-family:var(--font-mono);font-size:9px;letter-spacing:1.2px;color:var(--text-3);text-transform:uppercase;}
.goal-cmp .v{font-size:var(--t-lg);font-weight:700;color:#fff;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.goal-cmp .v.dim{color:var(--text-2);font-weight:600;}
.goal-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:14px;}
.goal-bar span{display:block;height:100%;border-radius:99px;width:0;transition:width 1s var(--ease);}
.goal-c.is-pass .goal-bar span{background:var(--sig-green);}
.goal-c.is-behind .goal-bar span{background:var(--sig-amber);}
.goal-c.is-miss .goal-bar span{background:var(--ember);}

/* ---- section headings between blocks ---- */
.sec{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:30px 0 14px;flex-wrap:wrap;}
.sec h3{font-size:var(--t-md);font-weight:600;color:#fff;letter-spacing:-.3px;margin:0;}
.sec .more{font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;color:var(--ember-hi);cursor:pointer;text-transform:uppercase;}
.sec .more:hover{color:#fff;}

/* the hero chart tooltip is a pill that rides the line, as in the reference */
.ch-tip.pill{transform:translate(-50%,-140%);border-radius:99px;padding:8px 14px;}
.ch-tip.pill .v{margin-top:0;font-size:var(--t-base);}
.ch-tip.pill .k{margin-top:3px;}

/* =====================================================================
   27. THE EMBER RIM
   Every rounded surface gets a hairline of ember light around its edge —
   brightest where the light lands (top-left), fading as the edge turns
   away, and catching again on the far corner the way a real glass edge
   does. Built as a masked gradient ring rather than a border, so the
   colour can travel around the shape instead of sitting flat.
   ===================================================================== */
:root{
  /* The lit edge is blue now. Same rule that fixed the pink applies here:
     hold the band near 50% lightness, because a blue much above that goes
     pale and chalky instead of reading as glass. The glint stays pure
     white so it cannot drag the hue anywhere. One value drives it all. */
  --rim-a: 43,116,232;    /* #2b74e8 — hue 217, light 54 */
  --rim-b: 31,111,224;    /* deeper, for the falloff */
  --rim-c: 26, 82,170;    /* deepest, where the edge turns away */

  --rim:
    radial-gradient(115% 115% at 0% 0%,
      rgba(255,255,255,.62)      0%,
      rgba(var(--rim-a),.78)     5%,
      rgba(var(--rim-b),.38)    18%,
      rgba(var(--rim-c),.14)    34%,
      transparent               54%),
    radial-gradient(75% 75% at 100% 100%,
      rgba(255,255,255,.20)      0%,
      rgba(var(--rim-a),.38)     7%,
      rgba(var(--rim-c),.12)    24%,
      transparent               50%),
    linear-gradient(135deg,
      rgba(var(--rim-a),.32)     0%,
      rgba(var(--rim-c),.14)    28%,
      rgba(255,255,255,.10)     50%,
      rgba(var(--rim-c),.12)    72%,
      rgba(var(--rim-a),.28)   100%);
  --rim-soft:
    radial-gradient(115% 115% at 0% 0%,
      rgba(255,255,255,.40)      0%,
      rgba(var(--rim-a),.44)     6%,
      rgba(var(--rim-c),.12)    26%,
      transparent               52%),
    linear-gradient(135deg,
      rgba(var(--rim-a),.20)     0%,
      rgba(255,255,255,.07)     52%,
      rgba(var(--rim-a),.17)   100%);
  --rim-glow: 0 0 0 1px rgba(var(--rim-c),.06);
}





.hero, .metric, .goal-c, .chart-card, .hh-card, .stat, .stats, .req-card,
.dtable-wrap, .panel, .tabs, .service-bar, .kid-tile, .cm-dock-inner,
.budget-summary, .budget-context, .state, .login-card, .chip-ico, .seg, .tf,
.toolbar input, .toolbar select, .limit-track, .sk-card, .role-pill,
.lang-switch, .brand .mark, .search-panel{
  position:relative;
}

.hero::before, .metric::before, .goal-c::before, .chart-card::before,
.hh-card::before, .stats::before, .req-card::before, .dtable-wrap::before,
.panel::before, .tabs::before, .service-bar::before, .kid-tile::before,
.cm-dock-inner::before, .budget-summary::before, .budget-context::before,
.state::before, .login-card::before, .chip-ico::before, .seg::before,
.tf::before, .sk-card::before, .role-pill::before, .lang-switch::before,
.brand .mark::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  z-index:1;
  transition:background .28s var(--ease), opacity .28s var(--ease);
}

/* content must sit above the ring */
.hero > *, .metric > *, .goal-c > *, .chart-card > *, .hh-card > *,
.req-card > *, .panel > *, .state > *, .login-card > *,
.budget-summary > *, .budget-context > *, .cm-dock-inner > *,
.service-bar > *, .kid-tile > *, .dtable-wrap > *, .stats > *{
  position:relative; z-index:2;
}

/* the panes that carry real weight get the brighter rim and a soft bloom */
.hero, .panel, .login-card, .stats, .dtable-wrap{
  box-shadow:var(--sheen), var(--e2), var(--rim-glow);
}
.hero::before, .panel::before, .login-card::before,
.stats::before, .dtable-wrap::before{ background:var(--rim); }

/* interactive surfaces light up as the glass turns toward you */
.hh-card:hover::before, .metric:hover::before, .goal-c:hover::before,
.chart-card:hover::before, .req-card:hover::before, .kid-tile:hover::before{
  background:var(--rim);
}
.hh-card:hover, .metric:hover, .req-card:hover{
  box-shadow:var(--sheen-hi), var(--e2);
}

/* the seal already reads as a lit circle — give it the same edge */
.brand .mark::before{ background:var(--rim); }
.brand .mark{ box-shadow:var(--sheen); }

/* small controls: quieter ring so they do not compete with the cards */
.chip-ico::before, .seg::before, .tf::before, .role-pill::before,
.lang-switch::before, .sk-card::before{ background:var(--rim-soft); }

/* every card sits in a faint ember bloom, so the rim reads as light
   coming off the edge rather than a coloured outline drawn on it */
.metric, .goal-c, .chart-card, .hh-card, .req-card, .kid-tile,
.budget-summary, .state, .service-bar{
  box-shadow:var(--sheen), var(--e1), var(--rim-glow);
}

/* the active nav pill is the brightest edge in the room — it is the
   one place the ember is a statement rather than a highlight */
/* the active item is defined by a crisp edge, not by a halo */
.sidebar-item.active{ box-shadow:none; }

/* a ring around the ring would read as a double border */
body.perf-lite .hero::before, body.perf-lite .metric::before,
body.perf-lite .goal-c::before, body.perf-lite .chart-card::before,
body.perf-lite .hh-card::before, body.perf-lite .stats::before,
body.perf-lite .panel::before, body.perf-lite .dtable-wrap::before{
  background:var(--rim-soft);
}
@media print{
  .hero::before, .metric::before, .goal-c::before, .chart-card::before,
  .hh-card::before, .stats::before, .req-card::before, .dtable-wrap::before,
  .panel::before, .state::before{ display:none !important; }
}

/* =====================================================================
   28. MAKING THE GLASS READ AS GLASS
   Three things were missing. There was too little colour behind the
   panes to refract, the panes themselves were too opaque to show it,
   and no surface carried a specular streak — the single strongest cue
   that a face is glass rather than paint.
   ===================================================================== */

/* more colour in the field, so the blur has something to work on */
body::before{
  background:
    radial-gradient(40rem 32rem at 8% 2%,   rgba(226,80,60,.40), transparent 60%),
    radial-gradient(38rem 34rem at 94% -4%, rgba(48,96,200,.44), transparent 58%),
    radial-gradient(50rem 34rem at 52% 26%, rgba(58,104,196,.30), transparent 66%),
    radial-gradient(44rem 36rem at 82% 86%, rgba(232,40,54,.26), transparent 62%),
    radial-gradient(34rem 30rem at 12% 98%, rgba(40,124,190,.34), transparent 60%);
  filter:blur(56px);
}
body::after{
  background:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    radial-gradient(130% 95% at 50% -12%, rgba(10,20,40,0), rgba(4,8,16,.30) 76%),
    linear-gradient(180deg, rgba(5,9,18,.03), rgba(3,6,12,.52));
  background-size:72px 72px, 72px 72px, cover, cover;
}

/* thinner panes, stronger refraction */
.shell{
  background:linear-gradient(180deg, rgba(46,68,116,.26), rgba(16,28,52,.14));
  backdrop-filter:blur(30px) saturate(190%);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
}
.hero, .metric, .goal-c, .chart-card, .hh-card, .stats, .req-card,
.dtable-wrap, .tabs, .service-bar, .kid-tile, .budget-summary,
.budget-context, .state, .cm-dock-inner, .sk-card{
  background-color:rgba(255,255,255,.045);
  backdrop-filter:blur(26px) saturate(185%);
  -webkit-backdrop-filter:blur(26px) saturate(185%);
}
.panel, .login-card{
  backdrop-filter:blur(34px) saturate(190%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
}

/* the specular: one soft diagonal streak across the upper-left face,
   plus a faint pooling of light at the lower-right where a thick pane
   gathers it. This is what a flat translucent fill was missing. */
.hero, .metric, .goal-c, .chart-card, .hh-card, .stats, .req-card,
.dtable-wrap, .panel, .login-card, .service-bar, .kid-tile,
.budget-summary, .state, .cm-dock-inner{
  background-image:
    linear-gradient(146deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.10) 12%,
      rgba(255,255,255,.02) 34%,
      rgba(255,255,255,0)   52%),
    radial-gradient(130% 100% at 92% 112%,
      rgba(255,255,255,.075), transparent 60%);
  background-repeat:no-repeat;
}

/* an inner hairline just under the top edge gives the pane thickness */
.hero, .metric, .goal-c, .chart-card, .hh-card, .stats, .req-card,
.dtable-wrap, .panel, .login-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.04),
    var(--e1);
}
.hero, .panel, .login-card, .stats, .dtable-wrap{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.05),
    var(--e2);
}

/* flat colour when effects are off — never a half-rendered pane */
body.perf-lite .hero, body.perf-lite .metric, body.perf-lite .goal-c,
body.perf-lite .chart-card, body.perf-lite .hh-card, body.perf-lite .stats,
body.perf-lite .req-card, body.perf-lite .dtable-wrap, body.perf-lite .panel,
body.perf-lite .login-card{ background-image:none; }

/* =====================================================================
   29. SMOKED GLASS
   Panes are now darker than the field behind them rather than lighter.
   All the luminance moves to the edges: the rim, a restrained specular,
   and the hairline under the top edge. The result is heavier and calmer,
   and text contrast improves because the backing is genuinely dark.
   ===================================================================== */
:root{
  --void:#03060c;
  --deep:#050a14;
  --smoke:rgba(9,15,29,.62);
  --smoke-hi:rgba(14,22,40,.72);
}
body{ background:var(--deep); }

/* the field keeps its colour but sits further back */
body::after{
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(130% 95% at 50% -12%, rgba(6,12,26,.10), rgba(2,5,11,.62) 74%),
    linear-gradient(180deg, rgba(3,6,13,.30), rgba(2,4,9,.80));
  background-size:72px 72px, 72px 72px, cover, cover;
}

.shell{
  background:linear-gradient(180deg, rgba(11,19,36,.60), rgba(6,11,22,.72));
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
}
.shell::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%),
    radial-gradient(58rem 28rem at 18% 4%,  rgba(38,92,190,.13), transparent 60%),
    radial-gradient(54rem 30rem at 86% 10%, rgba(38,74,150,.11), transparent 58%);
}

/* every pane: smoked, not milky */
.hero, .metric, .goal-c, .chart-card, .hh-card, .stats, .req-card,
.dtable-wrap, .tabs, .service-bar, .kid-tile, .budget-summary,
.budget-context, .state, .cm-dock-inner, .sk-card, .stat{
  background-color:var(--smoke);
  border-color:rgba(255,255,255,.07);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.panel, .login-card{
  background:var(--smoke-hi);
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
}
.topbar{
  background:linear-gradient(180deg, rgba(8,14,27,.86), rgba(4,8,17,.80));
}
.sidebar{
  background:linear-gradient(180deg, rgba(8,14,27,.34), rgba(5,9,18,.20));
}

/* a restrained specular — enough to say glass, not enough to lighten it */
.hero, .metric, .goal-c, .chart-card, .hh-card, .stats, .req-card,
.dtable-wrap, .panel, .login-card, .service-bar, .kid-tile,
.budget-summary, .state, .cm-dock-inner{
  background-image:
    linear-gradient(147deg,
      rgba(255,255,255,.085) 0%,
      rgba(255,255,255,.030) 14%,
      rgba(255,255,255,0)    40%),
    radial-gradient(120% 90% at 92% 112%, rgba(255,255,255,.030), transparent 58%);
  background-repeat:no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 2px 6px rgba(0,0,0,.42), 0 16px 40px rgba(0,0,0,.36);
}
.hero, .panel, .login-card, .stats, .dtable-wrap{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 4px 12px rgba(0,0,0,.46), 0 26px 60px rgba(0,0,0,.44);
}
.hh-card:hover, .metric:hover, .req-card:hover{
  background-color:rgba(16,25,45,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 4px 12px rgba(0,0,0,.46), 0 22px 52px rgba(0,0,0,.42);
}

/* small controls follow the same smoked rule */
.chip-ico, .seg, .tf, .lang-switch, .role-pill, .toolbar input,
.toolbar select, .shell input, .shell select, .shell textarea{
  background-color:rgba(255,255,255,.035);
}
.limit-track{ background:rgba(0,0,0,.38); }

body.perf-lite .hero, body.perf-lite .metric, body.perf-lite .goal-c,
body.perf-lite .chart-card, body.perf-lite .hh-card, body.perf-lite .stats,
body.perf-lite .req-card, body.perf-lite .dtable-wrap{
  background-color:#0b1322; background-image:none;
}
body.perf-lite .panel, body.perf-lite .login-card{ background:#101a2c; background-image:none; }
body.perf-lite .shell{ background:#080e1b; }

  /* =====================================================================
     30. STATION MODE — the kiosk, brought onto the system
     The kiosk was written before the tokens existed and never moved onto
     them: 66 rules, every colour hardcoded, every pane white-tinted. That
     is the one thing the SMOKED GLASS pass exists to undo — white over
     dark reads milky — so on a tablet at arm's length it looked like a
     different product from the rest of the app.

     Only colour and surface change here. Every size, gap and touch target
     is left exactly as it was: this is used standing up, one-handed, with
     a queue waiting, and the generous hit areas are the whole point.

     No backdrop-filter anywhere in this section. Blur is the expensive
     thing on the tablets that run check-in, and Sunday responsiveness
     matters more than refraction.
     ===================================================================== */

  /* ---- text tones ---- */
  body.kiosk .kio{ color:var(--text); }
  body.kiosk .kio-title,
  body.kiosk .kio-who b,
  body.kiosk .kio-kid-name,
  body.kiosk .kio-msg b,
  body.kiosk .kio-code{ color:#fff; }
  body.kiosk .kio-sub,
  body.kiosk .kio-who span,
  body.kiosk .kio-hint,
  body.kiosk .kio-label{ color:var(--text-3); }
  body.kiosk .kio-kid-meta,
  body.kiosk .kio-key.util{ color:var(--text-2) !important; }
  body.kiosk .kio-find::placeholder,
  body.kiosk input[type=text]::placeholder{ color:var(--text-3) !important; }

  /* The eyebrow row and the labels are data, so they take the mono face —
     the same split that makes the rest of the app read as an instrument. */
  body.kiosk .kio-label,
  body.kiosk .kio-who span{
    font-family:var(--font-mono); letter-spacing:1.3px; text-transform:uppercase;
  }

  /* ---- surfaces: smoked, not milky ---- */
  body.kiosk .kio-head{ border-bottom:1px solid var(--edge); }
  body.kiosk .kio-mode,
  body.kiosk .kio-key,
  body.kiosk .kio-kid,
  body.kiosk .kio-msg,
  body.kiosk .kio-name,
  body.kiosk .kio-exit{
    background:var(--smoke) !important;
    border-color:var(--edge) !important;
    box-shadow:var(--sheen), var(--e1);
  }
  body.kiosk .kio-mode:hover,
  body.kiosk .kio-key:hover,
  body.kiosk .kio-kid:hover,
  body.kiosk .kio-name:hover,
  body.kiosk .kio-exit:hover{
    background:var(--smoke-hi) !important;
    border-color:var(--edge-hi) !important;
    color:#fff !important;
  }
  body.kiosk .kio-key.util{ background:rgba(9,15,29,.44) !important; }
  body.kiosk .kio-find,
  body.kiosk input[type=text]{
    background:rgba(9,15,29,.58) !important;
    border:1.5px solid var(--edge-hi) !important;
    color:var(--text) !important;
  }
  body.kiosk .kio-find:focus,
  body.kiosk input[type=text]:focus{
    border-color:var(--ember) !important;
    background:rgba(9,15,29,.72) !important;
  }

  /* ---- the one hot colour, spent only on the current thing ---- */
  body.kiosk .kio-mode.on{
    background:var(--ember-fill) !important;      /* 4.77:1 under white text */
    border-color:var(--ember) !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--e2);
  }
  body.kiosk .kio-key:active{ background:var(--ember-fill) !important; }
  body.kiosk .kio-kid.picked{
    border-color:var(--ember) !important;
    background:rgba(226,80,60,.18) !important;
  }
  body.kiosk .kio-kid.picked .kio-tick{ background:var(--ember); border-color:var(--ember); }
  body.kiosk .kio-av{
    background:linear-gradient(145deg, var(--lift), var(--navy)) !important;
    border-color:var(--edge-hi) !important;
  }
  body.kiosk .kio-kid.picked .kio-av{
    background:linear-gradient(145deg, var(--ember-fill), var(--ember-deep)) !important;
  }
  body.kiosk .kio-go{
    background:var(--ember-fill) !important;
    border-color:var(--ember) !important;
    color:#fff !important;
  }
  body.kiosk .kio-go:hover:not(:disabled){ background:var(--ember) !important; }
  body.kiosk .kio-go:disabled{
    background:rgba(9,15,29,.55) !important;
    color:var(--text-3) !important;
    border-color:var(--edge) !important;
  }

  /* ---- status: semantic colours only, matching the rest of the app ---- */
  body.kiosk .kio-msg.good{
    background:rgba(90,196,137,.14) !important;
    border-color:rgba(90,196,137,.46) !important;
    color:#cdf3e0 !important;
  }
  body.kiosk .kio-msg.good b{ color:var(--sig-green) !important; }
  body.kiosk .kio-msg.bad{
    background:rgba(226,80,60,.18) !important;
    border-color:rgba(226,80,60,.55) !important;
    color:#ffd6d4 !important;
  }
  body.kiosk .kio-kid-alert{
    background:rgba(230,178,95,.18) !important;
    border-color:rgba(230,178,95,.44) !important;
    color:var(--sig-amber) !important;
  }
  body.kiosk .kio-kid-barred{
    background:rgba(226,80,60,.22) !important;
    border-color:rgba(226,80,60,.55) !important;
    color:#ffc9c7 !important;
  }

  /* ---- the lit edge, on the surfaces big enough to carry it ---- */
  body.kiosk .kio-kid,
  body.kiosk .kio-mode,
  body.kiosk .kio-msg{ position:relative; }
  body.kiosk .kio-kid::before,
  body.kiosk .kio-mode::before,
  body.kiosk .kio-msg::before{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:var(--rim-soft);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
  }
  body.perf-lite.kiosk .kio-kid::before,
  body.perf-lite.kiosk .kio-mode::before,
  body.perf-lite.kiosk .kio-msg::before{ display:none; }

  /* ---- removing a saved name ----
     The list is remembered volunteer names, not accounts, and it only ever
     grew: a mistyped name sat there until eight newer ones pushed it off.
     Removal is behind an explicit edit toggle rather than a permanent x on
     every chip, because this is a touch screen and the chips are what a
     volunteer taps to start their shift. */
  body.kiosk .kio-names-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  }
  body.kiosk .kio-edit{
    font-family:var(--font-mono); font-size:13px; letter-spacing:1.2px;
    text-transform:uppercase; color:var(--text-3);
    background:none !important; border:none !important; padding:6px 2px;
    cursor:pointer; min-height:44px;
  }
  body.kiosk .kio-edit:hover{ color:var(--ember-hi); }
  body.kiosk .kio-edit.on{ color:var(--ember-hi); }
  body.kiosk .kio-name{ position:relative; }
  body.kiosk .kio-name .kio-forget{
    display:none; margin-left:12px; width:34px; height:34px; flex:0 0 34px;
    border-radius:50%; align-items:center; justify-content:center;
    background:rgba(226,80,60,.22); border:1px solid rgba(226,80,60,.55);
    color:#ffd6d4; font-size:17px; line-height:1;
  }
  body.kiosk .kio-names.editing .kio-name .kio-forget{ display:inline-flex; }
  body.kiosk .kio-names.editing .kio-name{ border-color:rgba(226,80,60,.40) !important; }
  body.kiosk .kio-names.editing .kio-name:hover{
    background:var(--smoke-hi) !important; border-color:rgba(226,80,60,.60) !important;
  }

  /* =====================================================================
     31. RESTORED BY THE PORT
     Swapping the stylesheet wholesale dropped eight selectors that the
     app still emits. Found by diffing the class sets of the old and new
     sheets, not by eye. Each is restored here on the current tokens
     rather than its original hardcoded colours.
     ===================================================================== */

  /* The app wrapper had a radial ground behind the shell. The field now
     does that job in section 2, so this only needs to guarantee height —
     without it the field stops at the fold on a short screen. */
  .app-bg{ min-height:100vh; }

  /* The initial beside a remembered volunteer name. Unstyled, it rendered
     inline and ran straight into the name: "SSelamawit Girma". */
  body.kiosk .kio-name .kio-dot{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:750; color:#fff; margin-right:10px;
    background:linear-gradient(145deg, var(--ember-fill), var(--ember-deep));
    border:1px solid var(--edge-hi);
  }

  /* Live clock in the station header. Figures are mono and tabular so the
     minute changing never shifts the layout. */
  body.kiosk .kio-clock{
    text-align:right; line-height:1.25;
    padding-right:20px; margin-right:20px;
    border-right:1px solid var(--edge);
  }
  body.kiosk .kio-time{
    font-family:var(--font-mono); font-size:clamp(21px,2.1vw,27px);
    font-weight:700; color:#fff;
    font-variant-numeric:tabular-nums; letter-spacing:.01em;
  }
  body.kiosk .kio-date{
    font-family:var(--font-mono); font-size:clamp(11px,1vw,13px);
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-3); margin-top:2px;
  }

  /* "Station ready" with its pulsing dot. */
  body.kiosk .kio-ready{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--font-mono); font-size:13px; font-weight:600;
    letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-2); padding:0 4px; white-space:nowrap;
  }
  body.kiosk .kio-ready i{
    width:9px; height:9px; border-radius:50%; flex-shrink:0;
    background:var(--sig-green);
    box-shadow:0 0 0 0 rgba(90,196,137,.55);
    animation:readyPulse 2.4s ease-in-out infinite;
  }
  @keyframes readyPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(90,196,137,.55); }
    50%    { box-shadow:0 0 0 7px rgba(90,196,137,0); }
  }
  @media (prefers-reduced-motion:reduce){
    body.kiosk .kio-ready i{ animation:none !important; }
  }

  /* The two kiosk columns scroll independently — this is what hands the
     overflow to the inner column instead of letting a tall form clip. */
  body.kiosk #kioResult,
  body.kiosk .kio-scrollcol{
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding-right:4px;
    scrollbar-width:thin;
    scrollbar-color:var(--edge-hi) rgba(255,255,255,.05);
  }
  body.kiosk #kioResult::-webkit-scrollbar-track,
  body.kiosk .kio-scrollcol::-webkit-scrollbar-track{
    background:rgba(255,255,255,.05); border-radius:99px;
  }
  body.kiosk #kioResult::-webkit-scrollbar-thumb,
  body.kiosk .kio-scrollcol::-webkit-scrollbar-thumb{
    background:var(--edge-hi); border-radius:99px;
  }
  body.kiosk #kioResult::-webkit-scrollbar-thumb:hover,
  body.kiosk .kio-scrollcol::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.34);
  }
  /* On a short screen the page scrolls instead of the columns. */
  @media (max-width:900px){
    body.kiosk #kioResult,
    body.kiosk .kio-scrollcol{ overflow:visible; padding-right:0; }
  }

  /* =====================================================================
     32. THE PRINT STAGE
     The print clone is never removed after printing — see resetPrintStage
     in kids-ministry.js. Anything that runs after window.print() can fire
     while the preview is still rendering and tear the document out from
     under it, which is what left Chrome stuck on "Loading preview".

     So the clone simply stays, hidden on screen by the rule below, and the
     next print clears it before staging its own. body.printing-doc only
     has any effect inside @media print, so it is equally harmless to leave
     behind.
     ===================================================================== */
  #printClone{ display:none !important; }
  @media print{
    #printClone{ display:block !important; }
  }

  /* The kiosk volunteer grid carried its columns inline, which is the one
     thing that cannot be overridden responsively. */
  body.kiosk .kio-vgrid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px;
  }
  @media (max-width:640px){
    body.kiosk .kio-vgrid{ grid-template-columns:1fr; }
  }

  /* =====================================================================
     33. THE GUARDIAN PICKER
     A church with ninety-odd guardians on file cannot pick one from a wall
     of checkboxes. The list is still every guardian — only the visible set
     narrows as you type, and anyone already linked stays put so they can
     never be filtered out of sight.
     ===================================================================== */
  .picker-bar{
    display:flex; align-items:center; gap:12px; margin-bottom:10px;
  }
  .picker-bar input{ flex:1; min-width:0; }
  .picker-count{
    font-family:var(--font-mono); font-size:10px; letter-spacing:1.1px;
    text-transform:uppercase; color:var(--text-3); white-space:nowrap; flex-shrink:0;
  }
  /* Capped so the panel cannot be driven off the screen by a long match. */
  .chip-grid.is-picker{
    max-height:210px; overflow-y:auto; align-content:flex-start;
    padding:2px; scrollbar-width:thin;
  }
  .chip-grid.is-picker:empty{ display:none; }
  .chip-grid.is-picker .chip[hidden]{ display:none; }
  /* A linked guardian reads as chosen, not merely ticked. */
  .chip-grid.is-picker .chip.checked{
    border-color:rgba(226,80,60,.55); background:rgba(226,80,60,.14);
  }
  .picker-empty{
    font-size:var(--t-sm); color:var(--text-3); padding:8px 2px 2px;
  }