/* ============================================================================
   Tower Pass Design System — tokens
   Single source of truth for color, spacing, type, radius, shadow, z-index.
   Dark is the only theme today; a light theme can be added later by overriding
   these tokens under [data-theme="light"] — no such theme is built now.
   New code should prefer the semantic aliases (--brand, --accent, --success...)
   over the primitive scales.
   ============================================================================ */
/* ============================================================================
   Drapo d-for templates that the framework could not hide (Drapo d-for template rows)

   Drapo keeps a d-for's original element as its template and hides it by wrapping
   it in <span style="display:none">. That works everywhere the span is legal HTML.

   It is NOT legal inside <select>, <tr>, <tbody> or <ul>, so the parser discards or
   hoists the wrapper and the template renders as a real, visible — and in a select,
   *selectable* — item reading "{{c.name}}".

   The template is precisely identifiable: Drapo strips d-for from the items it
   renders and leaves it on the template alone. One rule, no JavaScript, and it holds
   for every list written from here on.
   ============================================================================ */
option[d-for],
optgroup[d-for],
tr[d-for],
td[d-for],
th[d-for],
li[d-for] {
    display: none !important;
}

:root {
    /* ── Color: backgrounds & surfaces ── */
    --bg-0: #0a1517;        /* app background            */
    --bg-1: #0e1d20;        /* raised surface / inputs   */
    --bg-card: #12272b;     /* cards / panels            */
    --border: #21403f;

    /* ── Color: text tiers ── */
    --text-1: #eef6f3;      /* primary   */
    --text-2: #b7cdc8;      /* secondary */
    --text-3: #7f9c96;      /* muted     */

    /* ── Color: brand & accent primitives ── */
    --brand-400: #3fbf87;
    --brand-500: #23885c;
    --accent-400: #f2b33d;

    /* ── Color: semantic primitives ── */
    --red-400: #ff6b6b;
    --green-400: #38d39f;
    --amber-400: #f0883e;

    /* ── Semantic aliases (prefer these in new code) ── */
    --brand: var(--brand-500);
    --brand-hover: var(--brand-400);
    --accent: var(--accent-400);
    --success: var(--green-400);
    --warn: var(--amber-400);
    --error: var(--red-400);
    --on-brand: #ffffff;

    /* ── Tints (subtle surface washes for badges/alerts) ── */
    --tint-brand: rgba(63,191,135,.15);
    --tint-brand-soft: rgba(63,191,135,.12);
    --tint-success: rgba(56,211,159,.15);
    --tint-warn: rgba(242,181,68,.15);
    --tint-error: rgba(255,107,107,.12);

    /* ── Spacing scale ── */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* ── Typography scale ── */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --fs-xs: .78rem;
    --fs-sm: .85rem;
    --fs-md: .95rem;
    --fs-lg: 1.1rem;
    --fs-xl: 1.6rem;
    --fs-2xl: 2.75rem;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;
    --lh-tight: 1.2;
    --lh-normal: 1.5;

    /* ── Radii ── */
    --r-sm: 6px;
    --r: 10px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
    --shadow-md: 0 8px 24px rgba(0,0,0,.35);
    --shadow-drawer: 2px 0 24px rgba(0,0,0,.35);
    --shadow-menu: 0 14px 36px rgba(0,0,0,.45);

    /* ── Layout ── */
    --nav-h: 64px;

    /* ── Focus ring (keyboard/AT visibility — WCAG 2.4.7) ── */
    --focus-ring-color: var(--brand-400);
    --focus-ring-offset: 2px;

    /* ── Z-index layers ── */
    --z-nav: 50;
    --z-overlay: 60;
    --z-drawer: 61;
    --z-panel-backdrop: 70;  /* side panels over the page (Help) */
    --z-panel: 71;

    /* ── Scrim behind modal panels ── */
    --scrim: rgba(3,6,18,.45);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg-0);
    color: var(--text-1);
    line-height: var(--lh-normal);
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

/* Skip-to-content link — off-screen until it receives keyboard focus (WCAG 2.4.1). */
.skip-link { position: absolute; left: .5rem; top: -3rem; z-index: var(--z-drawer);
    background: var(--brand); color: var(--on-brand); padding: .55rem 1rem;
    border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: var(--fw-semibold);
    text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 0; }

/* Visually-hidden (sr-only) — off-screen but present in the accessibility tree, so icon-only
   controls (☰ 🔍 × 🔔) carry a bound i18n accessible name. Drapo's d-attr-aria-label is broken
   (hyphenated attr → null), so a <span d-model> label is the reliable path. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Navbar */
