/* ═══════════════════════════════════════════════════════════
   AFFLUENCE CAPITAL — MASTER DESIGN SYSTEM
   theme.css  ·  loaded after every page-specific CSS
   Handles: design tokens, dark mode, theme toggle
═══════════════════════════════════════════════════════════ */

/* Marcellus + Quicksand are self-hosted — see fonts.css (loaded by every page
   before this file). Do NOT re-add the Google Fonts @import here: a second,
   slower, network-dependent @font-face source for the same family/weight wins
   the cascade once it resolves and silently replaces the reliable self-hosted
   one, which is exactly the bug fonts.css was introduced to avoid. */

/* ── Light-mode tokens (default) ────────────────────────── */
:root {
  color-scheme: light;

  /* Type ladder — see CLAUDE.md. Five steps, one token family, nothing between
     them. Defined here beside the colours because size and colour are picked
     together: de-emphasis is --muted at body size, never a smaller size. */

  /* Brand palette */
  --ac-steel:        #4E7A97;           /* deepened for contrast */
  --ac-steel-lt:     #698DAA;           /* original SVG branch colour */
  --ac-steel-bright: #8BAFC8;
  --ac-steel-dim:    rgba(105,141,170,0.10);
  --ac-steel-border: rgba(105,141,170,0.22);
  --ac-steel-glow:   rgba(105,141,170,0.20);

  /* Surface palette */
  --ac-bg:       #EEF3F9;
  --ac-surface:  #FFFFFF;
  --ac-surface2: #F5F8FC;
  --ac-ink:      #0D1B2E;
  --ac-muted:    #526073;
  --ac-line:     rgba(13,27,46,0.09);
  --ac-line2:    rgba(13,27,46,0.14);
  --ac-shadow: none;
  --ac-shadow-lg:0 2px 8px rgba(13,27,46,0.07), 0 18px 48px rgba(13,27,46,0.11);

  /* States */
  --ac-success: #136639;
  --ac-danger:  #8C2412;
  --ac-warning: #8A5C0A;
  /* Soft fill + hairline for each state, the same pairing --ac-steel-dim /
     --ac-steel-border provides for the brand. Spelled out per theme rather
     than mixed at runtime so an unsupported colour function can never drop
     the declaration and leave a transparent chip. */
  --ac-danger-dim:    rgba(140,36,18,0.09);
  --ac-danger-border: rgba(140,36,18,0.28);
  --ac-warning-dim:    rgba(138,92,10,0.10);
  --ac-warning-border: rgba(138,92,10,0.26);

  /* Alias to old names (backwards compat with existing page CSS) */
  --navy:       var(--ac-ink);
  --mist:       #C4D3E2;
  --paper:      var(--ac-bg);
  --panel:      var(--ac-surface);
  --ink:        var(--ac-ink);
  --muted:      var(--ac-muted);
  --brand:      var(--ac-steel);
  --brand-soft: var(--ac-steel-dim);
  --accent:     var(--ac-steel-lt);
  --line:       var(--ac-line2);
  /* THE CARD SURFACE. One pair, both portals, both themes — the fill a card
     sits on and the hairline around it. It exists because --panel could not
     do this job: in DARK --panel is #0F1A27, which is the page ground itself,
     so a card painted with it is invisible. Every card therefore hand-mixed
     its own dark fill and two conventions grew — rgba(255,255,255,0.04) over
     the ground (#192330) on the dashboard and the client record, and #0F1D30
     on the tab panels — with the outline splitting the same way, steel
     rgba(78,122,151,0.20) on most cards against --line's stone
     rgba(238,232,223,0.12) on the Settings sections. Measured on a phone
     2026-09-28: three card fills and two outline colours on one page.
     The lighter fill wins because a card has to READ as a surface on a
     phone: #192330 lifts 10 points off the ground, #0F1D30 lifts 3. */
  --ac-card:      #FFFFFF;
  --ac-card-line: rgba(13,27,46,0.14);
  --shadow: none;
  --success:    var(--ac-success);
  --danger:     var(--ac-danger);

  /* Toggle */
  --theme-paper:       var(--ac-bg);
  --theme-panel:       var(--ac-surface);
  --theme-ink:         var(--ac-ink);
  --theme-muted:       var(--ac-muted);
  --theme-line:        var(--ac-line2);
  --theme-shadow: none;
  --theme-field:       #FFFFFF;
  --theme-field-soft:  rgba(105,141,170,0.08);
  --theme-ghost:       rgba(105,141,170,0.12);
  --theme-ghost-line:  rgba(13,27,46,0.12);
  --theme-toggle-bg:   rgba(255,255,255,0.95);
  --theme-toggle-ink:  var(--ac-ink);

  /* Typography scale — integer-px ramp, the only font sizes either portal
     should use: 9 10 11 12 13 14 15 16 17 18 21 24 27 29 32 (+ display).
     Prefer these tokens for new CSS; never introduce pt/rem font sizes. */
  /* ── Type ladder ────────────────────────────────────────────────────────
     Five steps. Pick by the ROLE of the text, never by how big you want it to
     look; if no role fits, the layout is wrong, not the scale.

     Every step is visibly a step — 1.18x, 1.31x, 1.24x, 1.38x. That is the
     point. Sizes a pixel apart carry nothing to a reader and only invite
     guessing, which is how the portal reached 34 distinct sizes and three
     disagreeing answers to "how big is a heading".

     Emphasis and de-emphasis are WEIGHT and COLOUR, never size. Secondary text
     is --muted at body size, not black one pixel smaller. Almost every stray
     size this replaced existed to make something slightly quieter or slightly
     louder.

     Nothing below 11px is text. No fractional pixels. Icon glyphs and display
     numerals are exempt — sized to their box, still integer px, and the
     exemption is commented where it is taken or it is a bug. */
  --ac-fs-small:      11px;  /* column headers, captions, footnotes, hints, pills, chart labels */
  --ac-fs-body:       13px;  /* THE DEFAULT — running text, table cells, inputs, buttons */
  --ac-fs-card-title: 17px;  /* card and sub-section headings (h3, h4) */
  --ac-fs-panel-title:21px;  /* panel heading (h2) */
  --ac-fs-page-title: 29px;  /* page heading (h1) — one per page */

  /* Spacing scale — a 4px grid, the counterpart to the border-radius canon
     (2/4/8/12/16/20/999px). Prefer these for new CSS. Existing off-grid values
     (notably 14px and 18px, ~150 uses) are legacy: migrate them to the nearest
     step opportunistically, never in a sweep — a 2px shift across every card is
     a lot of visual risk for no perceptible gain. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Semantic spacing — prefer these over raw steps: they say WHY, so a later
     change to "card padding" is one edit rather than a search-and-replace. */
  --pad-panel:      var(--space-5);  /* outer panel / card body            */
  --pad-card:       var(--space-4);  /* nested card inside a panel         */
  --pad-card-tight: var(--space-3);  /* dense card, list row, menu         */
  --gap-tight:      var(--space-2);  /* icon↔label, inline clusters        */
  --gap-stack:      var(--space-3);  /* stacked fields / list items        */
  --gap-section:    var(--space-4);  /* between sections in a card body    */

  /* Form controls are sized from the 46px control height + 1px border rather
     than the grid — that derivation is why 11px appears instead of 12px.
     Keep controls on this token so the relationship stays visible. */
  --pad-control: 11px 14px;
}

