/* Kgyoka One design system — production port of platform/design-system/
   (M1 tokens; see platform/DESIGN_BRIDGE.md + design-system/readme.md).

   ── THE SKIN CONTRACT ──────────────────────────────────────────────────────
   A tenant skin = the four --skin-* custom properties below (+ the logo
   slot). Everything else derives — oklch relative color, CLAMPED to a safe
   luminance per mode — and recomputes automatically. Set them inline on
   :root at boot (core.js applyTheme() from orgs/{id}.branding) or on any
   .k-skin / [data-skin] element to reskin a subtree (an event canvas, a
   tenant preview). NOTHING below the contract may hardcode a brand color;
   Kgyoka green is the DEFAULT skin only. A static hex fallback precedes every
   oklch derivation, and ui.js precomputes the same ramp for browsers without
   oklch(from …). Dark is the default mode; [data-theme="light"] is paper.
   Derived roles are declared on `:root,[data-skin],.k-skin` so var() chains
   re-resolve inside nested skin scopes (load-bearing). */
:root{
--skin-accent:#10502f;             /* brand hex as uploaded — any luminance, corrected below */
--skin-display:"Instrument Serif"; /* display face; a tenant may swap for any Google face */
--skin-radius:14px;                /* base corner; the whole radius scale derives */
--skin-logo:none;                  /* url(…) of the org mark; none = wordmark set in type */
--skin-display-case:none;          /* legacy org field (displayCase) — the system is sentence case */
--white:#ffffff;--black:#080c0a;
}

/* ── Layer 2 — DARK (default). The canvas IS the brand green; the accent is
   auto-lifted to a pale glowing sibling (L ≥ .86). ── */
:root,[data-skin],.k-skin,[data-theme="dark"],[data-theme="dark"][data-skin],[data-theme="dark"].k-skin{
--bg:#10502f;
--bg:oklch(from var(--skin-accent) clamp(.30,l,.40) min(c,.10) h);
--bg-deep:#0b3a22;
--bg-deep:oklch(from var(--skin-accent) calc(min(l,.40) * .72) min(c,.09) h);
--bg-raised:#1a5e3c;
--bg-raised:oklch(from var(--skin-accent) calc(clamp(.30,l,.40) + .06) min(c,.10) h);
--surface-1:rgba(255,255,255,.06);
--surface-2:rgba(255,255,255,.10);
--surface-3:rgba(255,255,255,.15);
--surface-glass:rgba(255,255,255,.08);
--line:rgba(255,255,255,.10);
--line-strong:rgba(255,255,255,.18);
--text-1:#f1f8f3;
--text-2:rgba(241,248,243,.70);
--text-3:rgba(241,248,243,.46);
--text-disabled:rgba(241,248,243,.30);
--text-on-accent:#0b3a22;
--text-on-accent:oklch(from var(--skin-accent) .22 min(c,.08) h);
--accent:#b6f2d0;
--accent:oklch(from var(--skin-accent) max(l,.86) clamp(.06,c,.13) h);
--accent-hover:#cdf7e0;
--accent-hover:oklch(from var(--skin-accent) max(l,.91) clamp(.05,c,.11) h);
--accent-press:#9fe6bd;
--accent-press:oklch(from var(--skin-accent) max(l,.80) clamp(.06,c,.13) h);
--accent-text:var(--accent);
--accent-soft:rgba(182,242,208,.14);
--accent-soft:oklch(from var(--skin-accent) max(l,.86) clamp(.06,c,.13) h / .14);
--accent-line:rgba(182,242,208,.40);
--accent-line:oklch(from var(--skin-accent) max(l,.86) clamp(.06,c,.13) h / .40);
--accent-glow:0 0 0 1px rgba(182,242,208,.35),0 8px 32px -8px rgba(182,242,208,.55);
--accent-glow:0 0 0 1px oklch(from var(--skin-accent) max(l,.86) min(c,.13) h / .35),0 8px 32px -8px oklch(from var(--skin-accent) max(l,.86) min(c,.13) h / .55);
--focus-ring:0 0 0 3px rgba(182,242,208,.45);
--focus-ring:0 0 0 3px oklch(from var(--skin-accent) max(l,.86) min(c,.13) h / .45);
/* status — fixed, not derived, so "approved" reads the same in every tenant */
--ok:#8ff0b4;--ok-soft:rgba(143,240,180,.14);
--warn:#f5c56b;--warn-soft:rgba(245,197,107,.16);
--danger:#ff8a80;--danger-soft:rgba(255,138,128,.16);
--info:#8ec5ff;--info-soft:rgba(142,197,255,.16);
--overlay:rgba(4,12,8,.62);
--shadow-tint:rgba(0,0,0,.35);
color-scheme:dark;
}

/* ── Layer 2 — LIGHT: warm paper. Accent auto-darkened (L ≤ .46) so it
   passes AA as fill and text. ── */
[data-theme="light"],[data-theme="light"] [data-skin],[data-theme="light"] .k-skin,[data-theme="light"][data-skin],[data-theme="light"].k-skin{
--bg:#f4f1ea;
--bg-deep:#ebe7de;
--bg-raised:#faf8f3;
--surface-1:#fffdf9;
--surface-2:#ffffff;
--surface-3:#f1ede5;
--surface-glass:rgba(255,253,249,.78);
--line:rgba(23,32,27,.09);
--line-strong:rgba(23,32,27,.16);
--text-1:#17201b;
--text-2:#57635c;
--text-3:#8a948e;
--text-disabled:#b8bfba;
--text-on-accent:#ffffff;
--accent:#10502f;
--accent:oklch(from var(--skin-accent) min(l,.46) c h);
--accent-hover:#0d4227;
--accent-hover:oklch(from var(--skin-accent) min(l,.40) c h);
--accent-press:#0a351f;
--accent-press:oklch(from var(--skin-accent) min(l,.34) c h);
--accent-text:#0f4c2d;
--accent-text:oklch(from var(--skin-accent) min(l,.44) c h);
--accent-soft:#e6f1ea;
--accent-soft:oklch(from var(--skin-accent) .95 calc(c * .35) h);
--accent-line:rgba(16,80,47,.35);
--accent-line:oklch(from var(--skin-accent) min(l,.46) c h / .35);
--accent-glow:0 1px 2px rgba(23,32,27,.06),0 10px 30px -12px rgba(16,80,47,.45);
--accent-glow:0 1px 2px rgba(23,32,27,.06),0 10px 30px -12px oklch(from var(--skin-accent) min(l,.46) c h / .45);
--focus-ring:0 0 0 3px rgba(16,80,47,.30);
--focus-ring:0 0 0 3px oklch(from var(--skin-accent) min(l,.46) c h / .30);
--ok:#1a7f4b;--ok-soft:#e3f3ea;
--warn:#b45309;--warn-soft:#fbeedc;
--danger:#b91c1c;--danger-soft:#fbe7e7;
--info:#1d4ed8;--info-soft:#e6edfb;
--overlay:rgba(23,32,27,.42);
--shadow-tint:rgba(23,32,27,.08);
color-scheme:light;
}

/* ── Layer 3 — aliases the existing shells still reference (M0 names) and
   the S12 glass tokens, all expressed in semantic roles so both modes and
   nested skins resolve them. New code uses the semantic names directly;
   these retire as the shells are rebuilt (M3–M5). ── */
:root,[data-skin],.k-skin{
--ink-1:var(--text-1);--ink-2:var(--text-2);--ink-3:var(--text-3);--ink-disabled:var(--text-disabled);
--paper:var(--surface-1);--surface-app:var(--bg);--surface-sunken:var(--bg-deep);
--shell:var(--bg-deep);--shell-ink:var(--text-1);--shell-elevated:var(--surface-2);--shell-line:var(--line);
--shell-ink-muted:var(--text-2);--shell-ink-faint:var(--text-3);
--accent-vivid:var(--accent);--on-accent:var(--text-on-accent);--accent-ink:var(--text-on-accent);
--accent-soft-line:var(--accent-line);--ring:var(--focus-ring);
--ok-text:var(--ok);--warn-text:var(--warn);--danger-text:var(--danger);--info-text:var(--info);
--glow-accent:color-mix(in srgb,var(--accent) 14%,transparent);
--side:var(--shell);--card:var(--surface-1);--ink:var(--text-1);--muted:var(--text-3);
--green:var(--ok);--red:var(--danger);--radius:var(--radius-md);--headline:var(--font-display);--shadow:var(--shadow-1);
}

/* ── type — Instrument Serif (display, never bold, never numbers) + Inter
   Tight (UI; big numerals 600 tabular) + JetBrains Mono (console, IDs) ── */
:root{
--font-display:var(--skin-display),"Instrument Serif",Georgia,"Times New Roman",serif;
--font-body:"Inter Tight","IBM Plex Sans Arabic",ui-sans-serif,system-ui,-apple-system,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
--display-2xl:72px;--display-xl:56px;--display-lg:44px;--display-md:34px;--display-sm:28px;--display-xs:22px;
--lh-display:1.0;--track-display:-.01em;
--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:15px;--text-md:17px;--text-lg:20px;
--lh-tight:1.15;--lh-snug:1.3;--lh-body:1.5;
--stat-lg:48px;--stat-md:32px;--stat-sm:24px;--track-stat:-.03em;
--w-reg:400;--w-med:500;--w-semi:600;--w-bold:700;
--track-caps:.10em;
/* spacing, radius (derives from the skin base), layout */
--sp-0:0px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:112px;
--radius-xs:max(4px,calc(var(--skin-radius) - 8px));
--radius-sm:max(6px,calc(var(--skin-radius) - 4px));
--radius-md:var(--skin-radius);
--radius-lg:calc(var(--skin-radius) + 6px);
--radius-xl:calc(var(--skin-radius) + 14px);
--radius-2xl:calc(var(--skin-radius) + 22px);
--radius-pill:999px;
--w-content:1200px;--w-narrow:640px;--w-phone:390px;
--rail-w:72px;--rail-w-open:248px;--topbar-h:64px;--bottombar-h:76px;
--hit-min:44px;
--gutter:clamp(16px,4vw,40px);
--card-pad:20px;--card-pad-lg:28px;--gap-module:16px;
/* depth (dark): lighter surfaces + a 1px inner highlight + accent glow, never drop shadows */
--shadow-1:none;
--shadow-2:0 1px 0 rgba(255,255,255,.06) inset;
--shadow-3:0 1px 0 rgba(255,255,255,.08) inset,0 24px 48px -24px rgba(0,0,0,.6);
--shadow-modal:0 1px 0 rgba(255,255,255,.10) inset,0 40px 90px -30px rgba(0,0,0,.75);
--edge-highlight:inset 0 1px 0 rgba(255,255,255,.08);
--blur-glass:blur(18px) saturate(1.3);
--ring-track:rgba(255,255,255,.10);
/* motion: 1 hover/press · 2 toggles · 3 panels/cards entering · 4 rings + count-ups; one spring, for confirmations only */
--dur-1:120ms;--dur-2:200ms;--dur-3:320ms;--dur-4:560ms;
--ease-out:cubic-bezier(.2,.7,.3,1);
--ease-in-out:cubic-bezier(.65,0,.35,1);
--ease-spring:cubic-bezier(.3,1.35,.45,1);
--press-scale:.98;
}
/* depth (light): soft warm shadows; surfaces stay near-white */
[data-theme="light"]{
--shadow-1:0 1px 2px rgba(23,32,27,.05);
--shadow-2:0 1px 2px rgba(23,32,27,.05),0 6px 18px -8px rgba(23,32,27,.12);
--shadow-3:0 2px 4px rgba(23,32,27,.05),0 20px 40px -16px rgba(23,32,27,.18);
--shadow-modal:0 30px 80px -20px rgba(23,32,27,.35);
--edge-highlight:none;
--blur-glass:blur(18px) saturate(1.1);
--ring-track:rgba(23,32,27,.08);
}
@media (prefers-reduced-motion:reduce){:root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-4:0ms}}
@keyframes k1-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes k1-fade{from{opacity:0}to{opacity:1}}
@keyframes k1-pop{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@keyframes k1-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes k1-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes k1-ring{from{stroke-dashoffset:var(--ring-len,1000)}}
@keyframes k1-spin{to{transform:rotate(360deg)}}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--lh-body);color:var(--text-1);background:var(--bg);min-height:100vh}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--accent-soft);color:var(--text-1)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0;margin:0}
input,select,textarea{font:inherit;color:inherit}
p{margin:0}
/* display type: the serif is never bold; italic is the emphasis device */
h1,h2,h3,h4,.hl{font-family:var(--font-display);text-transform:var(--skin-display-case);letter-spacing:var(--track-display);line-height:var(--lh-display);font-weight:var(--w-reg);margin:0}
[dir="rtl"]{--k-flip:scaleX(-1);--dir:-1}
/* icons — Lucide inline SVG (ui.js icon()). Sized by font-size so every
   existing `.material-symbols-rounded{font-size:…}` rule keeps working on the
   upgraded markup; the legacy class name is kept for that reason. */
.ic,.material-symbols-rounded{display:inline-block;width:1em;height:1em;font-size:20px;line-height:1;vertical-align:middle;flex:none;user-select:none}
.material-symbols-rounded{font-size:24px}
.ic-missing{border-radius:50%;border:1.5px solid currentColor;opacity:.35}
/* type utilities */
.k-display{font-family:var(--font-display);text-transform:var(--skin-display-case);letter-spacing:var(--track-display);line-height:var(--lh-display);font-weight:var(--w-reg);margin:0}
.k-display em,h1 em,h2 em,h3 em{font-style:italic;font-weight:inherit}
.k-overline,.eyebrow{font-size:var(--text-xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-3)}
.k-num,.stat-num{font-family:var(--font-body);font-weight:var(--w-semi);font-variant-numeric:tabular-nums;letter-spacing:var(--track-stat)}
.k-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
@keyframes k-spin{to{transform:rotate(360deg)}}
.k-spin{animation:k-spin .9s linear infinite}
@keyframes k-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes k-scale-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes k-sheet-up{from{transform:translateY(100%)}to{transform:none}}