/* backdrop blur lives on a ::before pseudo, not on .navbar itself: a backdrop-filter on
   .navbar would establish a containing block that traps the position:fixed click-away
   overlay to the 64px bar. */
.navbar { background: rgba(11,16,32,.9); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-nav); }
.navbar::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(8px); }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.navbar__left { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; min-width: 0; }
.navbar__brand { display: flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.navbar__logo-img { height: 34px; width: auto; }
.navbar__actions { display: flex; gap: .5rem; align-items: center; flex: 0 0 auto; }
.nav-link { color: var(--text-2); cursor: pointer; font-weight: 500; font-size: .95rem; }
.nav-link:hover { color: var(--text-1); }
.nav-user { color: var(--text-2); font-size: .9rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar__search { display: flex; align-items: center; gap: .25rem; }
.navbar__search-input { background: var(--bg-1); border: 1px solid var(--border); color: var(--text-1); border-radius: var(--r-sm); padding: .35rem .6rem; font-size: .85rem; width: 12rem; max-width: 34vw; }
.navbar__search-input::placeholder { color: var(--text-3); }
.navbar__search-btn { background: transparent; border: none; color: var(--text-2); font-size: 1rem; cursor: pointer; padding: .2rem .3rem; }
.navbar__search-btn:hover { color: var(--text-1); }
.lang-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-2); border-radius: var(--r-sm); padding: .3rem .6rem; cursor: pointer; font-size: .8rem; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-1); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .45rem; border-radius: var(--r-sm); }
.menu-toggle:hover { background: var(--bg-card); }

/* Dropdown navigation menu, anchored below the hamburger (authenticated).
   The <aside> lives inside .navbar__inner (position: relative) so it drops from the hamburger. */
.navbar__inner { position: relative; }
.nav-drawer__overlay { position: fixed; inset: 0; background: rgba(3,6,18,.35); z-index: var(--z-overlay); }
.nav-drawer { position: absolute; top: calc(100% + 8px); left: 0;
    width: 300px; max-width: calc(100vw - 2.5rem); max-height: calc(100vh - var(--nav-h) - 24px);
    background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); z-index: var(--z-drawer);
    overflow-y: auto; overscroll-behavior: contain; padding-bottom: .5rem;
    display: flex; flex-direction: column; box-shadow: var(--shadow-menu); transform-origin: top left;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.nav-drawer--open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
/* Thick, pretty scrollbar (Chromium/Edge/Safari). Note: the standard scrollbar-width/-color
   properties are intentionally NOT set here — when present, Chromium 121+ disables these
   ::-webkit-scrollbar rules, collapsing the bar back to a thin default. */
.nav-drawer::-webkit-scrollbar { width: 14px; }
.nav-drawer::-webkit-scrollbar-track { background: var(--bg-card); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.nav-drawer::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand-400), var(--brand-500));
    border-radius: 999px; border: 3px solid var(--bg-1); background-clip: padding-box; min-height: 44px; }
.nav-drawer::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6fd9a8, var(--brand-500)); background-clip: padding-box; }
.nav-drawer__header { display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-1); z-index: 1; }
.nav-drawer__title { font-weight: 700; color: var(--text-1); letter-spacing: .02em; }
.nav-drawer__close { background: transparent; border: none; color: var(--text-2); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.nav-drawer__close:hover { color: var(--text-1); }
.drawer-group { padding: 1rem 1.25rem .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 700; }
.drawer-link { display: flex; align-items: center; gap: .6rem; padding: .55rem 1.25rem; color: var(--text-2); cursor: pointer; font-weight: 500; font-size: .95rem; border-left: 3px solid transparent; }
.drawer-link__icon { flex: 0 0 1.25rem; width: 1.25rem; text-align: center; font-size: 1rem; line-height: 1; opacity: .85; }
.drawer-link:hover { background: var(--bg-card); color: var(--text-1); border-left-color: var(--brand-400); }
.cloak-nav { visibility: hidden; }

/* Hero */
.hero { padding: 4rem 0 3rem; }
.hero__title { font-size: 2.75rem; font-weight: 800; margin: .5rem 0; letter-spacing: -.02em; }
.hero__subtitle { font-size: 1.2rem; color: var(--text-2); max-width: 640px; }
.hero__cta { display: flex; gap: .75rem; margin: 1.5rem 0 2.5rem; flex-wrap: wrap; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.pillar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 1.25rem; }
.pillar h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--accent-400); }
.pillar p { margin: 0; color: var(--text-3); font-size: .92rem; }