/* ── Dark-mode tokens ───────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Exact values from affluence-portal-app.html demo */
  /* The outermost background — everything the page floats on. Was #07101E
     while body was painted #0F1A27 elsewhere, so the two disagreed. */
  --ac-bg:       #0F1A27;
  /* Lifted 2026-09-07. The surface was rgba(12,26,46,0.96) over a #0F1A27
     page — about a 2% step in luminance — edged with a 7% line, so a card
     barely read as a container and the screen looked like one flat navy field
     with text floating on it. #16233A is not a new colour: it is already the
     light in the portfolio hero's dark gradient. */
  --ac-surface:  #16233A;
  --ac-surface2: #1B2B45;
  --ac-ink:      #EEE8DF;          /* warm cream — matches demo --text-1 */
  --ac-muted:    rgba(238,232,223,0.60);
  --ac-line:     rgba(238,232,223,0.13);
  /* The sidebar's own surface. It was written out by hand in three places that
     had drifted apart — the pinned brand row ended up a different navy from the
     nav beneath it, which showed as a seam under the logo. One value now. */
  --ac-sidebar-surface: #0F1D30;
  --ac-line2:    rgba(238,232,223,0.12);
  --ac-shadow: none;
  --ac-shadow-lg:0 8px 56px rgba(0,0,0,0.64);

  /* State colours. These were defined only in the light :root block, so every
     red/amber/green in BOTH portals rendered dark-on-dark once the theme
     flipped. Lightened here to clear 4.5:1 on the dark ground rather than
     reusing the light values, which are tuned for a near-white page.
     The --success/--danger back-compat aliases below resolve through these,
     so they pick the new values up without being restated. */
  --ac-success: #6FBF8E;
  --ac-danger:  #E9917C;
  --ac-warning: #E0B463;
  --ac-danger-dim:    rgba(233,145,124,0.12);
  --ac-danger-border: rgba(233,145,124,0.30);
  --ac-warning-dim:    rgba(224,180,99,0.12);
  --ac-warning-border: rgba(224,180,99,0.28);

  --ac-steel-dim:    rgba(78,122,151,0.10);
  --ac-steel-border: rgba(78,122,151,0.26);

  /* Backwards compat aliases */
  --navy:       var(--ac-ink);
  --paper:      var(--ac-bg);
  --panel:      #0F1A27;
  --ink:        var(--ac-ink);
  --muted:      rgba(238,232,223,0.60);
  /* Light counterpart of --muted-soft: the light value is dark ink and would
     vanish on this ground. 6.9:1 on the dark surface. */
  --muted-soft: #9FB0C4;
  --brand:      var(--ac-steel-lt);
  --brand-soft: rgba(78,122,151,0.18);
  --accent:     var(--ac-steel-bright);
  --line:       var(--ac-line2);
  /* See the note on the light pair. #192330 is the solid form of the
     rgba(255,255,255,0.04) overlay the dashboard already used over this
     ground — written as a hex so a card reads the same wherever it sits,
     not one colour on the page and another over a panel. */
  --ac-card:      #192330;
  --ac-card-line: rgba(78,122,151,0.20);
  --shadow: none;

  --theme-paper:       var(--ac-bg);
  --theme-panel:       #0F1D30;
  --theme-ink:         #EEE8DF;
  --theme-muted:       rgba(238,232,223,0.60);
  --theme-line:        rgba(238,232,223,0.12);
  --theme-shadow: none;
  --theme-field:       rgba(7,16,30,0.55);
  --theme-field-soft:  rgba(78,122,151,0.10);
  --theme-ghost:       rgba(78,122,151,0.18);
  --theme-ghost-line:  rgba(78,122,151,0.26);
  --theme-toggle-bg:   rgba(12,26,46,0.96);
  --theme-toggle-ink:  #EEE8DF;
}

