/* aw.css — Advisory Wizard shared design system (Conservative refresh).
 *
 * The single source of truth for design tokens and base component styles. Pages already used
 * the same values inline on ~23 copies; this centralises them so a change is made once. It is
 * intentionally NON-DISRUPTIVE: it defines tokens + a light base layer + reusable `aw-*`
 * component classes, and does not restyle existing page markup on its own. Link it in <head>
 * BEFORE a page's own <style> so the page can still override during migration:
 *     <link rel="stylesheet" href="aw.css">
 *
 * Brand hues are unchanged (indigo #4338CA / violet #6D28D9 / deep #1E1B4B). What the refresh
 * adds: a considered type scale, neutrals with a slight indigo bias, consistent radius and
 * softer elevation, semantic status colours, and an `aw-ic` line-icon convention.
 */

/* Self-hosted Inter (variable, Latin) — served same-origin so it satisfies the font-src 'self'
 * CSP. One file covers weights 100–900. SIL Open Font License. font-display:swap paints text
 * immediately in the system fallback, then swaps to Inter when it loads (no invisible-text flash). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}

/* iOS Safari "font boosting" (Alex's phone screenshots, 11 Sept): without this, Safari enlarges
 * the text of longer blocks it decides are body copy while leaving short ones alone, so bullets
 * in one list and cells in one table render at visibly different sizes. Opting out keeps every
 * size exactly what the stylesheet says on every browser. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The vertical scrollbar's width is always reserved (Alex, 22 Oct): switching between a long
 * list and a short one no longer shifts the whole page sideways as the bar comes and goes. */
html { scrollbar-gutter: stable; }

:root {
  /* Brand */
  --aw-brand: #4338CA;
  --aw-brand-deep: #1E1B4B;
  --aw-brand-strong: #3730A3;
  --aw-violet: #6D28D9;          /* PRIMARY ACTION colour — buttons, chips, active tab, inline links */
  --aw-violet-strong: #5B21B6;   /* primary-action hover (was hardcoded on 11 pages) */
  --aw-violet-tint: #f3ebfd;     /* pale violet wash behind ghost/outline actions */
}
/* Mortgage mode (13 Sept 2026, "Advisory Wizard · Mortgage"). nav.js sets the class on <html>
   from the deployment's firm_mode. Since 4 Nov 2026 it wears the same indigo and violet as wealth
   planning (Alex: "the only thing that changes is the functionality"); the rail's wordmark says
   which arm the firm is on. The class still hides data-advisory-only elements (cashflow, risk
   profiling, valuation tools) and shows data-mortgage-only ones. No separate colour set. */
html.aw-mode-mortgage [data-advisory-only] { display: none !important; }
/* The mirror (13 Oct 2026): elements marked data-mortgage-only (the Report Builder's Mortgage
   and Protection step) exist only in mortgage mode. */
html:not(.aw-mode-mortgage) [data-mortgage-only] { display: none !important; }
/* Risk-profiling mode (3 Oct 2026, server/risk-mode.js): in 'external' the firm keeps its own
   profiler — the in-app questionnaire and the house fund rating are not offered. */
