/* ==========================================================================
   Theme Variables - based on jblfg.dev aesthetics
   Dark, minimal, monochrome glass UI. Hierarchy via opacity, not colour.
   ========================================================================== */

:root {
    /* ---------- Base colours ---------- */
    --color-bg: #080a12;
    --color-white: #ffffff;
    --color-black: #000000;

    /* ---------- Ambient glow (navy, behind content) ---------- */
    --glow-1: rgba(40, 50, 90, 0.4);
    --glow-2: rgba(30, 40, 80, 0.3);
    --glow-3: rgba(35, 45, 85, 0.25);
    --ambient-bg:
        radial-gradient(ellipse 80% 50% at 50% 0%, var(--glow-1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, var(--glow-2) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 20% 80%, var(--glow-3) 0%, transparent 50%);

    /* ---------- Text (opacity hierarchy) ---------- */
    --text-primary: rgba(255, 255, 255, 1);
    --text-body: rgba(255, 255, 255, 0.8);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-faint: rgba(255, 255, 255, 0.4);

    /* ---------- Surfaces ---------- */
    --surface-1: rgba(255, 255, 255, 0.02);   /* large sections */
    --surface-2: rgba(255, 255, 255, 0.03);   /* cards */
    --surface-3: rgba(255, 255, 255, 0.05);   /* highlights, buttons */
    --surface-hover: rgba(255, 255, 255, 0.1);
    --surface-active: rgba(255, 255, 255, 0.15);

    /* ---------- Borders ---------- */
    --border-hairline: rgba(255, 255, 255, 0.05);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);
    --border-hover: rgba(255, 255, 255, 0.3);

    /* ---------- Status colours (state only) ---------- */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.1);
    --success-bg-strong: rgba(34, 197, 94, 0.15);
    --success-border: rgba(34, 197, 94, 0.2);
    --success-border-strong: rgba(34, 197, 94, 0.3);

    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --danger-bg-hover: rgba(239, 68, 68, 0.25);
    --danger-border: rgba(239, 68, 68, 0.3);

    /* ---------- Header glass ---------- */
    --header-bg: rgba(8, 10, 18, 0.9);
    --header-blur: blur(20px);

    /* ---------- Typography ---------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SF Mono', 'Consolas', monospace;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --fs-title: clamp(32px, 5vw, 48px);
    --fs-subtitle: 18px;
    --fs-section-title: 20px;
    --fs-body: 15px;
    --fs-small: 14px;
    --fs-label: 13px;
    --fs-micro: 12px;

    --lh-tight: 1.2;
    --lh-base: 1.6;
    --lh-relaxed: 1.8;

    --ls-tight: -0.02em;
    --ls-label: 0.05em;

    /* ---------- Radius ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;

    /* ---------- Spacing ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-15: 60px;
    --space-20: 80px;

    --page-pad-top: 140px;
    --page-pad-x: 24px;
    --page-pad-bottom: 80px;

    /* ---------- Containers ---------- */
    --container-narrow: 900px;
    --container-default: 1200px;
    --container-wide: 1400px;

    /* ---------- Motion ---------- */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --lift-hover: translateY(-2px);

    /* ---------- Layers ---------- */
    --z-ambient: 0;
    --z-content: 1;
    --z-header: 100;
}

/* ---------- Responsive adjustments ---------- */
@media (max-width: 768px) {
    :root {
        --page-pad-top: 120px;
        --page-pad-x: 20px;
        --page-pad-bottom: 60px;
        --fs-section-title: 18px;
        --fs-body: 14px;
        --lh-relaxed: 1.7;
    }
}

/* ==========================================================================
   Base application
   ========================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* 26 Oct: something marked hidden stays hidden, whatever display its own style gives it */
[hidden] { display: none !important; }

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--text-primary);
    line-height: var(--lh-base);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-ambient);
    background: var(--ambient-bg);
}
/* ==========================================================================
   Compliance Checker components (1 Oct) - built on the variables above
   ========================================================================== */

