/* ─────────────────────────────────────────────────────────────
   LWMC Claims — design tokens
   Calm, confident, precise. System type, one ink hero, one accent,
   materials for chrome, springs for anything you can touch.
   ───────────────────────────────────────────────────────────── */
/* Living Waters palette: warm linen and paper for calm reading,
   church navy for actions, logo sky blue + cyan saved for moments that matter. */
:root {
  color-scheme: light;
  --bg: #f5f0e6;          /* linen */
  --surface: #fffcf6;     /* paper */
  --surface-2: #f9f4ea;
  --label: #2a2621;       /* warm ink, not black */
  --label-2: rgba(66, 58, 48, 0.68);
  --label-3: rgba(66, 58, 48, 0.4);
  --separator: rgba(90, 74, 52, 0.14);
  --fill: rgba(120, 100, 70, 0.08);
  --fill-2: rgba(120, 100, 70, 0.16);

  --accent: #27598a;      /* church navy: primary actions */
  --accent-soft: rgba(39, 89, 138, 0.1);
  --on-accent: #ffffff;
  --sky: #4480d0;         /* logo blue */
  --pop: #29b5de;         /* logo cyan: highlights, live progress */
  --pop-soft: rgba(41, 181, 222, 0.14);
  --attention: #d9623b;   /* terracotta: badges and things needing you */
  --toast-action: #8fd3f0;
  --sand: #d8c7a5;
  --gold: var(--sand);

  --green: #3f7d4e;   --green-soft: rgba(79, 138, 91, 0.14);
  --orange: #a86613;  --orange-soft: rgba(214, 150, 50, 0.16);
  --red: #b8432c;     --red-soft: rgba(196, 70, 47, 0.12);
  --blue: #2f6db8;    --blue-soft: rgba(68, 128, 208, 0.13);

  --ink-1: #173a5e;
  --ink-2: #27598a;

  --material: rgba(250, 246, 238, 0.74);
  --material-edge: rgba(255, 255, 255, 0.6);
  --scrim: rgba(35, 28, 18, 0.3);

  --shadow-sm: 0 1px 2px rgba(60, 45, 20, 0.06), 0 1px 1px rgba(60, 45, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(60, 45, 20, 0.08), 0 2px 6px rgba(60, 45, 20, 0.05);
  --shadow-lg: 0 24px 64px rgba(40, 30, 15, 0.16), 0 6px 18px rgba(40, 30, 15, 0.07);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --gutter: 16px;
  --tabbar-h: 64px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15130f; --surface: #211e19; --surface-2: #2a2620;
    --label: #f3ede2; --label-2: rgba(243, 237, 226, 0.64); --label-3: rgba(243, 237, 226, 0.34);
    --separator: rgba(243, 237, 226, 0.12); --fill: rgba(243, 237, 226, 0.08); --fill-2: rgba(243, 237, 226, 0.15);
    --accent: #7fb0e6; --accent-soft: rgba(127, 176, 230, 0.16); --on-accent: #10233a;
    --sky: #6f9fe0; --pop: #3cc3ea; --pop-soft: rgba(60, 195, 234, 0.16); --attention: #ef7a52; --toast-action: #1c5a8c;
    --green: #7cc28c; --orange: #e5a24a; --red: #ee7d62; --blue: #7fb0e6;
    --ink-1: #10263f; --ink-2: #1f4a74;
    --material: rgba(33, 30, 25, 0.72); --material-edge: rgba(255, 255, 255, 0.06); --scrim: rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15130f; --surface: #211e19; --surface-2: #2a2620;
  --label: #f3ede2; --label-2: rgba(243, 237, 226, 0.64); --label-3: rgba(243, 237, 226, 0.34);
  --separator: rgba(243, 237, 226, 0.12); --fill: rgba(243, 237, 226, 0.08); --fill-2: rgba(243, 237, 226, 0.15);
  --accent: #7fb0e6; --accent-soft: rgba(127, 176, 230, 0.16); --on-accent: #10233a;
  --sky: #6f9fe0; --pop: #3cc3ea; --pop-soft: rgba(60, 195, 234, 0.16); --attention: #ef7a52; --toast-action: #1c5a8c;
  --green: #7cc28c; --orange: #e5a24a; --red: #ee7d62; --blue: #7fb0e6;
  --ink-1: #10263f; --ink-2: #1f4a74;
  --material: rgba(33, 30, 25, 0.72); --material-edge: rgba(255, 255, 255, 0.06); --scrim: rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* ─── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font: 400 1rem/1.47 var(--font);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
svg.i { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ─── Shell ────────────────────────────────────────────────── */
.app { min-height: 100dvh; }
.main {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) var(--gutter) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 32px);
}

.sidebar { display: none; }
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 6px 8px env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: start;
  background: var(--material);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0.5px 0 var(--separator);
}
.tab {
  display: grid; justify-items: center; gap: 2px; padding: 6px 0;
  color: var(--label-3); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em;
  position: relative;
  transition: color 160ms ease;
}
.tab svg.i { width: 26px; height: 26px; }
.tab[aria-current="page"] { color: var(--accent); }
.tab:active svg { transform: scale(0.88); transition: transform 90ms ease-out; }
.tab .badge {
  position: absolute; top: 2px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--attention); color: #fff; font-size: 0.68rem; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.tab-new { align-self: center; }
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--pop), var(--sky));
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--sky) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 120ms ease-out;
}
.fab svg.i { width: 26px; height: 26px; stroke-width: 2.2; }
.fab:active { transform: scale(0.92); }

@media (min-width: 900px) {
  .tabbar { display: none; }
  .app { display: grid; grid-template-columns: 264px 1fr; }
  .sidebar {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100dvh; padding: 24px 14px;
    background: var(--material);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    box-shadow: inset -0.5px 0 0 var(--separator);
  }
  .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; font-weight: 700; letter-spacing: -0.02em; }
  .brand-mark {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: linear-gradient(150deg, var(--ink-2), var(--ink-1)); color: var(--gold);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .brand small { display: block; font-weight: 500; color: var(--label-2); font-size: 0.75rem; letter-spacing: 0; }
  .side-link {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
    color: var(--label); font-weight: 500; text-align: left;
    transition: background 140ms ease;
  }
  .side-link:hover { background: var(--fill); }
  .side-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .side-link .badge { margin-left: auto; background: var(--attention); color: #fff; font-size: 0.72rem; border-radius: 9px; padding: 1px 7px; }
  .side-new { margin-top: 14px; justify-content: center; }
  .side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; }
  .main { padding: 40px 40px 64px; max-width: 980px; }
}

/* ─── Type ─────────────────────────────────────────────────── */
.eyebrow { color: var(--label-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.large-title { font-family: var(--serif); font-optical-sizing: auto; font-size: 2.25rem; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; margin: 2px 0 18px; }
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 30px 0 10px;
}
.section-title .link { font-size: 0.9375rem; font-weight: 500; color: var(--accent); letter-spacing: -0.01em; }
.subtle { color: var(--label-2); }
.footnote { font-size: 0.8125rem; color: var(--label-2); letter-spacing: -0.004em; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 600; font-size: 0.875rem; letter-spacing: 0;
  background: linear-gradient(150deg, #efe3cc, var(--sand)); color: #4a3a20;
}
.avatar.sm { width: 30px; height: 30px; font-size: 0.75rem; }

/* ─── Hero (the one ink surface) ───────────────────────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); padding: 22px 22px 20px; color: #fff;
  background: linear-gradient(155deg, var(--ink-2) 0%, var(--ink-1) 62%);
  box-shadow: var(--shadow-lg);
}
.hero::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(circle, rgba(41, 181, 222, 0.42), transparent 62%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.hero-label { font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.66); }
.hero-amount { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: 6px 0 18px; }
.hero-amount .cents { font-size: 1.5rem; color: rgba(255,255,255,0.6); letter-spacing: -0.02em; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero-stat {
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.14);
}
.hero-stat b { display: block; font-size: 1.125rem; letter-spacing: -0.02em; }
.hero-stat span { font-size: 0.75rem; color: rgba(255,255,255,0.62); }

/* ─── Cards and grouped lists ──────────────────────────────── */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.list { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; text-align: left; position: relative;
  transition: background 120ms ease;
}
.row + .row::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 0.5px; background: var(--separator); }
button.row:active { background: var(--fill); transition: none; }
@media (hover: hover) { button.row:hover { background: var(--surface-2); } }
.row-icon {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff;
}
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 0.8125rem; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-end { text-align: right; flex: none; }
.row-amount { font-weight: 600; letter-spacing: -0.015em; }
.chev { color: var(--label-3); width: 16px; height: 16px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0;
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.progress { color: var(--blue); background: var(--blue-soft); }
.pill.paid { color: var(--green); background: var(--green-soft); }
.pill.returned { color: var(--orange); background: var(--orange-soft); }
.pill.rejected { color: var(--red); background: var(--red-soft); }

/* Attention callout */
.callout {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--orange-soft); color: var(--label); text-align: left; width: 100%;
}
.callout .i { color: var(--orange); margin-top: 2px; }
.callout.red { background: var(--red-soft); } .callout.red .i { color: var(--red); }
.callout.blue { background: var(--blue-soft); } .callout.blue .i { color: var(--blue); }
.callout b { display: block; letter-spacing: -0.015em; }
.callout p { margin: 2px 0 0; font-size: 0.875rem; color: var(--label-2); }

/* Mini progress (5 stages) */
.stages { display: flex; gap: 3px; margin-top: 7px; }
.stages i { height: 4px; flex: 1; border-radius: 2px; background: var(--fill-2); }
.stages i.done { background: var(--accent); }
.stages i.now { background: linear-gradient(90deg, var(--pop) 0 50%, var(--fill-2) 50%); background-size: 200% 100%; animation: now 1.6s ease-in-out infinite alternate; }
@keyframes now { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ─── Buttons & controls ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border-radius: 14px;
  font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em;
  background: var(--accent); color: var(--on-accent);
  transition: transform 110ms ease-out, opacity 160ms ease, background 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.35; pointer-events: none; }
.btn.block { width: 100%; }
.btn.tinted { background: var(--accent-soft); color: var(--accent); }
.btn.plain { background: var(--fill); color: var(--label); }
.btn.green { background: var(--green); color: #fff; }
.btn.small { height: 36px; padding: 0 14px; font-size: 0.9375rem; border-radius: 10px; }

.segmented {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 2px; border-radius: 10px; background: var(--fill);
}
.segmented button { position: relative; z-index: 1; height: 32px; font-size: 0.8125rem; font-weight: 600; border-radius: 8px; color: var(--label); }
.segmented .thumb {
  position: absolute; top: 2px; bottom: 2px; left: 2px; border-radius: 8px;
  background: var(--surface); box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
  will-change: transform;
}

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start;
  height: 36px; padding: 0 14px; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow-sm);
  font-weight: 600; font-size: 0.875rem; white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, transform 110ms ease-out;
}
.chip:active { transform: scale(0.95); }
.chip[aria-pressed="true"] { background: var(--label); color: var(--bg); }

.field { display: grid; gap: 6px; }
.field > span { font-size: 0.8125rem; font-weight: 600; color: var(--label-2); padding-left: 4px; }
.input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 0;
  background: var(--fill); font-size: 1rem; /* ≥16px so iOS does not zoom */
  transition: box-shadow 160ms ease, background 160ms ease;
}
textarea.input { height: 84px; padding: 12px 14px; resize: none; line-height: 1.4; }
.input:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft); }

.toggle {
  --w: 51px; --h: 31px;
  position: relative; width: var(--w); height: var(--h); flex: none; border-radius: 99px;
  background: var(--fill-2); transition: background 220ms ease;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16);
  transition: transform 320ms cubic-bezier(0.3, 1.3, 0.5, 1);
}
.toggle[aria-checked="true"] { background: var(--sky); }
.toggle[aria-checked="true"]::after { transform: translateX(20px); }

/* ─── Sheet (modal task) ───────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; pointer-events: none;
}
.scrim.on { pointer-events: auto; }
.sheet {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  height: calc(100dvh - env(safe-area-inset-top) - 14px);
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: 14px 14px 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(110%); will-change: transform;
  visibility: hidden;
}
.sheet.open { visibility: visible; }
.app.pushed { transform-origin: 50% 0; }
@media (min-width: 900px) {
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: 560px; height: min(820px, calc(100dvh - 64px));
    border-radius: var(--r-xl); margin: 0 0 0 -280px;
    translate: 0 -50%;
  }
}
.sheet-head {
  flex: none; padding: 8px 16px 10px; position: relative; touch-action: none; cursor: grab;
  background: var(--material);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: inherit;
}
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--fill-2); margin: 0 auto 8px; }
.sheet-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 36px; }
.sheet-bar h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; text-align: center; }
.sheet-bar .left { justify-self: start; } .sheet-bar .right { justify-self: end; }
.bar-btn { color: var(--accent); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.02em; padding: 6px 2px; }
.bar-btn:active { opacity: 0.4; }
.bar-btn.gone { visibility: hidden; pointer-events: none; }
.steps { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.steps i { width: 6px; height: 6px; border-radius: 3px; background: var(--fill-2); transition: width 380ms cubic-bezier(0.2, 0.9, 0.2, 1), background 240ms ease; }
.steps i.on { width: 20px; background: var(--accent); }
.steps i.done { background: var(--accent); }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) 24px; position: relative; }
.sheet-foot {
  flex: none; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--material);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0.5px 0 var(--separator);
}
.sheet-foot .hint { text-align: center; margin: 0 0 10px; font-size: 0.8125rem; color: var(--label-2); min-height: 1em; }
.sheet-foot .hint.bad { color: var(--red); font-weight: 600; }
.step { display: grid; gap: 16px; animation: step-in 420ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.step.back { animation-name: step-in-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-28px); } }
.step h3 { margin: 10px 0 0; font-family: var(--serif); font-weight: 600; font-size: 1.75rem; line-height: 1.12; letter-spacing: -0.015em; }
.step h3 + p { margin: -8px 0 0; }

/* Receipt capture */
.capture {
  display: grid; place-items: center; gap: 10px; text-align: center;
  padding: 34px 20px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
  border: 1.5px dashed var(--fill-2);
  transition: border-color 160ms ease, transform 120ms ease-out, background 160ms ease;
}
.capture.drag { border-color: var(--accent); background: var(--accent-soft); transform: scale(0.985); }
.capture .ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.capture .ring svg { width: 30px; height: 30px; }
.capture-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.receipt-preview { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
.receipt-preview img { display: block; width: 100%; max-height: 300px; object-fit: contain; background: #111; }
.scanline {
  position: absolute; left: 0; right: 0; height: 90px; top: -90px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent) 85%, var(--accent));
  mix-blend-mode: screen; animation: scan 1.3s cubic-bezier(0.45, 0, 0.55, 1) 2;
}
@keyframes scan { to { top: 100%; } }
.scan-status { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 0.875rem; font-weight: 600; }
.scan-status .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--fill-2); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.scan-status.done { color: var(--green); }