/* ── Shared typography standard ─────────────────────────── */
body {
  font-size: var(--ac-fs-body);
}

.eyebrow {
  font-size: var(--ac-fs-small);
}

.hero h1,
.page-header-text h1,
.auth-section-title,
.welcome-title {
  font-size: var(--ac-fs-page-title);
  line-height: 1.05;
}

.panel-head h2 {
  font-size: var(--ac-fs-panel-title);
}

.form-section h3,
.card > h3,
.dashboard-list-head h3,
.authorisation-group-head h3,
.profile-section-title {
  font-size: var(--ac-fs-card-title);
}

.lede,
.panel-head p,
.hero-note p,
.help-text,
.status,
.meta,
.hero-note p,
.profile-summary-copy p,
.dashboard-item-copy span,
.authorisation-copy .meta,
.upload-or,
.upload-file-name,
.timeline-copy .meta,
.auth-section-sub,
.welcome-subtitle {
  font-size: var(--ac-fs-small);
}

.hero-greeting {
  font-size: 16px;
}

.profile-summary-copy h3,
.authorisation-copy h3 {
  font-size: 16px;
}

.dashboard-item-copy strong,
.profile-detail-item strong {
  font-size: 13px;
}

.profile-section-title {
  font-family: Marcellus, Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* ── Dark mode page background ──────────────────────────── */
:root[data-theme="dark"] body {
  background: #0F1A27;
  color: var(--ac-ink);
}

/* ── Dark mode panel / card overrides ───────────────────── */

/* Sidebar — filled card floating away from screen edges */
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .sidebar-brand {
  background: var(--ac-sidebar-surface) !important;
}
:root[data-theme="dark"] .sidebar {
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Section panels — same tone as sidebar so content area reads as one surface */
:root[data-theme="dark"] .hero-copy,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .portal-hero,
:root[data-theme="dark"] .auth-panel,
:root[data-theme="dark"] .content-panel {
  background: #0F1D30;
  border-color: rgba(78,122,151,0.20);
  box-shadow: none;
}

/* Inner cards sit one step lighter so they lift off the section panel */
:root[data-theme="dark"] .submission-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stack-item,
:root[data-theme="dark"] .upload-card,
:root[data-theme="dark"] .results-summary,
:root[data-theme="dark"] .profile-item {
  background: #132236;
  border-color: rgba(78,122,151,0.26);
  box-shadow: none;
}

:root[data-theme="dark"] .portal-hero {
  background: rgba(12,26,46,0.90);
}

:root[data-theme="dark"] .portal-hero .hero-copy {
  background: transparent;
  border-color: rgba(78,122,151,0.20);
  box-shadow: none;
}

/* Top shimmer line on cards */
:root[data-theme="dark"] .stat-card::before,
:root[data-theme="dark"] .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,175,200,0.30), transparent);
  border-radius: inherit;
}

:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .card {
  position: relative;
  overflow: hidden;
}

/* Choice controls — dark mode */
:root[data-theme="dark"] .choice-card span:not(.cdc-tip-bubble),
:root[data-theme="dark"] .choice-pill span:not(.cdc-tip-bubble),
:root[data-theme="dark"] .document-type-pill span,
:root[data-theme="dark"] .upload-trigger,
:root[data-theme="dark"] .option,
:root[data-theme="dark"] .bands div {
  background: var(--theme-field-soft);
  border-color: var(--theme-line);
}

/* Authorisation group uses the same base as the section panel — no extra card lift */
:root[data-theme="dark"] .authorisation-group {
  background: transparent;
  border-color: rgba(78,122,151,0.20);
  box-shadow: none;
}

/* Selected states — dark mode: ring / highlight style */
:root[data-theme="dark"] .branch-btn.active {
  background: rgba(78,122,151,0.18);
  border-color: rgba(139,175,200,0.70);
  color: #EEE8DF;
  box-shadow: 0 0 0 2px rgba(78,122,151,0.22);
}

:root[data-theme="dark"] .choice-card input:checked + span,
:root[data-theme="dark"] .choice-pill input:checked + span,
:root[data-theme="dark"] .document-type-pill input:checked + span {
  background: rgba(78,122,151,0.18);
  border-color: rgba(139,175,200,0.70);
  color: #EEE8DF;
  box-shadow: 0 0 0 2px rgba(78,122,151,0.22);
}

:root[data-theme="dark"] .option:has(input:checked) {
  background: rgba(78,122,151,0.16);
  border-color: rgba(139,175,200,0.60);
  box-shadow: 0 0 0 2px rgba(78,122,151,0.20);
}

:root[data-theme="dark"] .option:has(input:checked) .option-copy,
:root[data-theme="dark"] .option:has(input:checked) strong {
  color: #EEE8DF;
}

/* Indicator dot — dark mode */
:root[data-theme="dark"] .choice-card span:not(.cdc-tip-bubble)::before {
  border-color: rgba(139,175,200,0.35);
  background: transparent;
}

:root[data-theme="dark"] .choice-card input:checked + span::before {
  border-color: #8BAFC8;
  box-shadow: inset 0 0 0 4px #8BAFC8;
}

:root[data-theme="dark"] .choice-card input[type="checkbox"]:checked + span::before {
  box-shadow: inset 0 0 0 8px #8BAFC8;
}

/* Form fields — dark mode */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="number"] {
  background: var(--theme-field);
  color: var(--theme-ink);
  border-color: var(--theme-line);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: rgba(238,232,223,0.28); }

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
  border-color: var(--ac-steel-lt);
  outline-color: var(--ac-steel-glow);
}

/* Ghost buttons — dark mode */
:root[data-theme="dark"] button.ghost,
:root[data-theme="dark"] .ghost,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .group-count {
  background: var(--theme-ghost);
  color: var(--theme-ink);
  border-color: var(--theme-ghost-line);
}

:root[data-theme="dark"] .nav-link:not(.active) {
  background: transparent;
  color: var(--ac-muted);
  border-color: transparent;
}

:root[data-theme="dark"] .nav-link:not(.active):hover {
  background: rgba(105,141,170,0.35);
  color: #EEE8DF;
}