/* ══════════════════════════════════════════════════════════════════════════
   M2 · DESIGN-SYSTEM COMPONENTS — ported from platform/design-system/
   components/** (exact values; nothing rounded). Rendered by ui.js helpers
   (btn(), card(), rail(), module(), …) as plain DOM strings; the classes are
   the contract. Legacy M0 class names are kept where a DS component maps
   onto one (.btn, .card, .chip=Badge, .filter-chip=Chip, .icon-btn, .avatar,
   .emptystate, .skel, .evcard, #toast) so the existing shells restyle before
   they are rebuilt in M3–M5. Every color is a semantic token — no hex.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── layout utilities (ui_kits/*/index.html) ── */
.k1-app{display:flex;height:100dvh;background:var(--bg);color:var(--text-1)}
.k1-main{flex:1;min-width:0;overflow:auto;position:relative;display:flex;flex-direction:column}
.k1-page{max-width:var(--w-content);width:100%;margin:0 auto;padding:0 var(--gutter) 64px;display:flex;flex-direction:column;gap:24px;animation:k1-rise var(--dur-3) var(--ease-out) both}
.k1-page.dense{gap:20px;padding-bottom:48px;max-width:none}
.k1-page.console{gap:14px;padding-bottom:40px;max-width:none}
.k1-page>*,.k1-grid>*{min-width:0}
.k1-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap-module)}
@media (max-width:900px){.k1-grid{grid-template-columns:repeat(6,1fr)}.k1-grid>[style*="span 8"],.k1-grid>[style*="span 12"]{grid-column:span 6!important}}
@media (max-width:600px){.k1-grid{grid-template-columns:1fr}.k1-grid>*{grid-column:auto!important}}
.k1-row{display:flex;align-items:center;gap:8px}
.k1-col{display:flex;flex-direction:column;gap:8px}
.k1-list>*+*{border-top:1px solid var(--line)}
.k1-divider{height:1px;background:var(--line)}
.k1-muted{color:var(--text-2);font-size:var(--text-sm)}
.k1-eyebrow{font-size:var(--text-2xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-3);line-height:1.2}
.k1-serif{font-family:var(--font-display);line-height:var(--lh-display);letter-spacing:var(--track-display);font-weight:var(--w-reg)}
.k1-serif i,.k1-serif em{font-style:italic;color:var(--accent-text)}
.k1-stat{font-weight:var(--w-semi);letter-spacing:var(--track-stat);line-height:1;font-variant-numeric:tabular-nums}
.k1-toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(calc(-50% * var(--dir,1)));z-index:60;pointer-events:none}
.k1-toast>*{pointer-events:auto}
.k1-screen{position:absolute;inset:0;overflow:auto;padding:0 16px 110px;display:flex;flex-direction:column;gap:14px;animation:k1-rise var(--dur-3) var(--ease-out) both;scrollbar-width:none}
.k1-screen::-webkit-scrollbar,.k1-hide::-webkit-scrollbar{display:none}
.k1-hide{scrollbar-width:none}
.k1-wordmark{font-family:var(--font-display);line-height:1;letter-spacing:var(--track-display);font-weight:var(--w-reg);color:var(--text-1);white-space:nowrap}
.k1-wordmark i{font-style:italic;color:var(--accent)}
.k1-logo{display:inline-block;width:28px;height:28px;border-radius:30%;background:var(--skin-logo) center/cover no-repeat;flex:none}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:5px}

/* ── forms: Field · Input · Select · Checkbox · Radio · Switch · Segmented ── */
label{display:block;font-size:var(--text-sm);font-weight:var(--w-med);color:var(--text-2);line-height:1.3;margin:var(--sp-3) 0 6px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field .f-label{margin:0;display:flex;gap:4px}
.field .f-req{color:var(--accent-text)}
.field .f-hint{font-size:var(--text-xs);color:var(--text-3);line-height:1.4}
.field .f-err{font-size:var(--text-xs);color:var(--danger);line-height:1.4}
.field.inline{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{
  display:block;width:100%;min-width:0;height:44px;padding:0 14px;border-radius:var(--radius-md);
  background:var(--surface-1);border:1px solid var(--line-strong);box-shadow:var(--edge-highlight);
  color:var(--text-1);font-family:var(--font-body);font-size:var(--text-base);line-height:1.4;
  transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
textarea{height:auto;min-height:88px;padding:12px 14px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-line);box-shadow:var(--focus-ring)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],.invalid>input,.invalid>select,.invalid>textarea{border-color:var(--danger)}
input[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--danger-soft)}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:default}
input.sm,select.sm{height:36px;font-size:var(--text-sm)}
input.lg,select.lg{height:52px}
input.mono,textarea.mono{font-family:var(--font-mono)}
select{appearance:none;-webkit-appearance:none;padding-inline-end:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b5ad' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
[dir="rtl"] select{background-position:left 12px center}
[data-theme="light"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a948e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select option{color:var(--black);background:var(--white)}
/* Input with leading/trailing icon: <div class="input"><svg…>…<input>…</div> */
.input{position:relative;display:flex;align-items:center;min-height:44px;border-radius:var(--radius-md);background:var(--surface-1);border:1px solid var(--line-strong);box-shadow:var(--edge-highlight);transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.input:focus-within{border-color:var(--accent-line);box-shadow:var(--focus-ring)}
.input.invalid{border-color:var(--danger)}.input.invalid:focus-within{box-shadow:0 0 0 3px var(--danger-soft)}
.input>input,.input>textarea,.input>select{background:transparent;border:none;box-shadow:none;height:42px;flex:1}
.input>input:focus,.input>textarea:focus,.input>select:focus{box-shadow:none}
.input>.ic:first-child{margin-inline-start:14px;color:var(--text-3);font-size:18px}
.input:focus-within>.ic:first-child{color:var(--text-1)}
.input>.ic:first-child+input{padding-inline-start:10px}
.input>.i-end{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-inline-end:4px;border-radius:var(--radius-sm);color:var(--text-3);flex:none}
.input.sm{min-height:36px}.input.sm>input{height:34px;font-size:var(--text-sm)}
.input.lg{min-height:52px}.input.lg>input{height:50px}
/* Checkbox / Radio: <label class="check"><input type=checkbox><span class="box"></span><span class="txt">…</span></label> */
.check,.radio{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:0;font-size:var(--text-base);font-weight:var(--w-reg);color:var(--text-1);cursor:pointer;user-select:none;text-transform:none;letter-spacing:0;line-height:1.3}
.check.top,.radio.top{align-items:flex-start}
.check input,.radio input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:inherit}
.check .box,.radio .box{position:relative;width:20px;height:20px;flex:none;border-radius:var(--radius-xs);background:var(--surface-1);border:1.5px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;color:var(--text-on-accent);transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1)}
.check .box .ic{font-size:14px;stroke-width:3;opacity:0;transform:scale(.6);transition:opacity var(--dur-1),transform var(--dur-2) var(--ease-spring)}
.check input:checked+.box{background:var(--accent);border-color:var(--accent)}
.check input:checked+.box .ic{opacity:1;transform:none}
.check input:indeterminate+.box{background:var(--accent);border-color:var(--accent)}
.check input:indeterminate+.box::after{content:'';width:10px;height:2px;background:currentColor;border-radius:1px}
.check input:focus-visible+.box,.radio input:focus-visible+.box{box-shadow:var(--focus-ring)}
.check input:disabled~*,.radio input:disabled~*{opacity:.4}
.radio .box{border-radius:50%;transition:border var(--dur-1) var(--ease-out)}
.radio input:checked+.box{border:6px solid var(--accent)}
.check .txt,.radio .txt{display:flex;flex-direction:column;gap:2px}
.check .txt small,.radio .txt small{font-size:var(--text-sm);color:var(--text-3);line-height:1.4}
.radio.card{padding:16px;border-radius:var(--radius-md);background:var(--surface-1);border:1px solid var(--line);min-height:0;transition:background var(--dur-1),border-color var(--dur-1)}
.radio.card:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line)}
.radiogroup{display:flex;flex-direction:column}
.radiogroup.row{flex-direction:row;flex-wrap:wrap;gap:8px}
.radiogroup.cards{gap:8px}
/* Switch: <label class="switch"><span class="txt">…</span><input type=checkbox role=switch><span class="track"></span></label> */
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin:0;font-size:var(--text-base);font-weight:var(--w-reg);color:var(--text-1);cursor:pointer;user-select:none;text-transform:none;letter-spacing:0}
.switch.bare{min-height:0;display:inline-flex}
.switch .txt{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.switch .txt small{font-size:var(--text-sm);color:var(--text-3);line-height:1.4}
.switch input{position:absolute;opacity:0;width:0;height:0;margin:0}
.switch .track{position:relative;width:44px;height:26px;flex:none;border-radius:13px;background:var(--surface-3);border:1px solid var(--line-strong);transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2)}
.switch .track::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;border-radius:50%;background:var(--text-1);opacity:.85;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--dur-2) var(--ease-spring),background var(--dur-2),opacity var(--dur-2)}
.switch input:checked+.track{background:var(--accent);border-color:transparent}
.switch input:checked+.track::after{background:var(--text-on-accent);opacity:1;transform:translateX(calc(18px * var(--dir,1)))}
.switch input:focus-visible+.track{box-shadow:var(--focus-ring)}
.switch input:disabled~*{opacity:.4}
.switch.sm .track{width:36px;height:22px;border-radius:11px}
.switch.sm .track::after{width:16px;height:16px}
.switch.sm input:checked+.track::after{transform:translateX(calc(14px * var(--dir,1)))}
/* Segmented: <div class="seg" role=tablist style="--n:3;--i:1"><button role=tab aria-selected>…</button>…</div> */
.seg{position:relative;display:inline-grid;grid-template-columns:repeat(var(--n,2),1fr);height:40px;padding:3px;border-radius:var(--radius-pill);background:var(--surface-1);border:1px solid var(--line)}
.seg.block{display:grid;width:100%}
.seg.sm{height:32px}
.seg::before{content:'';position:absolute;top:3px;bottom:3px;inset-inline-start:3px;width:calc((100% - 6px) / var(--n,2));border-radius:var(--radius-pill);background:var(--surface-3);box-shadow:var(--shadow-2);transform:translateX(calc(var(--i,0) * 100% * var(--dir,1)));transition:transform var(--dur-2) var(--ease-spring)}
.seg>button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;border-radius:var(--radius-pill);color:var(--text-2);font-size:var(--text-sm);font-weight:var(--w-med);white-space:nowrap;transition:color var(--dur-1)}
.seg.sm>button{font-size:var(--text-xs)}
.seg>button[aria-selected="true"]{color:var(--text-1);font-weight:var(--w-semi)}
.seg>button .ic{font-size:16px}

/* ── Button ── .btn = primary; variants .secondary (also legacy .ghost, the
   bordered one) · .soft · .quiet (DS ghost) · .danger · .link · .ok; sizes
   .sm 36 / md 44 / .lg 52; .pill · .block · .loading ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 18px;border-radius:var(--radius-md);border:1px solid transparent;
  font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--w-semi);line-height:1;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;user-select:none;cursor:pointer;
  background:var(--accent);color:var(--text-on-accent);
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),opacity var(--dur-1) var(--ease-out)}
.btn .ic{font-size:18px}
.btn:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--accent-glow);filter:none}
.btn:active:not(:disabled){background:var(--accent-press);transform:scale(var(--press-scale))}
.btn:focus-visible{box-shadow:var(--focus-ring)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}
.btn.sm{height:36px;min-width:36px;padding:0 14px;font-size:var(--text-sm);gap:6px}.btn.sm .ic{font-size:16px}
.btn.lg{height:52px;min-width:52px;padding:0 24px;font-size:var(--text-md);gap:10px}.btn.lg .ic{font-size:20px}
.btn.pill{border-radius:var(--radius-pill)}
.btn.block{display:flex;width:100%}
.btn.secondary,.btn.ghost{background:var(--surface-1);color:var(--text-1);border-color:var(--line-strong)}
.btn.secondary:hover:not(:disabled),.btn.ghost:hover:not(:disabled){background:var(--surface-2);box-shadow:none;filter:none}
.btn.secondary:active:not(:disabled),.btn.ghost:active:not(:disabled){background:var(--surface-3)}
.btn.soft{background:var(--accent-soft);color:var(--accent-text)}
.btn.soft:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-line);box-shadow:none}
.btn.soft:active:not(:disabled){background:var(--accent-soft)}
.btn.quiet{background:transparent;color:var(--text-2)}
.btn.quiet:hover:not(:disabled){background:var(--surface-1);color:var(--text-1);box-shadow:none}
.btn.quiet:active:not(:disabled){background:var(--surface-2)}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.danger:hover:not(:disabled){background:var(--danger);color:var(--white);box-shadow:none}
.btn.danger:active:not(:disabled){background:var(--danger)}
.btn.ok,.btn.green{background:var(--ok-soft);color:var(--ok)}
.btn.ok:hover:not(:disabled),.btn.green:hover:not(:disabled){background:var(--ok);color:var(--text-on-accent);box-shadow:none}
.btn.link{background:transparent;color:var(--accent-text);border:none;height:auto;min-width:0;padding:0;border-radius:0}
.btn.link:hover:not(:disabled){background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
.btn.link:active:not(:disabled){background:transparent;transform:none}
.btn .spin,.spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:k1-spin .8s linear infinite;flex:none}
.btn.sm .spin{width:16px;height:16px}.btn.lg .spin{width:20px;height:20px}
/* IconButton — .icon-btn (legacy name): ghost by default; .primary · .secondary; .sm 32 / md 40 / .lg 48; .active; badge */
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);cursor:pointer;flex:none;
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.icon-btn .ic{font-size:20px}
.icon-btn:hover:not(:disabled){background:var(--surface-1);color:var(--text-1)}
.icon-btn:active:not(:disabled){transform:scale(var(--press-scale))}
.icon-btn:focus-visible{box-shadow:var(--focus-ring)}
.icon-btn:disabled{opacity:.4;cursor:default}
.icon-btn.active{background:var(--accent-soft);color:var(--accent-text)}
.icon-btn.sm{width:32px;height:32px;min-width:32px}.icon-btn.sm .ic{font-size:16px}
.icon-btn.lg{width:48px;height:48px;min-width:48px}
.icon-btn.primary{border-radius:var(--radius-md);background:var(--accent);color:var(--text-on-accent)}
.icon-btn.primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--accent-glow);color:var(--text-on-accent)}
.icon-btn.secondary{border-radius:var(--radius-md);background:var(--surface-1);color:var(--text-1);border:1px solid var(--line-strong)}
.icon-btn.secondary:hover:not(:disabled){background:var(--surface-2)}
.icon-btn.danger:hover:not(:disabled){color:var(--danger);background:var(--danger-soft)}
.icon-btn .badge-n,.n-badge{position:absolute;top:4px;inset-inline-end:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:var(--white);font-size:10px;font-weight:var(--w-bold);line-height:1;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}