/* Paper receipt mock */
.paper {
  background: #fdfcf8; color: #2b2b2b; font: 500 11px/1.5 var(--mono);
  padding: 18px 16px 22px; width: 190px; margin: 18px auto;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  -webkit-mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 0 / 12px 100% repeat-x;
          mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 0 / 12px 100% repeat-x;
  transform: rotate(-1.5deg);
}
.paper .c { text-align: center; font-weight: 700; }
.paper .r { display: flex; justify-content: space-between; }
.paper hr { border: 0; border-top: 1px dashed #bbb; margin: 8px 0; }
.thumb-paper { width: 44px; height: 56px; border-radius: 6px; flex: none; background: #fdfcf8; box-shadow: var(--shadow-sm), inset 0 0 0 0.5px rgba(0,0,0,0.1); position: relative; overflow: hidden; }
.thumb-paper::before { content: ""; position: absolute; inset: 8px 7px; background: repeating-linear-gradient(#c8c8c8 0 2px, transparent 2px 7px); }

/* Amount input */
.amount-field { text-align: center; padding: 18px 12px 12px; }
.amount-field label { font-size: 0.8125rem; font-weight: 600; color: var(--label-2); }
.amount-wrap { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.amount-wrap span { font-size: 1.75rem; font-weight: 600; color: var(--label-2); }
.amount-input {
  width: 7ch; border: 0; background: none; text-align: left; padding: 0;
  font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.amount-input:focus { outline: none; }
.amount-input::placeholder { color: var(--label-3); }

/* Allocation rows */
.alloc { display: grid; gap: 10px; padding: 14px 16px; }
.alloc + .alloc { border-top: 0.5px solid var(--separator); }
.alloc-top { display: flex; align-items: center; gap: 10px; }
.alloc-top .row-main { font-weight: 600; letter-spacing: -0.015em; }
.alloc-input { width: 112px; height: 38px; border-radius: 10px; border: 0; background: var(--fill); text-align: right; padding: 0 10px; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1rem; }
.alloc-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); background: var(--surface); }
.alloc.short .alloc-input { box-shadow: 0 0 0 2px var(--red); }
.funds { display: grid; gap: 5px; }
.funds-bar { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; display: flex; }
.funds-bar i { height: 100%; transition: width 420ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.funds-bar .spent { background: var(--label-3); }
.funds-bar .reserved { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.funds-bar .this { background: var(--accent); }
.funds-bar .over { background: var(--red); }
.funds-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--label-2); }
.alloc.short .funds-meta b { color: var(--red); }
.remaining { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 0.875rem; font-weight: 600; border-top: 0.5px solid var(--separator); background: var(--surface-2); }
.remaining.ok { color: var(--green); }

/* Option cards (payment method) */
.options { display: grid; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); text-align: left;
  background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1.5px transparent;
  transition: box-shadow 180ms ease, transform 110ms ease-out;
}
.option:active { transform: scale(0.985); }
.option[aria-checked="true"] { box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--accent); }
.option .radio { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fill-2); display: grid; place-items: center; transition: box-shadow 180ms ease; }
.option[aria-checked="true"] .radio { box-shadow: inset 0 0 0 7px var(--accent); }

/* Review / route */
.route { display: grid; gap: 0; padding: 6px 16px; }
.route-step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; position: relative; }
.route-step::before { content: ""; position: absolute; left: 13.5px; top: 36px; bottom: -10px; width: 1.5px; background: var(--separator); }
.route-step:last-child::before { display: none; }
.dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--label-2); font-size: 0.75rem; font-weight: 700; }
.dot svg { width: 16px; height: 16px; stroke-width: 2.4; }
.route-step.done .dot { background: var(--accent); color: #fff; }
.route-step.done::before { background: var(--accent); }
.route-step.now .dot { background: var(--pop-soft); color: var(--pop); box-shadow: 0 0 0 4px var(--pop-soft); }
.route-step.warn .dot { background: var(--orange-soft); color: var(--orange); }
.route-step b { display: block; letter-spacing: -0.015em; }
.route-step small { color: var(--label-2); font-size: 0.8125rem; }

.kv { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; font-size: 0.9375rem; }
.kv + .kv { border-top: 0.5px solid var(--separator); }
.kv span:first-child { color: var(--label-2); }
.kv span:last-child { font-weight: 600; text-align: right; }

/* Success */
.success { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 12px 12px; }
.success svg.check { width: 104px; height: 104px; }
.success .c1 { stroke: var(--green); stroke-width: 4; fill: var(--green-soft); stroke-dasharray: 302; stroke-dashoffset: 302; animation: draw 620ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.success .c2 { stroke: var(--green); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 360ms cubic-bezier(0.65, 0, 0.35, 1) 520ms forwards; }
.success .ref { font: 600 0.9375rem var(--mono); color: var(--label-2); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success h3 { font-family: var(--serif); font-weight: 600; font-size: 1.875rem; letter-spacing: -0.015em; margin: 8px 0 0; }
.success p { margin: 0; max-width: 34ch; }

/* ─── Approval deck ────────────────────────────────────────── */
.deck { position: relative; height: 468px; margin-top: 8px; }
.deck-card {
  position: absolute; inset: 0; padding: 20px; border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 14px;
  touch-action: pan-y; user-select: none; will-change: transform;
  transform-origin: 50% 110%;
}
.deck-card:not(.top) { pointer-events: none; }
.deck-card .stamp {
  position: absolute; top: 22px; padding: 6px 12px; border-radius: 10px; font-weight: 800; letter-spacing: 0.04em; font-size: 0.875rem;
  opacity: 0; border: 2.5px solid currentColor;
}
.stamp.approve { left: 22px; color: var(--green); transform: rotate(-10deg); }
.stamp.return { right: 22px; color: var(--orange); transform: rotate(10deg); }
.deck-head { display: flex; align-items: center; gap: 10px; }
.deck-amount { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.deck-lines { display: grid; gap: 6px; font-size: 0.875rem; }
.deck-lines div { display: flex; justify-content: space-between; }
.deck-lines span:first-child { color: var(--label-2); }
.deck-receipt { flex: 1; min-height: 0; border-radius: var(--r-md); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.deck-receipt .paper { transform: rotate(-1.5deg) scale(0.86); margin: 0; }
.deck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.deck-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px; color: var(--label-2); }
.deck-empty .ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); margin-bottom: 6px; }
.deck-empty .ring svg { width: 34px; height: 34px; stroke-width: 2.4; }
.deck-empty b { color: var(--label); font-size: 1.125rem; }
.warn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.warn-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; padding: 4px 9px; border-radius: 8px; background: var(--orange-soft); color: var(--orange); }
.warn-tag svg { width: 14px; height: 14px; }
@media (min-width: 900px) { .approvals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } }

/* ─── Budget ───────────────────────────────────────────────── */
.budget-top { display: grid; grid-template-columns: 124px 1fr; gap: 18px; align-items: center; padding: 18px; }
.ring-chart { width: 124px; height: 124px; position: relative; }
.ring-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-chart circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.ring-chart .track { stroke: var(--fill); }
.ring-chart .s { stroke: var(--label-3); transition: stroke-dasharray 700ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.ring-chart .r { stroke: var(--accent); transition: stroke-dasharray 700ms cubic-bezier(0.2, 0.9, 0.2, 1), stroke-dashoffset 700ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-center b { font-size: 1.375rem; letter-spacing: -0.03em; }
.ring-center span { font-size: 0.6875rem; color: var(--label-2); font-weight: 600; }
.legend { display: grid; gap: 8px; }
.legend div { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.line-row { padding: 14px 16px; display: grid; gap: 8px; }
.line-row + .line-row { border-top: 0.5px solid var(--separator); }
.line-row .top { display: flex; justify-content: space-between; gap: 12px; }
.line-row .top b { letter-spacing: -0.015em; }

/* ─── Toast ────────────────────────────────────────────────── */
.toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 16px; min-width: 260px; max-width: calc(100vw - 32px);
  background: color-mix(in srgb, var(--label) 88%, transparent); color: var(--bg);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg); font-weight: 600; font-size: 0.9375rem;
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none; visibility: hidden;
}
.toast button { margin-left: auto; color: var(--toast-action); font-weight: 700; padding: 6px 10px; }
@media (min-width: 900px) { .toast { bottom: 28px; left: calc(50% + 132px); } }

/* ─── Accessibility preferences ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .stages i.now { animation: none; background: var(--accent); opacity: 0.5; }
}
@media (prefers-reduced-transparency: reduce) {
  .tabbar, .sidebar, .sheet-head, .sheet-foot, .toast { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --separator: rgba(0,0,0,0.4); --label-2: rgba(0,0,0,0.78); }
  .card, .list, .option, .chip { box-shadow: inset 0 0 0 1px var(--separator); }
}

/* ─── Page + step transitions ──────────────────────────────── */
.page { animation: page-in 380ms cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
.step.still { animation: none; }
.route .dot svg.i { width: 16px; height: 16px; }
.remaining svg.i { width: 1em; height: 1em; vertical-align: -2px; }

/* ─── Brand + illustrations ────────────────────────────────── */
.brand-logo { display: block; height: 34px; width: auto; margin: 2px 8px 24px; }
.brand-logo.on-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo.on-light { display: none; } :root:not([data-theme="light"]) .brand-logo.on-dark { display: block; } }
.head-mark { width: 30px; height: 32px; object-fit: contain; }
.illo {
  width: 168px; height: 168px; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, #fffaf0, #f3e9d8 70%);
  box-shadow: inset 0 0 0 1px rgba(120, 100, 70, 0.08), 0 10px 30px rgba(60, 45, 20, 0.08);
}
.illo img { width: 128px; height: 128px; object-fit: contain; }
.empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 16px 24px; }
.empty b { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin-top: 10px; }
.empty span { color: var(--label-2); max-width: 30ch; }

/* ─── Welcome / sign-in ────────────────────────────────────── */
.welcome { position: fixed; inset: 0; z-index: 90; display: grid; background: #0e1e30; color: #fff; overflow: hidden; }
.welcome video, .welcome .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welcome .photo { background: center / cover no-repeat url(assets/gen/welcome-portrait-a.webp); }
@media (min-aspect-ratio: 1/1) { .welcome .photo { background-image: url(assets/gen/welcome-wide-a.webp); } }
.welcome::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 25, 45, 0.15) 0%, rgba(10, 25, 45, 0) 35%, rgba(10, 25, 45, 0.55) 72%, rgba(10, 25, 45, 0.82) 100%); }
.welcome-inner { position: relative; z-index: 1; align-self: end; padding: 24px 24px calc(28px + env(safe-area-inset-bottom)); display: grid; gap: 14px; max-width: 460px; }
@media (min-width: 900px) { .welcome-inner { align-self: center; margin-left: 7vw; padding: 36px; border-radius: 28px; background: rgba(12, 28, 48, 0.36); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3), 0 30px 80px rgba(0,0,0,0.3); } .welcome::after { background: linear-gradient(90deg, rgba(10,25,45,0.45), rgba(10,25,45,0) 60%); } }
.welcome-logo { width: min(250px, 70vw); height: auto; }
.welcome h1 { font-family: var(--serif); font-weight: 600; font-size: 2.125rem; line-height: 1.1; letter-spacing: -0.015em; margin: 10px 0 0; }
.welcome p { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 1.0625rem; }
.btn.google { background: #fff; color: #1f1f1f; margin-top: 8px; }
.btn.google svg { width: 20px; height: 20px; }
.welcome small { color: rgba(255, 255, 255, 0.62); font-size: 0.8125rem; }
.welcome.leaving { pointer-events: none; }

.adjusted { background: var(--blue-soft); }
.adjusted .i { color: var(--blue); }
.welcome[hidden] { display: none; }

/* ─── Round 2: friendlier home, search, viewer, activity ───── */
.head-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); color: var(--label);
  box-shadow: var(--shadow-sm); transition: transform 110ms ease-out;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn .dot-badge {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--attention); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.section-title .count { font-family: var(--font); font-size: 0.8125rem; font-weight: 600; color: var(--label-2); margin-left: 6px; }
.stack { display: grid; gap: 12px; }

/* Story card: one claim, told in plain words */
.story { width: 100%; text-align: left; padding: 16px; display: grid; gap: 14px; transition: transform 120ms ease-out, box-shadow 160ms ease; }
button.story:active { transform: scale(0.985); }
@media (hover: hover) { button.story:hover { box-shadow: var(--shadow-md); } }
.story-top { display: flex; align-items: center; gap: 12px; }
.story-top .row-amount { font-size: 1.0625rem; }
.story-now { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.story-now b { display: block; font-size: 0.9375rem; letter-spacing: -0.012em; }
.story-now small { color: var(--label-2); font-size: 0.8125rem; }
.live { position: relative; width: 10px; height: 10px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--pop); }
.live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--pop); opacity: 0; animation: live 2s ease-out infinite; }
@keyframes live { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }
.story.attention { box-shadow: var(--shadow-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--attention) 45%, transparent); }
.story-actions { display: flex; justify-content: flex-end; gap: 8px; }
.faces { display: flex; }
.faces .avatar { box-shadow: 0 0 0 2px var(--surface); }
.faces .avatar + .avatar { margin-left: -6px; }

/* Labelled progress track */
.track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.track div { display: grid; gap: 6px; }
.track i { height: 5px; border-radius: 3px; background: var(--fill-2); }
.track .done i { background: var(--accent); }
.track .now i { background: linear-gradient(90deg, var(--pop) 0 55%, var(--fill-2) 55%); }
.track span { font-size: 0.6875rem; font-weight: 600; color: var(--label-3); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track .done span { color: var(--label-2); }
.track .now span { color: var(--pop); }

/* Search */
.search { position: relative; margin: 14px 0 4px; }
.search .i { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--label-3); }
.search input { width: 100%; height: 42px; border: 0; border-radius: 12px; padding: 0 12px 0 40px; background: var(--fill); font-size: 1rem; }
.search input:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.list-head { font-size: 0.8125rem; font-weight: 600; color: var(--label-2); padding: 18px 4px 8px; }

/* Step dots + label */
.steps { display: grid; justify-items: center; gap: 6px; }
.steps .dots { display: flex; gap: 6px; }
.step-label { font-size: 0.75rem; font-weight: 600; color: var(--label-2); letter-spacing: 0; }

/* Compact receipt chip once scanned */
.receipt-chip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); animation: page-in 380ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.thumb-btn { position: relative; width: 52px; height: 64px; border-radius: 8px; overflow: hidden; flex: none; background: #fdfcf8; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.12); }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.thumb-btn .thumb-paper { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.thumb-btn .i { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; padding: 2px; border-radius: 5px; background: rgba(0,0,0,0.45); color: #fff; }
.fields-in { display: grid; gap: 16px; animation: page-in 460ms cubic-bezier(0.2, 0.9, 0.2, 1) 60ms both; }
.suggested { font-size: 0.75rem; font-weight: 600; color: var(--pop); margin-left: 6px; }
.receipt-open { cursor: zoom-in; }

/* Full-screen receipt viewer */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; touch-action: none; }
.lightbox .bg { position: absolute; inset: 0; background: rgba(10, 9, 7, 0.92); }
.lightbox .stage { position: relative; will-change: transform; transform-origin: 0 0; }
.lightbox img { display: block; max-width: 92vw; max-height: 82vh; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.lightbox .paper { transform: none; width: min(340px, 84vw); margin: 0; font-size: 13px; }
.lightbox .close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.14); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lightbox .tip { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.6); font-size: 0.8125rem; }