/* Sections */
.section { padding: 2.5rem 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.section-header h2 { margin: 0; font-size: 1.6rem; }

/* Card / form */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.card h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label { font-size: .82rem; color: var(--text-3); font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
    background: var(--bg-1); border: 1px solid var(--border); color: var(--text-1);
    border-radius: var(--r-sm); padding: .6rem .7rem; font-size: .95rem; font-family: inherit;
}
.form-group textarea { resize: vertical; min-height: 4.5rem; line-height: var(--lh-normal); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--brand-400); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid transparent; border-radius: var(--r-sm); padding: .6rem 1.1rem; font-size: .95rem; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-hover); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text-1); }
.btn--ghost:hover { border-color: var(--brand-400); }
.btn--danger { background: var(--error); color: var(--on-brand); }
.btn--danger:hover { filter: brightness(1.08); }
.btn--lg { padding: .8rem 1.5rem; font-size: 1.05rem; }
.btn--sm { padding: .4rem .8rem; font-size: .85rem; }
.btn--loading { opacity: .6; pointer-events: none; }

/* Badge */
.badge { display: inline-block; padding: .25rem .6rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.badge--blue { background: var(--tint-brand); color: var(--brand-400); }
.badge--green { background: var(--tint-success); color: var(--green-400); }
.badge--red { background: var(--tint-error); color: var(--error); }
.badge--amber { background: var(--tint-warn); color: var(--warn); }

/* Pricing / plans */
.pricing { padding: 2.5rem 0 1rem; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.plan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.75rem; }
.plan-card--pro { border-color: var(--brand-400); box-shadow: 0 0 0 1px var(--brand-500) inset; }
.plan-card h3 { margin: .35rem 0; font-size: 1.4rem; }
.plan-price { font-size: 1.6rem; font-weight: 800; color: var(--accent-400); margin-bottom: 1rem; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.plan-feats li { color: var(--text-2); font-size: .92rem; }
.pricing-note { color: var(--text-3); font-size: .85rem; margin-top: 1rem; text-align: center; }

/* Landing page */
.hero--landing { padding: 5rem 0 2rem; background:
    radial-gradient(1100px 380px at 15% -10%, rgba(63,191,135,.16), transparent 60%),
    radial-gradient(900px 340px at 100% 0%, rgba(53,208,224,.12), transparent 55%); }
.hero__eyebrow { color: var(--text-3); font-size: .95rem; margin: 1rem 0 0; }
.hero__title--xl { font-size: 3.1rem; max-width: 880px; }
.hero__subtitle--wide { max-width: 720px; font-size: 1.25rem; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; transition: border-color .15s, transform .15s; }
.feature-card:hover { border-color: var(--brand-400); transform: translateY(-2px); }
.feature-card__icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); background: rgba(63,191,135,.14); color: var(--accent-400); font-size: 1.3rem; margin-bottom: .9rem; }
.feature-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.feature-card p { margin: 0; color: var(--text-3); font-size: .92rem; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; counter-reset: step; }
.step { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.4rem; }
.step__num { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: .95rem; margin-bottom: .8rem; }
.step h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.step p { margin: 0; color: var(--text-3); font-size: .9rem; }

.security-band { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; background:
    linear-gradient(90deg, rgba(56,211,159,.10), rgba(63,191,135,.08));
    border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.75rem; }
.security-band__body { flex: 1 1 320px; }
.security-band h2 { margin: .2rem 0 .5rem; font-size: 1.5rem; }
.security-band p { margin: 0; color: var(--text-2); max-width: 620px; }

.cta-band { text-align: center; background:
    radial-gradient(700px 260px at 50% 0%, rgba(63,191,135,.18), transparent 60%);
    border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2.75rem 1.5rem; margin: 2.5rem 0; }
.cta-band h2 { margin: 0 0 .5rem; font-size: 1.9rem; }
.cta-band p { margin: 0 0 1.5rem; color: var(--text-2); }

.landing-footer { border-top: 1px solid var(--border); margin-top: 2rem; padding: 2rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.landing-footer__brand { display: flex; flex-direction: column; gap: .2rem; }
.landing-footer__brand strong { font-size: 1.05rem; }
.landing-footer p { margin: 0; color: var(--text-3); font-size: .88rem; }

/* Authenticated home quick links */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.quick-card { display: flex; gap: .9rem; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; cursor: pointer; transition: border-color .15s, transform .15s; text-decoration: none; color: inherit; }
.quick-card:hover { border-color: var(--brand-400); transform: translateY(-2px); }
.quick-card__icon { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); background: rgba(63,191,135,.14); color: var(--accent-400); font-size: 1.3rem; }
.quick-card h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.quick-card p { margin: 0; color: var(--text-3); font-size: .85rem; }