/* ---------- header ---------- */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
    background: var(--header-bg); -webkit-backdrop-filter: var(--header-blur); backdrop-filter: var(--header-blur);
    border-bottom: 1px solid var(--border-subtle);
}
.header-inner {
    max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--page-pad-x);
    height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}
.brand { color: var(--text-primary); text-decoration: none; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); font-size: 17px; }
.nav { display: flex; gap: var(--space-8); }
.nav a { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-regular); transition: color var(--transition-fast); }
.nav a:hover { color: var(--text-primary); }
.nav a.active { color: var(--text-primary); font-weight: var(--fw-medium); }
/* 30 Oct: Sign out is a form (it must be sent, not followed), drawn exactly like the links beside it */
.nav .signout { display: flex; margin: 0; }
.nav .signout button { background: none; border: 0; padding: 0; color: var(--text-secondary); font: inherit; line-height: inherit;
                       font-size: var(--fs-small); cursor: pointer; transition: color var(--transition-fast); }
.nav .signout button:hover { color: var(--text-primary); }
.header-right { min-width: 80px; text-align: right; }

/* ---------- page ---------- */
.page { position: relative; z-index: var(--z-content); margin: 0 auto;
        padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom); }
.container-narrow { max-width: var(--container-narrow); }
.container-default { max-width: var(--container-default); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
h1 { font-size: var(--fs-title); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-section-title); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.section-title { font-size: var(--fs-section-title); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.body { color: var(--text-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.prose { color: var(--text-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.prose p { margin-bottom: var(--space-3); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }
.danger { color: var(--danger); }
.success { color: var(--success); }
.center { text-align: center; }
.label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label);
         font-weight: var(--fw-semibold); color: var(--text-muted); margin: var(--space-4) 0 var(--space-2); }
.mono { font-family: var(--font-mono); word-break: break-all; }

/* ---------- cards and grids ---------- */
.card { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
        padding: var(--space-6) var(--space-8); margin-bottom: var(--space-6); transition: background var(--transition-fast); }
.card:hover { background: var(--surface-3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.grid-2 > .card { margin-bottom: 0; }
.grid-2 { margin-bottom: var(--space-6); }

/* ---------- callouts (state only in colour) ---------- */
.callout { border-color: var(--border-default); background: var(--surface-3); }
.callout-title { font-size: var(--fs-small); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-label);
                 color: var(--text-secondary); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.callout-warn { background: rgba(255, 255, 255, 0.05); border-color: var(--border-strong); }
.callout-danger { background: var(--danger-bg); border-color: var(--danger-border); }
.callout-danger .callout-title { color: var(--danger); }
.callout-success { background: var(--success-bg); border-color: var(--success-border); }
.callout-success .callout-title { color: var(--success); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--text-faint); }
.dot-live { background: var(--success); box-shadow: 0 0 8px var(--success); }

/* ---------- buttons ---------- */
.btn { display: inline-block; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
       background: var(--surface-3); color: var(--text-primary); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium);
       text-decoration: none; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast); }
.btn:hover { background: var(--surface-hover); border-color: var(--border-hover); transform: var(--lift-hover); }
.btn-primary { background: var(--color-white); color: var(--color-bg); border-color: var(--color-white); }
.btn-primary:hover { background: rgba(255, 255, 255, 0.9); }
.btn-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg-hover); }
.btn.disabled { opacity: 0.4; pointer-events: none; }
.actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

/* ---------- forms ---------- */
.form .label { margin-top: var(--space-5); }
.input { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-default);
         background: rgba(0, 0, 0, 0.25); color: var(--text-primary); font: inherit; font-size: var(--fs-body);
         transition: border-color var(--transition-fast); }
.input:focus { outline: none; border-color: var(--border-hover); }
.textarea { line-height: var(--lh-base); resize: vertical; }
select.input { appearance: none; }
.choice { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.choice label { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 12px; border-radius: var(--radius-sm);
                border: 1px solid var(--border-subtle); background: var(--surface-1); font-size: var(--fs-small); cursor: pointer;
                transition: background var(--transition-fast), border-color var(--transition-fast); }
.choice label:hover { background: var(--surface-3); border-color: var(--border-default); }
.choice input { accent-color: var(--color-white); }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-label);
            font-weight: var(--fw-semibold); color: var(--text-muted); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-small);
            color: var(--text-body); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table a { color: var(--text-primary); text-decoration: none; font-weight: var(--fw-medium); }
