/* ============================================================================
   Print stylesheet.

   Linked from Components/App.razor with media="print", so every rule in here is
   already print-only — no @media wrapper needed. Loaded after cc-chrome.css and
   cc-errors.css so equal-specificity rules here win.
   ============================================================================ */

@page { margin: 14mm; }

body { background: none !important; }

/* ── App chrome, on every page ───────────────────────────────────────────────
   Navigation and transient overlays never belong on paper. .cc-mobile-nav is
   forced visible by a media query in cc-chrome.css, hence the !important. */
.cc-header,
.cc-drawer,
.cc-footer,
.cc-tab-bar,
.cc-mobile-nav,
.cc-chat-widget,
.mud-drawer-overlay,
.mud-snackbar-provider,
.mud-overlay {
    display: none !important;
}

/* ============================================================================
   System Errors — the error-code print sheet

   ErrorPrintSheet.razor renders a purpose-built paper document (identity,
   triggers, troubleshooting) alongside the interactive UI and hides it on
   screen. When one is in the DOM, everything that is *not* the sheet or one of
   its ancestors is dropped. That direction matters: a blocklist of chrome
   classes has to be right about every element the app will ever add, and it
   wasn't — the tab strip, the code list and the mobile nav all reached paper.
   ============================================================================ */

body:has(.cc-print-sheet) *:not(:has(.cc-print-sheet), .cc-print-sheet, .cc-print-sheet *) {
    display: none !important;
}

/* The sheet's ancestors survive the rule above, but their app-shell geometry
   (flex rows, fixed viewport heights, scroll containers, card chrome) would
   crop the document to one screenful. Flatten the chain to plain blocks. */
body:has(.cc-print-sheet) :has(.cc-print-sheet) {
    display: block !important;
    position: static !important;
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.cc-print-sheet {
    display: block !important;
    color: var(--cc-black);
    font-size: var(--cc-fs-md);
    line-height: 1.45;
}

/* ── Masthead ────────────────────────────────────────────────────────────── */
.cc-print-head {
    border-bottom: 2px solid var(--cc-black);
    padding-bottom: var(--cc-sp-4);
    margin-bottom: var(--cc-sp-7);
}

.cc-print-brand {
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-dark-gray);
}

.cc-print-ident {
    display: flex;
    align-items: baseline;
    gap: var(--cc-sp-5);
    margin-top: var(--cc-sp-3);
}

.cc-print-code {
    font-size: var(--cc-fs-3xl);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.cc-print-desc { font-size: var(--cc-fs-xl); }

.cc-print-meta {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-5);
    margin-top: var(--cc-sp-2);
    font-size: var(--cc-fs-sm);
    color: var(--cc-dark-gray);
}

.cc-print-draft {
    font-weight: 700;
    padding: 0 var(--cc-sp-3);
    border: 1px solid var(--cc-dark-gray);
    border-radius: var(--cc-radius-sm);
}

.cc-print-summary {
    margin: 0 0 var(--cc-sp-7);
    padding-left: var(--cc-sp-5);
    border-left: 3px solid var(--cc-medium-gray);
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.cc-print-section { margin-bottom: var(--cc-sp-8); }

.cc-print-section-title {
    margin: 0 0 var(--cc-sp-5);
    padding-bottom: var(--cc-sp-2);
    border-bottom: 1px solid var(--cc-medium-gray);
    font-size: var(--cc-fs-sm);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    break-after: avoid;
}

.cc-print-empty {
    margin: 0;
    color: var(--cc-dark-gray);
    font-style: italic;
}

/* ── Steps ───────────────────────────────────────────────────────────────────
   Markers, nesting and counters come from .cc-error-steps in cc-errors.css;
   only the paper-specific bits live here. */
.cc-print-steps .cc-error-step {
    margin-bottom: var(--cc-sp-5);
    break-inside: avoid;
}

.cc-print-sheet .cc-error-step::before { color: var(--cc-black); }

.cc-print-step-line {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-sp-4);
}

.cc-print-step-text { flex: 1; }

/* Paper can't follow a link — print each external link's target after its text. */
.cc-print-sheet a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--cc-fs-xs);
    color: var(--cc-dark-gray);
    word-break: break-all;
}

/* Field-proven-fix signals, carried onto paper as static annotations in place
   of the live vote chips: which steps have fixed the fault, and which most. */
.cc-print-fix {
    flex: none;
    font-size: var(--cc-fs-xs);
    color: var(--cc-dark-gray);
    white-space: nowrap;
}

.cc-print-fix.is-best {
    color: var(--cc-black);
    font-weight: 700;
}

/* Empty box to tick off as a technician works the list. */
.cc-print-tick {
    flex: none;
    width: 0.9em;
    height: 0.9em;
    margin-top: 0.2em;
    border: 1px solid var(--cc-black);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.cc-print-foot {
    margin-top: var(--cc-sp-8);
    padding-top: var(--cc-sp-4);
    border-top: 1px solid var(--cc-light-gray);
    font-size: var(--cc-fs-xs);
    color: var(--cc-dark-gray);
}