/* BI dashboard */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .3rem; }
.stat-card--link { cursor: pointer; transition: border-color .15s, transform .05s; }
.stat-card--link:hover { border-color: var(--brand-400); }
.stat-card--link:active { transform: translateY(1px); }
/* Selected state for a stat card acting as a filter. */
.stat-card--on { border-color: var(--brand-400); box-shadow: inset 0 0 0 1px var(--brand-400); }
.bi-row--link { cursor: pointer; }
.bi-row--link:hover td { color: var(--text-1); background: var(--bg-card); }
.drill-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--bg-card); border: 1px solid var(--brand-500); border-radius: var(--r); padding: .6rem 1rem; margin-bottom: 1rem; color: var(--text-2); }
.stat-label { color: var(--text-3); font-size: .8rem; }
.stat-value { color: var(--accent-400); font-size: 1.5rem; font-weight: 800; }
.bi-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }

/* Alert / banner — unified message strip. Variants share one shape;
   the older .upgrade-banner / .auth-error / .drill-banner classes are kept as
   aliases so existing pages and the E2E suite stay stable. */
.alert { border: 1px solid var(--border); color: var(--text-1); border-radius: var(--r); padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .92rem; }
.alert a { cursor: pointer; font-weight: var(--fw-semibold); }
.alert--info { background: var(--tint-brand-soft); border-color: var(--brand-400); }
.alert--info a { color: var(--brand-400); }
.alert--success { background: var(--tint-success); border-color: var(--success); color: var(--success); }
.alert--warn { background: var(--tint-warn); border-color: var(--warn); color: var(--warn); }
.alert--error { background: var(--tint-error); border-color: var(--error); color: var(--error); }

/* Upgrade banner (Pro-only pages on Free) — info alert */
.upgrade-banner { background: var(--tint-brand-soft); border: 1px solid var(--brand-400); color: var(--text-1); border-radius: var(--r); padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .92rem; }
.upgrade-banner a { color: var(--brand-400); cursor: pointer; font-weight: 600; }

/* Auth */
.auth-page { display: flex; align-items: center; justify-content: center; width: 100%;
    min-height: calc(100vh - var(--nav-h, 64px)); padding: 3.5rem 1.25rem; box-sizing: border-box; }
.auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2rem; width: 100%; max-width: 420px; }
.auth-card h2 { margin: 0 0 1.25rem; }
.auth-card .form-group { margin-bottom: 1rem; }
.auth-error { background: var(--tint-error); color: var(--red-400); border-radius: var(--r-sm); padding: .55rem .7rem; font-size: .88rem; margin-bottom: .5rem; }
.auth-ok { text-align: center; }
.auth-ok p { margin-bottom: 1rem; color: var(--text-2); }
.auth-alt { margin-top: 1rem; font-size: .88rem; color: var(--text-3); text-align: center; }
.auth-alt a { color: var(--brand-400); cursor: pointer; }
.nav-user { color: var(--text-2); font-size: .9rem; font-weight: 500; }

/* Table */
.table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.table th, .table td { text-align: left; padding: .75rem 1rem; font-size: .92rem; }
.table th { color: var(--text-3); font-weight: 600; border-bottom: 1px solid var(--border); }
.table td { border-top: 1px solid var(--border); color: var(--text-2); }

/* Pager */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.pager__info { color: var(--text-3); font-size: .9rem; }

/* Utilities — small, composable helpers so new markup reaches for a class
   instead of a one-off inline style. */
.u-full { width: 100%; }
/* Hides the content sector until Drapo has compiled it. Removed by d-cloak once processing
   finishes; without it a cold deep-link flashes raw {{i18n.*}} tokens. */
.cloaked { visibility: hidden; }
.u-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
/* Generated brief: keeps the model's line breaks without a <pre>, which d-model
   does not reliably render into. */