html.aw-risk-external [data-risk-inapp] { display: none !important; }
html:not(.aw-risk-external) [data-risk-external] { display: none !important; }
:root {
  --aw-brand-tint: #eef1fb;      /* pale indigo wash for icon tiles, hovers, selected rows */
  --aw-brand-line: #c7d2fe;      /* soft brand border: selected cards, drop zones, callouts (colour sweep 16 Sept) */

  /* Neutrals — biased a touch toward indigo so they read as chosen, not default grey */
  --aw-ink: #1a1d2e;             /* primary text */
  --aw-slate: #565c72;           /* secondary text */
  /* Tertiary text. Darkened from #8a90a6 (E6): that measured 3.17:1 on white and 2.92:1 on
     the canvas — below the 4.5:1 WCAG AA floor for body text, and this token carries
     captions, table meta and helper text all over the app. #676d85 is the LIGHTEST value in
     the same indigo-grey family that clears 4.5:1 on both backgrounds (5.12 / 4.70), so the
     hierarchy still reads as tertiary. Guarded by a contrast test in server/test. */
  --aw-muted: #676d85;           /* tertiary / captions */
  --aw-line: #e5e7f1;            /* hairline borders */
  --aw-line-soft: #eef0f6;       /* inner dividers */
  --aw-surface: #ffffff;         /* cards */
  --aw-canvas: #f4f5fb;          /* page background */

  /* Semantic (separate from the brand accent) */
  --aw-good: #157347;  --aw-good-bg: #e6f4ec;  --aw-good-strong: #12603c; /* success-action hover */
  --aw-warn: #b45309;  --aw-warn-bg: #fbf1e3;
  --aw-crit: #b02a37;  --aw-crit-bg: #fbebed;

  /* Elevation & shape */
  --aw-shadow-sm: 0 1px 2px rgba(20,25,50,.06);
  --aw-shadow-md: 0 2px 10px rgba(20,25,50,.06);
  --aw-shadow-lg: 0 12px 30px rgba(30,27,75,.12);
  --aw-r-sm: 8px;
  --aw-r: 12px;
  --aw-r-lg: 16px;

  /* Type — Inter when present (self-host to guarantee it), else a refined system stack */
  --aw-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --aw-fs-1: 26px;   /* page title */
  --aw-fs-2: 19px;   /* section heading */
  --aw-fs-3: 15px;   /* card heading */
  --aw-fs-body: 14px;
  --aw-fs-sm: 13px;
  --aw-fs-xs: 11.5px;
  --aw-lh: 1.55;

  /* Spacing scale (4px base) */
  --aw-s1: 4px; --aw-s2: 8px; --aw-s3: 12px; --aw-s4: 16px; --aw-s5: 20px; --aw-s6: 24px; --aw-s8: 32px;

  /* Back-compat aliases: the pages that already use these names inherit the canonical values */
  --primary: var(--aw-brand);
  --text: var(--aw-ink);
  --muted: var(--aw-slate);
  --border: var(--aw-line);
  --bg: var(--aw-canvas);
  --success: var(--aw-good);
  --warn: var(--aw-crit);
}

/* ── Line-icon convention: inline 24×24 SVGs with stroke=currentColor take the parent's colour ── */
.aw-ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9;
         stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* aw-ic-sm is routinely used WITHOUT aw-ic (toolbar buttons etc.) — it must carry the full
   line-icon treatment itself, or the stroke paths render as solid black FILLED silhouettes
   (the "strange emoji" look Alex flagged on Regenerate/Undo, 10 Aug). */
.aw-ic-sm { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9;
            stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -2px; }
/* Heading icon — sits before an <h3> label, inherits the heading's colour via currentColor.
   Pairs with the reusable #ic-* SVG sprite. */
.hic { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9;
       stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -3px; margin-right: 5px; }

/* ── Reusable components (adopted page-by-page during migration) ── */
.aw-card {
  background: var(--aw-surface); border: 1px solid var(--aw-line); border-radius: var(--aw-r);
  box-shadow: var(--aw-shadow-sm); padding: var(--aw-s5);
}
.aw-card__title {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--aw-slate); margin: 0 0 var(--aw-s3); display: flex; align-items: center; gap: var(--aw-s2);
}

/* Primary action = VIOLET (E6, Alex's call 27 Jul 2026). This class declared indigo while
   every page in the app rendered its primary button violet — the rule was the odd one out,
   not the pages, so the rule moved. Indigo stays what it always was: headings, the nav's
   active segment, and the brand itself. */
.aw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 var(--aw-fs-sm)/1 var(--aw-font); color: #fff; background: var(--aw-violet);
  border: 1px solid transparent; border-radius: var(--aw-r-sm); padding: 10px 15px;
  cursor: pointer; box-shadow: var(--aw-shadow-sm); transition: background .15s, box-shadow .15s, transform .05s;
}
.aw-btn:hover { background: var(--aw-violet-strong); }
.aw-btn:active { transform: translateY(1px); }
.aw-btn--ghost { background: transparent; color: var(--aw-violet); border-color: color-mix(in srgb, var(--aw-violet) 32%, var(--aw-line)); box-shadow: none; }
.aw-btn--ghost:hover { background: var(--aw-violet-tint); }
.aw-btn:focus-visible { outline: 2px solid var(--aw-violet); outline-offset: 2px; }

.aw-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--aw-fs-xs); font-weight: 600;
  padding: 3px 10px; border-radius: 20px; background: var(--aw-brand-tint); color: var(--aw-brand);
}
.aw-chip--good { background: var(--aw-good-bg); color: var(--aw-good); }
.aw-chip--warn { background: var(--aw-warn-bg); color: var(--aw-warn); }
.aw-chip--crit { background: var(--aw-crit-bg); color: var(--aw-crit); }
.aw-chip .aw-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.aw-table { width: 100%; border-collapse: collapse; font-size: var(--aw-fs-sm); }
.aw-table th {
  text-align: left; padding: 7px 8px; color: var(--aw-slate); font-weight: 600;
  font-size: var(--aw-fs-xs); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1.5px solid var(--aw-line);
}
.aw-table td { padding: 8px; border-bottom: 1px solid var(--aw-line-soft); font-variant-numeric: tabular-nums; }
.aw-table tr:last-child td { border-bottom: none; }

