/* ==========================================================================
   Cybersecurity Readiness Check — site theme
   Styles for tools/cyber-readiness.html.

   Loaded AFTER styles.css. Every rule is scoped under `.cra-app` so the tool's
   dense UI cannot leak into the navbar, hero or footer — and so the site's
   editorial h1–h6 / p / a rules cannot blow up the tool's compact typography.

   Same technique as it-budget.theme.css and cost-of-living.theme.css: the tool
   declares its OWN custom property names on the wrapper and maps each onto a
   site design token, so the markup and JS never reference a site token directly.

   THIRD TOOL, AND STILL A SEPARATE FILE. The standing note in the project
   CLAUDE.md said to extract a shared base once a third tool arrived. That
   extraction is deliberately deferred — see CLAUDE.md for the reasoning and the
   manifest. In short: the two existing print blocks are the most defect-prone
   CSS on the site (a blank first page in Gecko survived four rounds of QA), and
   refactoring all three at once would couple a new tool to a high-risk sweep of
   two shipped ones. Revisit at the fourth tool.
   ========================================================================== */

.cra-app {
    /* ---- tool vars → site design tokens ---- */
    --bg: var(--color-bg-primary);
    --card: var(--color-surface);
    --raised: var(--color-raised);
    --ink: var(--color-text-primary);
    --dim: var(--color-text-secondary);
    --muted: var(--color-text-muted);
    --line: var(--color-border);
    --line-strong: var(--color-border-strong);
    --accent: var(--color-primary);
    --accent-soft: rgba(229, 163, 68, 0.12);

    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;

    /* Firefox needs this explicitly — `color-scheme: dark` alone left the
       scrollable regions drawing a solid white bar across a dark card. */
    scrollbar-color: var(--line-strong) transparent;
}

.cra-app .wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 24px 64px;
}

/* The masthead's `display: none` on screen, and its whole print treatment, now
   live in tool-base.css. */