/* Activity feed */
.feed-row { display: flex; gap: 12px; padding: 14px 16px; position: relative; }
.feed-row + .feed-row::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 0.5px; background: var(--separator); }
.feed-row .row-icon { width: 32px; height: 32px; border-radius: 50%; }
.feed-row .row-icon svg { width: 16px; height: 16px; stroke-width: 2.2; }
.feed-row p { margin: 0; font-size: 0.9375rem; line-height: 1.35; }
.feed-row small { color: var(--label-2); font-size: 0.8125rem; }
.feed-row.unread p::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--pop); vertical-align: 1px; }

/* ─── Round 2 visuals: texture, depth, glass, motion ───────── */
/* Watercolour wash behind the top of every page (scrolls with content) */
.app { position: relative; isolation: isolate; }
.app::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 460px; pointer-events: none;
  background: url(assets/gen/wash-light.webp) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app::before { background-image: url(assets/gen/wash-navy.webp); opacity: 0.55; } }
:root[data-theme="dark"] .app::before { background-image: url(assets/gen/wash-navy.webp); opacity: 0.55; }
@media (min-width: 900px) { .app::before { left: 264px; height: 520px; } }

/* Editorial type */
.large-title { font-size: 2.5rem; }
.section-title { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.01em; }
.section-title .link { font-family: var(--font); }

/* Hero: navy watercolour + frosted glass stats */
.hero {
  background: linear-gradient(160deg, rgba(23, 58, 94, 0.25), rgba(12, 30, 52, 0.55)), url(assets/gen/wash-navy.webp) center / cover;
  padding: 24px 22px 20px;
}
.hero::before { background: radial-gradient(circle, rgba(60, 200, 240, 0.35), transparent 62%); }
.hero-label { color: rgba(255,255,255,0.75); letter-spacing: 0.01em; }
.hero-amount { font-family: var(--serif); font-weight: 600; font-size: 3.25rem; letter-spacing: -0.02em; margin: 4px 0 20px; }
.hero-amount .cents { font-size: 1.75rem; color: rgba(255,255,255,0.55); }
.hero-stat {
  background: rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 0.5px rgba(255,255,255,0.12);
}

/* Paper cards: a lit top edge, softer lift */
.card, .list, .option, .chip, .icon-btn { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.card, .list, .option, .chip, .icon-btn) { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05); } }

/* Ministry badges: colour + glyph, glossy */
.min-badge {
  background: linear-gradient(155deg, color-mix(in srgb, var(--m) 78%, white), var(--m));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 8px color-mix(in srgb, var(--m) 30%, transparent);
  border-radius: 11px; color: #fff;
}
.min-badge svg.i { width: 19px; height: 19px; stroke-width: 2; }

/* Primary buttons: navy with depth */
.btn:not(.tinted):not(.plain):not(.green):not(.google) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, white), var(--accent));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn.green { background: linear-gradient(180deg, #4f9a61, #3f7d4e); box-shadow: 0 6px 16px rgba(63, 125, 78, 0.28), inset 0 1px 0 rgba(255,255,255,0.25); }

/* Floating glass tab bar */
@media (max-width: 899px) {
  .tabbar {
    left: 14px; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom));
    height: 66px; padding: 6px 6px; border-radius: 26px;
    box-shadow: 0 12px 34px rgba(40, 30, 15, 0.16), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 0 0 0.5px var(--separator);
    align-items: center;
  }
  .tab { padding: 4px 0; border-radius: 18px; }
  .tab[aria-current="page"] { background: var(--accent-soft); }
  .fab { width: 54px; height: 54px; transform: translateY(-2px); }
  .main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* Staggered entrance */
.rise { animation: rise 560ms cubic-bezier(0.2, 0.9, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.page { animation: none; }
.page > :not(.rise) { animation: page-in 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }

/* Deck cards get the ministry wash at the top */
.deck-card { overflow: hidden; }
.deck-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 110px; background: linear-gradient(180deg, var(--accent-soft), transparent); pointer-events: none; }
.section-title .count { margin-right: auto; }
.step, .fields-in, .stack { grid-template-columns: minmax(0, 1fr); } .input { min-width: 0; } input[type="date"].input { -webkit-appearance: none; appearance: none; display: flex; align-items: center; }

/* Budget page in the ministry's colour */
.budget-page .ring-chart .s { stroke: var(--m); }
.budget-page .ring-chart .r { stroke: var(--pop); }
.budget-page .ring-center b { font-family: var(--serif); font-weight: 600; font-size: 1.625rem; }
.budget-page .funds-bar { height: 8px; border-radius: 4px; }
.budget-page .funds-bar .spent { background: var(--m); }
.budget-page .funds-bar .reserved { background: var(--pop); opacity: 0.75; }
.budget-page .budget-top { background: linear-gradient(160deg, color-mix(in srgb, var(--m) 10%, var(--surface)), var(--surface) 60%); }
.min-chip { display: inline-flex; align-items: center; gap: 6px; }
.min-chip svg.i { width: 16px; height: 16px; color: var(--m); }
.min-chip[aria-pressed="true"] { background: var(--m); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--m) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.3); }
.min-chip[aria-pressed="true"] svg.i { color: #fff; }

/* ─── Round 3: codes, budget sheet, accounts, admin, voucher ─── */
.code-chip { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font: 700 0.72rem/1.6 var(--mono); letter-spacing: 0; vertical-align: 1px; white-space: nowrap; }
.min-selected, .min-select { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7); text-align: left; }
/* Which budget a claim goes on, while late claims on the ended budget are open */
.term-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.term-opt { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; border: 2px solid transparent; transition: border-color .15s, background .15s; }
.term-opt b { font-size: 0.9375rem; }
.term-opt small { color: var(--label-2); font-size: 0.75rem; }
.term-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.term-opt:disabled { opacity: .5; }
/* Category headings on the budget sheet (e.g. "CO2 · Office Operations") */
.sheet-table tr.cat-row td { padding-top: 14px; font-weight: 700; color: var(--label-2); font-size: 0.8125rem; background: transparent; }
.cat-card { padding: 14px 14px 2px; font-weight: 700; color: var(--label-2); font-size: 0.8125rem; }
.min-select .row-title, .min-select .row-sub { display: block; }
.min-select:active { transform: scale(0.985); }
.lock-note { display: inline-flex; align-items: center; gap: 5px; font: 600 0.8125rem var(--font); color: var(--label-2); }
.lock-note svg.i { width: 14px; height: 14px; }
.low { color: var(--orange) !important; font-weight: 600; }

/* Budget sheet: a real table on wide screens, rows on phones */
.sheet-wrap { overflow: hidden; }
.sheet-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; display: none; }
.sheet-table th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--label-2); padding: 12px 14px; background: var(--surface-2); border-bottom: 0.5px solid var(--separator); }
.sheet-table td { padding: 12px 14px; border-bottom: 0.5px solid var(--separator); vertical-align: top; }
.sheet-table .n { text-align: right; white-space: nowrap; }
.sheet-table td small { display: block; font-size: 0.72rem; color: var(--pop); font-weight: 600; }
.sheet-table .remarks { color: var(--label-2); font-size: 0.8125rem; }
.sheet-table tfoot td { font-weight: 700; background: var(--surface-2); border-bottom: 0; }
.sheet-table tr.editable { cursor: pointer; transition: background 120ms ease; }
.sheet-table tr.editable:hover { background: var(--accent-soft); }
.sheet-rows .line-row { width: 100%; text-align: left; display: grid; }
.sheet-rows .remarks { font-size: 0.8125rem; color: var(--label-2); font-style: italic; }
.sheet-wrap { container-type: inline-size; }
@container (min-width: 720px) { .sheet-table { display: table; } .sheet-rows { display: none; } }