/* ── Badge (status pill; legacy .chip) · Chip (selectable; legacy .filter-chip) ── */
.badge,.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:var(--w-semi);line-height:1;letter-spacing:-.005em;white-space:nowrap}
.badge.sm,.chip.sm{height:20px;padding:0 7px;font-size:11px}
.badge .dot,.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge .ic,.chip .ic{font-size:14px}
.badge.ok,.chip.ok,.chip.green{background:var(--ok-soft);color:var(--ok)}
.badge.warn,.chip.warn,.chip.gold{background:var(--warn-soft);color:var(--warn)}
.badge.danger,.chip.danger,.chip.red{background:var(--danger-soft);color:var(--danger)}
.badge.info,.chip.info{background:var(--info-soft);color:var(--info)}
.badge.accent,.chip.accent{background:var(--accent-soft);color:var(--accent-text)}
.badge.neutral,.chip.neutral,.chip.gray{background:var(--surface-2);color:var(--text-2)}
.k-chip,.filter-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--radius-pill);background:var(--surface-1);border:1px solid var(--line);color:var(--text-1);font-size:var(--text-sm);font-weight:var(--w-med);white-space:nowrap;cursor:pointer;user-select:none;
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.k-chip .ic,.filter-chip .ic{font-size:16px}
.k-chip:hover,.filter-chip:hover{background:var(--surface-2)}
.k-chip:active,.filter-chip:active{transform:scale(var(--press-scale))}
.k-chip:focus-visible,.filter-chip:focus-visible{box-shadow:var(--focus-ring)}
.k-chip[aria-pressed="true"],.k-chip.on,.filter-chip.on{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-line)}
.k-chip:disabled,.filter-chip:disabled{opacity:.4;cursor:default}
.k-chip .count{font-size:11px;font-weight:var(--w-semi);color:var(--text-3);font-variant-numeric:tabular-nums}
.k-chip[aria-pressed="true"] .count{color:var(--accent-text)}
.k-chip .rm{display:inline-flex;margin-inline-end:-6px;opacity:.7}.k-chip .rm .ic{font-size:14px}

/* ── Card ── */
.muted{color:var(--text-3)}
.wrap{max-width:920px;margin:0 auto;padding:var(--sp-6) var(--sp-4) var(--sp-10)}
.card{position:relative;border-radius:var(--radius-lg);padding:var(--card-pad);color:var(--text-1);background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--edge-highlight),var(--shadow-1);margin-bottom:var(--sp-4);
  transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.k1-grid>.card,.k1-col>.card,.k1-page>.card,.card.m0{margin-bottom:0}
.card h2{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-3);line-height:1.2}
.card.interactive,.card[role="button"]{cursor:pointer}
.card.interactive:hover,.card[role="button"]:hover{background:var(--surface-2)}
.card.interactive:active,.card[role="button"]:active{transform:scale(.995)}
.card.interactive:focus-visible,.card[role="button"]:focus-visible{box-shadow:var(--edge-highlight),var(--shadow-1),var(--focus-ring)}
.card.featured{background:var(--surface-2);border-color:var(--accent-line);box-shadow:var(--accent-glow)}
.card.glass{background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);box-shadow:var(--shadow-3)}
.card.flat{background:transparent;box-shadow:none}
.card.sunken{background:var(--bg-deep);border-color:transparent;box-shadow:none}
.card.raised{background:var(--surface-2);box-shadow:var(--shadow-3)}
.card.selected{border-color:var(--accent-line);background:var(--accent-soft)}
.card.pad-lg{padding:var(--card-pad-lg)}.card.pad-sm{padding:14px}.card.pad-0{padding:0}

/* ── Avatar · AvatarStack · OrgTag ── */
.avatar{position:relative;display:inline-flex;width:36px;height:36px;flex:none;border-radius:50%;background:var(--surface-3);color:var(--text-1);align-items:center;justify-content:center;font-size:14px;font-weight:var(--w-semi);letter-spacing:-.02em;box-shadow:inset 0 0 0 1px var(--line);text-transform:uppercase;overflow:visible;border:none}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar.has-img{background:var(--surface-2)}
.avatar.xs{width:20px;height:20px;font-size:8px}.avatar.sm{width:28px;height:28px;font-size:11px}.avatar.lg{width:48px;height:48px;font-size:18px}.avatar.xl{width:72px;height:72px;font-size:27px}
.avatar.ring{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.avatar .st{position:absolute;bottom:0;inset-inline-end:0;width:9px;height:9px;border-radius:50%;background:var(--text-3);box-shadow:0 0 0 2px var(--bg)}
.avatar.lg .st{width:12px;height:12px}.avatar.xl .st{width:19px;height:19px}
.avatar .st.online{background:var(--ok)}.avatar .st.away{background:var(--warn)}
.avatar.on-shell{background:var(--surface-2);color:var(--text-1)}
.avatars{display:inline-flex;align-items:center}
.avatars>.avatar{box-shadow:0 0 0 2px var(--bg)}
.avatars>.avatar+.avatar,.avatars>.avatar+.more{margin-inline-start:-8px}
.avatars>.more{width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--text-2);font-size:10px;font-weight:var(--w-semi);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg)}
.orgtag{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.orgtag .mark{width:20px;height:20px;flex:none;border-radius:30%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--text-on-accent);font-size:8px;font-weight:var(--w-bold);letter-spacing:-.02em;text-transform:uppercase}
.orgtag .mark img{width:100%;height:100%;object-fit:cover}
.orgtag .nm{font-size:var(--text-xs);font-weight:var(--w-med);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orgtag.md{gap:10px}.orgtag.md .mark{width:28px;height:28px;font-size:11px}.orgtag.md .nm{font-size:var(--text-sm)}
.orgtag.lg{gap:10px}.orgtag.lg .mark{width:40px;height:40px;font-size:16px}.orgtag.lg .nm{font-size:var(--text-sm)}

/* ── shell chrome kept from M0 (volunteer topbar / greeting band / hero) ── */
.topbar{background:var(--bg-deep);color:var(--text-1);border-bottom:1px solid var(--line);padding:13px var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.topbar .nm{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--w-reg);text-transform:var(--skin-display-case);letter-spacing:var(--track-display);line-height:1}
.topbar .spacer{flex:1}
.topbar .btn.ghost{background:transparent;color:var(--text-1);border-color:var(--line-strong)}
.topbar .btn.ghost:hover:not(:disabled){background:var(--surface-2)}
.topbar select{width:auto;height:36px;font-size:var(--text-sm)}
.hero{background:var(--bg-deep);color:var(--text-1);border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--sp-6) var(--sp-7);margin-bottom:var(--sp-5)}
.hero h1{font-size:var(--display-sm)}
.hero .sub{color:var(--text-2);font-size:var(--text-sm);margin-top:var(--sp-1)}
/* TopBar (DS): page header — serif title on volunteer surfaces, .tool = Inter Tight on portal/console; .glass = sticky blur */
.k-topbar{display:flex;align-items:center;gap:12px;min-height:var(--topbar-h);padding:12px var(--gutter);position:relative;z-index:5}
.k-topbar.glass{position:sticky;top:0;background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--line)}
.k-topbar .back{margin-inline-start:-8px}
.k-topbar .tb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.k-topbar h1{font-family:var(--font-display);font-size:var(--display-sm);line-height:var(--lh-display);letter-spacing:var(--track-display);font-weight:var(--w-reg);color:var(--text-1);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-topbar h1 i,.k-topbar h1 em{color:var(--accent-text)}
.k-topbar.tool h1{font-family:var(--font-body);font-size:var(--text-lg);font-weight:var(--w-semi);line-height:var(--lh-tight);letter-spacing:-.01em}
.k-topbar .sub{font-size:var(--text-sm);color:var(--text-2)}
.k-topbar .actions{display:flex;align-items:center;gap:4px;flex:none}

/* ── gate (auth card) ── */
.gate{max-width:400px;margin:8vh auto;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--sp-7) var(--sp-6);box-shadow:var(--edge-highlight),var(--shadow-modal)}
.gate .nm{font-family:var(--font-display);font-size:var(--display-sm);font-weight:var(--w-reg);text-transform:var(--skin-display-case);letter-spacing:var(--track-display);line-height:var(--lh-display);margin-bottom:var(--sp-4)}
.err{display:none;margin-top:var(--sp-3);color:var(--danger);font-size:var(--text-sm);font-weight:var(--w-semi)}

/* ── StatTile (.stattile) + legacy .stat card ── */
.stattile{display:flex;flex-direction:column;align-items:flex-start;text-align:start;gap:6px;min-width:0}
.stattile.center{align-items:center;text-align:center}
.stattile.lg{gap:8px}
.stattile .eb{display:flex;align-items:center;gap:6px;font-size:var(--text-2xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-3);line-height:1.2}
.stattile .eb .ic{font-size:14px}
.stattile .val{display:flex;align-items:baseline;gap:3px;font-family:var(--font-body);font-weight:var(--w-semi);font-size:var(--stat-md);letter-spacing:var(--track-stat);line-height:1;font-variant-numeric:tabular-nums;color:var(--text-1)}
.stattile.sm .val{font-size:var(--stat-sm)}.stattile.lg .val{font-size:var(--stat-lg)}
.stattile .val .unit{font-size:.45em;font-weight:var(--w-med);color:var(--text-2);letter-spacing:0}
.stattile .lbl{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--text-2);line-height:1.3;font-weight:var(--w-reg);letter-spacing:0;text-transform:none;margin:0}
.stattile .delta{display:inline-flex;align-items:center;gap:2px;color:var(--ok);font-weight:var(--w-semi);font-variant-numeric:tabular-nums}
.stattile .delta.down{color:var(--danger)}
.stattile .delta .ic{font-size:14px;stroke-width:2.25}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.stat{position:relative;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--edge-highlight),var(--shadow-1);padding:14px var(--sp-4);min-width:0;display:flex;flex-direction:column;gap:6px}
.stat.featured{background:var(--surface-2);border-color:var(--accent-line);box-shadow:var(--accent-glow)}
.stat .num{font-family:var(--font-body);font-size:var(--stat-md);font-weight:var(--w-semi);letter-spacing:var(--track-stat);line-height:1;font-variant-numeric:tabular-nums;color:var(--text-1)}
.stat .lbl{font-size:var(--text-2xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-3);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}

/* ── tables (.k1-table; bare table inherits the same) ── */
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th{text-align:start;font-size:var(--text-2xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-3);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--dur-1) var(--ease-out)}
tbody tr:hover{background:var(--surface-1)}
.k1-num{font-variant-numeric:tabular-nums;text-align:end}
.k1-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
table.dense th{font-size:10.5px;padding:8px 10px}
table.dense td{padding:6px 10px;height:34px;white-space:nowrap}
table.dense .k1-num{font-family:var(--font-mono);font-size:12.5px}
.empty{padding:28px 10px;text-align:center;color:var(--text-3)}
.power{margin-top:30px;text-align:center;font-size:var(--text-xs);color:var(--text-3);letter-spacing:.4px}

/* ── volunteer app (faithful to ui_kits/volunteer-app) ─────────────────────
   Mobile-first column; on wide screens the app is a centered phone-width
   column over a sunken page (the design ships a 375px frame). */
.app-bg{background:var(--surface-sunken)}
.app-col{max-width:430px;margin:0 auto;min-height:100dvh;background:var(--surface-app);display:flex;flex-direction:column;position:relative}
@media (min-width:470px){.app-col{border-inline:1px solid var(--line-strong);box-shadow:var(--shadow-2)}}
/* The personal home ("my spaces") is a cross-org DASHBOARD, not the phone app,
   so on a desktop it uses the full content width and lays its sections out in
   columns instead of stranding a 430px strip in the middle of the screen.
   The ORG volunteer app deliberately stays phone-shaped (bottom tab bar,
   thumb-reachable) — its desktop counterpart is the org portal. */
/* Personal home = a full-bleed FLUID dashboard: it fills the viewport at every
   width, with no phone-frame cap and no breakpoint gaps (a tablet used to get
   a 430px strip stranded mid-screen).
   `columns:<width>` lets the browser fit as many ~340px columns as the screen
   allows — 1 on a phone, 2 on a tablet, 4–5 on a wide monitor — so there is no
   size where it stops filling. Multi-column rather than grid because these
   cards range ~90–480px tall and grid's uniform rows stranded ~350px of dead
   space under the short ones; break-inside keeps each card intact. */
.app-col.wide{max-width:none;border-inline:none;box-shadow:none}
/* auto-fit (not auto-fill, and not CSS columns): empty tracks COLLAPSE and the
   cards stretch to share the row, so there is never a reserved-but-empty
   column leaving dead space on the right — the failure mode of both a fixed
   max-width and `columns:<width>`. align-items:start keeps each card its own
   natural height. */