.table a:hover { text-decoration: underline; }
.table-wrap { overflow-x: auto; }

/* ---------- pills ---------- */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-micro); font-weight: var(--fw-semibold);
        letter-spacing: 0.02em; border: 1px solid var(--border-default); background: var(--surface-3); color: var(--text-secondary); }
.pill-done, .pill-ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.pill-failed, .pill-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.pill-running, .pill-queued, .pill-warn { background: var(--surface-active); border-color: var(--border-strong); color: var(--text-primary); }
.pill-implied { border-style: dashed; }

/* ---------- confirm screen ---------- */
.fact { padding: var(--space-4) 0; border-top: 1px solid var(--border-hairline); }
.fact:first-of-type { border-top: 0; }
.fact-head { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; }
.fact-q { font-size: var(--fs-body); color: var(--text-primary); }
.fact-proposed { font-size: var(--fs-small); color: var(--text-secondary); white-space: nowrap; }
.quote { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-4); border-left: 2px solid var(--border-strong);
         color: var(--text-muted); font-size: var(--fs-small); font-style: italic; }
.choice.compact { flex-wrap: nowrap; gap: var(--space-2); }
.choice.compact label { padding: 6px 10px; }
.table td.col-keep { width: 1%; white-space: nowrap; }
.table td.col-label { min-width: 220px; }
.table td.col-asset { min-width: 160px; }
.table .nowrap { white-space: nowrap; }
.table td .input { padding: 8px 10px; }
.choice label.proposed { border-color: var(--border-strong); background: var(--surface-3); }
.pill-proposed { background: var(--surface-active); border-color: var(--border-strong); color: var(--text-primary); margin-left: var(--space-1); }
.tick { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-2); }
.input.inline { width: auto; display: inline-block; padding: 4px 8px; font-size: var(--fs-small); margin-left: var(--space-1); }

.summary { cursor: pointer; list-style: none; }
.summary::-webkit-details-marker { display: none; }
.summary::before { content: "\25B8  "; color: var(--text-faint); }
details[open] > .summary::before { content: "\25BE  "; }

/* ---------- lists, notices, footer ---------- */
.list { list-style: none; padding-left: 0; }
.list li { position: relative; padding-left: 18px; margin-bottom: var(--space-2); color: var(--text-body); font-size: var(--fs-body); }
.list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--text-faint); }
.notice { padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--border-default);
          background: var(--surface-3); margin-bottom: var(--space-6); font-size: var(--fs-small); }
.notice.error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.notice.success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.site-footer { margin-top: var(--space-15); padding-top: var(--space-6); border-top: 1px solid var(--border-hairline); }

@media (max-width: 768px) {
    .nav { gap: var(--space-4); }
    .card { padding: var(--space-5); }
    .page-head { flex-direction: column; }
}

/* ---------- where you are (26 Oct: moved here from plain.css, so every page that shows it is styled) ---------- */
.crumbs { font-size: var(--fs-small); color: var(--text-faint); margin-bottom: var(--space-4); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.crumbs span { color: var(--text-secondary); }

/* ---------- the assessment page in the project page's style (26 Oct) ---------- */
.result-name, .activity-name { display: flex; flex-direction: column; min-width: 0; }
.result-help { margin-top: var(--space-3); }
details.activity > summary.activity-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3);
                                              list-style: none; cursor: pointer; }
details.activity > summary.activity-summary::-webkit-details-marker { display: none; }
details.activity > summary.activity-summary { position: relative; padding-left: 20px; }
details.activity > summary.activity-summary::before { content: "\25B8"; color: var(--text-muted); position: absolute; left: 0; top: 4px; }
details.activity[open] > summary.activity-summary::before { content: "\25BE"; }
details.activity[open] > summary.activity-summary { margin-bottom: var(--space-4); }