/* Accounts */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { padding: 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7); display: grid; gap: 2px; }
.tile span { font-size: 0.75rem; font-weight: 600; color: var(--label-2); }
.tile b { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; line-height: 1.1; }
.tile small { font-size: 0.75rem; color: var(--label-2); }
.tile.pop { background: linear-gradient(160deg, rgba(23,58,94,0.25), rgba(12,30,52,0.6)), url(assets/gen/wash-navy.webp) center / cover; color: #fff; }
.tile.pop span, .tile.pop small { color: rgba(255,255,255,0.75); }
.pay-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pay-bar .link { color: var(--accent); font-weight: 600; }
.acct-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: relative; transition: background 140ms ease; }
.acct-row + .acct-row { border-top: 0.5px solid var(--separator); }
.acct-row.sel { background: var(--accent-soft); }
.acct-row .row-end .row-sub { max-width: 150px; }
.acct-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.acct-tags .code-chip { margin: 0; }
.check { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--fill-2); color: transparent; transition: background 140ms ease, box-shadow 140ms ease; }
.check.on { background: var(--accent); box-shadow: none; color: #fff; }
.check svg.i { width: 15px; height: 15px; stroke-width: 2.6; }
@media (max-width: 699px) {
  .acct-row { flex-wrap: wrap; }
  .acct-row .row-main { flex: 1 1 60%; }
  .acct-row .row-end { flex: 1 0 auto; }
  .acct-row > .btn { flex: 1 0 100%; }
}
.review-actions { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.review-actions.two { grid-template-columns: 1fr 1.4fr; }
.review-actions .btn { padding: 0 10px; font-size: 0.95rem; }
.pay-item { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.pay-item + .pay-item { border-top: 0.5px solid var(--separator); }
.pay-item .ref { width: 150px; height: 40px; font: 600 0.9rem var(--mono); }

/* Admin */
.setting { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.setting + .setting { border-top: 0.5px solid var(--separator); }
.money-in { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px; border-radius: 10px; background: var(--fill); font-weight: 600; color: var(--label-2); }
.money-in input { width: 80px; border: 0; background: none; font-weight: 700; text-align: right; color: var(--label); }
.money-in input:focus { outline: none; }
.role-chip { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--fill); color: var(--label-2); }
.role-chip.admin { background: var(--accent-soft); color: var(--accent); }
.role-chip.accountant, .role-chip.finance-approver { background: var(--pop-soft); color: var(--blue); }
.role-chip.chair, .role-chip.pastor { background: var(--orange-soft); color: var(--orange); }
.role-chip.budget-owner { background: var(--green-soft); color: var(--green); }
.side-foot { width: 100%; border-radius: 12px; }
.side-foot:hover { background: var(--fill); }
.head-actions .avatar { border: 0; cursor: pointer; }

/* ─── Payment voucher ──────────────────────────────────────── */
#voucher-view { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; background: #3a3631; }
#voucher-view[hidden] { display: none; }
.vv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--material); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--label); }
.vv-bar b { font-size: 0.95rem; }
.vv-scroll { flex: 1; overflow: auto; padding: 24px 12px 60px; display: grid; justify-content: center; gap: 24px; }
.a4 {
  --ink: #1f2a37; --muted: #6b6a66; --line: #d9d3c7; --navy: #27598a;
  width: 794px; min-height: 1123px; padding: 56px 60px 48px; background: #fffdf9; color: var(--ink);
  font: 400 13px/1.5 var(--font); letter-spacing: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.35); position: relative;
  zoom: var(--vz, 1);
}
@media (max-width: 830px) { .a4 { --vz: calc((100vw - 24px) / 794px); } }
@supports not (zoom: 1) { .a4 { transform-origin: top center; } }
.v-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 2px solid var(--navy); }
.v-head img { height: 54px; }
.v-addr { display: grid; text-align: right; font-size: 11.5px; color: var(--muted); }
.v-addr b { color: var(--ink); font-size: 13.5px; }
.v-title { display: flex; justify-content: space-between; align-items: flex-end; margin: 26px 0 18px; }
.v-title h1 { margin: 0; font: 600 30px/1 var(--serif); color: var(--navy); letter-spacing: -0.01em; }
.v-meta { display: flex; gap: 22px; }
.v-meta div { display: grid; text-align: right; }
.v-meta span, .v-grid span, .v-words span, .v-received span, .v-sig-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.v-meta b { font: 700 15px var(--mono); }
.v-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.v-grid div { display: grid; gap: 2px; padding: 10px 14px; background: #fffdf9; }
.v-grid b { font-size: 14px; }
.v-table { width: 100%; margin-top: 18px; border-collapse: collapse; }
.v-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: var(--navy); padding: 9px 12px; }
.v-table th:first-child { border-radius: 8px 0 0 0; } .v-table th:last-child { border-radius: 0 8px 0 0; }
.v-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.v-table tr.blank td { height: 36px; }
.v-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.v-table tfoot td { font-weight: 800; font-size: 15px; border-bottom: 0; border-top: 2px solid var(--navy); }
.v-words { margin: 12px 0 0; display: grid; gap: 2px; font-style: italic; }
.v-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #fbf1e2; font-size: 12px; }
.v-sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 26px; }
.v-sig { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; min-height: 108px; display: grid; align-content: start; gap: 3px; }
.v-sig.ok { border-style: solid; border-color: #b9cfe3; background: #f3f8fd; }
.v-sig-name { font-weight: 700; font-size: 14px; margin-top: 4px; }
.v-sig-role { color: var(--muted); font-size: 12px; }
.v-sig-stamp { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 10.5px; font-weight: 700; color: #3f7d4e; }
.v-sig-stamp svg.i { width: 12px; height: 12px; stroke-width: 3; }
.v-sig-pending { margin-top: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; padding-bottom: 4px; }
.v-received { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.v-received div { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.v-received small { color: var(--muted); font-size: 12px; }
.v-foot { position: absolute; left: 60px; right: 60px; bottom: 36px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted); }
.v-receipt { display: grid; grid-template-rows: auto 1fr; }
.v-rhead { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--navy); font-size: 12px; color: var(--muted); }
.v-rhead b { color: var(--navy); font: 600 18px var(--serif); }
.v-rbody { display: grid; place-items: center; }
.v-rbody .paper { transform: none; width: 320px; font-size: 13px; }

@media print {
  @page { size: A4; margin: 0; }
  body.voucher-open > *:not(#voucher-view) { display: none !important; }
  body.voucher-open { background: #fff; }
  #voucher-view { position: static; background: none; }
  .vv-bar { display: none; }
  .vv-scroll { padding: 0; gap: 0; display: block; overflow: visible; }
  .a4 { zoom: 1; box-shadow: none; page-break-after: always; break-after: page; }
}
@media (max-width: 699px) {
  .acct-row .row-end { flex: 1 0 100%; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding-left: 64px; text-align: left; }
  .acct-row .row-end .row-sub { max-width: none; }
  .acct-row > .btn { margin-left: 64px; flex-basis: calc(100% - 64px); }
  .acct-row > .check + .thumb-btn ~ .row-end, .acct-row > .check ~ .btn { padding-left: 0; margin-left: 102px; }
}
.pay-bar .btn { white-space: nowrap; flex: none; }

/* ─── Chairs ───────────────────────────────────────────────── */
.flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.flow.single { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flow > div:not(.flow-arrow) { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--surface-2); align-content: start; }
.flow .code-chip { justify-self: start; }
.flow b { font-size: 0.9rem; letter-spacing: -0.01em; }
.flow small { font-size: 0.78rem; color: var(--label-2); }
.flow-arrow { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--pop); font-size: 0.75rem; font-weight: 700; }
.flow-arrow svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slot { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--fill-2); }
.slot.ok { border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); background: var(--green-soft); }
.slot b { display: block; font-size: 0.85rem; }
.slot small { display: block; font-size: 0.72rem; color: var(--label-2); line-height: 1.3; }
.slot .slot-state { margin-top: 4px; font-weight: 700; color: var(--label-3); display: flex; align-items: center; gap: 3px; }
.slot.ok .slot-state { color: var(--green); }
.slot-state svg.i { width: 12px; height: 12px; stroke-width: 3; }
.decided { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.875rem; }
.decided.approved { color: var(--green); } .decided.declined { color: var(--red); }
.story.approved, .story.declined { opacity: 0.8; }
@media (max-width: 420px) { .slots { grid-template-columns: 1fr; } .flow { grid-template-columns: 1fr; } .flow-arrow { grid-auto-flow: column; justify-content: start; } .flow-arrow svg { transform: rotate(90deg); } }
.proto-tag { justify-self: start; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; background: rgba(255,255,255,0.16); color: #fff; }
.proto-tag.dim { margin: 12px 10px 0; background: var(--orange-soft); color: var(--orange); }

/* Not-ready buttons stay tappable and explain themselves */
.btn[aria-disabled="true"] { opacity: 0.45; }
.btn[aria-disabled="true"]:active { transform: none; }
.hint.shake { animation: shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97); color: var(--attention); font-weight: 600; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.attn { animation: attn 1.2s ease-out; }
@keyframes attn { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pop) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* ─── Round 4: layout that adapts, data views, workflows, multi-receipt claims ─── */
/* Page widths: reading pages stay narrow, data pages use the width of a laptop. */
@media (min-width: 900px) { .main { max-width: none; width: 100%; min-width: 0; margin: 0; padding: 36px 40px 64px; } }
.page { max-width: 860px; margin: 0 auto; }
.page.wide { max-width: 1180px; }
.page.xwide { max-width: 1440px; }
.page-head-text { min-width: 0; }
.large-title { overflow-wrap: anywhere; }
.page-sub { margin: -10px 0 14px; }
.eyebrow-mark { display: flex; align-items: center; gap: 8px; }
.section-title.tight { margin: 8px 0 -4px; }
.hide-sm { display: inline; }
@media (max-width: 599px) { .hide-sm { display: none; } .head-actions .btn.small { padding: 0 11px; } }
.warn-text { color: var(--orange); font-weight: 600; }
.ok-text { color: var(--green); display: flex; align-items: center; gap: 6px; }
.pop-text { color: var(--attention); font-weight: 700; }
.danger-text { color: var(--red) !important; }
.btn.danger, .btn.danger:not(.tinted):not(.plain) { background: var(--red) !important; color: #fff !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--red) 28%, transparent) !important; }
.tone-orange { background: var(--orange-soft) !important; } .tone-orange > .i { color: var(--orange); }
.tone-blue { background: var(--blue-soft) !important; color: var(--blue) !important; }
.tone-grey { background: var(--fill) !important; color: var(--label-2) !important; }
.two-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two-col, .sn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sn-grid { grid-template-columns: 96px minmax(0, 1fr); }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.chip.small { height: 32px; padding: 0 12px; font-size: 0.8125rem; display: inline-flex; align-items: center; gap: 6px; }
.chip.small svg.i { width: 15px; height: 15px; }
.chip[disabled] { opacity: 0.35; pointer-events: none; }
.input.compact { width: auto; height: 38px; }
.search.grow { flex: 1; min-width: 0; }
.i.flip { transform: rotate(180deg); }
.side-who { text-align: left; flex: 1; min-width: 0; }
.side-who > span:first-child { display: block; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-who .footnote { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-pill { margin-top: 6px; }
.row-sub.wrap { white-space: normal; }
.list.flat { box-shadow: none; background: none; border-radius: 0; margin: 0 -4px; }
.list-cap { padding: 10px 16px 0; font-size: 0.75rem; font-weight: 700; color: var(--label-2); letter-spacing: 0.02em; text-transform: uppercase; }
.list-head { display: flex; justify-content: space-between; gap: 12px; }
.pill.ready { color: var(--green); background: var(--green-soft); }
.sub-note { color: var(--label-3); font-size: 0.75rem; }

/* Big numbers shrink to fit their box instead of overflowing (S$1,234,567.89 on a phone). */
.hero, .kpi, .tile, .sum-card, .deck-sum, .hero-stat { container-type: inline-size; }
.fit { display: inline-block; max-width: 100%; white-space: nowrap; font-size: min(1em, calc(100cqi / (var(--len) * 0.58))); line-height: 1.1; }
.hero-amount .fit .cents, .deck-amount .fit .cents, .kpi .fit .cents { font-size: 0.55em; opacity: 0.6; letter-spacing: -0.01em; }
.hero-stat b .fit { font-size: min(1em, calc(100cqi / (var(--len) * 0.62))); }
.tile small .fit { font-size: min(1em, calc(100cqi / (var(--len) * 0.52))); }
.sum-card { text-align: center; padding: 20px 16px 18px; }
.sum-card .subtle { overflow-wrap: anywhere; }
.deck-amount { font-size: 2.5rem; }

/* Home: two columns on a laptop */
@media (min-width: 1100px) {
  .home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .home-grid > div:last-child > .section-title:first-child { margin-top: 0; }
  .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .grid-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-list .row:nth-child(2)::before { display: none; }
  .grid-list .row::before { left: 16px !important; }
}
.mini-budget .use-bar { margin: 6px 0 4px; }
.mini-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; background: var(--separator); border-radius: var(--r-md); overflow: hidden; margin: -6px 0 16px; box-shadow: var(--shadow-sm); }
.mini-stats > div { background: var(--surface); padding: 10px 12px; display: grid; min-width: 0; }
.mini-stats span { font-size: 0.72rem; color: var(--label-2); font-weight: 600; }
.mini-stats b { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Utilisation bar */
.use-bar { position: relative; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; display: flex; }
.use-bar i { height: 100%; transition: width 500ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.use-bar i.res { background: var(--pop); opacity: 0.75; }
.use-bar.over { box-shadow: 0 0 0 1.5px var(--red); }

/* Tiles and KPIs */
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 699px) { .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { min-width: 0; }
.tile small { white-space: nowrap; overflow: hidden; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 799px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7); display: grid; gap: 4px; min-width: 0; }
.kpi > span { font-size: 0.75rem; font-weight: 600; color: var(--label-2); }
.kpi b { font-family: var(--serif); font-weight: 600; font-size: 1.625rem; line-height: 1.1; }
.kpi.pop { background: linear-gradient(160deg, rgba(23,58,94,0.25), rgba(12,30,52,0.6)), url(assets/gen/wash-navy.webp) center / cover; color: #fff; }
.kpi.pop > span { color: rgba(255,255,255,0.78); }
.kpi.pop .use-bar { background: rgba(255,255,255,0.18); margin-top: 4px; }

/* Cards with charts */
.card.pad { padding: 16px; }
.chart-card { margin-top: 14px; display: grid; gap: 10px; min-width: 0; align-content: start; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.card-title .count { font-family: var(--font); font-size: 0.8125rem; color: var(--label-2); font-weight: 600; }
.card-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-opts .segmented { min-width: 200px; }
.chart { position: relative; width: 100%; min-height: 200px; touch-action: pan-y; }
.chart svg { display: block; overflow: visible; }
.chart .g { stroke: var(--separator); stroke-width: 1; }
.chart .yl { fill: var(--label-3); font: 600 10.5px var(--font); text-anchor: end; }
.chart .xl { fill: var(--label-2); font: 600 11px var(--font); text-anchor: middle; }
.chart .bar { transition: opacity 160ms ease; }
.chart .ghost { fill: none; stroke: var(--label-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.chart .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.dash { stroke-dasharray: 6 5; stroke-width: 2; }
.chart .ln.dot { stroke-dasharray: 1 5; stroke-width: 2.2; }
.chart .end { stroke: var(--surface); stroke-width: 2; }
.chart .cursor { stroke: var(--label-3); stroke-width: 1; opacity: 0; pointer-events: none; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hit.on { fill: var(--fill); }
.chart-tip[hidden] { display: none; }
.chart-tip { position: absolute; top: 0; z-index: 2; min-width: 170px; max-width: 260px; padding: 10px 12px; border-radius: 12px; pointer-events: none;
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-lg); font-size: 0.8125rem; display: grid; gap: 4px; }
.chart-tip small { font-weight: 700; color: var(--label-2); }
.chart-tip div { display: flex; align-items: center; gap: 6px; }
.chart-tip div b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.chart-tip i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-tip .tot { border-top: 0.5px solid var(--separator); padding-top: 4px; font-weight: 600; }
.chart-tip .gh { color: var(--label-2); } .chart-tip .gh i { border: 1.2px dashed var(--label-3); }
.legend-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--label-2); font-weight: 600; flex-wrap: wrap; }
.legend-inline i { width: 9px; height: 9px; border-radius: 3px; margin-left: 6px; }
.legend-inline .ghost-key { border: 1.2px dashed var(--label-3); background: none; }
.legend-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.legend-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--fill); font-size: 0.75rem; font-weight: 600; max-width: 100%; }
.legend-chip i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend-chip[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.select-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 12px; border-radius: 10px; background: var(--fill); font-size: 0.8125rem; font-weight: 600; color: var(--label-2); max-width: 100%; }
.select-pill select { border: 0; background: none; font-weight: 700; color: var(--label); height: 100%; padding: 0 6px; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.select-pill.wide-sel { flex: 1; min-width: 0; max-width: 360px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters .segmented { min-width: 240px; }
@media (max-width: 599px) { .filters .segmented, .filters .select-pill.wide-sel { flex: 1 1 100%; max-width: none; } }

/* Horizontal bars */
.hbars { display: grid; gap: 4px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) 128px; gap: 12px; align-items: center; padding: 8px 6px; border-radius: 10px; text-align: left; width: 100%; }
button.hbar:hover { background: var(--fill); }
.hbar-label { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.875rem; font-weight: 600; }
.hbar-label .code-chip { margin: 0; }
.clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.hbar-val { display: grid; justify-items: end; font-size: 0.75rem; color: var(--label-2); min-width: 0; white-space: nowrap; }
.show-all { justify-self: start; margin: 4px 6px 0; color: var(--accent); font-weight: 600; font-size: 0.875rem; }
.hbar-val b { font-size: 0.9375rem; color: var(--label); }
@media (max-width: 599px) {
  .hbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .hbar-val { grid-auto-flow: column; gap: 6px; align-items: baseline; }
  .hbar .use-bar { grid-column: 1 / -1; grid-row: 2; }
}
.report-grid { display: grid; gap: 0 14px; }
@media (min-width: 1100px) { .report-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.pipeline { display: grid; gap: 10px; }
.pipe-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.8125rem; }
.pipe-label { font-weight: 600; color: var(--label-2); }
.pipe-bar { height: 10px; background: var(--fill); border-radius: 5px; overflow: hidden; }
.pipe-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--sky), var(--pop)); }
.pipe-val { color: var(--label-2); white-space: nowrap; }
.pipe-val b { color: var(--label); }

/* Budget page */
.vis-note { display: flex; align-items: center; gap: 6px; margin: 8px 4px 0; }
.vis-note svg.i { width: 14px; height: 14px; }
.budget-split { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .budget-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.budget-top { margin: 0; grid-template-columns: 124px minmax(0, 1fr); }
.budget-top .legend div { min-width: 0; }
.budget-top .legend span { white-space: nowrap; }
.budget-top .legend b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-total { border-top: 0.5px solid var(--separator); padding-top: 8px; font-weight: 600; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 12; }
.donut .track { stroke: var(--fill); }
.members-card { padding: 16px; display: grid; gap: 10px; align-content: start; }
.faces.big .avatar { width: 34px; height: 34px; font-size: 0.75rem; }
.faces.big .avatar + .avatar { margin-left: -8px; }
.avatar.more { background: var(--fill-2); color: var(--label-2); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.toolbar > .segmented { min-width: 200px; }
.toolbar-opts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip.small[aria-pressed="true"] svg.i { color: currentColor; }
.chart-grid { display: grid; gap: 0 14px; }
@media (min-width: 1100px) { .chart-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.sheet-table .activity { overflow-wrap: anywhere; min-width: 160px; }
.sheet-table .remarks { min-width: 120px; }
.line-row .top b { min-width: 0; overflow-wrap: anywhere; }
.line-row .top .num { white-space: nowrap; }
.table-scroll { overflow-x: auto; margin: 0 -16px -16px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 720px; }
.data-table th { text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--label-2); padding: 10px 14px; background: var(--surface-2); border-bottom: 0.5px solid var(--separator); white-space: nowrap; }
.data-table td { padding: 10px 14px; border-bottom: 0.5px solid var(--separator); white-space: nowrap; }
.data-table .n { text-align: right; }
.data-table tbody tr { cursor: pointer; transition: background 120ms ease; }
.data-table tbody tr:hover { background: var(--accent-soft); }
.data-table tfoot td { font-weight: 700; background: var(--surface-2); border-bottom: 0; }
.data-table .use-col { width: 170px; }
.data-table .use-col .use-bar { display: inline-flex; width: 110px; vertical-align: middle; }
.data-table .use-col small { margin-left: 8px; font-weight: 700; color: var(--label-2); }
.t-min { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.t-min i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Receipts and items (read views) */
.rc-group + .rc-group { border-top: 6px solid var(--bg); }
.rc-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; width: 100%; text-align: left; background: var(--surface-2); }
.rc-head .thumb-btn { width: 40px; height: 50px; }
.rc-head .row-title, .rc-head .row-sub { display: block; }
.rc-head.static { background: var(--surface-2); }
.item-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; }
.item-row + .item-row { border-top: 0.5px solid var(--separator); }
.item-desc { font-weight: 600; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.item-row .row-sub { margin-top: 3px; }
.item-amt { font-weight: 600; white-space: nowrap; text-align: right; display: grid; }
.item-amt s { font-size: 0.75rem; color: var(--label-3); font-weight: 500; }
.item-row.removed .item-desc { text-decoration: line-through; color: var(--label-3); }
.thumb-strip { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.thumb-strip .thumb-btn { width: 34px; height: 42px; border-radius: 6px; }
.thumb-strip .thumb-btn .i { display: none; }
.pg-badge { position: absolute; left: 3px; top: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: rgba(20, 20, 20, 0.7); color: #fff; font: 700 10px/16px var(--font); text-align: center; }
.more-pages { font-size: 0.75rem; font-weight: 700; color: var(--label-2); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip-row .code-chip { margin: 0; }
.chip-row .link { font-weight: 600; color: var(--accent); margin-left: auto; }
.slots.one { grid-template-columns: 1fr; }
.slot .row-main { min-width: 0; }
.slot b { overflow-wrap: anywhere; }

/* Deck with several items */
.deck { height: 500px; }
.deck-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; }
.deck-lines div { gap: 10px; }
.deck-lines .clip { flex: 1; }
.deck-lines .num { white-space: nowrap; }
.deck-lines .left-after { font-size: 0.8125rem; }
.deck-receipt { position: relative; }
.more-pill { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(20, 20, 20, 0.62); color: #fff; font-size: 0.75rem; font-weight: 700; }
.more-pill svg.i { width: 13px; height: 13px; }
.up-next-title { margin-top: 28px; }
@media (min-width: 900px) { .up-next-title { margin-top: 0; } }

/* Receipt mock pages */
.paper .r.faint { color: #bbb; }
.paper .r span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 8px; }
.paper .pg { margin-top: 10px; font-weight: 600; color: #888; font-size: 10px; }
.paper.pdf { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; }
.paper.pdf svg { width: 40px; height: 40px; }

/* Receipt viewer paging */
.lightbox .tip { display: grid; gap: 2px; }
.lightbox .tip b { color: #fff; font-size: 0.875rem; }
.lb-nav { position: absolute; top: 50%; z-index: 1; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.14); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lb-nav.prev { left: 14px; } .lb-nav.prev svg { transform: rotate(180deg); }
.lb-nav.next { right: 14px; }
.lb-nav[disabled] { opacity: 0.25; pointer-events: none; }

/* ─── New claim: receipts step ─── */
.sheet.wide { }
@media (min-width: 900px) { .sheet { width: 640px; margin-left: -320px; } }
.rc-card { padding: 14px; display: grid; gap: 12px; }
.rc-card-head { display: flex; align-items: baseline; gap: 10px; }
.rc-card-head b { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; }
.rc-card-head .bar-btn { margin-left: auto; font-size: 0.9375rem; }
.page-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 0 -2px; scrollbar-width: thin; position: relative; }
.page-strip.drag { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 12px; }
.page-thumb { position: relative; flex: none; width: 76px; height: 96px; border-radius: 10px; overflow: hidden; background: #fdfcf8; box-shadow: var(--shadow-sm), inset 0 0 0 0.5px rgba(0,0,0,0.12); cursor: grab; touch-action: pan-y; user-select: none; transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 160ms ease; }
.page-thumb.lifted { z-index: 2; cursor: grabbing; transition: none; box-shadow: var(--shadow-lg); }
.page-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.page-thumb .thumb-paper { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.page-thumb .pg-badge { left: 5px; top: 5px; min-width: 20px; height: 20px; line-height: 20px; font-size: 11px; border-radius: 10px; }
.thumb-pdf { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 2px; color: var(--red); background: var(--red-soft); }
.page-x { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,20,20,0.6); color: #fff; }
.page-x svg.i { width: 12px; height: 12px; stroke-width: 2.6; }
.page-add { flex: none; width: 76px; height: 96px; border-radius: 10px; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--accent); border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); font-weight: 600; }
.page-add small { font-size: 0.72rem; }
.strip-tip { margin: -6px 2px 0; display: flex; align-items: center; gap: 6px; }
.strip-tip svg.i { width: 14px; height: 14px; }
.rc-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rc-fields .grow { grid-column: 1 / -1; }
@media (min-width: 900px) { .rc-fields { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } .rc-fields .grow { grid-column: auto; } }
.money-field { position: relative; display: block; }
.money-field > span { position: absolute; left: 12px; top: 50%; translate: 0 -50%; font-weight: 600; color: var(--label-2); pointer-events: none; }
.money-field .input { padding-left: 38px; font-variant-numeric: tabular-nums; font-weight: 600; }
.callout.tight { padding: 10px 12px; }
.callout.tight p { font-size: 0.8125rem; }

/* ─── New claim: items step ─── */
.rc-items { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.rc-items .rc-head .row-main { min-width: 0; }
.rc-items .rc-head .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-left { flex: none; font-size: 0.75rem; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: var(--fill); color: var(--label-2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rc-left.ok { background: var(--green-soft); color: var(--green); }
.rc-left.bad { background: var(--red-soft); color: var(--red); }
.rc-left svg.i { width: 13px; height: 13px; }
.item-card { display: grid; gap: 8px; padding: 12px 14px; }
.item-card + .item-card { border-top: 0.5px solid var(--separator); }
.item-top { display: flex; gap: 8px; align-items: center; }
.item-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 0.75rem; font-weight: 700; }
.item-top .input { height: 44px; }
.item-bottom { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; padding-left: 32px; }
.item-bottom .input { height: 44px; }
.item-bottom select.input { font-size: 0.9375rem; padding-right: 30px; text-overflow: ellipsis; }
@media (max-width: 420px) { .item-bottom { grid-template-columns: 1fr; padding-left: 0; } }
.icon-mini { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--label-2); }
.icon-mini svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.icon-mini[disabled] { opacity: 0.3; pointer-events: none; }
.add-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--accent); font-weight: 600; font-size: 0.9375rem; border-top: 0.5px solid var(--separator); }
.add-item svg.i { width: 18px; height: 18px; }
.quote-card { padding: 16px; display: grid; gap: 14px; }
.quote-top { display: flex; gap: 12px; }
.setting.bare { padding: 0; }
.alloc-top b { white-space: nowrap; }
.adjust-card { padding: 16px; display: grid; gap: 12px; }
.adj-row { display: flex; gap: 10px; align-items: center; }
.adj-row .row-main { display: grid; gap: 2px; }
.review-actions.two { grid-template-columns: 1fr 1.4fr; }

/* ─── Admin: workflows ─── */
.wf-list { display: grid; gap: 10px; }
@media (min-width: 1100px) { .wf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wf-card { display: grid; gap: 12px; padding: 14px 16px; text-align: left; width: 100%; transition: transform 120ms ease-out, box-shadow 160ms ease; }
.wf-card:hover { box-shadow: var(--shadow-md); }
.wf-card:active { transform: scale(0.99); }
.wf-card-top { display: flex; align-items: center; gap: 10px; }
.wf-card-top .row-sub { white-space: normal; }
.wf-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wf-arrow svg.i { width: 12px; height: 12px; color: var(--label-3); }
.wf-card.add { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent); font-weight: 600; border: 1.5px dashed color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); box-shadow: none; min-height: 64px; }
.stage-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; background: var(--fill); color: var(--label); white-space: nowrap; }
.stage-chip svg.i { width: 14px; height: 14px; }
.stage-chip small { font-weight: 700; color: var(--attention); }
.k-budget-owner { --k: #3f7d4e; } .k-accountant { --k: #2f6db8; } .k-finance { --k: #7a5aa6; } .k-lcec-chairman { --k: #d9623b; } .k-finance-chairman { --k: #b5486a; } .k-head-admin { --k: #5b6472; }
.k-pastor-in-charge { --k: #27598a; } .k-person { --k: #a86613; } .k-payment { --k: #3f8a7a; }
.stage-chip svg.i, .wf-stage .wf-icon, .wf-step .wf-icon, .palette-item .wf-icon, .sim-route .wf-icon { color: var(--k, var(--accent)); }

.wf-page { display: grid; gap: 14px; }
.wf-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: -8px -8px 0; border-radius: 16px;
  background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--shadow-sm), 0 -56px 0 8px var(--bg); }
.wf-bar .bar-btn { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.wf-bar .bar-btn svg.i { width: 18px; height: 18px; }
.wf-title { flex: 1; min-width: 0; display: grid; }
.wf-title b { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-title small { color: var(--label-2); font-size: 0.8125rem; }
.wf-actions { display: flex; gap: 8px; flex: none; }
.mobile-tip { display: none; }
@media (max-width: 899px) { .mobile-tip { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--blue-soft); font-size: 0.8125rem; } .mobile-tip svg.i { color: var(--blue); } .wf-actions .btn.plain { display: none; } }
.wf-editor { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1300px) { .wf-editor { grid-template-columns: 230px minmax(0, 1fr) 290px; } .wf-palette, .wf-inspector { position: sticky; top: 84px; } }
@media (min-width: 1000px) and (max-width: 1299px) { .wf-editor { grid-template-columns: minmax(0, 1fr) 300px; } .wf-palette { grid-column: 1 / -1; grid-row: 1; display: flex !important; flex-wrap: wrap; } .wf-palette .insp-head { width: 100%; } .wf-palette .palette-item { flex: 1 1 200px; } .wf-inspector { position: sticky; top: 84px; } }
@media (max-width: 999px) { .wf-editor { grid-template-columns: minmax(0, 1fr); } .wf-inspector, .wf-palette { display: none !important; } }
.wf-palette { display: grid; gap: 6px; }
.insp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.insp-head > b, .insp-head div b { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; }
.insp-head small { display: block; color: var(--label-2); font-size: 0.75rem; }
.wf-palette > .insp-head, .wf-inspector > .insp-head:first-child:not(:has(.wf-icon)) { display: grid; gap: 2px; }
.insp-head .bar-btn { margin-left: auto; }
.palette-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; cursor: grab; transition: transform 110ms ease-out, box-shadow 160ms ease; }
.palette-item:hover { box-shadow: var(--shadow-md); }
.palette-item:active { transform: scale(0.98); }
.palette-item[disabled] { opacity: 0.45; cursor: default; box-shadow: none; background: var(--fill); }
.palette-item b { display: block; font-size: 0.875rem; }
.palette-item small { display: block; font-size: 0.72rem; color: var(--label-2); line-height: 1.35; }
.wf-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--k, var(--accent)) 14%, transparent); }
.wf-icon svg.i { width: 17px; height: 17px; }
.wf-canvas { display: grid; gap: 14px; min-width: 0; }
.wf-flow { display: flex; flex-direction: column; align-items: stretch; padding: 18px clamp(12px, 4%, 40px); border-radius: var(--r-lg); min-height: 180px;
  background: radial-gradient(circle, var(--fill-2) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--surface-2); box-shadow: inset 0 0 0 1px var(--separator); }
.wf-flow > * { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
.wf-end { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--label-2); }
.wf-end b { color: var(--label); font-size: 0.875rem; }
.wf-end small { font-size: 0.75rem; margin-left: auto; }
.wf-end svg.i { width: 20px; height: 20px; color: var(--accent); }
.wf-link { position: relative; height: 22px; display: grid; place-items: center; transition: height 180ms ease; }
.wf-link::before { content: ""; width: 2px; height: 100%; background: var(--label-3); opacity: 0.45; border-radius: 2px; transition: all 180ms ease; }
.wf-link::after { content: ""; position: absolute; bottom: 3px; width: 7px; height: 7px; border-right: 2px solid var(--label-3); border-bottom: 2px solid var(--label-3); transform: rotate(45deg); opacity: 0.55; }
.drag-on .wf-link { height: 40px; }
.drag-on .wf-link::before { width: 100%; height: 26px; background: var(--accent); opacity: 0.14; border-radius: 10px; }
.drag-on .wf-link::after { display: none; }
.wf-link.over::before { opacity: 0.45 !important; box-shadow: 0 0 0 2px var(--accent); }
.wf-stage { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "num icon text when" "num icon text move"; column-gap: 12px; row-gap: 4px; align-items: center;
  padding: 12px 14px 12px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm), inset 4px 0 0 var(--k); cursor: pointer; transition: box-shadow 160ms ease, transform 160ms ease; }
.wf-stage:hover { box-shadow: var(--shadow-md), inset 4px 0 0 var(--k); }
.wf-stage.sel { box-shadow: var(--shadow-md), inset 0 0 0 2px var(--accent), inset 6px 0 0 var(--k); }
.wf-stage.dragging { opacity: 0.4; transform: scale(0.98); }
.wf-stage[draggable="true"] { cursor: grab; }
.wf-stage-top { display: contents; }
.wf-num { grid-area: num; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); font-size: 0.72rem; font-weight: 800; color: var(--label-2); }
.wf-stage .wf-icon { grid-area: icon; width: 36px; height: 36px; border-radius: 11px; }
.wf-stage .grip, .wf-stage > .wf-stage-top > .lock-note { position: absolute; left: -18px; top: 50%; translate: 0 -50%; color: var(--label-3); font-weight: 800; letter-spacing: -2px; opacity: 0; transition: opacity 140ms ease; }
.wf-stage:hover .grip { opacity: 1; }
.wf-stage > .wf-stage-top > .lock-note { opacity: 0.7; letter-spacing: 0; }
.wf-stage > b, .wf-stage > small { grid-column: 3; }
.wf-stage > b { grid-row: 1; align-self: end; font-size: 0.9375rem; line-height: 1.25; }
.wf-stage > small { grid-row: 2; align-self: start; font-size: 0.8125rem; color: var(--label-2); line-height: 1.3; overflow-wrap: anywhere; }
.wf-when { grid-area: when; justify-self: end; font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 7px; background: var(--orange-soft); color: var(--orange); white-space: nowrap; }
.wf-when.all { background: var(--fill); color: var(--label-2); }
.wf-move { grid-area: move; justify-self: end; display: flex; gap: 4px; visibility: hidden; }
.wf-move .icon-mini { width: 26px; height: 26px; }
.wf-move .icon-mini:first-child svg { transform: rotate(-90deg); }
.wf-move .icon-mini:last-child svg { transform: rotate(90deg); }
.wf-stage:hover .wf-move, .wf-stage:focus-within .wf-move, .wf-stage.sel .wf-move { visibility: visible; }
@media (hover: none), (max-width: 899px) { .wf-move { visibility: visible; } }
@media (max-width: 520px) {
  .wf-stage { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text when" "icon text move"; }
  .wf-num { display: none; }
  .wf-flow { padding: 12px; }
}
.wf-errors { animation: none; }
.wf-errors.shake { animation: shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.wf-errors p { color: var(--label) !important; }
.wf-inspector { display: grid; gap: 12px; }
.money-in.big { height: 48px; width: 100%; font-size: 1rem; }
.money-in.big input { width: 100%; font-size: 1rem; }
.sim { display: grid; gap: 12px; }
.sim .card-title svg.i { color: var(--pop); width: 18px; height: 18px; }
.sim-fields { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 699px) { .sim-fields { grid-template-columns: 1fr 1fr; } .sim-fields .field:first-child { grid-column: 1 / -1; } }
.sim-note { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--orange); }
.sim-route { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: s; }
.sim-route li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.sim-route b { display: block; font-size: 0.875rem; }
.sim-route small { color: var(--label-2); font-size: 0.78rem; }
.min-chip { font-size: 0.75rem; }
.track { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.story, .stack > *, .home-grid > div { min-width: 0; }
/* Grid cards never grow wider than their column because of one long line of text. */
.story, .deck-lines, .deck-card > *, .chart-card, .members-card, .rc-card, .adjust-card, .quote-card, .wf-inspector, .sim, .item-card, .wf-palette, .wf-canvas, .kpi, .tile, .success, .route-step > div { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.story-top .row-amount, .story-top .faces { flex: none; }
.flow > div:not(.flow-arrow) { min-width: 0; }
.flow b { overflow-wrap: anywhere; }
.flow.single > div:first-child { flex: 1; }
.rc-head .thumb-paper, .rc-head img { display: block; width: 100%; height: 100%; }
.rc-head .thumb-btn { display: block; position: relative; }
@media (max-width: 480px) {
  .rc-items .rc-head { flex-wrap: wrap; row-gap: 6px; }
  .rc-items .rc-head .row-main { flex: 1 1 calc(100% - 60px); }
  .rc-left { margin-left: 52px; }
  .rc-items .rc-head .row-title { white-space: normal; }
}
/* Voucher: receipt pages in the order the claimant set, two to a sheet when there are several */
.v-rbody { align-content: center; padding-top: 24px; }
.v-rbody figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.v-rbody figure img { max-width: 100%; max-height: 900px; object-fit: contain; border: 1px solid var(--line); }
.v-rbody figcaption { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.v-rbody.multi { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 24px 18px; }
.v-rbody.multi .paper { width: 260px; font-size: 11.5px; margin: 0; }
.v-table tr.struck td:nth-child(2), .v-table tr.struck td:last-child { text-decoration: line-through; color: var(--muted); }
.v-table td small { display: block; font-size: 10.5px; color: var(--muted); }
.v-rbody.multi { align-items: start; }
.sheet-wrap { overflow-x: auto; }
.wf-intro { display: flex; gap: 16px; align-items: center; padding: 14px 18px 14px 10px; }
.wf-intro img { width: 84px; height: 84px; object-fit: contain; flex: none; }
.wf-intro b { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; }
.wf-intro p { margin: 4px 0 0; font-size: 0.875rem; color: var(--label-2); }

/* ─── Round 5: deck paging, budget planning ─── */
/* Deck: the stacked cards peek below the top card, so leave room before the buttons. */
.deck { height: clamp(430px, calc(100dvh - 360px), 540px); margin-bottom: 34px; }
.deck-actions { position: relative; z-index: 12; margin-top: 0; }
.deck-pager { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; margin: 0 0 6px; }
.deck-pager:empty { display: none; }
.deck-pos { font-size: 0.875rem; color: var(--label-2); font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.deck-pos b { color: var(--label); }
.deck-pager .icon-btn svg.i { width: 18px; height: 18px; }
.row.current { background: var(--accent-soft); }
.row.current .row-title { color: var(--accent); }
@media (max-width: 899px) { .deck { height: clamp(420px, calc(100dvh - 380px), 520px); } }

/* Term badge (FY / CY) */
.term-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font: 800 0.66rem/18px var(--font); letter-spacing: 0.04em; vertical-align: 1px; margin-left: 2px; }
.term-badge.cy { background: var(--pop-soft); color: var(--blue); }
.term-badge.fy { background: var(--orange-soft); color: var(--orange); }
.term-note { font-size: 0.875rem; color: var(--label-2); display: inline-flex; align-items: center; gap: 6px; }
.pill.plan-grey { color: var(--label-2); background: var(--fill); }
.pill.plan-blue { color: var(--blue); background: var(--blue-soft); }
.pill.plan-pop { color: #13789a; background: var(--pop-soft); }
.pill.plan-orange { color: var(--orange); background: var(--orange-soft); }
.pill.plan-green { color: var(--green); background: var(--green-soft); }
.callout.green { background: var(--green-soft); } .callout.green .i { color: var(--green); }
.up { color: var(--orange); } .down { color: var(--green); }

/* Banners into planning */
.plan-banner { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; text-align: left; box-shadow: var(--shadow-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--pop) 40%, transparent); }
.plan-banner .row-title { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plan-banner .btn { flex: none; pointer-events: none; }
.plan-banner.approved { box-shadow: var(--shadow-sm); }
.plan-icon { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--pop-soft); color: var(--blue); }
.plan-home-list { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 0.875rem; font-weight: 600; }
.plan-home-list span { display: inline-flex; align-items: center; gap: 6px; }

/* Head: planner */
.plan-page { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.plan-page > .page-head .large-title { margin-bottom: 4px; }
.plan-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.plan-head .row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plan-sheet { padding: 6px 0 0; overflow: hidden; }
.plan-sheet { container-type: inline-size; }
.plan-row { display: grid; grid-template-columns: 70px minmax(0, 1.6fr) 110px 150px 84px minmax(0, 1fr) 30px; gap: 8px; align-items: center; padding: 8px 14px; }
.plan-row + .plan-row { border-top: 0.5px solid var(--separator); }
.plan-row.head { font-size: 0.72rem; font-weight: 700; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 4px; padding-bottom: 6px; }
.plan-row .input { height: 40px; padding: 0 10px; font-size: 0.9375rem; }
.plan-row .money-field .input { padding-left: 34px; }
.plan-row .input:disabled { background: none; opacity: 1; color: var(--label); -webkit-text-fill-color: var(--label); padding-left: 2px; }
.plan-row .money-field .input:disabled { padding-left: 30px; }
.plan-row .ref { font-size: 0.8125rem; color: var(--label-2); text-align: right; display: grid; line-height: 1.2; }
.plan-row .ref small { font-size: 0.66rem; font-weight: 700; color: var(--label-3); }
.plan-row .chg { font-size: 0.8125rem; font-weight: 700; text-align: right; color: var(--label-3); }
.plan-row .chg.up { color: var(--orange); } .plan-row .chg.down { color: var(--green); }
.plan-row .act-pair { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 6px; }
.plan-row.head .ref, .plan-row.head .chg, .plan-row.head .amt-h { text-align: right; }
@container (max-width: 760px) {
  .plan-row { grid-template-columns: 64px minmax(0, 1fr) auto 30px; grid-template-areas: "sn act act x" "amt amt amt amt" "ref ref chg chg" "rmk rmk rmk rmk"; row-gap: 6px; padding: 12px 14px; }
  .plan-row .chg { white-space: nowrap; }
  .plan-row.head { display: none; }
  .plan-row .sn { grid-area: sn; } .plan-row .act { grid-area: act; } .plan-row .icon-mini, .plan-row > span:last-child { grid-area: x; }
  .plan-row .amt { grid-area: amt; } .plan-row .ref { grid-area: ref; text-align: left; grid-auto-flow: column; justify-content: start; gap: 6px; align-items: baseline; }
  .plan-row .chg { grid-area: chg; } .plan-row .rmk { grid-area: rmk; }
}
.plan-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 16px; background: var(--surface-2); border-top: 0.5px solid var(--separator); }
.plan-total b { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; margin-right: auto; }
.plan-total > span:first-child { font-weight: 700; width: 100%; font-size: 0.8125rem; color: var(--label-2); }
.plan-actions { position: sticky; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 12px; border-radius: 18px;
  background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--shadow-md); }
.plan-actions:not(:has(.btn)) { display: none; }
.plan-actions .hint { margin: 0 auto 0 4px; font-size: 0.8125rem; color: var(--label-2); flex: 1 1 180px; }
.plan-actions .hint.bad { color: var(--red); font-weight: 600; }
@media (min-width: 900px) { .plan-actions { bottom: 16px; } }
.plan-start .two-btns { width: 100%; max-width: 440px; margin-top: 10px; }

/* Admin: planning */
.plan-grid { display: grid; gap: 14px; }
@media (min-width: 1000px) { .plan-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.years-card, .cycle-card { display: grid; gap: 14px; }
.years-card .card-title svg.i, .rollin-card .card-title svg.i { color: var(--pop); width: 18px; height: 18px; }
.setting.col { display: grid; gap: 8px; }
.setting.col .segmented button { font-size: 0.78rem; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.year-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--separator); border-radius: 12px; overflow: hidden; }
.year-facts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; background: var(--surface-2); }
.year-facts span { font-size: 0.8125rem; color: var(--label-2); }
.year-facts b { font-size: 0.875rem; text-align: right; }
.year-facts small { grid-column: 1 / -1; font-size: 0.75rem; color: var(--label-3); }
.deadline-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.deadline-row .field { flex: 1 1 180px; }
.deadline-row .btn { height: 48px; }
.plan-progress { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--fill); gap: 2px; }
.plan-progress .seg { display: block; height: 100%; }
.seg.plan-grey, .plan-legend i.plan-grey { background: var(--fill-2); }
.seg.plan-blue, .plan-legend i.plan-blue { background: var(--blue); }
.seg.plan-pop, .plan-legend i.plan-pop { background: var(--pop); }
.seg.plan-orange, .plan-legend i.plan-orange { background: var(--orange); }
.seg.plan-green, .plan-legend i.plan-green { background: var(--green); }
.plan-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; color: var(--label-2); }
.plan-legend span { display: inline-flex; align-items: center; gap: 6px; }
.plan-legend i { width: 9px; height: 9px; border-radius: 3px; }
.plan-legend b { color: var(--label); }
.plan-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.plan-sum > div { container-type: inline-size; display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.plan-sum > div > span { font-size: 0.72rem; font-weight: 600; color: var(--label-2); }
.plan-sum b { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.plan-min-row .plan-min-end { display: grid; justify-items: end; gap: 4px; flex: none; }
.plan-min-row .plan-min-end .num { font-weight: 600; font-size: 0.9rem; display: flex; gap: 6px; align-items: baseline; }
.plan-min-row .plan-min-end small { font-size: 0.72rem; font-weight: 700; }
.plan-kv > span:first-child { display: grid; gap: 2px; }
.plan-kv > span:first-child small, .plan-kv > span:last-child small { display: block; font-size: 0.72rem; color: var(--label-2); font-weight: 600; }
.plan-kv > span:last-child { white-space: nowrap; }
.review-actions.one { grid-template-columns: 1fr; }
.proto-sim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proto-sim .proto-tag { margin: 0; }
.search { display: block; }
.pay-bar .search.grow { display: block; }
/* Cards thrown off-screen (swipe deck) must never widen the page: on phones that zooms the
   whole view out and cuts off the buttons at the edges. */
html, body { overflow-x: clip; }
.app { overflow-x: clip; }

@media (max-width: 699px) {
  .plan-actions { flex-wrap: nowrap; padding: 8px; }
  .plan-actions .hint:not(.bad) { display: none; }
  .plan-actions .hint.bad { flex: 1 1 auto; font-size: 0.75rem; }
  .plan-actions .btn { flex: 1; }
}

/* ─── Round 6: account, announcements, years, people limits ─── */
html.text-large { font-size: 112.5%; }
.avatar { overflow: hidden; position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.xl { width: 84px; height: 84px; font-size: 1.75rem; cursor: pointer; }
.avatar.xl .cam { position: absolute; inset: auto 0 0 0; height: 28px; display: grid; place-items: center; background: rgba(0,0,0,0.38); color: #fff; opacity: 0.9; }
.avatar.xl .cam svg { width: 15px; height: 15px; }
.acct-hero { display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 8px; }
.acct-who { display: grid; gap: 2px; min-width: 0; max-width: 100%; }
.acct-who b { font-size: 1.25rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.acct-who > span { color: var(--label-2); font-size: 0.875rem; overflow-wrap: anywhere; }
.acct-who .acct-tags { justify-content: center; margin-top: 6px; }
.account section { display: grid; gap: 0; }
.account h3.group-title, .group-title { font-family: inherit; line-height: 1.3; margin: 0 0 6px 16px; font-size: 0.8125rem; font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.04em; }
.field-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px 8px 4px 16px; min-height: 50px; }
.field-row + .field-row { border-top: 0.5px solid var(--separator); }
.field-row > span:first-child { font-size: 0.9375rem; font-weight: 500; }
.input.bare { background: transparent; box-shadow: none; padding: 0 8px; height: 42px; }
.input.bare:focus { background: var(--fill); box-shadow: none; }
.field-row .ro { display: flex; align-items: center; gap: 6px; justify-content: space-between; padding: 0 8px; color: var(--label-2); font-size: 0.9375rem; min-width: 0; overflow-wrap: anywhere; }
.field-row .ro svg { width: 14px; height: 14px; flex: none; }
.account .hint { margin: 8px 16px 0; }
.account .setting.col { padding: 12px 16px; }
.account .row.danger-text .row-title { color: var(--red); }

.role-chip { display: inline-flex; align-items: center; gap: 3px; }
.role-chip svg { width: 11px; height: 11px; }
.role-chip.head-admin { background: var(--accent); color: var(--on-accent, #fff); }
.role-chip.off { background: var(--red-soft, var(--fill)); color: var(--red); }
.row.inactive .row-title { color: var(--label-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.row.inactive .avatar { opacity: 0.5; filter: grayscale(1); }
.chip.locked { opacity: 0.55; }
.chip.locked svg { width: 13px; height: 13px; margin-right: 2px; }

.announce-card { position: relative; padding: 16px 18px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--pop) 35%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--pop) 10%, var(--surface)), var(--surface)); }
.announce-card b, .announce-preview b { display: block; font-size: 1.0625rem; letter-spacing: -0.01em; margin-top: 6px; overflow-wrap: anywhere; }
.announce-card p, .announce-preview p { margin: 4px 0 0; color: var(--label-2); font-size: 0.9375rem; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.ap-top { display: flex; align-items: center; gap: 8px; color: var(--pop); font-size: 0.8125rem; font-weight: 600; min-width: 0; }
.ap-top svg { width: 17px; height: 17px; flex: none; }
.ap-top span { flex: 1; min-width: 0; }
.ap-top .icon-mini { margin: -6px -8px -6px 0; color: var(--label-3); }
.announce-preview { padding: 16px 18px; }
.feed-title { display: block; font-size: 0.9375rem; margin-bottom: 2px; overflow-wrap: anywhere; }
.feed-row.announce p { color: var(--label-2); white-space: pre-line; overflow-wrap: anywhere; }
.count-hint { float: right; color: var(--label-3); font-weight: 500; }

.fy-pick select { min-width: 132px; }
.fy-sched { justify-self: start; }
.fy-change { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.fy-change-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fy-change p { margin: 0; font-size: 0.8125rem; }
.ts-strip { display: flex; gap: 3px; border-radius: 10px; overflow: hidden; min-width: 0; }
.ts-seg { min-width: 0; padding: 8px 10px; display: grid; gap: 1px; }
.ts-seg b { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-seg small { font-size: 0.6875rem; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-seg.old { background: var(--fill); }
.ts-seg.mid { min-width: 28%; background: repeating-linear-gradient(135deg, var(--orange-soft) 0 6px, transparent 6px 12px), var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 40%, transparent); }
.ts-seg.mid b { color: var(--orange); }
.ts-seg.new { background: var(--accent-soft); }
.ts-seg.new b { color: var(--accent); }
.deadline-default { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deadline-default .subtle { font-size: 0.8125rem; }
.two-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.cap-meter { display: grid; gap: 6px; }
.cap-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.875rem; }
.cap-top span { color: var(--label-2); }
.cap-bar { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.cap-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width 300ms ease; }
.cap-meter.full .cap-bar i { background: var(--orange); }
.cap-meter.full .cap-top span { color: var(--orange); font-weight: 600; }
.invite-card { display: grid; gap: 10px; padding: 16px; }
.invite-card p { margin: -4px 0 0; font-size: 0.875rem; }
.limit-in { display: flex; align-items: center; gap: 8px; flex: none; }
.limit-in .input { width: 76px; text-align: center; }
.limit-in .unit { color: var(--muted); font-size: 0.875rem; min-width: 3.4em; }
@media (max-width: 480px) {
  .setting:has(.limit-in) { flex-wrap: wrap; }
  .field-row { grid-template-columns: 76px minmax(0, 1fr); }
}

/* ─── Round 7: workflow editor (phone + desktop), audit, pools, planner, LCEC deck ─── */
@media (min-width: 1000px) { .wf-settings-row { display: none; } }
.wf-settings-row { border-radius: var(--r-lg); text-align: left; }
.wf-flow { padding: 16px clamp(10px, 4%, 40px); }
.wf-group { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 10px; align-items: start; }
.wf-group > .wf-num { grid-column: 1; grid-row: 1 / span 2; margin-top: 16px; }
.wf-group-head, .wf-group-cards { grid-column: 2; }
.wf-group-cards { display: grid; gap: 8px; min-width: 0; }
.wf-group.stacked .wf-group-cards { padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (min-width: 700px) { .wf-group.stacked .wf-group-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.wf-group-head { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: var(--accent); margin: 0 0 6px 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.wf-group-head svg.i { width: 14px; height: 14px; }
.wf-step { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 6px 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm), inset 4px 0 0 var(--k); cursor: pointer; text-align: left; min-width: 0;
  transition: box-shadow 160ms ease, transform 160ms ease; touch-action: manipulation; }
.wf-step:hover { box-shadow: var(--shadow-md), inset 4px 0 0 var(--k); }
.wf-step:active { transform: scale(0.99); }
.wf-step.sel { box-shadow: var(--shadow-md), inset 0 0 0 2px var(--accent), inset 6px 0 0 var(--k); }
.wf-step.lifted { z-index: 3; box-shadow: var(--shadow-lg), inset 4px 0 0 var(--k); transition: none; cursor: grabbing; }
.wf-step.stack-over { box-shadow: var(--shadow-md), inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.wf-step .wf-icon { width: 36px; height: 36px; border-radius: 11px; }
.wf-step-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.wf-step-main b { font-size: 0.9375rem; line-height: 1.25; }
.wf-step-main small { font-size: 0.8125rem; color: var(--label-2); line-height: 1.3; overflow-wrap: anywhere; }
.wf-step .wf-when { flex: none; }
.wf-step .grip { flex: none; width: 36px; height: 44px; display: grid; place-items: center; color: var(--label-3); cursor: grab; touch-action: none; border-radius: 10px; }
.wf-step .grip svg.i { width: 20px; height: 20px; transform: rotate(90deg); }
.wf-step .grip:hover { background: var(--fill); }
.wf-step:not(.fixed) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wf-step .lock-note { flex: none; width: 36px; display: grid; place-items: center; color: var(--label-3); }
.wf-add { max-width: 560px; margin: 0 auto; width: 100%; }
.wf-hint { margin: 0; text-align: center; }
.wf-hint svg.i { width: 14px; height: 14px; vertical-align: -3px; transform: rotate(90deg); }
.sim > summary { list-style: none; cursor: pointer; }
.sim > summary::-webkit-details-marker { display: none; }
.sim:not([open]) > summary { margin: 0; }
.stage-group { display: inline-flex; gap: 3px; padding: 2px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.two-btns.stretch > .btn { flex: 1; }
svg.i.up { transform: rotate(-90deg); } svg.i.down { transform: rotate(90deg); }
.palette-list { display: grid; gap: 8px; }
.palette-list .palette-item { cursor: pointer; }
@media (max-width: 520px) { .wf-group { grid-template-columns: minmax(0, 1fr); } .wf-group > .wf-num { display: none; } .wf-group-head, .wf-group-cards { grid-column: 1; } }

.audit-intro { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 12px; }
.audit-intro > svg.i { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 2px; }
.audit-intro p { margin: 2px 0 0; color: var(--label-2); font-size: 0.875rem; }
.audit-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.audit-filters .search { flex: 1 1 220px; }
.audit-filters .select-pill input { border: 0; background: none; font: inherit; color: var(--label); height: 30px; }
.audit-day { font-size: 0.8125rem; font-weight: 700; color: var(--label-2); margin: 18px 4px 6px; font-family: inherit; }
.audit-row { display: flex; gap: 12px; padding: 12px 16px; align-items: flex-start; }
.audit-row + .audit-row { border-top: 0.5px solid var(--separator); }
.audit-what { font-size: 0.9375rem; line-height: 1.35; overflow-wrap: anywhere; }
.audit-target { font-weight: 600; }
.audit-diff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; font-size: 0.8125rem; }
.audit-diff .was { color: var(--label-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 60%, transparent); overflow-wrap: anywhere; }
.audit-diff svg.i { width: 12px; height: 12px; color: var(--label-3); }
.audit-diff .now { color: var(--label); font-weight: 600; overflow-wrap: anywhere; }
.audit-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 0.75rem; color: var(--label-2); }
.audit-cat { font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--fill); }
.audit-cat.c-budget { background: var(--green-soft); color: var(--green); } .audit-cat.c-claims { background: var(--pop-soft); color: var(--blue); }
.audit-cat.c-people { background: var(--accent-soft); color: var(--accent); } .audit-cat.c-planning { background: var(--orange-soft); color: var(--orange); }
.audit-cat.c-settings, .audit-cat.c-workflows { background: var(--fill-2); color: var(--label); } .audit-cat.c-announcements { background: var(--pop-soft); color: var(--pop); }
.chip small { font-weight: 700; opacity: 0.6; margin-left: 2px; }
.admin-tabs button { padding: 0 4px; font-size: 0.78rem; }

.group-row td { background: var(--surface-2); }
.group-row.pooled td { background: color-mix(in srgb, var(--m, var(--accent)) 8%, var(--surface-2)); }
.group-row .group-name { font-weight: 600; margin-right: 6px; }
.group-row small { display: block; font-size: 0.7rem; color: var(--label-2); font-weight: 600; }
.pool-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--fill); color: var(--label-2); vertical-align: 1px; }
.chip.small.pool-chip { height: 26px; padding: 0 10px; }
.pool-chip.on { background: color-mix(in srgb, var(--m, var(--accent)) 16%, transparent); color: var(--m, var(--accent)); }
.pool-chip svg.i { width: 13px; height: 13px; }
.group-card { padding: 12px 16px; background: var(--surface-2); display: grid; gap: 6px; }
.group-card.pooled { background: color-mix(in srgb, var(--m, var(--accent)) 8%, var(--surface-2)); }
.group-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.group-card .top b { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; min-width: 0; }
.line-row.in-pool { padding-left: 26px; }
small.sched { display: block; font-size: 0.72rem; font-weight: 600; color: var(--pop); margin-top: 2px; }
.pool-list { display: grid; gap: 0; }
.pool-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 0.5px solid var(--separator); }

.plan-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 10px; }
.plan-tools .footnote { flex: 1 1 240px; margin: 0; }
.plan-pick { margin-bottom: 10px; }
.plan-pick select { max-width: min(70vw, 420px); }
.plan-row { grid-template-columns: 70px minmax(0, 1.6fr) 110px 150px 84px 30px; grid-template-areas: "sn act ref amt chg x" ". desc desc desc desc ."; row-gap: 6px; }
.plan-row .sn { grid-area: sn; } .plan-row .act { grid-area: act; } .plan-row .ref { grid-area: ref; } .plan-row .amt { grid-area: amt; } .plan-row .chg { grid-area: chg; }
.plan-row > .icon-mini, .plan-row > span:last-of-type:empty { grid-area: x; }
.plan-row.head { grid-template-areas: none; }
.pl-desc { grid-area: desc; min-height: 40px; height: 40px; padding: 9px 10px !important; font-size: 0.875rem !important; line-height: 1.4; resize: none; overflow: hidden; }
.pl-desc:disabled { padding-left: 2px !important; color: var(--label-2) !important; -webkit-text-fill-color: var(--label-2); }
.pl-desc:disabled:placeholder-shown { display: none; }
@container (max-width: 720px) {
  .plan-row { grid-template-columns: 64px minmax(0, 1fr) auto 30px; grid-template-areas: "sn act act x" "amt amt amt amt" "ref ref chg chg" "desc desc desc desc"; }
  .plan-row .act-pair { grid-template-columns: minmax(0, 1fr); }
}

.present-card { display: flex; gap: 16px; align-items: center; padding: 16px 18px; margin-bottom: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--ink-1), var(--ink-2)); color: #fff; box-shadow: var(--shadow-lg); }
.present-card p { margin: 4px 0 10px; color: rgba(255,255,255,0.75); font-size: 0.875rem; }
.present-card b { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.present-card .btn.plain { background: rgba(255,255,255,0.12); color: #fff; }
.pc-art { flex: none; width: 92px; height: 72px; display: flex; align-items: flex-end; gap: 6px; }
.pc-art i { flex: 1; border-radius: 5px 5px 2px 2px; background: rgba(255,255,255,0.25); }
.pc-art i.req { background: var(--pop); box-shadow: 0 0 20px color-mix(in srgb, var(--pop) 60%, transparent); }
@media (max-width: 480px) { .pc-art { display: none; } }

.present { position: fixed; inset: 0; z-index: 38; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #f4efe6;
  background: radial-gradient(1200px 700px at 85% -10%, #214567 0%, transparent 60%), radial-gradient(900px 600px at -10% 110%, #173654 0%, transparent 55%), #0c1724;
  animation: pr-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
/* The overview sits on the dawn river, like the PowerPoint cover. */
.present:has(.slide.cover) { background: linear-gradient(90deg, rgba(12,23,36,0.96) 0%, rgba(12,23,36,0.84) 45%, rgba(12,23,36,0.35) 100%), url("assets/gen/welcome-wide-a.webp") center / cover, #0c1724; }
@media (max-width: 700px) { .present:has(.slide.cover) { background: linear-gradient(180deg, rgba(12,23,36,0.7), rgba(12,23,36,0.95) 45%), url("assets/gen/welcome-wide-a.webp") 70% 0 / auto 60vh no-repeat, #0c1724; } }
.present.leaving { animation: pr-out 220ms ease forwards; }
@keyframes pr-in { from { opacity: 0; transform: scale(1.02); } }
@keyframes pr-out { to { opacity: 0; transform: scale(1.02); } }
.pr-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
.pr-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pr-title b { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.pr-title span:last-child { color: rgba(255,255,255,0.55); font-size: 0.8125rem; white-space: nowrap; }
.pr-tools { display: flex; gap: 6px; align-items: center; }
.pr-btn, .pr-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,0.09); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.pr-btn:hover, .pr-chip:hover { background: rgba(255,255,255,0.16); }
.pr-btn.icon { width: 36px; padding: 0; justify-content: center; }
.pr-btn svg.i { width: 16px; height: 16px; }
.pr-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--pop) 30%, transparent); }
@media (max-width: 700px) { .pr-btn span, .pr-chip { display: none; } .pr-btn { width: 36px; padding: 0; justify-content: center; } .pr-title span:last-child { display: none; } }
.pr-stage { overflow-y: auto; overscroll-behavior: contain; padding: 8px clamp(14px, 4vw, 56px) 20px; }
.pr-stage.in-right .slide { animation: sl-r 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.pr-stage.in-left .slide { animation: sl-l 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sl-r { from { opacity: 0; transform: translateX(40px); } }
@keyframes sl-l { from { opacity: 0; transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) { .present, .pr-stage .slide { animation: none !important; } }
.slide { max-width: 1180px; margin: 0 auto; display: grid; gap: 22px; }
.sl-kicker { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.sl-kicker img { width: 28px; height: 28px; }
.slide.cover h1 { font-family: var(--serif); font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 1; margin: 0; letter-spacing: -0.03em; font-weight: 600; }
.sl-sub { margin: -8px 0 0; color: rgba(255,255,255,0.65); font-size: 1rem; }
.sl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sl-kpis > div { padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); min-width: 0; }
.sl-kpis span { display: block; font-size: 0.8125rem; color: rgba(255,255,255,0.6); }
.sl-kpis b { display: block; font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 2.4rem); font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-kpis small { color: rgba(255,255,255,0.55); font-size: 0.8125rem; }
@media (max-width: 600px) { .sl-kpis { grid-template-columns: 1fr; gap: 8px; } .sl-kpis > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 16px; } .sl-kpis b { margin: 0; font-size: 1.5rem; } .sl-kpis small { width: 100%; text-align: right; } }
.slide .up { color: #f2b35e; } .slide .down { color: #8fd19e; }
.sl-rank { display: grid; gap: 6px; }
.rank-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 110px; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 10px; text-align: left; color: inherit; }
.rank-row:hover { background: rgba(255,255,255,0.06); }
.rank-name { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bars { position: relative; display: grid; gap: 3px; }
.rank-bars i { display: block; height: 8px; border-radius: 4px; min-width: 3px; }
.rank-bars i.was { background: rgba(255,255,255,0.22); }
.rank-bars i.now { background: var(--m); box-shadow: 0 0 14px color-mix(in srgb, var(--m) 55%, transparent); }
.rank-val { text-align: right; font-weight: 700; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.rank-val small { display: block; font-size: 0.72rem; }
@media (max-width: 600px) { .rank-row { grid-template-columns: minmax(0, 1fr) 80px; } .rank-bars { grid-column: 1 / -1; grid-row: 2; } }
.sl-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.75rem; color: rgba(255,255,255,0.6); }
.sl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sl-legend i.was, .sl-legend i.a { background: rgba(255,255,255,0.28); } .sl-legend i.now, .sl-legend i.req { background: var(--pop); } .sl-legend i.b { background: var(--m, var(--pop)); opacity: 0.55; }
.sl-head { display: flex; align-items: center; gap: 14px; }
.sl-badge { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--m); color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--m) 50%, transparent); }
.sl-badge svg.i { width: 28px; height: 28px; }
.sl-title { flex: 1; min-width: 0; }
.sl-title h2 { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.6rem); margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; overflow-wrap: anywhere; }
.sl-title p { margin: 4px 0 0; color: rgba(255,255,255,0.6); font-size: 0.875rem; }
.sl-body { display: grid; gap: 22px; }
@media (min-width: 980px) { .sl-body { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; } }
.sl-left { display: grid; gap: 16px; }
.sl-hero span { font-size: 0.8125rem; color: rgba(255,255,255,0.6); }
.sl-hero b { display: block; font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.sl-hero em { font-style: normal; font-weight: 700; font-size: 0.9375rem; }
.sl-hist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; height: 190px; padding: 12px 14px 0; border-radius: 18px; background: rgba(255,255,255,0.04); }
.hcol { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; text-align: center; min-width: 0; }
.hcol b { font-size: 0.75rem; margin-top: 6px; } .hcol small { font-size: 0.66rem; color: rgba(255,255,255,0.5); padding-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-wrap { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.hbar-wrap i { position: relative; width: 38%; max-width: 30px; border-radius: 6px 6px 2px 2px; animation: grow 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: bottom; }
.hbar-wrap i.b { background: color-mix(in srgb, var(--m) 55%, transparent); }
.hbar-wrap i.a { background: rgba(255,255,255,0.3); }
.hcol.req .hbar-wrap i.b { background: var(--pop); width: 58%; max-width: 44px; box-shadow: 0 0 24px color-mix(in srgb, var(--pop) 55%, transparent); }
.hbar-wrap i span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 0.66rem; font-weight: 700; color: rgba(255,255,255,0.8); white-space: nowrap; padding-bottom: 3px; }
@keyframes grow { from { transform: scaleY(0); } }
.sl-note { margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.05); border-left: 3px solid var(--m); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.45; }
.sl-note cite { display: block; margin-top: 6px; font-family: inherit; font-style: normal; font-size: 0.8125rem; color: rgba(255,255,255,0.6); }
.sl-lines { border-radius: 18px; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); overflow: hidden; }
.sl-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 110px; gap: 10px; padding: 12px 16px; align-items: start; border-top: 1px solid rgba(255,255,255,0.06); }
.sl-line.head { border-top: 0; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); padding-bottom: 8px; }
.sl-line.total { background: rgba(255,255,255,0.05); font-weight: 700; }
.sl-line .n { text-align: right; font-variant-numeric: tabular-nums; }
.sl-line .muted { color: rgba(255,255,255,0.55); }
.sl-line .n small { display: block; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.5); }
.sl-act { min-width: 0; }
.sl-act b { display: block; font-size: 0.9375rem; overflow-wrap: anywhere; }
.sl-act .code { font-style: normal; font-size: 0.7rem; font-weight: 800; padding: 1px 6px; margin-right: 8px; border-radius: 6px; background: color-mix(in srgb, var(--m) 35%, transparent); vertical-align: 1px; }
.sl-act small { display: block; margin-top: 3px; font-size: 0.8125rem; color: rgba(255,255,255,0.62); line-height: 1.4; }
.sl-act small.sl-split { color: var(--pop); font-weight: 600; }
@media (max-width: 600px) { .sl-line { grid-template-columns: minmax(0, 1fr) 84px; } .sl-line > .n.muted { display: none; } .sl-line.head > span:nth-child(2), .sl-line.head > span:nth-child(3), .sl-line.total > span:nth-child(2), .sl-line.total > span:nth-child(3) { display: none; } }
.sl-decide { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; padding-top: 4px; }
.sl-decide .btn.plain { background: rgba(255,255,255,0.1); color: #fff; }
.sl-decide .ok-text { color: #8fd19e; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-right: auto; }
.sl-decide .subtle { color: rgba(255,255,255,0.55); }
.pr-nav { display: flex; align-items: center; gap: 10px; padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); }
.pr-arrow { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.1); color: #fff; }
.pr-arrow:disabled { opacity: 0.3; }
.pr-arrow svg.i { width: 20px; height: 20px; }
.pr-dots { flex: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pr-dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.25); transition: width 200ms ease, background 200ms ease; }
.pr-dot.on { width: 26px; background: var(--m, #fff); }

/* ─── Rollover: unused money carried line by line ─────────────── */
.plan-avail-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 4px 12px; }
.plan-avail-note .i { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--label-3); }
.rollover-setting { gap: 10px; }
.rollover-setting .segmented { max-width: 420px; }
.rollover-setting .btn { justify-self: start; }
.years-card .rollover-setting { margin-top: 4px; padding-top: 14px; border-top: 0.5px solid var(--separator); }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: -6px 0 12px; font-weight: 600; }
.back-link .i { width: 14px; height: 14px; }
.rollover-mode { display: grid; gap: 12px; margin-bottom: 14px; }
.rollover-mode .callout { margin: 0; }
.carry-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.carry-kpis > div { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); display: grid; gap: 4px; min-width: 0; container-type: inline-size; }
.carry-kpis span { font-size: 0.75rem; font-weight: 600; color: var(--label-2); }
.carry-kpis b { font-family: var(--serif); font-weight: 600; font-size: min(1.25rem, 10.5cqw); line-height: 1.15; white-space: nowrap; }
.carry-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carry-kpis .warn b { color: var(--orange); }
.carry-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.carry-min { padding: 6px 0; margin-bottom: 12px; overflow: hidden; }
.carry-min > header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 0.5px solid var(--separator); }
.carry-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px 16px; align-items: center; padding: 12px 16px; }
.carry-row + .carry-row { border-top: 0.5px solid var(--separator); }
.carry-src { display: flex; gap: 4px; align-items: flex-start; min-width: 0; }
.carry-src .row-title { white-space: normal; }
.carry-dest { display: grid; gap: 6px; justify-items: end; min-width: 0; }
.carry-map { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px 10px; width: 100%; }
.carry-map .carry-to { justify-self: end; }
.carry-to { display: inline-flex; align-items: center; gap: 2px; font-size: 0.875rem; font-weight: 600; min-width: 0; }
.carry-to > .i { width: 14px; height: 14px; color: var(--label-3); margin-right: 4px; flex: none; }
.carry-acts { display: inline-flex; gap: 2px; }
.term-tag { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--fill); color: var(--label-2); font-size: 0.7rem; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
small.carry-note { display: block; margin-top: 3px; font-size: 0.72rem; font-weight: 600; color: var(--green); line-height: 1.3; white-space: normal; }
small.carry-note.expired { color: var(--label-3); }
.sheet-table td.n small.carry-note { text-align: right; }
.line-row small.carry-note { margin-top: 6px; }
.legend-total.carry { border-top: 0; padding-top: 0; }
.legend-total.carry span { color: var(--green); }
.kpi small.carry-note { margin-top: 0; }
.carry-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.carry-preview > div { display: grid; gap: 2px; }
.carry-preview span { font-size: 0.75rem; font-weight: 600; color: var(--label-2); }
.carry-preview .btn { margin-left: auto; }
.carry-from { padding: 14px 16px; display: grid; gap: 6px; }
.carry-from .row-title { white-space: normal; }
.carry-dests { display: grid; gap: 8px; }
.carry-dests .option { display: flex; align-items: center; gap: 6px; text-align: left; }
.carry-dests .row-main { display: grid; gap: 2px; }
.carry-dests .row-title { white-space: normal; }
.carry-confirm .kv > span:last-child { text-align: right; }
@media (max-width: 760px) { .carry-kpis, .carry-kpis.three { grid-template-columns: 1fr 1fr; } }
.carry-min { container-type: inline-size; }
/* Stack source above destination whenever the card itself is narrow (phones, tablets, desktop with the sidebar). */
@container (max-width: 820px) {
  .carry-row { grid-template-columns: minmax(0, 1fr); }
  .carry-dest { justify-items: stretch; }
  .carry-map { grid-template-columns: auto auto minmax(0, 1fr); padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
  .carry-map .carry-to { grid-column: 1 / -1; justify-self: start; }
  .carry-map .carry-acts { justify-self: end; }
  .carry-dest > .btn { justify-self: start; }
  .carry-dest > .pill { justify-self: start; }
}
.carry-expect { display: block; color: var(--green); font-weight: 700; font-size: 0.68rem; }
.carry-link { margin-top: 12px; border-radius: var(--r-lg); }
.carry-link > .i:first-child { width: 22px; height: 22px; color: var(--accent); flex: none; }
.carry-suggest-note { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; color: var(--label-2); }
.carry-suggest-note .i { width: 13px; height: 13px; }
.carry-suggestions { display: grid; gap: 10px; margin-bottom: 14px; }
.carry-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 10px; border-top: 0.5px solid var(--separator); }
.carry-sug .row-main { flex: 1 1 260px; }
.carry-sug .row-title { white-space: normal; }
.owner-place { gap: 6px; }
.owner-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.owner-row .row-title, .owner-row .row-sub { white-space: normal; }
.owner-row.empty .input { flex: 1; min-width: 0; }
.sl-hero em.carry { display: block; margin-top: 6px; color: #8fd19e; font-weight: 600; font-size: 0.8125rem; }
.sl-line small.carry { color: #8fd19e; }

/* ─── Exceptions ───────────────────────────────────────────────── */
.ex-intro { margin: -4px 0 14px; }
.ex-tiles .ex-tile { text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; container-type: inline-size; }
.ex-tile span { overflow-wrap: anywhere; }
.ex-tile.warn b { color: var(--orange); }
.ex-tile.ok b { color: var(--green); }
.ex-tile:active { transform: scale(0.98); transition: transform 100ms ease-out; }
.ex-sec { margin-top: 26px; scroll-margin-top: 16px; }
.ex-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ex-sec-head .section-title { margin: 0; }
.ex-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-sub { margin: 4px 4px 10px; }
.ex-list { container-type: inline-size; }
.ex-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 12px 16px; }
.ex-row + .ex-row { border-top: 0.5px solid var(--separator); }
.ex-row .row-main { min-width: 0; }
.ex-row .row-title { white-space: normal; }
.ex-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.ex-tags.col { flex-direction: column; align-items: flex-start; }
.ex-tags .warn-tag { white-space: normal; line-height: 1.35; }
.ex-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@container (max-width: 640px) {
  .ex-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ex-acts { grid-column: 2 / -1; justify-content: flex-start; }
}
.ex-empty { padding: 14px 16px; }
.ex-wait { display: flex; gap: 6px; align-items: flex-start; margin: 10px 4px 0; }
.ex-wait .i, .ye-note .i { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.ex-sec .callout { margin-top: 10px; }

/* The 31 July year-end card */
.ye-card { margin-top: 16px; border: 1.5px solid color-mix(in srgb, var(--blue) 30%, transparent); }
.ye-card .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ye-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.ye-steps li { display: flex; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--blue-soft); min-width: 0; }
.ye-steps li:nth-child(2) { background: var(--orange-soft); }
.ye-steps b { display: block; margin: 2px 0 4px; letter-spacing: -0.015em; }
.ye-steps p { margin: 0; font-size: 0.875rem; color: var(--label-2); }
.ye-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; background: var(--surface); color: var(--blue); }
.ye-steps li:nth-child(2) .ye-dot { color: var(--orange); }
@media (max-width: 799px) { .ye-steps { grid-template-columns: 1fr; } }
.ye-note { display: flex; gap: 6px; align-items: flex-start; margin: 12px 2px 0; }
.ye-sub { margin: 18px 0 8px; font-size: 0.9375rem; letter-spacing: -0.01em; }
.ye-lines { display: grid; gap: 10px; }
.ye-line { padding: 12px 14px; border-radius: var(--r-md); background: var(--fill); display: grid; gap: 10px; min-width: 0; }
.ye-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ye-head .code-chip { margin: 0; }
.ye-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ye-nums.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ye-nums > div { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface); container-type: inline-size; }
.ye-nums span { font-size: 0.72rem; font-weight: 600; color: var(--label-2); }
.ye-nums b { font-family: var(--serif); font-weight: 600; font-size: min(1.0625rem, 11cqw); white-space: nowrap; }
.ye-nums .warn b { color: var(--orange); }
@media (max-width: 699px) { .ye-nums, .ye-nums.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ye-claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.875rem; }
.ye-claims li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ye-tag { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 7px; background: var(--surface); color: var(--label-2); }
.ye-tag.kept { background: var(--blue-soft); color: var(--blue); }
.ye-tag.gone { background: var(--orange-soft); color: var(--orange); }
.ye-card .proto-sim { margin-top: 14px; }