.app-col.wide .screen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px 22px;align-items:start}
@media (min-width:700px){
  .app-col.wide .greet{padding:20px 32px 28px}
  .app-col.wide .greet .k-display{font-size:var(--display-lg)}
  .app-col.wide .screen{column-gap:24px;padding:24px 32px 32px}
  .app-col.wide .topbar{padding-inline:32px}
}

/* ── ORG VOLUNTEER APP — desktop layout ────────────────────────────────────
   On a phone this is the tab-bar app (unchanged, and it's what gets wrapped
   for iOS/Android). On a desktop the bottom tab bar becomes a LEFT NAV RAIL
   and the app goes full-bleed, so it stops being a phone strip on a monitor.
   Everything below is scoped to `.app-col:not(.wide)` (the org app) and to
   >=900px, so the mobile layout is untouched. */
.tab-action-lbl{display:none}                       /* label only shows in the rail */
.list-grid{display:flex;flex-direction:column;gap:10px}
@media (min-width:900px){
  .app-col:not(.wide){max-width:none;border-inline:none;box-shadow:none;padding-inline-start:236px}
  /* overlay screens (log / a tool) hide the rail — don't keep its gutter */
  .app-col:not(.wide).no-rail{padding-inline-start:0}
  /* width:100% is load-bearing — the log screen is a flex item of its <form>,
     and an auto inline margin alone makes a flex item shrink-to-fit (it
     collapsed to ~257px) instead of filling then capping at max-width. */
  .app-col:not(.wide).no-rail .screen{margin-inline:auto;width:100%}
  /* bottom bar → fixed left rail */
  .app-col:not(.wide) .tabbar{
    position:fixed;top:0;bottom:0;inset-inline-start:0;inset-inline-end:auto;
    width:236px;max-width:none;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:4px;padding:18px 12px calc(18px + env(safe-area-inset-bottom,0px));
    border-top:none;border-inline-end:1px solid var(--shell-line)}
  .app-col:not(.wide) .tabbar .tab{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;
    height:44px;padding:0 12px;border-radius:var(--radius-sm)}
  .app-col:not(.wide) .tabbar .tab-lbl{font-size:var(--text-sm);font-weight:var(--w-med)}
  .app-col:not(.wide) .tabbar .tab.active{background:var(--shell-elevated);box-shadow:inset 3px 0 0 var(--accent-vivid)}
  [dir="rtl"] .app-col:not(.wide) .tabbar .tab.active{box-shadow:inset -3px 0 0 var(--accent-vivid)}
  /* the raised "+" becomes a normal primary action at the top of the rail */
  .app-col:not(.wide) .tabbar .action-slot{order:-1;width:auto;margin-bottom:10px}
  .app-col:not(.wide) .tabbar .tab-action{
    width:100%;height:44px;margin-top:0;border-radius:var(--radius-sm);
    gap:8px;box-shadow:none;font-weight:var(--w-semi);font-size:var(--text-sm)}
  .app-col:not(.wide) .tabbar .tab-action .tab-action-lbl{display:inline}
  .app-col:not(.wide) .tabbar .tab-action .material-symbols-rounded{font-size:20px}
  .app-col:not(.wide) .tab-badge{position:static;transform:none;margin-inline-start:auto;box-shadow:none}
  /* content: no bottom-bar clearance needed once the nav is on the side */
  .app-col:not(.wide) .app-main{padding-bottom:24px}
  .app-col:not(.wide) .topbar{padding-inline:28px}
  .app-col:not(.wide) .greet{padding:20px 28px 26px}
  .app-col:not(.wide) .greet .k-display{font-size:var(--display-lg)}
  .app-col:not(.wide) .screen{padding:22px 28px 28px}
  /* home sections + card lists fill the width; forms/profile stay readable */
  .app-col:not(.wide) .screen.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px 22px;align-items:start}
  /* the impact stats read as one dashboard row, not a stack in a narrow cell */
  .app-col:not(.wide) .screen.grid > section:first-of-type{grid-column:1/-1}
  .app-col:not(.wide) .screen.narrow{max-width:680px}
  .app-col:not(.wide) .list-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
  .app-col:not(.wide) .stat-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
.app-main{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
/* shell greeting band flows out of the topbar (no rounded hero card) */
.greet{background:var(--shell);color:var(--shell-ink);padding:6px 16px 20px}
.greet .k-display{font-size:var(--display-md)}
.greet-meta{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.greet-meta .sub{font-size:var(--text-sm);color:var(--shell-ink-muted)}
.chip.shell{background:color-mix(in srgb,var(--shell-ink) 11%,transparent);border:1px solid var(--shell-line);color:var(--accent-vivid);padding:5px 12px;font-size:var(--text-sm)}
.chip .material-symbols-rounded{font-size:15px}
/* sections: overline title OUTSIDE the content (design signature) */
.screen{padding:14px 14px 20px;display:flex;flex-direction:column;gap:18px}
.sec{display:flex;flex-direction:column;gap:10px}
.sec-head{display:flex;align-items:center;gap:8px;min-height:24px}
.sec-head .k-overline{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-link{color:var(--accent-text);font-size:var(--text-xs);font-weight:var(--w-semi);padding:0}
/* dense stat cards, 2-up */
.stat-grid{grid-template-columns:1fr 1fr;gap:10px;margin:0}
.stat{background:var(--paper);border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:10px 14px;min-width:0}
.stat.neutral{border-inline-start-color:var(--line-strong)}
.stat .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stat .top .material-symbols-rounded{font-size:16px;color:var(--ink-3)}
.stat .lbl{font-size:var(--text-xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.stat .num{font-family:var(--font-body);letter-spacing:var(--track-stat);font-size:var(--stat-sm);font-weight:var(--w-semi);line-height:1;margin-top:2px;font-variant-numeric:tabular-nums}
/* quick actions */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);color:var(--ink-1);box-shadow:var(--shadow-1);min-width:0;transition:filter var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.quick button:hover{filter:brightness(.97)}.quick button:active{transform:translateY(1px) scale(.99)}
.quick button.hot{background:var(--accent);color:var(--on-accent);border-color:transparent}
.quick button .material-symbols-rounded{font-size:22px}
.quick button span:last-child{font-size:11px;font-weight:var(--w-semi);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* rows list (recent activity) — paper card with dividers */
.rowcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.rowcard .row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.rowcard .row:last-child{border-bottom:none}
.row .spacer{flex:1}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);color:var(--ink-3);transition:background var(--dur-1) var(--ease-out)}
.icon-btn:hover{background:var(--surface-sunken);color:var(--danger)}
.icon-btn .material-symbols-rounded{font-size:20px}
.check{display:flex;align-items:center;gap:10px;margin:var(--sp-3) 0 0;font-size:var(--text-base);font-weight:var(--w-reg);letter-spacing:0;text-transform:none;color:var(--ink-1);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent);flex:none}
/* event card (design EventCard) */
.evcard{display:flex;gap:14px;align-items:stretch;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:14px;min-width:0}
.evcard .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.evcard .title-row{display:flex;align-items:center;gap:8px;min-width:0}
.evcard .title-row .ttl{font-weight:var(--w-semi);font-size:var(--text-base);line-height:var(--lh-snug);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evcard .meta{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--ink-3);flex-wrap:wrap;min-width:0}
.evcard .meta span{display:inline-flex;align-items:center;gap:4px;min-width:0}
.evcard .meta .material-symbols-rounded{font-size:14px}
/* calendar date block (design DateBlock: month bar + day + weekday) */
.dateblock{flex:none;width:52px;text-align:center;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line-strong);background:var(--paper);align-self:flex-start}
.dateblock .db-mon{background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:var(--w-bold);letter-spacing:.12em;padding:3px 0}
.dateblock .db-day{font-family:var(--font-body);letter-spacing:var(--track-stat);font-size:24px;font-weight:var(--w-semi);line-height:1;padding:6px 0 2px;font-variant-numeric:tabular-nums}
.dateblock .db-wd{font-size:9px;letter-spacing:.14em;font-weight:var(--w-semi);color:var(--ink-3);padding-bottom:5px}
/* capacity meter (labels row + 6px bar; warn ≥80%, danger when full) */
.capmeter .cap-lbls{display:flex;justify-content:space-between;gap:8px;font-size:var(--text-xs);font-weight:var(--w-semi);color:var(--ink-3);margin-bottom:5px;font-variant-numeric:tabular-nums}
.capmeter .cap-lbls .warn{color:var(--warn-text)}.capmeter .cap-lbls .full{color:var(--danger-text)}
.capmeter .cap-bar{height:6px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden}
.capmeter .capfill{height:100%;border-radius:var(--radius-pill);background:var(--accent);transition:width var(--dur-3) var(--ease-out)}
.capmeter .capfill.warn{background:var(--warn)}.capmeter .capfill.full{background:var(--danger)}
/* stepper — big-target hour entry */
.stepper{display:flex;align-items:center;gap:10px}
.stepper .step-btn{flex:none;width:44px;height:44px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;transition:filter var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.stepper .step-btn:active{transform:translateY(1px) scale(.98)}
.stepper .step-btn.minus{background:var(--paper);border:1px solid var(--line-strong);box-shadow:var(--shadow-1);color:var(--ink-1)}
.stepper .step-btn.plus{background:var(--accent);color:var(--on-accent)}
.stepper .step-val{flex:1;text-align:center;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);height:52px;display:flex;align-items:baseline;justify-content:center;gap:6px;padding-top:8px}
.stepper .step-val b{font-family:var(--font-body);letter-spacing:var(--track-stat);font-size:var(--display-sm);font-weight:var(--w-semi);line-height:1;font-variant-numeric:tabular-nums}
.stepper .step-val span{font-size:var(--text-sm);color:var(--ink-3)}
/* sticky bottom CTA with fade (design pattern) */
.sticky-cta{position:sticky;bottom:0;padding:10px 16px 14px;background:linear-gradient(to top,var(--surface-app) 70%,transparent)}
/* empty state */
.emptystate{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-9) var(--sp-6);gap:6px}
.emptystate .es-ic{width:64px;height:64px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;background:var(--accent-soft);border:1px solid var(--accent-soft-line);color:var(--accent-text);margin-bottom:6px}
.emptystate .es-ic .material-symbols-rounded{font-size:30px}
.emptystate .es-ttl{font-family:var(--font-display);text-transform:var(--skin-display-case);font-size:var(--display-sm);font-weight:var(--w-reg);letter-spacing:var(--track-display);line-height:var(--lh-tight)}
.emptystate .es-desc{font-size:var(--text-sm);color:var(--ink-3);max-width:420px}
/* tab bar — shell, ≤4 items + raised center action (design TabBar) */
.tabbar{position:fixed;bottom:0;inset-inline:0;margin:0 auto;max-width:430px;display:flex;align-items:stretch;background:var(--shell);border-top:1px solid var(--shell-line);padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:100}
.tabbar .tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;color:var(--shell-ink-faint);transition:color var(--dur-1) var(--ease-out)}
.tabbar .tab .material-symbols-rounded{font-size:23px}
.tabbar .tab.active{color:var(--accent-vivid)}
.tabbar .tab.active .material-symbols-rounded{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.tabbar .tab-lbl{font-size:10px;font-weight:var(--w-med);letter-spacing:.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar .tab.active .tab-lbl{font-weight:var(--w-semi)}
.tabbar .action-slot{flex:none;width:72px;display:flex;justify-content:center}
.tabbar .tab-action{width:52px;height:52px;border-radius:calc(var(--radius-md) + 6px);margin-top:-16px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -4px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 4px var(--shell);transition:filter var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.tabbar .tab-action:hover{filter:brightness(.95)}.tabbar .tab-action:active{transform:translateY(1px) scale(.98)}
.tabbar .tab-action .material-symbols-rounded{font-size:26px;font-variation-settings:'FILL' 0,'wght' 600,'GRAD' 0,'opsz' 24}
.tab-badge{position:absolute;top:4px;inset-inline-end:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-pill);background:var(--danger);color:var(--text-on-accent);font-size:9.5px;font-weight:var(--w-bold);line-height:16px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--shell)}
/* self-contained avatar monogram (volunteer surface) */
.v-avatar{flex:none;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--w-bold);background:var(--surface-sunken);color:var(--ink-2)}
.v-avatar.accent{background:var(--accent-soft);border:1px solid var(--accent-soft-line);color:var(--accent-text)}
/* inbox cards (design InboxScreen) */
.inboxcard{display:flex;gap:12px;align-items:flex-start;text-align:start;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:12px 14px;transition:filter var(--dur-1) var(--ease-out)}
.inboxcard:hover{filter:brightness(.98)}
.inboxcard.approval{background:var(--accent-soft);border-color:var(--accent-soft-line)}
.inboxcard .ic-badge{width:38px;height:38px;flex:none;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--w-bold);font-size:15px;background:var(--surface-sunken);color:var(--ink-2)}
.inboxcard.approval .ic-badge{background:var(--accent);color:var(--on-accent)}
.inboxcard .ic-body{flex:1;min-width:0;display:flex;flex-direction:column}
.inboxcard .ic-head{display:flex;align-items:center;gap:6px}
.inboxcard .ic-title{flex:1;min-width:0;font-weight:var(--w-semi);font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-1)}
.inboxcard.unread .ic-title{font-weight:var(--w-bold)}
.inboxcard .ic-time{font-size:var(--text-xs);color:var(--ink-3);flex:none}
.inboxcard .ic-dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--accent);flex:none}
.inboxcard .ic-org{display:block;font-size:var(--text-xs);color:var(--ink-3);margin:1px 0 3px}
.inboxcard .ic-text{font-size:var(--text-sm);color:var(--ink-2);line-height:var(--lh-snug);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inboxcard .ic-text.open{-webkit-line-clamp:unset;display:block}
.inboxcard .ic-del{flex:none;align-self:center;width:32px;height:32px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3)}
.inboxcard .ic-del:hover{background:var(--surface-sunken);color:var(--danger)}
.inboxcard .ic-del .material-symbols-rounded{font-size:19px}
/* org cards (personal cross-org home) */
.orgcard{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:12px 14px;text-decoration:none;transition:filter var(--dur-1) var(--ease-out)}
.orgcard:hover{filter:brightness(.98);text-decoration:none}
.orgcard .oc-logo{width:40px;height:40px;flex:none;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--w-reg);font-size:18px;background:var(--accent);color:var(--on-accent);text-transform:uppercase}
.orgcard .oc-name{display:block;font-weight:var(--w-semi);font-size:var(--text-base);color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orgcard .oc-sub{display:block;font-size:var(--text-xs);color:var(--ink-3);margin-top:2px}
.orgcard .oc-sub .chip{margin-top:2px}
/* language segmented toggle (profile) */
.lang-toggle{display:inline-flex;gap:4px;background:var(--surface-sunken);border-radius:var(--radius-pill);padding:3px}
.lang-toggle button{border-radius:var(--radius-pill);padding:4px 12px;font-size:var(--text-xs);font-weight:var(--w-semi);color:var(--ink-3)}
.lang-toggle button.on{background:var(--paper);color:var(--ink-1);box-shadow:var(--shadow-1)}

/* ── org portal (faithful to ui_kits/org-portal): sidebar shell + content ── */
.p-shell{display:flex;min-height:100vh;background:var(--surface-app)}
.sidebar{width:244px;flex:none;background:var(--shell);color:var(--shell-ink);display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-3)}
.sidebar .sb-head{display:flex;align-items:center;gap:10px;padding:2px 10px 14px;border-bottom:1px solid var(--shell-line);margin-bottom:12px;min-width:0}
.sidebar .sb-logo{width:34px;height:34px;flex:none;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--w-reg);font-size:17px;text-transform:uppercase}
.sidebar .sb-name{font-family:var(--font-display);text-transform:var(--skin-display-case);font-weight:var(--w-reg);font-size:var(--text-md);letter-spacing:var(--track-display);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--lh-snug)}
.snav{display:flex;flex-direction:column;gap:2px}
.snav button{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:0 10px;height:42px;border-radius:var(--radius-sm);background:transparent;color:var(--shell-ink-muted);font-weight:var(--w-med);font-size:var(--text-sm);transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.snav button:hover{background:color-mix(in srgb,var(--shell-ink) 10%,transparent)}
.snav button.active{background:var(--shell-elevated);color:var(--shell-ink);box-shadow:inset 3px 0 0 var(--accent-vivid);font-weight:var(--w-semi)}
[dir="rtl"] .snav button.active{box-shadow:inset -3px 0 0 var(--accent-vivid)}
.snav button .material-symbols-rounded{font-size:19px}
.snav button.active .material-symbols-rounded{color:var(--accent-vivid);font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.snav .nav-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snav .nav-badge{background:var(--accent);color:var(--on-accent);border-radius:var(--radius-pill);font-size:11px;font-weight:var(--w-bold);min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-variant-numeric:tabular-nums}
.sidebar .sb-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 10px 8px;border-top:1px solid var(--shell-line)}
.sidebar .sb-foot .nm2{display:block;font-size:var(--text-sm);font-weight:var(--w-semi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar .sb-foot .rl{font-size:11px;color:var(--shell-ink-faint)}
.sidebar .power{color:var(--shell-ink-faint);text-align:start;padding-inline-start:10px;margin-top:10px}
@media (max-width:760px){
.sidebar{width:64px;padding:12px 8px}
.sidebar .sb-name,.snav .nav-lbl,.sb-foot .nm2,.sb-foot .rl,.sidebar .power{display:none}
.snav button{justify-content:center;padding:0;gap:0}
.snav .nav-badge{position:absolute;transform:translate(10px,-10px)}
.snav button{position:relative}
.sidebar .sb-head{justify-content:center;padding:2px 0 12px}
.sidebar .sb-foot{justify-content:center;padding:10px 0 8px}
.p-content{padding:16px 14px 40px}
}
.p-body{flex:1;min-width:0;display:flex;flex-direction:column}
.topstrip{display:flex;align-items:center;gap:12px;padding:10px 24px;border-bottom:1px solid var(--line);background:var(--paper)}
.p-content{flex:1;padding:22px 24px 40px;max-width:var(--w-content);width:100%;margin:0 auto}
.phead{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.phead .ph-main{flex:1;min-width:220px}
.phead h1{font-size:var(--display-md)}
.phead .ph-sub{font-size:var(--text-sm);color:var(--ink-3);margin-top:4px}
.phead .ph-actions{display:flex;gap:8px;align-items:center}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-1);min-width:0}
.pcard .pc-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.pcard .pc-head .k-overline{flex:1}
.pcard .pc-body{padding:16px}
.pcard .pc-body.p0{padding:0}
.avatar{flex:none;border-radius:var(--radius-pill);background:var(--accent-soft);border:1px solid var(--accent-soft-line);color:var(--accent-text);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--w-bold);text-transform:uppercase}
.avatar.on-shell{background:color-mix(in srgb,var(--shell-ink) 12%,transparent);border-color:var(--shell-line);color:var(--shell-ink)}
.filter-chip{cursor:pointer;height:30px;padding:0 12px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--w-semi);border:1px solid var(--line-strong);background:var(--paper);color:var(--ink-2)}
.filter-chip.on{border-color:transparent;background:var(--accent);color:var(--text-on-accent)}
.pgrid{display:grid;gap:16px;align-items:start}
@media (min-width:900px){.pgrid.g21{grid-template-columns:1.5fr 1fr}.pgrid.g11{grid-template-columns:1fr 1fr}.pgrid.g111{grid-template-columns:1fr 1fr 1fr}}
.attn{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--accent-soft-line);background:var(--accent-soft);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer;text-align:start;font-size:var(--text-sm);font-weight:var(--w-semi);color:var(--ink-1)}
.attn .material-symbols-rounded{color:var(--accent-text);font-size:20px}
.quote{margin:6px 0 0;font-size:var(--text-sm);color:var(--ink-2);border-inline-start:3px solid var(--line);padding-inline-start:10px}
.drawer-veil{position:fixed;inset:0;z-index:55;background:color-mix(in srgb,var(--shell) 35%,transparent);display:flex;justify-content:flex-end}
.drawer{width:100%;max-width:430px;height:100%;background:var(--paper);box-shadow:var(--shadow-modal);display:flex;flex-direction:column;animation:k-fade-up var(--dur-2) var(--ease-out)}
.drawer .dr-head{display:flex;align-items:flex-start;gap:10px;padding:18px 20px 10px;border-bottom:1px solid var(--line)}
.drawer .dr-title{display:block;font-family:var(--font-display);text-transform:var(--skin-display-case);font-size:var(--display-xs);font-weight:var(--w-reg);letter-spacing:var(--track-display);line-height:var(--lh-tight)}
.drawer .dr-body{flex:1;overflow:auto;padding:16px 20px}
.drawer .dr-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line)}
.swatch{width:28px;height:28px;border-radius:var(--radius-pill);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);flex:none}
.swatch.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--line-strong)}
.swatch-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.swatch-custom{width:28px;height:28px;border-radius:var(--radius-pill);border:1.5px dashed var(--line-strong);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-3);position:relative;overflow:hidden;flex:none}
.swatch-custom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.inbox-prev{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:12px 14px}