.aw-input {
  width: 100%; font: var(--aw-fs-body)/1.4 var(--aw-font); color: var(--aw-ink);
  background: var(--aw-surface); border: 1px solid var(--aw-line); border-radius: var(--aw-r-sm);
  padding: 10px 12px; transition: border-color .15s, box-shadow .15s;
}
.aw-input:focus { outline: none; border-color: var(--aw-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aw-brand) 15%, transparent); }

.aw-num { font-variant-numeric: tabular-nums; }

/* ── Standard empty / error state ── a centred icon + title + message, used where a list or
   panel has nothing to show yet. Pair the icon with a #ic-* sprite symbol. */
.aw-empty { text-align: center; padding: 30px 18px; color: var(--aw-slate); }
.aw-empty__icon { width: 34px; height: 34px; margin: 0 auto 10px; display: block; stroke: currentColor;
                  fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .4; }
.aw-empty__title { font-size: 13.5px; font-weight: 600; color: var(--aw-ink); margin: 0 0 3px; }
.aw-empty__text { font-size: 12.5px; margin: 0; line-height: 1.5; }
.aw-empty__text a { color: var(--aw-brand); font-weight: 600; text-decoration: none; }
.aw-empty--error { color: var(--aw-crit); }
.aw-empty--error .aw-empty__icon { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .aw-btn { transition: none; }
}

/* ── Cross-document view transitions ──
 * Same-origin navigations cross-fade instead of white-flashing (Chromium 126+ / Safari 18.2+;
 * other browsers simply ignore this). The rail is identical on both sides of a navigation, so
 * only the page content appears to change — the single biggest smoothness win for a
 * multi-page app with no router. Disabled under reduced motion. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── Compliance & Regulation strip (7 Sept 2026) ── the section's destinations as chips on each
   of its pages (mounted by AWComplianceStrip in aw-ui.js into <nav class="cr-strip" data-cr-strip>),
   so an adviser inside one page can reach the others without the rail. */
.cr-strip{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 20px}
.cr-chip{display:inline-block;font-size:12.5px;font-weight:600;color:var(--aw-brand);background:var(--aw-surface);border:1px solid var(--aw-line);border-radius:999px;padding:7px 14px;text-decoration:none;transition:background .12s,border-color .12s}
.cr-chip:hover{background:var(--aw-brand-tint);border-color:#c7c9f0}
.cr-chip.active{background:var(--aw-brand);border-color:var(--aw-brand);color:#fff}
/* 19 Oct 2026: the strip's first chip is the way back to the Firm Management centre. */
.cr-chip.back{color:var(--aw-muted);border-style:dashed;margin-right:6px}
.cr-chip.back:hover{color:var(--aw-brand)}

/* ── Dialog house style (Alex, 4 Nov 2026: "make this style our default") ──
   The Add Meeting dialog's look, applied to every dialog and form in the app: a pale indigo
   title band with the title in the deep brand colour, field headings in the brand blue, drop
   zones in the brand tint, and an indigo wash behind the window instead of black. This file is
   loaded before each page's own styles, so the selectors carry a `body` prefix to outrank the
   page rules of the same shape (.modal-header h2, .field label, .drop …) without !important.
   In mortgage mode the same tokens resolve to the teal set. */
body .modal-overlay, body .awcm-overlay, body .overlay, body .aw-cm-overlay, body .aw-mi-overlay, body .sheet { background: rgba(30, 27, 75, .32); }
body .modal-header, body .awcm-overlay .modal-header {
  background: var(--aw-brand-tint); border-bottom: 1px solid var(--aw-brand-line);
  border-radius: var(--aw-r) var(--aw-r) 0 0;
}
body .modal-header h2, body .modal-header h3, body .modal > h3, body .aw-cm h3, body .sheet h2 {
  color: var(--aw-brand-deep); font-weight: 700; letter-spacing: -.01em;
}
body .modal-close { color: var(--aw-brand); }
body .awcm-overlay .modal { border-radius: var(--aw-r); }
body .field label, body .frow label, body .fg label, body .mw-filter label, body .awcm-overlay .modal-section h3 { color: var(--aw-brand); }
body .drop, body .dropzone, body .drop-hint {
  border-color: var(--aw-brand-line); background: var(--aw-brand-tint); color: var(--aw-brand);
}