/* ─── shadcn/ui-style Select and Date picker (controls.js) ─────────────────────────────── */
.native-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip-path: inset(50%); }
.cselect, .cdate { display: inline-flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; min-width: 0; }
.cselect.input, .cdate.input { width: 100%; justify-content: space-between; }
.cdate.input { justify-content: flex-start; }
.cselect-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect .placeholder, .cdate .placeholder { color: var(--label-3); }
.cselect-chev { flex: none; width: 16px; height: 16px; transform: rotate(90deg); opacity: 0.55; transition: transform 160ms ease; }
.cselect[aria-expanded="true"] .cselect-chev { transform: rotate(-90deg); }
.cdate-icon { flex: none; width: 17px; height: 17px; opacity: 0.6; }
.cselect:disabled, .cdate:disabled { cursor: default; opacity: 0.55; }
.cselect:focus-visible, .cdate:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.select-pill .cselect { border: 0; background: none; font-weight: 700; color: var(--label); height: 100%; padding: 0 6px; max-width: 100%; border-radius: 8px; }
.item-bottom .cselect.input { font-size: 0.9375rem; }
.fy-pick .cselect { min-width: 132px; }
.plan-pick .cselect { max-width: min(70vw, 420px); }

.cpop { position: fixed; z-index: 1000; max-width: calc(100vw - 16px); overflow: auto; overscroll-behavior: contain; padding: 4px; border-radius: 10px;
  background: var(--surface); color: var(--label); border: 1px solid var(--separator);
  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
  animation: cpop-in 120ms cubic-bezier(0.16, 1, 0.3, 1); transform-origin: top center; }