/* Status / badge colours — dark mode */
:root[data-theme="dark"] .badge.is-submitted,
:root[data-theme="dark"] .badge.is-completed,
:root[data-theme="dark"] .status.is-success { color: #6DD5A4; }

:root[data-theme="dark"] .badge.is-not_started,
:root[data-theme="dark"] .badge.is-draft     { color: var(--ac-muted); }

:root[data-theme="dark"] .badge.is-sent,
:root[data-theme="dark"] .badge.is-viewed,
:root[data-theme="dark"] .badge.is-in_progress { color: var(--ac-steel-bright); }

:root[data-theme="dark"] .status.is-error { color: #F4877A; }

:root[data-theme="dark"] .status,
:root[data-theme="dark"] .lede,
:root[data-theme="dark"] .hero-note p,
:root[data-theme="dark"] .panel-head p,
:root[data-theme="dark"] .sidebar-meta,
:root[data-theme="dark"] .meta { color: rgba(238,232,223,0.60); }

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 { color: #EEE8DF; }

:root[data-theme="dark"] .eyebrow { color: var(--ac-steel-bright); letter-spacing: 0.18em; }
:root[data-theme="dark"] .hero-score { color: var(--ac-steel-bright); }

:root[data-theme="dark"] .option strong { color: rgba(238,232,223,0.60); }

/* (Sidebar colours live with the other sidebar rules above — one place.) */

:root[data-theme="dark"] .hero-greeting { color: #EEE8DF; }

/* Upload card in dark mode */
:root[data-theme="dark"] .upload-card {
  border-color: rgba(78,122,151,0.26);
  background: rgba(78,122,151,0.03);
}
:root[data-theme="dark"] .upload-card:hover {
  border-color: rgba(105,141,170,0.50);
  background: rgba(78,122,151,0.08);
}
:root[data-theme="dark"] .upload-trigger {
  background: rgba(78,122,151,0.12);
  border-color: rgba(78,122,151,0.26);
  color: #8BAFC8;
}
:root[data-theme="dark"] .upload-trigger:hover {
  background: rgba(78,122,151,0.22);
}

/* Logo colours — dark mode */
:root[data-theme="dark"] .brand-mark [fill="#161C33"] { fill: var(--theme-ink); }
:root[data-theme="dark"] .brand-mark [fill="#698DAA"] { fill: var(--ac-steel-lt); }

/* ── Timeline marker — dark mode ────────────────────────── */
:root[data-theme="dark"] .timeline-marker::after {
  background: rgba(8,15,29,0.9);
  border-color: var(--ac-steel-border);
}

/* ── Theme toggle button ─────────────────────────────────── */
.theme-toggle {
  position: fixed;
  top: auto;
  right: 10px;
  bottom: 10px;
  z-index: 1300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--ac-steel-border);
  border-radius: 999px;
  padding: 0;
  background: var(--theme-toggle-bg);
  color: var(--theme-toggle-ink);
  box-shadow: var(--ac-shadow, 0 2px 12px rgba(13,27,46,0.10));
  /* No backdrop-filter. This button is position:fixed and on screen at all
     times, so a blur here makes the whole scrolling page a backdrop root: the
     browser re-samples and re-blurs what is behind it on every scroll frame,
     and throws the cached raster away entirely at the scroll extremes. That
     repaint is what flickered for 1–3s when you hit the top or bottom of a
     heavy page (Model Portfolios worst — dozens of live SVG charts).
     Nothing was lost visually: --theme-toggle-bg is 95–96% opaque, so there
     was never anything showing through to blur. Same reasoning applies to
     .admin-tour-help / .portal-tour-help and the fixed mobile topbars. */
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-size: 17px;
  line-height: 1;
}

.theme-toggle-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: none;
  border-color: var(--ac-steel-lt);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--ac-steel-lt);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .theme-toggle {
    top: auto;
    right: 10px;
    bottom: 10px;
    width: 42px;
    height: 42px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ── Return to portal button ────────────────────────────── */
.return-to-portal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--theme-line);
  background: rgba(255,255,255,0.92);
  color: var(--theme-ink);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--theme-shadow);
}

.return-to-portal-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(180deg);
  transform-origin: center;
}

.return-to-portal-icon svg,
.return-to-portal-icon .return-to-portal-icon-lottie,
.return-to-portal-icon .return-to-portal-icon-lottie svg {
  width: 18px;
  height: 18px;
  display: block;
}

.return-to-portal-icon svg,
.return-to-portal-icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.return-to-portal:hover {
  background: var(--theme-field-soft);
}

:root[data-theme="dark"] .return-to-portal {
  background: rgba(15,32,64,0.72);
  color: #EEE8DF;
  border-color: rgba(78,122,151,0.26);
  box-shadow: none;
}

/* Remove button / toggle shadows in dark mode */
:root[data-theme="dark"] .theme-toggle {
  box-shadow: none;
}
:root[data-theme="dark"] .theme-toggle:hover {
  box-shadow: none;
}

/* ── Client data capture light-mode alignment ───────────── */
:root[data-theme="light"] body.cdc-page {
  background:
    radial-gradient(ellipse at 8% 6%, rgba(105,141,170,0.18) 0%, transparent 34%),
    linear-gradient(170deg, #E6EDF6 0%, #EEF3F9 100%);
  color: var(--ac-ink);
}

:root[data-theme="light"] body.cdc-page .panel {
  background: rgba(255,255,255,0.98);
  border-color: rgba(13,27,46,0.10);
  box-shadow: var(--ac-shadow);
}

:root[data-theme="light"] body.cdc-page .panel::before {
  background: linear-gradient(90deg, transparent, rgba(105,141,170,0.22), transparent);
}

:root[data-theme="light"] body.cdc-page .page-header {
  background: rgba(255,255,255,0.98);
  border-color: rgba(13,27,46,0.10);
  box-shadow: var(--ac-shadow);
}

:root[data-theme="dark"] body.cdc-page .page-header {
  background: rgba(15,32,64,0.72);
  border-color: rgba(78,122,151,0.26);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


:root[data-theme="light"] body.cdc-page .page-header-text .brand,
:root[data-theme="light"] body.cdc-page .status,
:root[data-theme="light"] body.cdc-page .field-label,
:root[data-theme="light"] body.cdc-page .label-text,
:root[data-theme="light"] body.cdc-page .panel-head p,
:root[data-theme="light"] body.cdc-page .help-text,
:root[data-theme="light"] body.cdc-page .subtext,
:root[data-theme="light"] body.cdc-page .helper-text,
:root[data-theme="light"] body.cdc-page .row-note,
:root[data-theme="light"] body.cdc-page .field-note {
  color: var(--ac-muted);
}

:root[data-theme="light"] body.cdc-page .page-header-text h1,
:root[data-theme="light"] body.cdc-page .panel-head h2,
:root[data-theme="light"] body.cdc-page .form-section h3,
:root[data-theme="light"] body.cdc-page label,
:root[data-theme="light"] body.cdc-page .field-label,
:root[data-theme="light"] body.cdc-page .label-text,
:root[data-theme="light"] body.cdc-page .branch-btn,
:root[data-theme="light"] body.cdc-page .choice-pill span:not(.cdc-tip-bubble),
:root[data-theme="light"] body.cdc-page .choice-card span:not(.cdc-tip-bubble) {
  color: var(--ac-ink);
}

:root[data-theme="light"] body.cdc-page input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
:root[data-theme="light"] body.cdc-page select,
:root[data-theme="light"] body.cdc-page textarea {
  background: #FFF;
  color: var(--ac-ink);
  border-color: rgba(13,27,46,0.12);
}

:root[data-theme="light"] body.cdc-page input::placeholder,
:root[data-theme="light"] body.cdc-page textarea::placeholder {
  color: rgba(13,27,46,0.36);
}

:root[data-theme="light"] body.cdc-page select option {
  background: #FFF;
  color: var(--ac-ink);
}

:root[data-theme="light"] body.cdc-page .branch-btn,
:root[data-theme="light"] body.cdc-page .choice-pill span:not(.cdc-tip-bubble),
:root[data-theme="light"] body.cdc-page .choice-card span:not(.cdc-tip-bubble),
:root[data-theme="light"] body.cdc-page .children-panel {
  background: rgba(105,141,170,0.08);
  border-color: rgba(13,27,46,0.10);
  box-shadow: none;
}

:root[data-theme="light"] body.cdc-page .choice-card span:not(.cdc-tip-bubble)::before {
  border-color: rgba(13,27,46,0.22);
  background: #FFF;
}

:root[data-theme="light"] body.cdc-page .branch-btn:hover,
:root[data-theme="light"] body.cdc-page .choice-pill:hover span,
:root[data-theme="light"] body.cdc-page .choice-card:hover span {
  background: rgba(105,141,170,0.14);
}

:root[data-theme="light"] body.cdc-page .branch-btn.active,
:root[data-theme="light"] .branch-btn.active,
:root[data-theme="light"] .choice-pill input:checked + span,
:root[data-theme="light"] .choice-card input:checked + span,
:root[data-theme="light"] body.cdc-page .choice-pill input:checked + span,
:root[data-theme="light"] body.cdc-page .choice-card input:checked + span,
:root[data-theme="light"] .document-type-pill input:checked + span,
:root[data-theme="light"] .option:has(input:checked) {
  background: #1C3149;
  color: #8BAFC8;
  border-color: transparent;
  box-shadow: none;
}

:root[data-theme="light"] body.cdc-page .choice-card input:checked + span::before,
:root[data-theme="light"] body.cdc-page .choice-card input[type="checkbox"]:checked + span::before,
:root[data-theme="light"] .choice-card input:checked + span::before,
:root[data-theme="light"] .choice-card input[type="checkbox"]:checked + span::before {
  border-color: #8BAFC8;
  background: #8BAFC8;
}

:root[data-theme="light"] .option:has(input:checked) .option-copy,
:root[data-theme="light"] .option:has(input:checked) strong {
  color: #8BAFC8;
}

/* ══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   Appears at top-centre, auto-dismisses after 5 s
══════════════════════════════════════════════════════════ */
.ac-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-140%);
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  font-family: "Quicksand", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  box-shadow: none;
  pointer-events: none;
  opacity: 0;
  transition: transform 360ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 220ms ease;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

/* The blur lives on the visible state, not on .ac-toast itself. theme.js keeps
   one toast element alive in the DOM for the life of the page (_toastEl), so a
   backdrop-filter on the base class left a permanent position:fixed backdrop
   root sitting invisibly over the page at opacity 0 — paying the scroll-repaint
   cost forever for a pill that shows for 5 seconds. */
.ac-toast.ac-toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Tones */
.ac-toast.ac-toast--success {
  background: rgba(22, 28, 51, 0.93);
  color: #EEE8DF;
  border: 1px solid rgba(139, 175, 200, 0.28);
}

.ac-toast.ac-toast--error {
  background: rgba(160, 40, 25, 0.95);
  color: #fff;
  border: 1px solid rgba(255, 130, 110, 0.35);
}

.ac-toast.ac-toast--info {
  background: rgba(22, 28, 51, 0.88);
  color: #C5D1DC;
  border: 1px solid rgba(197, 209, 220, 0.22);
}

/* Icon bubble */
.ac-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.ac-toast--success .ac-toast-icon {
  background: rgba(139, 175, 200, 0.22);
  color: #8BAFC8;
}

.ac-toast--error .ac-toast-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.ac-toast--info .ac-toast-icon {
  background: rgba(197, 209, 220, 0.15);
  color: #C5D1DC;
}

/* Dark mode tweaks */
[data-theme="dark"] .ac-toast--success {
  background: rgba(10, 22, 42, 0.97);
  border-color: rgba(139, 175, 200, 0.25);
}

[data-theme="dark"] .ac-toast--info {
  background: rgba(10, 22, 42, 0.92);
}

/* Mobile — drop below the floating buttons */
@media (max-width: 1080px) {
  .ac-toast {
    top: 68px;
    font-size: 13px;
    padding: 9px 16px 9px 12px;
  }
}

/* ── AC Tree "Breathe" Loader ────────────────────────────── */
.ac-loader {
  --ac-leaf:  #698DAA;
  --ac-trunk: #161C33;
  display: inline-block;
}

.ac-loader svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center;
  animation: ac-breathe 2s ease-in-out infinite;
}