/* ---------- no box ever wider than its content area (26 Oct): long words wrap at every width ---------- */
/* break-word (not "anywhere"): a long word wraps only when it cannot fit, and never makes the browser squash a
   table's columns into fragments of words */
.page { overflow-wrap: break-word; }
.table th, .table td { overflow-wrap: normal; word-break: normal; hyphens: none; }
.open-groups { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-4); }
.open-groups .list { margin-top: var(--space-1); }

/* "add an activity by hand": two even rows on a wide screen (name and kind; coin and button), one column on a phone */
.actions.add-activity, .actions.move-company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.actions.add-activity .input.inline, .actions.add-activity .input.inline.wide,
.actions.move-company .input.inline { width: 100%; min-width: 0; margin: 0; }
.actions.add-activity .btn, .actions.move-company .btn { justify-self: start; }

/* ---------- "ready to copy" (26 Oct): label above answer, a Copy button at the right of each answer ---------- */
.copy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.copy-head .section-title { margin-bottom: 2px; }
.copy-missing-note { color: var(--text-secondary); margin-top: var(--space-2); }
.copy-list { margin: var(--space-3) 0 0; }
.copy-row { padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline); }
.copy-row dt { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 4px; }
.copy-row dd { margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.copy-value { color: var(--text-primary); font-size: var(--fs-body); line-height: var(--lh-base); min-width: 0; }
.copy-btn { flex: none; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
            background: var(--surface-3); color: var(--text-primary); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.copy-btn:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.copy-btn.is-copied, .copy-all.is-copied { border-color: var(--success-border); color: var(--success); background: var(--success-bg); }
.copy-row.is-missing dt { color: var(--text-secondary); }
.copy-row.is-missing dd { justify-content: flex-start; }
.copy-fill { font-size: var(--fs-small); }
.copy-row.is-missing { border-left: 2px dashed var(--border-strong); padding-left: var(--space-3); }
.copy-row.is-missing dt::after { content: " \00b7  still to fill in"; color: var(--text-primary); font-size: var(--fs-micro);
                                 font-weight: var(--fw-medium); }
.copy-block { margin-top: var(--space-4); padding-top: var(--space-2); }
.copy-block-title { font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.app-copy { margin: var(--space-2) 0 var(--space-3); }

/* ---------- phone width (26 Oct): every page must work at 360px with no sideways scrolling ---------- */
.narrow-only { display: none; }
@media (max-width: 640px) {
    :root { --page-pad-top: 84px; --page-pad-x: 16px; --fs-title: 28px; }
    .header-inner { height: 56px; gap: var(--space-3); }
    .brand { font-size: 16px; }
    .nav { gap: var(--space-4); }
    .header-right { display: none; }
    .wide-only { display: none; }
    .narrow-only { display: inline; }
    .page-head { gap: var(--space-3); margin-bottom: var(--space-6); }
    .card { padding: var(--space-4); }
    h1 { overflow-wrap: anywhere; }
    /* on a phone a long unbroken word may break anywhere, outside ordinary tables (a stacked table's rows are
       blocks, so they may too); an ordinary table keeps whole words and its own wrapper */
    .page { overflow-wrap: anywhere; }
    .table:not(.stack) th, .table:not(.stack) td { overflow-wrap: normal; }
    .table.stack td { overflow-wrap: anywhere; }
    .page select.input, .page .input.inline, .page .input.inline.wide { max-width: 100%; min-width: 0; }
    .actions .input.inline { flex: 1 1 100%; width: 100%; margin: 0; }
    .actions.add-activity, .actions.move-company { grid-template-columns: minmax(0, 1fr); }
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .step-list li .step-pills, .activity-summary .step-pills { margin-left: 0; justify-content: flex-start; }
    .date-form .input { width: 100%; }
    .grid-3 { grid-template-columns: 1fr; gap: var(--space-4); }
    /* a table marked "stack" becomes one block per row, each cell under its own small label (26 Oct): no
       table on a phone scrolls sideways */
    .table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
    .table.stack thead { display: none; }
    .table.stack tr { padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline); }
    .table.stack tr:first-child { border-top: 0; }
    .table.stack td { padding: 2px 0; border: 0; white-space: normal; }
    .table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-micro);
                                          color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--ls-label); }
    .table.stack .input { width: 100%; }
    .table.stack .inline-form { margin-top: var(--space-2); }
}