.cpop[data-side="top"] { transform-origin: bottom center; }
.cpop.closing { animation: cpop-out 110ms ease forwards; }
.cpop:focus { outline: none; }
@keyframes cpop-in { from { opacity: 0; transform: scale(0.96) translateY(-2px); } }
@keyframes cpop-out { to { opacity: 0; transform: scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .cpop, .cpop.closing { animation-duration: 1ms; } }

.clist-item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px 6px 6px; border-radius: 6px; font-size: 0.875rem; cursor: pointer; user-select: none; }
.clist-item.active { background: var(--fill); }
.clist-item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.clist-item[aria-selected="true"] { font-weight: 600; }
.clist-check { flex: none; width: 16px; height: 16px; display: grid; place-items: center; }
.clist-check svg.i { width: 14px; height: 14px; }
.clist-text { min-width: 0; overflow-wrap: anywhere; }
.clist-group + .clist-group, .clist-item + .clist-group { border-top: 1px solid var(--separator); margin-top: 4px; padding-top: 4px; }
.clist-label { padding: 6px 8px 4px 30px; font-size: 0.72rem; font-weight: 700; color: var(--label-3); letter-spacing: 0.02em; }

.ccal { padding: 12px; width: 268px; }
.ccal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ccal-head b { font-size: 0.875rem; font-weight: 600; }
.ccal-nav { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--separator); background: transparent; }
.ccal-nav:hover { background: var(--fill); }
.ccal-nav svg.i { width: 15px; height: 15px; }
.ccal-nav svg.i.flip { transform: scaleX(-1); }
.ccal-grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; justify-content: center; }
.ccal-dow { height: 26px; display: grid; place-items: center; font-size: 0.72rem; color: var(--label-3); }
.ccal-day { height: 34px; border-radius: 6px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; background: transparent; }
.ccal-day:hover:not(:disabled) { background: var(--fill); }
.ccal-day.today { background: var(--fill); font-weight: 700; }
.ccal-day.sel, .ccal-day.sel:hover { background: var(--label); color: var(--bg); font-weight: 700; }
.ccal-day:disabled { opacity: 0.3; cursor: default; }
.ccal-day:focus-visible, .ccal-nav:focus-visible, .ccal-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.ccal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--separator); }
.ccal-foot:empty { display: none; }
.ccal-link { font-size: 0.8125rem; font-weight: 600; color: var(--accent); padding: 4px 6px; border-radius: 6px; }
.ccal-link:only-child { margin-left: auto; }
.ccal-link:hover { background: var(--fill); }

/* Number fields: no browser spinners, as in shadcn's Input. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }