/* ============================================================================
   Commun marketing — coded-demo kit (styles)
   Contract: docs/plan/marketing-v2/DEMOS.md · Design system: docs/plan/liquid-glass/DESIGN.md

   PROVENANCE — §1 and §2 below are COPIED, not re-typed, from the product itself.
   Do not "improve" them here; fix them in the product and copy again.

     resources/css/app.css:13–44    :root token block          → §1
     resources/css/app.css:54–66    canvas wash (body::before) → §3
     resources/css/app.css:186–246  @layer components glass    → §2
     resources/css/app.css:256–273  fallback media blocks      → §6
     tailwind.config.js:36–46       hairline borderColor       → §1 (--demo-line-*)
     tailwind.config.js:65–73       borderRadius               → §1 (--radius-glass*)
     tailwind.config.js:75–90       boxShadow                  → §1 (--shadow-glass*)
     tailwind.config.js:128–184     text + semantic palette    → §1 (--demo-heading …)

   Three adaptations were unavoidable outside Tailwind; each is marked [ADAPTED]:
     a) `--color-primary` / `--color-secondary` carry no value on this site, so they
        default here to Harmony Academy and read from the `--demo-primary` /
        `--demo-secondary` aliases a demo may override per frame (DEMOS.md §Primitives).
     b) app.css `--ink: 46 41 35` collides with site.css `--ink: #1A1838` (the brand
        ink used across the marketing pages). Renamed `--demo-ink` here; the copied
        glass rules never referenced it — they carry the literal `rgb(46 41 35 / …)`.
     c) app.css paints the canvas on `body::before`. A demo is a window on a page,
        not a page, so the same two radials are painted on `.demo-frame` and on
        `.demo-phone__screen`; `.demo-frame__body` stays transparent and the wash
        shows through it (DESIGN.md §2.2 "layout roots are transparent").

   Light-only: the product is light-only (fe-style.md Law 3). No `dark:`, no
   `prefers-color-scheme`. Reduced motion, reduced transparency and print are
   handled once here (§6) — a demo never re-implements them.
   ========================================================================== */

/* ── §1 Tokens ─────────────────────────────────────────────────────────────
   From resources/css/app.css:13–44, verbatim except [ADAPTED] (a) and (b). */
:root {
  /* [ADAPTED a] the tenant pair, as the demos' school. Harmony Academy:
     deep green + amber. A demo re-tints one frame by setting --demo-primary /
     --demo-secondary on `.demo`, `.demo-frame` or `.demo-phone`. */
  --demo-primary: 27 94 82;
  --demo-secondary: 201 138 30;

  /* Dynamic per-tenant tokens (SSR-inlined by app.blade.php, re-applied by setColors.js) */
  --color-primary: var(--demo-primary);
  --color-primary-contra: 245 240 230; /* parchment #F5F0E6 */
  --color-secondary: var(--demo-secondary);
  --color-secondary-contra: 245 240 230; /* parchment #F5F0E6 */

  /* Liquid Glass tokens — docs/plan/liquid-glass/DESIGN.md §2 */
  --demo-ink: 46 41 35; /* [ADAPTED b] app.css calls this --ink */
  --glass-blur: 8px;
  --glass-blur-strong: 16px;
  --shadow-glass-sm: 0 4px 12px rgb(var(--color-primary) / 0.12);
  --shadow-glass:    0 10px 30px rgb(var(--color-primary) / 0.14);
  --shadow-glass-lg: 0 24px 60px rgb(var(--color-primary) / 0.18);
  --shadow-glow:     0 0 0 4px rgb(var(--color-primary) / 0.16);
  --radius-glass: 1.25rem;
  --radius-glass-sm: 0.75rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* Text + hairlines + semantics — tailwind.config.js:36–46, 128–184 */
  --demo-heading: #2E2923;
  --demo-body: #3B3530;
  --demo-muted: #6B6057;
  --demo-stone: #9C9488;
  --demo-parchment: #F5F0E6;
  --demo-paper-warm: #FAF6EE;
  --demo-line: rgb(46 41 35 / 0.12);
  --demo-line-subtle: rgb(46 41 35 / 0.07);
  --demo-success: #3D6B5A;      --demo-success-light: #E8F0EB;  --demo-success-dark: #2D5446;
  --demo-warning: #92610A;      --demo-warning-light: #FFF3DC;  --demo-warning-dark: #6B4A10;
  --demo-danger:  #8B3A3A;      --demo-danger-light:  #F5EAEA;  --demo-danger-dark:  #6B2F2F;
  --demo-info:    #4A6178;      --demo-info-light:    #EDF1F5;
}

/* [ADAPTED a] re-map the tenant pair wherever a demo may override the aliases,
   so `--demo-primary` set on a frame re-tints that frame's glass and shadows. */
.demo,
.demo-frame,
.demo-phone {
  --color-primary: var(--demo-primary);
  --color-secondary: var(--demo-secondary);
}

/* ── §2 Liquid Glass surfaces ──────────────────────────────────────────────
   resources/css/app.css:186–246, verbatim (`@layer components` unwrapped —
   this file is plain CSS and there is no Tailwind layer order to join). */
.glass,
.glass-strong,
.glass-tint {
  background-color: rgb(255 255 255 / 0.58);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-glass);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-glass);
}
.glass-strong {
  background-color: rgb(255 255 255 / 0.76);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
}
.glass-tint {
  background-color: rgb(255 255 255 / 0.5);
  background-image: linear-gradient(rgb(var(--color-primary) / 0.10), rgb(var(--color-primary) / 0.10));
}
.glass-subtle {
  background-color: rgb(255 255 255 / 0.34);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: var(--radius-glass-sm);
}
/* One sliding active marker per group (DESIGN.md §2.8) — position it with translateX/Y. */
.indicator {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 9999px;
  background-color: rgb(var(--color-primary));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), var(--shadow-glass-sm);
  transition: transform var(--dur-slow) var(--ease-out), width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}
/* Opt-out subtree: kiosk, video, PDF, print. */
.no-glass .glass, .no-glass .glass-strong, .no-glass .glass-tint, .no-glass .glass-subtle,
.no-glass.glass, .no-glass.glass-strong, .no-glass.glass-tint, .no-glass.glass-subtle {
  background-color: #FDFBF7;
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-color: rgb(46 41 35 / 0.12);
}

/* ── §3 The demo root ──────────────────────────────────────────────────────
   `<div class="demo" data-demo="{name}">` — the runtime's mount point. It sits
   on the marketing cloud ground (#F0EFF7); everything inside it is the product. */
.demo {
  /* [CHANGED by conductor, companions lane request] the demo is its own size container so
     the §7 breakpoints fire on the demo's width (a /demos gallery pane, a narrow column),
     not the viewport */
  container-type: inline-size;
  position: relative;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--demo-body);
  -webkit-font-smoothing: antialiased;
}
/* site.css gives every <section> on a marketing page 78px of block padding
   (site.css:93). Inside a demo a <section> is a product card, not a page band. */
.demo section { padding: 0; }
.demo h1, .demo h2, .demo h3, .demo h4, .demo h5, .demo h6 {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
}
.demo *:focus-visible {
  outline: 2px solid rgb(var(--color-primary) / 0.75);
  outline-offset: 2px;
  border-radius: 8px;
}

/* The canvas — resources/css/app.css:54–66. [ADAPTED c] painted on the window
   instead of a fixed body pseudo-element; the same two radials, same stops. */
.demo-frame,
.demo-phone__screen {
  background-color: var(--demo-parchment);
  background-image:
    radial-gradient(60rem 40rem at 10% -10%, rgb(var(--color-primary) / 0.18), transparent 60%),
    radial-gradient(50rem 36rem at 100% 110%, rgb(var(--color-secondary) / 0.22), transparent 60%);
}

/* ── §4 Primitives (DEMOS.md §Primitives) ────────────────────────────────── */

/* 4.1 `.demo-frame` — a portal window (DESIGN.md §4, SA/Aa shell).
   Grid: bar across the top, optional rail on the left, body on the right.
   With no `.demo-frame__rail` in the markup the first column collapses to 0. */
.demo-frame {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgb(46 41 35 / 0.10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(26, 24, 56, .45), 0 2px 8px -4px rgba(26, 24, 56, .18);
  isolation: isolate;
}
.demo-frame__bar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 12px;
  border-radius: 14px;
  /* .glass, tighter radius — DESIGN.md §4 "topbar = .glass floating" */
  background-color: rgb(255 255 255 / 0.58);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-glass-sm);
}
.demo-frame__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  min-width: 0;
}
.demo-frame__mark {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgb(var(--color-primary-contra));
  background: rgb(var(--color-primary));
  box-shadow: var(--shadow-glass-sm);
}
.demo-frame__title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--demo-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-frame__title small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--demo-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-frame__user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 4px 11px 4px 4px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--demo-heading);
  background-color: rgb(255 255 255 / 0.34);
  border: 1px solid rgb(255 255 255 / 0.45);
}
.demo-frame__user i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: rgb(var(--color-primary-contra));
  background: rgb(var(--color-primary));
}

/* rail — glass-tint sidebar (DESIGN.md §4): floating, rounded, one indicator */
.demo-frame__rail {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  width: var(--demo-rail-w, 158px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background-color: rgb(255 255 255 / 0.5);
  background-image: linear-gradient(rgb(var(--color-primary) / 0.10), rgb(var(--color-primary) / 0.10));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-glass-sm);
}
.demo-frame__rail-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--demo-muted);
  padding: 6px 10px 4px;
}
.demo-rail__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--demo-heading);
  text-align: left;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
/* Only a real control gets the hand — a rail item that is chrome stays a span. */
button.demo-rail__item, a.demo-rail__item { cursor: pointer; }
.demo-rail__item:hover { background-color: rgb(255 255 255 / 0.4); }
.demo-rail__item[aria-current="page"],
.demo-rail__item.is-active {
  color: rgb(var(--color-primary-contra));
  background-color: rgb(var(--color-primary));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), var(--shadow-glass-sm);
}
.demo-rail__item[aria-current="page"]:hover,
.demo-rail__item.is-active:hover { background-color: rgb(var(--color-primary)); }
.demo-rail__item svg { width: 15px; height: 15px; flex: none; opacity: .8; }

/* body — transparent, the canvas wash shows through (DESIGN.md §2.2) */
.demo-frame__body {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

/* 4.2 `.demo-phone` — 320 × 640, status bar, home indicator, content scrolls */
.demo-phone {
  position: relative;
  width: 320px;
  max-width: 100%;
  height: 640px;
  flex: none;
  padding: 9px;
  border-radius: 42px;
  background: linear-gradient(160deg, #2E2923, #4A423A);
  box-shadow: 0 34px 64px -30px rgba(26, 24, 56, .6), inset 0 1px 0 rgb(255 255 255 / .25);
}
.demo-phone__screen {
  position: relative;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.demo-phone__status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 20px 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--demo-heading);
  font-variant-numeric: tabular-nums;
}
.demo-phone__status svg { width: 13px; height: 13px; opacity: .7; }
.demo-phone__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-phone__home {
  flex: none;
  width: 108px;
  height: 4px;
  margin: 7px auto 8px;
  border-radius: 999px;
  background: rgb(46 41 35 / 0.28);
}

/* 4.3 `.demo-section` — the product's <Section> card (DESIGN.md §3.1) */
.demo-section {
  position: relative;
  background-color: rgb(255 255 255 / 0.58);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-glass);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-glass);
}
.demo-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--demo-line-subtle);
}
.demo-section__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--demo-heading);
}
.demo-section__title small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--demo-muted);
}
.demo-section__body { padding: 14px 16px; }
.demo-section__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-top: 1px solid var(--demo-line-subtle);
  font-size: 12.5px;
  color: var(--demo-muted);
}