/* ── toast (shell chrome) ── */
#toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(-50%) translateY(80px);background:var(--shell);color:var(--shell-ink);border:1px solid var(--shell-line);padding:12px 20px;border-radius:var(--radius-md);font-size:14px;font-weight:var(--w-semi);transition:transform var(--dur-3) var(--ease-out);z-index:200}
[dir="rtl"] #toast{transform:translateX(50%) translateY(80px)}
#toast.show{transform:translateX(-50%) translateY(0)}
[dir="rtl"] #toast.show{transform:translateX(50%) translateY(0)}
#toast.err{border-inline-start:4px solid var(--danger)}
#toast.ok{border-inline-start:4px solid var(--accent-vivid)}

/* ── S8 portal v2 (CRM board · forms builder · queues) — append-only ── */
.sidebar .snav{overflow-y:auto;min-height:0;flex:1}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(225px,1fr);gap:12px;overflow-x:auto;align-items:start;padding-bottom:10px}
.kb-col{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-md);min-width:0}
.kb-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.kb-cards{display:flex;flex-direction:column;gap:8px;padding:10px;min-height:44px}
.kb-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);padding:10px 12px;cursor:pointer;text-align:start;width:100%;transition:filter var(--dur-1) var(--ease-out)}
.kb-card:hover{filter:brightness(.98)}
.kb-mv{width:26px;height:26px;color:var(--ink-3)}
.kb-mv:hover{color:var(--ink-1)}
.fb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.fb-row:last-child{border-bottom:none}
.fb-row input[data-f=label]{flex:2;min-width:150px}
.fb-row select[data-f=type]{flex:1;min-width:130px;width:auto}

/* ── S2 salah timetable (tools/prayer.js) ── */
.ptm{width:100%;border-collapse:collapse;font-size:var(--text-xs);min-width:430px}
.ptm th{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink-3);font-weight:var(--w-semi);white-space:nowrap}
.ptm td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.ptm tr:last-child td{border-bottom:0}
.ptm tr.ptm-fri td{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.ptm tr.ptm-today td{background:var(--accent-soft);font-weight:var(--w-semi)}
.ptm td.ptm-day .muted{font-size:10.5px}
.pt-results{position:absolute;top:calc(100% + 4px);inset-inline:0;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-2);z-index:30;overflow:hidden}
.pt-results button{display:block;width:100%;text-align:start;font-size:var(--text-xs);padding:9px 12px;border:0;border-bottom:1px solid var(--line);background:var(--paper);color:var(--ink-1);cursor:pointer}
.pt-results button:last-of-type{border-bottom:0}
.pt-results button:hover{background:var(--accent-soft)}
.pt-results .pt-note{font-size:10.5px;color:var(--ink-3);padding:6px 12px}

/* ── S11 portal v2 polish (pointer drag: CRM board · form fields) ── */
/* deliberately NO touch-action override on .kb-card: the board scrolls
   horizontally and the page vertically from the card surface, and a swipe must
   keep doing that. The drag only starts after a stationary hold, by which point
   no scroll has been claimed; if one has, pointercancel aborts the drag. */
.kb-card.kb-ghost{opacity:.35}
.kb-drag{position:fixed;z-index:300;pointer-events:none;box-shadow:var(--shadow-3);opacity:.96;rotate:1deg}
.kb-col.kb-over{border-color:var(--accent)}
.kb-col.kb-over .kb-cards{outline:2px dashed var(--accent);outline-offset:-5px;border-radius:var(--radius-sm);background:var(--accent-soft)}
.kb-card,.fb-handle{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fb-handle{flex:none;width:26px;height:26px;color:var(--ink-3);cursor:grab;touch-action:none}
.fb-handle:active{cursor:grabbing}
.fb-row.fb-ghost{opacity:.35}
.fb-row.fb-drop-before{box-shadow:inset 0 2px 0 var(--accent)}
.fb-row.fb-drop-after{box-shadow:inset 0 -2px 0 var(--accent)}
.fb-drag{position:fixed;z-index:300;pointer-events:none;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-3);padding:8px 10px;font-size:var(--text-sm);opacity:.96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.kb-drag{rotate:none}}

/* ── S11b: hours loop (certificates · milestones · counted totals) ── */
/* Pre-existing 375px bug, found during the S11b pass and fixed append-only
   rather than by editing another session's rule: `.drawer` is a flat 430px, so
   every drawer (person, deal) overflowed a 375px viewport by 57px — existing
   content and new alike. min() keeps the desktop width and stops the overflow. */
.drawer{max-width:min(430px,100vw)}

/* ── S11c: shell 375px overflow (Maestro-assigned) — append-only ──
   Settings/branding pushed the page 5px sideways at 375. Three causes, all
   shell-level rather than anything in the branding view itself:
   1. `.p-content`'s mobile padding is declared INSIDE the max-width:760 block
      ABOVE the desktop `.p-content` rule, so the later rule won every time and
      phones paid 24px of side padding instead of 14px. Re-asserted here, after
      it, where it actually applies — 20px of a 375px screen handed back.
   2. Grid children default to min-width:auto, so one stubborn child can force a
      track wider than its container. min-width:0 lets the track shrink.
   3. The live-preview phone mock is deliberately a hard 290px — it is a phone,
      it should not be fluid — so it dictated the single-column track at narrow
      widths. Its wrapper scrolls instead; the mock keeps its true size. */
@media (max-width:760px){
  .p-content{padding:16px 14px 40px}
}
.pgrid,.pgrid>*{min-width:0}
/* #pvWrap is a flex row, so the mock shrank instead of scrolling — a squeezed
   phone preview quietly misrepresents what volunteers actually see. Pin its
   size and let the wrapper scroll. */
#pvWrap{overflow-x:auto}
#pvWrap>*{flex:none}

/* ── S12 motion & glass pass (fleet UI surge, P1–P10) — append-only ────────
   Every color below derives from the 8 --skin-* tokens or existing derived
   tokens via color-mix(); no new hex. All animation this section introduces
   is killed in the single reduced-motion guard at the END of the section
   (the global guard for the whole S12 layer). JS counterparts live in
   core.js: vt(fn) / ripples() / pointerGlow(). */

/* P1 · layered glass elevation on the card family: shell-tinted key shadow +
   brand-tinted ambient + inset top-light (the "glass" read). Because both
   layers are token-derived, a rebranded org's cards glow in ITS skin. */
.card,.stat,.evcard,.rowcard,.inboxcard,.orgcard,.pcard,.quick button,.kb-card{box-shadow:0 1px 2px var(--shadow-tint),0 10px 28px -14px var(--glow-accent),inset 0 1px 0 color-mix(in srgb,var(--paper) 60%,transparent)}
@media (hover:hover){
.evcard,.orgcard,.inboxcard,.kb-card,.quick button{transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),filter var(--dur-1) var(--ease-out)}
.evcard:hover,.orgcard:hover,.inboxcard:hover,.kb-card:hover:not(.kb-ghost),.quick button:hover{transform:translateY(-2px);box-shadow:var(--shadow-3),0 14px 34px -12px var(--glow-accent),inset 0 1px 0 color-mix(in srgb,var(--paper) 60%,transparent)}
}