.ac-loader .ac-leaf  { fill: var(--ac-leaf); }
.ac-loader .ac-trunk { fill: var(--ac-trunk); }

.ac-loader .ac-leaf {
  transform-box: fill-box;
  transform-origin: center;
  animation: ac-leaf-breath 2s ease-in-out infinite;
}

@keyframes ac-breathe {
  0%, 100% { transform: scale(0.96); }
  50%       { transform: scale(1.02); }
}

@keyframes ac-leaf-breath {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

[data-theme="dark"] .ac-loader {
  --ac-leaf:  #8BAFC8;
  --ac-trunk: #EEE8DF;
}

/* ── Full-page loader overlay ────────────────────────────── */
#acPageLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ac-bg, #EEF3F9);
  opacity: 1;
  transition: opacity 500ms ease;
  pointer-events: all;
}

#acPageLoader .ac-loader {
  width: 100px;
  height: 100px;
}

/* Fade out when initialising class is removed from body */
body:not(.portal-initializing):not(.admin-initializing) #acPageLoader {
  opacity: 0;
  pointer-events: none;
}

/* ── Shared form hero ───────────────────────────────────────
   One heading card for every onboarding form page (Client Data
   Capture, Risk Profile, Needs Analysis, Information for a Will):
   title + description on the left, AC tree + wordmark on the right.
   Theme-aware via --panel/--ink/--muted/--line. */
.form-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding: 26px 32px;
  /* --ac-* tokens, NOT the --panel/--line aliases: form pages re-declare the
     aliases at body level with slightly different values, which would make
     the "shared" hero render differently per page. */
  background: var(--ac-surface);
  border: 1px solid var(--ac-line2);
  border-radius: 20px;
}