/* 4.4 `.seg` + `.indicator` — segmented control, one sliding marker (§2.8).
   `--seg-n` is the button count; the runtime replaces the width with the
   measured one so unequal labels still line up. */
.seg {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: 999px;
  background-color: rgb(255 255 255 / 0.34);
  border: 1px solid rgb(255 255 255 / 0.45);
}
.seg button {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--demo-muted);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.seg button[aria-pressed="true"] { color: rgb(var(--color-primary-contra)); }
.seg .indicator {
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--seg-n, 3));
}

/* 4.5 `.demo-count` — a figure that counts up via ctx.tween */
.demo-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--demo-heading);
}

/* stat tile — the frame's small figure card (label above, .demo-count below) */
.demo-stat {
  padding: 11px 13px;
  border-radius: var(--radius-glass-sm);
  background-color: rgb(255 255 255 / 0.34);
  border: 1px solid rgb(255 255 255 / 0.45);
}
.demo-stat__l {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--demo-muted);
}
.demo-stat__v {
  margin-top: 4px;
  font-size: 16.5px;
  line-height: 1.15;
  white-space: nowrap;
}
.demo-stat__v.is-good { color: var(--demo-success); }
.demo-stat__v.is-bad { color: var(--demo-danger); }

/* 4.6 `.demo-pill--{good,warn,bad,info}` — status as the product renders it */
.demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background-color: rgb(255 255 255 / 0.34);
  color: var(--demo-body);
}
.demo-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .75;
}
.demo-pill--good { background-color: var(--demo-success-light); color: var(--demo-success-dark); }
.demo-pill--warn { background-color: var(--demo-warning-light); color: var(--demo-warning-dark); }
.demo-pill--bad  { background-color: var(--demo-danger-light);  color: var(--demo-danger-dark); }
.demo-pill--info { background-color: var(--demo-info-light);    color: var(--demo-info); }

/* 4.7 `.demo-table` — rows on glass-subtle, sticky header, money right-aligned */
.demo-table-scroll { overflow: auto; max-height: var(--demo-table-h, none); border-radius: var(--radius-glass-sm); }
.demo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.demo-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--demo-muted);
  /* DESIGN.md §3.9 sticky exception — an opaque header, never a blurred row */
  background: var(--demo-paper-warm);
  border-bottom: 1px solid var(--demo-line);
}
.demo-table tbody td {
  padding: 9px 12px;
  color: var(--demo-body);
  border-bottom: 1px solid var(--demo-line-subtle);
  background-color: rgb(255 255 255 / 0.34);
}
.demo-table tbody tr:last-child td { border-bottom: 0; }
.demo-table tbody tr:hover td { background-color: rgb(255 255 255 / 0.55); }
.demo-table tbody tr[aria-selected="true"] td { background-color: rgb(var(--color-primary) / 0.10); }
.demo-table .num,
.demo-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.demo-table th:first-child, .demo-table td:first-child { padding-left: 14px; }
.demo-table th:last-child, .demo-table td:last-child { padding-right: 14px; }

/* 4.8 `.demo-caption` — mandatory under every demo. Brand chrome, not product:
   it sits on the marketing page, so it uses the site's mono voice. */
.demo-caption {
  margin-top: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #6E6A8C);
}

/* ── §5 Kit extras the primitives lean on ─────────────────────────────────── */

/* meter — the ageing / progress bar (collections-card, ageing-buckets) */
.demo-meter {
  display: block;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background-color: rgb(255 255 255 / 0.34);
  border: 1px solid rgb(255 255 255 / 0.45);
}
.demo-meter > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: rgb(var(--color-primary));
  transition: width var(--dur-slow) var(--ease-out);
}
.demo-meter--warn > i { background: var(--demo-warning); }
.demo-meter--bad > i { background: var(--demo-danger); }

/* buttons inside a frame — the tenant's capsule buttons (DESIGN.md §3.4).
   The marketing `.btn` is brand chrome and never appears inside a frame. */
.demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  color: rgb(var(--color-primary-contra));
  background: rgb(var(--color-primary));
  box-shadow: var(--shadow-glass-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.demo-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-glass); }
.demo-btn:active { transform: translateY(1px) scale(.98); }
.demo-btn[disabled] { opacity: .4; transform: none; cursor: default; }
.demo-btn--ghost {
  color: rgb(var(--color-primary));
  background-color: rgb(255 255 255 / 0.34);
  border-color: rgb(255 255 255 / 0.6);
  box-shadow: none;
}
.demo-btn--ghost:hover { background-color: rgb(255 255 255 / 0.55); box-shadow: none; }

/* toast — .glass-strong, bottom-left of the frame, slides in from the left
   (DESIGN.md §3.8). ctx.toast() writes into it; the kit owns the motion. */
.demo-toast {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  max-width: 42ch;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  color: var(--demo-heading);
  background-color: rgb(255 255 255 / 0.76);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-glass);
  opacity: 0;
  transform: translateX(-14px);
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.demo-toast.is-on { opacity: 1; transform: none; }

/* the two layouts every figure demo needs: a row of stat tiles, and
   label / meter / amount rows (collections-card, ageing-buckets, dashboard) */
.demo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 9px;
}
.demo-meters { display: grid; gap: 8px; }
.demo-stats + .demo-meters { margin-top: 14px; }
.demo-meter-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 92px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--demo-muted);
}
.demo-meter-row .amt {
  text-align: right;
  font-size: 12px;
  color: var(--demo-heading);
  font-variant-numeric: tabular-nums;
}