/* P3 · aurora hero — token-derived gradient on the shell bands. isolation
   makes each band its own stacking context so the drifting ::after blob sits
   at z-index:-1 — above the band's background, below ALL children (the streak
   chip / .k-display need no z-index of their own). */
.greet,.hero{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(120% 150% at 88% -30%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),radial-gradient(90% 130% at -15% 115%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%),var(--shell)}
.greet::after,.hero::after{content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:radial-gradient(42% 42% at 62% 38%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);filter:blur(40px);opacity:.55;animation:k-aurora 20s ease-in-out infinite alternate}
@keyframes k-aurora{from{transform:translate3d(-6%,-4%,0) rotate(0deg)}to{transform:translate3d(6%,5%,0) rotate(16deg)}}
/* continuity: the same wash at lower intensity on the volunteer topbar */
.topbar{background:radial-gradient(130% 190% at 90% -70%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 55%),var(--shell)}

/* P5 · skeleton shimmer loading (JS renders <div class="skel row|stat|card">
   stacks inside a role="status" wrapper; shapes mirror what loads) */
.skel{border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-sunken) 25%,color-mix(in srgb,var(--surface-sunken) 55%,var(--paper)) 37%,var(--surface-sunken) 63%);background-size:400% 100%;animation:k-shimmer 1.3s var(--ease-out) infinite}
.skel+.skel{margin-top:10px}
.skel.row{height:44px}
.skel.stat{height:64px;border-inline-start:3px solid var(--line-strong)}
.skel.card{height:96px}
@keyframes k-shimmer{to{background-position:-135% 0}}

/* P6 · animated active indicators. position:relative anchors the pill AND the
   ripple; deliberately NO overflow:hidden on .tabbar .tab — .tab-badge and its
   2px shell ring must never clip (audit caution). The ripple self-clips via
   its own border-radius:50%. */
.tabbar .tab{position:relative}
.tabbar .tab.active::after{content:'';position:absolute;top:2px;inset-inline:18%;height:3px;border-radius:var(--radius-pill);background:var(--accent-vivid)}
.tabbar .tab.active{view-transition-name:kp-tab-ind}
.snav button.active{view-transition-name:kp-nav-ind}
.tabbar .tab.active .material-symbols-rounded{animation:k-tab-pop var(--dur-2) var(--ease-spring)}
@keyframes k-tab-pop{0%{scale:1}55%{scale:1.18}100%{scale:1}}
/* raised "+" — idle breathing brand glow (re-states the existing 2 shadow
   layers so the animation composes, adds a token-derived halo) */
.tabbar .tab-action{animation:k-breathe 3.2s ease-in-out infinite}
@keyframes k-breathe{
0%,100%{box-shadow:0 6px 16px -4px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 4px var(--shell),0 0 10px color-mix(in srgb,var(--accent) 18%,transparent)}
50%{box-shadow:0 6px 16px -4px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 4px var(--shell),0 0 22px color-mix(in srgb,var(--accent) 42%,transparent)}
}
@media (min-width:900px){
/* the desktop rail flattens the action button (box-shadow:none by design) and
   uses the inset accent bar, not the top pill — disable both there */
.app-col:not(.wide) .tabbar .tab-action{animation:none}
.app-col:not(.wide) .tabbar .tab.active::after{content:none}
}

/* P2 · View Transitions choreography — stable chrome keeps its own snapshot
   (names must be unique per page, so .topbar and .topstrip get DISTINCT
   names); only the content region slides. core.js vt() gates reduced-motion +
   unsupported browsers — the fallback is today's instant swap. Inert without
   document.startViewTransition. */
.sidebar{view-transition-name:kp-side}
.tabbar{view-transition-name:kp-tabs}
.topbar{view-transition-name:kp-top}
.topstrip{view-transition-name:kp-strip}
.p-content{view-transition-name:kp-content}
.app-main{view-transition-name:kp-main}
::view-transition-old(kp-content),::view-transition-old(kp-main){animation:k-vt-out var(--dur-2) var(--ease-out) both}
::view-transition-new(kp-content),::view-transition-new(kp-main){animation:k-vt-in var(--dur-2) var(--ease-out) both}
@keyframes k-vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes k-vt-in{from{opacity:0;transform:translateY(8px)}}

/* P7 · press ripples (core.js ripples() appends .k-ripple on pointerdown).
   .snav button gets position only — NO overflow:hidden, because the ≤760px
   .nav-badge translates outside the button and would clip. */
.btn,.quick button,.tab-action,.filter-chip,.step-btn,.kb-card{position:relative;overflow:hidden}
.snav button{position:relative}
.k-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.14;transform:scale(0);animation:k-ripple .5s var(--ease-out) forwards}
@keyframes k-ripple{to{transform:scale(1);opacity:0}}

/* P9 · badge pop — `scale` property only, so it composes with the positional
   transforms the badges already carry (≤760px nav-badge translate; desktop
   rail tab-badge transform:none). .bump = count-increase re-pop: a SEPARATE
   keyframe name so a class toggle + reflow actually restarts it. */
.nav-badge,.tab-badge{animation:k-badge-in var(--dur-3) var(--ease-spring)}
.nav-badge.bump,.tab-badge.bump{animation:k-badge-bump var(--dur-3) var(--ease-spring)}
@keyframes k-badge-in{0%{scale:.4;opacity:0}60%{scale:1.18}100%{scale:1;opacity:1}}
@keyframes k-badge-bump{0%{scale:1}50%{scale:1.25}100%{scale:1}}
.inboxcard .ic-dot{animation:k-dot-pulse 2.4s ease-in-out infinite}
@keyframes k-dot-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* P10 · pointer-tracking accent glow — desktop fine-pointer only; core.js
   pointerGlow() feeds --mx/--my; kanban drag ghost/clone excluded. ::before is
   pointer-events:none at a 9% tint, so children need no z-index. */
.pcard,.orgcard{position:relative}
@media (hover:hover) and (pointer:fine){
.pcard::before,.orgcard::before,.kb-card:not(.kb-ghost):not(.kb-drag)::before,.quick button::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--dur-2) var(--ease-out);background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 65%)}
.pcard:hover::before,.orgcard:hover::before,.kb-card:hover:not(.kb-ghost):not(.kb-drag)::before,.quick button:hover::before{opacity:1}
}

/* P4 (support) · staggered stat entrance — the stat renderers set inline
   style="--i:${i}" per tile; without it every tile animates at delay 0 */
.stat-grid .stat{animation:k-fade-up var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms)}

/* P8 · pull-to-refresh disc — volunteer.js owns the gesture; the disc starts
   hidden above the scroll column and is moved with transform:translateY(),
   spun with the existing .k-spin. overscroll contain stops the native PTR
   from fighting ours. */
.app-main{position:relative;overscroll-behavior-y:contain}
.ptr{position:absolute;top:-56px;inset-inline-start:50%;margin-inline-start:-22px;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--paper);box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;color:var(--accent-text);z-index:60;pointer-events:none;will-change:transform}
.ptr .material-symbols-rounded{font-size:22px}
/* safe areas — .tabbar already pads env(safe-area-inset-bottom) in both its
   base rule and the desktop rail (verified, not duplicated); top chrome gains
   inset-top awareness for viewport-fit=cover pages (env() falls back to 0px
   → identical to today everywhere else) */
.topbar{padding-top:calc(13px + env(safe-area-inset-top,0px))}
.topstrip{padding-top:calc(10px + env(safe-area-inset-top,0px))}

/* ── S12 global reduced-motion guard — kills every animation, lift and drift
   this section introduces (View Transition snapshots included; core.js vt()
   and ripples() also no-op in JS) ── */
@media (prefers-reduced-motion:reduce){
::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
.greet::after,.hero::after,.skel,.tabbar .tab.active .material-symbols-rounded,.tabbar .tab-action,.nav-badge,.tab-badge,.nav-badge.bump,.tab-badge.bump,.inboxcard .ic-dot,.stat-grid .stat,.k-ripple{animation:none!important}
.evcard:hover,.orgcard:hover,.inboxcard:hover,.kb-card:hover,.quick button:hover{transform:none}
.pcard::before,.orgcard::before,.kb-card::before,.quick button::before,.evcard,.orgcard,.inboxcard,.kb-card,.quick button{transition-duration:1ms}
}

/* ── S13 bookings (portal-bookings · volunteer-bookings · booking-manage)
      — append-only. Token-derived only: no new hex anywhere below, so org
      branding keeps driving every surface here like everywhere else. ── */
.bk-tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.75rem; }

/* Offering picker — a wrapping row of toggles, not a select. On a phone the
   whole point is that you can see what is bookable without opening anything. */
.bk-cards { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; }
.bk-card { display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:.6rem .8rem; min-width:9rem; text-align:start;
  background:var(--surface-sunken); border:1px solid var(--line);
  border-radius:var(--radius-md); color:var(--ink-1); cursor:pointer; }
.bk-card:hover { border-color:var(--line-strong); }
.bk-card.on { background:var(--accent-soft); border-color:var(--accent-soft-line); }
.bk-card-name { font-weight:600; font-size:var(--text-sm); }
.bk-card-meta { font-size:var(--text-xs); color:var(--ink-3); }

.bk-navrow { display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin:.75rem 0; flex-wrap:wrap; }

/* Member week strip. Seven columns is too many below ~640px, so it becomes a
   scrolling row rather than seven unreadable slivers — scrolling INSIDE its own
   box, never widening the page. */
.bk-week { display:grid; grid-template-columns:repeat(7,minmax(6.5rem,1fr));
  gap:.4rem; overflow-x:auto; padding-bottom:.35rem; }
