/* ============================================================
   COUNTIQUE — the one stylesheet (CLAUDE.md / PROJECT_PLAN.md rule:
   don't create new .css files, everything goes here).

   Ported from the approved prototype design system at
   Specs\countique JM 16092026.html (:root block + all component
   classes), which is covered by 220 automated checks in seven
   suites (brief §9.3). Treat that file as the source of truth for
   any future visual change — update it and re-port, rather than
   hand-editing this file out of sync with the prototype.

   Fonts (Inter / Source Serif 4 / Montserrat) are self-hosted as
   base64 @font-face in the prototype for portability. In this build
   they should be loaded via <link> to fonts.googleapis.com /
   fonts.gstatic.com in the master page <head> — CLAUDE.md rule 7's
   CSP already allowlists both hosts. Don't inline base64 font data
   here.

   Tenant theming (PROJECT_PLAN.md Phase 1.2 / architecture decision
   table): every colour below is a :root custom property, so a
   future per-tenant override is just a higher-specificity block —
   e.g. `body.tenant-42 { --gold: #...; }` or `[data-tenant] { ... }`
   redefining a subset of tokens. No tenant overrides exist yet
   because no tenant theming is scoped for Phase 1 — add the block
   when a real tenant needs one, not before.
   ============================================================ */

:root {
    --navy: #123A62;
    --navy-deep: #0C2743;
    --navy-mid: #1D4E7E;
    --navy-soft: #EAF0F6;
    --gold: #C89A40;
    --gold-deep: #8A6716;
    --gold-soft: #F7EFDD;
    --gold-line: #E6D3AA;
    --cream: #FBF7F0;
    --cream-deep: #F4EDE2;
    --ink: #16212C;
    --body: #3D4C5A;
    --muted: #5A6874;
    --white: #fff;
    --line: #E2E6EB;
    --line-warm: #E8DFD1;
    --ok: #1F6349;
    --warn: #96490F;
    --bad: #A3342C;
    --r: 10px;
    --r-lg: 18px;
    --sh-sm: 0 1px 2px rgba(18,58,98,.06), 0 2px 8px rgba(18,58,98,.05);
    --sh: 0 2px 4px rgba(18,58,98,.05), 0 12px 30px rgba(18,58,98,.09);
    --sh-lg: 0 4px 8px rgba(18,58,98,.06), 0 24px 60px rgba(18,58,98,.14);
    --ff-body: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --ff-head: 'Source Serif 4',Georgia,'Times New Roman',serif;
    --ff-brand: 'Montserrat',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --wrap: 1400px;
}

*, *::before, *::after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: var(--ff-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased
}

img {
    max-width: 100%;
    display: block
}

h1, h2, h3, h4 {
    font-family: var(--ff-head);
    color: var(--navy);
    margin: 0 0 .5em;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.01em
}

h1 {
    font-size: clamp(2.1rem,4.6vw,3.5rem);
    letter-spacing: -.022em
}

h2 {
    font-size: clamp(1.7rem,3vw,2.5rem);
    letter-spacing: -.018em
}

h3 {
    font-size: clamp(1.2rem,1.7vw,1.45rem)
}

h4 {
    font-size: 1.05rem;
    font-family: var(--ff-brand);
    font-weight: 600;
    letter-spacing: 0
}

p {
    margin: 0 0 1.1em
}

a {
    color: var(--navy-mid);
    text-decoration-color: var(--gold-line);
    text-underline-offset: 3px
}

    a:hover {
        color: var(--gold-deep)
    }

strong {
    color: var(--ink);
    font-weight: 600
}

ul, ol {
    margin: 0 0 1.1em;
    padding-left: 1.15em
}

li {
    margin-bottom: .45em
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.5rem 0
}

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: #fff;
    padding: 12px 18px;
    z-index: 200
}

    .skip:focus {
        left: 8px;
        top: 8px
    }

/* ---------- layout ---------- */
.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px
}

.wrap-n {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px
}
/* Wider than .wrap-n (forms/marketing copy) but short of the full .wrap
   (1160px) — for the tool wizards (Diagnostic, Strategy, BusinessModel,
   ClientExperience, AdviceProcess) and the Tools hub, which were
   cramped and mostly-empty at 820px (session 2026-09-19). */
.wrap-tool {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 24px
}

section {
    padding: clamp(48px,7vw,88px) 0;
    scroll-margin-top: 96px
}

[id] {
    scroll-margin-top: 96px
}

section.tight {
    padding: clamp(34px,4.5vw,56px) 0
}

.bg-cream {
    background: var(--cream)
}

.bg-soft {
    background: var(--navy-soft)
}

.bg-navy {
    background: var(--navy);
    color: #CFDCE8
}

    .bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 {
        color: #fff
    }

    .bg-navy a {
        color: var(--gold-line)
    }

    .bg-navy strong {
        color: #fff
    }

.bg-deep {
    background: var(--navy-deep);
    color: #C2D2E0
}

    .bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4 {
        color: #fff
    }

.grid {
    display: grid;
    gap: 26px
}

.g2 {
    grid-template-columns: repeat(2,1fr)
}

.g3 {
    grid-template-columns: repeat(3,1fr)
}

.g4 {
    grid-template-columns: repeat(4,1fr)
}

.g-side {
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: start
}

.center {
    text-align: center
}

.lead {
    font-size: clamp(1.06rem,1.5vw,1.24rem);
    line-height: 1.6;
    color: var(--body)
}

.small {
    font-size: .87rem;
    line-height: 1.55
}

.muted {
    color: var(--muted)
}

.mt0 {
    margin-top: 0
}

.mb0 {
    margin-bottom: 0
}

.stack > * + * {
    margin-top: 1rem
}

.maxw {
    max-width: 62ch
}

.center .maxw {
    margin-left: auto;
    margin-right: auto
}

/* ---------- eyebrow / rules ---------- */
.eyebrow {
    font-family: var(--ff-brand);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 .9rem;
    display: flex;
    align-items: center;
    gap: .7rem
}

    .eyebrow::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--gold-line);
        max-width: 70px
    }

.center .eyebrow {
    justify-content: center
}

    .center .eyebrow::before {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--gold-line);
        max-width: 70px
    }

.bg-navy .eyebrow, .bg-deep .eyebrow {
    color: var(--gold-line)
}

    .bg-navy .eyebrow::after, .bg-navy .eyebrow::before, .bg-deep .eyebrow::after, .bg-deep .eyebrow::before {
        background: rgba(230,211,170,.35)
    }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    font-family: var(--ff-brand);
    font-weight: 600;
    font-size: .95rem;
    padding: 14px 26px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: .18s ease;
    line-height: 1.2;
    text-align: center
}

.btn-primary {
    background: var(--gold);
    color: #2A1F06;
    border-color: var(--gold)
}

    .btn-primary:hover {
        background: var(--gold-deep);
        border-color: var(--gold-deep);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--sh-sm)
    }

.btn-navy {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy)
}

    .btn-navy:hover {
        background: var(--navy-deep);
        color: #fff;
        transform: translateY(-1px)
    }

/* .btn-secondary had no rule at all (no framework is loaded), so those buttons showed as bare text; it now looks like
   .btn-ghost, Discipline 1's secondary button (2026-10-21, "discipline 1 is the benchmark for look and feel") */
.btn-ghost, .btn-secondary {
    background: transparent;
    color: var(--navy);
    border-color: #C4CFDA
}

    .btn-ghost:hover, .btn-secondary:hover {
        border-color: var(--navy);
        background: var(--navy-soft);
        color: var(--navy)
    }

.btn-light {
    background: #fff;
    color: var(--navy);
    border-color: #fff
}

    .btn-light:hover {
        background: var(--gold-soft);
        color: var(--navy-deep)
    }

.btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.45)
}

    .btn-outline-light:hover {
        border-color: #fff;
        background: rgba(255,255,255,.1);
        color: #fff
    }

.btn-sm {
    padding: 9px 16px;
    font-size: .85rem
}

.btn-block {
    width: 100%
}

.btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px
}

.center .btns {
    justify-content: center
}

.arrow {
    font-family: var(--ff-brand);
    font-weight: 600;
    font-size: .92rem;
    color: var(--navy-mid);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4em
}

    .arrow::after {
        content: "→";
        transition: .18s
    }

    .arrow:hover {
        color: var(--gold-deep)
    }

/* Back-navigation link — same look as .arrow but WITHOUT its ::after
   "→" (that rule is for forward links like "Explore →"; reusing .arrow
   for a back link produced a confusing "← Discipline 4 →" double-arrow
   on every tool page's back-to-hub link, session 2026-09-19). Carries
   its own leading icon (<i class="fa-solid fa-arrow-left">) instead. */
.back-link {
    font-family: var(--ff-brand);
    font-weight: 600;
    font-size: .92rem;
    color: var(--navy-mid);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5em
}

    .back-link:hover {
        color: var(--gold-deep)
    }

        .arrow:hover::after {
            transform: translateX(3px)
        }

/* ---------- header ---------- */
header.site {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line)
}

.hbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    height: 78px
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none
}

    .brand img {
        height: 40px;
        width: auto
    }

    .brand .wm {
        display: flex;
        flex-direction: column;
        line-height: 1
    }

        .brand .wm b {
            font-family: var(--ff-brand);
            font-weight: 700;
            font-size: 1.32rem;
            color: var(--navy);
            letter-spacing: -.015em
        }

        .brand .wm span {
            font-family: var(--ff-brand);
            font-weight: 500;
            font-size: .6rem;
            letter-spacing: .28em;
            color: var(--gold-deep);
            margin-top: 3px
        }

nav.main {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto
}

    nav.main a {
        font-family: var(--ff-brand);
        font-weight: 500;
        font-size: .815rem;
        color: var(--navy);
        text-decoration: none;
        padding: 9px 10px;
        border-radius: 6px;
        white-space: nowrap;
        letter-spacing: .005em
    }

        nav.main a:hover {
            background: var(--navy-soft);
            color: var(--navy-deep)
        }

        nav.main a.active {
            color: var(--gold-deep);
            box-shadow: inset 0 -2px 0 var(--gold)
        }

.hactions {
    display: flex;
    align-items: center;
    gap: 10px
}

.cartbtn {
    position: relative;
    background: none;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 9px 12px;
    cursor: pointer;
    font-family: var(--ff-brand);
    font-size: .85rem;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px
}

    .cartbtn:hover {
        border-color: var(--navy)
    }

    .cartbtn .count {
        background: var(--gold);
        color: #2A1F06;
        font-weight: 700;
        font-size: .7rem;
        min-width: 19px;
        height: 19px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px
    }

.burger {
    display: none;
    background: none;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    width: 44px;
    height: 42px;
    cursor: pointer;
    align-items: center;
    justify-content: center
}

    .burger span {
        display: block;
        width: 19px;
        height: 2px;
        background: var(--navy);
        position: relative
    }

        .burger span::before, .burger span::after {
            content: "";
            position: absolute;
            left: 0;
            width: 19px;
            height: 2px;
            background: var(--navy)
        }

        .burger span::before {
            top: -6px
        }

        .burger span::after {
            top: 6px
        }

/* ---------- hero ---------- */
.hero {
    background: linear-gradient(168deg,#fff 0%,var(--cream) 46%,var(--cream-deep) 100%);
    position: relative;
    overflow: hidden;
    padding: clamp(56px,8vw,104px) 0 clamp(48px,7vw,88px)
}

    .hero::after {
        content: "";
        position: absolute;
        right: -140px;
        top: -90px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(200,154,64,.14),rgba(200,154,64,0) 68%)
    }

    .hero .wrap {
        position: relative;
        z-index: 1
    }

.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 56px;
    align-items: center
}

.hero h1 {
    margin-bottom: .35em
}

/* Discipline engine diagram + downloadable resources (session 2026-09-21) —
   every built discipline's spec package shipped a distinctive "how this
   discipline works" diagram plus sample reports/template packs that never
   made it into the live tool pages. .hero-diagram sits in the hero-grid's
   second column (see Tools\TeamRoles\Default.aspx etc. for usage);
   .disc-resources is the download-list card, placed above each tool's
   subnav so a practice sees a finished example before starting. */
/* Sized down from full-width (session 2026-09-21) — these are dense
   infographics (org charts, checklists, fine print) that need to stay
   full-page-width illegible, but read as a "nice image" better at a more
   modest size. Hover reveals a magnifying-glass affordance; a click opens
   Scripts\disc-diagram-lightbox.js's full-screen viewer. The <a
   href=".../engine.png" target="_blank"> stays as a working fallback if
   that script fails to load — the lightbox script calls
   preventDefault() and takes over the click when it's running. */
.disc-diagram {
    display: block;
    max-width: 640px;
    margin: 0 auto 22px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh);
    position: relative;
    cursor: zoom-in;
}

    .disc-diagram img {
        display: block;
        width: 100%;
        height: auto;
        transition: filter .15s ease;
    }

    .disc-diagram::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(12,39,67,0);
        transition: background .15s ease;
        pointer-events: none;
    }

    .disc-diagram .disc-diagram-hint {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(.85);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(12,39,67,.88);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        opacity: 0;
        transition: opacity .15s ease, transform .15s ease;
        pointer-events: none;
    }

    .disc-diagram:hover::after {
        background: rgba(12,39,67,.28);
    }

    .disc-diagram:hover .disc-diagram-hint {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1);
    }

/* Full-screen lightbox — Scripts\disc-diagram-lightbox.js builds this on
   demand, one shared instance reused for every .disc-diagram on the page.
   Scroll/pinch to zoom, drag to pan once zoomed, double-click to toggle —
   .disc-lightbox-stage is the fixed-size viewport the image transforms
   inside (the img itself is transform: scale()+translate(), never resized
   via max-width so panning math stays simple). */
.disc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(9,20,32,.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    overflow: hidden;
}

    .disc-lightbox.open {
        opacity: 1;
        pointer-events: auto;
    }

    .disc-lightbox-stage {
        position: absolute;
        inset: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .disc-lightbox img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 10px;
        box-shadow: var(--sh-lg);
        cursor: zoom-in;
        touch-action: none;
        user-select: none;
        -webkit-user-drag: none;
        transform-origin: center center;
        will-change: transform;
    }

        .disc-lightbox img.zoomed {
            cursor: grab;
        }

        .disc-lightbox img.zoomed.dragging {
            cursor: grabbing;
        }

    /* Solid, not translucent (session 2026-09-21) — a faint tint over the
       dark backdrop worked fine until the image itself is zoomed and panned
       underneath these controls, at which point a light/white part of the
       image showed straight through and the white icon on top vanished.
       An opaque navy chip stays legible regardless of what's behind it. */
    .disc-lightbox-close {
        position: absolute;
        top: 22px;
        right: 26px;
        z-index: 2;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 0;
        background: rgba(12,39,67,.92);
        box-shadow: 0 2px 8px rgba(0,0,0,.35);
        color: #fff;
        font-size: 1.1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .15s ease;
    }

        .disc-lightbox-close:hover {
            background: rgba(18,58,98,.96);
        }

    .disc-lightbox-caption {
        position: absolute;
        bottom: 78px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        margin: 0;
        background: rgba(12,39,67,.8);
        padding: 5px 14px;
        border-radius: 999px;
        color: #fff;
        font-family: var(--ff-brand);
        font-size: .78rem;
        white-space: nowrap;
        pointer-events: none;
    }

    .disc-lightbox-controls {
        position: absolute;
        bottom: 26px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(12,39,67,.92);
        box-shadow: 0 2px 8px rgba(0,0,0,.35);
        border-radius: 999px;
        padding: 6px;
    }

        .disc-lightbox-controls button {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 0;
            background: none;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease;
        }

        .disc-lightbox-controls button:hover {
            background: rgba(255,255,255,.18);
        }

        .disc-lightbox-controls span {
            color: #fff;
            font-family: var(--ff-brand);
            font-size: .78rem;
            font-weight: 600;
            min-width: 42px;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }

.disc-resources {
    background: var(--cream);
    border: 1px solid var(--gold-line);
    border-radius: var(--r-lg);
    padding: 18px 22px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

    .disc-resources .disc-resources-label {
        flex: none;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--ff-brand);
        font-weight: 700;
        font-size: .82rem;
        color: var(--gold-deep);
        margin-right: 6px;
    }

    .disc-resources .disc-resources-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .disc-resources a.disc-resource-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: #fff;
        border: 1px solid var(--gold-line);
        border-radius: 999px;
        padding: 7px 14px;
        font-family: var(--ff-brand);
        font-size: .8rem;
        font-weight: 600;
        color: var(--navy);
        text-decoration: none;
        transition: background .15s ease, border-color .15s ease;
    }

        .disc-resources a.disc-resource-link:hover {
            background: var(--gold-soft);
            border-color: var(--gold);
        }

        .disc-resources a.disc-resource-link i {
            color: var(--gold-deep);
        }

.hero .lead {
    max-width: 52ch
}

.tagline-mark {
    font-family: var(--ff-head);
    font-style: italic;
    color: var(--gold-deep);
    font-size: 1.1rem
}

/* ---------- cards ---------- */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 30px;
    box-shadow: var(--sh-sm);
    transition: .2s
}

    .card.hoverable:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh);
        border-color: var(--gold-line)
    }

    .card h3 {
        margin-bottom: .4em
    }

    .card p:last-child {
        margin-bottom: 0
    }

.card-warm {
    background: var(--cream);
    border-color: var(--line-warm)
}

.card-flat {
    box-shadow: none
}

.card .ico {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-brand);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 16px
}

    .card .ico svg {
        width: 22px;
        height: 22px
    }

/* two-door */
.door {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 34px;
    transition: .22s;
    box-shadow: var(--sh-sm);
    height: 100%
}

    .door:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-lg);
        border-color: var(--gold)
    }

    .door .kicker {
        font-family: var(--ff-brand);
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .15em;
        text-transform: uppercase;
        color: var(--gold-deep)
    }

    .door h3 {
        margin: .6em 0 .4em;
        font-size: 1.5rem
    }

    .door p {
        color: var(--body)
    }

    .door ul {
        list-style: none;
        padding: 0;
        margin: 0 0 1.2em
    }

    .door li {
        padding-left: 1.5em;
        position: relative;
        font-size: .94rem
    }

        .door li::before {
            content: "—";
            position: absolute;
            left: 0;
            color: var(--gold)
        }

/* stats */
.stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden
}

.stat {
    background: #fff;
    padding: 26px 22px;
    text-align: center
}

    .stat b {
        display: block;
        font-family: var(--ff-head);
        font-size: 2.1rem;
        color: var(--navy);
        line-height: 1;
        margin-bottom: 6px;
        font-weight: 600
    }

    .stat span {
        font-size: .83rem;
        color: var(--muted);
        line-height: 1.4;
        display: block
    }

.bg-navy .stats, .bg-deep .stats {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.16)
}

.bg-navy .stat, .bg-deep .stat {
    background: transparent
}

    .bg-navy .stat b, .bg-deep .stat b {
        color: var(--gold-line)
    }

    .bg-navy .stat span, .bg-deep .stat span {
        color: #9FB4C7
    }

/* numbered / discipline grid */
.disc {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: var(--line-warm);
    border: 1px solid var(--line-warm);
    border-radius: var(--r-lg);
    overflow: hidden
}

    .disc div {
        background: var(--cream);
        padding: 20px 22px
    }

    .disc b {
        font-family: var(--ff-brand);
        font-size: .72rem;
        color: var(--gold-deep);
        letter-spacing: .1em;
        display: block;
        margin-bottom: 4px
    }

    .disc span {
        font-family: var(--ff-head);
        font-size: 1.02rem;
        color: var(--navy);
        font-weight: 600;
        display: block;
        line-height: 1.3
    }

    .disc small {
        display: block;
        font-size: .83rem;
        color: var(--muted);
        margin-top: 4px;
        line-height: 1.45
    }

    /* Same gold-gradient badge and same icon-per-discipline mapping as
       Account\Dashboard.aspx.vb's DisciplineIcon() (session 2026-09-21) —
       kept in sync there, not redefined here; this page just borrows the
       established visual language. Selector is ".disc .disc-mark", not just
       ".disc-mark", so it outranks ".disc span" (which would otherwise force
       this span back to display:block and break the icon's centering). */
    .disc .disc-mark {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(145deg,var(--gold),var(--gold-deep));
        color: #fff;
        font-size: .92rem;
        box-shadow: 0 3px 8px rgba(138,103,22,.35);
        margin-bottom: 10px
    }

/* steps */
.steps {
    counter-reset: s;
    display: grid;
    gap: 0
}

.step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 22px;
    padding: 24px 0;
    border-top: 1px solid var(--line)
}

    .step:last-child {
        border-bottom: 1px solid var(--line)
    }

    .step .n {
        counter-increment: s;
        font-family: var(--ff-head);
        font-size: 1.6rem;
        color: var(--gold);
        font-weight: 600
    }

        .step .n::before {
            content: "0" counter(s)
        }

    .step h4 {
        margin-bottom: .25em;
        font-size: 1.12rem;
        font-family: var(--ff-head);
        color: var(--navy);
        font-weight: 600
    }

    .step p {
        margin: 0;
        font-size: .96rem
    }

/* pricing */
.tiers {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    align-items: stretch
}

.tier {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sh-sm)
}

    .tier.feature {
        border: 2px solid var(--gold);
        box-shadow: var(--sh);
        position: relative
    }

        .tier.feature::before {
            content: "Most popular";
            position: absolute;
            top: -12px;
            left: 30px;
            background: var(--gold);
            color: #2A1F06;
            font-family: var(--ff-brand);
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: 4px 12px;
            border-radius: 20px
        }

    .tier h3 {
        font-size: 1.25rem;
        margin-bottom: .2em
    }

    .tier .price {
        font-family: var(--ff-head);
        font-size: 2.2rem;
        color: var(--navy);
        font-weight: 600;
        line-height: 1;
        margin: 14px 0 2px
    }

        .tier .price small {
            font-size: .85rem;
            font-family: var(--ff-body);
            color: var(--muted);
            font-weight: 400
        }

    .tier ul {
        list-style: none;
        padding: 0;
        margin: 18px 0 24px;
        flex: 1
    }

    .tier li {
        padding-left: 1.6em;
        position: relative;
        font-size: .93rem;
        color: var(--body)
    }

        .tier li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--gold-deep);
            font-weight: 700
        }

        .tier li.off {
            color: var(--muted)
        }

            .tier li.off::before {
                content: "–";
                color: var(--muted)
            }

/* --- four pricing tiers (not currently used — brief §1.6 collapsed the
   Annual subscription tier into Practice, leaving three routes. Kept in
   case a fourth route is ever reintroduced; remove if it never is.) --- */
.tiers.four {
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

    .tiers.four .tier {
        padding: 26px 22px
    }

        .tiers.four .tier h3 {
            font-size: 1.15rem
        }

        .tiers.four .tier .price {
            font-size: 1.85rem
        }

        .tiers.four .tier li {
            font-size: .88rem
        }

@media(max-width:1140px) {
    .tiers.four {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:660px) {
    .tiers.four {
        grid-template-columns: 1fr
    }
}

/* books */
.books {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 28px
}

.book {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--sh-sm)
}

.cover {
    aspect-ratio: 2/3;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 14px;
    color: #fff;
    box-shadow: 0 8px 22px rgba(18,58,98,.24);
    position: relative;
    overflow: hidden
}

    .cover::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 7px;
        background: rgba(0,0,0,.18)
    }

    .cover .ct {
        font-family: var(--ff-head);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2
    }

    .cover .ca {
        font-family: var(--ff-brand);
        font-size: .6rem;
        letter-spacing: .13em;
        text-transform: uppercase;
        opacity: .85
    }

    .cover .ce {
        font-family: var(--ff-brand);
        font-size: .55rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        background: rgba(255,255,255,.2);
        align-self: flex-start;
        padding: 3px 7px;
        border-radius: 3px
    }

.book h3 {
    font-size: 1.16rem;
    margin-bottom: .35em
}

.book .blurb {
    font-size: .92rem;
    color: var(--body);
    margin-bottom: 14px
}

.book .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto
}

.book .amt {
    font-family: var(--ff-head);
    font-size: 1.35rem;
    color: var(--navy);
    font-weight: 600
}

.book.forthcoming .cover {
    opacity: .9
}

.book.forthcoming .foot {
    gap: 12px;
    flex-wrap: wrap
}

.fmt {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 7px;
    overflow: hidden;
    margin: auto 0 12px;
    align-self: flex-start
}

    .fmt button {
        background: #fff;
        border: 0;
        border-right: 1px solid var(--line);
        padding: 7px 13px;
        font-family: var(--ff-brand);
        font-size: .78rem;
        cursor: pointer;
        color: var(--muted)
    }

        .fmt button:last-child {
            border-right: 0
        }

        .fmt button.on {
            background: var(--navy);
            color: #fff
        }

/* cart drawer — CLAUDE.md / brief §1.3: bookCart is off for Countique
   (no cart), kept for the CQ_CONFIG.bookCart switch described in the brief */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none
}

    .drawer.open {
        display: block
    }

    .drawer .scrim {
        position: absolute;
        inset: 0;
        background: rgba(12,39,67,.45);
        backdrop-filter: blur(2px)
    }

    .drawer .panel {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: min(440px,100%);
        background: #fff;
        box-shadow: -20px 0 60px rgba(12,39,67,.25);
        display: flex;
        flex-direction: column;
        animation: slide .25s ease
    }

@keyframes slide {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

.drawer header {
    padding: 22px 26px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .drawer header h3 {
        margin: 0;
        font-size: 1.2rem
    }

.drawer .body {
    flex: 1;
    overflow: auto;
    padding: 20px 26px
}

.drawer .foot {
    border-top: 1px solid var(--line);
    padding: 20px 26px;
    background: var(--cream)
}

.xbtn {
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px
}

    .xbtn:hover {
        color: var(--navy)
    }

.citem {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

    .citem h4 {
        margin: 0 0 2px;
        font-size: .95rem;
        font-family: var(--ff-body);
        font-weight: 600;
        color: var(--ink)
    }

    .citem .meta {
        font-size: .8rem;
        color: var(--muted)
    }

.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-top: 8px
}

    .qty button {
        background: #fff;
        border: 0;
        width: 28px;
        height: 28px;
        cursor: pointer;
        color: var(--navy);
        font-size: 1rem
    }

    .qty span {
        width: 30px;
        text-align: center;
        font-size: .85rem
    }

.crow {
    display: flex;
    justify-content: space-between;
    font-size: .92rem;
    margin-bottom: 8px
}

    .crow.tot {
        font-family: var(--ff-head);
        font-size: 1.25rem;
        color: var(--navy);
        font-weight: 600;
        border-top: 1px solid var(--line-warm);
        padding-top: 12px;
        margin-top: 12px
    }

/* ---------- forms ---------- */
.field {
    margin-bottom: 16px
}

.pwwrap {
    position: relative
}

    .pwwrap input {
        padding-right: 42px
    }

.pwtoggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 8px;
    font-size: .95rem;
    line-height: 1
}

    .pwtoggle:hover {
        color: var(--navy)
    }

label {
    display: block;
    font-family: var(--ff-brand);
    font-size: .8rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
    letter-spacing: .01em
}

input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], select, textarea {
    width: 100%;
    font-family: var(--ff-body);
    font-size: .97rem;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink)
}

    input:focus, select:focus, textarea:focus {
        border-color: var(--navy-mid);
        outline: none;
        box-shadow: 0 0 0 3px rgba(29,78,126,.12)
    }