/* small type helpers used across demos */
.demo-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--demo-muted);
}
.demo-muted { color: var(--demo-muted); }
.demo-num { font-variant-numeric: tabular-nums; }
/* announced by a screen reader, never seen — put the aria-live region here */
.demo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── §6 Fallbacks — mandatory and global (DESIGN.md §3.11) ─────────────────
   resources/css/app.css:256–273. The reduced-motion rule is scoped to `.demo`
   because site.css already owns the page-level one (site.css:346–349). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong, .glass-tint,
  .demo-frame__bar, .demo-frame__rail, .demo-section, .demo-toast { background-color: rgb(255 255 255 / 0.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-strong, .glass-tint,
  .demo-frame__bar, .demo-frame__rail, .demo-section, .demo-toast {
    background-color: rgb(255 255 255 / 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass-subtle, .demo-stat, .seg, .demo-table tbody td, .demo-frame__user, .demo-meter {
    background-color: rgb(255 255 255 / 0.86);
  }
  .demo-frame, .demo-phone__screen { background-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .demo, .demo *, .demo *::before, .demo *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}
@media print {
  .demo-frame, .demo-phone__screen { background-image: none; }
  .glass, .glass-strong, .glass-tint, .glass-subtle,
  .demo-frame__bar, .demo-frame__rail, .demo-section, .demo-stat, .demo-toast {
    background: #fff;
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-color: rgb(46 41 35 / 0.12);
  }
}

/* ── §7 Responsive — every demo works at 375 px ───────────────────────────── */
@container (max-width: 720px) {
  .demo-frame { padding: 8px; gap: 8px; border-radius: 18px; }
  /* the rail folds to a row of chips above the body */
  .demo-frame { grid-template-columns: minmax(0, 1fr); }
  .demo-frame__bar { grid-column: 1; }
  .demo-frame__rail {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 6px;
  }
  .demo-frame__rail-label { display: none; }
  .demo-rail__item { width: auto; flex: none; padding: 6px 12px; }
  .demo-frame__body { grid-column: 1; grid-row: 3; }
  .demo-section__body { padding: 12px 13px; }
  .demo-phone { width: 100%; max-width: 320px; }
  .demo-meter-row { grid-template-columns: 68px minmax(0, 1fr) 82px; gap: 8px; font-size: 11.5px; }
  .demo-toast { left: 10px; right: 10px; bottom: 10px; }
}
@container (max-width: 560px) {
  /* the top bar keeps the school and the avatar; the account name is a
     `.demo-frame__user-name` span so the kit can drop it here. */
  .demo-frame__user { padding: 4px; }
  .demo-frame__user-name { display: none; }
}

/* [ADDED by conductor, academic lane request] A demo that gives a [hidden] element its own
   display rule would silently show it — the UA's [hidden] loses to any author display. */
.demo [hidden] { display: none !important; }

/* [ADDED by conductor, dashboard lane request] A two-line stat label must not push its figure
   below its neighbours' — the tile is a column and the value sits on its baseline. */
.demo-stat { display: flex; flex-direction: column; }
.demo-stat__v { margin-top: auto; }

/* [ADDED by conductor, e-invoice lane note] A scrolling table inside a flex/grid column still
   widens the frame unless the column carries min-width:0. */
.demo-frame__body > *, .demo-section__body > *, .demo [class*='__col'] { min-width: 0; }

/* [ADDED by conductor, companions lane request] 4.9 `.demo-frame--ink` — a product that is dark
   by design (Media Library on the Commun ink ground, Callboard near-black with house amber)
   renders in an ink frame. The demo may still re-tint accents under its own [data-demo]. */
.demo-frame--ink { background: #1A1838; border-color: rgba(255, 255, 255, 0.1); color: #ECEAF6; }
.demo-frame--ink .demo-frame__bar { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: #ECEAF6; }
.demo-frame--ink .demo-frame__title, .demo-frame--ink .demo-frame__user { color: #ECEAF6; }
.demo-frame--ink .demo-frame__title small { color: rgba(236, 234, 246, 0.6); }
.demo-frame--ink .demo-frame__mark { background: rgba(255, 255, 255, 0.12); color: #ECEAF6; }
.demo-frame--ink .demo-frame__body { background: transparent; }
.demo-frame--ink .demo-toast { background: rgba(255, 255, 255, 0.1); color: #ECEAF6; border-color: rgba(255, 255, 255, 0.14); }

/* ══════════════════════════════════════════════════════════════════════════
   §8 PRODUCT CHROME v2 — the replica rule (El, 2 September 2026)
   "coded, identical to the true visual, interactive; as nice as the actual
   or better, never worse; performance and flexibility over exactness."
   Every primitive here is modelled on the real School Admin shell and the
   reference shots (docs/plan/marketing-v2/reference/*.png):
     Layout/CMSLayout/Base.svelte:294   floating top bar (h-12 .glass, px-4)
     Layout/CMSLayout/Base.svelte:323   collapsed icon rail (3rem, 36 px mark)
     resources/css/component.css:78     .field-glass
     Billing/Bill/Partials/Stepper.svelte, Header.svelte, EInvoicePanel.svelte
     InsightCenter/Bill.svelte, AccountReceivableAging.svelte, Reminder/List.svelte
   Type: Inter for headings, Source Sans 3 for body — tailwind.config.js:91–97.
   ═════════════════════════════════════════════════════════════════════════ */
.demo {
  --demo-font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  font-size: 14px;
}

/* 8.1 top bar as the product draws it: the page title left, help + account right */
.demo-frame__bar--page { min-height: 44px; padding: 6px 9px 6px 16px; border-radius: 16px; gap: 10px; }
.demo-frame__page-title {
  margin-right: auto;
  min-width: 0;
  font-family: var(--demo-font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--demo-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-frame__help {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--demo-font-heading);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgb(46 41 35 / 0.55);
}
.demo-frame__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgb(var(--color-primary-contra));
  background: rgb(var(--color-primary));
  box-shadow: var(--shadow-glass-sm);
}
.demo-frame__avatar svg { width: 15px; height: 15px; }

/* 8.2 the icon rail — collapsed 3rem, the school mark on top, one filled active box */
.demo-frame__rail--icons {
  width: 46px;
  align-items: center;
  gap: 4px;
  padding: 6px 5px;
  border-radius: 16px;
}
.demo-frame__rail--icons .demo-frame__mark {
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: 11px;
  font-family: var(--demo-font-heading);
  font-size: 13px;
}
.demo-rail__icon {
  flex: none;
  width: 36px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--demo-heading);
  opacity: .82;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.demo-rail__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo-rail__icon.is-active {
  opacity: 1;
  color: rgb(var(--color-primary-contra));
  background: rgb(var(--color-primary));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), var(--shadow-glass-sm);
}
.demo-rail__spacer { flex: 1; }
.demo-rail__toggle { margin-top: auto; }

/* 8.3 breadcrumb — the trail under the bar; the current page italic */
.demo-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 6px;
  font-size: 12.5px;
  color: var(--demo-muted);
}
.demo-crumb i { font-style: normal; color: var(--demo-stone); }
.demo-crumb b { font-weight: 500; font-style: italic; color: var(--demo-heading); }

/* 8.4 the italic intro lines the product writes above a list */
.demo-intro { padding: 2px 6px; font-size: 12.5px; font-style: italic; line-height: 1.55; color: var(--demo-muted); }
.demo-intro b { font-weight: 600; font-style: normal; color: var(--demo-heading); }

/* 8.5 the filter strip and its glass fields (component.css:78) */
.demo-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 8px 12px;
  border-radius: 14px;
  background-color: rgb(255 255 255 / 0.58);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-glass-sm);
}
.demo-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--demo-body);
  background-color: rgb(255 255 255 / 0.45);
  border: 1px solid rgb(255 255 255 / 0.55);
  box-shadow: inset 0 1px 2px rgb(var(--color-primary) / 0.12);
}
.demo-field svg { width: 14px; height: 14px; flex: none; color: var(--demo-stone); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.demo-field--select::after { content: ""; width: 7px; height: 7px; margin-left: 6px; border-right: 1.5px solid var(--demo-stone); border-bottom: 1.5px solid var(--demo-stone); transform: translateY(-2px) rotate(45deg); }
.demo-field .ph { color: var(--demo-stone); }
.demo-field__label { font-size: 11.5px; color: var(--demo-muted); }
.demo-filters__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--demo-body); }
.demo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: rgb(var(--color-primary));
  cursor: pointer;
}
.demo-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-link--u { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; color: var(--demo-heading); }
.demo-link--muted { color: var(--demo-muted); font-weight: 500; }

/* 8.6 page head — a record's title row: title + tags, meta line, pills; amount + actions right */
.demo-page-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 4px 6px 0; }
.demo-page-head__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--demo-font-heading); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--demo-heading); }
.demo-page-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; font-size: 12.5px; color: var(--demo-muted); }
.demo-page-head__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.demo-page-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.demo-page-head__amount { text-align: right; }
.demo-page-head__amount small { display: block; font-size: 12px; color: var(--demo-muted); }
.demo-page-head__amount b { display: block; font-family: var(--demo-font-heading); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--demo-heading); font-variant-numeric: tabular-nums; }
.demo-page-head__actions { position: relative; display: flex; align-items: center; gap: 14px; }