.bk-day { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.bk-day-h { font-size:var(--text-xs); color:var(--ink-3); font-weight:600;
  padding-bottom:.2rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.bk-slot { padding:.4rem .3rem; font-size:var(--text-xs);
  background:var(--surface-sunken); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--ink-1); cursor:pointer; }
.bk-slot:hover { background:var(--accent-soft); border-color:var(--accent-soft-line); }
.bk-none { font-size:var(--text-xs); color:var(--ink-disabled); text-align:center; padding:.3rem 0; }

/* Org week calendar, 08:00–21:00. Same scroll-in-its-own-box rule. */
.bk-cal { display:grid; grid-template-columns:3.2rem repeat(7,minmax(5.5rem,1fr));
  gap:.25rem; overflow-x:auto; margin-top:.5rem; }
.bk-cal-hours { display:flex; flex-direction:column; justify-content:space-between;
  font-size:var(--text-xs); color:var(--ink-3); padding-top:1.4rem; }
.bk-hour { height:0; line-height:0; }
.bk-cal-day { min-width:0; }
.bk-cal-col { position:relative; height:22rem; background:var(--surface-sunken);
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
/* A hold is a ground condition, so it sits behind bookings rather than over
   them — an overlapping booking must stay readable, that is the whole point of
   drawing the clash. */
.bk-band { position:absolute; inset-inline:0; background:var(--line);
  opacity:.55; pointer-events:none; }
.bk-pill { position:absolute; inset-inline:.15rem; display:flex; flex-direction:column;
  justify-content:center; gap:.05rem; overflow:hidden;
  padding:.15rem .3rem; font-size:var(--text-xs); line-height:1.15; text-align:start;
  background:var(--accent-soft); border:1px solid var(--accent-soft-line);
  border-radius:var(--radius-xs); color:var(--accent-text); cursor:pointer; }
.bk-pill.clash { border-color:var(--ink-2); border-style:dashed; color:var(--ink-1); }
.bk-pill span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.bk-availday { padding:.5rem 0; border-bottom:1px solid var(--line); }
.bk-availday:last-child { border-bottom:0; }

@media (max-width:520px) {
  /* Below this the hour gutter costs more than it explains. */
  .bk-cal { grid-template-columns:repeat(7,minmax(5rem,1fr)); }
  .bk-cal-hours { display:none; }
  .bk-cal-col { height:16rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   M2 · DESIGN-SYSTEM COMPONENTS (2/2) — navigation, feedback, data. Appended
   after the M0 surface blocks so the restyles of their classes (.tabbar,
   .snav, .drawer, .emptystate, .skel, .evcard, #toast) win by source order.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Rail (volunteer web · portal · console): 72px icon-only ↔ 248px open ── */
.rail{display:flex;flex-direction:column;width:var(--rail-w);height:100%;padding:16px 12px;gap:4px;background:var(--bg-deep);border-inline-end:1px solid var(--line);flex:none;overflow:hidden;transition:width var(--dur-3) var(--ease-out)}
.rail.open{width:var(--rail-w-open)}
.rail .r-head{display:flex;align-items:center;justify-content:center;height:44px;margin-bottom:12px;gap:8px;min-width:0}
.rail.open .r-head{justify-content:space-between;padding-inline-start:8px}
.rail .r-brand{display:none;min-width:0;align-items:center;gap:10px}
.rail.open .r-brand{display:flex}
.rail .r-toggle{width:36px;height:36px;border-radius:var(--radius-sm);color:var(--text-3);display:inline-flex;align-items:center;justify-content:center;flex:none}
.rail .r-toggle:hover{background:var(--surface-1);color:var(--text-1)}
.rail .r-item{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:44px;padding:0;border-radius:var(--radius-md);color:var(--text-2);font-size:var(--text-sm);font-weight:var(--w-med);white-space:nowrap;overflow:hidden;text-align:start;flex:none;
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.rail.open .r-item{justify-content:flex-start;padding:0 12px}
.rail .r-item .ic{font-size:22px;flex:none}
.rail .r-item .r-lbl{display:none;flex:1;overflow:hidden;text-overflow:ellipsis}
.rail.open .r-item .r-lbl{display:block}
.rail .r-item:hover{background:var(--surface-1);color:var(--text-1)}
.rail .r-item:active{transform:scale(.98)}
.rail .r-item:focus-visible{box-shadow:var(--focus-ring)}
.rail .r-item.active,.rail .r-item[aria-current="page"]{background:var(--accent-soft);color:var(--accent-text);font-weight:var(--w-semi)}
.rail .r-item.active .ic,.rail .r-item[aria-current="page"] .ic{stroke-width:2}
.rail .r-item.active::before,.rail .r-item[aria-current="page"]::before{content:'';position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--accent)}
.rail .r-badge{position:absolute;top:8px;inset-inline-end:14px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:var(--white);font-size:11px;font-weight:var(--w-bold);line-height:1;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-size:0}
.rail.open .r-badge{position:static;background:var(--surface-3);color:var(--text-1);font-size:11px}
.rail .r-sec{height:12px;display:flex;align-items:flex-end;padding-bottom:6px;flex:none}
.rail .r-sec+.r-sec{margin-top:8px}
.rail .r-item+.r-sec{margin-top:8px}
.rail .r-sec span{display:none;font-size:var(--text-2xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-3)}
.rail .r-sec::after{content:'';width:24px;height:1px;background:var(--line);margin:0 auto}
.rail.open .r-sec{height:28px;padding-inline-start:12px}
.rail.open .r-sec span{display:block}
.rail.open .r-sec::after{content:none}
.rail .r-foot{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.rail .r-foot .icon-btn{width:100%;justify-content:center;gap:12px;border-radius:var(--radius-md)}
.rail.open .r-foot .icon-btn{justify-content:flex-start;padding-inline:10px}
.rail .r-foot .r-lbl{display:none;font-size:var(--text-sm)}
.rail.open .r-foot .r-lbl{display:block}
.rail .r-user{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0;border-radius:var(--radius-md);color:var(--text-2);width:100%}
.rail.open .r-user{justify-content:flex-start;padding:0 6px}
.rail .r-user:hover{background:var(--surface-1)}
.rail.dense{padding:12px 10px;gap:2px}
.rail.dense .r-item{height:36px}

/* ── BottomBar (mobile): 5 slots, glass, safe-area, raised center action ── */
.bottombar{position:fixed;inset-inline:0;bottom:0;height:calc(var(--bottombar-h) + env(safe-area-inset-bottom,0px));padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(var(--n,5),1fr);align-items:stretch;background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-top:1px solid var(--line);z-index:100;margin:0 auto;max-width:var(--w-phone-max,none)}
.bottombar.absolute{position:absolute}
.bottombar .bb-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;color:var(--text-3);transition:color var(--dur-1)}
.bottombar .bb-item .ic{font-size:24px}
.bottombar .bb-item .bb-lbl{font-size:10.5px;font-weight:var(--w-med);letter-spacing:.01em;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bottombar .bb-item.active,.bottombar .bb-item[aria-current="page"]{color:var(--accent-text)}
.bottombar .bb-item.active .ic{stroke-width:2.25}
.bottombar .bb-item.active .bb-lbl{font-weight:var(--w-semi)}
.bottombar .bb-badge{position:absolute;top:8px;inset-inline-start:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:var(--white);font-size:10px;font-weight:var(--w-bold);line-height:1;display:flex;align-items:center;justify-content:center}
.bottombar .bb-primary{display:flex;align-items:center;justify-content:center;padding:0}
.bottombar .bb-primary span{width:52px;height:52px;margin-top:-22px;border-radius:50%;background:var(--accent);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;box-shadow:var(--accent-glow);transition:transform var(--dur-2) var(--ease-spring),background var(--dur-1)}
.bottombar .bb-primary span .ic{font-size:24px;stroke-width:2.25}
.bottombar .bb-primary:active span{transform:scale(.94)}

/* ── Tabs: underline tabs, 44px ── */
.tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs.block>button{flex:1}.tabs.block{gap:0}
.tabs>button{position:relative;height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--text-2);font-size:var(--text-sm);font-weight:var(--w-med);white-space:nowrap;transition:color var(--dur-1)}
.tabs>button[aria-selected="true"]{color:var(--text-1);font-weight:var(--w-semi)}
.tabs>button::after{content:'';position:absolute;bottom:-1px;inset-inline:0;height:2px;border-radius:1px;background:var(--accent);transform:scaleX(0);transition:transform var(--dur-2) var(--ease-out)}
.tabs>button[aria-selected="true"]::after{transform:none}
.tabs>button:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.tabs .count{font-size:11px;font-weight:var(--w-semi);padding:2px 6px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-3);font-variant-numeric:tabular-nums}
.tabs>button[aria-selected="true"] .count{background:var(--accent-soft);color:var(--accent-text)}

/* ── Dialog (web) · Sheet (mobile) ── */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--overlay);animation:k1-fade var(--dur-2) var(--ease-out) both}
.overlay.sheet-host{align-items:flex-end;padding:0}
.overlay.closing{animation:k1-fade var(--dur-2) var(--ease-out) reverse both}
.dialog{width:100%;max-width:480px;max-height:100%;overflow:auto;border-radius:var(--radius-xl);background:var(--bg-raised);border:1px solid var(--line-strong);box-shadow:var(--shadow-modal);padding:28px;display:flex;flex-direction:column;gap:16px;animation:k1-pop var(--dur-3) var(--ease-spring) both}
.dialog.wide{max-width:720px}
.dialog .d-head{display:flex;align-items:flex-start;gap:12px}
.dialog .d-head .d-txt{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.dialog h2{font-family:var(--font-display);font-size:var(--display-sm);line-height:var(--lh-display);font-weight:var(--w-reg);text-transform:none;margin:0;color:var(--text-1)}
.dialog .d-desc{font-size:var(--text-base);color:var(--text-2);line-height:var(--lh-body)}
.dialog .d-head .icon-btn{margin:-8px -8px 0 0}
.dialog .d-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;flex-wrap:wrap}
.sheet{width:100%;max-height:88%;overflow:auto;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--bg-raised);border-top:1px solid var(--line-strong);box-shadow:var(--shadow-modal);padding:10px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px;animation:k1-rise var(--dur-3) var(--ease-out) both}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 6px;flex:none}
.sheet h2{font-family:var(--font-display);font-size:var(--display-xs);line-height:var(--lh-display);font-weight:var(--w-reg);text-transform:none;margin:0;color:var(--text-1)}
.sheet .d-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}
@media (max-width:600px){.overlay.responsive{align-items:flex-end;padding:0}.overlay.responsive .dialog{max-width:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-left:none;border-right:none;border-bottom:none;animation:k1-rise var(--dur-3) var(--ease-out) both;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}}
/* legacy drawer (portal side panel) restyled */
.drawer-veil{position:fixed;inset:0;z-index:55;background:var(--overlay);display:flex;justify-content:flex-end;animation:k1-fade var(--dur-2) var(--ease-out) both}
.drawer{width:100%;max-width:min(430px,100vw);height:100%;background:var(--bg-raised);border-inline-start:1px solid var(--line-strong);box-shadow:var(--shadow-modal);display:flex;flex-direction:column;animation:k-fade-up var(--dur-2) var(--ease-out)}
.drawer .dr-title{font-family:var(--font-display);text-transform:none;font-size:var(--display-xs);font-weight:var(--w-reg);letter-spacing:var(--track-display);line-height:var(--lh-display)}

/* ── Toast: glass pill (core.js toast(); tone classes ok/err/warn/info) ── */
#toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(calc(-50% * var(--dir,1))) translateY(80px);opacity:0;display:inline-flex;align-items:center;gap:10px;min-height:48px;max-width:min(420px,calc(100vw - 32px));padding:10px 16px;border-radius:var(--radius-pill);background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border:1px solid var(--line-strong);box-shadow:var(--shadow-3);color:var(--text-1);font-size:var(--text-sm);font-weight:var(--w-med);z-index:200;transition:transform var(--dur-3) var(--ease-spring),opacity var(--dur-2) var(--ease-out)}
[dir="rtl"] #toast{transform:translateX(50%) translateY(80px)}
#toast.show{transform:translateX(calc(-50% * var(--dir,1))) translateY(0);opacity:1}
[dir="rtl"] #toast.show{transform:translateX(50%) translateY(0)}
#toast .ic{font-size:18px;stroke-width:2.25;flex:none}
#toast.ok .ic{color:var(--ok)}#toast.err .ic,#toast.danger .ic{color:var(--danger)}#toast.warn .ic{color:var(--warn)}#toast.info .ic{color:var(--info)}
#toast.err,#toast.ok{border-inline-start:1px solid var(--line-strong)}
#toast .t-act{color:var(--accent-text);font-weight:var(--w-semi);font-size:var(--text-sm);padding:4px 6px}
#toast .t-x{display:flex;color:var(--text-3);padding:4px}
.toast{display:inline-flex;align-items:center;gap:10px;min-height:48px;max-width:420px;padding:10px 14px 10px 16px;border-radius:var(--radius-pill);background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border:1px solid var(--line-strong);box-shadow:var(--shadow-3);color:var(--text-1);font-size:var(--text-sm);font-weight:var(--w-med);animation:k1-rise var(--dur-3) var(--ease-spring) both}
.toast .ic{font-size:18px;stroke-width:2.25}
.toast.ok .ic{color:var(--ok)}.toast.danger .ic{color:var(--danger)}.toast.warn .ic{color:var(--warn)}.toast.info .ic{color:var(--info)}
.toast .t-msg{flex:1}

/* ── Tooltip: data-tip on any element; inverts per mode ── */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:40;padding:6px 10px;border-radius:var(--radius-sm);background:var(--text-1);color:var(--bg);font-size:var(--text-xs);font-weight:var(--w-med);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-1) var(--ease-out);box-shadow:var(--shadow-2)}
[data-tip][data-tip-side="right"]::after{bottom:auto;left:calc(100% + 8px);top:50%;transform:translateY(-50%)}
[data-tip][data-tip-side="bottom"]::after{bottom:auto;top:calc(100% + 8px)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1}
@media (hover:none){[data-tip]::after{display:none}}

/* ── EmptyState: one serif line, one sentence, one action ── */
.emptystate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 24px}
.emptystate.compact{padding:24px 16px}
.emptystate .es-ic{width:44px;height:44px;border-radius:50%;background:var(--surface-2);border:none;color:var(--text-3);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.emptystate .es-ic .ic{font-size:20px}
.emptystate .es-ttl{font-family:var(--font-display);text-transform:none;font-size:var(--display-sm);font-weight:var(--w-reg);letter-spacing:var(--track-display);line-height:var(--lh-display);color:var(--text-1)}
.emptystate.compact .es-ttl{font-size:var(--display-xs)}
.emptystate .es-desc{max-width:360px;font-size:var(--text-sm);color:var(--text-2);line-height:var(--lh-body);text-wrap:pretty}
.emptystate .es-act{margin-top:10px}

/* ── Skeleton ── */
.skel{display:block;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-3) 50%,var(--surface-1) 75%);background-size:200% 100%;animation:k1-shimmer 1.6s linear infinite}
.skel.circle{border-radius:50%}
.skel.row{height:56px;display:flex;align-items:center;gap:12px;background:none;animation:none;border:none}
.skel.row::before{content:'';width:36px;height:36px;border-radius:50%;flex:none;background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-3) 50%,var(--surface-1) 75%);background-size:200% 100%;animation:k1-shimmer 1.6s linear infinite}
.skel.row::after{content:'';flex:1;height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-3) 50%,var(--surface-1) 75%);background-size:200% 100%;animation:k1-shimmer 1.6s linear infinite}
.skel.card{height:auto;padding:var(--card-pad);border-radius:var(--radius-lg);border:1px solid var(--line);background:none;animation:none;display:flex;flex-direction:column;gap:12px}
.skel.card>span{display:block;height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-3) 50%,var(--surface-1) 75%);background-size:200% 100%;animation:k1-shimmer 1.6s linear infinite}
.skel.stat{height:64px;border-inline-start:none}
.skel+.skel{margin-top:10px}

/* ── ProgressRing ── */
.ring{position:relative;display:inline-flex;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring .track{fill:none;stroke:var(--ring-track)}
.ring .fill{fill:none;stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset var(--dur-4) var(--ease-out);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 45%,transparent))}
.ring .fill.ok{stroke:var(--ok)}.ring .fill.warn{stroke:var(--warn)}.ring .fill.danger{stroke:var(--danger)}
.ring .inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.ring.sweep .fill{animation:k1-ring var(--dur-4) var(--ease-out) both}