/* ==========================================================================
   Question pages, records, assessment and source pages (reissued 3 Oct).
   The rules for these pages were missing from the copy on the server, so
   citations, the suggestion box, the map and the assessment sections were
   showing with the browser's own defaults (plain blue links, no spacing).
   ========================================================================== */

/* ---------- links ---------- */
a { color: var(--text-primary); text-underline-offset: 3px; }
.inline-link { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-hover); }
.inline-link:hover { text-decoration-color: var(--text-primary); }

/* ---------- citations: one small chip each, never run together ---------- */
.cite { display: inline-block; padding: 1px 9px; margin: 2px 6px 2px 0; border-radius: 999px;
        border: 1px solid var(--border-default); background: var(--surface-1); color: var(--text-secondary);
        font-size: var(--fs-micro); font-weight: var(--fw-medium); font-style: normal; line-height: 1.6;
        text-decoration: none; white-space: nowrap; vertical-align: baseline;
        transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
a.cite:hover { background: var(--surface-hover); border-color: var(--border-hover); color: var(--text-primary); }
p .cite, li .cite { margin: 0 2px; }
/* a question named inside the model's wording: shown by its label, the key on hover */
.ref { color: var(--text-primary); border-bottom: 1px dotted var(--border-strong); cursor: help; }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
          margin: var(--space-2) 0 var(--space-3); }
.q-meta .cite { margin: 0; }

/* ---------- question pages ---------- */
.question .fact-q { font-size: 17px; font-weight: var(--fw-medium); line-height: 1.45; }
.question p { margin-bottom: var(--space-3); }
.guidance { margin: var(--space-3) 0 var(--space-4); }
.quote.plain { font-style: normal; color: var(--text-body); line-height: var(--lh-relaxed); }
.factors { margin: var(--space-4) 0; padding-left: var(--space-5); border-left: 2px solid var(--border-default); }
.factors > .label { margin-top: 0; }
.factor { padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline); }
.factor .choice { margin-top: var(--space-2); }
.slot { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); border: 1px dashed var(--border-strong);
        border-radius: var(--radius-md); background: var(--surface-1); }
.slot > .label:first-child { margin-top: 0; }
.slot p { margin-bottom: var(--space-2); line-height: var(--lh-base); }
.slot .input { margin-bottom: var(--space-3); }
.btn-small { padding: 6px 12px; font-size: var(--fs-micro); }

/* ---------- small helpers ---------- */
.first, .label.first { margin-top: 0; }
.flush, .actions.flush { margin-top: 0; }
.upper { text-transform: uppercase; letter-spacing: var(--ls-label); font-weight: var(--fw-semibold); }
.list li.small { font-size: var(--fs-small); }
.list li.micro { font-size: var(--fs-micro); }
.list.tight { margin: var(--space-2) 0; }
.list.tight li { margin-bottom: 2px; }
.grid-2.tight { margin-bottom: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6);
          margin-bottom: var(--space-4); }
.inline-form { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.input.inline.wide { min-width: 260px; }
.section-title.inline { display: inline; margin: 0; }
.note { margin-top: var(--space-3); }
.source-text p { margin-bottom: var(--space-3); }

/* ---------- the map of questions ---------- */
.table.map th { white-space: normal; vertical-align: bottom; }
.table.map td.center, .table.map th:not(:first-child) { text-align: center; }
.table.map td:first-child, .table.map th:first-child { text-align: left; }
.table .count { display: inline-block; min-width: 30px; padding: 2px 9px; border-radius: 999px;
                border: 1px solid var(--border-strong); background: var(--surface-active); text-align: center; }
.table .count:hover { background: var(--surface-hover); text-decoration: none; }

/* ---------- folded sections ---------- */
details.sub { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); }
details.sub > .summary.label { margin: 0; }
details.sub[open] > .summary.label { margin-bottom: var(--space-3); }
details.activity > .summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
details.activity[open] > .summary { margin-bottom: var(--space-4); }
.lead { font-size: 17px; color: var(--text-primary); line-height: var(--lh-base); }
.cond { padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline); }
.cond p { margin-top: var(--space-2); line-height: var(--lh-base); }
.cond .q-meta { margin-bottom: 0; }