/* 8.7 tags and pills as the product renders them */
.demo-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.4; color: rgb(var(--color-primary)); background: rgb(var(--color-primary) / 0.10); white-space: nowrap; }
.demo-tag--doc { font-weight: 600; color: var(--demo-body); background: rgb(255 255 255 / 0.5); border: 1px solid var(--demo-line); }
.demo-tag--warn { color: var(--demo-warning-dark); background: var(--demo-warning-light); }
.demo-tag svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.demo-pill--muted { color: var(--demo-muted); background-color: rgb(255 255 255 / 0.45); border: 1px solid var(--demo-line-subtle); }
.demo-pill--muted::before { opacity: .45; }
.demo-pill--paid { background-color: var(--demo-success-light); color: var(--demo-success-dark); }

/* 8.8 stepper — Draft ✓ · Issued ✓ · Sent – · Awaiting payment ● · Paid – · E-invoiced – */
.demo-stepper { display: flex; gap: 20px; overflow-x: auto; padding: 14px 18px; }
.demo-step { display: flex; align-items: flex-start; gap: 8px; flex: none; min-width: 104px; }
.demo-step__mark { flex: none; width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--demo-line); display: grid; place-items: center; color: var(--demo-stone); background: rgb(255 255 255 / 0.4); font-size: 10px; line-height: 1; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.demo-step__mark svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.demo-step__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--demo-heading); white-space: nowrap; }
.demo-step__detail { display: block; font-size: 11px; color: var(--demo-muted); white-space: nowrap; }
.demo-step--done .demo-step__mark { color: var(--demo-success); border-color: rgb(61 107 90 / 0.45); background: var(--demo-success-light); }
.demo-step--current .demo-step__mark { border-color: rgb(var(--color-primary) / 0.6); background: #fff; }
.demo-step--current .demo-step__mark::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--color-primary)); }
.demo-step--pending .demo-step__label { color: var(--demo-stone); font-weight: 500; }