/* ── Module (dashboard widget) — .card + span ── */
.module{display:flex;flex-direction:column;gap:12px;grid-column:span var(--span,4);margin-bottom:0}
.module.editing{outline:1px dashed var(--accent-line);outline-offset:4px;padding-top:44px}
.module .m-head{display:flex;align-items:flex-start;gap:8px;min-height:20px}
.module .m-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.module .m-eb{font-size:var(--text-2xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-3);line-height:1.2}
.module.featured .m-eb{color:var(--accent-text)}
.module h3{font-family:var(--font-display);font-size:var(--display-xs);line-height:var(--lh-display);letter-spacing:var(--track-display);font-weight:var(--w-reg);text-transform:none;margin:0;color:var(--text-1);text-wrap:balance}
.module h3 i,.module h3 em{color:var(--accent-text)}
.module .m-tools{display:flex;gap:2px;margin:-8px -8px 0 0}
.module .m-grip{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:grab;touch-action:none}
.module .m-grip:active{cursor:grabbing}
.module .m-move{position:absolute;top:10px;inset-inline-start:12px;display:flex;gap:2px}
.module .m-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.module.ghost{opacity:.35}
.module.drop-before{box-shadow:inset 3px 0 0 var(--accent)}
.module-add{grid-column:span var(--span,4);min-height:140px;border-radius:var(--radius-lg);border:1px dashed var(--line-strong);background:transparent;color:var(--text-3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:var(--text-sm);font-weight:var(--w-med)}
.module-add:hover{background:var(--surface-1);color:var(--text-1)}
.module-add .ic{font-size:22px}
.module-add:disabled{opacity:.4}

/* ── EventCard ── */
.evcard{display:flex;align-items:stretch;gap:16px;padding:18px;border-radius:var(--radius-lg);background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--edge-highlight),var(--shadow-1);min-width:0;cursor:pointer;text-align:start;width:100%;color:var(--text-1);
  transition:background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.evcard.compact{padding:14px}
.evcard:hover{background:var(--surface-2)}
.evcard:active{transform:scale(.995)}
.evcard:focus-visible{box-shadow:var(--edge-highlight),var(--shadow-1),var(--focus-ring)}
.evcard .date{width:56px;flex:none;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-1)}
.evcard.compact .date{width:48px}
.evcard.going .date{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text)}
.evcard .date .dd{font-size:10px;font-weight:var(--w-semi);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.evcard .date .dn{font-family:var(--font-body);font-size:24px;font-weight:var(--w-semi);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.evcard.compact .date .dn{font-size:20px}
.evcard .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center}
.evcard .tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.evcard .ttl,.evcard .title-row .ttl{font-size:var(--text-md);font-weight:var(--w-semi);line-height:var(--lh-tight);letter-spacing:-.01em;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evcard.compact .ttl{font-size:var(--text-base)}
.evcard .meta{display:flex;align-items:center;gap:12px;font-size:var(--text-sm);color:var(--text-2);flex-wrap:wrap;min-width:0}
.evcard .meta span{display:inline-flex;align-items:center;gap:4px;min-width:0}
.evcard .meta span>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evcard .meta .ic{font-size:14px}
.evcard .side{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;flex:none}
.evcard .spots{font-size:var(--text-xs);color:var(--text-2);font-variant-numeric:tabular-nums}
.evcard .spots.full{color:var(--text-3)}
.evcard .chev{align-self:center;color:var(--text-3);display:flex}
.evcard .chev .ic{font-size:18px;transform:scaleX(var(--dir,1))}

/* ── Timer (live check-in card) ── */
.timer{display:flex;flex-direction:column;gap:20px;padding:var(--card-pad-lg)}
.timer .t-top{display:flex;align-items:center;gap:16px}
.timer .t-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.timer .t-eb{font-size:var(--text-2xs);font-weight:var(--w-semi);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-3);line-height:1.2}
.timer.running .t-eb{color:var(--accent-text)}
.timer .t-val{font-family:var(--font-body);font-weight:var(--w-semi);font-size:var(--stat-lg);letter-spacing:var(--track-stat);line-height:1;font-variant-numeric:tabular-nums;color:var(--text-1)}
.timer .t-meta{font-size:var(--text-sm);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timer .t-ico{display:flex;color:var(--text-3)}.timer.running .t-ico{color:var(--accent-text)}.timer.done .t-ico{color:var(--ok)}
.timer .t-ico .ic{font-size:24px}.timer.done .t-ico .ic{font-size:28px;stroke-width:2.5}
.timer .t-actions{display:flex;gap:8px}

/* ── legacy volunteer/portal chrome restyled to DS values ── */
.tabbar{background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-top:1px solid var(--line)}
.tabbar .tab{color:var(--text-3)}
.tabbar .tab.active{color:var(--accent-text)}
.tabbar .tab.active::after{background:var(--accent)}
.tabbar .tab-action{border-radius:50%;background:var(--accent);color:var(--text-on-accent);box-shadow:var(--accent-glow)}
.tab-badge{box-shadow:0 0 0 2px var(--bg)}
@keyframes k-breathe{0%,100%{box-shadow:var(--accent-glow)}50%{box-shadow:var(--accent-glow),0 0 22px color-mix(in srgb,var(--accent) 42%,transparent)}}
.sidebar{background:var(--bg-deep);color:var(--text-1);border-inline-end:1px solid var(--line)}
.sidebar .sb-head{border-bottom-color:var(--line)}
.sidebar .sb-name{font-weight:var(--w-reg);text-transform:none}
.snav button{color:var(--text-2);border-radius:var(--radius-md);height:44px}
.snav button:hover{background:var(--surface-1);color:var(--text-1)}
.snav button.active{background:var(--accent-soft);color:var(--accent-text);box-shadow:none;position:relative}
.snav button.active::before{content:'';position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--accent)}
[dir="rtl"] .snav button.active{box-shadow:none}
.snav button.active .material-symbols-rounded,.snav button.active .ic{color:var(--accent-text)}
.snav .nav-badge{background:var(--surface-3);color:var(--text-1)}
.sidebar .sb-foot{border-top-color:var(--line)}
.topstrip{background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--line)}
.greet{background:var(--bg-deep)}
.chip.shell{background:var(--surface-2);border:1px solid var(--line);color:var(--accent-text);height:28px;padding:0 12px;font-size:var(--text-sm)}
.lang-toggle{background:var(--surface-1);border:1px solid var(--line)}
.lang-toggle button.on{background:var(--surface-3);color:var(--text-1);box-shadow:var(--shadow-2)}
.quick button{background:var(--surface-1);border-color:var(--line);color:var(--text-1);border-radius:var(--radius-lg)}
.quick button.hot{background:var(--accent);color:var(--text-on-accent)}
.rowcard,.inboxcard,.orgcard,.pcard{background:var(--surface-1);border-color:var(--line);border-radius:var(--radius-lg)}
.pcard .pc-head{border-bottom-color:var(--line)}
.inboxcard.approval{background:var(--accent-soft);border-color:var(--accent-line)}
.attn{background:var(--accent-soft);border-color:var(--accent-line);color:var(--text-1);border-radius:var(--radius-md)}
.card,.stat,.evcard,.rowcard,.inboxcard,.orgcard,.pcard,.quick button,.kb-card{box-shadow:var(--edge-highlight),var(--shadow-1)}
@media (hover:hover){.evcard:hover,.orgcard:hover,.inboxcard:hover,.kb-card:hover:not(.kb-ghost),.quick button:hover{transform:translateY(-2px);box-shadow:var(--edge-highlight),var(--shadow-2)}}
.sticky-cta{background:linear-gradient(to top,var(--bg) 70%,transparent)}
.dateblock .db-mon{background:var(--accent);color:var(--text-on-accent)}
.capmeter .cap-bar{background:var(--ring-track)}
.kb-col{background:var(--bg-deep);border-color:var(--line)}
.kb-card{background:var(--surface-1);border-color:var(--line)}
.ptr{background:var(--surface-2);color:var(--accent-text)}

/* ══════════════════════════════════════════════════════════════════════════
   M3 · VOLUNTEER APP LAYOUT — the shell, the sign-in split, the dashboard
   grid and the screens, per ui_kits/volunteer-web + volunteer-mobile.
   The rail and the bottom bar are BOTH rendered every time; exactly one is
   shown at a given width, so a resize never strands the user without nav.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── shell: rail (desktop) ↔ bottom bar (mobile) ── */
#root.k1-app{display:flex;min-height:100dvh;height:100dvh;background:var(--bg);color:var(--text-1)}
#root.k1-app .k1-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#root.k1-app .app-main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;overscroll-behavior-y:contain;padding-bottom:8px}
#root.k1-app .rail{display:none}
#root.k1-app .bottombar{position:sticky;bottom:0;flex:none}
@media (min-width:900px){
  #root.k1-app .rail{display:flex}
  #root.k1-app .bottombar{display:none}
}
/* the screens themselves: one column, page gutter, capped for readability */
.k1-app .k1-page{max-width:var(--w-content);width:100%;margin:0 auto;padding:0 var(--gutter) 40px;display:flex;flex-direction:column;gap:20px;animation:k1-rise var(--dur-3) var(--ease-out) both}
.k1-app .k1-page.narrow{max-width:var(--w-narrow)}
@media (max-width:899px){
  .k1-app .k1-page{padding-bottom:24px;gap:16px}
}

/* ── sign-in: editorial half + credential card; hero collapses on a phone ── */
.gate-split{display:grid;grid-template-columns:1.1fr 1fr;min-height:100dvh;background:var(--bg);color:var(--text-1)}
.gate-hero{position:relative;background:var(--bg-deep);padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;overflow:hidden}
.gate-h1{font-size:clamp(40px,4.6vw,76px);text-wrap:balance;margin:0}
.gate-h1 i{font-style:italic;color:var(--accent)}
.gate-sub{font-size:var(--text-md);color:var(--text-2);max-width:44ch;text-wrap:pretty;line-height:var(--lh-body)}
.gate-form{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,64px);position:relative}
.gate-theme{position:absolute;top:24px;inset-inline-end:24px;z-index:1}
.gate-card{width:100%;max-width:440px;display:flex;flex-direction:column;gap:20px;padding:36px;border-radius:var(--radius-xl);margin-bottom:0}
.gate-card .field{gap:6px}
.gate-card .err{text-align:center}
@media (max-width:900px){
  .gate-split{grid-template-columns:1fr}
  .gate-hero{display:none}
  .gate-form{padding:clamp(40px,10vh,88px) 16px calc(24px + env(safe-area-inset-bottom,0px));align-items:flex-start}
  .gate-card{padding:24px;max-width:460px;margin:0 auto}
  .gate-theme{top:12px;inset-inline-end:12px}
}

/* ── dashboard ── */
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap-module);align-items:start}
.dash-grid>*{min-width:0}
@media (max-width:1100px){.dash-grid{grid-template-columns:repeat(6,1fr)}.dash-grid>.module,.dash-grid>.module-add{grid-column:span min(var(--span,4),6)}}
@media (max-width:760px){.dash-grid{grid-template-columns:1fr;gap:12px}.dash-grid>.module,.dash-grid>.module-add{grid-column:auto}}
.dash-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dash-bar .k1-eyebrow{margin-inline-end:8px}
.module .next-when{font-family:var(--font-body);font-weight:var(--w-semi);font-size:var(--stat-md);letter-spacing:var(--track-stat);line-height:1;font-variant-numeric:tabular-nums}
.mini-row{display:flex;align-items:center;gap:12px;padding:10px 0;min-width:0}
.mini-row+.mini-row{border-top:1px solid var(--line)}
.mini-row .mr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mini-row .mr-ttl{font-weight:var(--w-med);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-row .mr-sub{font-size:var(--text-xs);color:var(--text-3)}
.mini-row .mr-num{font-weight:var(--w-semi);font-variant-numeric:tabular-nums;font-size:var(--text-sm);flex:none}

/* ── hours screen ── */
.hours-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.hours-grid{grid-template-columns:1fr}}
.org-bar{display:flex;align-items:center;gap:12px}
.org-bar .track{flex:1;height:6px;border-radius:3px;background:var(--ring-track);overflow:hidden}
.org-bar .track>span{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width var(--dur-4) var(--ease-out)}
.org-bar .val{font-weight:var(--w-semi);font-variant-numeric:tabular-nums;font-size:var(--text-sm);width:56px;text-align:end}
.qr-box{display:flex;align-items:center;gap:16px}
.qr-box .qr-ic{width:64px;height:64px;flex:none;border-radius:var(--radius-md);border:2px dashed var(--accent-line);display:flex;align-items:center;justify-content:center;color:var(--accent-text)}
.qr-box .qr-ic .ic{font-size:28px}

/* ── event detail: the canvas takes the org's accent ── */
.ev-detail{background:var(--bg);min-height:100%;color:var(--text-1);animation:k1-fade var(--dur-3) var(--ease-out) both}
.ev-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
@media (max-width:1000px){.ev-grid{grid-template-columns:1fr}}
.ev-map{height:200px;position:relative;overflow:hidden;padding:0;border:1px solid var(--line)}
.ev-map .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:.6}
.ev-map .scrim{position:absolute;inset:0;background:linear-gradient(to top,var(--bg-deep) 0%,transparent 60%)}
.ev-map .pin{position:absolute;inset-inline-start:52%;top:42%;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:var(--accent-glow)}
.ev-map .foot{position:absolute;inset-inline:20px;bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ev-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}
@media (max-width:1000px){.ev-side{position:static}}
/* mobile: the sign-up action is a fixed glass bar, thumb-reachable */
@media (max-width:899px){
  .ev-side{position:fixed;inset-inline:0;bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom,0px));z-index:20;padding:10px var(--gutter);background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-top:1px solid var(--line);gap:8px}
  .ev-side>.card:not(.rsvp){display:none}
  .ev-side .rsvp{margin:0;padding:0;border-radius:0;background:transparent;border:none;box-shadow:none}
  .ev-side .rsvp .ring{display:none}
  .ev-detail .k1-page{padding-bottom:170px}
}

/* ── messages ── */
.msg-row{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:start;padding:14px;border-radius:var(--radius-lg);background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--edge-highlight),var(--shadow-1);color:var(--text-1);transition:background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.msg-row:hover{background:var(--surface-2)}
.msg-row.unread{border-color:var(--accent-line)}
.msg-row.approval{background:var(--accent-soft);border-color:var(--accent-line)}
.msg-row .mg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.msg-row .mg-head{display:flex;align-items:center;gap:8px}
.msg-row .mg-ttl{flex:1;min-width:0;font-weight:var(--w-med);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-row.unread .mg-ttl{font-weight:var(--w-semi)}
.msg-row .mg-when{font-size:var(--text-xs);color:var(--text-3);flex:none}
.msg-row .mg-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.msg-row .mg-text{font-size:var(--text-sm);color:var(--text-2);line-height:var(--lh-snug);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg-row .mg-text.open{-webkit-line-clamp:unset;display:block}

/* ── profile ── */
.prof-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.prof-grid{grid-template-columns:1fr}}
.prof-id{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:28px}
.prof-stats{display:flex;gap:28px;margin-top:8px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.setting-row+.setting-row{border-top:1px solid var(--line)}
.setting-row .sr-label{font-size:var(--text-base);color:var(--text-1)}