/* ---------- header -------------------------------------------------------- */
.cra-app header.app {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.cra-app .doc-title {
    display: block;
    width: 100%;
    max-width: 420px;
    background: transparent;
    border: 0;
    border-bottom: 1px dashed var(--line-strong);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    padding: 2px 0 6px;
}

.cra-app .doc-title:focus {
    outline: 0;
    border-bottom-color: var(--accent);
}

.cra-app header.app .sub {
    color: var(--muted);
    font-size: 0.82rem;
    margin-top: 6px;
}

.cra-app .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cra-app .actions button {
    font-family: inherit;
    font-size: 0.82rem;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cra-app .actions button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cra-app .actions button.primary {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ---------- layout -------------------------------------------------------- */
.cra-app .grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1000px) {
    .cra-app .grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cra-app .col-main {
    min-width: 0;
}

.cra-app .intro {
    color: var(--dim);
    font-size: 0.85rem;
    margin: 0 0 16px;
    max-width: 62ch;
}

/* ---------- progress ------------------------------------------------------ */
.cra-app .progress-bar {
    margin-bottom: 14px;
}

.cra-app .progress-text {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.cra-app .progress-track {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--raised);
    overflow: hidden;
}

.cra-app .progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 0 999px 999px 0;
    background: var(--accent);
    transition: width 0.2s ease;
}

/* ---------- cards --------------------------------------------------------- */
.cra-app .cra-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
}

.cra-app .cra-card>.body {
    padding: 16px 18px 18px;
}

.cra-app .cra-card h2 {
    margin: 0;
    padding: 12px 18px;
    background: var(--raised);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ---------- function sections (native <details>) --------------------------
   Native disclosure rather than a JS accordion: no state to keep in sync, no
   focus trap to get wrong, and it degrades to plain open sections if anything
   fails to load. */
.cra-app .fn-card>summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--raised);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.cra-app .fn-card>summary::-webkit-details-marker {
    display: none;
}

.cra-app .fn-card>summary::before {
    content: "▸";
    color: var(--muted);
    font-size: 0.7rem;
    margin-right: -4px;
    transition: transform 0.15s ease;
}

.cra-app .fn-card[open]>summary::before {
    content: "▾";
}

.cra-app .fn-name {
    flex: 1;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
}

.cra-app .fn-count {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    white-space: nowrap;
}

.cra-app .fn-blurb {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0 0 14px;
}

/* ---------- one question -------------------------------------------------- */
.cra-app .q-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.cra-app .q-row:first-of-type {
    border-top: 0;
}

.cra-app .q-head {
    flex: 1 1 380px;
    min-width: 0;
}

.cra-app .q-ref {
    display: block;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

.cra-app .q-prompt {
    display: block;
    color: var(--ink);
    font-size: 0.88rem;
}

.cra-app .q-row.answered .q-prompt {
    color: var(--dim);
}

/* ---------- the answer control -------------------------------------------
   A segmented button group, NOT a <select> and NOT `.seg`.
   · Not a select: 34 dropdowns would pull this tool into the custom-select
     component, whose entire QA surface (two Firefox-only defects to date)
     exists to make a popup behave. Buttons have no popup.
   · Not `.seg`: that class is hidden outright by the estimator's print block,
     and reusing the name invites somebody to hide these too. Same trap the
     share bar hit when its segments were called `.seg`. */
.cra-app .ans {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    overflow: hidden;
}

.cra-app .ans-btn {
    font-family: inherit;
    font-size: 0.76rem;
    padding: 7px 13px;
    border: 0;
    border-left: 1px solid var(--line-strong);
    background: transparent;
    color: var(--dim);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.cra-app .ans-btn:first-child {
    border-left: 0;
}

.cra-app .ans-btn:hover {
    background: var(--raised);
    color: var(--ink);
}

.cra-app .ans-btn.on {
    background: var(--accent);
    color: #1a1206;
    font-weight: 600;
}

.cra-app .ans-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ---------- summary / report --------------------------------------------- */
.cra-app .col-side .summary {
    position: sticky;
    top: 88px;
}

@media (max-width: 1000px) {
    .cra-app .col-side .summary {
        position: static;
    }
}

.cra-app .stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--line);
}

.cra-app .stat .k {
    color: var(--muted);
    font-size: 0.8rem;
}

.cra-app .stat .v {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.86rem;
}

.cra-app .stat.big {
    display: block;
    border-top: 0;
    padding: 0 0 10px;
}

.cra-app .stat.big .k {
    display: block;
    font-size: 0.78rem;
    margin-bottom: 2px;
}

.cra-app .stat.big .v {
    display: block;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.05;
}

.cra-app .stat.big .u {
    display: block;
    color: var(--muted);
    font-size: 0.74rem;
    margin-top: 3px;
}

.cra-app .sub-head {
    margin: 20px 0 8px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cra-app .footnote {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.55;
}

.cra-app .footnote p {
    margin: 0 0 7px;
    font-size: inherit;
    color: inherit;
}

.cra-app .footnote a {
    color: var(--accent);
}

/* ---------- chart ---------------------------------------------------------
   Same class contract as the other two tools so the component reads identically
   across the section: one hue, value and share always present as text, fill
   square at the baseline and rounded at the data end. */
.cra-app .chart {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cra-app .chart-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cra-app .chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cra-app .chart-label {
    color: var(--dim);
    font-size: 0.8rem;
}

.cra-app .chart-val {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    white-space: nowrap;
}

.cra-app .chart-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cra-app .chart-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--raised);
    overflow: hidden;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.cra-app .chart-fill {
    display: block;
    height: 100%;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.cra-app .chart-share {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    min-width: 4ch;
    text-align: right;
}

.cra-app .chart-empty,
.cra-app .chart-note {
    color: var(--muted);
    font-size: 0.76rem;
    margin: 0 0 6px;
    line-height: 1.5;
}

/* ---------- the gap list -------------------------------------------------- */
.cra-app .gap-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cra-app .gap-row {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: var(--raised);
}

.cra-app .gap-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: 5px;
}

.cra-app .gap-ref {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.cra-app .gap-title {
    flex: 1;
    color: var(--ink);
    font-size: 0.83rem;
    font-weight: 600;
}

/* Status is carried by WEIGHT, not by hue. A red/amber/green scale here would
   break the one-accent guardrail and would also collapse in greyscale, which is
   how this report gets printed most of the time. */
.cra-app .gap-state {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid var(--line-strong);
    color: var(--muted);
}

.cra-app .gap-state[data-s="no"] {
    border-color: var(--ink);
    color: var(--ink);
    font-weight: 700;
}

.cra-app .gap-prompt {
    color: var(--muted);
    font-size: 0.76rem;
    margin: 0 0 5px;
    line-height: 1.5;
}

.cra-app .gap-fix {
    color: var(--dim);
    font-size: 0.79rem;
    margin: 0;
    line-height: 1.55;
    padding-left: 13px;
    position: relative;
}

.cra-app .gap-fix::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* ---------- closing CTA --------------------------------------------------- */
.cra-app .tool-cta {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.cra-app .tool-cta p {
    color: var(--dim);
    font-size: 0.88rem;
    max-width: 62ch;
    margin: 0 auto 16px;
}

/* ==========================================================================
   PRINT — the report is the deliverable
   Every rule below exists because of a defect found by rendering, not reading.
   ========================================================================== */
@media print {

    /* The body reset, the light-variable block, `.wrap`, the `.print-only`
       masthead and its `.meta` line all live in tool-base.css now — this tool
       used them at exactly the base's values. `.navbar`, `.footer` and
       `.no-print` are hidden there too; the three below carry `.no-print` in
       the markup already and are named again only as belt-and-braces. */
    .cra-app header.app,
    .cra-app .col-main,
    .cra-app .tool-cta {
        display: none !important;
    }

    /* `color` is load-bearing, not decoration, and it stays here rather than in
       the base because it is this tool's problem alone: the planner and the
       estimator neutralise the site's editorial typography with a
       `h1, h2, h3, p { color: inherit }` rule and this tool does not. styles.css
       gives h1 its own light colour for the dark screen theme, and that rule
       wins over the inherited `color: #111` — so the single most important line
       on the report, the client's name, printed as pale grey on white and was
       very nearly illegible. Found by rasterizing page 1, not by reading CSS. */
    /* Doubled class: tool-base.css styles `.tool-app.tool-app .print-only h1`,
       so a single `.cra-app` prefix would lose to it. */
    .cra-app.cra-app .print-only h1 {
        color: #111;
    }

    /* The disclaimer travels with the score. A readiness percentage carrying a
       consultant's name invites more weight than a self-assessment can hold, so
       the qualification is on the same sheet as the number, not in a footnote
       three pages later. */
    .cra-app .print-only .disclaimer {
        margin: 7px 0 0;
        color: #333;
        font-size: 10px;
        line-height: 1.45;
    }

    /* The `.grid` flex fix for Gecko's non-fragmenting grid containers is in
       tool-base.css; this tool used the base's gap of 12px. */

    /* Kept even though .col-main is hidden: if a future revision ever prints the
       question list, the report must still lead the document. */
    .cra-app .col-side {
        order: -1;
    }

    .cra-app .col-side .summary {
        position: static;
    }

    .cra-app .cra-card {
        border: 1px solid var(--line);
        /* NOT `break-inside: avoid`. On the estimator that rule sent any card
           too tall for the remaining space to a fresh sheet and cost a page and
           a half of white space. Cards may split; the atoms below are what must
           never be cut. */
        break-inside: auto;
        /* Screen sets overflow:hidden to keep the h2 band inside the rounded
           corners. On paper that silently amputates anything wider than the
           card — no scrollbar, no ellipsis, just missing content. */
        overflow: visible;
    }

    /* This tool's own unbreakable atom, on top of the shared list in
       tool-base.css. A gap row split between its heading and its fix is the one
       break that would actually damage the report. */
    .cra-app .gap-row {
        break-inside: avoid;
    }

    /* A heading stranded at the foot of a sheet reads as a mistake. */
    .cra-app .cra-card h2,
    .cra-app .sub-head {
        break-after: avoid;
    }

    .cra-app .cra-card h2 {
        color: #111;
        background: #f4f4f5;
    }

    .cra-app .stat.big .v {
        color: #111;
    }

    /* The chart track and fill are covered by tool-base.css. These two are this
       tool's own filled surfaces and need the same treatment — "Background
       graphics" is OFF by default in Firefox's silent-print path, which is
       exactly how this PDF gets generated. */
    .cra-app .gap-row,
    .cra-app .gap-state {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .cra-app .gap-row {
        background: #fff;
        border-left: 3px solid var(--accent);
    }

    .cra-app .footnote {
        color: #444;
    }

    .cra-app .footnote a {
        color: #111;
        text-decoration: underline;
    }
}