/* 8.9 the capsule menu button, text buttons and the dropdown menu */
.demo-btn--menu { color: rgb(var(--color-primary)); background-color: rgb(255 255 255 / 0.62); border-color: rgb(255 255 255 / 0.7); font-size: 13px; padding: 8px 16px; }
.demo-btn--menu svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.demo-btn--menu:hover { background-color: rgb(255 255 255 / 0.8); }
.demo-btn--text { min-height: 0; padding: 6px 4px; color: rgb(var(--color-primary)); background: none; border: 0; box-shadow: none; }
.demo-btn--text:hover { transform: none; box-shadow: none; }
.demo-btn--danger { background: var(--demo-danger); color: #fff; }
.demo-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 6;
  min-width: 224px;
  padding: 6px;
  border-radius: 14px;
  background-color: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-glass-lg);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.demo-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.demo-menu button, .demo-menu span.row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--demo-body);
  cursor: pointer;
}
.demo-menu button:hover { background: rgb(var(--color-primary) / 0.08); color: var(--demo-heading); }
.demo-menu button svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--demo-muted); }
.demo-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--demo-line-subtle); }
.demo-menu .demo-label { padding: 6px 10px 2px; }

/* 8.10 key–value rows (Submission, Related, Installments summary) */
.demo-kv { display: grid; }
.demo-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 12.5px; border-bottom: 1px solid var(--demo-line-subtle); }
.demo-kv > div:last-child { border-bottom: 0; }
.demo-kv .k { flex: none; color: var(--demo-muted); }
.demo-kv .v { min-width: 0; text-align: right; color: var(--demo-heading); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.demo-kv .v.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .02em; }

/* 8.11 KPI tiles — Insight → Bill */
.demo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.demo-kpi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  background-color: rgb(255 255 255 / 0.58);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-glass);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-glass);
}
.demo-kpi__l { font-size: 12.5px; color: var(--demo-muted); }
.demo-kpi__v { margin-top: 6px; font-family: var(--demo-font-heading); font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--demo-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-kpi__v.is-warn { color: var(--demo-warning); }
.demo-kpi__v.is-bad { color: var(--demo-danger); }
.demo-kpi__v.is-good { color: var(--demo-success); }
.demo-kpi__s { margin-top: 5px; font-size: 11.5px; color: var(--demo-muted); }
.demo-kpi__icon { flex: none; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: rgb(var(--color-primary)); background: rgb(var(--color-primary) / 0.10); }
.demo-kpi__icon--info { color: var(--demo-info); background: var(--demo-info-light); }
.demo-kpi__icon--warn { color: var(--demo-warning); background: var(--demo-warning-light); }
.demo-kpi__icon--bad { color: var(--demo-danger); background: var(--demo-danger-light); }
.demo-kpi__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 8.12 large summary tiles — the Insight Summary row: plain label, big figure */
.demo-stat--lg { padding: 13px 15px; }
.demo-stat--lg .demo-stat__l { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.demo-stat--lg .demo-stat__v { margin-top: 5px; font-family: var(--demo-font-heading); font-size: 21px; font-weight: 700; }
.demo-stat__s { margin-top: 5px; font-size: 11px; color: var(--demo-muted); }

/* 8.13 pill tabs — DUE SOON & OVERDUE (2) · OVERDUE (2) · ALL UNPAID (2) */
.demo-tabs-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--demo-line-subtle); }
.demo-tabs { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; overflow-x: auto; }
.demo-tabs button {
  position: relative;
  z-index: 1;
  flex: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--demo-heading);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.demo-tabs button[aria-pressed="true"] { color: rgb(var(--color-primary-contra)); }
.demo-tabs .indicator { top: 0; bottom: 0; left: 0; }

/* 8.14 checkbox */
.demo-check {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 5px;
  border: 1.5px solid rgb(var(--color-primary) / 0.5);
  background: rgb(255 255 255 / 0.7);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.demo-check:checked { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); }
.demo-check:checked::after { content: ""; width: 8px; height: 4px; border-left: 2px solid rgb(var(--color-primary-contra)); border-bottom: 2px solid rgb(var(--color-primary-contra)); transform: translateY(-1px) rotate(-45deg); }

/* 8.15 status split bar + legend — Bills by Status */
.demo-split { display: flex; height: 38px; border-radius: 10px; overflow: hidden; }
.demo-split > i { display: grid; place-items: center; min-width: 0; overflow: hidden; font-style: normal; font-size: 12px; font-weight: 600; color: rgb(var(--color-primary-contra)); white-space: nowrap; transition: width var(--dur-slow) var(--ease-out); }
.demo-split .paid { background: rgb(var(--color-primary)); }
.demo-split .unsettled { background: var(--demo-warning); }
.demo-legend { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 12px; font-size: 12px; color: var(--demo-body); }
.demo-legend > span { display: flex; align-items: flex-start; gap: 8px; }
.demo-legend i { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 3px; background: rgb(var(--color-primary)); }
.demo-legend i.unsettled { background: var(--demo-warning); }
.demo-legend small { display: block; font-size: 11.5px; color: var(--demo-muted); }

/* 8.16 scrim + drawer (Preview & send) and the modal (Split into instalments) —
   inside the frame; the frame is position:relative and overflow:hidden */
