/* [scaffold:fw=dcc] generated by scripts/scaffold-framework.js */
:root {
    --dcc-primary:   #8a9a5b;
    --dcc-secondary: #6b7a3f;
    --bg-1: #0b1220;
    --bg-2: #131b2e;
    --text-1: #e2e8f0;
    --text-2: #94a3b8;
    --border: rgba(255,255,255,.08);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-1);
    color: var(--text-1);
    line-height: 1.5;
}

.assessment-container { max-width: 900px; margin: 0 auto; padding: 24px 20px 80px; }

.assessment-container.has-sidebar {
    max-width: none;
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 40px);
    padding: 0;
    align-items: start;
}
.assessment-main { padding: 24px 20px 80px; }

.progress-tracker {
    position: sticky;
    top: 40px;
    height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.progress-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.progress-ring { width: 72px; height: 72px; }
.progress-ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.progress-ring-fill {
    fill: none;
    stroke: var(--dcc-primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 213.6;
    stroke-dashoffset: 213.6;
    transform: rotate(-90deg);
    transform-origin: 40px 40px;
    transition: stroke-dashoffset .4s ease;
}
.progress-ring-label { font-size: 1.1rem; font-weight: 700; color: var(--dcc-primary); }
.progress-ring-sub { font-size: .72rem; color: var(--text-2); text-align: center; }
.progress-sections { display: flex; flex-direction: column; gap: 2px; }
.progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    font-size: .83rem;
}
.progress-row:hover { background: rgba(255,255,255,.06); }
.progress-row-badge {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}
.progress-row-badge.complete { background: #22c55e; }
.progress-row-badge.partial  { background: #f59e0b; }
.progress-row-badge.started  { background: var(--dcc-secondary); }
.progress-row-name {
    flex: 1;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.progress-row-count { font-size: .75rem; color: var(--text-2); white-space: nowrap; flex-shrink: 0; }

.evidence-note {
    width: 100%;
    margin-top: 10px;
    background: rgba(255,255,255,.03);
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-1);
    font-family: inherit;
    font-size: 13px;
    padding: 8px 10px;
    resize: vertical;
    line-height: 1.4;
}
.evidence-note::placeholder { color: var(--text-2); }
.evidence-note:focus { outline: none; border-color: var(--dcc-primary); }

.header {
    position: sticky; top: 40px; z-index: 10;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
    display: flex; align-items: center; gap: 16px;
}
.header h1 { margin: 0; font-size: 20px; flex: 1; }
.header input[type="text"] {
    background: rgba(255,255,255,.06); border: 1px solid var(--border);
    color: var(--text-1); padding: 8px 12px; border-radius: 6px; width: 280px;
}
.save-notice { margin-top: 6px; font-size: .72rem; color: var(--text-2); transition: color .3s; }
.save-notice.just-saved { color: rgba(39,174,96,.95); }

.control-section {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 16px 0;
    overflow: hidden;
}
.control-header {
    padding: 14px 18px;
    background: rgba(255,255,255,.03);
    cursor: pointer;
    display: flex; align-items: center; gap: 16px;
    border-bottom: 1px solid var(--border);
}
.control-title { flex: 1; font-weight: 600; color: var(--dcc-primary); }
.control-progress { color: var(--text-2); font-size: 13px; }
.control-content { padding: 16px 18px; }

.question {
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
}
.question:last-child { border-bottom: none; }
.question-text { font-weight: 500; margin-bottom: 6px; }
.question-help { color: var(--text-2); font-size: 13px; margin-bottom: 10px; }
/* DCC: the IASME/MOD reference line above each question, so an assessor can
   match it to the Assessment Submission Record, and the items a multi-select
   question asks about. */
.dcc-ref { font-size: 11px; letter-spacing: 0.02em; color: var(--text-2); opacity: 0.85; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.dcc-items { margin: 8px 0 2px 1.1em; padding: 0; font-weight: 400; font-size: 14px; }
.dcc-items li { margin: 2px 0; }
@media print { .dcc-ref { color: #555; } }

.options { display: grid; gap: 6px; }
.option {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}
.option:hover { background: rgba(255,255,255,.06); }
.option input[type="radio"]:checked + span { color: var(--dcc-primary); font-weight: 600; }

.save-bar {
    position: sticky; bottom: 0;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    padding: 12px 20px;
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 24px;
}
.save-bar button {
    padding: 10px 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    color: var(--text-1);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.save-bar .primary-btn {
    background: var(--dcc-primary);
    border-color: var(--dcc-primary);
    color: #0b1220;
}

/* Every modal on the page (welcome, scoping pickers, access denied) sits
   above the 40px nav bar (z-index 999) and the Ask Phronesis button (900),
   and is never taller than the space below the nav bar: the panel scrolls
   inside when its content is longer. Until October 2026 the overlay sat
   at z-index 100 and nothing scrolled, so on phones and small laptops a
   panel's top or its buttons could be off-screen or covered. */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    display: none; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 56px 16px 16px;
    overflow-y: auto;
}
.modal-overlay[style*="flex"] { display: flex !important; }
.modal-panel {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    max-width: 540px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal-panel h2 { margin-top: 0; color: var(--dcc-primary); }
.modal-panel button {
    margin-top: 16px;
    padding: 10px 20px;
    background: var(--dcc-primary);
    color: #0b1220;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

/* Results overlay — fixed, full-viewport takeover below the 40px nav bar,
   matching every shipped framework's results panel. Do not turn this back
   into a plain in-flow block: assessment-core.js's renderResults() only
   toggles display:block/none on this element, so without position:fixed the
   analysis output renders in normal document flow instead of the expected
   overlay. Deliberately white/light — every shipped framework's results panel
   is light-on-white regardless of the rest of that page's theme (this template
   itself is dark-themed, --bg-1 above). The four variables below are redeclared
   for this subtree only: any var(--bg-1)/var(--text-1)/var(--text-2)/var(--border)
   used by a hand-added descendant rule picks up the light palette automatically
   via CSS custom-property cascading. If you add SVG (e.g. a radar chart) or any
   other hardcoded-colour content inside #results-content, colour it for a WHITE
   background, not this file's dark --bg-1/--text-1 defaults.
   The explicit color property below is NOT redundant with the --text-1
   redeclaration above it. Redeclaring a custom property only changes what
   var(--text-1) RESOLVES TO for a rule that explicitly references it — it does
   nothing for an element with no color rule of its own that is simply
   inheriting the color property from body (body's own color:var(--text-1) rule
   computes once, using the dark root value,
   and that already-resolved value is what's inherited — not re-evaluated per
   descendant). Plain, unclassed report text (list items built by onRenderResult
   for gaps/strengths/next-steps/warnings) is exactly this shape and will
   silently inherit body's near-white text straight onto this white panel
   without the line below. This was found and fixed on NIST CSF's own results
   panel by exactly this omission — do not drop it when copying this pattern. */
.results-panel {
    position: fixed;
    inset: 40px 0 0 0;
    background: #fff;
    z-index: 500;
    overflow-y: auto;
    padding: 28px 32px;
    --bg-1: #ffffff;
    --bg-2: #f4f6f8;
    --text-1: #1c2a38;
    --text-2: #5a6a7a;
    --border: #dde3ea;
    color: var(--text-1);
}
.results-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.results-header h2 { flex: 1; font-size: 1.4rem; color: var(--dcc-primary); margin: 0; }
.results-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.export-btn {
    background: var(--dcc-primary);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s;
}
.export-btn:hover { background: var(--dcc-secondary); }
.close-results-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: .85rem;
    cursor: pointer;
}
.close-results-btn:hover { color: var(--text-1); border-color: var(--text-2); }

/* ── RESULTS CONTENT — score summary, section grid, issue cards ──
   §3c: mandatory, zero exceptions — see FRAMEWORK_TEMPLATE.md. These
   classes are what onRenderResult's hand-written renderer actually
   creates (results-summary/results-score-row/overall-score/overall-label/
   results-grid/principle-card family/issue-item/issue-badge). Missing
   this block was found on CMMC (built before it existed here): the
   renderer worked and the elements existed, but rendered with bare
   browser-default spacing/colour because nothing here styled them. */
.results-summary {
    background: var(--bg-1);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.results-score-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.overall-score { font-size: 3rem; font-weight: 700; color: var(--dcc-primary); }
.overall-label { font-size: .85rem; color: var(--text-2); }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.principle-card {
    background: var(--bg-2);
    border-radius: 8px;
    padding: 12px 14px;
}
.principle-card-title { font-size: .8rem; font-weight: 600; color: var(--dcc-primary); margin-bottom: 6px; }
.principle-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.principle-bar-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }
.principle-score-label { font-size: .75rem; color: var(--text-2); margin-top: 4px; }

.results-issues { background: var(--bg-1); border-radius: 10px; padding: 20px 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.issue-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .87rem; }
.issue-item:last-child { border-bottom: none; }
.issue-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    height: fit-content;
}
.badge-critical { background: #fde8e8; color: #c0392b; }
.badge-warning  { background: #fef3e2; color: #e07b00; }
.badge-good     { background: #e6f9f0; color: #27ae60; }

/* ── RADAR CHART ── assessment-core.js's buildRadarChart() wraps its SVG
   in a div classed "${cfg.key}-radar-wrapper" — one rule per framework key. */
.dcc-radar-wrapper {
    margin: 20px 0 24px;
    display: flex;
    justify-content: center;
}

.score-circle {
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--dcc-primary) 0%, var(--dcc-secondary) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    margin: 16px auto;
    color: #0b1220;
}
.score-num { font-size: 36px; font-weight: 800; }
.score-label { font-size: 13px; font-weight: 600; }

#radar-chart { display: block; max-width: 560px; margin: 0 auto; }

.section-bar { display: grid; grid-template-columns: 200px 1fr 60px; gap: 12px; align-items: center; margin: 8px 0; }
.bar-track { background: rgba(255,255,255,.06); border-radius: 4px; height: 8px; overflow: hidden; }
.bar-fill  { height: 100%; background: var(--dcc-primary); }
.bar-value { color: var(--text-2); font-size: 13px; text-align: right; }

.results-issues { margin-top: 24px; }
.results-issues h3 { color: var(--dcc-primary); margin-top: 20px; }

.size-hidden { display: none !important; }

/* §12 — every framework supplies its own .evidence-comment styling;
   evidence-upload.css deliberately doesn't (it only styles the upload
   widget it attaches alongside), so without this the textarea renders with
   bare browser defaults. */
.evidence-comment { margin-top: 8px; margin-bottom: 6px; }
.evidence-comment label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 3px;
}
.evidence-comment textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255,255,255,.06);
    color: var(--text-1);
    font-size: .82rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color .15s;
}
.evidence-comment textarea:focus { outline: none; border-color: var(--dcc-primary); }
.evidence-comment textarea::placeholder { color: var(--text-2); opacity: .8; }
@media print { .evidence-comment textarea { border: 1px solid #ccc; background: #fff; color: #000; } }

/* ── EXECUTIVE SUMMARY (screen hidden, print visible) ──
   §3c: mandatory, zero exceptions. assessment-core.js's prepareAndPrint()
   builds this DOM generically for every core-based framework using the
   cfg.key prefix (here "dcc") — without the CSS below the elements
   exist but render unstyled/invisible: no PDF cover page, no colour, cards
   splitting across page boundaries, no confidentiality footer. */
.dcc-exec-summary { display: none; }

.dcc-exec-header {
    background: linear-gradient(135deg, var(--dcc-primary) 0%, var(--dcc-secondary) 100%);
    color: #0b1220;
    padding: 28px 32px;
    border-radius: 10px;
    margin-bottom: 24px;
}
.dcc-exec-header h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 4px; }
.dcc-exec-subtitle { font-size: 1.15rem; opacity: .85; margin-bottom: 2px; }
.dcc-exec-date { font-size: .82rem; opacity: .7; }

.dcc-exec-score-block {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 16px;
}
/* "Level 2" or "None", never broken over two lines. */
.dcc-exec-big-score { font-size: 3.2rem; font-weight: 700; white-space: nowrap; }
.dcc-exec-rating { font-size: 1.1rem; font-weight: 600; }

.dcc-exec-pillars {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.dcc-exec-pillar-chip {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    border: 1.5px solid;
}

.dcc-exec-gaps {
    background: var(--bg-1);
    border-radius: 10px;
    padding: 18px 22px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.dcc-exec-gaps h3 {
    font-size: .95rem;
    color: var(--dcc-primary);
    margin-bottom: 10px;
}
.dcc-exec-gap-item {
    padding: 6px 0 6px 16px;
    border-left: 3px solid #c0392b;
    font-size: .87rem;
    color: var(--text-1);
    margin-bottom: 6px;
}

/* Print footer (hidden on screen) */
.dcc-print-footer { display: none; }
/* Print pagination shell — a literal <table>/<tfoot> is required for Chrome
   to repeat this footer on every printed page (a CSS-only
   display:table-footer-group on a <div> only paints on the LAST page; a
   position:fixed footer doesn't reserve print-pagination space at all, so it
   paints OVER the last line(s) of content instead of pushing them to the
   next page). Reset to block on screen so wrapping the results content in
   this shell at print time is invisible until @media print applies below. */
.print-shell-table,
.print-shell-table > tbody,
.print-shell-table > tfoot,
.print-shell-table > tbody > tr,
.print-shell-table > tfoot > tr,
.print-shell-table > tbody > tr > td,
.print-shell-table > tfoot > tr > td { display: block; margin: 0; padding: 0; border: none; }

/* ─────────────────────────────────────────
   Target level: picker modal and bar (dcc-assessment.js)
   ───────────────────────────────────────── */
.dcc-level-modal { max-width: 760px; }
.dcc-level-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.modal-panel .dcc-level-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    margin: 0;
    padding: 16px;
    text-align: left;
    background: var(--bg-1);
    color: var(--text-1);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.modal-panel .dcc-level-card:hover,
.modal-panel .dcc-level-card:focus-visible {
    border-color: var(--dcc-primary);
    box-shadow: 0 0 0 3px rgba(138,154,91,.25);
    outline: none;
}
.dcc-level-card-title { font-size: 1.05rem; font-weight: 700; color: var(--dcc-primary); }
.dcc-level-card-desc { font-size: .84rem; color: var(--text-2); line-height: 1.45; }
.dcc-level-card-count { font-size: .76rem; color: var(--text-2); font-variant-numeric: tabular-nums; }

.dcc-level-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
    margin: 12px 0 4px;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.dcc-level-bar-label { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.dcc-level-toggle-group { display: flex; flex-wrap: wrap; gap: 6px; }
.dcc-level-toggle {
    padding: 6px 12px;
    font-size: .8rem; font-weight: 600;
    color: var(--text-2);
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}
.dcc-level-toggle:hover { color: var(--dcc-primary); border-color: var(--dcc-primary); }
.dcc-level-toggle.active { background: var(--dcc-primary); border-color: var(--dcc-primary); color: #0b1220; }
.dcc-level-bar-hint { font-size: .78rem; color: var(--text-2); margin-left: auto; }

/* Questions outside the target level, 2300.1's follow-ups until they apply,
   and a control marked not applicable. assessment-core.js leaves them out of
   progress through hiddenClasses. */
.question.dcc-hidden, .question.dcc-na-hidden, .dcc-section-hidden { display: none !important; }

/* ── Control headers ── */
.dcc-control {
    margin: 18px 0 4px;
    padding: 10px 12px;
    border-left: 3px solid var(--dcc-primary);
    background: rgba(138,154,91,.08);
    border-radius: 0 8px 8px 0;
}
.dcc-control:first-child { margin-top: 0; }
.dcc-control[hidden] { display: none; }
.dcc-control-title { font-weight: 600; font-size: .92rem; }
.dcc-control-id { color: var(--dcc-primary); font-variant-numeric: tabular-nums; margin-right: 2px; }
.dcc-gate-note { font-size: .78rem; color: var(--text-2); margin-top: 3px; }
.dcc-control--gate { border-left-color: #d97706; background: rgba(217,119,6,.08); }
.dcc-na-check { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .8rem; color: var(--text-2); cursor: pointer; }
.dcc-na-check input { accent-color: var(--dcc-primary); }
.dcc-na-box { margin-top: 8px; }
.dcc-na-box[hidden] { display: none; }
.dcc-na-box textarea {
    width: 100%;
    padding: 8px 10px;
    font: inherit; font-size: .84rem;
    color: var(--text-1);
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    resize: vertical;
}
.dcc-na-box textarea:focus { outline: none; border-color: var(--dcc-primary); }
.dcc-na-note { font-size: .76rem; color: var(--text-2); margin-top: 4px; }
.dcc-control--na { opacity: .85; border-left-style: dashed; }

/* What good looks like for the control, under its title (dcc-assessment.js
   buildControlHead()). */
.dcc-control-good { font-size: .8rem; color: var(--text-2); margin-top: 4px; line-height: 1.45; max-width: 90ch; }
.dcc-control-good strong { color: var(--text-1); font-weight: 600; }
/* Under each question: what meets the baseline (report-kit-ui.js goodNotes()). */
.dcc-good-meta { font-size: .76rem; opacity: .85; }

/* ── THE REPORT (CLAUDE.md item 17j) ──
   The summary card leads with the highest level met and the result, then the
   level ladder, each objective against the target level's mark and each
   section's share of its control points. The target section, the roadmap,
   the lists and the note under each question are the report kit's
   (report-kit.css, rk- classes). The kit's accent is the page's olive on the
   dark questions page, and a darker olive on the white results panel, where
   the page's own is too faint to read. */
:root { --rk-accent: var(--dcc-primary); }
.results-panel { --rk-accent: #55622f; --dcc-ink: #55622f; }
.dcc-muted { color: var(--text-2); font-size: .82rem; line-height: 1.5; max-width: 85ch; }
.results-issues > h3:first-child { margin-top: 0; }
.results-panel .results-issues h3 { color: var(--dcc-ink); }

.dcc-summary .results-score-row { align-items: flex-start; }
.dcc-score-block { min-width: 0; }
.overall-score { line-height: 1.05; font-variant-numeric: tabular-nums; }
.dcc-score-side { margin-left: auto; text-align: right; max-width: 26rem; display: grid; gap: 6px; justify-items: end; }
.dcc-close-line {
    display: inline-block;
    font-size: .9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 14px;
    background: #eef1f5;
    color: #4b5563;
}
.dcc-close-line.is-good    { background: #e6f4ea; color: #1e8449; }
.dcc-close-line.is-partial { background: #fef3e2; color: #8a5a00; }
.dcc-close-line.is-bad     { background: #fde8e8; color: #c0392b; }
.dcc-target-line { font-size: .88rem; font-weight: 600; color: var(--dcc-ink); }

.dcc-verdict {
    border: 1px solid var(--border);
    border-left: 4px solid #8a96a3;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 12px;
    background: #fbfcfd;
}
.dcc-verdict.is-bad     { border-left-color: #c0392b; }
.dcc-verdict.is-partial { border-left-color: #b9770e; }
.dcc-verdict.is-good    { border-left-color: #1e8449; }
.dcc-verdict-text { font-weight: 700; color: var(--text-1); font-size: 1rem; }
.dcc-verdict-detail { font-size: .86rem; color: var(--text-2); margin: 6px 0 10px; max-width: 80ch; line-height: 1.5; }
.dcc-tally { display: flex; flex-wrap: wrap; gap: 6px; }
.dcc-chip {
    font-size: .76rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    background: #eef1f5;
    color: #4b5563;
}
.dcc-chip.is-good  { background: #e6f4ea; color: #1e8449; }
.dcc-chip.is-bad   { background: #fde8e8; color: #c0392b; }
.dcc-chip.is-warn  { background: #fef3e2; color: #8a5a00; }
.dcc-chip.is-muted { background: #eef1f5; color: #4b5563; font-weight: 600; }
.dcc-summary-text { font-size: .9rem; color: var(--text-1); margin: 0 0 14px; line-height: 1.6; max-width: 80ch; }
.dcc-subhead { font-size: .95rem; color: var(--dcc-ink); margin: 20px 0 6px; }
.dcc-levels, .dcc-objectives, .dcc-sections { margin-top: 4px; }
.dcc-section-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dcc-section-card .principle-card-title { color: var(--dcc-ink); }
.dcc-section-status { font-size: .74rem; color: var(--text-2); margin-top: 4px; line-height: 1.4; }

/* The print cover's "At a glance" box (onPrintCover); printed only. */
.dcc-glance { display: none; }

.dcc-ladder-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.dcc-ladder-row:last-of-type { border-bottom: none; }
.dcc-ladder-level { font-weight: 700; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dcc-ladder-reason { font-size: .86rem; margin: 2px 0; }
.dcc-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.dcc-pill-pass { background: #e6f9f0; color: #1e8449; }
.dcc-pill-fail { background: #fde8e8; color: #c0392b; }
.dcc-pill-not-assessed { background: #eef1f4; color: #5a6a7a; }

/* ── Cyber Essentials prerequisite panel (dcc-ce-panel.js) ── */
.dcc-ce-panel {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .86rem;
}
.dcc-ce-panel h4 { margin: 0 0 6px; font-size: .92rem; color: var(--dcc-primary); }
.dcc-ce-panel p { margin: 4px 0; color: var(--text-2); }
.dcc-ce-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0; }
.dcc-ce-facts dt { color: var(--text-2); }
.dcc-ce-facts dd { margin: 0; overflow-wrap: anywhere; }
.dcc-ce-warn { color: #f59e0b !important; font-weight: 600; }
.dcc-ce-panel a { color: var(--dcc-primary); }

@media print {
    .dcc-level-bar, .dcc-control, .dcc-ce-panel { display: none !important; }
}

/* ── MOBILE ── */
@media (max-width: 900px) {
    /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr), so this
       one column widened to fit the page's widest unshrinkable content (a
       fixed-width field, a no-wrap button) and pushed the progress tracker and
       questions past the edge of a phone screen. */
    .assessment-container.has-sidebar { grid-template-columns: minmax(0, 1fr); }
    .progress-tracker { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
    .results-panel { padding: 16px; }
}

@media (max-width: 600px) {
    .dcc-level-options { grid-template-columns: minmax(0, 1fr); }
    .dcc-level-bar-hint { margin-left: 0; }
    .dcc-ladder-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .dcc-score-side { margin-left: 0; text-align: left; justify-items: start; flex-basis: 100%; }
    .results-header h2 { flex: 1 1 100%; }
    /* Stack the title and the organisation-name field: side by side, the 280px
       field squeezed the title to a word or two per line and still ran past
       the edge of a phone screen. */
    .header { flex-wrap: wrap; }
    .header input[type="text"] { width: 100%; }
    /* The save bar's buttons don't fit on one row: secondary actions share the
       first row and the primary action gets a full-width row of its own,
       instead of the row spilling off the left edge (it is right-aligned). */
    .save-bar { flex-wrap: wrap; padding: 10px 12px; }
    .save-bar button { flex: 1 1 auto; padding: 10px 12px; }
    .save-bar .primary-btn { flex-basis: 100%; }
}

@media print {
    /* Printing is only ever triggered from inside the results panel via
       exportPDF() -> window.print() — hide the questionnaire and chrome,
       print only the results panel, matching every shipped framework. */
    #sch-nav-bar, .header, .save-bar, .save-notice, .progress-tracker, #assessment-form,
    .results-actions, .results-header { display: none !important; }
    body { background: #fff !important; color: #000 !important; padding: 0 !important; padding-top: 0 !important; margin: 0; }
    .results-panel {
        position: static !important;
        display: block !important;
        inset: auto;
        padding: 0 !important;
        background: #fff !important;
        overflow: visible !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page { size: A4; margin: 15mm 18mm; }

    .dcc-exec-summary {
        display: block !important;
        page-break-after: always;
    }

    /* The summary card, the target section and the roadmap run over pages:
       the verdict, each level, control, phase and card stay whole, and a
       heading or lead-in never ends a page. */
    .results-summary, .results-issues { break-inside: auto !important; page-break-inside: auto !important; box-shadow: none !important; border: 1px solid #ddd; }
    .dcc-verdict, .dcc-muted, .dcc-ladder-row, .issue-item, .principle-card, .dcc-exec-gaps { page-break-inside: avoid; break-inside: avoid; }
    .results-issues h3, .results-issues h4, .dcc-subhead, .rk-also > summary { break-after: avoid; page-break-after: avoid; }
    /* The collapsed lists print: onPrintCover opens them. */
    .rk-also > summary { list-style: none; cursor: default; }
    .rk-also > summary::-webkit-details-marker { display: none; }

    .results-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
    .principle-card { padding: 8px 10px !important; }
    .principle-card-title { font-size: .72rem !important; }
    .principle-score-label { font-size: .68rem !important; }
    .overall-score { font-size: 2.4rem; }

    /* The cover's "At a glance" box: the target, the result, the
       pass-or-fail requirements and what's left to close. */
    .dcc-glance {
        display: block;
        border: 1px solid #dde3ea;
        border-left: 4px solid #6b7a3f;
        border-radius: 6px;
        padding: 8px 12px;
        margin: 10px 0 6px;
        font-size: 9pt;
        page-break-inside: avoid;
    }
    .dcc-glance .rk-glance-title {
        font-size: 8pt;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #3d4622;
    }
    .dcc-glance .rk-glance-row > span { flex: 0 0 48mm; }
    a[href]::after { content: none !important; }

    .print-shell-table {
        display: table !important;
        width: 100%;
        border-collapse: collapse;
    }
    .print-shell-table > tbody { display: table-row-group !important; }
    .print-shell-table > tfoot { display: table-footer-group !important; }
    .print-shell-table > tbody > tr, .print-shell-table > tfoot > tr { display: table-row !important; }
    .print-shell-table > tbody > tr > td, .print-shell-table > tfoot > tr > td { display: table-cell !important; padding: 0 !important; border: none !important; }

    .dcc-print-footer {
        display: flex !important;
        background: #ffffff;
        border-top: 2px solid var(--dcc-primary);
        padding: 5px 0;
        align-items: center;
    }
    .dcc-footer-col { flex: 1; font-size: 6.5pt; color: #5a6a7a; }
    .dcc-footer-left { text-align: left; font-weight: 700; color: #1c2a38; }
    .dcc-footer-right { text-align: right; }
}

/* Offer to bring in answers from the free Level 0 check (dcc-level0-check.html). */
.dcc-l0-import {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: #f3f5ec; border: 1px solid #d3dabf; border-left: 4px solid #8a9a5b;
    border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; color: #1f2933;
}
.dcc-l0-import-text { margin: 0; flex: 1 1 320px; font-size: .9rem; }
.dcc-l0-import-actions { display: flex; gap: 8px; }
.dcc-l0-import button {
    font: inherit; font-size: .85rem; font-weight: 600; border-radius: 6px; padding: 7px 14px; cursor: pointer;
}
.dcc-l0-import-add { background: #6b7a45; color: #fff; border: 1px solid #6b7a45; }
.dcc-l0-import-no { background: transparent; color: #4f5b32; border: 1px solid #c9d0b4; }
@media print { .dcc-l0-import { display: none; } }