.ai-brief-text { white-space: pre-wrap; line-height: 1.55; }
.u-flex-1 { flex: 1; }
.u-text-left { text-align: left; }
.u-center { text-align: center; }
.u-muted { color: var(--text-3); }
.u-mt-0 { margin-top: 0; }
.u-mt { margin-top: var(--space-4); }
.u-mt-lg { margin-top: var(--space-6); }
.u-mb-0 { margin-bottom: 0; }
.u-mb { margin-bottom: var(--space-4); }
.u-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Style guide */
.sg-section { margin-bottom: var(--space-8); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.sg-swatch { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg-card); }
.sg-swatch__chip { height: 56px; }
.sg-swatch__meta { padding: .5rem .6rem; }
.sg-swatch__name { display: block; color: var(--text-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sg-swatch__val { display: block; color: var(--text-3); font-size: var(--fs-xs); font-family: ui-monospace, monospace; }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.sg-tile { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--brand); }
.sg-note { color: var(--text-3); font-size: var(--fs-sm); font-family: ui-monospace, monospace; }

/* Keyboard focus visibility. :focus-visible
   only paints the ring for keyboard / assistive-tech users, so mouse clicks and
   the default look are unchanged. Applied to every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.drawer-link:focus-visible,
.quick-card:focus-visible,
.feature-card:focus-visible,
.stat-card--link:focus-visible,
.agenda-event:focus-visible,
.bi-row--link:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--r-sm);
}

@media (max-width: 760px) {
    /* Navigation lives in the left drawer; only the account actions stay in the top bar. */
    .nav-user { max-width: 7rem; }
    .navbar__search { display: none; } /* search is reachable from the drawer on mobile */
    .hero__title { font-size: 2rem; }
    .hero__title--xl { font-size: 2.1rem; }
    .hero__subtitle--wide { font-size: 1.1rem; }
    .cta-band h2 { font-size: 1.5rem; }
    .landing-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    /* Keep the top bar on one line: shrink the logo/actions and drop the long user name. */
    .navbar__logo-img { height: 26px; }
    .navbar__actions { gap: .35rem; }
    .lang-toggle { padding: .25rem .45rem; font-size: .72rem; }
    .navbar__actions .btn--sm { padding: .35rem .6rem; font-size: .8rem; }
    .nav-user { display: none; }
    .nav-help__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Respect users who ask for less motion — disable transitions, animations,
   and hover lift/transform effects. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .feature-card:hover,
    .quick-card:hover,
    .stat-card--link:active { transform: none; }
}

/* Evidence upload: a native form posts into an iframe that shows the server's one-line answer. */
.upload-frame { display: block; width: 100%; height: 2.4rem; border: 0; margin-top: var(--space-2); background: transparent; color-scheme: dark; }

/* ── Passport ── */
.passport-qr-row { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.passport-qr { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.passport-qr img { background: #fff; border-radius: var(--r); padding: .25rem; }
.passport-public { max-width: 760px; }

.condition-row--suggestion td { background: var(--tint-warn); }

/* ── Printable report: no navigation, ink-friendly ── */
.report-sha { font-size: .72rem; word-break: break-all; }
.report-evidence { margin-top: .35rem; font-size: .85rem; }
@media print {
    .navbar, .nav-drawer, .nav-drawer__overlay, .no-print, .skip-link { display: none !important; }
    body, main { background: #fff !important; color: #000 !important; }
    .card, .stat-card, .table { box-shadow: none !important; border-color: #bbb !important; background: #fff !important; color: #000 !important; }
    .table th, .table td { color: #000 !important; }
    .badge { border: 1px solid #888; color: #000 !important; background: #fff !important; }
}

/* ── Consultancy banner ── */
.consult-banner { background: var(--tint-warn); border-top: 1px solid var(--warn); }
.consult-banner__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 0; font-size: .9rem; flex-wrap: wrap; }

/* ── Help (Tower Support widget, framed). Backdrop + panel live in the shell (index.html), outside the navbar;
      the body is the help-panel sector, filled from components/help-panel on open. ── */
.nav-help { display: inline-flex; align-items: center; gap: var(--space-1); }
.help-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-panel-backdrop); }
.help-panel { position: fixed; right: var(--space-4); bottom: var(--space-4);
    width: min(400px, calc(100vw - 2rem)); height: min(600px, calc(100vh - var(--nav-h) - 2rem));
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-menu);
    z-index: var(--z-panel); display: flex; flex-direction: column; overflow: hidden; }
.help-panel__header { display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-1); }
.help-panel__title { font-weight: var(--fw-bold); color: var(--text-1); }
.help-panel__close { background: transparent; border: none; color: var(--text-2); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.help-panel__close:hover { color: var(--text-1); }
.help-panel__body, .help-panel__content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.help-panel__frame { flex: 1; width: 100%; border: 0; background: var(--bg-card); }
.help-panel__empty { margin: 0; padding: var(--space-6) var(--space-4); color: var(--text-2); font-size: var(--fs-sm); }
@media print { .nav-help, .help-backdrop, .help-panel { display: none !important; } }