.demo-scrim { position: absolute; inset: 0; z-index: 7; background: rgb(46 41 35 / 0.22); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.demo-scrim.is-on { opacity: 1; pointer-events: auto; }
.demo-drawer, .demo-modal {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background-color: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-glass-lg);
}
.demo-drawer { top: 10px; right: 10px; bottom: 10px; width: min(460px, 94%); transform: translateX(calc(100% + 16px)); transition: transform var(--dur-slow) var(--ease-out); }
.demo-drawer.is-open { transform: none; }
.demo-modal { left: 50%; top: 50%; width: min(540px, 94%); max-height: 94%; transform: translate(-50%, -46%); opacity: 0; pointer-events: none; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.demo-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.demo-dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--demo-line-subtle); }
.demo-dlg__title { font-family: var(--demo-font-heading); font-size: 15px; font-weight: 600; color: var(--demo-heading); }
.demo-dlg__title small { display: block; margin-top: 2px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 12px; font-weight: 400; color: var(--demo-muted); }
.demo-dlg__close { width: 30px; height: 30px; border: 0; border-radius: 999px; background: none; color: var(--demo-muted); display: grid; place-items: center; cursor: pointer; font: inherit; }
.demo-dlg__close:hover { background: rgb(46 41 35 / 0.06); }
.demo-dlg__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.demo-dlg__body { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.demo-dlg__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--demo-line-subtle); }

/* 8.17 a message preview inside a drawer (the reminder e-mail) */
.demo-mail { padding: 12px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.55; color: var(--demo-body); background: rgb(255 255 255 / 0.7); border: 1px solid rgb(255 255 255 / 0.75); }
.demo-mail__subject { margin-bottom: 6px; font-weight: 600; color: var(--demo-heading); }
.demo-mail p { margin: 0 0 6px; }
.demo-mail p:last-child { margin-bottom: 0; }

/* 8.18 the frame's own footer line and the record-page footer */
.demo-foot { padding: 8px 0 2px; font-size: 11px; font-style: italic; text-align: center; color: var(--demo-stone); }

/* 8.19 table extras — sortable header, key column tint, sub-lines, total row */
.demo-table th.is-sort { cursor: pointer; }
.demo-table th.is-sort::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .5; }
.demo-table th.is-sort[aria-sort="ascending"]::after { transform: translateY(1px) rotate(-135deg); opacity: 1; }
.demo-table th.is-sort[aria-sort="descending"]::after { opacity: 1; color: rgb(var(--color-primary)); }
.demo-table th.is-key, .demo-table td.is-key { background-color: rgb(var(--color-primary) / 0.07) !important; }
.demo-table tbody tr.is-total td { font-weight: 700; color: var(--demo-heading); background-color: rgb(255 255 255 / 0.5); }
.demo-table td .sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--demo-muted); }
.demo-table td .sub.tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.demo-table thead th small { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--demo-stone); }
.demo-amt--bad { color: var(--demo-danger); }
.demo-amt--warn { color: var(--demo-warning-dark); }
.demo-amt--good { color: var(--demo-success); }
.demo-em { font-style: italic; color: var(--demo-muted); }

/* 8.20 the card title as the product sets it (18 px Inter) — use on .demo-section__title */
.demo-section__title--lg { font-family: var(--demo-font-heading); font-size: 16px; }
.demo-section__title--lg small { margin-top: 3px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* 8.21 chips for reach (email · WhatsApp) and the child chips (IPP 1/2) */
.demo-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: rgb(var(--color-primary)); background: rgb(var(--color-primary) / 0.10); white-space: nowrap; }
.demo-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.demo-chip--amber { color: rgb(var(--color-primary-contra)); background: var(--demo-warning); }

/* 8.22 responsive — the icon rail becomes a row, the page head stacks, the drawer fills */
@container (max-width: 720px) {
  .demo-frame__rail--icons { width: auto; padding: 5px 6px; gap: 2px; }
  .demo-frame__rail--icons .demo-frame__mark { margin: 0 4px 0 0; width: 30px; height: 30px; font-size: 12px; }
  .demo-rail__icon { width: 32px; height: 30px; }
  .demo-rail__spacer, .demo-rail__toggle { display: none; }
  .demo-page-head__side { align-items: flex-start; }
  .demo-page-head__amount { text-align: left; }
  .demo-page-head__amount b { font-size: 20px; }
  .demo-drawer { width: auto; left: 8px; right: 8px; top: 8px; bottom: 8px; transform: translateY(calc(100% + 16px)); }
  .demo-stepper { gap: 16px; padding: 12px 14px; }
}
@container (max-width: 560px) {
  .demo-frame__page-title { font-size: 14.5px; }
  .demo-kpi__v { font-size: 19px; }
  .demo-tabs button { padding: 8px 14px; }
}
@media (prefers-reduced-transparency: reduce) {
  .demo-filters, .demo-kpi, .demo-menu, .demo-drawer, .demo-modal { background-color: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  .demo-filters, .demo-kpi, .demo-menu, .demo-drawer, .demo-modal { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: rgb(46 41 35 / 0.12); }
}

/* 8.23 module sub-nav in the top bar (WhatsApp CRM: Board · List · Inbox 6 · Dashboard · Settings) */
.demo-subnav { display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 6px; min-width: 0; overflow: hidden; }
.demo-subnav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--demo-heading);
  white-space: nowrap;
}
.demo-subnav__item svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.demo-subnav__item.is-active { color: rgb(var(--color-primary-contra)); background: rgb(var(--color-primary)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), var(--shadow-glass-sm); }
.demo-subnav__item.is-active svg { opacity: 1; }
.demo-subnav__badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #fff; background: var(--demo-danger); }
.demo-frame__page-title + .demo-subnav { margin-left: auto; }

/* 8.24 the attention ring — the one annotation the site draws on a replica: amber, on the
   detail the real screen is admired for, then on the control the visitor should press */