.form-hero-copy { flex: 1; min-width: 0; }

.form-hero h1 {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 29px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0;
  color: var(--ac-ink);
}

.form-hero-desc {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ac-muted);
  max-width: 680px;
}

.form-hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 110px;
  text-align: center;
}

.form-hero-brand .brand-mark { width: 52px; height: auto; }

/* Theme-correct tree: light variant by default, dark variant in dark mode */
.form-hero-logo--dark { display: none; }
:root[data-theme="dark"] .form-hero-logo--light { display: none; }
:root[data-theme="dark"] .form-hero-logo--dark { display: block; }

.form-hero-brand-name {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-ink);
  line-height: 1.3;
}

/* Dark mode: match the tone of the other section panels */
:root[data-theme="dark"] .form-hero {
  background: #0F1D30;
  border-color: rgba(78,122,151,0.20);
}

@media (max-width: 640px) {
  .form-hero { padding: 20px; gap: 16px; align-items: flex-start; }
  .form-hero h1 { font-size: 21px; }
  .form-hero-desc { font-size: 12px; }
  .form-hero-brand { width: auto; }
  .form-hero-brand .brand-mark { width: 40px; }
  .form-hero-brand-name { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   iOS: stop the page zooming when you tap into a field
   ══════════════════════════════════════════════════════════════════════════
   Safari on iPhone zooms the whole page in when a field it is focusing has
   text smaller than 16px, and then leaves you zoomed. Nearly every input in
   this codebase is 13px, so it happened on almost every form — worst on the
   long client-facing ones, where it fires again on every field.

   The fix is the font size itself. The other way round is the viewport tag —
   `maximum-scale=1, user-scalable=no` — and it is the wrong one twice over:
   it takes pinch-zoom away from people who need it to read anything at all,
   and iOS has ignored it since iOS 10, so it would not even work.

   `!important` because the rules being overridden are more specific than a
   type selector can be (`.nt-date-input .nt-note-date`, `.tk-search input`
   and so on). This file loads last on every page in the project — both
   portals and the four standalone forms — so one block covers all of them.

   Only the types that actually trigger it: buttons, checkboxes, radios and
   ranges never zoom, and sweeping them in would resize controls for nothing.

   Applied by POINTER, not width: a 430px browser window on a desktop has no
   zoom behaviour to prevent, and a phone held in landscape is wider than most
   of our mobile breakpoints but still zooms. */
@media (pointer: coarse) {
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   No sideways drag on a touch device
   ══════════════════════════════════════════════════════════════════════════
   Marz reports the Documents page dragging left and right on his phone, on
   every section. I could not reproduce it: at 430, 700 and 820px, with long
   filenames and long document titles in all four sections, the page's own
   overflow measures zero, no element reaches past the viewport, and every
   .docs-table-wrap resolves to overflow:hidden with nothing to scroll. So
   this is CONTAINMENT, not a diagnosis — it stops the symptom without my
   having found the cause, and it is written down as such.

   `clip`, NOT `hidden`, and the difference is the whole reason this is safe
   to apply broadly. `overflow-x: hidden` makes the element a scroll container
   and promotes overflow-y to auto, which in this codebase has repeatedly
   clipped vertical content as a side effect. `overflow: clip` creates no
   scroll container at all: sticky and fixed children keep working, nested
   scrollers (the model-portfolio tables, .calc-seg, the AI chat) keep their
   own horizontal scrolling, and only the page's own sideways overflow goes.

   Touch only. On a desktop a horizontal scrollbar is how you would SEE such a
   bug, and hiding it there would just make the next one harder to find. */
@media (pointer: coarse) {
  /* On the ROOT this did nothing, which is why the first attempt at this
     changed nothing on Marz's phone. Overflow set on <html> is propagated to
     the viewport and the root itself computes to visible — and Safari does not
     propagate `clip` the way it propagates `hidden`, so the declaration was
     simply dropped on the one browser it was written for.

     On a normal element there is no propagation to lose: clip just clips. So
     it goes on the app wrappers instead, which are the full width of the
     screen and contain everything on the page. The root rule stays for the
     browsers that do honour it. */
  html { overflow-x: clip; }

  main.shell,                  /* staff: wraps the whole admin app */
  .admin-portal-layout,        /* ...and the sidebar + content row inside it */
  main.portal-shell,           /* client portal */
  #portalApp {
    overflow-x: clip;
  }
}