/* ============================================================ QA test-run layer — styling for the auto-injected controls. Theme-aware via Material's colour-scheme attribute. ============================================================ */ :root { --qa-pass: #15803d; --qa-pass-bg: #eaf6ee; --qa-fail: #c02626; --qa-fail-bg: #fbecec; --qa-blocked: #b7791f; --qa-blocked-bg: #fbf4e5; } /* Map QA surfaces onto the brand / Material scheme tokens. These MUST be defined on the scheme element — Material puts data-md-color-scheme on , so resolving var(--ma-card-bg) at :root would find nothing and fall back to white in both light and dark. Defining them here resolves per-scheme at body scope; content inherits the correct value. */ :root, [data-md-color-scheme] { --qa-line: var(--ma-border, var(--md-default-fg-color--lightest)); --qa-surface: var(--ma-card-bg, var(--md-default-bg-color)); --qa-ink: var(--md-default-fg-color); --qa-ink-soft: var(--ma-muted, var(--md-default-fg-color--light)); } [data-md-color-scheme="slate"] { --qa-pass: #6cc98a; --qa-pass-bg: #16241b; --qa-fail: #f2807c; --qa-fail-bg: #271a1c; --qa-blocked: #e0be6f; --qa-blocked-bg: #29241a; } /* ---- Test-run panel ---- */ .qa-run { border: 1px solid var(--qa-line); border-radius: 10px; padding: 1rem 1.15rem; margin: 0 0 2rem; background: var(--qa-surface); display: grid; gap: 0.9rem; } .qa-run__title { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--md-primary-fg-color); font-weight: 700; margin: 0; } .qa-run__fields { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; } .qa-field-group { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; } .qa-field-group > label { color: var(--qa-ink-soft); font-weight: 600; white-space: nowrap; } .qa-field { min-width: 8rem; border-bottom: 1.5px solid var(--qa-line); padding: 0.1rem 0.2rem; outline: none; color: var(--qa-ink); } .qa-field:focus { border-bottom-color: var(--md-accent-fg-color); } .qa-field:empty::before { content: attr(data-ph); color: var(--qa-ink-soft); opacity: 0.6; } /* ---- Summary ---- */ .qa-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .qa-stat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--md-default-fg-color--lightest); color: var(--qa-ink-soft); font-variant-numeric: tabular-nums; } .qa-stat b { font-weight: 800; } .qa-stat--pass { background: var(--qa-pass-bg); color: var(--qa-pass); } .qa-stat--fail { background: var(--qa-fail-bg); color: var(--qa-fail); } .qa-stat--blocked { background: var(--qa-blocked-bg); color: var(--qa-blocked); } .qa-progress { flex: 1 1 8rem; height: 6px; border-radius: 999px; overflow: hidden; background: var(--md-default-fg-color--lightest); display: flex; min-width: 6rem; } .qa-progress span { display: block; height: 100%; } .qa-progress .p-pass { background: var(--qa-pass); } .qa-progress .p-fail { background: var(--qa-fail); } .qa-progress .p-blocked { background: var(--qa-blocked); } /* ---- Actions ---- */ .qa-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .qa-btn { font-size: 0.82rem; font-weight: 600; color: var(--qa-ink); background: var(--qa-surface); border: 1px solid var(--qa-line); border-radius: 8px; padding: 0.5rem 0.9rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .qa-btn:hover { border-color: var(--md-accent-fg-color); } .qa-btn:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; } .qa-btn--primary { color: #fff; background: var(--md-primary-fg-color); border-color: var(--md-primary-fg-color); } .qa-btn--primary:hover { filter: brightness(1.06); } /* ---- Heading status chip ---- */ .qa-badge { display: none; margin-left: 0.55rem; font-size: 0.62em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.16em 0.55em; border-radius: 999px; vertical-align: middle; } .qa-badge[data-state="pass"] { display: inline-block; background: var(--qa-pass-bg); color: var(--qa-pass); } .qa-badge[data-state="fail"] { display: inline-block; background: var(--qa-fail-bg); color: var(--qa-fail); } .qa-badge[data-state="blocked"] { display: inline-block; background: var(--qa-blocked-bg); color: var(--qa-blocked); } /* ---- Per-case result control ---- */ .qa-result { margin: 1.1rem 0 0.4rem; border: 1px solid var(--qa-line); border-left: 4px solid var(--qa-line); border-radius: 8px; padding: 0.8rem 0.95rem; background: var(--qa-surface); display: grid; gap: 0.7rem; } .qa-result[data-state="pass"] { border-left-color: var(--qa-pass); } .qa-result[data-state="fail"] { border-left-color: var(--qa-fail); } .qa-result[data-state="blocked"] { border-left-color: var(--qa-blocked); } .qa-result__label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qa-ink-soft); font-weight: 700; margin-bottom: 0.2rem; } .qa-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; } .qa-opt { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.75rem; border: 1.5px solid var(--qa-line); border-radius: 999px; cursor: pointer; user-select: none; color: var(--qa-ink-soft); transition: border-color 0.12s, background 0.12s, color 0.12s; } .qa-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .qa-opt:hover { border-color: var(--md-accent-fg-color); } .qa-opt .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid currentColor; } .qa-opt--pass.is-on { background: var(--qa-pass-bg); border-color: var(--qa-pass); color: var(--qa-pass); } .qa-opt--fail.is-on { background: var(--qa-fail-bg); border-color: var(--qa-fail); color: var(--qa-fail); } .qa-opt--blocked.is-on { background: var(--qa-blocked-bg); border-color: var(--qa-blocked); color: var(--qa-blocked); } .qa-opt.is-on .dot { background: currentColor; } .qa-opt input:focus-visible + .dot { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; } .qa-note { min-height: 2.6rem; border: 1px solid var(--qa-line); border-radius: 6px; padding: 0.5rem 0.65rem; font-size: 0.88rem; outline: none; color: var(--qa-ink); white-space: pre-wrap; } .qa-note:focus { border-color: var(--md-accent-fg-color); } .qa-note:empty::before { content: attr(data-ph); color: var(--qa-ink-soft); opacity: 0.6; } /* ============================================================ Print — clean, evidence-ready PDF ============================================================ */ @media print { .md-header, .md-sidebar, .md-footer, .md-nav, .md-content__button, .md-source-file, .qa-actions, .md-typeset__scrollwrap .md-typeset__table + * { display: none !important; } .md-main__inner, .md-content, .md-content__inner { margin: 0 !important; max-width: 100% !important; } .qa-run { break-inside: avoid; } .qa-result { break-inside: avoid; } h3 { break-after: avoid; } /* Make entered text unmistakable on paper */ .qa-field, .qa-note { border-color: #999 !important; } .qa-field:empty::before, .qa-note:empty::before { content: ""; } .qa-opt { color: #333 !important; } .qa-opt:not(.is-on) { opacity: 0.45; } }