.demo-ring { position: relative; }
.demo-ring::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 3;
  border-radius: 12px;
  border: 2px solid rgb(var(--color-secondary));
  box-shadow: 0 0 0 4px rgb(var(--color-secondary) / 0.22);
  pointer-events: none;
  animation: demo-ring 1.5s var(--ease-out) infinite;
}
.demo-ring--pill::after { border-radius: 999px; }
@keyframes demo-ring {
  0% { transform: scale(1.06); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 8.25 message bubbles and the composer (WhatsApp CRM inbox) */
.demo-bubble { position: relative; max-width: 78%; padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--demo-heading); background: rgb(255 255 255 / 0.78); border: 1px solid rgb(255 255 255 / 0.8); box-shadow: var(--shadow-glass-sm); align-self: flex-start; }
.demo-bubble--school { align-self: flex-end; background: rgb(var(--color-primary) / 0.10); border-color: rgb(var(--color-primary) / 0.16); }
.demo-bubble__meta { display: block; margin-top: 4px; font-size: 10.5px; color: var(--demo-muted); }
.demo-bubble--school .demo-bubble__meta { text-align: right; }
.demo-bubble.is-new { animation: demo-bubble-in var(--dur-slow) var(--ease-out); }
@keyframes demo-bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo-divider { align-self: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; color: var(--demo-muted); background: rgb(255 255 255 / 0.6); border: 1px solid rgb(255 255 255 / 0.7); }
.demo-composer { display: flex; align-items: center; gap: 8px; }
.demo-composer__input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  color: var(--demo-heading);
  background-color: rgb(255 255 255 / 0.45);
  border: 1px solid rgb(255 255 255 / 0.55);
  box-shadow: inset 0 1px 2px rgb(var(--color-primary) / 0.12);
  outline: none;
}
.demo-composer__input::placeholder { color: var(--demo-stone); }
.demo-composer__input:focus { background-color: rgb(255 255 255 / 0.85); border-color: rgb(var(--color-primary) / 0.4); box-shadow: inset 0 1px 2px rgb(var(--color-primary) / 0.08), var(--shadow-glow); }
.demo-composer__input.is-typing { caret-color: transparent; background-image: linear-gradient(rgb(var(--color-primary)), rgb(var(--color-primary))); background-size: 1.5px 18px; background-repeat: no-repeat; background-position: var(--caret-x, 13px) center; }
.demo-icon-btn { width: 32px; height: 32px; flex: none; border: 0; border-radius: 999px; background: none; color: var(--demo-muted); display: grid; place-items: center; cursor: pointer; }
.demo-icon-btn:hover { background: rgb(46 41 35 / 0.06); color: var(--demo-heading); }
.demo-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-qr { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgb(255 255 255 / 0.7); border-radius: 999px; background: rgb(255 255 255 / 0.55); font: inherit; font-size: 12px; font-weight: 600; color: rgb(var(--color-primary)); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out); }
.demo-qr:hover { background: rgb(255 255 255 / 0.85); }
.demo-qr svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.demo-format { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--demo-muted); }
.demo-format b { font-family: var(--demo-font-heading); font-size: 12px; color: var(--demo-heading); }
.demo-format i { font-style: italic; font-size: 12px; color: var(--demo-heading); }
.demo-format s { font-size: 12px; color: var(--demo-heading); }
.demo-format code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--demo-heading); }

/* 8.26 kanban board (Lead funnel) */
.demo-board { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 12px; scroll-snap-type: x proximity; }
.demo-board__col { flex: none; width: 214px; min-height: 300px; scroll-snap-align: start; border-radius: 12px; padding: 2px; transition: background-color var(--dur-fast) var(--ease-out); }
.demo-board__col.is-over { background: rgb(var(--color-primary) / 0.07); }
.demo-board__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--demo-heading); }
.demo-board__head svg { width: 11px; height: 11px; fill: var(--demo-warning); stroke: none; margin-left: 4px; vertical-align: -1px; }
.demo-board__head.is-outside { color: var(--demo-stone); }
.demo-board__count { font-weight: 500; letter-spacing: 0; color: var(--demo-muted); }
.demo-board__cards { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.demo-card {
  position: relative;
  padding: 10px 12px 11px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.72);
  border: 1px solid rgb(255 255 255 / 0.85);
  box-shadow: var(--shadow-glass-sm);
  font-size: 12px;
  color: var(--demo-body);
  cursor: grab;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.demo-card:hover { box-shadow: var(--shadow-glass); }
.demo-card:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.75); outline-offset: 2px; }
.demo-card.is-dragging { opacity: .45; }
.demo-card.is-flying { position: absolute; z-index: 9; margin: 0; pointer-events: none; transition: transform 640ms var(--ease-out), opacity var(--dur-base) var(--ease-out); box-shadow: var(--shadow-glass-lg); cursor: default; }
.demo-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.demo-card__name { font-size: 13.5px; font-weight: 600; color: var(--demo-heading); line-height: 1.3; }
.demo-card__flags { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-top: 2px; }
.demo-card__unread { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #fff; background: var(--demo-danger); }
.demo-card__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--demo-success); }
.demo-card__dot.is-closed { background: var(--demo-stone); }
.demo-card__kids { margin-top: 2px; font-size: 12px; color: var(--demo-muted); }
.demo-card__kids b { font-weight: 500; color: var(--demo-body); }
.demo-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.demo-card__source { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; color: var(--demo-body); background: rgb(var(--color-primary) / 0.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-card__source svg { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.demo-card__source span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.demo-card__owner { flex: none; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: rgb(var(--color-primary-contra)); background: rgb(var(--color-primary)); }
.demo-card__unassigned { flex: none; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 700; color: var(--demo-danger); cursor: pointer; }
.demo-card__unassigned:hover { text-decoration: underline; }
.demo-card__msg { margin-top: 8px; font-size: 11.5px; color: var(--demo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-card__reason { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--demo-body); }
.demo-card__converted { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--demo-success-dark); background: var(--demo-success-light); }
.demo-card__converted svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 720px) {
  .demo-subnav__item:not(.is-active) { display: none; }
  .demo-board__col { width: 190px; }
}