textarea {
    min-height: 130px;
    resize: vertical
}

.check {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: .88rem;
    color: var(--body);
    margin-bottom: 14px
}

    .check input {
        margin-top: 0;
        width: 17px;
        height: 17px;
        accent-color: var(--navy)
    }

    .check label {
        font-family: var(--ff-body);
        font-weight: 400;
        font-size: .88rem;
        color: var(--body);
        margin: 0;
        letter-spacing: 0
    }

.formnote {
    font-size: .8rem;
    color: var(--muted)
}

.f2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

/* ============================================================
   Field AI assistant — shared "discuss it with AI" widget attached to
   open-text fields across every tool. See Scripts\field-assistant.js and
   App_Code\FieldAssistantHelper.vb. Deliberately reuses the site's
   existing tokens (--navy/--gold/--cream/--line/--muted) rather than a
   new colour language, so it reads as part of the same system as the
   whole-tool AI summary cards (fa-wand-magic-sparkles is used for both).
   ============================================================ */
.fa-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 12px;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    font-family: var(--ff-brand);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease
}

    .fa-toggle:hover {
        background: #F2E4BF;
        transform: translateY(-1px)
    }

    .fa-toggle i {
        font-size: .74rem
    }

.fa-panel {
    margin-top: 10px;
    border: 1px solid var(--gold-line);
    border-radius: var(--r-lg);
    background: var(--cream);
    overflow: hidden;
    animation: faPanelIn .18s ease
}

@keyframes faPanelIn {
    from { opacity: 0; transform: translateY(-4px) }
    to { opacity: 1; transform: translateY(0) }
}

.fa-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg,var(--navy),#0C2743);
    color: #fff
}

    .fa-panel-head b {
        font-family: var(--ff-brand);
        font-size: .82rem;
        display: flex;
        align-items: center;
        gap: 7px
    }

    .fa-panel-close {
        background: none;
        border: 0;
        color: rgba(255,255,255,.75);
        cursor: pointer;
        font-size: .9rem;
        line-height: 1;
        padding: 2px
    }

        .fa-panel-close:hover {
            color: #fff
        }

.fa-msgs {
    max-height: 260px;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.fa-msg {
    max-width: 88%;
    font-size: .85rem;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 10px;
    white-space: pre-wrap
}

.fa-msg.user {
    align-self: flex-end;
    background: var(--navy);
    color: #fff;
    border-bottom-right-radius: 2px
}

.fa-msg.assistant {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    color: var(--ink);
    border-bottom-left-radius: 2px
}

    /* Ask AI reply split: the note stays plain, the draft (the only part
       "Apply to field" inserts) sits in its own box */
    .fa-msg.assistant .fa-note + .fa-draft,
    .fa-msg.assistant .fa-draft + .fa-note {
        margin-top: 8px
    }

    .fa-msg.assistant .fa-draft {
        background: var(--cream, #FBF7EE);
        border: 1px dashed var(--gold-line);
        border-radius: 8px;
        padding: 8px 10px;
        color: var(--ink)
    }

    .fa-msg.assistant .fa-note.side {
        color: var(--muted);
        font-size: .8rem
    }

/* Discipline 10 working tools (2026-09-30): Risk Register and Breach and Complaints.
   Their screens are the spec's own apps (Scripts\risk-register-app.js,
   Scripts\breach-complaints-app.js), which render the spec's class names; these rules
   give those names the Countique look, scoped to .d10app so nothing else is affected. */
/* 2026-10-21 (user: "discipline 1 is the benchmark for look and feel"): tabs, boxes, labels and buttons below use
   Discipline 1's sizes (Tools\Strategy .stepnav, .fld, .field2 label) and the site's own buttons (gold primary). */
.d10app .tabbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px }
.d10app .tab { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 6px 12px; font-size: .76rem; font-family: var(--ff-brand); font-weight: 600; color: var(--muted); cursor: pointer }
.d10app .tab.on { background: var(--navy); color: #fff; border-color: var(--navy) }
.d10app .view { display: none }
.d10app .view.on { display: block }
.d10app .card h2 { font-family: var(--ff-head); color: var(--navy); font-size: 1.35rem; margin: 0 0 6px }
.d10app .card h3 { margin: 18px 0 8px }
.d10app .lede { color: var(--body); font-size: .92rem; margin: 0 0 14px }
.d10app .muted { color: var(--muted); font-size: .86rem }
.d10app .hint { color: var(--muted); font-size: .76rem; font-weight: 400 }
.d10app .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.d10app .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.d10app .field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px }
.d10app .field label { font-weight: 600; font-size: .86rem; color: var(--ink) }
.d10app .field input, .d10app .field select, .d10app .field textarea, .d10app .rrow textarea, .d10app .rrow-head input, .d10app .rrow-head select {
    width: 100%; border: 1px solid #CBD3DC; border-radius: 8px; padding: 9px 11px; background: var(--white); color: var(--ink); font: inherit }
/* boxes inside wide entry tables stay compact so the tables still fit */
.d10app table.plain input, .d10app table.plain select {
    width: 100%; border: 1px solid #CBD3DC; border-radius: 8px; padding: 7px 9px; background: var(--white); color: var(--ink); font: inherit; font-size: .88rem }
.d10app .field.ro .rov { padding: 7px 0; font-weight: 600; color: var(--navy) }
.d10app .rrow { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px }
.d10app .rrow-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px }
.d10app .rrow-head .idbox { width: 90px; flex: none }
.d10app .rrow-head select { width: auto; flex: none }
.d10app .rrow textarea { margin-bottom: 10px }
.d10app .btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.d10app .btn { display: inline-flex; align-items: center; gap: .55em; border: 1.5px solid #C4CFDA; background: var(--white); color: var(--navy); border-radius: 8px; padding: 9px 16px; font-family: var(--ff-brand); font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: none }
.d10app .btn.primary { background: var(--gold); color: #2A1F06; border-color: var(--gold) }
.d10app .btn:hover { border-color: var(--navy); background: var(--navy-soft) }
.d10app .btn.primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff }
.d10app .linkbtn { border: 0; background: none; color: var(--navy); font-size: .82rem; font-weight: 600; cursor: pointer; padding: 2px 0; margin-left: auto }
.d10app .linkbtn.danger { color: var(--bad) }
.d10app .kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px }
.d10app .kpi { flex: 1 1 150px; background: var(--navy-soft); border-radius: 10px; padding: 12px 14px }
.d10app .kpi .v { font-family: var(--ff-head); font-size: 1.5rem; color: var(--navy); font-weight: 600; line-height: 1.1 }
.d10app .kpi .l { font-size: .76rem; color: var(--muted); margin-top: 4px }
.d10app .chip { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: .74rem; font-weight: 600; background: var(--cream-deep); color: var(--body); margin-left: 4px }
.d10app .band-green, .d10app td.band-green { background: #D9EAD3; color: #255A33 }
.d10app .band-amber, .d10app td.band-amber { background: #FCE5CD; color: #8A4B0F }
.d10app .band-red, .d10app td.band-red { background: #F4CCCC; color: #8E2A22 }
/* Discipline 11's client surveys (the spec's own band colours: service/advocacy attention-developing-strong,
   value atRisk-building-strong; the advocacy recommend bands reuse the same three fills). */
.d10app .chip.band-attention, .d10app .chip.band-atRisk, .d10app .chip.band-detractorLed { background: #F4CCCC; color: #8E2A22 }
.d10app .chip.band-developing, .d10app .chip.band-building, .d10app .chip.band-modestLead { background: #FCE5CD; color: #8A4B0F }
.d10app .chip.band-strong, .d10app .chip.band-clearLead, .d10app .chip.band-strongLead { background: #B6D7A8; color: #1E4A1E }
.d10app .scorebox { width: 56px }
.d10app table.plain.wide { min-width: 1400px }
.d10app .muted.em { font-style: italic }
.d10app .rrow-head .score { font-size: 1.2rem; font-weight: 700; color: var(--navy) }
/* "View my report" overlay (Scripts\finish-flow.js, 2026-09-30) */
.ff-overlay { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(12,39,67,.45) }
.ff-overlay .ff-box { background: #fff; border-radius: 16px; padding: 28px 32px; max-width: 380px; text-align: center; box-shadow: 0 16px 40px rgba(12,39,67,.3);
    display: flex; flex-direction: column; align-items: center; gap: 10px }
.ff-overlay .ff-box i { font-size: 2rem; color: #2B6CB0 }
.ff-overlay .ff-box b { font-family: var(--ff-head); font-size: 1.25rem; color: var(--navy) }
.ff-overlay .ff-box span { font-size: .88rem; color: var(--muted) }
/* On-screen HTML reports (Scripts\report-view.js, 2026-09-30): toolbar, the rendered Word pages, the AI analysis
   section under the report, and their own print rules (legacy report pattern, Countique\StrategicPlan_Report.aspx). */
.rv-toolbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff;
    border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; box-shadow: 0 2px 10px rgba(12,39,67,.08) }
.rv-toolbar .rv-status { flex: 1; min-width: 180px }
.rv-toolbar .rv-status .fa-circle-check { color: var(--ok) }
.rv-toolbar .rv-actions { display: flex; gap: 8px; flex-wrap: wrap }
.rv-toolbar .rv-word[aria-disabled="true"] { opacity: .5; pointer-events: none }
.rv-report { overflow-x: auto; border-radius: 12px }
.rv-report .rvdoc-wrapper { background: #E9EDF2; padding: 24px 12px; border-radius: 12px }
.rv-report section.rvdoc { box-shadow: 0 4px 18px rgba(12,39,67,.14); margin: 0 auto 24px }
.card.rv-ai { margin-top: 22px; border: 1px solid #BFD3EA; padding: 0; overflow: hidden }
.card.rv-ai > h4 { margin: 0 !important; padding: 18px 22px; background: linear-gradient(135deg, #0C2743 0%, #2B6CB0 100%); color: #fff; font-size: 1.05rem }
.card.rv-ai > h4 i { color: #F2C66D }
.card.rv-ai > *:not(h4) { margin-left: 22px; margin-right: 22px }
.card.rv-ai > *:last-child { margin-bottom: 20px }
.card.rv-ai > p.small:first-of-type { margin-top: 14px }
.card.rv-ai [id$="AiContent"] h2 { font-size: 1.15rem; border-bottom: 2px solid var(--gold); padding-bottom: 4px; margin-top: 1.2em }
@media print {
    @page { size: A4 portrait; margin: 0 }
    html, body.rv-page { background: #fff !important }
    body.rv-page .fspbiz-header, body.rv-page header.site, body.rv-page .fspbiz-footer, body.rv-page footer,
    body.rv-page .hero, body.rv-page .rv-toolbar, body.rv-page .back-link, body.rv-page .adf-btn, body.rv-page .adf-toast,
    body.rv-page .fspbiz-upgrade-banner, body.rv-page .fspbiz-fsp-info-bar, body.rv-page #divAiTopupBanner,
    body.rv-page .rv-ai button, body.rv-page .rv-ai [id$="AiRegenWrap"], body.rv-page .rv-ai [id$="AiLoading"],
    body.rv-page .rv-ai [id$="AiStatus"], body.rv-page .rv-ai > p.small:first-of-type { display: none !important }
    body.rv-page .wrap-tool, body.rv-page section { max-width: none !important; padding: 0 !important; margin: 0 !important }
    .rv-report { overflow: visible !important; border-radius: 0 }
    .rv-report .rvdoc-wrapper { background: none !important; padding: 0 !important }
    .rv-report section.rvdoc { box-shadow: none !important; margin: 0 !important; page-break-after: always; break-after: page }
    /* the AI analysis prints after the report, only once it has been generated */
    .card.rv-ai { border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 15mm 14mm !important; break-before: page }
    .card.rv-ai:not(:has([id$="AiContent"] *)) { display: none !important }
    .card.rv-ai > h4 { background: none !important; color: var(--navy) !important; padding: 0 0 8px !important; border-bottom: 2px solid var(--gold) }
    .card.rv-ai > *:not(h4) { margin-left: 0 !important; margin-right: 0 !important }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact }
}
/* "Apply defaults" (Scripts\apply-defaults.js, 2026-09-30): a floating button on tool pages that fills the empty
   boxes on screen with their e.g. examples, and its confirmation toast with Undo. */
.adf-btn { position: fixed; right: 22px; bottom: 22px; z-index: 900; align-items: center; gap: 8px; border: 0; border-radius: 999px;
    padding: 11px 18px; background: var(--navy); color: #fff; font-family: var(--ff-brand); font-weight: 600; font-size: .86rem;
    box-shadow: 0 6px 18px rgba(12,39,67,.28); cursor: pointer }
.adf-btn:hover { background: #1D4E7E }
.adf-btn .adf-n { background: var(--gold); color: var(--navy-deep, #0C2743); border-radius: 999px; padding: 1px 8px; font-size: .74rem; font-weight: 700 }
.adf-toast { position: fixed; right: 22px; bottom: 78px; z-index: 901; max-width: 440px; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 12px; padding: 10px 14px;
    box-shadow: 0 6px 18px rgba(12,39,67,.18); font-size: .86rem; color: var(--ink) }
.adf-toast .fa-circle-check { color: var(--ok) }
.adf-toast .adf-undo { border: 1px solid var(--navy); background: #fff; color: var(--navy); border-radius: 999px; padding: 3px 12px; font-weight: 600; cursor: pointer }
.adf-toast .adf-close { border: 0; background: none; font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer; margin-left: auto }
@media print { .adf-btn, .adf-toast { display: none !important } }
@media(max-width:560px) { .adf-btn { right: 12px; bottom: 12px; padding: 9px 14px } .adf-toast { right: 12px; left: 12px; bottom: 64px } }
/* Every AI loading spinner (2026-09-30, user: "make the spinner for all AI loading blue and a little
   bigger"): each tool's "...AiLoading" line, the field assistant's "Thinking" line (.fa-typing) and
   any other AI wait tagged .ai-spin. Non-AI spinners (building a document) keep the text colour. */
[id$="AiLoading"] .fa-circle-notch.fa-spin, .fa-typing .fa-circle-notch.fa-spin, .fa-circle-notch.fa-spin.ai-spin {
    color: #2B6CB0; font-size: 1.3em; vertical-align: -0.18em; margin-right: 5px
}
/* Discipline 12's four satellite tools (2026-09-30): the spec apps' own classes, taken from their
   HTML shells and scoped to .d10app. The in-app .hero is the spec's navy banner, not the site's
   page hero, so the site hero's background, padding and ::after layer are reset here. */
.d10app .small { font-size: .87rem }
/* The spec apps' start-screen banner (Discipline 12 satellites) repeated the page's own eyebrow and title on a navy
   panel; Discipline 1 has no second banner, so it is now a plain card holding the intro and the Start buttons. */
.d10app .hero { background: #fff; color: var(--body); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; margin-bottom: 20px; box-shadow: var(--sh-sm) }
.d10app .hero::before, .d10app .hero::after { display: none }
.d10app .hero h1, .d10app .hero h4 { display: none }
.d10app .hero p { color: var(--body); max-width: 74ch; margin-top: 0 }
.d10app .btn.gold { background: var(--gold); color: #2A1F06; border-color: var(--gold) }
.d10app .btn.gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff }
.d10app .btn.ghost { background: transparent; color: var(--navy); border-color: #C4CFDA }
.d10app .btn.ghost:hover { border-color: var(--navy); background: var(--navy-soft) }
.d10app .grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px }
.d10app label.f { display: block; font-weight: 600; color: var(--ink); font-size: .86rem; margin-bottom: 4px }
.d10app .q { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin-bottom: 14px }
.d10app .q .qid { font-family: var(--ff-brand); font-size: .74rem; color: var(--gold-deep); font-weight: 700; letter-spacing: .06em }
.d10app .scale { display: grid; grid-template-columns: repeat(10,1fr); gap: 6px }
.d10app .scale button { border: 1px solid #CBD3DC; background: #fff; border-radius: 8px; height: 42px; font-weight: 700; cursor: pointer; font-size: 1rem; color: var(--navy) }
.d10app .scale button:hover, .d10app .scale5 button:hover { border-color: var(--navy) }
.d10app .scale button.sel { color: #111; border-color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy) }
.d10app .scale button.sel.A { background: #F4CCCC } .d10app .scale button.sel.B { background: #FCE5CD }
.d10app .scale button.sel.C { background: #D9EAD3 } .d10app .scale button.sel.D { background: #B6D7A8 }
.d10app .scalelab { display: grid; grid-template-columns: 3fr 3fr 2fr 2fr; gap: 6px; font-size: .7rem; color: var(--muted); margin-top: 4px; text-align: center }
.d10app .scale5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; max-width: 340px }
.d10app .scale5 button { border: 1px solid #CBD3DC; background: #fff; border-radius: 8px; height: 40px; font-weight: 700; cursor: pointer; font-size: 1rem; color: var(--navy) }
.d10app .scale5 button.sel { color: #fff; border-color: var(--navy); background: var(--navy) }
.d10app .chip.bA, .d10app .bA { background: #F4CCCC; color: #8E2A22 } .d10app .chip.bB, .d10app .bB { background: #FCE5CD; color: #8A4B0F }
.d10app .chip.bC, .d10app .bC { background: #D9EAD3; color: #255A33 } .d10app .chip.bD, .d10app .bD { background: #B6D7A8; color: #1E4A1E }
.d10app .live { margin: 10px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.d10app .kpi.main { background: var(--navy); border-color: var(--navy) }
.d10app .kpi.main .v { color: #fff } .d10app .kpi.main .l { color: #C8D4E2 }
.d10app .navrow { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap }
.d10app table.t { width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff }
.d10app table.t th { background: var(--navy); color: #fff; text-align: left; padding: 8px 10px; font-weight: 600; font-size: .8rem }
.d10app table.t td { border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: top }
.d10app table.t input, .d10app table.t select { width: 100%; border: 1px solid #CBD3DC; border-radius: 6px; padding: 5px 7px; font-size: .84rem }
.d10app .bandtable { width: 100%; border-collapse: collapse; font-size: .9rem }
.d10app .bandtable td, .d10app .bandtable th { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
.d10app .flag { background: var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; font-size: .92rem }
.d10app .flag.amber { background: #FCE5CD; border-left-color: #8A4B0F }
.d10app .flag.red { background: #FBEAEA; color: #8E2A22; border: 1px solid #E7B9B3; border-radius: 10px }
.d10app .rep { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 34px }
.d10app .rep h2 { border-bottom: 2px solid var(--gold); padding-bottom: 4px; margin-top: 1.4em }
.d10app .brandline { font: 700 .72rem var(--ff-brand); letter-spacing: .14em; color: var(--gold); text-transform: uppercase }
.d10app ol.refs { font-size: .84rem; padding-left: 1.4em } .d10app ol.refs li { margin-bottom: .55em; word-break: break-word }
@media(max-width:820px) { .d10app .grid3 { grid-template-columns: 1fr } }
@media(max-width:560px) { .d10app .scale { grid-template-columns: repeat(5,1fr) } .d10app .hero { padding: 22px } .d10app .rep { padding: 18px } }
@media print { .d10app .noprint, .d10app .navrow { display: none !important } }
.d10app .fixgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px }
.d10app .fixopt { font-weight: 400 !important; font-size: .84rem !important; display: flex; gap: 6px; align-items: flex-start }
.d10app .fixopt input { width: auto !important; margin-top: 3px }
.d10app .tablewrap { overflow-x: auto; margin-bottom: 10px }
.d10app table.plain, .d10app table.heat { width: 100%; border-collapse: collapse; font-size: .84rem }
.d10app table.plain th, .d10app table.plain td, .d10app table.heat th, .d10app table.heat td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top }
.d10app table.heat td { text-align: center; font-weight: 700; min-width: 56px }
.d10app td.center { text-align: center }
.d10app td.strong { font-weight: 700 }
.d10app .callout { background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 12px; font-size: .86rem; margin: 12px 0 }
.d10app .callout.band-red { background: #FBE9E9; border-left-color: var(--bad); color: var(--ink) }
.d10app .callout.band-amber { background: #FDF1E4; border-left-color: #C27A2C; color: var(--ink) }
.d10app .reflist { font-size: .84rem; padding-left: 18px }
.d10app .reflist li { margin-bottom: 6px }
.d10-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: .86rem; opacity: 0; transition: opacity .25s; z-index: 10040; pointer-events: none; max-width: calc(100% - 32px) }
@media(max-width:760px) { .d10app .grid4 { grid-template-columns: 1fr 1fr } }
@media(max-width:560px) { .d10app .grid2, .d10app .grid4 { grid-template-columns: 1fr } }

/* Out-of-AI-tokens pop-up (Scripts\ai-topup.js, 2026-09-29) */
.aitu-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(12,39,67,.55);
    backdrop-filter: blur(2px)
}

    .aitu-overlay.on {
        display: flex;
        animation: faPanelIn .18s ease-out
    }

.aitu-box {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--white);
    border-radius: var(--r-lg);
    border-top: 4px solid var(--gold);
    box-shadow: var(--sh-lg);
    padding: 28px 26px 22px;
    text-align: center
}

    .aitu-box h3 {
        font-family: var(--ff-head);
        color: var(--ink);
        font-size: 1.35rem;
        margin: 12px 0 8px
    }

.aitu-x {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 6px
}

    .aitu-x:hover {
        color: var(--ink)
    }

.aitu-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem
}

.aitu-lead {
    color: var(--body);
    font-size: .92rem;
    margin: 0 0 14px
}

.aitu-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    text-align: left
}

    .aitu-list li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 9px 0;
        border-top: 1px solid var(--line);
        font-size: .87rem;
        color: var(--body)
    }

        .aitu-list li i {
            flex: none;
            width: 20px;
            text-align: center;
            margin-top: 3px;
            color: var(--navy)
        }

.aitu-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap
}

    .aitu-actions .btn {
        min-width: 130px;
        justify-content: center
    }

.fa-msg-empty {
    font-size: .82rem;
    color: var(--muted);
    padding: 4px 2px
}

.fa-insert {
    margin: 8px 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--navy);
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    color: #fff;
    font-family: var(--ff-brand);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease
}

    .fa-insert:hover {
        background: var(--navy-mid);
        transform: translateY(-1px)
    }

    .fa-insert.done {
        background: var(--ok, #1F6349)
    }

    .fa-insert i {
        font-size: .72rem
    }

.fa-inputrow {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--gold-line);
    background: #fff
}

    .fa-inputrow input {
        flex: 1;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 8px 10px;
        font: inherit;
        font-size: .87rem
    }

    .fa-inputrow button {
        flex: none;
        border: 0;
        border-radius: 8px;
        padding: 0 16px;
        background: var(--navy);
        color: #fff;
        cursor: pointer;
        font-family: var(--ff-brand);
        font-weight: 600;
        font-size: .85rem
    }

        .fa-inputrow button:disabled {
            opacity: .5;
            cursor: default
        }

.fa-typing {
    font-size: .8rem;
    color: var(--muted);
    padding: 0 14px 10px;
    display: none
}

    .fa-typing.on {
        display: block
    }

@media(max-width:480px) {
    .fa-msg {
        max-width: 96%
    }
}

/* one-time code input */
.otp {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 18px 0
}

    .otp input {
        width: 46px;
        height: 56px;
        text-align: center;
        font-family: var(--ff-brand);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--navy);
        border: 1.5px solid var(--line);
        border-radius: 8px;
        background: #fff;
        padding: 0
    }

        .otp input:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: 0 0 0 3px var(--gold-soft)
        }

/* toggle switch */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--ff-brand);
    font-size: .85rem;
    font-weight: 600;
    color: var(--navy)
}

    .switch input {
        position: absolute;
        opacity: 0;
        pointer-events: none
    }

    .switch .tr {
        width: 42px;
        height: 24px;
        border-radius: 999px;
        background: var(--line);
        position: relative;
        transition: .18s ease;
        flex: none
    }

        .switch .tr::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            transition: .18s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,.2)
        }

    .switch input:checked + .tr {
        background: var(--ok)
    }

        .switch input:checked + .tr::after {
            transform: translateX(18px)
        }

    .switch input:focus-visible + .tr {
        outline: 3px solid var(--gold);
        outline-offset: 2px
    }

/* billing cycle toggle */
.cycletoggle {
    display: inline-flex;
    background: var(--navy-soft);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin: 0 auto 30px;
    font-family: var(--ff-brand)
}

    .cycletoggle button {
        border: 0;
        background: transparent;
        border-radius: 999px;
        padding: 9px 20px;
        font-size: .85rem;
        font-weight: 600;
        color: var(--navy);
        cursor: pointer;
        font-family: inherit;
        transition: .16s ease;
        white-space: nowrap
    }

        .cycletoggle button.on {
            background: #fff;
            color: var(--navy-deep);
            box-shadow: var(--sh-sm)
        }

        .cycletoggle button .sv {
            color: var(--ok);
            font-size: .76rem;
            margin-left: 5px
        }

/* ---------- assessment / diagnostic ---------- */
.q {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 30px 32px;
    margin-bottom: 16px;
    box-shadow: var(--sh-sm)
}

    .q .qh {
        display: flex;
        gap: 16px;
        align-items: baseline;
        margin-bottom: 16px;
        flex-wrap: wrap
    }

    .q .qn {
        font-family: var(--ff-brand);
        font-size: .92rem;
        font-weight: 700;
        color: var(--gold-deep);
        letter-spacing: .1em;
        white-space: nowrap
    }

    .q .qt {
        font-family: var(--ff-head);
        font-size: 1.55rem;
        color: var(--navy);
        font-weight: 600;
        line-height: 1.3
    }

.opts {
    display: grid;
    gap: 10px
}

.opt {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 500;
    color: var(--navy);
    transition: .15s ease;
    background: #fff;
    position: relative
}

    .opt:hover {
        border-color: var(--gold-line);
        background: var(--cream)
    }

    .opt input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        pointer-events: none
    }

.radio-dot {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--line);
    border-radius: 50%;
    position: relative;
    transition: border-color .15s ease,background .15s ease
}

.opt:hover .radio-dot {
    border-color: var(--gold-line)
}

.opt input:focus-visible + .radio-dot {
    box-shadow: 0 0 0 3px rgba(29,78,126,.22)
}

.opt.sel .radio-dot {
    border-color: var(--navy);
    background: var(--navy)
}

    .opt.sel .radio-dot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        transform: translate(-50%,-50%)
    }

.opt.sel {
    border-color: var(--navy);
    background: var(--navy-soft);
    box-shadow: 0 2px 8px rgba(18,58,98,.08)
}

    .opt.sel span {
        font-weight: 600
    }

.domain {
    font-family: var(--ff-brand);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 30px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line)
}

.progressbar {
    position: sticky;
    top: 78px;
    z-index: 50;
    background: rgba(251,247,240,.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-warm);
    padding: 12px 0
}

.pbar {
    height: 7px;
    background: var(--line);
    border-radius: 4px;
    overflow: hidden
}

    .pbar i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,var(--gold),var(--gold-deep));
        width: 0;
        transition: width .3s
    }

.scorewheel {
    width: 190px;
    height: 190px;
    flex: none;
    position: relative
}

    .scorewheel svg {
        transform: rotate(-90deg)
    }

    .scorewheel .val {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

        .scorewheel .val b {
            font-family: var(--ff-head);
            font-size: 3rem;
            color: var(--navy);
            line-height: 1;
            font-weight: 600
        }

        .scorewheel .val span {
            font-size: .75rem;
            color: var(--muted);
            letter-spacing: .08em;
            text-transform: uppercase;
            font-family: var(--ff-brand)
        }

.bars {
    display: grid;
    gap: 14px
}

.bar-row {
    display: grid;
    grid-template-columns: 215px 1fr 54px;
    gap: 14px;
    align-items: center;
    font-size: .9rem
}

.bar {
    height: 11px;
    background: var(--line);
    border-radius: 6px;
    overflow: hidden
}

    .bar i {
        display: block;
        height: 100%;
        border-radius: 6px
    }

.bar-row b {
    font-family: var(--ff-brand);
    font-size: .88rem;
    color: var(--navy);
    text-align: right
}

/* Quick Diagnostic: one question at a time (brief §1.7) */
.hcstep {
    display: none
}

    .hcstep.on {
        display: block;
        animation: hcin .22s ease
    }

@keyframes hcin {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.hcnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px
}

    .hcnav .btn {
        min-width: 130px
    }

    .hcnav .small {
        font-family: var(--ff-brand);
        white-space: nowrap
    }

@media(max-width:560px) {
    .hcnav .btn {
        min-width: 0;
        flex: 1
    }
}

.hcstep .q {
    border: 0;
    padding: 0
}

.hcstep .domain {
    margin-top: 0
}

/* ---------- table ---------- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    margin-bottom: 1.2em
}

th {
    text-align: left;
    font-family: var(--ff-brand);
    font-size: .75rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--navy);
    padding: 12px 14px;
    background: var(--navy-soft);
    border-bottom: 2px solid var(--line)
}

td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top
}

tr:last-child td {
    border-bottom: 0
}

.tablewrap {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #fff
}

/* comparison table */
.cmp {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    min-width: 640px
}

    .cmp th {
        font-family: var(--ff-brand);
        font-size: .8rem;
        font-weight: 600;
        color: var(--navy);
        padding: 13px 12px;
        border-bottom: 2px solid var(--line);
        text-align: center;
        vertical-align: bottom
    }

        .cmp th:first-child {
            text-align: left;
            width: 38%
        }

    .cmp td {
        padding: 11px 12px;
        border-bottom: 1px solid var(--line);
        text-align: center;
        color: var(--body)
    }

        .cmp td:first-child {
            text-align: left;
            color: var(--ink)
        }

    .cmp tbody tr:hover {
        background: var(--cream)
    }

    .cmp .y {
        color: var(--ok);
        font-weight: 700
    }

    .cmp .n {
        color: #C3CBD3
    }

    .cmp .grp td {
        background: var(--navy-soft);
        font-family: var(--ff-brand);
        font-weight: 600;
        font-size: .76rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--navy);
        text-align: left;
        padding: 9px 12px
    }

/* invoices table */
.invtable {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem
}

    .invtable th {
        text-align: left;
        font-family: var(--ff-brand);
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 600;
        padding: 0 14px 9px 0;
        border-bottom: 1px solid var(--line)
    }

    .invtable td {
        padding: 12px 14px 12px 0;
        border-bottom: 1px solid var(--line);
        color: var(--body);
        vertical-align: top
    }

    .invtable tr:last-child td {
        border-bottom: 0
    }

/* ---------- alerts (info / success / warning / danger) ----------
   The prototype has several one-off tinted-box patterns (.note,
   .simnote, .gatebar) but no general-purpose alert component.
   This is the reusable one — built from the same --ok/--warn/--bad
   tokens already used by the .pill-* status pills below, so it reads
   as part of the same system rather than a new colour language. */
.alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-left: 3px solid var(--muted);
    background: var(--cream);
    border-radius: 0 var(--r) var(--r) 0;
    padding: 14px 18px;
    font-size: .92rem;
    color: var(--body)
}

    .alert b {
        display: block;
        color: var(--ink);
        margin-bottom: 2px
    }

    .alert p {
        margin: 0
    }

        .alert p + p {
            margin-top: .5em
        }

.alert-info {
    border-left-color: var(--navy-mid);
    background: var(--navy-soft)
}

    .alert-info b {
        color: var(--navy)
    }

.alert-success {
    border-left-color: var(--ok);
    background: #E6F1EC
}

    .alert-success b {
        color: var(--ok)
    }

.alert-warning {
    border-left-color: var(--warn);
    background: #FBEEE2
}

    .alert-warning b {
        color: var(--warn)
    }

.alert-danger {
    border-left-color: var(--bad);
    background: #F8E7E5
}

    .alert-danger b {
        color: var(--bad)
    }

/* ---------- misc ---------- */
.pill {
    display: inline-block;
    font-family: var(--ff-brand);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 20px;
    background: var(--gold-soft);
    color: var(--gold-deep)
}

    .pill.navy {
        background: var(--navy-soft);
        color: var(--navy)
    }

    .pill.live {
        background: #E3F1EA;
        color: var(--ok)
    }

    .pill.soon, .pill.pill-lock {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        letter-spacing: 0;
        text-transform: none;
    }

    .pill.soon {
        background: #EEF1F4;
        color: var(--muted);
    }

.pill-ok {
    background: #E6F1EC;
    color: var(--ok);
    border-color: #BFDDD0
}

.pill-warn {
    background: #FBEEE2;
    color: var(--warn);
    border-color: #EFD5B8
}

.pill-bad {
    background: #F8E7E5;
    color: var(--bad);
    border-color: #EEC9C5
}

.pill-lock {
    background: #EEF1F4;
    color: var(--muted);
    border-color: var(--line)
}

.note {
    border-left: 3px solid var(--gold);
    background: var(--gold-soft);
    padding: 16px 20px;
    border-radius: 0 10px 10px 0;
    font-size: .92rem
}

    .note b {
        color: var(--navy)
    }

.quote {
    font-family: var(--ff-head);
    font-size: clamp(1.2rem,2vw,1.6rem);
    line-height: 1.45;
    color: var(--navy);
    font-style: italic
}

.bg-navy .quote, .bg-deep .quote {
    color: #fff
}

.cite {
    font-family: var(--ff-brand);
    font-size: .82rem;
    letter-spacing: .05em;
    color: var(--muted);
    font-style: normal;
    display: block;
    margin-top: 14px
}

.bg-navy .cite, .bg-deep .cite {
    color: #9FB4C7
}

.logo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    align-items: center;
    justify-content: center;
    opacity: .85
}

    .logo-row span {
        font-family: var(--ff-brand);
        font-weight: 600;
        font-size: .82rem;
        letter-spacing: .06em;
        color: var(--muted)
    }

.faq {
    border-top: 1px solid var(--line)
}

    .faq details {
        border-bottom: 1px solid var(--line)
    }

    .faq summary {
        cursor: pointer;
        padding: 18px 0;
        font-family: var(--ff-head);
        font-size: 1.06rem;
        color: var(--navy);
        font-weight: 600;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 16px
    }

        .faq summary::-webkit-details-marker {
            display: none
        }

        .faq summary::after {
            content: "+";
            color: var(--gold);
            font-size: 1.4rem;
            line-height: 1
        }

    .faq details[open] summary::after {
        content: "–"
    }

    .faq .ans {
        padding: 0 0 20px;
        font-size: .95rem;
        max-width: 75ch
    }

.devnote {
    border: 1px solid var(--navy-soft);
    border-left: 4px solid var(--navy-mid);
    background: #F7FAFC;
    border-radius: var(--r);
    padding: 18px 22px;
    margin: 22px 0
}

    .devnote .eyebrow {
        color: var(--navy-mid);
        margin-bottom: .6rem
    }

        .devnote .eyebrow::after {
            background: var(--navy-soft)
        }

    .devnote code {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 4px;
        padding: 1px 6px;
        font-size: .85em;
        color: var(--navy-deep)
    }

    .devnote p {
        font-size: .88rem
    }

        .devnote p:last-child {
            margin-bottom: 0
        }

/* ---------- footer ---------- */
footer.site {
    background: var(--navy-deep);
    color: #9FB4C7;
    padding: 64px 0 28px;
    font-size: .9rem
}

    footer.site h4 {
        color: #fff;
        font-family: var(--ff-brand);
        font-size: .76rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        margin-bottom: 14px
    }

    footer.site a {
        color: #C2D2E0;
        text-decoration: none;
        display: block;
        padding: 4px 0
    }

        footer.site a:hover {
            color: var(--gold-line)
        }

.fgrid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 44px
}

.fbrand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px
}

    .fbrand img {
        height: 42px
    }

    .fbrand b {
        font-family: var(--ff-brand);
        font-weight: 700;
        font-size: 1.28rem;
        color: #fff;
        display: block;
        line-height: 1
    }

    .fbrand span {
        font-family: var(--ff-brand);
        font-size: .58rem;
        letter-spacing: .28em;
        color: var(--gold-line)
    }

.fbot {
    border-top: 1px solid rgba(255,255,255,.13);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: #7E93A6
}

/* ---------- toast / session bar ---------- */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--navy);
    color: #fff;
    padding: 13px 22px;
    border-radius: 10px;
    font-size: .9rem;
    box-shadow: var(--sh-lg);
    z-index: 400;
    transition: transform .28s ease;
    font-family: var(--ff-brand);
    font-weight: 500
}

    .toast.show {
        transform: translateX(-50%) translateY(0)
    }

.sessionbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
    z-index: 350;
    background: var(--navy-deep);
    color: #fff;
    border-radius: 10px;
    padding: 14px 20px;
    box-shadow: var(--sh-lg);
    display: none;
    align-items: center;
    gap: 16px;
    font-size: .88rem;
    max-width: calc(100% - 32px)
}

    .sessionbar.show {
        display: flex
    }

    .sessionbar .btn {
        padding: 8px 16px;
        font-size: .82rem
    }

/* ---------- page routing ---------- */
.page {
    display: none
}

    .page.on {
        display: block;
        animation: fade .3s ease
    }

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* ============================================================
   ACCOUNT / TOOLS LAYER
   ============================================================ */

/* header account chip */
.acctbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy-soft);
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 5px 12px 5px 5px;
    cursor: pointer;
    font-family: var(--ff-brand);
    font-weight: 600;
    font-size: .8rem;
    color: var(--navy);
    transition: .18s ease;
    white-space: nowrap
}

    .acctbtn:hover {
        border-color: var(--gold-line);
        background: var(--gold-soft)
    }

    .acctbtn .av {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--navy);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: .72rem;
        letter-spacing: .02em
    }

    .acctbtn .pl {
        font-size: .66rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--gold-deep)
    }

@media(max-width:1080px) {
    .acctbtn .nm {
        display: none
    }
}

/* tool cards */
.toolgrid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill,minmax(310px,1fr))
}

.tool {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--sh-sm);
    transition: .18s ease
}

    .tool:hover {
        box-shadow: var(--sh);
        transform: translateY(-2px)
    }

    .tool.locked {
        background: #FCFDFE
    }

    .tool .seq {
        position: absolute;
        top: -13px;
        left: 26px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--navy);
        color: #fff;
        display: grid;
        place-items: center;
        font-family: var(--ff-brand);
        font-weight: 700;
        font-size: .82rem;
        box-shadow: 0 2px 6px rgba(18,58,98,.24)
    }

    .tool.locked .seq {
        background: #93A5B5
    }

    .tool h3 {
        font-size: 1.06rem;
        margin: 10px 0 6px
    }

    .tool .role {
        font-family: var(--ff-brand);
        font-size: .7rem;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--gold-deep);
        margin: 0 0 10px
    }

    .tool p.d {
        font-size: .925rem;
        margin: 0 0 14px;
        flex: 1
    }

    .tool .meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 16px
    }

        .tool .meta span {
            font-size: .72rem;
            font-family: var(--ff-brand);
            font-weight: 500;
            background: var(--cream);
            border: 1px solid var(--line-warm);
            color: var(--muted);
            border-radius: 5px;
            padding: 3px 8px
        }

    .tool .tfoot {
        display: flex;
        align-items: center;
        gap: 10px;
        border-top: 1px solid var(--line);
        padding-top: 15px;
        margin-top: auto
    }

        .tool .tfoot .btn {
            flex: 1
        }

/* the chain diagram (branch dependencies) */
.chain {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    align-items: stretch
}

    .chain .cnode {
        background: #fff;
        border: 1px solid var(--line);
        border-left: 4px solid var(--gold);
        border-radius: var(--r);
        padding: 16px 16px 14px;
        position: relative
    }

        .chain .cnode b {
            display: block;
            font-family: var(--ff-brand);
            font-size: .82rem;
            color: var(--navy);
            margin-bottom: 4px;
            line-height: 1.3
        }

        .chain .cnode span {
            font-size: .78rem;
            color: var(--muted);
            line-height: 1.45;
            display: block
        }

        .chain .cnode i {
            position: absolute;
            right: -11px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--gold);
            color: #fff;
            display: grid;
            place-items: center;
            font-style: normal;
            font-size: .7rem;
            z-index: 2
        }

@media(max-width:760px) {
    .chain .cnode i {
        right: 50%;
        top: auto;
        bottom: -11px;
        transform: translateX(50%) rotate(90deg)
    }
}

.chain .cnode:last-child i {
    display: none
}

/* practice profile branch list (account dashboard) */
.branchlist {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden
}

.branch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: #fff
}

    .branch:last-child {
        border-bottom: 0
    }

    .branch .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--line);
        flex: none
    }

    .branch.has .dot {
        background: var(--ok)
    }

    .branch .nm {
        font-family: var(--ff-brand);
        font-weight: 600;
        font-size: .86rem;
        color: var(--navy);
        flex: none;
        min-width: 190px
    }

    .branch .vl {
        font-size: .85rem;
        color: var(--muted);
        flex: 1
    }

    .branch.has .vl {
        color: var(--body)
    }

@media(max-width:620px) {
    .branch {
        flex-wrap: wrap
    }

        .branch .nm {
            min-width: 0;
            width: 100%
        }
}

/* practice profile progress list (Account\Subscription.aspx, 2026-09-30): icon, name and
   source, progress bar, percentage, status pill per branch; overall figure in the head. */
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px }
.pp-overall { text-align: center; flex: none; background: var(--navy-soft); border-radius: 12px; padding: 10px 16px; min-width: 92px }
.pp-overall b { display: block; font-family: var(--ff-head); font-size: 1.9rem; line-height: 1; color: var(--navy); font-weight: 600 }
.pp-overall b small { font-size: .95rem; margin-left: 1px }
.pp-overall span { font-family: var(--ff-brand); font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
.pp-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.pp-row { display: grid; grid-template-columns: 38px minmax(0,1fr) 120px 44px 118px; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #fff }
.pp-row:last-child { border-bottom: 0 }
.pp-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--cream-deep, #F1EDE4); color: var(--muted); font-size: .95rem }
.pp-row.part .pp-icon { background: var(--gold-soft); color: var(--gold-deep) }
.pp-row.has .pp-icon { background: #DDEFE6; color: var(--ok) }
.pp-name b { display: block; font-family: var(--ff-brand); font-weight: 600; font-size: .86rem; color: var(--navy); line-height: 1.25 }
.pp-name small { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px }
.pp-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden }
.pp-bar i { display: block; height: 100%; border-radius: 999px; background: var(--gold) }
.pp-row.has .pp-bar i { background: var(--ok) }
.pp-pct { font-family: var(--ff-brand); font-weight: 700; font-size: .84rem; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums }
.pp-status { justify-self: end; font-family: var(--ff-brand); font-size: .7rem; font-weight: 600; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px; background: var(--line); color: var(--muted); white-space: nowrap }
.pp-row.part .pp-status { background: var(--gold-soft); color: var(--gold-deep) }
.pp-row.has .pp-status { background: #DDEFE6; color: var(--ok) }
@media(max-width:620px) {
    .pp-row { grid-template-columns: 38px minmax(0,1fr) 44px; row-gap: 8px }
    .pp-bar { grid-column: 2 / 4; grid-row: 2 }
    .pp-status { grid-column: 2 / 4; justify-self: start }
}

/* key/value summary strip */
.kv {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr))
}

    .kv > div {
        background: #fff;
        padding: 16px 18px
    }

    .kv b {
        display: block;
        font-family: var(--ff-head);
        font-size: 1.5rem;
        color: var(--navy);
        line-height: 1.1;
        margin-bottom: 3px
    }

    .kv span {
        font-size: .76rem;
        color: var(--muted);
        line-height: 1.35;
        display: block
    }

/* dashboard progress dials — Account\Dashboard.aspx (Diagnostic hero +
   12 Disciplines grid). Server-rendered SVG rings, no client JS
   dependency. Redesigned session 2026-09-19: full-width .wrap (was
   .wrap-n, capped at 820px — the "too narrow" complaint), a summary
   strip and a distinct diagnostic hero card above the grid, and a
   flex-column tile body with the CTA pinned to the bottom via
   margin-top:auto so buttons line up across a row regardless of how
   long each tile's description runs. */

.dash-summary {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 30px;
    box-shadow: var(--sh-sm);
    margin-bottom: 22px
}

.dash-summary-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap
}

.dash-summary-stat b {
    display: block;
    font-family: var(--ff-head);
    font-size: 1.9rem;
    color: var(--navy);
    line-height: 1;
    font-weight: 600;
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums
}

.dash-summary-stat span {
    font-family: var(--ff-brand);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted)
}

.dash-summary-tier {
    margin-left: auto;
    text-align: right
}

    .dash-summary-tier .pill {
        margin-bottom: 7px
    }

    .dash-summary-tier p {
        margin: 0;
        font-size: .85rem;
        color: var(--muted);
        max-width: 32ch
    }

.dash-diagnostic {
    display: flex;
    gap: 28px;
    align-items: center;
    background: var(--navy);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 30px 34px;
    box-shadow: var(--sh);
    margin-bottom: 26px;
    position: relative;
    overflow: hidden
}

    .dash-diagnostic::after {
        content: "";
        position: absolute;
        right: -90px;
        top: -90px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(200,154,64,.22),rgba(200,154,64,0) 70%)
    }

.dash-diagnostic-dial {
    flex: none;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1
}

    .dash-diagnostic-dial .dial {
        width: 100px;
        height: 100px;
        transform: rotate(-90deg)
    }

    .dash-diagnostic-dial .dial-track {
        fill: none;
        stroke: rgba(255,255,255,.18);
        stroke-width: 8
    }

    .dash-diagnostic-dial .dial-progress {
        fill: none;
        stroke: var(--gold);
        stroke-width: 8;
        stroke-linecap: round;
        transition: stroke-dashoffset .3s ease
    }

    .dash-diagnostic-dial .dial-text {
        transform: rotate(90deg);
        transform-origin: 50px 50px;
        font-family: var(--ff-brand);
        font-weight: 700;
        font-size: 23px;
        fill: #fff;
        text-anchor: middle
    }

    .dash-diagnostic-dial .dial-text-muted {
        fill: rgba(255,255,255,.72);
        font-weight: 500
    }

.dash-diagnostic-body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

    .dash-diagnostic-body .pill {
        background: rgba(255,255,255,.16);
        color: #fff
    }

    .dash-diagnostic-body h3 {
        color: #fff;
        margin: 10px 0 6px
    }

    .dash-diagnostic-body p {
        color: rgba(255,255,255,.8);
        max-width: 58ch;
        margin-bottom: 18px
    }

.dash-starthere {
    display: flex;
    gap: 26px;
    align-items: center;
    flex-wrap: wrap;
    background: linear-gradient(135deg,var(--cream),#fff);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--r-lg);
    padding: 26px 30px;
    box-shadow: var(--sh-sm);
    margin-bottom: 22px
}

.dash-starthere-body {
    flex: 1;
    min-width: 240px
}

    .dash-starthere-body h3 {
        margin: 8px 0 6px
    }

    .dash-starthere-body p {
        margin: 0;
        color: var(--muted);
        max-width: 62ch
    }

.dash-starthere-steps {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 14px
}

.dash-starthere-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 220px
}

    .dash-starthere-step span.n {
        flex: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--navy);
        color: #fff;
        font-family: var(--ff-brand);
        font-size: .78rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .dash-starthere-step p {
        margin: 0;
        font-size: .84rem;
        color: var(--ink)
    }

.dash-starthere-cta {
    flex: none
}

/* Auto dark-mode temporarily disabled (session 2026-09-21) -- the site has
   no manual light/dark toggle anywhere, so it was silently following the
   OS/browser preference with no way for a user to opt back to light, and
   that auto-switch already produced a real bug (unreadable header nav in
   Edge with system dark mode on). "and (prefers-color-scheme:light)" is a
   deliberate always-false condition (a device can't report both dark and
   light preference at once) -- it disables every @media(prefers-color-scheme:dark)
   block in this file (three of them) without deleting the dark palette work
   inside them. To re-enable: remove " and (prefers-color-scheme:light)"
   from all three. */
@media(prefers-color-scheme:dark) and (prefers-color-scheme:light) {
    .dash-starthere {
        background: linear-gradient(135deg,#1c2b3d,#182636)
    }
}

.dash-insights {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    box-shadow: var(--sh-sm);
    margin-bottom: 22px
}

    .dash-insights-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px
    }

    .dash-insights-head h3 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 9px
    }

        .dash-insights-head h3 i {
            color: var(--gold-deep)
        }

.dash-insights-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--line)
}

    .dash-insights-row:first-of-type {
        border-top: 0
    }

    .dash-insights-row .di-rank {
        flex: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--cream);
        color: var(--navy);
        font-family: var(--ff-brand);
        font-size: .74rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .dash-insights-row .di-body {
        flex: 1;
        min-width: 0
    }

        .dash-insights-row .di-body b {
            font-family: var(--ff-head);
            font-size: .92rem;
            color: var(--navy);
            display: block
        }

        .dash-insights-row .di-body span {
            font-size: .78rem;
            color: var(--muted)
        }

    .dash-insights-row .di-val {
        flex: none;
        font-family: var(--ff-brand);
        font-weight: 700;
        color: var(--navy);
        font-variant-numeric: tabular-nums
    }

/* Disabled -- see the long comment above the first @media(prefers-color-scheme:dark) block in this file. */
@media(prefers-color-scheme:dark) and (prefers-color-scheme:light) {
    .dash-insights-row .di-rank {
        background: #1c2b3d
    }
}

.dash-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 22px
}

.dash-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 4px 12px;
    margin-right: 20px;
    font-family: var(--ff-brand);
    font-weight: 600;
    font-size: .95rem;
    color: var(--muted);
    cursor: pointer
}

    .dash-tab.active {
        color: var(--navy);
        border-bottom-color: var(--gold)
    }

.dash-tabpanel[hidden] {
    display: none
}

.dash-disc-list {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.dash-disc-card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    overflow: hidden;
    transition: .18s ease
}

    .dash-disc-card:hover {
        box-shadow: var(--sh-sm)
    }

    .dash-disc-card.open {
        box-shadow: var(--sh);
        border-color: var(--gold-line)
    }

    .dash-disc-card.locked {
        background: var(--cream)
    }

.dash-disc-head {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 22px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit
}

    .dash-disc-head:hover {
        background: var(--cream)
    }

    .dash-disc-head:hover .dash-disc-colorblock i {
        transform: scale(1.08) rotate(-4deg)
    }

/* Colour block replaces the old icon-on-dial badge (session 2026-09-28):
   a full-height solid panel at the very start of the row, alternating
   gold/blue by discipline number so a long stacked list still reads as
   twelve distinct rows at a glance, not just one long list. */
.dash-disc-colorblock {
    flex: none;
    width: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.9rem
}

    .dash-disc-colorblock.gold {
        background: linear-gradient(135deg,var(--gold),var(--gold-deep))
    }

    .dash-disc-colorblock.blue {
        background: linear-gradient(135deg,var(--navy),#0A2540)
    }

    .dash-disc-card.locked .dash-disc-colorblock {
        background: linear-gradient(145deg,#AEB8C2,#8A97A3)
    }

    .dash-disc-colorblock i {
        transition: transform .2s ease
    }

.dash-disc-dial {
    flex: none;
    width: 64px;
    height: 64px;
    position: relative;
    align-self: center;
    margin: 22px 0
}

.disc-icon {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg,var(--gold),var(--gold-deep));
    color: #fff;
    font-size: .82rem;
    box-shadow: 0 3px 8px rgba(138,103,22,.35), 0 0 0 3px #fff;
    transition: transform .2s ease
}

    .disc-icon.locked {
        background: linear-gradient(145deg,#AEB8C2,#8A97A3);
        box-shadow: 0 3px 8px rgba(90,104,116,.25), 0 0 0 3px #fff
    }

.dash-diagnostic-dial {
    position: relative
}

    .dash-diagnostic-dial .disc-icon {
        width: 38px;
        height: 38px;
        font-size: .95rem;
        box-shadow: 0 3px 10px rgba(0,0,0,.25), 0 0 0 3px var(--navy)
    }

    .dash-disc-dial .dial {
        width: 64px;
        height: 64px;
        transform: rotate(-90deg)
    }

    .dash-disc-dial .dial-track {
        fill: none;
        stroke: var(--line);
        stroke-width: 9
    }

    .dash-disc-dial .dial-progress {
        fill: none;
        stroke: var(--gold);
        stroke-width: 9;
        stroke-linecap: round;
        transition: stroke-dashoffset .3s ease
    }

    .dash-disc-dial .dial-text {
        transform: rotate(90deg);
        transform-origin: 50px 50px;
        font-family: var(--ff-brand);
        font-weight: 700;
        font-size: 26px;
        fill: var(--navy);
        text-anchor: middle
    }

    .dash-disc-dial .dial-text-muted {
        fill: var(--muted);
        font-weight: 500
    }

    .dash-disc-dial .dial-locked .dial-track {
        stroke: var(--line-warm)
    }

.dash-disc-title {
    flex: 1;
    min-width: 0;
    margin: 22px 0
}

    .dash-disc-kicker {
        display: inline-block;
        margin-bottom: 8px
    }

    .dash-disc-title-main {
        display: block;
        font-family: var(--ff-head);
        font-size: 1.22rem;
        font-weight: 600;
        color: var(--navy);
        line-height: 1.3;
        margin-bottom: 4px
    }

    .dash-disc-title-lead {
        display: block;
        font-size: .92rem;
        color: var(--muted)
    }

.dash-disc-meta {
    flex: none;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    margin: 22px 0
}

    .dash-disc-meta .tcount {
        font-size: .8rem;
        color: var(--muted);
        font-family: var(--ff-brand)
    }

    .dash-disc-meta .lastTouched {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--muted);
        font-size: .78rem
    }

.dash-disc-chev {
    flex: none;
    font-size: 1.05rem;
    color: var(--gold-deep);
    transition: transform .2s ease;
    line-height: 1;
    align-self: center;
    margin: 22px 28px 22px 0
}

.dash-disc-card.open .dash-disc-chev {
    transform: rotate(180deg)
}

.dash-disc-body {
    display: none;
    padding: 0 28px 24px;
    border-top: 1px solid var(--line)
}

.dash-disc-card.open .dash-disc-body {
    display: block
}

.dash-disc-body .dsum {
    font-size: .95rem;
    max-width: 80ch;
    margin: 20px 0 22px
}

@media(max-width:720px) {
    .dash-disc-head {
        flex-wrap: wrap;
        gap: 12px
    }

        .dash-disc-colorblock {
            width: 100%;
            height: 56px
        }

        .dash-disc-dial {
            margin: 14px 0 14px 18px
        }

        .dash-disc-title {
            flex: 1 1 100%;
            order: 3;
            margin: 0 18px 14px
        }

        .dash-disc-meta {
            order: 2;
            margin: 14px 18px 14px auto;
            text-align: right
        }

        .dash-disc-chev {
            margin: 14px 18px 14px 0
        }
}

@media(max-width:480px) {

    .dash-diagnostic {
        flex-direction: column;
        align-items: flex-start
    }

    .dash-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px
    }

    .dash-summary-tier {
        margin-left: 0;
        text-align: left
    }
}