/* ---------- positions and condition states (state only in colour) ---------- */
.pill-pos-required { background: var(--surface-active); border-color: var(--border-hover); color: var(--text-primary); }
.pill-pos-not_required { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.pill-pos-exempt { background: var(--success-bg); border-color: var(--border-hover); color: var(--text-primary); }
.pill-pos-needs_more_information { border-style: dashed; }
.pill-pos-outside_scope { background: var(--surface-active); border-color: var(--border-strong); color: var(--text-primary); border-style: dashed; }
.pill-pos-not_assessable { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
/* 25 Oct: the extra sections' answers (public offer, promotion) */
.pill-sec-not_allowed { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.pill-sec-allowed { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.pill-sec-not_an_offer, .pill-sec-not_a_promotion { background: var(--success-bg); border-color: var(--border-hover); color: var(--text-primary); }
.pill-sec-needs_more_information { border-style: dashed; }
.pill-sec-outside_scope { background: var(--surface-active); border-color: var(--border-strong); border-style: dashed; }
.pill-sec-not_assessable { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.route-line { line-height: 1.5; }
.offer-block { border-top: 1px solid var(--border-default); margin-top: 16px; padding-top: 8px; }
.pill-state-met { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.pill-state-not_met { color: var(--text-muted); }
.pill-state-unknown { border-style: dashed; color: var(--text-muted); }

/* ---------- print: the assessment on paper, black on white ---------- */
@media print {
    :root { --color-bg: #ffffff; --text-primary: #000000; --text-body: #111111; --text-secondary: #222222;
            --text-muted: #444444; --text-faint: #666666; --surface-1: transparent; --surface-2: transparent;
            --surface-3: transparent; --surface-active: transparent; --border-hairline: #cccccc;
            --border-subtle: #bbbbbb; --border-default: #999999; --border-strong: #666666;
            --success: #000000; --success-bg: transparent; --success-border: #666666;
            --danger: #000000; --danger-bg: transparent; --danger-border: #666666;
            --page-pad-top: 0px; --page-pad-x: 0px; --page-pad-bottom: 0px; }
    body { background: #ffffff; color: #000000; }
    .ambient, .site-header, .btn, .actions, .notice, form { display: none !important; }
    .page { max-width: none; }
    .card { break-inside: auto; border-color: #999999; padding: 12px 0; border-width: 0 0 1px 0; border-radius: 0; }
    .cond, .table tr { break-inside: avoid; }
    .cite { border-color: #999999; color: #000000; }
    h1 { font-size: 24px; }
}
.table.map .pill { white-space: nowrap; }

/* 25 Oct: the application page (rebuilt the same evening to work like the question pages) */
.app-status .body { margin: 0 0 var(--space-2); }
.app-step { font-size: var(--fs-h3, 18px); margin: var(--space-4) 0 0; }
.app-group { margin: 0; }
.app-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.app-list li { padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.app-why { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }
/* 26 Oct: under a "you fill these in" part, how far its business details have got, each a link to that section */
.app-details { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.app-detail { font-size: var(--fs-micro); padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--border-strong);
              color: var(--text-secondary); text-decoration: none; }
.app-detail:hover { border-color: var(--border-hover); color: var(--text-primary); }
.app-detail.is-done { border-style: solid; border-color: var(--success-border); color: var(--success); background: var(--success-bg); }
.app-waiting { border-style: dashed; }
.app-wording { margin: var(--space-4) 0 0; }
.app-wording summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-small); }

/* 25 Oct: the description card, always in view, with an edit box */
.desc-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.desc-edit { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; padding: 12px; border-radius: 8px;
             background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-default); }
.desc-reread { margin-top: var(--space-4); padding: 14px 16px; border-radius: 10px; }
.desc-reread .body { margin: 0 0 var(--space-2); }

/* 25 Oct: how it works, and the guide to describing a project */
.process { margin: 0; padding-left: 1.4em; }
.process li { margin: 0 0 10px; line-height: 1.5; }
.process li:last-child { margin-bottom: 0; }
.describe-guide summary { cursor: pointer; }
.describe-topics { margin: var(--space-3) 0 var(--space-4); padding-left: 1.4em; }
.describe-topic { margin: 0 0 var(--space-3); }
.describe-topic p { margin: 4px 0 0; }
.describe-topic.is-gap { border-left: 3px solid var(--border-strong); padding-left: 10px; margin-left: -13px; }
.describe-example { color: var(--text-muted); font-style: italic; }

/* 25 Oct: the project page as four steps */
.next-step { border-color: var(--border-strong); background: var(--surface-active); }
.next-step .body { margin: 4px 0 12px; font-size: 18px; }
.journey { list-style: none; margin: 0; padding: 0; }
.step { margin-bottom: var(--space-4); }
.step-head { display: flex; align-items: center; gap: var(--space-3); }
.step-head .section-title { margin: 0; flex: 1; }
.step-n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
          font-weight: 600; font-size: 14px; border: 1px solid var(--border-strong); flex: none; }
.step-done .step-n { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.step-now .step-n { background: #ffffff; color: #0b0d14; border-color: #ffffff; }
.step-waiting, .step-not_needed { opacity: 0.75; }
.step-done .step-pill { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.step > .body { margin: var(--space-3) 0; }
.step-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.step-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); padding: 9px 0;
                border-top: 1px solid var(--border-subtle); }
.step-count { margin-left: auto; font-size: var(--fs-small); }
.step-pills { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pill-tone-ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.pill-tone-attention { background: var(--surface-active); border-color: var(--text-primary); color: var(--text-primary); }
.pill-tone-open { border-style: dashed; }
.desc-box { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.advanced summary { cursor: pointer; }
.adv-block { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }

/* 25 Oct: step 1 of the application folds away once every opening question is answered */
.app-step-box .pq { margin-top: var(--space-4); }
.app-step-box > p { margin: var(--space-2) 0 0; }
.app-step-box > summary.app-step { cursor: pointer; list-style: revert; font-weight: 600; }
.app-change { font-weight: 400; margin-left: 6px; }
/* 27 Oct: activities under rules this checker does not hold yet - the reason under the name, and the box that keeps
   them in sight on the application, company, meeting and ready-to-copy pages */
.step-note { display: block; margin-top: 2px; }
.outside-box { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.outside-box > p { margin: 0; }
/* 28 Oct: the meeting request's gap list - the Fix / Check tag stays beside its line, never dropped below it */
.gap-list li { flex-wrap: nowrap; align-items: flex-start; }
/* 30 Oct: each point's buttons sit together on the right (left under the text on a phone) */
.rows .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.rows .row-actions .inline-form { display: inline-flex; margin: 0; }
details.marked-right { margin-top: var(--space-4); }
details.marked-right > summary { cursor: pointer; color: var(--text-secondary); }
.gap-list .step-pills { flex: none; }
/* 28 Oct: what an activity under rules this checker does not hold means for the founder's position */
.outside-kind { display: block; margin-top: var(--space-1); }
.outside-means { margin-top: var(--space-2); }
.outside-means > summary { cursor: pointer; }
.outside-means ul { margin-top: var(--space-2); }
.outside-explained { margin: var(--space-3) 0; }
.outside-explained .callout-title + p, .outside-explained .callout-title + ul { margin-top: var(--space-1); }
.outside-explained p + .callout-title { margin-top: var(--space-3); }
/* 28 Oct: the meeting request written up and checked */
.writeup-part { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.writeup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.writeup-head .step-pills { flex: none; }
.writeup-text { margin: var(--space-2) 0; }
.writeup-out s { color: var(--text-tertiary, var(--text-secondary)); }
.writeup-why { color: var(--text-secondary); font-style: italic; }
.writeup-yours { margin: var(--space-2) 0; }
.writeup-yours > summary { cursor: pointer; }
/* 28 Oct: the six steps of the whole service, on every page that belongs to one (assessments/path.py).
   29 Oct (Jason: the boxes were uneven): one grid of six equal columns, every box the same height, short labels
   and the same three lines in each box */
.path { margin: 0 0 var(--space-5); }
.path-where { margin: 0 0 var(--space-3); }
.path-groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.path-cap { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary);
            margin-bottom: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.path-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: var(--space-2); }
.path-step a { display: flex; align-items: flex-start; gap: 8px; height: 100%; min-height: 64px; box-sizing: border-box;
               padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 10px; color: var(--text-secondary);
               text-decoration: none; font-size: 13px; line-height: 1.35; }
.path-step a:hover { border-color: var(--border-strong); color: var(--text-primary); }
.path-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
          border-radius: 50%; border: 1px solid var(--border-strong); font-size: 11px; font-weight: 600; }
.path-label { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.path-name { display: block; }
.path-note { display: block; font-size: 11px; color: var(--text-secondary); opacity: .8; }
.path-step.is-done .path-n { background: var(--surface-active); }
.path-step.is-here a { border-color: var(--text-primary); color: var(--text-primary); background: var(--surface-active); }
.path-step.is-here .path-n { background: var(--text-primary); color: var(--color-bg, #000); border-color: var(--text-primary); }
.path-next { margin-top: var(--space-5); }
@media (max-width: 900px) {
  .path-groups { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* on a phone only the current step keeps its name; the others are equal round-cornered number boxes */
  .path-steps { display: flex; }
  .path-step { flex: none; }
  .path-step.is-here { flex: 1 1 auto; min-width: 0; }
  .path-step:not(.is-here) .path-label { display: none; }
  .path-step a { min-height: 0; padding: 6px; }
  .path-step.is-here .path-note:empty, .path-step.is-here .path-note { display: none; }
}
.step-n-range { width: auto; min-width: 28px; padding: 0 8px; border-radius: 14px; font-size: 12px; }

/* 29 Oct: the clean-up pass (Jason: "the site needs to look clean and professional").
   Rows: one layout for every list of things to work on - the name (and its description) on the left, its status and
   a button with a verb on the right; "below" lists put the status tags on their own line under the description. */
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4);
           padding: 12px 0; }
.rows .row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rows .row-title { color: var(--text-primary); }
.rows .row-side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.rows.below li { grid-template-columns: minmax(0, 1fr); }
.rows.below .row-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.rows .row-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap;
             margin-bottom: var(--space-3); }
.card-head .section-title { margin: 0; }
.head-actions { margin-top: var(--space-3); gap: var(--space-2); }
@media (max-width: 640px) {
  .rows li { grid-template-columns: minmax(0, 1fr); }
  .rows .row-side { justify-content: flex-start; }
  .rows.below .row-side { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .rows .row-actions { justify-content: flex-start; }
}
/* Spacing: a fixed gap under every page title; separate notes never touch; a caption sits a little below its heading */
.page-head h1 + * { margin-top: var(--space-3); }
.page-head .label + h1 { margin-top: var(--space-1); }
p:not(.body) + p, p + p.small, .small + p.small { margin-top: var(--space-2); }
.copy-head .section-title { margin-bottom: 6px; }
.section-title + .micro, .section-title + .faint.micro { margin-top: 4px; }
.activity-name { gap: 4px; }
.result-name { gap: 4px; }
p + .actions, p + form, p + .cond, p + .input, p + select, div.small + .actions, .muted.small + .actions { margin-top: var(--space-3); }
@media (max-width: 640px) { .table.stack td + td { margin-top: 6px; } }
@media (max-width: 640px) { .head-actions .btn { width: 100%; } }