/* stepped drawer flow (registration / checkout) */
.flowsteps {
    display: flex;
    gap: 6px;
    margin: 0 0 20px
}

    .flowsteps div {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        background: var(--line)
    }

        .flowsteps div.on {
            background: var(--gold)
        }

        .flowsteps div.done {
            background: var(--ok)
        }

.fstep {
    display: none
}

    .fstep.on {
        display: block
    }

/* gate overlay on locked tool cards */
.gatebar {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--cream-deep);
    border: 1px solid var(--line-warm);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 14px
}

    .gatebar svg {
        flex: none;
        color: var(--gold-deep)
    }

/* security commitments matrix */
.secgrid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr))
}

.seccard {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    background: #fff
}

    .seccard h4 {
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 9px
    }

        .seccard h4 em {
            font-style: normal;
            width: 26px;
            height: 26px;
            border-radius: 7px;
            background: var(--navy-soft);
            color: var(--navy);
            display: grid;
            place-items: center;
            font-size: .8rem;
            flex: none
        }

    .seccard p {
        font-size: .9rem;
        margin-bottom: 0
    }

    .seccard ul {
        margin: 10px 0 0;
        padding-left: 18px;
        font-size: .88rem
    }

    .seccard li {
        margin-bottom: 5px
    }

/* table row labels (used on the security page) */
.rowlabel {
    font-family: var(--ff-brand);
    font-weight: 600;
    font-size: .86rem;
    color: var(--navy);
    line-height: 1.35
}

    .rowlabel .small {
        font-family: var(--ff-body);
        font-weight: 400
    }

/* header on small screens: the account chip gives way to the burger menu */
.mobonly {
    display: none
}

/* Raised from 1140px (session 2026-09-21) -- the full nav.main row (9 links
   + logo + Contact/Sign In, all non-wrapping) needs roughly 1350-1400px to
   actually fit, so every viewport from 1140px up to ~1400px -- most laptop
   screens (1366px, 1400px) -- was showing the full row without room for it,
   forcing horizontal overflow/scrollbars. Must stay in sync with the
   matching nav.main/.burger breakpoint further down this file. */
@media(max-width:1480px) {
    #acctChip {
        display: none
    }

    nav.main.open .mobonly {
        display: block
    }

    nav.main.open a:not(.mobonly) + .mobonly {
        border-top: 1px solid var(--line);
        margin-top: 8px;
        padding-top: 16px
    }
}

/* ============================================================
   THE 12 DISCIPLINES — accordion, tools, purchase (brief §1.5)
   ============================================================ */
.disc-grid {
    display: grid;
    gap: 12px
}

.disc-card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    overflow: hidden;
    transition: .18s ease
}

    .disc-card:hover {
        box-shadow: var(--sh-sm)
    }

    .disc-card.open {
        box-shadow: var(--sh);
        border-color: var(--gold-line)
    }

    .disc-card.owned {
        border-left: 4px solid var(--ok)
    }

/* ============================================================
   THE BUSINESS SIMULATOR 2.0 (2026-10-12): one business year.
   Full-screen "game mode" (body.sim-shell, toggled by
   Scripts\simulator-app.js). Four screens: practice today, plan your
   year (with the live forecast rail), the year's events, results.
   Numbers in every table are right-aligned, headings included
   (user: "make sure headings align right").
   ============================================================ */
body.sim-shell header.fspbiz-header,
body.sim-shell footer.site,
body.sim-shell .fspbiz-upgrade-banner,
body.sim-shell #divAiTopupBanner,
body.sim-shell #divWorkshopCountdownBanner { display: none !important; }
body.sim-shell { background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%); }
body.sim-shell main.fspbiz-main-content { min-height: 100vh; }
body:not(.sim-shell) .sim-topbar { display: none; }

.sim-root { min-height: 100vh; display: flex; flex-direction: column; }
.sim-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px; color: #fff; }
.sim-topbar-brand { font-family: var(--ff-brand); font-weight: 700; letter-spacing: .02em; }
.sim-topbar-brand span { font-weight: 500; opacity: .8; }
.sim-topbar-actions { display: flex; align-items: center; gap: 18px; }
.sim-exit, .sim-abandon { color: #fff; opacity: .85; text-decoration: none; font-size: .85rem; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.sim-exit:hover, .sim-abandon:hover, .sim-abandon:focus-visible { opacity: 1; color: var(--gold); }
.sim-abandon[hidden] { display: none; }

/* 2026-10-16: the stage fills the screen (it was capped at 1640 px); the side padding grows a little with the window. */
.sim-stage { flex: 1; max-width: none; margin: 0 auto; padding: 8px clamp(18px, 2.4vw, 48px) 70px; width: 100%;
    opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.sim-stage.sim-fade-in { opacity: 1; transform: translateY(0); }
.sim-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
/* Screens without the side rail (the results/report screen): 1416 px, 20% wider than the 1180 px they had (2026-10-16). */
.sim-layout-solo { grid-template-columns: minmax(0, 1416px); justify-content: center; }
.sim-main { min-width: 0; }
@media (max-width: 1180px) {
    .sim-layout { grid-template-columns: minmax(0, 1fr); }
    .sim-rail { position: static !important; max-height: none !important; }
}

body.sim-shell .sim-stage { color: #D9E3EE; }
body.sim-shell .sim-stage h1 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .3em; }
.sim-h2 { color: #fff !important; font-size: 1.25rem !important; margin: 34px 0 12px !important; }
body.sim-shell .sim-stage h3 { color: var(--navy); }
.sim-eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; margin: 0 0 6px; }
.sim-lead { color: #C7D4E3; max-width: 76ch; }
.sim-disclaimer { margin-top: 34px; font-size: .78rem; color: #93A6B9; max-width: 90ch; }
.sim-hint { font-size: .85rem; color: #A9BACB; }
.sim-big-btn { font-size: 1.05rem; padding: 14px 26px; }
.sim-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 26px 0 0; }
.sim-actions .btn-ghost, .sim-stepnav .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.sim-actions .btn-ghost:hover, .sim-stepnav .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.sim-loading, .sim-closing { text-align: center; color: #fff; padding: 90px 20px; font-size: 1.1rem; }
.sim-loading i, .sim-closing > i { font-size: 2.4rem; color: var(--gold); margin-bottom: 16px; display: block; }
.sim-closing > i { animation: simPulse 1s ease-in-out infinite; }
@keyframes simPulse { 50% { transform: scale(1.15); opacity: .7; } }

/* the four-step progress strip */
.sim-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 6px 0 22px; flex-wrap: wrap; }
.sim-steps li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #A9BACB; padding: 6px 12px 6px 6px;
    border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.sim-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .78rem;
    background: rgba(255,255,255,.14); color: #fff; }
.sim-steps li.active { color: #fff; border-color: var(--gold); background: rgba(200,154,64,.16); }
.sim-steps li.active span { background: var(--gold); color: #2A1F06; }
.sim-steps li.done span { background: var(--ok); }

/* tiles, meters, notes */
.sim-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 16px; }
.sim-tile { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.sim-tile-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: #B9C7D6; }
.sim-tile-value { font-family: var(--ff-head); font-size: 1.55rem; color: #fff; font-variant-numeric: tabular-nums; }
.sim-tile-sub { font-size: .8rem; color: #A9BACB; }
.sim-tile.bad .sim-tile-value { color: #F3978B; }
.sim-tile em, .sim-meter em, .sim-hud em { font-style: normal; font-weight: 700; }
em.up, b.up, .sim-rail-delta.up { color: #7FE3B4; }
em.down, b.down, .sim-rail-delta.down { color: #F3978B; }

.sim-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 22px; margin: 6px 0 14px; }
.sim-meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; color: #D9E3EE; margin-bottom: 5px; }
.sim-meter-top b { color: #fff; font-variant-numeric: tabular-nums; }
.sim-meter-track { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); }
.sim-meter-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .4s ease; }
.sim-meter-track s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; opacity: .7; }

.sim-note { display: flex; gap: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r); padding: 12px 16px; margin: 14px 0; }
.sim-note i { color: var(--gold); margin-top: 3px; }
.sim-note p { margin: 0; }
.sim-note-warn { background: rgba(243,151,139,.12); border-color: rgba(243,151,139,.45); }
/* "If you change nothing": the reasons (2026-10-16) */
.sim-hold-why { margin: 6px 0 4px; padding-left: 1.2em; font-size: .88rem; color: #E6EDF5; }
.sim-hold-why li { margin: 3px 0; }
.sim-hold-head { font-size: .88rem; margin: 6px 0 0 !important; color: #E6EDF5; }
.sim-note-warn i { color: #F3978B; }

.sim-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 8px; }
.sim-howto div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-lg); padding: 14px 16px; font-size: .88rem; color: #C7D4E3; }
.sim-howto span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #2A1F06; font-weight: 800; margin-right: 6px; }
.sim-howto b { color: #fff; display: inline; margin-right: 4px; }
@media (max-width: 760px) { .sim-howto { grid-template-columns: 1fr; } }

.sim-details { margin: 14px 0; }
.sim-details summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.sim-onboard { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
@media (max-width: 760px) { .sim-onboard { grid-template-columns: 1fr; } }
body.sim-shell .sim-onboard h3 { color: #fff; font-size: 1rem; margin: 0 0 8px; }
.sim-onboard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sim-onboard li { background: #fff; border-radius: var(--r); padding: 10px 14px; color: var(--body); font-size: .86rem; display: flex; flex-direction: column; gap: 3px; }
.sim-onboard li b { color: var(--navy); }
.sim-onboard li em { color: var(--warn); font-style: normal; font-size: .8rem; }
.sim-onboard li a { font-weight: 600; font-size: .82rem; color: var(--navy-mid); }

/* goals */
.sim-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .sim-goals { grid-template-columns: 1fr; } }
.sim-goal { text-align: left; background: #fff; border: 2px solid transparent; border-radius: var(--r-lg); padding: 18px; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px; color: var(--body); font: inherit; box-shadow: var(--sh-sm); transition: transform .15s, border-color .15s; }
.sim-goal i { font-size: 1.5rem; color: var(--gold-deep); }
.sim-goal b { color: var(--navy); font-size: 1.1rem; font-family: var(--ff-head); }
.sim-goal span { font-size: .86rem; }
.sim-goal:hover { transform: translateY(-2px); }
.sim-goal.selected { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(200,154,64,.3), var(--sh-sm); }
.sim-goal:focus-visible, .sim-opt:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* the plan: sticky HUD, theme nav, decision cards, option tiles */
.sim-hud { position: sticky; top: 0; z-index: 20; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    background: rgba(12,39,67,.94); backdrop-filter: blur(6px); border: 1px solid rgba(200,154,64,.45); border-radius: var(--r-lg);
    padding: 10px 16px; margin: 14px 0; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.sim-hud-effort { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; color: #D9E3EE; font-size: .88rem; }
.sim-hud-effort b { color: #fff; }
.sim-hud-effort em { color: var(--gold); font-size: .82rem; white-space: nowrap; }
.sim-pips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.sim-pips i { width: 16px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); transition: background .2s; }
.sim-pips i.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 6px rgba(200,154,64,.6); }
.sim-pips i.over { background: #F3978B; border-color: #F3978B; }
.sim-hud-fc { display: flex; align-items: center; gap: 8px; color: #B9C7D6; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.sim-hud-fc b { font-family: var(--ff-head); font-size: 1.15rem; color: #fff; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.sim-themenav { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.sim-themenav a { color: #D9E3EE; text-decoration: none; font-size: .84rem; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.2); }
.sim-themenav a:hover { border-color: var(--gold); color: #fff; }
.sim-theme { scroll-margin-top: 90px; }
.sim-theme-head { display: flex; gap: 14px; align-items: flex-start; margin: 34px 0 12px; }
.sim-theme-head > i { font-size: 1.3rem; color: var(--gold); background: rgba(200,154,64,.15); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.sim-theme-head h2 { color: #fff; font-size: 1.3rem; margin: 0; }
.sim-theme-head p { margin: 2px 0 0; color: #A9BACB; font-size: .9rem; }

.sim-card-plan { background: #fff; border-radius: var(--r-lg); padding: 18px 20px; margin: 0 0 14px; box-shadow: var(--sh-sm); color: var(--body); border-left: 5px solid transparent; transition: border-color .2s; }
.sim-card-plan.chosen { border-left-color: var(--gold); }
.sim-card-plan header { margin-bottom: 12px; }
.sim-card-plan h3 { margin: 2px 0 2px; font-size: 1.15rem; color: var(--navy); }
.sim-card-plan header p { margin: 0; color: var(--muted); font-size: .92rem; }
.sim-disc { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-deep); font-weight: 700; }
.sim-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sim-opts-col { grid-template-columns: 1fr; }
.sim-opt { text-align: left; font: inherit; color: var(--body); background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 14px;
    cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.sim-opt:hover { border-color: var(--gold-line); background: var(--gold-soft); transform: translateY(-1px); }
.sim-opt.selected { border-color: var(--gold-deep); background: var(--gold-soft); box-shadow: 0 0 0 2px rgba(200,154,64,.3), 0 6px 18px rgba(200,154,64,.18); }
.sim-opt.locked { opacity: .55; cursor: not-allowed; border-style: dashed; }
.sim-opt.locked:hover { transform: none; background: #fff; border-color: var(--line); }
.sim-opt.shake { animation: simShake .35s; }
@keyframes simShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sim-opt-none { background: #F7F8FA; }
/* 2026-10-16: "Not this year" shows as selected exactly like any other option (it used to turn a muted grey with no glow, so it did not look chosen).
   It simply inherits .sim-opt.selected. Every selected option also carries a tick. */
.sim-opt-tick { color: var(--gold-deep); margin-right: 6px; }
.sim-stage .btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.sim-opt-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sim-opt-top b { color: var(--ink); font-size: .95rem; line-height: 1.35; }
.sim-opt-note { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.sim-opt-why { font-size: .78rem; color: var(--bad); }
.sim-effort-chip { flex: none; font-size: .72rem; font-weight: 700; color: #2A1F06; background: var(--gold); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.sim-effort-chip.zero { color: var(--muted); background: var(--line); }
.sim-effort-chip.plus { color: #fff; background: var(--ok); }
.sim-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sim-chip { font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--navy-soft); color: var(--navy); }
.sim-chip-cost { background: #FBEEE2; color: #8A4B0F; }
.sim-chip-gain, .sim-chip-meter-up, .sim-chip-hours-up, .sim-chip-effort-up { background: #E6F1EC; color: #1F6349; }
.sim-chip-loss, .sim-chip-meter-down, .sim-chip-hours-down { background: #F8E7E5; color: #9B3226; }
.sim-chip-protect { background: #E8EEF8; color: var(--navy); }
.sim-chip-cash { background: var(--gold-soft); color: var(--gold-deep); }

.sim-lockbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: rgba(255,255,255,.08);
    border: 1px solid var(--gold-line); border-radius: var(--r-lg); padding: 16px 20px; margin: 30px 0 0; }
.sim-lockbar b { color: #fff; }

/* the rail */
.sim-rail { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; display: flex; flex-direction: column; gap: 14px; }
.sim-rail-block { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 12px 14px; }
.sim-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sim-rail-head span { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); font-weight: 700; }
.sim-rail-head b { color: #fff; font-family: var(--ff-head); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.sim-rail-score { background: rgba(200,154,64,.12); border-color: rgba(200,154,64,.4); }
.sim-rail-note { font-size: .78rem; color: #A9BACB; margin: 8px 0 0; line-height: 1.45; }
.sim-rail-warn { font-size: .8rem; color: #F8C3BA; margin: 8px 0 0; line-height: 1.45; }
.sim-rail-busy { opacity: .75; transition: opacity .2s; }
@keyframes simFlash { 0% { opacity: .5; } 100% { opacity: 1; } }
.sim-rail-flash > * { animation: simFlash .3s ease-out; }
.sim-rail-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.sim-rail-table th { background: transparent !important; border: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #93A6B9; font-weight: 600; padding: 0 0 4px; text-align: left; }
.sim-rail-table td { padding: 4px 0; color: #BCCAD9; border-bottom: 1px solid rgba(255,255,255,.07); line-height: 1.35; vertical-align: top; }
.sim-rail-table th.sim-num, .sim-rail-table td.sim-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 10px; }
.sim-rail-table td.sim-num { color: #E3EBF3; }
.sim-rail-total td { font-weight: 700; color: #fff; border-top: 1px solid rgba(255,255,255,.22); }
.sim-rail-strong td { font-weight: 800; color: #fff; background: rgba(200,154,64,.14); }
.sim-rail-moving td { color: #fff; background: rgba(200,154,64,.1); }
.sim-rail-delta { display: block; font-size: .72rem; font-weight: 700; }
.sim-rail-block .sim-meter { margin-bottom: 9px; }
.sim-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: #BCCAD9; }
.sim-plan-list b { display: block; color: #fff; }

/* stars */
.sim-stars { display: inline-flex; gap: 3px; color: var(--gold); }
.sim-stars .fa-regular { color: rgba(255,255,255,.35); }
.sim-stars.sm { font-size: .8rem; }
.sim-stars.lg { font-size: 2.1rem; gap: 8px; }
.sim-stars.pop i { animation: simStar .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i) * .15s + .6s); }
@keyframes simStar { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* the year's events */
.sim-year { position: relative; height: 64px; margin: 4px 6px 18px; }
.sim-year-track { position: absolute; left: 0; right: 0; top: 26px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); }
.sim-year-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.sim-year-mark { position: absolute; top: 12px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; display: grid; place-items: center;
    background: var(--navy); border: 2px solid rgba(255,255,255,.3); color: #A9BACB; font-size: .85rem; }
.sim-year-mark.done { border-color: var(--ok); color: #7FE3B4; }
.sim-year-mark.now { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 6px rgba(200,154,64,.2); }
.sim-year-lbl { position: absolute; bottom: -6px; font-size: .72rem; color: #93A6B9; }
.sim-year-lbl.start { left: 0; } .sim-year-lbl.end { right: 0; }
.sim-event { background: linear-gradient(135deg, #2A1F06, #4A3410); border: 1px solid var(--gold-line); border-left: 5px solid var(--gold);
    border-radius: var(--r-lg); padding: 20px 22px; color: #F7EFDD; }
.sim-event-head { display: flex; gap: 14px; align-items: center; }
.sim-event-head > i { font-size: 1.6rem; color: var(--gold); width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(200,154,64,.18); flex: none; }
.sim-event-head h1 { margin: 2px 0 0 !important; }
.sim-event-story { font-size: 1.05rem; color: #EADFC4; margin: 14px 0; }
.sim-protected { color: #7FE3B4; font-weight: 600; margin: 8px 0; }
.sim-event-base { margin: 8px 0; color: #EADFC4; }
.sim-event .sim-h2 { margin-top: 18px !important; }
.sim-risk { display: flex; flex-direction: column; gap: 5px; background: #FFF4F2; border: 1px dashed #E7A79C; border-radius: 8px; padding: 8px 10px; font-size: .8rem; color: #8E2A22; }
.sim-risk.good { background: #EEF7F1; border-color: #9CCDAE; color: #1F6349; }
.sim-stepnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 0; flex-wrap: wrap; }

/* results */
.sim-result-hero { text-align: center; background: radial-gradient(circle at 50% 0%, rgba(200,154,64,.28), rgba(255,255,255,.04) 60%);
    border: 1px solid rgba(200,154,64,.4); border-radius: 20px; padding: 26px 20px 22px; }
.sim-score b { font-family: var(--ff-head); font-size: 4.2rem; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.sim-score span { display: block; color: #B9C7D6; font-size: .85rem; margin: 2px 0 10px; }
.sim-result-hero h1 { margin-top: 10px !important; }
.sim-parts { max-width: 560px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.sim-part { display: grid; grid-template-columns: 120px 1fr 52px; gap: 10px; align-items: center; font-size: .85rem; }
.sim-part b { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.sim-part-bar { position: relative; height: 8px; background: rgba(255,255,255,.1); border-radius: 99px; }
.sim-part-bar::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(255,255,255,.4); }
.sim-part-bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.sim-part-bar i.pos { left: 50%; background: #7FE3B4; }
.sim-part-bar i.neg { right: 50%; background: #F3978B; }
.sim-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sim-badge { background: #fff; border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; color: var(--body); box-shadow: var(--sh-sm);
    animation: simStar .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i) * .12s + 1s); }
.sim-badge i { font-size: 1.4rem; color: var(--gold-deep); }
.sim-badge b { color: var(--navy); }
.sim-badge span { font-size: .82rem; }
.sim-ev-list, .sim-plan-debrief, .sim-lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sim-ev-list li { display: flex; gap: 14px; background: #fff; border-radius: var(--r); padding: 12px 16px; color: var(--body); box-shadow: var(--sh-sm); }
.sim-ev-list li > div { display: flex; flex-direction: column; gap: 3px; }
.sim-ev-list b { color: var(--navy); }
.sim-ev-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; flex: none; }
.sim-out { font-size: .84rem; font-weight: 600; }
.sim-out.good { color: var(--ok); } .sim-out.bad { color: var(--bad); }

/* the before-and-after statements: numbers AND their headings right-aligned */
.sim-tablewrap { overflow-x: auto; margin: 0 0 18px; border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.sim-compare { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; font-size: .9rem; color: var(--body); }
.sim-compare caption { caption-side: top; text-align: left; background: var(--navy-deep); color: #fff; font-family: var(--ff-head); font-size: 1.1rem; padding: 12px 16px; }
.sim-compare thead th { background: var(--navy); color: #fff; font-family: var(--ff-brand); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; text-align: left; white-space: nowrap; }
.sim-compare th.sim-num, .sim-compare td.sim-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sim-compare tbody th { text-align: left; font-weight: 600; color: var(--ink); padding: 9px 14px; vertical-align: top; min-width: 200px;
    text-transform: none; letter-spacing: 0; font-family: var(--ff-body); font-size: .9rem; background: #fff; }
.sim-compare tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; margin-top: 2px; }
.sim-compare td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sim-compare tbody th { border-bottom: 1px solid var(--line); }
.sim-compare td.sim-chg.good { color: var(--ok); font-weight: 700; }
.sim-compare td.sim-chg.bad { color: var(--bad); font-weight: 700; }
.sim-compare td.sim-notes { min-width: 260px; }
.sim-tr-changed th, .sim-tr-changed td { background: #FFFBF2; }
.sim-tr-total th, .sim-tr-total td { background: var(--navy-soft); color: var(--navy); font-weight: 700; border-top: 2px solid var(--line); }
.sim-tr-strong th, .sim-tr-strong td { background: var(--cream); color: var(--navy); font-weight: 800; border-top: 2px solid var(--gold); }
.sim-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--body); font-weight: 400; }
.sim-why .pos, .sim-why .neg { font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-why .pos { color: var(--ok); } .sim-why .neg { color: var(--bad); }
.sim-nochange { color: var(--muted); font-size: .8rem; font-weight: 400; }
.sim-tablenote { font-size: .82rem; color: #A9BACB; max-width: 100ch; }

.sim-meter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sim-meter-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 14px; }
.sim-meter-card .sim-why { color: #C7D4E3; margin-top: 8px; }
.sim-meter-card .sim-why .pos { color: #7FE3B4; } .sim-meter-card .sim-why .neg { color: #F3978B; }

.sim-results-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 860px) { .sim-results-cols { grid-template-columns: 1fr; } }
.sim-plan-debrief li { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: #fff; border-radius: var(--r); padding: 10px 14px; color: var(--body); }
.sim-plan-debrief li div { display: flex; flex-direction: column; }
.sim-plan-debrief b { color: var(--navy); }
.sim-plan-debrief a { font-size: .82rem; font-weight: 600; white-space: nowrap; color: var(--navy-mid); }
.sim-next { background: #fff; border-radius: var(--r-lg); padding: 16px; color: var(--body); }
.sim-next p { margin: 0 0 12px; }
.sim-lb li { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border-radius: var(--r); padding: 8px 12px; font-size: .86rem; }
.sim-lb li span { flex: 1; }
.sim-lb li b { color: #fff; font-variant-numeric: tabular-nums; }
.sim-lb li.mine { background: rgba(200,154,64,.18); border: 1px solid var(--gold); color: #fff; font-weight: 700; }

/* Simulator 3.0 (2026-10-15): campaign year, industry comparison, bank chart, debrief, career */
.sim-yearpill { display: inline-block; background: var(--gold); color: var(--navy-deep); font-family: var(--ff-brand); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 12px; border-radius: 99px; margin: 0 0 10px; }
.sim-h3 { color: #fff !important; font-size: 1.05rem !important; margin: 22px 0 8px !important; font-family: var(--ff-head); }
.sim-up { color: #1F6349; font-weight: 700; } .sim-down { color: #A3342C; font-weight: 700; }
.sim-tile .sim-up, .sim-tile .sim-down { font-weight: 800; }
.sim-tile .sim-up { color: #7FE3B4; } .sim-tile .sim-down { color: #F3978B; }
.sim-neg { color: var(--bad); font-weight: 700; }
.sim-offer { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-lg); padding: 28px 30px; margin-top: 30px; }
.sim-offer h1 { color: #fff; }

/* a plain white comparison table (industry, bank balance, debrief, campaign years) */
.sim-simple { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; font-size: .9rem; color: var(--body); }
.sim-simple caption { caption-side: top; text-align: left; background: var(--navy-deep); color: #fff; font-family: var(--ff-head); font-size: 1.05rem; padding: 12px 16px; }
.sim-simple thead th { background: var(--navy); color: #fff; font-family: var(--ff-brand); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; text-align: left; }
.sim-simple th.sim-num, .sim-simple td.sim-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sim-simple tbody th { text-align: left; font-weight: 600; color: var(--ink); padding: 9px 14px; vertical-align: top; text-transform: none; letter-spacing: 0; font-family: var(--ff-body); font-size: .9rem; background: #fff; border-bottom: 1px solid var(--line); }
.sim-simple tbody th small, .sim-simple td small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; margin-top: 2px; }
.sim-simple td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sim-simple tr.now th, .sim-simple tr.now td { background: #FFFBF2; font-weight: 700; }
.sim-verdict { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: #EEF1F4; color: var(--ink); }
.sim-verdict.good { background: #E6F1EC; color: #1F6349; } .sim-verdict.bad { background: #F8E7E5; color: #9B3226; } .sim-verdict.mid { background: var(--gold-soft); color: var(--gold-deep); }

/* the bank balance through the year */
.sim-chart { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 10px 12px 12px; margin: 8px 0 12px; }
.sim-rail-block .sim-chart { background: transparent; border: 0; padding: 0; margin: 0; }
.sim-chart-svg { width: 100%; height: auto; display: block; }
.sim-chart-line { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; }
.sim-chart-line.neg { stroke: #F3978B; }
.sim-chart-area { fill: rgba(200,154,64,.18); stroke: none; } .sim-chart-area.neg { fill: rgba(243,151,139,.2); }
.sim-chart-zero { stroke: rgba(255,255,255,.45); stroke-width: 1; stroke-dasharray: 3 3; }
.sim-chart-min { fill: var(--gold); stroke: #fff; stroke-width: 1.5; } .sim-chart-min.neg { fill: #F3978B; }
.sim-chart-lbl { fill: #A9BACB; font-size: 10px; font-family: var(--ff-brand); }
.sim-chart-warn, .sim-chart-ok { display: block; font-size: .82rem; margin-top: 4px; }
.sim-chart-warn { color: #F3978B; font-weight: 600; } .sim-chart-ok { color: #BCCAD9; }

/* repeat of a choice in a campaign */
.sim-opt-repeat { display: block; margin-top: 6px; font-size: .76rem; color: var(--gold-deep); font-weight: 600; }
.sim-opt-repeat i { margin-right: 4px; }

/* the same-dice debrief */
.sim-mentor { display: flex; gap: 14px; background: #fff; border-radius: var(--r-lg); padding: 16px 18px; margin: 12px 0 16px; color: var(--body); box-shadow: var(--sh-sm); border-left: 5px solid var(--gold); }
.sim-mentor > i { font-size: 1.6rem; color: var(--gold-deep); margin-top: 2px; }
.sim-mentor ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.sim-debrief-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sim-debrief-ev { background: #fff; border-radius: var(--r); padding: 12px 16px; color: var(--body); box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 4px; }
.sim-debrief-ev > b { color: var(--navy); }
.sim-alts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .84rem; }
.sim-alts li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.sim-alts li.chosen { font-weight: 700; color: var(--navy); }
.sim-alts li em { font-style: normal; font-weight: 400; color: var(--muted); }

/* the campaign: years so far, selling, the career summary */
.sim-exitbox { background: rgba(255,255,255,.07); border: 1px solid rgba(200,154,64,.55); border-radius: var(--r-lg); padding: 16px 20px; margin: 14px 0; }
.sim-exitbox .sim-h3 { margin-top: 0; }
.sim-career { display: flex; flex-direction: column; gap: 6px; }
.sim-career-hero { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: var(--r-lg); padding: 18px 22px; color: var(--body); border-left: 5px solid var(--gold); box-shadow: var(--sh-sm); }
.sim-career-hero > i { font-size: 2.2rem; color: var(--gold-deep); }
.sim-career-hero h3 { margin: 0 0 2px; color: var(--navy); font-size: 1.4rem; }
.sim-career-hero p { margin: 0; }
.sim-sale { list-style: none; margin: 8px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sim-sale li { display: flex; justify-content: space-between; gap: 12px; background: rgba(255,255,255,.06); border-radius: var(--r); padding: 8px 14px; font-size: .9rem; }
.sim-sale li b { color: #fff; font-variant-numeric: tabular-nums; }

/* key client households and the advice-craft mini-games (3.1) */
.sim-trustbar { display: inline-block; width: 70px; height: 7px; background: #E2E6EB; border-radius: 99px; vertical-align: middle; overflow: hidden; margin-right: 4px; }
.sim-trustbar i { display: block; height: 100%; background: var(--gold); }
.sim-trustcell { white-space: nowrap; }
.sim-hh-risk th, .sim-hh-risk td { background: #FFF6F4; }
.sim-hh-note { color: var(--gold-deep) !important; font-weight: 600; }
.sim-hh-lost { list-style: none; margin: 8px 0 0; padding: 0; font-size: .86rem; color: #F3B6AE; display: flex; flex-direction: column; gap: 4px; }
.sim-event-who { margin: 6px 0 0; color: var(--gold-deep); font-size: .9rem; }
.sim-event-who i { margin-right: 6px; }
.sim-ev-who { color: var(--gold-deep); font-weight: 600; }
.sim-card-game { border-left-color: var(--gold) !important; background: linear-gradient(180deg, #fff, #FFFBF2); }
.sim-gate { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sim-gate p { margin: 0; }
.sim-gate-note { font-size: .78rem; color: var(--muted); }
.sim-modal.sim-game { max-width: 760px; width: 100%; max-height: 90vh; overflow-y: auto; }
.sim-g-file { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 14px 10px; margin: 0 0 12px; }
.sim-g-file legend { font-weight: 700; color: var(--navy); padding: 0 6px; }
.sim-g-item, .sim-g-client { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--line); cursor: pointer; color: var(--ink); }
.sim-g-item:last-child, .sim-g-client:last-child { border-bottom: 0; }
.sim-g-item input, .sim-g-client input { margin-top: 4px; flex: none; }
.sim-g-client small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.sim-g-instr { margin: 8px 0; color: var(--ink); }
.sim-g-err { color: var(--bad); font-weight: 600; margin: 8px 0 0; min-height: 1.2em; }
.sim-g-review { list-style: none; margin: 10px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.sim-g-review li { padding: 8px 12px; border-radius: var(--r); background: #F3F5F7; border-left: 4px solid var(--line); }
.sim-g-review li.ok { border-left-color: #1F6349; } .sim-g-review li.miss { border-left-color: #A3342C; background: #FFF6F4; }
.sim-g-review small { display: block; color: var(--muted); margin-top: 3px; }

.sim-g-say { margin: 0 0 8px; } .sim-g-say i { color: var(--gold); }
.sim-g-h3 { margin: 0 0 10px; }
.sim-g-order { list-style: decimal; margin: 0 0 8px; padding-left: 26px; }
.sim-g-order li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.sim-g-ob { display: flex; gap: 4px; flex: none; }
.sim-g-ob .btn { padding: 4px 10px; }
.sim-note div p { margin: 0 0 6px; } .sim-note div p:last-child { margin-bottom: 0; }
.sim-note a { color: var(--gold); font-weight: 600; }

@media (max-width: 760px) {
    /* the small comparison tables fit the screen instead of scrolling sideways; the key clients table drops its story column */
    .sim-simple { min-width: 0; font-size: .82rem; }
    .sim-simple thead th, .sim-simple td, .sim-simple tbody th { padding: 7px 8px; }
    .sim-simple.sim-hh th:nth-child(2), .sim-simple.sim-hh td:nth-child(2) { display: none; }
    .sim-trustbar { width: 44px; }
    .sim-tablewrap.sim-scroll { overflow-x: auto; }
    .sim-career-hero { flex-direction: column; text-align: center; }
}

/* errors + confirm modal */
.sim-card.sim-error { text-align: center; background: #fff; color: var(--body); padding: 40px 30px; margin-top: 40px; border-radius: var(--r-lg); }
.sim-error > i { font-size: 2.4rem; color: var(--bad); margin-bottom: 14px; display: block; }
body.sim-shell .sim-stage .sim-error h2 { color: var(--navy); }
.sim-error .btn { margin: 6px; }
.sim-outdated > i { color: var(--gold-deep); }
.sim-modal-backdrop { position: fixed; inset: 0; background: rgba(12,39,67,.6); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.sim-modal { background: #fff; border-radius: var(--r-lg); padding: 26px 28px; max-width: 440px; box-shadow: var(--sh-lg); }
.sim-modal-title { font-size: 1.15rem; margin: 0 0 8px; color: var(--navy); }
.sim-modal p { color: var(--ink); margin-bottom: 18px; }
.sim-modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* phones: 390 px wide, no sideways page scroll (CLAUDE.md "Phones") */
@media (max-width: 760px) {
    .sim-stage { padding: 6px 16px 50px; }
    .sim-topbar { padding: 12px 16px; }
    .sim-topbar-brand span { display: none; }
    .sim-hud { gap: 10px; padding: 8px 12px; }
    .sim-hud-fc { font-size: .72rem; }
    .sim-card-plan { padding: 14px; }
    .sim-opts { grid-template-columns: 1fr; }
    .sim-part { grid-template-columns: 96px 1fr 44px; }
    .sim-score b { font-size: 3.4rem; }
    .sim-steps li { font-size: 0; gap: 0; padding: 4px; }
    .sim-steps li span { font-size: .78rem; }
    .sim-steps li.active { font-size: .78rem; gap: 6px; padding-right: 10px; }
    /* the before-and-after statements stack per line on a phone: name, then the three figures side by side, then the notes */
    .sim-tablewrap { overflow: visible; }
    .sim-compare { min-width: 0; }
    .sim-compare thead { display: none; }
    .sim-compare tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
    .sim-compare tbody th { grid-column: 1 / -1; min-width: 0; border-bottom: 0; padding-bottom: 2px; }
    .sim-compare td { border-bottom: 0; padding: 4px 10px 8px; }
    .sim-compare td.sim-num::before { content: attr(data-label); display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
    .sim-compare td.sim-notes { grid-column: 1 / -1; min-width: 0; padding-top: 0; }
    .sim-compare td.sim-notes:empty { display: none; }
}

/* print the results as a clean report */
@media print {
    body.sim-shell { background: #fff !important; }
    .sim-topbar, .sim-actions, .sim-steps, .sim-disclaimer + .sim-actions { display: none !important; }
    .sim-stage { opacity: 1 !important; transform: none !important; color: #222 !important; padding: 0; }
    body.sim-shell .sim-stage h1, .sim-h2, .sim-score b, .sim-part b, .sim-tile-value, .sim-lb li b { color: #0C2743 !important; }
    .sim-result-hero, .sim-tile, .sim-meter-card, .sim-lb li { background: #fff !important; border-color: #ccc !important; }
    .sim-compare { min-width: 0; font-size: 8.5pt; }
    .sim-tablewrap { overflow: visible; box-shadow: none; }
    .sim-compare tr, .sim-ev-list li, .sim-badge { break-inside: avoid; }
}

/* the free "Play" tile on Tools\Default.aspx — game-styled, deliberately not a diagnostic card */

.disc-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px 30px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit
}

    .disc-head:hover {
        background: var(--cream)
    }

    .disc-head .dnum {
        flex: none;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--navy);
        color: #fff;
        display: grid;
        place-items: center;
        font-family: var(--ff-brand);
        font-weight: 700;
        font-size: 1.15rem
    }

.disc-card.owned .disc-head .dnum {
    background: var(--ok)
}

.disc-head .dtitle {
    flex: 1;
    min-width: 0
}

    .disc-head .dtitle b {
        display: block;
        font-family: var(--ff-head);
        font-size: 1.35rem;
        font-weight: 600;
        color: var(--navy);
        line-height: 1.25;
        margin-bottom: 4px
    }

    .disc-head .dtitle span {
        display: block;
        font-size: .96rem;
        color: var(--muted)
    }

.disc-head .dmeta {
    flex: none;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px
}

    .disc-head .dmeta .price {
        font-family: var(--ff-head);
        font-size: 1.45rem;
        color: var(--navy);
        font-weight: 600;
        line-height: 1
    }

    .disc-head .dmeta .tcount {
        font-size: .8rem;
        color: var(--muted);
        font-family: var(--ff-brand)
    }

.disc-head .dchev {
    flex: none;
    font-size: 1.7rem;
    color: var(--gold-deep);
    transition: transform .2s ease;
    line-height: 1
}

.disc-card.open .disc-head .dchev {
    transform: rotate(90deg)
}

@media(max-width:720px) {
    .disc-head {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 18px
    }

        .disc-head .dtitle {
            flex: 1 1 100%;
            order: 3
        }

        .disc-head .dmeta {
            order: 2;
            margin-left: auto;
            text-align: right
        }
}

.disc-body {
    display: none;
    padding: 0 24px 24px;
    border-top: 1px solid var(--line)
}

.disc-card.open .disc-body {
    display: block
}

.disc-body .dsum {
    font-size: .95rem;
    max-width: 80ch;
    margin: 20px 0 22px
}

.trow {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 18px 0;
    border-top: 1px solid var(--line)
}

    .trow:first-child {
        border-top: 0;
        padding-top: 0
    }

    .trow.soon {
        opacity: .72
    }

    .trow .tmain {
        flex: 1;
        min-width: 0
    }

    .trow h4 {
        font-size: .98rem;
        margin: 0 0 6px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap
    }

    .trow p {
        font-size: .9rem;
        margin: 0 0 10px;
        max-width: 74ch
    }

    .trow .meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px
    }

        .trow .meta span {
            font-size: .72rem;
            font-family: var(--ff-brand);
            font-weight: 500;
            background: var(--cream);
            border: 1px solid var(--line-warm);
            color: var(--muted);
            border-radius: 5px;
            padding: 3px 8px
        }

    .trow .tact {
        flex: none;
        width: 170px
    }

        .trow .tact .btn {
            width: 100%
        }

@media(max-width:640px) {
    .trow {
        flex-direction: column;
        gap: 12px
    }

        .trow .tact {
            width: 100%
        }
}

.dbuy {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

    .dbuy .small {
        flex: 1;
        min-width: 220px;
        margin: 0
    }

/* the two instruments outside the twelve (brief §1.5 "Outside the twelve") */
.bookend {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    padding: 24px 26px
}

    .bookend.start {
        border-left: 4px solid var(--gold)
    }

    .bookend.end {
        border-left: 4px solid var(--navy-mid)
    }

/* bundle box */
#bundleBox .price {
    font-family: var(--ff-head);
    color: var(--navy);
    font-weight: 600;
    line-height: 1
}

/* ============================================================
   AFSL DASHBOARD (brief §6 — aggregates only, never a named
   adviser or practice row; see CLAUDE.md rule 5)
   ============================================================ */
.gwrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 24px;
    margin-top: 24px
}

.gstats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 22px
}

.gstat {
    background: var(--cream);
    border-radius: 10px;
    padding: 14px 16px
}

.gstatv {
    font-family: var(--ff-head);
    font-size: 1.7rem;
    color: var(--navy);
    line-height: 1.1
}

.gstatl {
    font-size: .78rem;
    color: var(--muted);
    margin-top: 3px
}

.gindex {
    display: grid;
    grid-template-columns: minmax(200px,.8fr) 2fr;
    gap: 20px;
    align-items: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
    margin-bottom: 26px
}

.gbig {
    font-family: var(--ff-head);
    font-size: 3rem;
    color: var(--navy);
    line-height: 1
}

    .gbig small {
        font-size: 1rem;
        color: var(--muted);
        font-family: var(--ff-body)
    }

.gnote {
    background: var(--cream);
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    padding: 14px 16px
}

.gh {
    margin: 26px 0 .5rem;
    font-size: 1.15rem
}

.gtable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    font-size: .88rem
}

    .gtable th {
        text-align: left;
        font-size: .72rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 600;
        padding: 0 10px 8px 0;
        border-bottom: 1px solid var(--line)
    }

    .gtable td {
        padding: 9px 10px 9px 0;
        border-bottom: 1px solid var(--line);
        vertical-align: middle
    }

    .gtable .num, .gtable th.num {
        text-align: right
    }

.gnum {
    color: var(--muted);
    width: 26px;
    font-size: .8rem
}

.gname {
    min-width: 190px
}

.gbarcell {
    width: 38%
}

.gbar {
    display: block;
    height: 8px;
    background: var(--cream);
    border-radius: 5px;
    overflow: hidden;
    min-width: 70px
}

    .gbar i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,var(--navy),var(--gold));
        border-radius: 5px
    }

.gval {
    width: 52px;
    text-align: right
}

.grange {
    width: 64px;
    text-align: right;
    white-space: nowrap
}

.gcombined td {
    background: var(--cream)
}

.mv-up {
    color: #1d7a4c;
    font-weight: 600
}

.mv-dn {
    color: #a8452f;
    font-weight: 600
}

@media(max-width:820px) {
    .gstats {
        grid-template-columns: repeat(2,1fr)
    }

    .gindex {
        grid-template-columns: 1fr
    }

    .gwrap {
        padding: 18px 14px;
        overflow-x: auto
    }

    .gtable {
        font-size: .8rem;
        min-width: 520px
    }

    .gregion {
        min-width: 600px
    }
}

/* ---------- responsive ---------- */
/* Raised from 1140px to 1480px (session 2026-09-21) -- see the matching
   comment on the #acctChip block above; this is the block that actually
   hides nav.main and shows .burger, so it must move together with that
   one. Every other rule in this block is a "get more compact/stacked
   sooner" rule, so triggering it ~340px earlier is a pure improvement,
   not a regression, on top of fixing the header overflow.
   MUST match MasterPagecountique.master's own nav-collapse media query and its
   two window.innerWidth checks (all 1480px since 2026-09-30); if only one side
   moves, the header links vanish with no menu button to reach them. */
@media(max-width:1480px) {
    .g4 {
        grid-template-columns: repeat(2,1fr)
    }

    .stats {
        grid-template-columns: repeat(2,1fr)
    }

    .hero-grid, .g-side {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .tiers {
        grid-template-columns: 1fr
    }

    .books {
        grid-template-columns: 1fr
    }

    .disc {
        grid-template-columns: repeat(2,1fr)
    }

    nav.main {
        display: none
    }

        nav.main.open {
            display: flex;
            position: absolute;
            left: 0;
            right: 0;
            top: 78px;
            background: #fff;
            flex-direction: column;
            align-items: stretch;
            padding: 12px;
            border-bottom: 1px solid var(--line);
            box-shadow: var(--sh);
            gap: 2px
        }

            nav.main.open a {
                padding: 13px 14px;
                font-size: .95rem
            }

    .burger {
        display: flex
    }

    .fgrid {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }

    .bar-row {
        grid-template-columns: 1fr;
        gap: 6px
    }

        .bar-row b {
            text-align: left
        }
}

@media(max-width:660px) {
    body {
        font-size: 16px
    }

    .g2, .g3, .g4, .disc {
        grid-template-columns: 1fr
    }

    .stats {
        grid-template-columns: 1fr
    }

    .book {
        grid-template-columns: 110px 1fr;
        gap: 16px;
        padding: 18px
    }

    .f2 {
        grid-template-columns: 1fr
    }

    .fgrid {
        grid-template-columns: 1fr
    }

    .btns .btn {
        width: 100%
    }

    .step {
        grid-template-columns: 44px 1fr;
        gap: 14px
    }

    .hbar {
        height: 68px
    }

    nav.main.open {
        top: 68px
    }

    .progressbar {
        top: 68px
    }

    .brand img {
        height: 34px
    }

    .brand .wm b {
        font-size: 1.12rem
    }
}

@media print {
    header.site, footer.site, .drawer, .sessionbar, .acctbtn {
        display: none !important
    }

    .page {
        display: block !important
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* ---------- dark mode (nice-to-have per PROJECT_PLAN.md Phase 1.2) ----------
   Conservative: keep the same navy/gold identity, just invert the
   surface/text tokens so nothing above needs a dark-specific class. */
/* Disabled -- see the long comment above the first @media(prefers-color-scheme:dark) block in this file. */
@media(prefers-color-scheme:dark) and (prefers-color-scheme:light) {
    :root {
        --white: #0F1B28;
        --ink: #EAF0F6;
        --body: #C2D2E0;
        --muted: #8CA0B3;
        --line: #22364A;
        --line-warm: #33302A;
        --cream: #152332;
        --cream-deep: #1B2C3E;
        --navy-soft: #1A2E42;
    }

    body {
        background: var(--white)
    }

    header.site {
        background: rgba(15,27,40,.92)
    }

    /* header.site's own background goes near-black above, but --navy/--navy-deep
       (the nav text colours) are deliberately NOT redefined for dark mode —
       they're the fixed brand navy, meant for cream/white surfaces elsewhere on
       the page. Left alone here, nav links become dark-navy-on-near-black and
       are effectively unreadable (confirmed in Edge, session 2026-09-21).
       --ink is already the light dark-mode text colour used everywhere else. */
    .brand .wm b,
    nav.main a {
        color: var(--ink)
    }

        nav.main a:hover {
            color: var(--ink)
        }

    .card, .door, .tier, .tool, .q, .disc-card, .book, .seccard, .bookend, .gwrap, .branch, .pp-row, .kv > div, .chain .cnode,
    .dash-disc-card, .fa-msg.assistant, .fa-inputrow, .dash-insights {
        background: #152332
    }

    .disc-icon, .disc-icon.locked {
        box-shadow: 0 3px 8px rgba(0,0,0,.45), 0 0 0 3px #152332
    }

    .fa-panel {
        background: var(--cream)
    }

    input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], select, textarea, .otp input {
        background: #152332;
        color: var(--ink)
    }

    .btn-ghost {
        color: #EAF0F6
    }

    .fmt button, .qty button {
        background: #152332;
        color: var(--ink)
    }
}

/* ---- Business Excellence Roadmap, the thirteenth tool (Tools\Roadmap, Scripts\roadmap-app.js), 2026-09-30 ---- */
.d10app .chip.bx-bA { background: #F4CCCC; color: #8E2A22 }
.d10app .chip.bx-bB { background: #FCE5CD; color: #8A4B0F }
.d10app .chip.bx-bC { background: #D9EAD3; color: #255A33 }
.d10app .chip.bx-bD { background: #B6D7A8; color: #1E4A1E }
.bx-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 8px }
.bx-top .tabbar { margin-bottom: 0 }
.d10app .tab[disabled] { opacity: .45; cursor: not-allowed }
.bx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px }
.bx-disc { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff }
.bx-disc.off { background: var(--cream, #FBF8F2) }
.bx-disc .btn { font-size: .76rem; padding: 5px 10px }
.bx-bar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(90px, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line) }
.bx-bar:last-child { border-bottom: 0 }
.bx-bar-l { font-size: .88rem }
.bx-bar-v { font-weight: 700; color: var(--navy); white-space: nowrap; font-size: .9rem }
.bx-track { height: 10px; background: #E5E9EF; border-radius: 99px; overflow: hidden; display: block }
.bx-track i { display: block; height: 100%; background: var(--navy); border-radius: 99px }
.bx-track i.bx-pA { background: #C0504D } .bx-track i.bx-pB { background: #D9822B } .bx-track i.bx-pC { background: #5B9B63 } .bx-track i.bx-pD { background: #2F6B3A }
.bx-phase .bx-kick { font-family: var(--ff-brand); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep, #A87F2F); margin: 0 }
.bx-item { border-left: 3px solid var(--gold); background: var(--navy-soft, #EEF2F7); border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 8px }
.bx-theme { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff }
.bx-theme-v { font-family: var(--ff-head); font-size: 1.6rem; color: var(--navy); font-weight: 600; margin: 4px 0 }
.bx-theme-v span { font-size: .8rem; color: var(--muted); font-weight: 400 }
.bx-scroll { overflow-x: auto }
.bx-refs { font-size: .82rem; padding-left: 22px } .bx-refs li { margin-bottom: 6px }
@media (max-width: 760px) { .bx-bar { grid-template-columns: 1fr; gap: 4px } .d10app .grid2, .d10app .grid3 { grid-template-columns: 1fr } }
/* ---- AI analysis inside the report (report-view.js, 2026-10-01): once included as the report's last section, the AI
   card keeps its buttons and status but not a second copy of the text; it never prints (the report carries it). ---- */
.card.rv-ai.rv-ai-included [id$="AiContent"], .card.rv-ai.rv-ai-included [id$="AiTs"] { display: none !important }
.card.rv-ai .rv-ai-note { display: none; color: var(--good, #1F6349); margin: 10px 0 0 }
.card.rv-ai.rv-ai-included .rv-ai-note { display: block }
@media print { .card.rv-ai.rv-ai-included { display: none !important } }
/* ---- Phones (UX-15 viewport pass, 2026-10-12). The master now carries <meta name="viewport">, so a phone lays the
   page out at its own width (390 px) instead of a shrunken 980 px desktop page. These rules fix what broke once it
   stopped being shrunk; wide screens never match them. New pages must work at 390 px wide
   (tests\regression\viewport\phone-pass.ps1, test-reports\viewport-phone-pass.md). ---- */
@media (max-width: 760px) {
    /* A long unbroken word, name or URL wraps instead of widening the whole page (does not change table sizing). */
    body { overflow-wrap: break-word }
    /* Question number + area label above each diagnostic question ("1.1 · Governance structure and accountability"). */
    .q .qn { white-space: normal }
    /* Wide tables scroll sideways inside their own box instead of pushing the page wider than the screen. */
    .tablewrap { overflow-x: auto }
    .d10app table.plain, .d10app table.t { display: block; overflow-x: auto; max-width: 100% }
}
/* Touch screens have no number keys to press: hide the Simulator's keyboard hint (UX-15). */
/* ---- Business Simulator 3.3: look and feel polish layer (2026-10-15). Appended last so it refines, never replaces, the rules above. ---- */
.sim-root { background-image: radial-gradient(1100px 560px at 8% -8%, rgba(200,154,64,.11), transparent 62%), radial-gradient(900px 520px at 104% 24%, rgba(92,140,210,.13), transparent 62%); background-attachment: fixed; }
.sim-stage h1 { letter-spacing: -.01em; }
.sim-h2 { position: relative; padding-left: 14px; }
.sim-h2::before { content: ""; position: absolute; left: 0; top: .22em; bottom: .22em; width: 4px; border-radius: 3px; background: linear-gradient(var(--gold), rgba(200,154,64,.25)); }

/* results: a hero worth finishing a year for */
.sim-result-hero { position: relative; overflow: hidden; border-radius: 26px; padding: 34px 22px 28px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
    background: radial-gradient(circle at 50% -10%, rgba(224,178,84,.34), rgba(255,255,255,.04) 58%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)); }
.sim-result-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%); transform: translateX(-120%); animation: simSheen 2.4s .5s ease-out 1 forwards; }
.sim-score b { font-size: clamp(3.6rem, 9vw, 5.6rem); text-shadow: 0 0 34px rgba(224,178,84,.55); }
.sim-stars-0 .sim-score b, .sim-stars-1 .sim-score b { text-shadow: 0 0 28px rgba(240,140,120,.35); }
@keyframes simSheen { to { transform: translateX(120%); } }

/* where to go next */
.sim-next { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 6px 0 26px; }
.sim-next-card { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; text-decoration: none; color: var(--body); background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-sm);
    border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; animation: simRise .5s calc(var(--i, 0) * 90ms) both; }
.sim-next-card:hover, .sim-next-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(8,22,48,.55); border-color: var(--gold); outline: none; }
.sim-next-no { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #2A1F06; font-weight: 800; }
.sim-next-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.sim-next-body small { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--gold-deep); font-weight: 700; }
.sim-next-body b { color: var(--navy); font-family: var(--ff-head); font-size: 1.04rem; line-height: 1.3; }
.sim-next-body span { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.sim-next-card > i { align-self: center; color: var(--gold-deep); transition: transform .18s; }
.sim-next-card:hover > i { transform: translateX(4px); }

/* plan cards: clearer, calmer, more tactile */
.sim-card-plan { border-radius: 18px; border-left-width: 6px; transition: border-color .2s, box-shadow .2s, transform .2s; animation: simRise .45s both; }
.sim-card-plan:hover { box-shadow: 0 16px 34px -18px rgba(8,22,48,.55); }
.sim-card-plan.chosen { box-shadow: 0 0 0 1px rgba(200,154,64,.45), 0 16px 34px -18px rgba(200,154,64,.5); }
.sim-card-plan.chosen header h3::after { content: "Chosen"; margin-left: 10px; font: 700 .68rem/1 var(--ff-body, inherit); letter-spacing: .08em; text-transform: uppercase; color: #2A1F06; background: var(--gold); padding: 4px 8px; border-radius: 99px; vertical-align: middle; }
.sim-opt { border-radius: 14px; }
.sim-opt.selected { transform: translateY(-1px); }
.sim-meter-track { border-radius: 99px; overflow: hidden; }
.sim-meter-track i { background: linear-gradient(90deg, #B98A2E, #E7BE6A); box-shadow: 0 0 12px rgba(231,190,106,.4); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.sim-badge { border-radius: 18px; animation: simRise .5s calc(var(--i, 0) * 80ms) both; }
.sim-tile { transition: transform .18s, border-color .18s; }
.sim-tile:hover { transform: translateY(-2px); border-color: rgba(200,154,64,.5); }
@keyframes simRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* games: the dialogue and order boards */
.sim-g-file { border-radius: 14px; }
.sim-g-item { transition: background .15s, border-color .15s; border-radius: 10px; }
.sim-g-item:hover { background: rgba(200,154,64,.1); }
.sim-g-order li { border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.04); border-bottom: 0; margin-bottom: 6px; }
.sim-g-order li:hover { background: rgba(200,154,64,.1); }

/* phones: calmer spacing and bigger touch targets */
@media (max-width: 760px) {
    .sim-stage { padding: 6px 14px 56px; }
    .sim-result-hero { border-radius: 20px; padding: 26px 14px 22px; }
    .sim-opt, .sim-goal, .sim-next-card { min-height: 48px; }
    .sim-next { grid-template-columns: 1fr; }
    .sim-h2 { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .sim-result-hero::after, .sim-next-card, .sim-card-plan, .sim-badge { animation: none !important; }
    .sim-next-card, .sim-tile, .sim-opt, .sim-meter-track i { transition: none !important; }
}
/* ---- Practice figures panel (2026-10-15): revenue and costs shown read-only wherever a tool uses them, with a button to change them in the Business Profile. ---- */
.pf-panel { background: #F6F8FB; border: 1px solid #D6DEE8; border-left: 5px solid var(--gold, var(--gold)); border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; color: var(--body, #243447); }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-head b { color: var(--navy, #12294A); font-size: 1.02rem; }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pf-tile { background: #fff; border: 1px solid #E1E7EF; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pf-tile span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #6B7A8C; font-weight: 600; }
.pf-tile b { font-size: 1.15rem; color: var(--navy, #12294A); font-variant-numeric: tabular-nums; }
.pf-tile small { color: #6B7A8C; }
.pf-tile.pf-empty b { color: #A05A2C; font-size: .95rem; font-weight: 600; }
.pf-lines { margin-top: 10px; }
.pf-lines summary { cursor: pointer; font-weight: 600; color: var(--navy, #12294A); font-size: .9rem; }
.pf-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 6px; }
.pf-table td { padding: 5px 0; border-bottom: 1px solid #E6EBF2; }
.pf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-warn { margin: 10px 0 0; color: #8A4B1F; }
.pf-adopt { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #C9D3DF; }
@media (max-width: 760px) { .pf-head { align-items: flex-start; } .pf-change { width: 100%; text-align: center; } }
/* on the dark Simulator stage the panel keeps its own light card */
/* Spare adviser time (2026-10-16): ring against a healthy load plus four icon tiles; also the head of the "Spare capacity" plan card */
.sim-spare { display: flex; gap: 22px; align-items: center; background: #fff; border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--sh-sm); color: var(--body); margin: 0 0 12px; }
.sim-spare-ring { width: 150px; height: 150px; flex: 0 0 150px; }
.sim-ring-bg { fill: none; stroke: var(--navy-soft); stroke-width: 12; }
.sim-ring-used { fill: none; stroke: var(--gold); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .8s ease; }
.sim-ring-mark { stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.sim-ring-num { font-size: 22px; font-weight: 700; fill: var(--navy); }
.sim-ring-sub { font-size: 9px; fill: #6B7C8F; text-transform: uppercase; letter-spacing: .06em; }
.sim-spare-body { flex: 1 1 auto; min-width: 0; }
.sim-spare-body .sim-lead { margin: 0 0 12px; }
.sim-spare-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sim-spare-tile { display: flex; flex-direction: column; gap: 4px; background: var(--navy-soft); border-radius: 12px; padding: 12px; font-size: .86rem; animation: simRise .5s calc(var(--i, 0) * 90ms) both; }
.sim-spare-tile b { color: var(--navy); }
.sim-spare-tile small { color: #5B6C7F; font-size: .76rem; }
.sim-spare-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.sim-card-spare { border-left-color: var(--gold); }
.sim-spare-compact { box-shadow: none; background: var(--gold-soft); margin: 0 0 14px; }
.sim-spare-compact .sim-spare-ring { width: 120px; height: 120px; flex-basis: 120px; }
.sim-spare-compact .sim-spare-tile { background: #fff; }
.sim-opt-ico { margin-right: 8px; color: var(--gold-deep); }
@media (max-width: 900px) { .sim-spare-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sim-spare { flex-direction: column; align-items: stretch; text-align: left; } .sim-spare-ring { align-self: center; } .sim-spare-tiles { grid-template-columns: 1fr; } }
.sim-spare .sim-lead, .sim-spare .sim-lead b { color: var(--body); }
.sim-spare .sim-lead b { color: var(--navy); }

/* Client book (2026-10-16): Pareto tiers, exits, facts and the monthly hours chart */
.sim-book { background: #fff; border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--sh-sm); color: var(--body); margin: 0 0 14px; }
.sim-bk-lead { margin: 0 0 14px; color: var(--body); }
.sim-bk-h { margin: 18px 0 8px; font-size: 1rem; color: var(--navy); }
.sim-bk-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(220px, 2fr) minmax(130px, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #E6EBF2; }
.sim-bk-name b { display: block; color: var(--navy); }
.sim-bk-name span { font-size: .8rem; color: #5B6C7F; }
.sim-bk-bars { display: flex; flex-direction: column; gap: 6px; }
.sim-bk-bar { position: relative; height: 18px; background: var(--navy-soft); border-radius: 9px; overflow: hidden; }
.sim-bk-bar i { display: block; height: 100%; border-radius: 9px; }
.sim-bk-bar i.fees { background: var(--gold); }
.sim-bk-bar i.hours { background: var(--navy-mid); }
.sim-bk-bar em { position: absolute; left: 10px; top: 0; line-height: 18px; font-size: .72rem; font-style: normal; font-weight: 600; color: #1b2b3b; text-shadow: 0 0 3px #fff; }
.sim-bk-margin { text-align: right; }
.sim-bk-margin b { display: block; font-variant-numeric: tabular-nums; }
.sim-bk-margin span { font-size: .78rem; color: #5B6C7F; }
.sim-bk-margin.pos b { color: #1F7A4D; }
.sim-bk-margin.neg b { color: #B3402A; }
.sim-bk-exits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sim-bk-exit { display: flex; flex-direction: column; gap: 4px; background: var(--navy-soft); border-radius: 12px; padding: 12px; font-size: .84rem; }
.sim-bk-exit b { color: var(--navy); }
.sim-bk-exit .loss { color: #B3402A; }
.sim-bk-exit .gain { color: #1F7A4D; }
.sim-bk-exit small { color: #4B5C6F; margin-top: 4px; }
.sim-bk-exit .up { color: #1F7A4D; }
.sim-bk-exit .down { color: #B3402A; }
.sim-bk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sim-bk-facts > div { display: flex; flex-direction: column; gap: 3px; background: var(--gold-soft); border-radius: 12px; padding: 12px; font-size: .84rem; }
.sim-bk-facts > div.warn { background: #FBE9E4; }
.sim-bk-facts i { color: var(--gold-deep); }
.sim-bk-facts b { font-size: 1.15rem; color: var(--navy); }
.sim-bk-sea { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 130px; padding-top: 4px; }
.sim-bk-mo { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 130px; font-size: .7rem; color: #5B6C7F; }
.sim-bk-mo i { display: block; width: 70%; background: var(--navy-mid); border-radius: 4px 4px 0 0; }
.sim-bk-mo.over i { background: #C8553D; }
.sim-bk-mo span { margin-top: 4px; font-weight: 600; }
.sim-bk-mo em { font-style: normal; height: 14px; }
.sim-bk-line { position: absolute; left: 0; right: 0; bottom: 108px; border-top: 2px dashed var(--gold-deep); opacity: .8; text-decoration: none; }
@media (max-width: 900px) { .sim-bk-row { grid-template-columns: 1fr; gap: 6px; } .sim-bk-margin { text-align: left; } .sim-bk-exits, .sim-bk-facts { grid-template-columns: 1fr; } }
.sim-bk-bar:has(i.hours) em { color: #fff; text-shadow: none; }
.sim-bk-bar:has(i.fees) em { color: #3A2A06; text-shadow: none; }
.sim-bk-sea { margin-bottom: 22px; }

/* Financial health dashboard (2026-10-16): ratio gauges against the industry yardstick */
.sim-fin { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 20px; color: var(--body); margin: 0 0 16px; }
.sim-fin-sum { display: grid; grid-template-columns: 140px auto 1fr; gap: 22px; align-items: center; background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid)); color: #fff; border-radius: 16px; padding: 18px 24px; margin-bottom: 12px; }
.sim-fin-ring { width: 130px; height: 130px; }
.sim-fin-ring .bg { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 12; }
.sim-fin-ring .fg { fill: none; stroke: #6FD1A0; stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .9s ease; }
.sim-fin-ring .n { font-size: 30px; font-weight: 700; fill: #fff; }
.sim-fin-ring .s { font-size: 9.5px; fill: #BFD0E2; text-transform: uppercase; letter-spacing: .07em; }
.sim-fin-counts { display: flex; gap: 10px; }
.sim-fin-counts > div { min-width: 70px; text-align: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.09); }
.sim-fin-counts b { display: block; font-size: 1.7rem; line-height: 1.1; }
.sim-fin-counts span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #CFDCEA; }
.sim-fin-counts .good b { color: #6FD1A0; } .sim-fin-counts .mid b { color: #F2C660; } .sim-fin-counts .bad b { color: #F08A73; }
.sim-fin-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim-fin-call { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.09); border-radius: 12px; padding: 10px 12px; font-size: .82rem; }
.sim-fin-call i { margin-top: 3px; font-size: 1.1rem; }
.sim-fin-call.win i { color: #6FD1A0; } .sim-fin-call.gap i { color: #F2C660; }
.sim-fin-call small { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; color: #BFD0E2; }
.sim-fin-call b { display: block; color: #fff; }
.sim-fin-call span { color: #DCE6F1; }
.sim-fin-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .76rem; color: #5B6C7F; margin: 4px 2px 10px; }
.sim-fin-legend s { display: inline-block; width: 3px; height: 14px; vertical-align: -3px; margin-right: 5px; text-decoration: none; }
.sim-fin-legend s.ind { background: var(--navy); } .sim-fin-legend s.top { background: var(--gold); }
.sim-fin-legend .dot.good, .sim-g-fill.good, .sim-g-dot.good, .sim-rc-pill.good { --c: #1F9D6B; }
.sim-fin-legend .dot.mid, .sim-g-fill.mid, .sim-g-dot.mid, .sim-rc-pill.mid { --c: #D9A21B; }
.sim-fin-legend .dot.bad, .sim-g-fill.bad, .sim-g-dot.bad, .sim-rc-pill.bad { --c: #C8553D; }
.sim-g-fill.neutral, .sim-g-dot.neutral, .sim-rc-pill.neutral { --c: #7D8FA3; }
.sim-fin-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; background: var(--c); }
.sim-fin-group { margin-top: 18px; }
.sim-fin-group > header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sim-fin-group > header > i { width: 38px; height: 38px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); display: inline-flex; align-items: center; justify-content: center; }
.sim-fin-group h3 { margin: 0; font-size: 1.05rem; color: var(--navy); }
.sim-fin-group header p { margin: 0; font-size: .8rem; color: #5B6C7F; }
.sim-fin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.sim-rc { border: 1px solid #E6EBF2; border-left: 4px solid #7D8FA3; border-radius: 12px; padding: 12px 14px; background: #fff; animation: simRise .5s calc(var(--i, 0) * 60ms) both; }
.sim-rc.good { border-left-color: #1F9D6B; } .sim-rc.mid { border-left-color: #D9A21B; } .sim-rc.bad { border-left-color: #C8553D; }
.sim-rc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sim-rc-label { font-weight: 600; color: var(--navy); font-size: .88rem; }
.sim-rc-pill { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--c, #7D8FA3); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.sim-rc-val { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.sim-rc-val b { font-size: 1.55rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.sim-rc-was { font-size: .76rem; color: #6B7C8F; }
.sim-gauge { position: relative; height: 30px; margin: 4px 0; }
.sim-gauge::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 8px; border-radius: 4px; background: var(--navy-soft); }
.sim-g-zone { position: absolute; top: 11px; height: 8px; background: rgba(31,157,107,.25); border-radius: 4px; }
.sim-g-fill { position: absolute; top: 11px; height: 8px; border-radius: 4px; background: var(--c, #7D8FA3); opacity: .9; transition: width .8s ease; }
.sim-g-dot { position: absolute; top: 7px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--c, #7D8FA3); box-shadow: 0 1px 4px rgba(12,39,67,.3); }
.sim-g-ind { position: absolute; top: 3px; width: 3px; height: 24px; margin-left: -1px; background: var(--navy); border-radius: 2px; text-decoration: none; }
.sim-g-top { position: absolute; top: 5px; width: 3px; height: 20px; margin-left: -1px; background: var(--gold); border-radius: 2px; text-decoration: none; }
.sim-rc-bench { display: block; font-size: .76rem; color: #3D4C5A; }
.sim-rc-bench em { font-style: normal; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: #6B7C8F; background: var(--navy-soft); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.sim-rc-bench.none { color: #8A97A6; }
.sim-rc-why { margin: 6px 0 0; font-size: .74rem; line-height: 1.4; color: #6B7C8F; }
@media (max-width: 900px) { .sim-fin-sum { grid-template-columns: 1fr; justify-items: center; text-align: center; } .sim-fin-calls { grid-template-columns: 1fr; width: 100%; text-align: left; } .sim-fin-grid { grid-template-columns: 1fr; } }

/* goal switch on the plan screen */
.sim-goalbar { background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; }
.sim-gb-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #BFD0E2; margin-bottom: 8px; }
.sim-gb-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sim-gb { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: #fff; color: var(--body); border: 2px solid transparent; border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.sim-gb > i { color: var(--gold-deep); font-size: 1.2rem; margin-top: 2px; }
.sim-gb b { display: block; color: var(--navy); }
.sim-gb small { display: block; font-size: .74rem; color: #5B6C7F; }
.sim-gb.selected { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 3px rgba(200,154,64,.25); }
@media (max-width: 760px) { .sim-gb-row { grid-template-columns: 1fr; } }
.sim-fin-group { padding: 0; }
.sim-fin .sim-tablenote { color: #5B6C7F; margin: 14px 2px 0; }

/* Next three years outlook (2026-10-16) */
.sim-ol { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 18px 20px; color: var(--body); margin: 0 0 16px; }
.sim-ol-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sim-ol-tab { border: 1px solid #D5DEE9; background: #F4F7FB; color: var(--navy); border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.sim-ol-tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.sim-ol-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: .8rem; color: #4B5C6F; margin-bottom: 4px; }
.sim-ol-legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 6px; }
.sim-ol-legend i.hold { border-color: #8A97A6; border-top-style: dashed; }
.sim-ol-legend i.plan { border-color: var(--gold); }
.sim-ol-chart { width: 100%; max-width: 100%; height: auto; display: block; margin: 6px 0 4px; overflow: visible; }
.sim-ol-chart .ol-grid { stroke: #E6EBF2; stroke-width: 1; }
.sim-ol-chart .ol-zero { stroke: #B3402A; stroke-width: 1.5; stroke-dasharray: 4 3; }
.sim-ol-chart .ol-todayline { stroke: #C9D3E0; stroke-width: 1.5; stroke-dasharray: 2 4; }
.sim-ol-chart .ol-ax { font-size: 12.5px; fill: #6B7C8F; }
.sim-ol-chart .ol-ax.x { font-size: 13.5px; font-weight: 700; fill: var(--navy); }
.sim-ol-chart .ol-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.sim-ol-chart .ol-line.hold { stroke: #8A97A6; stroke-width: 2.5; stroke-dasharray: 7 6; }
.sim-ol-chart .ol-line.plan { stroke: var(--gold); stroke-width: 4; }
.sim-ol-chart .ol-stop-a { stop-opacity: .28; } .sim-ol-chart .ol-stop-b { stop-opacity: 0; }
.sim-ol-chart .ol-stop-a.plan, .sim-ol-chart .ol-stop-b.plan { stop-color: #C99A3B; }
.sim-ol-chart .ol-stop-a.hold, .sim-ol-chart .ol-stop-b.hold { stop-color: #5B7FA6; }
.sim-ol-chart circle.hold { fill: #fff; stroke: #8A97A6; stroke-width: 2.5; }
.sim-ol-chart circle.plan { fill: #fff; stroke: var(--gold-deep); stroke-width: 3.5; }
.sim-ol-chart circle.today { fill: var(--navy); stroke: #fff; stroke-width: 2.5; }
.sim-ol-chart circle { transition: r .15s; } .sim-ol-chart circle:hover { r: 8; }
.sim-ol-chart .ol-v { font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.sim-ol-chart .ol-v.hold { fill: #5B6C7F; }
.sim-ol-chart .ol-v.plan { fill: var(--gold-deep); }
.sim-ol-chart .ol-v.today { fill: var(--navy); }
.sim-ol-chart .ol-band.up { fill: #1F7A4D; fill-opacity: .16; } .sim-ol-chart .ol-band.down { fill: #B3402A; fill-opacity: .16; }
.sim-ol-chart .ol-end { font-size: 12px; font-weight: 700; } .sim-ol-chart .ol-end.plan { fill: var(--gold-deep); } .sim-ol-chart .ol-end.hold { fill: #5B6C7F; }
.sim-ol-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.sim-ol-stat { background: #F4F7FB; border-radius: 10px; padding: 10px 14px; border-left: 4px solid #C9D3E0; }
.sim-ol-stat span { display: block; font-size: .72rem; color: #5B6C7F; margin-bottom: 2px; }
.sim-ol-stat b { font-size: 1.12rem; color: var(--navy); }
.sim-ol-stat.up { border-left-color: #1F7A4D; background: #EEF7F2; } .sim-ol-stat.up b { color: #1F7A4D; }
.sim-ol-stat.down { border-left-color: #B3402A; background: #FBF0EE; } .sim-ol-stat.down b { color: #B3402A; }
.sim-ol-scale { margin: 0 0 8px; font-size: .74rem; color: #6B7C8F; }
.sim-ol-table th small { display: block; font-weight: 400; font-size: .66rem; color: #6B7C8F; }
.sim-ol-table tr.strong th, .sim-ol-table tr.strong td { background: var(--gold-soft); }
.sim-ol-table td small { display: block; font-size: .68rem; }
.sim-ol-table td small.up { color: #1F7A4D; } .sim-ol-table td small.down { color: #B3402A; }
.sim-ol .sim-tablenote { color: #5B6C7F; }

/* ===== Simulator accessibility pass, 2026-10-16 (round-2 review 07: N1, H1, H2, H3, M4, M6, M7) =====
   Overrides placed last on purpose; the older rules above stay as they were. Colours below were checked for WCAG 2.2 AA
   (4.5:1 text, 3:1 focus rings and non-text marks) on their own backgrounds. */
.sim-sr { position: absolute !important; 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; }
.sim-skip-inline { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sim-skip-inline:focus, .sim-skip-inline:focus-visible { position: static; width: auto; height: auto; overflow: visible; display: inline-block; margin: 0 0 10px; padding: 8px 14px; border-radius: 8px; background: var(--gold); color: #2A1F06; font-weight: 700; text-decoration: none; }
.sim-facts { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 10px; }
.sim-facts li { display: flex; gap: 12px; align-items: flex-start; color: #E3EBF3; font-size: .92rem; line-height: 1.45; }
.sim-facts li > i { flex: 0 0 22px; margin-top: 3px; color: var(--gold); text-align: center; }
.sim-facts b { color: #fff; }
.sim-keyhelp { display: block; margin-top: 4px; color: #D3DEE9; font-size: .85rem; }

/* H1: verdict pills and marks */
.sim-fin-legend .dot.good, .sim-g-fill.good, .sim-g-dot.good, .sim-rc-pill.good { --c: #17795A; }
.sim-fin-legend .dot.mid, .sim-g-fill.mid, .sim-g-dot.mid, .sim-rc-pill.mid { --c: #B8860B; }
.sim-fin-legend .dot.bad, .sim-g-fill.bad, .sim-g-dot.bad, .sim-rc-pill.bad { --c: #B8452D; }
.sim-g-fill.neutral, .sim-g-dot.neutral, .sim-rc-pill.neutral { --c: #5E6F82; }
.sim-rc.good { border-left-color: #17795A; } .sim-rc.mid { border-left-color: #B8860B; } .sim-rc.bad { border-left-color: #B8452D; }
.sim-rc-pill { font-size: .74rem; padding: 3px 9px; }
.sim-rc-pill.mid { background: #F2C14E; color: #3A2A06; }

/* H2: a navy focus ring wherever the surface is white or cream (gold stays on the navy page) */
.sim-card-plan :focus-visible, .sim-modal :focus-visible, .sim-fin :focus-visible, .sim-ol :focus-visible,
.sim-opt:focus-visible, .sim-goal:focus-visible, .sim-next-card:focus-visible, .sim-gb:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }

/* H3: secondary text on the navy page lighter, on light cards darker */
.sim-disclaimer, .sim-year-lbl { color: #C3D0DD; }
.sim-hint, .sim-tablenote, .sim-rail-note, .sim-tile-sub, .sim-steps li { color: #D3DEE9; }
.sim-chart-lbl { fill: #D3DEE9; }
.sim-eyebrow, .sim-details summary, .sim-note a, .sim-hud-effort em, .sim-rail-head span { color: #F0D08E; }
.sim-rc-was, .sim-rc-why, .sim-rc-bench em, .sim-ol-table th small { color: #556677; }
.sim-rc-bench.none { color: #5F6E7D; }

/* M4: the order game's rows must show on the white modal */
.sim-modal .sim-g-order li { background: #F1F5F9; border: 1px solid #C9D5E2; color: var(--navy); }
.sim-modal .sim-g-order li:hover { background: #E4ECF4; }

/* M7: touch targets of at least 44 px */
.sim-exit, .sim-abandon, .sim-ol-tab, .sim-themenav a { min-height: 44px; display: inline-flex; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.sim-exit, .sim-abandon { padding-left: 8px; padding-right: 8px; gap: 6px; }

/* M6: the sticky bar must not eat a short or zoomed screen */
@media (max-height: 640px), (max-width: 640px) { .sim-hud { position: static; } }

/* ===== Simulator story layer, 2026-10-16 (creative review 11): story cards, letters, avatars, offer scene, vital signs ===== */
.sim-topbar { backdrop-filter: blur(6px); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--gold), rgba(200,154,64,0)) 1; }
.sim-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; border-radius: 50%; background: var(--gold); color: #2A1F06; font: 700 1rem/1 var(--ff-brand, Georgia, serif); vertical-align: middle; }
.sim-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--h, 210) 38% 32%); color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .02em; border: 2px solid rgba(255,255,255,.35); }
.sim-who { position: relative; padding-left: 58px !important; }
.sim-who .sim-avatar { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.sim-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 8px; }
.sim-story-card { position: relative; padding: 16px 18px 18px 18px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-top: 4px solid var(--gold); color: #E3EBF3; display: flex; flex-direction: column; gap: 6px; }
.sim-story-card > i { position: absolute; right: 14px; top: 14px; font-size: 1.15rem; color: var(--gold); opacity: .9; }
.sim-story-card small { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .74rem; color: #F0D08E; }
.sim-story-card b { font: 700 1.15rem/1.25 var(--ff-brand, Georgia, serif); color: #fff; padding-right: 26px; }
.sim-story-card span { font-size: .92rem; line-height: 1.5; }
.sim-story-card.win { border-top-color: #4DBB8F; } .sim-story-card.win > i { color: #4DBB8F; }
.sim-story-card.miss { border-top-color: #E88A6F; } .sim-story-card.miss > i { color: #E88A6F; }
.sim-story-link { margin-top: auto; padding-top: 6px; color: #F0D08E; font-weight: 700; text-decoration: none; }
.sim-story-link:hover { text-decoration: underline; }
.sim-payoff { display: block; margin-top: 4px; font-size: .88rem; font-weight: 600; }
.sim-payoff.good { color: #7FE0B4; } .sim-payoff.bad { color: #FFB59E; }
.sim-chips-meter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sim-chip-meter { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; border: 1px solid currentColor; }
.sim-chip-meter.pos { color: #7FE0B4; } .sim-chip-meter.neg { color: #FFB59E; }
.sim-letters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 12px 0 6px; }
.sim-letter { position: relative; margin: 0; padding: 16px 18px 14px 18px; border-radius: 6px 14px 14px 14px; background: #FFF9EC; color: #1E2F44; box-shadow: 0 10px 22px -16px rgba(0,0,0,.6); display: grid; grid-template-columns: 36px 1fr; gap: 6px 12px; border-left: 5px solid var(--gold); }
.sim-letter.bad { border-left-color: #C8553D; }
.sim-letter blockquote { grid-column: 2; margin: 0; font: italic 1rem/1.5 var(--ff-brand, Georgia, serif); }
.sim-letter blockquote p { margin: 0; color: #1E2F44; }
.sim-letter figcaption { grid-column: 2; display: flex; flex-direction: column; font-size: .84rem; color: #4A5B6E; }
.sim-letter figcaption b { color: var(--navy); }
.sim-letter .sim-avatar { grid-row: 1 / span 2; grid-column: 1; }
.sim-callbacks ul { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px; }
.sim-callbacks li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.06); color: #E3EBF3; }
.sim-callbacks li > i { margin-top: 3px; } .sim-callbacks li.good > i { color: #7FE0B4; } .sim-callbacks li.bad > i { color: #FFB59E; }
.sim-offer { display: flex; gap: 16px; align-items: flex-start; margin: 14px 0; padding: 18px 20px; border-radius: 14px; background: linear-gradient(135deg, rgba(200,154,64,.20), rgba(255,255,255,.06)); border: 1px solid rgba(200,154,64,.6); color: #F1F5F9; }
.sim-offer > i { font-size: 1.8rem; color: var(--gold); margin-top: 4px; }
.sim-offer small { text-transform: uppercase; letter-spacing: .1em; color: #F0D08E; font-weight: 700; font-size: .74rem; display: block; }
.sim-offer b { font: 700 1.25rem/1.3 var(--ff-brand, Georgia, serif); color: #fff; display: block; }
.sim-offer blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--gold); font: italic 1rem/1.55 var(--ff-brand, Georgia, serif); }
.sim-offer blockquote p { margin: 0; } .sim-offer em { font-size: .82rem; color: #D3DEE9; font-style: normal; }
.sim-epilogue { margin: 16px 0; padding: 18px 22px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); color: #F1F5F9; font: 1.05rem/1.6 var(--ff-brand, Georgia, serif); }
.sim-epilogue small { display: block; text-transform: uppercase; letter-spacing: .12em; color: #F0D08E; font: 700 .74rem var(--ff-body, Arial, sans-serif); margin-bottom: 6px; }
.sim-epilogue p { margin: 0; }
.sim-epilogue.celebrate { border-color: var(--gold); box-shadow: 0 0 0 0 rgba(200,154,64,.6); animation: simGlow 2.4s ease-out 1; }
@keyframes simGlow { 0% { box-shadow: 0 0 0 0 rgba(200,154,64,.7); } 100% { box-shadow: 0 0 0 26px rgba(200,154,64,0); } }
@media (prefers-reduced-motion: reduce) { .sim-epilogue.celebrate { animation: none; } }
.sim-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.sim-vital { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 2px; }
.sim-vital small { color: #D3DEE9; font-size: .78rem; } .sim-vital b { color: #fff; font: 700 1.35rem/1.2 var(--ff-brand, Georgia, serif); font-variant-numeric: tabular-nums; }
.sim-mentor { display: flex; gap: 14px; align-items: flex-start; }
.sim-mentor .sim-mentor-name { display: block; color: #fff; margin-bottom: 4px; } .sim-mentor-name em { font-style: normal; color: #D3DEE9; font-weight: 400; font-size: .85rem; }
.sim-more > summary, .sim-startpos > summary { font-weight: 700; font-size: 1.02rem; padding: 14px 4px; cursor: pointer; min-height: 44px; }
.sim-more, .sim-startpos { margin: 18px 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.sim-chart-tag { fill: #D3DEE9; font-size: 8px; font-family: var(--ff-brand, Arial, sans-serif); }
.sim-chart-ev { fill: #F0D08E; stroke: var(--navy); stroke-width: 1; }
.sim-key-ev { display: inline-block; width: 9px; height: 9px; margin-right: 4px; background: #F0D08E; transform: rotate(45deg); vertical-align: middle; }
@media (max-width: 800px) { .sim-story { grid-template-columns: 1fr; } .sim-offer { flex-direction: column; } }
@media print { .sim-more, .sim-startpos { border: 0; } .sim-more > summary { display: none; } }
/* the event rows sit on white cards: darker payoff and chip colours there (5.4:1 or better on white) */
.sim-ev-list .sim-payoff.good, .sim-ev-list .sim-chip-meter.pos { color: #17795A; }
.sim-hud-hint { flex-basis: 100%; color: #E3EBF3; font-size: .8rem; }

/* ===== Design review fixes, step 1: accessibility (round-3 review 10, 2026-10-16). Exact fixes from the report; ratios computed there. ===== */
.sim-book .sim-tablenote, .sim-spare .sim-tablenote, .sim-card-plan .sim-tablenote { color: #5B6C7F; }
.sim-mentor .sim-mentor-name em { color: #5B6C7F; }
.sim-ol-table thead th small { color: #D3DEE9; font-size: .72rem; }
.sim-opt.locked { opacity: 1; background: #F3F5F7; }
.sim-opt.locked .sim-opt-note, .sim-opt.locked .sim-opt-top b { color: #5A6874; }
.sim-opt.locked .sim-opt-why { color: #A3342C; }
.sim-opt.locked:hover { background: #F3F5F7; }
.sim-rail-table th { color: #D3DEE9; }
.sim-ol-chart .ol-ax, .sim-ring-sub { fill: #5B6C7F; }
.sim-ol-scale, .pf-tile span, .pf-tile small { color: #5B6C7F; }
.sim-theme-head p, .sim-tile-label, .sim-score span, .sim-hud-fc { color: #D3DEE9; }
.sim-payoff.bad, .sim-chip-meter.neg { color: #FFC9B8; }
.sim-ev-list .sim-payoff.bad, .sim-ev-list .sim-chip-meter.neg { color: #B8452D; }
.sim-ol-chart .ol-line.plan { stroke: var(--gold-deep); }
.sim-ol-chart .ol-line.hold { stroke: #6B7C8F; }
.sim-g-top { background: var(--gold-deep); }
.sim-ring-used { stroke: var(--gold-deep); }
.sim-trustbar i { background: var(--gold-deep); }
.sim-opt, .sim-gb, .sim-goal { border-color: #8EA0B3; }
.sim-g-ob .btn { min-height: 44px; min-width: 44px; }
.sim-details summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.sim-ol-chart { max-width: 100%; height: auto; }
.sim-chart-lbl { font-size: 11px; } .sim-ring-sub { font-size: 11px; }
/* a visible focus ring on the dark stage for plain links and buttons (Safari's default is thin) */
body.sim-shell a:focus-visible, body.sim-shell button:focus-visible, body.sim-shell summary:focus-visible { outline: 3px solid #F0D08E; outline-offset: 2px; }
.sim-card-plan a:focus-visible, .sim-card-plan button:focus-visible, .sim-modal button:focus-visible, .sim-fin summary:focus-visible { outline-color: var(--navy); }
/* programmatic focus targets keep no ring, but nothing else inside the stage loses its ring */
.sim-stage [tabindex="-1"]:focus { outline: none; }
.sim-stage :is(.sim-opt, .sim-goal, .sim-gb, .sim-ol-tab, .sim-next-card)[tabindex="-1"]:focus-visible { outline: 3px solid var(--navy); }
/* the sticky bar must not hide what has focus (WCAG 2.4.11) */
:root:has(body.sim-shell) { scroll-padding-top: 110px; }
.sim-opt, .sim-goal, .sim-gb, .sim-next-card, .sim-ol-tab { scroll-margin-top: 110px; }
/* forced colours (Windows High Contrast): fills that carry meaning must survive */
@media (forced-colors: active) {
  .sim-meter-track i, .sim-part-bar i, .sim-pips i, .sim-trustbar i, .sim-bk-bar i, .sim-g-fill, .sim-g-dot, .sim-bk-mo i, .sim-year-track i { forced-color-adjust: none; background: Highlight; border: 1px solid CanvasText; }
  .sim-pips i:not(.on):not(.over) { background: Canvas; }
  .sim-gb.selected, .sim-goal.selected, .sim-opt.selected { outline: 3px solid Highlight; outline-offset: 0; border: 3px solid Highlight; }
  .sim-rc-pill, .sim-chip-meter, .sim-verdict { border: 1px solid CanvasText; }
  .sim-chart-svg path, .sim-chart-svg polyline, .sim-chart-svg line, .sim-ol-chart * { forced-color-adjust: auto; }
  .sim-opt.locked { border-style: dashed; }
}

/* ===== Design review fixes, step 2: the plan page puts the decisions first (round-3 reviews 01, 03, 04, 05) ===== */
.sim-analysis, .sim-more, .sim-startpos { margin: 18px 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.sim-analysis > summary { font-weight: 700; font-size: 1.02rem; padding: 14px 4px; cursor: pointer; min-height: 44px; }
/* phones: the effort and forecast bar stays at the foot of the screen, so the core loop is always visible */
@media (max-width: 640px) {
  .sim-hud { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; margin: 0; padding: 8px 12px; gap: 10px; flex-wrap: nowrap; justify-content: space-between; background: #0C2743; border-top: 2px solid var(--gold); box-shadow: 0 -8px 20px rgba(0,0,0,.4); }
  .sim-hud .sim-pips, .sim-hud-hint { display: none; }
  .sim-hud-effort { flex: 0 1 auto; font-size: .82rem; gap: 6px; }
  .sim-hud-fc { font-size: .8rem; min-width: 0; }
  .sim-stage { padding-bottom: 84px; }
  :root:has(body.sim-shell) { scroll-padding-bottom: 90px; }
}

/* ===== Design tokens (design review step 5, 2026-10-16). ADDITIVE: new names only; the Simulator block now uses --gold, --navy and --gold-deep instead of repeating the literals. See test-reports\sim-review-r3\07 for the full audit and the remaining migration steps. ===== */
:root {
  --card-bg: #fff; --card-ink: #16212C; --card-text: #3D4C5A; --card-muted: #5A6874; --card-heading: #123A62; --card-accent: #8A6716; --card-line: #E2E6EB;
  --stage-1: #0C2743; --stage-2: #123A62; --stage-3: #1D4E7E;
  --on-stage: #fff; --on-stage-2: #D9E3EE; --on-stage-3: #C3D0DD; --accent-on-stage: #F0D08E; --on-gold: #2A1F06;
  --glass-1: rgba(255,255,255,.06); --glass-2: rgba(255,255,255,.10); --glass-3: rgba(255,255,255,.16); --glass-line: rgba(255,255,255,.18);
  --pos-on-light: #17795A; --neg-on-light: #B8452D; --warn-on-light: #96490F; --pos-on-stage: #7FE0B4; --neg-on-stage: #FFB59E; --neutral-on-light: #5E6F82;
  --mid-fill: #F2C14E; --mid-ink: #3A2A06; --mid-mark: #B8860B;
  --focus-on-light: #123A62; --focus-on-stage: #C89A40; --ring-w: 3px; --ring-offset: 2px;
  --fs-2xs: .72rem; --fs-xs: .8rem; --fs-sm: .88rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.8rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-7: 40px;
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-pill: 999px; --r-round: 50%;
  --sh-stage: 0 8px 24px rgba(0,0,0,.25); --sh-stage-lg: 0 24px 60px -24px rgba(0,0,0,.6);
  --dur-fast: .15s; --dur-base: .25s; --dur-slow: .4s; --ease: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0s; --dur-base: 0s; --dur-slow: 0s; } }
.sim-linkbtn2 { background: none; border: 0; padding: 0; color: var(--accent-on-stage, #F0D08E); text-decoration: underline; font: inherit; cursor: pointer; min-height: 44px; }
.sim-quick { margin-top: 6px; }
/* Habits built (content 4.7): a plain list, one line per discipline. Presentation only. */
.sim-habits { list-style: none; margin: var(--sp-3) 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.sim-habits li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: #fff; border-radius: var(--r-sm); box-shadow: var(--sh-sm); color: var(--body); }
.sim-habits li > i { color: var(--pos-on-light); margin-top: 4px; }
.sim-habits small { display: block; font-size: var(--fs-xs); color: var(--neutral-on-light); }
.sim-habits b { font-weight: 600; }
/* Glossary (2026-10-17): grouped term cards. Presentation only. */
.sim-gloss-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-3); }
.sim-gloss-group { background: var(--glass-1); border: 1px solid var(--glass-line); border-radius: var(--r-md); padding: var(--sp-4); }
.sim-gloss-group h4 { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-on-stage); }
.sim-gloss-group h4 i { margin-right: 6px; }
.sim-gloss-group dl { margin: 0; display: grid; gap: var(--sp-3); }
.sim-gloss-term { padding-left: var(--sp-3); border-left: 3px solid var(--focus-on-stage); }
.sim-gloss-term dt { font-weight: 700; color: var(--on-stage); margin: 0 0 2px; }
.sim-gloss-term dd { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--on-stage-2); }
.sim-gloss-term dd b { color: var(--on-stage); }
@media print { .sim-gloss-group { break-inside: avoid; background: none; border-color: #bbb; } .sim-gloss-term dt, .sim-gloss-term dd, .sim-gloss-term dd b { color: #000; } .sim-gloss-group h4 { color: #333; } }
/* "Why these numbers" (2026-10-17): a heading with an icon; the reasons sit in a tooltip placed by simulator-app.js (fixed coordinates). */
.sim-numwhy { display: inline-block; margin-top: var(--sp-2); cursor: help; }
.sim-why-h { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--card-accent); }
.sim-numwhy:hover .sim-why-h, .sim-numwhy:focus .sim-why-h { text-decoration: underline; }
.sim-numwhy:focus-visible { outline: var(--ring-w) solid var(--focus-on-light); outline-offset: var(--ring-offset); border-radius: var(--r-xs); }
.sim-why-tip { display: none !important; }
.sim-why-pop { display: none; position: fixed; z-index: 100000; box-sizing: border-box; padding: var(--sp-3) var(--sp-4); background: var(--stage-1); color: var(--on-stage-2); border: 1px solid var(--glass-line); border-top: 3px solid var(--focus-on-stage); border-radius: var(--r-sm); box-shadow: var(--sh-stage); font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.5; text-align: left; cursor: default; pointer-events: none; }
.sim-why-pop.show { display: block; }
.sim-why-pop .sim-why-row { display: block; }
.sim-why-pop .sim-why-row + .sim-why-row { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--glass-line); }
.sim-why-pop .sim-why-row b { display: block; color: var(--accent-on-stage); font-weight: 700; margin-bottom: 2px; }
.sim-why-pop .sim-why-row span { display: block; }
@media print { .sim-numwhy, .sim-why-pop { display: none !important; } }
/* Stat row and slim "Not this year" bar (2026-10-17). Icon-led figures on a quiet background; only the figure is coloured. */
.sim-stats { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 8px 0; border-top: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line); }
.sim-stat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--card-text); }
.sim-stat i { font-size: .8em; width: 1.1em; text-align: center; color: var(--neutral-on-light); }
.sim-stat-cost > span { color: var(--warn-on-light); }
.sim-stat-gain > span, .sim-stat-meter-up > span, .sim-stat-hours-up > span, .sim-stat-effort-up > span { color: var(--pos-on-light); }
.sim-stat-loss > span, .sim-stat-meter-down > span, .sim-stat-hours-down > span { color: var(--neg-on-light); }
.sim-stat-protect > span { color: var(--card-heading); }
.sim-stat-cash > span { color: var(--card-accent); }
.sim-opts > .sim-opt-none { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 44px; padding: 6px 14px; background: transparent; border-style: dashed; }
.sim-opt-none .sim-opt-top { display: contents; }
.sim-opt-none .sim-opt-top b { order: 1; font-size: var(--fs-sm); font-weight: 600; color: var(--card-muted); }
.sim-opt-none .sim-opt-note { order: 2; flex: 1 1 auto; margin: 0; }
.sim-opt-none .sim-effort-chip { order: 3; margin-left: auto; }
.sim-opt-none .sim-opt-why { order: 4; flex-basis: 100%; }
.sim-opt-none.selected { background: var(--gold-soft); border-style: solid; }
.sim-opt-none.selected .sim-opt-top b { color: var(--ink); }

/* 2026-10-17: option cards share the whole row (the full-width Not-this-year bar stopped auto-fit stretching them) */
@media (min-width: 900px) {
    .sim-opts:not(.sim-opts-col) { grid-template-columns: repeat(var(--sim-cols, 4), minmax(0, 1fr)); gap: 16px; }
    .sim-opts > .sim-opt-none { margin-bottom: 2px; }
    .sim-opts:not(.sim-opts-col) > .sim-opt:not(.sim-opt-none) { padding: 16px 18px; gap: 12px; }
    .sim-stats { gap: 8px; padding: 12px 0; }
}

/* 2026-10-17: Why these numbers sits at the bottom of every card, so the headings line up across a row */
.sim-opt .sim-numwhy { margin-top: auto; padding-top: 10px; }
/* the heading is the last thing in the card, so it lines up across a row */
.sim-opt .sim-numwhy { order: 9; }
/* 2026-10-17: every section of a card (title, figures, note, why heading) lines up across the row: cards share five row tracks via subgrid */
@media (min-width: 900px) {
    .sim-opts:not(.sim-opts-col) > .sim-opt:not(.sim-opt-none) { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
    .sim-opts:not(.sim-opts-col) > .sim-opt:not(.sim-opt-none) > .sim-opt-top { grid-row: 1; }
    .sim-opts:not(.sim-opts-col) > .sim-opt:not(.sim-opt-none) > .sim-stats { grid-row: 2; align-self: start; }
    .sim-opts:not(.sim-opts-col) > .sim-opt:not(.sim-opt-none) > .sim-opt-note { grid-row: 3; align-self: start; }
    .sim-opts:not(.sim-opts-col) > .sim-opt:not(.sim-opt-none) > .sim-opt-repeat,
    .sim-opts:not(.sim-opts-col) > .sim-opt:not(.sim-opt-none) > .sim-opt-why { grid-row: 4; align-self: start; }
    .sim-opts:not(.sim-opts-col) > .sim-opt:not(.sim-opt-none) > .sim-numwhy { grid-row: 5; align-self: end; margin-top: 0; }
}
/* the divider moves from under the figures to just above the Why line, level across the row */
.sim-opt .sim-stats { border-bottom: 0; padding-bottom: 0; }
.sim-opt .sim-numwhy { border-top: 1px solid var(--card-line); padding-top: 10px; }
/* 2026-10-17: plan cards are accordions. Header = icon, discipline, title, question, and what is chosen. */
details.sim-card-plan { padding: 0; overflow: visible; }
details.sim-card-plan > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 22px; align-items: center; gap: 14px; padding: 16px 20px; border-radius: inherit; }
details.sim-card-plan > summary::-webkit-details-marker { display: none; }
details.sim-card-plan > summary:hover { background: var(--gold-soft); }
.sim-acc-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--navy); color: var(--gold); font-size: 1.15rem; }
.sim-card-plan.chosen .sim-acc-ico { background: var(--gold); color: #2A1F06; }
.sim-acc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim-acc-title { font-family: var(--ff-display, inherit); font-weight: 700; font-size: 1.12rem; color: var(--navy); }
.sim-acc-q { font-size: .9rem; color: var(--muted); }
.sim-acc-pick { display: inline-flex; align-items: center; gap: 7px; max-width: 280px; padding: 6px 12px; border-radius: 99px; font-size: .8rem; font-weight: 600; color: var(--muted); background: #EEF2F6; border: 1px solid var(--line); }
.sim-card-plan.chosen .sim-acc-pick { color: #2A1F06; background: var(--gold-soft); border-color: var(--gold-line); }
.sim-acc-chev { color: var(--navy); transition: transform .2s; }
details.sim-card-plan[open] > summary .sim-acc-chev { transform: rotate(180deg); }
details.sim-card-plan[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sim-acc-body { padding: 16px 20px 20px; }
.sim-acc-tools { display: flex; gap: 18px; justify-content: flex-end; margin: 4px 0 10px; }
.sim-acc-tools .sim-linkbtn2 { color: #D5E0EC; }
@media (max-width: 700px) {
    details.sim-card-plan > summary { grid-template-columns: 38px minmax(0, 1fr) 20px; padding: 12px 14px; gap: 10px; }
    .sim-acc-ico { width: 38px; height: 38px; font-size: 1rem; }
    .sim-acc-pick { grid-column: 2 / 3; grid-row: 2; justify-self: start; max-width: 100%; }
    .sim-acc-body { padding: 12px 14px 16px; }
}
@media print { details.sim-card-plan > .sim-acc-body { display: block !important; } }
/* 2026-10-17: five goal groups with a bolder header: icon tile, title, copy and how many are chosen */
.sim-theme-head { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 26px 0 14px; padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-left: 5px solid var(--gold); }
.sim-theme-head > i { display: none; }
.sim-theme-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--gold); color: #2A1F06; font-size: 1.4rem; }
.sim-theme-head h2 { margin: 0; font-size: 1.35rem; }
.sim-theme-head p { margin: 2px 0 0; }
.sim-theme-count { font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.1); color: #E9F0F7; white-space: nowrap; }
@media (max-width: 700px) { .sim-theme-head { grid-template-columns: 44px minmax(0, 1fr); } .sim-theme-ico { width: 44px; height: 44px; font-size: 1.1rem; } .sim-theme-count { grid-column: 2; justify-self: start; } }
/* 2026-10-17 (later): the five goal groups are the accordions; the cards inside are ordinary open cards with an icon in the header */
details.sim-theme { margin: 0 0 14px; }
details.sim-theme > summary.sim-theme-head { list-style: none; cursor: pointer; grid-template-columns: 54px minmax(0, 1fr) auto 22px; margin: 18px 0 0; }
details.sim-theme > summary.sim-theme-head::-webkit-details-marker { display: none; }
details.sim-theme > summary.sim-theme-head:hover { background: rgba(255,255,255,.1); }
details.sim-theme[open] > summary.sim-theme-head { margin-bottom: 14px; }
.sim-theme-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim-theme-text h2 { margin: 0; }
.sim-theme-copy { font-size: .9rem; color: #C3D0DD; }
.sim-theme-names { font-size: .8rem; font-weight: 600; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.sim-theme > summary .sim-acc-chev { color: #E9F0F7; }
details.sim-theme[open] > summary .sim-acc-chev { transform: rotate(180deg); }
.sim-card-head { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; }
.sim-card-head .sim-acc-ico { margin-top: 2px; }
.sim-card-plan.chosen .sim-acc-ico { background: var(--gold); color: #2A1F06; }
@media (max-width: 700px) { details.sim-theme > summary.sim-theme-head { grid-template-columns: 44px minmax(0, 1fr) 20px; } .sim-theme-count { grid-column: 2; grid-row: 3; } .sim-card-head { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; } }
/* 2026-10-17: right-hand cards zoom to the centre of the screen */
#simRail .sim-rail-block { cursor: zoom-in; transition: border-color .15s, box-shadow .15s; }
#simRail .sim-rail-block:hover { border-color: rgba(200,154,64,.6); box-shadow: 0 0 0 1px rgba(200,154,64,.25); }
#simRail .sim-rail-block:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sim-zoom-back { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 20px; background: rgba(6,16,34,.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sim-zoom-card { position: relative; width: min(780px, 94vw); max-height: 90vh; overflow: auto; border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.sim-zoom-block { cursor: default; background: linear-gradient(180deg, #17305a, #0f2342); border: 1px solid rgba(200,154,64,.5); border-radius: 22px; padding: 26px 30px 28px; font-size: 1.12rem; }
.sim-zoom-block .sim-rail-head { padding-right: 48px; margin-bottom: 14px; }
.sim-zoom-block .sim-rail-head span { font-size: .85rem; }
.sim-zoom-block .sim-rail-head b { font-size: 2rem; }
.sim-zoom-block .sim-rail-table { font-size: 1rem; }
.sim-zoom-block .sim-rail-table td { padding: 7px 0; }
.sim-zoom-block .sim-rail-table th { font-size: .78rem; }
.sim-zoom-block .sim-rail-note, .sim-zoom-block .sim-rail-warn { font-size: .92rem; }
.sim-zoom-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 1.15rem; cursor: pointer; display: grid; place-items: center; }
.sim-zoom-x:hover { background: var(--gold); color: #2A1F06; border-color: var(--gold); }
.sim-zoom-x:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 700px) { .sim-zoom-block { padding: 18px 16px 20px; font-size: 1rem; } }
@media print { .sim-zoom-back { display: none !important; } }

/* ===== SIMULATOR BUDDY (2026-10-18): floating AI helper. Prefix sim-buddy-. Appended last; keep this block together. ===== */
.sim-buddy { --sim-fab-extra: 0px; position: fixed; right: 22px; bottom: calc(22px + var(--sim-fab-extra)); z-index: 890; font-size: var(--fs-sm); }
.sim-buddy[hidden] { display: none; }
.sim-buddy-launch { position: relative; width: 56px; height: 56px; border-radius: var(--r-round); border: 2px solid var(--focus-on-stage); background: var(--stage-2); color: var(--on-stage); box-shadow: var(--sh-stage); cursor: pointer; display: grid; place-items: center; font-size: 1.3rem; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast); }
.sim-buddy-launch:hover { background: var(--stage-3); transform: translateY(-1px); }
.sim-buddy-launch:focus-visible, .sim-buddy-chip:focus-visible, .sim-buddy-iconbtn:focus-visible, .sim-buddy-send:focus-visible, .sim-buddy-form textarea:focus-visible, .sim-buddy-menu button:focus-visible { outline: var(--ring-w) solid var(--focus-on-stage); outline-offset: var(--ring-offset); }
.sim-buddy-launch-txt { position: absolute; bottom: 4px; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.sim-buddy-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: var(--r-round); background: var(--gold); border: 2px solid var(--stage-2); }
.sim-buddy[data-open="true"] .sim-buddy-launch { display: none; }
.sim-buddy-panel { position: absolute; right: 0; bottom: 0; z-index: 891; width: min(380px, calc(100vw - 32px)); height: min(520px, calc(100vh - 140px)); display: flex; flex-direction: column; overflow: hidden; background: var(--stage-1); color: var(--on-stage-2); border: 1px solid var(--glass-line); border-top: 3px solid var(--focus-on-stage); border-radius: var(--r-md); box-shadow: var(--sh-stage-lg); animation: simBuddyIn var(--dur-base) var(--ease); }
.sim-buddy-panel[hidden] { display: none; }
@keyframes simBuddyIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.sim-buddy-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--glass-line); }
.sim-buddy-head h2 { flex: 1; margin: 0; font-size: var(--fs-md); color: var(--on-stage); }
.sim-buddy-wallet { font-size: var(--fs-2xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--glass-2); color: var(--accent-on-stage); }
.sim-buddy-wallet.low { background: rgba(255,181,158,.18); color: var(--neg-on-stage); }
.sim-buddy-iconbtn { width: 44px; height: 44px; border-radius: var(--r-round); border: 0; background: transparent; color: var(--on-stage); font-size: 1.3rem; cursor: pointer; }
.sim-buddy-iconbtn:hover { background: var(--glass-2); }
.sim-buddy-menu { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--glass-line); }
.sim-buddy-menu[hidden], .sim-buddy-sent[hidden], .sim-buddy-err[hidden] { display: none; }
.sim-buddy-menu button { min-height: 44px; text-align: left; border: 0; background: none; color: var(--on-stage); font: inherit; font-size: var(--fs-xs); cursor: pointer; text-decoration: underline; }
.sim-buddy-sent { margin: 0; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-2xs); line-height: 1.45; color: var(--on-stage-2); background: var(--glass-1); border-bottom: 1px solid var(--glass-line); }
.sim-buddy-ctx { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--glass-line); }
.sim-buddy-chip { min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--glass-line); background: var(--glass-1); color: var(--on-stage); font: inherit; font-size: var(--fs-xs); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-buddy-chip:hover { background: var(--glass-3); }
.sim-buddy-chip[disabled] { opacity: .5; cursor: not-allowed; }
.sim-buddy-thread { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); overscroll-behavior: contain; }
.sim-buddy-note, .sim-buddy-priv { margin: 0; font-size: var(--fs-2xs); line-height: 1.45; color: var(--on-stage-3); }
.sim-buddy-priv { padding: var(--sp-2) var(--sp-4) var(--sp-3); border-top: 1px solid var(--glass-line); }
.sim-buddy-msg { max-width: 92%; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); line-height: 1.5; overflow-wrap: anywhere; }
.sim-buddy-msg.me { align-self: flex-end; background: var(--stage-3); color: var(--on-stage); border-bottom-right-radius: var(--r-xs); }
.sim-buddy-msg.ai { align-self: flex-start; background: var(--glass-2); color: var(--on-stage-2); border-bottom-left-radius: var(--r-xs); }
.sim-buddy-msg p { margin: 0 0 var(--sp-2); }
.sim-buddy-msg ul, .sim-buddy-msg ol { margin: 0 0 var(--sp-2) var(--sp-4); padding: 0; }
.sim-buddy-msg h3, .sim-buddy-msg h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); color: var(--on-stage); }
.sim-buddy-meta { display: block; margin-top: var(--sp-1); font-size: var(--fs-2xs); color: var(--on-stage-3); }
.sim-buddy-msg.wait i { color: #7FB3F0; font-size: 1.1em; margin-right: 6px; }
.sim-buddy-err { margin: 0; padding: 0 var(--sp-4) var(--sp-2); color: var(--neg-on-stage); font-size: var(--fs-xs); }
.sim-buddy-form { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--glass-line); }
.sim-buddy-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; resize: none; padding: 10px var(--sp-3); font: inherit; border-radius: var(--r-sm); border: 1px solid var(--glass-line); background: #fff; color: var(--card-ink); }
.sim-buddy-send { min-width: 64px; min-height: 44px; border: 0; border-radius: var(--r-sm); background: var(--gold); color: var(--on-gold); font-weight: 700; cursor: pointer; }
.sim-buddy-send[disabled] { opacity: .5; cursor: not-allowed; }
.sim-buddy-form textarea[disabled] { opacity: .6; }
.sim-buddy-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* layout fixes (2026-10-18, tester H1/M2): the panel is a <section>, so the site-wide section padding squeezed the conversation; the
   question box is tall enough for its two-line example; the rail stops above the launcher instead of running under it. */
.sim-buddy-panel { padding: 0; }
.sim-buddy-form textarea { min-height: 68px; line-height: 1.4; }
body.sim-buddy-on .sim-rail { padding-bottom: 14px; max-height: calc(100vh - 28px - 92px); }
body:has(.sim-zoom-back) .sim-buddy, body:has(.sim-modal-backdrop) .sim-buddy { display: none; }
@media (max-width: 760px) {
  .sim-buddy { right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 68px + var(--sim-fab-extra)); }
  .sim-buddy[data-open="true"] { inset: 0; }
  .sim-buddy[data-open="true"]::before { content: ""; position: absolute; inset: 0; background: rgba(6,16,34,.55); }
  .sim-buddy-panel { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: min(78vh, 640px); border-radius: var(--r-md) var(--r-md) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation-name: simBuddySheet; }
  .sim-buddy-form textarea { font-size: 16px; }
}
@media (max-width: 640px) {
  /* the plan screen's effort and forecast bar is fixed to the foot of a phone: the launcher sits above it, never over the score */
  body:has(.sim-hud) .sim-buddy { bottom: calc(env(safe-area-inset-bottom, 0px) + 112px + var(--sim-fab-extra)); }
  body:has(.sim-hud) .sim-buddy[data-open="true"] { bottom: 0; }
}
@keyframes simBuddySheet { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sim-buddy-panel { animation: none; } .sim-buddy-launch { transition: none; } .sim-buddy-msg.wait i { animation: none; } }
@media (forced-colors: active) { .sim-buddy-panel, .sim-buddy-launch { border: 2px solid CanvasText; } }
@media print { .sim-buddy { display: none !important; } }
/* ===== END SIMULATOR BUDDY ===== */
/* ===== SIMULATOR ADJUSTABLE NUMBERS (2026-10-18): prefix sim-dial- and sim-opt-cell. Appended last; keep this block together. ===== */
/* An option is a cell: the tile button (the radio) with the adjustable numbers and the "Why these numbers" legend as siblings. */
.sim-opt-cell { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1.5px solid #8EA0B3; border-radius: 14px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.sim-opt-cell:hover { border-color: var(--gold-line); }
.sim-opt-cell.selected { border-color: var(--gold-deep); background: var(--gold-soft); box-shadow: 0 0 0 2px rgba(200,154,64,.3), 0 6px 18px rgba(200,154,64,.18); }
.sim-opt-cell.locked { background: #F3F5F7; border-style: dashed; }
.sim-opt-cell > .sim-opt, .sim-opt-cell > .sim-opt:hover, .sim-opt-cell > .sim-opt.selected, .sim-opt-cell > .sim-opt.locked, .sim-opt-cell > .sim-opt.locked:hover { border-color: transparent; background: transparent; box-shadow: none; transform: none; border-radius: 14px 14px 0 0; flex: 0 0 auto; }
.sim-opt-cell > .sim-opt:focus-visible { outline: var(--ring-w) solid var(--focus-on-light); outline-offset: -2px; }
.sim-opt-cell > .sim-numwhy { display: block; margin: 0 18px 14px; padding-top: 10px; border-top: 1px solid var(--card-line); }
.sim-opt-cell > .sim-numwhy:hover { cursor: help; }
@media (min-width: 900px) {
    .sim-opts:not(.sim-opts-col) > .sim-opt-cell { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    .sim-opts:not(.sim-opts-col) > .sim-opt-cell > .sim-opt { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; row-gap: 10px; align-content: start; padding: 16px 18px 6px; }
    .sim-opts:not(.sim-opts-col) > .sim-opt-cell > .sim-opt > .sim-opt-top { grid-row: 1; }
    .sim-opts:not(.sim-opts-col) > .sim-opt-cell > .sim-opt > .sim-stats { grid-row: 2; align-self: start; }
    .sim-opts:not(.sim-opts-col) > .sim-opt-cell > .sim-opt > .sim-opt-note { grid-row: 3; align-self: start; }
    .sim-opts:not(.sim-opts-col) > .sim-opt-cell > .sim-opt > .sim-opt-repeat, .sim-opts:not(.sim-opts-col) > .sim-opt-cell > .sim-opt > .sim-opt-why { grid-row: 4; align-self: start; }
    .sim-opts:not(.sim-opts-col) > .sim-opt-cell > .sim-dials { grid-row: 5; }
    .sim-opts:not(.sim-opts-col) > .sim-opt-cell > .sim-numwhy { grid-row: 6; align-self: end; }
}
@media (max-width: 899px) { .sim-opt-cell > .sim-opt { padding: 12px 14px 6px; } .sim-opt-cell > .sim-numwhy { margin: 0 14px 12px; } }

.sim-dials { display: grid; gap: var(--sp-2); align-content: start; margin: 0 0 var(--sp-2); padding: var(--sp-3) 18px; border-top: 1px dashed var(--card-line); }
.sim-dials.sim-dials-none { margin: 0; padding: 0; border: 0; }
.sim-dials-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--card-accent); }
.sim-dials-h { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 3.9em; }   /* same height in every option, so the dials line up (H2) */
.sim-dial-hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--card-muted); }
/* label above the stepper at every width (tester H2, 2026-10-18): side by side, a narrow four-option cell wrapped the label one letter per
   line and the rows did not line up across the options; stacked, every option's dial has the same shape, so the rows align. */
.sim-dial { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "ctl" "hint" "meta"; justify-items: start; align-items: center; column-gap: var(--sp-3); row-gap: 4px; }
.sim-dial-label { grid-area: label; min-width: 0; overflow-wrap: break-word; min-height: 2.6em; align-self: end; font-size: var(--fs-sm); font-weight: 600; color: var(--card-text); }
.sim-dial-ctl { grid-area: ctl; display: inline-flex; align-items: stretch; max-width: 100%; border: 1.5px solid #8EA0B3; border-radius: var(--r-pill); background: #fff; overflow: hidden; }
.sim-dial-btn { width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--card-heading); font-family: inherit; font-weight: 700; font-size: 1.25rem; line-height: 1; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sim-dial-btn:hover:not([disabled]) { background: var(--gold-soft); }
.sim-dial-btn:active:not([disabled]), .sim-dial-btn.holding { background: var(--gold-line); }
.sim-dial-btn[disabled] { color: #9AA6B2; cursor: not-allowed; }
.sim-dial-val { min-width: 4.4ch; padding: 0 var(--sp-2); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); border-inline: 1px solid var(--card-line); }
.sim-dial-val b { font-weight: 700; }
.sim-dial-val:focus-visible, .sim-dial-btn:focus-visible, .sim-dial-reset:focus-visible { outline: var(--ring-w) solid var(--focus-on-light); outline-offset: var(--ring-offset); }
.sim-dial-unit { font-weight: 500; color: var(--card-muted); }
.sim-dial-hintline { grid-area: hint; font-size: var(--fs-2xs); line-height: 1.4; color: var(--card-muted); }
.sim-dial-hintline:empty { display: none; }
.sim-dial-meta { grid-area: meta; display: flex; justify-content: space-between; align-items: center; min-height: 20px; }
.sim-dial-flag { visibility: hidden; font-size: var(--fs-2xs); font-weight: 700; color: var(--card-accent); }
.sim-dial.changed .sim-dial-flag { visibility: visible; }
.sim-dial.changed .sim-dial-ctl { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(200,154,64,.3); }
.sim-dial-reset { visibility: hidden; min-height: 44px; margin: -12px 0; padding: 0 var(--sp-2); background: none; border: 0; font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--card-heading); text-decoration: underline; cursor: pointer; }
.sim-dial.changed .sim-dial-reset { visibility: visible; }
.sim-dial-lockwhy { font-size: var(--fs-2xs); color: var(--card-muted); }
/* not chosen, or locked: shown as the suggested value, read-only */
.sim-opt-cell:not(.selected) .sim-dial-btn, .sim-opt-cell.locked .sim-dial-btn { pointer-events: none; color: #9AA6B2; }
.sim-opt-cell:not(.selected) .sim-dial-ctl, .sim-opt-cell.locked .sim-dial-ctl { background: transparent; border-style: dashed; }
.sim-opt-cell:not(.selected) .sim-dial-val, .sim-opt-cell.locked .sim-dial-val { color: var(--card-muted); }
.sim-opt-cell:not(.selected) .sim-dial-reset, .sim-opt-cell:not(.selected) .sim-dial-flag { visibility: hidden; }
/* recalculating: the figures shimmer in place, nothing changes size */
.sim-opt-cell.is-calc .sim-stat > span { color: transparent; border-radius: var(--r-xs); background: linear-gradient(90deg, #E7EBF0 25%, #F4F6F8 50%, #E7EBF0 75%); background-size: 200% 100%; animation: simDialShimmer 1s linear infinite; }
@keyframes simDialShimmer { to { background-position: -200% 0; } }
.sim-dial-saved { position: absolute; right: 14px; top: 10px; font-size: var(--fs-2xs); font-weight: 700; color: var(--pos-on-light); opacity: 0; transition: opacity var(--dur-base); pointer-events: none; }
.sim-dial-saved.show { opacity: 1; }
.sim-dial-warn { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); color: var(--neg-on-light); }
.sim-dial-warn[hidden] { display: none; }
.sim-tuned { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--card-accent); }
.sim-rail-retry { margin-left: var(--sp-2); min-height: 44px; padding: 0 var(--sp-3); border: 1px solid currentColor; border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
#simDialsResetAll[hidden] { display: none; }
@media (max-width: 760px) {
    .sim-dials { padding: var(--sp-3) 14px; }
    .sim-dial { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "ctl" "hint" "meta"; justify-items: start; }
    .sim-dial-ctl { width: 100%; max-width: 260px; }
    .sim-dial-btn { width: 52px; min-height: 52px; }
    .sim-dial-val { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .sim-opt-cell.is-calc .sim-stat > span { animation: none; background: #E7EBF0; } .sim-dial-saved { transition: none; } .sim-opt-cell { transition: none; } }
@media (forced-colors: active) {
    .sim-opt-cell.selected { border: 3px solid Highlight; }
    .sim-opt-cell.locked { border-style: dashed; }
    .sim-dial-ctl, .sim-dial-btn { border: 1px solid ButtonText; }
    .sim-dial.changed .sim-dial-ctl { border: 3px solid Highlight; }
}
@media print { .sim-dial-btn, .sim-dial-reset, .sim-dial-flag, .sim-dials-h, .sim-dial-saved, #simDialsResetAll { display: none !important; } .sim-dial-ctl { border: 0; } }
/* ===== END SIMULATOR ADJUSTABLE NUMBERS ===== */
/* ===== BEGIN SIMULATOR STORY (2026-10-18): "Your next five years" 3D story, Scripts\simulator-story3d.js. All rules prefixed sim-story-. ===== */
.sim-story-launch-wrap { margin: 0 0 var(--sp-3, 12px); }
.sim-story-launch { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: linear-gradient(120deg, #13294b 0%, #1d4e89 55%, #2a9d8f 100%); box-shadow: 0 8px 22px rgba(13,30,60,.28), inset 0 0 0 1px rgba(255,255,255,.12); position: relative; overflow: hidden; }
.sim-story-launch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%); transform: translateX(-100%); animation: sim-story-shine 4.5s ease-in-out 1s infinite; pointer-events: none; }
.sim-story-launch:hover { filter: brightness(1.08); }
.sim-story-launch:focus-visible { outline: 3px solid #f4b942; outline-offset: 3px; }
.sim-story-launch[aria-busy="true"] { opacity: .8; cursor: progress; }
.sim-story-launch-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #f4b942; color: #13294b; font-size: 1.15rem; box-shadow: 0 0 0 4px rgba(244,185,66,.25); }
.sim-story-launch-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sim-story-launch-txt b { font-size: 1rem; line-height: 1.25; }
.sim-story-launch-txt small { font-size: .78rem; opacity: .85; line-height: 1.3; }
.sim-story-launch-go { opacity: .8; }
.sim-story-launch-err { margin: 6px 0 0; font-size: .85rem; color: #b42318; }
@keyframes sim-story-shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

html.sim-story-lock, body.sim-story-on { overflow: hidden; }
body.sim-story-on .sim-buddy, body.sim-story-on .adf-btn { display: none !important; }
/* round 2 (2026-10-18): full screen. The scene fills the viewport; glass panels float over it. */
.sim-story-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 100002; overflow: hidden; color: #eaf2fa; font-size: 15px; background: #0a1730; --glass: rgba(8,18,38,.76); --glass-line: rgba(255,255,255,.14); --story-panel-w: 400px; }
.sim-story-overlay [hidden] { display: none !important; }
.sim-story-grow { animation: sim-story-grow .55s cubic-bezier(.2,.8,.2,1) both; transform-origin: var(--sim-story-ox, 50%) var(--sim-story-oy, 50%); }
@keyframes sim-story-grow { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: none; } }
.sim-story-scene { position: absolute; inset: 0; }
.sim-story-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.sim-story-canvas:active { cursor: grabbing; }
.sim-story-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #cfe0f0; font-size: 1.05rem; }
.sim-story-top, .sim-story-panel, .sim-story-bottom, .sim-story-badge { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--glass-line); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.sim-story-top { position: absolute; left: 16px; top: 16px; right: 88px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-radius: 16px; max-width: calc(100% - var(--story-panel-w) - 136px); min-width: 0; }
.sim-story-titles { flex: 1 1 220px; min-width: 0; }
.sim-story-titles h2 { margin: 0; font-size: 1.3rem; line-height: 1.2; color: #fff; outline: none; }
.sim-story-note { margin: 2px 0 0; font-size: .8rem; color: #f4d58d; }
.sim-story-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.1); gap: 4px; }
.sim-story-toggle button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #d6e5f3; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sim-story-toggle button[aria-pressed="true"] { background: #f4b942; color: #13294b; box-shadow: 0 4px 14px rgba(244,185,66,.35); }
.sim-story-close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: rgba(10,22,44,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 1.5rem; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.sim-story-close:hover { background: #e63946; border-color: #fff; }
.sim-story-close-x { grid-area: 1 / 1; font-size: 2rem; line-height: 1; font-weight: 300; }
.sim-story-toggle button:focus-visible, .sim-story-btn:focus-visible, .sim-story-close:focus-visible, .sim-story-yr:focus-visible, .sim-story-figtoggle:focus-visible { outline: 3px solid #f4b942; outline-offset: 2px; }
.sim-story-badge { position: absolute; left: 16px; top: 104px; padding: 8px 16px; border-radius: 14px; pointer-events: none; }
.sim-story-badge b { display: block; font-size: 1.35rem; color: #fff; letter-spacing: .01em; }
.sim-story-badge .s { display: block; font-size: .78rem; color: #9fc0de; text-transform: uppercase; letter-spacing: .1em; min-height: 1em; }
.sim-story-toast { position: absolute; left: calc((100% - var(--story-panel-w)) / 2); top: 104px; transform: translate(-50%, -12px); opacity: 0; padding: 10px 18px; border-radius: 999px; background: rgba(230,57,70,.92); color: #fff; font-weight: 700; transition: opacity .35s, transform .35s; pointer-events: none; max-width: calc(100% - var(--story-panel-w) - 64px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.sim-story-toast.good { background: rgba(42,157,143,.95); }
.sim-story-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sim-story-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the figures panel */
.sim-story-panel { position: absolute; right: 16px; top: 88px; bottom: 16px; width: var(--story-panel-w); display: flex; flex-direction: column; border-radius: 18px; }
.sim-story-ctrs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 12px 0; }
.sim-story-ctr { padding: 8px 12px; border-radius: 12px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); min-width: 0; }
.sim-story-ctr span { display: block; font-size: .72rem; color: #d3e3f2; text-transform: uppercase; letter-spacing: .06em; }
.sim-story-ctr b { display: block; font-size: 1.25rem; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-story-ctr[data-ctr="value"] { background: linear-gradient(160deg, rgba(244,185,66,.24), rgba(244,185,66,.05)); border-color: rgba(244,185,66,.4); }
.sim-story-ctr small { display: block; font-size: .72rem; color: #a9c3dc; line-height: 1.35; min-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-story-figtoggle { display: none; }
.sim-story-cap { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; border-radius: 0 0 18px 18px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) transparent; }
/* the year heading and its news (2026-10-19): beside the panel, above the timeline, so the panel's whole height goes to the figures */
.sim-story-yearbox { position: absolute; right: calc(100% + 16px); bottom: 104px; width: 300px; max-height: calc(100% - 140px); overflow-y: auto; padding: 12px 14px; border-radius: 16px; background: rgba(8,18,38,.9); border: 1px solid var(--glass-line); box-shadow: 0 10px 30px rgba(0,0,0,.28); scrollbar-width: thin; }
.sim-story-yearbox .sim-story-sec h4 { margin-top: 6px; }
.sim-story-yearbox .sim-story-final { margin: 0; }
.sim-story-yh { margin: 0 0 8px; font-size: 1.15rem; color: #fff; }
.sim-story-yh small { display: block; font-size: .8rem; font-weight: 600; color: #9fc0de; margin-top: 2px; }
.sim-story-final { margin: 0 0 12px; color: #fff; line-height: 1.5; }
.sim-story-final b { color: #f4b942; }
.sim-story-sg h4 { margin: 6px 0 2px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #f4d58d; }
.sim-story-sec h4 { margin: 12px 0 6px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #f4d58d; }
.sim-story-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .85rem; }
.sim-story-news li { display: flex; gap: 8px; align-items: flex-start; color: #dbe7f3; line-height: 1.4; }
.sim-story-news li i { color: #f4b942; margin-top: 3px; width: 16px; text-align: center; flex: 0 0 16px; }
.sim-story-news li.ev i { color: #ff8a80; }
.sim-story-quiet { margin: 0; font-size: .85rem; color: #9fc0de; }
.sim-story-stats { display: grid; gap: 2px; }
.sim-story-sg { display: grid; gap: 1px; padding: 0; margin: 0; }   /* a <section>: the site-wide section padding must not apply */
/* one line per figure (2026-10-19): label, value, change on last year, sparkline; all 19 fit a 900 px high window */
.sim-story-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto 78px 64px; column-gap: 8px; align-items: center; min-height: 22px; padding: 1px 8px; border-radius: 7px; background: rgba(255,255,255,.05); }
.sim-story-stat-compact { grid-template-columns: minmax(0, 1fr) auto auto; }
.sim-story-stat-n { font-size: .78rem; color: #b8cde2; min-width: 0; line-height: 1.2; }
.sim-story-stat > b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .88rem; text-align: right; }
.sim-story-stat-c { font-size: .7rem; color: #9fb6cc; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sim-story-stat-c.up, .sim-story-ctr small.up { color: #7fe0c0; }
.sim-story-stat-c.down, .sim-story-ctr small.down { color: #ffab91; }
.sim-story-spark { width: 64px; height: 20px; overflow: visible; }
.sim-story-spark polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sim-story-spark .o { stroke: rgba(255,255,255,.4); stroke-width: 1.4; stroke-dasharray: 3 3; }
.sim-story-spark .ahead { stroke: rgba(244,185,66,.3); stroke-width: 2; }
.sim-story-spark .done { stroke: #f4b942; stroke-width: 2.4; }
.sim-story-spark circle { fill: #fff; stroke: #f4b942; stroke-width: 2; }
.sim-story-stat[data-stat="value"] { background: rgba(244,185,66,.12); }
/* legend and timeline */
.sim-story-legend { position: absolute; left: 24px; bottom: 112px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .74rem; color: #eef5fb; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.8); max-width: calc(100% - var(--story-panel-w) - 64px); }
.sim-story-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sim-story-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.sim-story-legend .k-house { background: #f6efe2; } .sim-story-legend .k-gold { background: #f4b942; } .sim-story-legend .k-coin { background: #f4c430; border-radius: 50%; }
.sim-story-legend .k-tank { background: linear-gradient(#cfe9ff 40%, #f4b942 40%); } .sim-story-legend .k-bar { background: #2a9d8f; }
/* 2026-10-19: the eight added figures; the legend stops short of the year box (300 px wide, beside the panel) */
.sim-story-legend { max-width: calc(100% - var(--story-panel-w) - 380px); }
.sim-story-legend .k-loan { background: #c1121f; } .sim-story-legend .k-ring { background: none; border: 2px solid #7fe0c0; border-radius: 50%; }
.sim-story-legend .k-succ { background: #e0a526; border-radius: 50% 50% 3px 3px; } .sim-story-legend .k-solar { background: #1a2c5a; border: 1px solid #6c8bd0; }
.sim-story-legend .k-beam { background: linear-gradient(90deg, #fff1b8, rgba(255,241,184,0)); } .sim-story-legend .k-move { background: #ff70a6; border-radius: 50%; }
/* 2026-10-19: the island explains itself: a card for what is under the pointer, and captions while a year plays (under the badge) */
.sim-story-tip { position: absolute; z-index: 3; max-width: 290px; padding: 10px 12px; border-radius: 12px; background: rgba(8,18,38,.94); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 28px rgba(0,0,0,.4); font-size: .8rem; line-height: 1.4; color: #cfe0f0; pointer-events: none; }
.sim-story-tip[hidden] { display: none; }
.sim-story-tip b { display: block; margin-bottom: 4px; font-size: .9rem; color: #fff; }
.sim-story-tip span { display: block; margin-top: 2px; }
.sim-story-cue { position: absolute; left: 16px; top: 186px; max-width: 340px; padding: 8px 14px; border-radius: 12px; background: rgba(8,18,38,.88); border: 1px solid rgba(244,185,66,.45); color: #fff; font-weight: 600; font-size: .9rem; opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s; pointer-events: none; }
.sim-story-cue.on { opacity: 1; transform: none; }
@media (max-width: 760px) { .sim-story-cue { left: 8px; top: 182px; max-width: calc(100% - 16px); font-size: .82rem; } .sim-story-tip { max-width: calc(100% - 16px); } }
@media (prefers-reduced-motion: reduce) { .sim-story-cue { transition: none; } }
.sim-story-bottom { position: absolute; left: 16px; right: calc(var(--story-panel-w) + 32px); bottom: 16px; padding: 10px 14px 8px; border-radius: 16px; }
.sim-story-controls { display: flex; align-items: center; gap: 10px; }
.sim-story-btn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #f4b942; color: #13294b; font-size: 1rem; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(244,185,66,.35); }
.sim-story-btn[data-act="replay"] { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.sim-story-scrub { position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; padding-top: 8px; }
.sim-story-track { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.sim-story-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2a9d8f, #f4b942); }
.sim-story-yr { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 4px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.05); color: #d6e5f3; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-story-yr.on { background: rgba(244,185,66,.25); border-color: #f4b942; color: #fff; }
.sim-story-foot { margin: 6px 0 0; font-size: .72rem; color: #a9c3dc; }
/* still storyboard */
.sim-story-is-board { background: linear-gradient(180deg, #0f2240, #0a1730); }
.sim-story-is-board .sim-story-top { right: 88px; max-width: none; }
.sim-story-is-board .sim-story-scene { top: 96px; overflow-y: auto; }
.sim-story-board { padding: 8px 16px 24px; }
.sim-story-why { margin: 0 0 12px; color: #f4d58d; font-size: .86rem; }
.sim-story-bpanels { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.sim-story-bpanel { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); min-width: 0; }
.sim-story-bpanel .sim-story-news { margin: 0 0 8px; }
.sim-story-bpanel .sim-story-stat { min-height: 26px; }
.sim-story-mini { display: block; width: 100%; height: auto; border-radius: 10px; margin: 0 0 10px; }
/* phones: the title bar, the figures as a bottom sheet with the counters always showing, the timeline at the foot */
@media (max-width: 760px) {
  .sim-story-overlay { --story-panel-w: 0px; font-size: 14px; }
  .sim-story-top { left: 8px; right: 72px; top: 8px; padding: 8px 10px; max-width: none; gap: 8px; }
  .sim-story-titles h2 { font-size: 1.02rem; }
  .sim-story-note { font-size: .72rem; }
  .sim-story-toggle { width: 100%; }
  .sim-story-toggle button { flex: 1; padding: 0 8px; }
  .sim-story-close { top: 8px; right: 8px; width: 52px; height: 52px; }
  .sim-story-badge { top: 132px; left: 8px; padding: 6px 12px; }
  .sim-story-badge b { font-size: 1.05rem; }
  .sim-story-toast { left: 50%; top: 132px; max-width: calc(100% - 24px); }
  .sim-story-legend { display: none; }
  .sim-story-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 124px; max-height: calc(100% - 270px); border-radius: 16px; }
  .sim-story-ctrs { grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 8px 0; }
  .sim-story-ctr { padding: 6px 8px; }
  .sim-story-ctr b { font-size: 1.02rem; }
  .sim-story-ctr small.vs { display: none; }
  .sim-story-figtoggle { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 6px 8px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  .sim-story-panel:not(.open) .sim-story-cap, .sim-story-panel:not(.open) .sim-story-yearbox { display: none; }
  .sim-story-yearbox { position: static; width: auto; max-height: 30vh; margin: 0 8px; padding: 6px 4px; background: none; border: 0; box-shadow: none; flex: 0 0 auto; }
  .sim-story-bottom { left: 8px; right: 8px; bottom: 8px; padding: 8px 8px 6px; }
  .sim-story-controls { gap: 6px; }
  .sim-story-btn { width: 42px; height: 42px; }
  .sim-story-yr { font-size: .7rem; padding: 0 2px; }
  .sim-story-foot { font-size: .66rem; }
  .sim-story-is-board .sim-story-scene { top: 118px; }
  .sim-story-bpanels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) and (max-height: 700px) { .sim-story-foot { display: none; } .sim-story-panel { bottom: 104px; } }
@media (prefers-reduced-motion: reduce) { .sim-story-launch::after { animation: none; display: none; } .sim-story-grow { animation: none; } .sim-story-toast { transition: none; } }
@media (forced-colors: active) { .sim-story-toggle button[aria-pressed="true"], .sim-story-yr.on { border: 3px solid Highlight; } .sim-story-close { border: 3px solid ButtonText; } }
@media print { .sim-story-overlay, .sim-story-launch-wrap { display: none !important; } }
/* ===== END SIMULATOR STORY ===== */