/* DNS report tool. Brand accent colors come from config via CSS variables. */
:root {
  --accent: #2563eb;
  --accent-text: #ffffff;
  --link: #2563eb;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #1c2430;
  --muted: #5b6675;
  --border: #dde2e8;
  --pass: #178a43;
  --info: #2563eb;
  --warn: #b97a08;
  --error: #c92a2a;
  --skipped: #6b7280;
  --inconclusive: #7e57c2;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --panel-2: #eef1f5;
  --tint-ok-bg: #e7f6ec; --tint-ok-border: #b7e2c4;
  --tint-warn-bg: #fdf3e0; --tint-warn-border: #eccf9a; --tint-warn-text: #6b5a33;
  --tint-err-bg: #fdecec;
  --tint-info-bg: #eaf1ff; --tint-info-border: #c3d6f7;
  color-scheme: light;
}
/* Dark palette: applied when the visitor chose Dark, or chose Auto (the
   default) and the system prefers dark. The brand accent is unchanged. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] {
  --bg: #0f1419; --panel: #171d26; --panel-2: #1f2733; --text: #e6e9ee; --muted: #9aa4b2; --border: #2b3441;
  --link: #82aaff;
  --pass: #3fbf6f; --info: #6ea0ff; --warn: #e0a53a; --error: #f27171; --skipped: #8b93a1; --inconclusive: #b39ddb;
  --tint-ok-bg: #12291b; --tint-ok-border: #1f5a33;
  --tint-warn-bg: #2b2210; --tint-warn-border: #6b5320; --tint-warn-text: #e6c98a;
  --tint-err-bg: #331a1a;
  --tint-info-bg: #16233a; --tint-info-border: #2a4a80;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1419; --panel: #171d26; --panel-2: #1f2733; --text: #e6e9ee; --muted: #9aa4b2; --border: #2b3441;
    --link: #82aaff;
    --pass: #3fbf6f; --info: #6ea0ff; --warn: #e0a53a; --error: #f27171; --skipped: #8b93a1; --inconclusive: #b39ddb;
    --tint-ok-bg: #12291b; --tint-ok-border: #1f5a33;
    --tint-warn-bg: #2b2210; --tint-warn-border: #6b5320; --tint-warn-text: #e6c98a;
    --tint-err-bg: #331a1a;
    --tint-info-bg: #16233a; --tint-info-border: #2a4a80;
  }
}
.theme-select { font: inherit; font-size: 0.8rem; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 0.2rem 0.4rem; }
.theme-select:hover { color: var(--text); border-color: var(--accent); }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.mono, pre, code { font-family: var(--mono); }
a { color: var(--link); }
a:visited { color: var(--link); }
a:hover { text-decoration: underline; }

.site-header { background: var(--panel); border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: baseline; gap: 0.9rem; padding-top: 0.8rem; padding-bottom: 0.8rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.brand-logo { height: 1.6rem; width: auto; }
.tagline { color: var(--muted); font-size: 0.92rem; }

.hero { padding: 2.5rem 0 1.5rem; max-width: 44rem; }
.hero.maintenance { padding-top: 3.5rem; }
.hero h1 { margin: 0 0 0.4rem; font-size: 1.7rem; letter-spacing: -0.02em; }
.lede { color: var(--muted); margin: 0 0 1.2rem; }
.domain-form { display: flex; gap: 0.5rem; max-width: 30rem; }
.domain-form input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; font-size: 1.05rem; font-family: var(--mono); border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
.domain-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.domain-form button { padding: 0.6rem 1.1rem; font-size: 1rem; font-weight: 600; color: var(--accent-text); background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; }
.domain-form button:hover { filter: brightness(1.08); }
/* Compact "check a domain" bar under the header on every public page but home. */
.report-bar { border-bottom: 1px solid var(--border); background: var(--panel-2); }
.report-bar:not(:has(.report-bar-form)) { display: none; }
.report-bar-form { display: flex; gap: 0.5rem; align-items: center; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.report-bar-label { font-size: 0.9rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.report-bar-form input { flex: 1; min-width: 0; padding: 0.4rem 0.6rem; font-size: 0.95rem; font-family: var(--mono); border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.report-bar-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.report-bar-form button { padding: 0.4rem 0.9rem; font-size: 0.92rem; font-weight: 600; color: var(--accent-text); background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.report-bar-form button:hover { filter: brightness(1.08); }
@media (max-width: 560px) { .report-bar-label { display: none; } }
.form-error { color: var(--error); font-weight: 500; }

/* Homepage landing sections (below the search box). */
.landing { max-width: 60rem; margin: 2.5rem 0 1rem; }
.landing-h { font-size: 1.3rem; margin: 2rem 0 0.3rem; letter-spacing: -0.01em; }
.landing-h:first-child { margin-top: 0; }
.landing-lede { color: var(--muted); margin: 0 0 1rem; }
.landing-more { margin: 1rem 0 0; }
.check-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.check-cat { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 0.8rem 0.9rem; }
.check-cat h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.check-cat p { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.check-examples { margin: 0; padding-left: 1.1rem; font-size: 0.86rem; color: var(--text); }
.check-examples li { margin: 0.1rem 0; }
.how-steps { counter-reset: step; list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.7rem; }
.how-steps li { position: relative; padding-left: 2.4rem; }
.how-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent-text); background: var(--accent); border-radius: 50%; font-size: 0.95rem; }
.how-steps h3 { margin: 0.1rem 0 0.2rem; font-size: 1rem; }
.how-steps p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.faq { display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.faq-item { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 0.2rem 0.9rem; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 0.55rem 0; list-style-position: inside; }
.faq-item[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
.faq-item p { margin: 0 0 0.7rem; color: var(--muted); line-height: 1.6; }

/* Recently checked (per-browser, localStorage). */
.recent-checks { max-width: 60rem; margin: 1.8rem 0 0; }
.recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.recent-head h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.recent-scope { font-size: 0.78rem; font-weight: 400; color: var(--muted); cursor: help; border-bottom: 1px dotted var(--border); }
.recent-clear { font: inherit; font-size: 0.82rem; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.recent-clear:hover { color: var(--accent); }
.recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.recent-list li { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.recent-domain { font-family: var(--mono); font-weight: 600; }
.recent-meta { color: var(--muted); font-size: 0.84rem; }

.report-search { display: flex; gap: 0.5rem; max-width: 28rem; margin: 1.5rem 0 0.2rem; }
.report-search input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; font-size: 1rem; font-family: var(--mono); border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.report-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.report-search button { padding: 0.6rem 1.1rem; font-size: 1rem; font-weight: 600; color: var(--accent-text); background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; }
.report-search button:hover { filter: brightness(1.08); }
.report-head { padding: 1rem 0 0.4rem; }
.report-head h1 { margin: 0 0 0.3rem; font-size: 1.45rem; }
.report-meta { color: var(--muted); margin: 0 0 0.6rem; font-size: 0.94rem; }
.notice-banner { background: var(--tint-warn-bg); border: 1px solid var(--warn); border-radius: 6px; padding: 0.5rem 0.8rem; margin: 0.4rem 0 0.8rem; font-size: 0.94rem; }
.cache-note, .budget-note { display: inline-block; }
.budget-note { color: var(--warn); font-weight: 600; }
.report-summary { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin: 0 0 1rem; }
.pill { padding: 0.1rem 0.6rem; border-radius: 99px; font-size: 0.85rem; font-weight: 600; background: var(--panel); border: 1px solid var(--border); }
.pill-pass { color: var(--pass); } .pill-info { color: var(--info); } .pill-warn { color: var(--warn); }
.pill-error { color: var(--error); border-color: var(--error); } .pill-skipped { color: var(--skipped); }
.pill-inconclusive { color: var(--inconclusive); border-color: var(--inconclusive); }
.rerun, .json-link { font-size: 0.9rem; color: var(--link); }

/* Sticky mini-summary: condensed domain + status pills, revealed once the main
   summary scrolls off the top. Its pills jump to the first row of each status. */
.sticky-summary { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: 0 1px 6px rgba(0,0,0,0.08); transform: translateY(-100%); transition: transform 0.16s ease; }
.sticky-summary.visible { transform: translateY(0); }
.sticky-summary-inner { max-width: 1100px; margin: 0 auto; padding: 0.4rem 1rem; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.sticky-domain { font-weight: 700; font-size: 0.95rem; }
.sticky-pills { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sticky-pills .pill { cursor: pointer; }
.sticky-pills .pill:hover { filter: brightness(1.06); border-color: var(--accent); }
.sticky-pills .pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .sticky-summary { transition: none; } }
.json-link { margin-left: 0.4rem; }

/* Fresh / cached badge on the report heading. */
.freshness { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.12rem 0.5rem; border-radius: 99px; vertical-align: 0.18rem; margin-left: 0.4rem; white-space: nowrap; }
.freshness.fresh { color: var(--pass); background: var(--tint-ok-bg); border: 1px solid var(--tint-ok-border); }
.freshness.cached { color: var(--warn); background: var(--tint-warn-bg); border: 1px solid var(--tint-warn-border); }
.freshness.snapshot { color: var(--info); background: var(--tint-info-bg); border: 1px solid var(--tint-info-border); }
.note-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.5rem 0 0.3rem; }
.note-btn { display: inline-block; padding: 0.3rem 0.8rem; font: inherit; font-size: 0.88rem; font-weight: 600; line-height: 1.3; color: var(--accent); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; text-decoration: none; }
.note-btn:hover { border-color: var(--accent); text-decoration: none; }
.note-btn:disabled { opacity: 0.6; cursor: default; }
.note-text { margin: 0; }
.note-hint { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); }
.compare-slot { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1rem; margin: 0 0 1.2rem; }
.cmp-title { margin: 0 0 0.2rem; font-size: 1.05rem; }
.cmp-sub { color: var(--muted); font-size: 0.86rem; margin: 0.15rem 0; }
.cmp-none { color: var(--pass); font-weight: 600; margin: 0.4rem 0; }
.cmp-error { color: var(--error); margin: 0.3rem 0; }
.cmp-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.cmp-list li { padding: 0.25rem 0; border-top: 1px solid var(--border); font-size: 0.92rem; }
.cmp-group { border-top: 0 !important; margin-top: 0.5rem; font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.cmp-group:first-child { margin-top: 0; }
.cmp-cat { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--panel-2); border-radius: 4px; padding: 0 0.35rem; margin-right: 0.25rem; vertical-align: 0.06rem; }
.cmp-change { float: right; font-family: var(--mono); font-size: 0.82rem; font-weight: 600; }
.cmp-improved .cmp-change { color: var(--pass); }
.cmp-regressed .cmp-change { color: var(--error); }
.cmp-changed .cmp-change, .cmp-added .cmp-change, .cmp-removed .cmp-change { color: var(--muted); }
.share-bar { margin: 0 0 1.2rem; }
.share-open { padding: 0.4rem 0.95rem; font-size: 0.92rem; font-weight: 600; color: var(--accent); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.share-open:hover { border-color: var(--accent); }
.refresh-line { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }
.refresh-line .note-hint { color: var(--muted); }
.share-dialog { border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.2rem 1.2rem; max-width: 40rem; width: calc(100% - 2rem); background: var(--panel); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,0.18); }
.share-dialog::backdrop { background: rgba(15,20,30,0.45); }
.share-dialog-title { margin: 0 0 0.8rem; font-size: 1.1rem; }
.share-dialog-x { margin: 0; position: absolute; top: 0.6rem; right: 0.7rem; }
.share-dialog-x button { background: transparent; border: 0; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.1rem 0.3rem; }
.share-dialog-x button:hover { color: var(--text); }
.share-dialog { position: relative; }
.share-dialog::backdrop { transition: opacity 0.5s ease; }
.share-dialog.closing::backdrop { opacity: 0; }
.share-copy.copied { background: var(--pass, #178a43); color: #fff; }
.share-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; max-width: 42rem; }
.share-opt { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin: 0; padding: 0.85rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.share-opt-head { display: flex; align-items: center; gap: 0.45rem; }
.share-opt-icon { display: inline-flex; color: var(--accent); }
.share-opt-icon svg { width: 1.1rem; height: 1.1rem; }
.share-opt-title { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.share-opt-hint { color: var(--muted); font-size: 0.82rem; line-height: 1.45; margin: 0; flex: 1 1 auto; }
.share-btn { width: 100%; padding: 0.45rem 0.9rem; font-size: 0.9rem; font-weight: 600; border-radius: 6px; cursor: pointer; background: transparent; color: var(--accent); border: 1px solid var(--border); }
.share-btn:hover { border-color: var(--accent); }
.share-btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.share-btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
@media (max-width: 560px) { .share-opts { grid-template-columns: 1fr; } }
.share-opt-wide { max-width: 42rem; margin-top: 0.8rem; }
.share-copy-row { display: flex; gap: 0.5rem; }
.share-copy-row .share-btn { width: auto; flex: 1 1 0; }
.share-btn.copied { color: var(--pass); border-color: var(--tint-ok-border); }
.fresh-prompt { margin: 0 0 0.8rem; font-size: 0.92rem; color: var(--muted); }
.fresh-prompt.emphasise { background: var(--tint-warn-bg); border: 1px solid var(--tint-warn-border); border-radius: 6px; padding: 0.45rem 0.7rem; color: var(--text); }
.fresh-prompt .rerun { margin-left: 0.3rem; font-weight: 600; }
.fresh-prompt.emphasise .note-hint { color: var(--tint-warn-text); }

/* Three-view toggle: Issues / Summary / Details. Pure CSS via three radios,
   so it works with no JavaScript; JS only remembers the last choice. */
.view-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.view-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.view-toggle-queries { margin-left: auto; padding: 0.4rem 0.9rem; font-size: 0.88rem; font-weight: 600; color: var(--accent); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.view-toggle-queries:hover { border-color: var(--accent); }
.view-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-tabs label { padding: 0.4rem 0.95rem; cursor: pointer; font-size: 0.92rem; font-weight: 600; color: var(--muted); background: var(--panel); border-left: 1px solid var(--border); display: inline-flex; align-items: center; gap: 0.4rem; user-select: none; }
.view-tabs label:first-of-type { border-left: 0; }
#view-issues:checked ~ .view-bar label[for="view-issues"],
#view-summary:checked ~ .view-bar label[for="view-summary"],
#view-details:checked ~ .view-bar label[for="view-details"] { background: var(--accent); color: var(--accent-text); }
#view-issues:focus ~ .view-bar .view-tabs, #view-summary:focus ~ .view-bar .view-tabs, #view-details:focus ~ .view-bar .view-tabs { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-count { font-size: 0.72rem; font-weight: 700; padding: 0 0.4rem; border-radius: 99px; background: var(--muted); color: #fff; }
.tab-count-error { background: var(--error); }
.tab-count-warn { background: var(--warn); }
.tab-count-zero { background: var(--border); color: var(--muted); }
#view-issues:checked ~ .view-bar label[for="view-issues"] .tab-count { background: rgba(255,255,255,0.28); }

/* Issues view: its own block, not the big table. Hidden unless Issues chosen. */
.issues-block { display: none; }
#view-issues:checked ~ .issues-block { display: block; margin-bottom: 2.5rem; }
#view-issues:checked ~ table.report { display: none; }
.issue-list { display: flex; flex-direction: column; gap: 0.6rem; }
.issue { display: flex; gap: 0.7rem; padding: 0.7rem 0.9rem; background: var(--panel); border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; }
.issue-error { border-left-color: var(--error); }
.issue-warn { border-left-color: var(--warn); }
.issue-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 0.15rem; }
.issue-icon.status-error { color: var(--error); } .issue-icon.status-warn { color: var(--warn); }
.issue-icon.status-warn svg path:first-child { fill: none; }
.issue-body { min-width: 0; }
.issue-head { font-weight: 600; font-size: 0.98rem; margin-bottom: 0.15rem; }
.issue-cat { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--panel-2); border-radius: 4px; padding: 0 0.35rem; vertical-align: 0.08rem; margin-right: 0.2rem; }
.issue-msg { margin: 0.1rem 0 0; font-size: 0.94rem; }
.all-clear { display: flex; gap: 0.7rem; align-items: center; background: var(--tint-ok-bg); border: 1px solid var(--tint-ok-border); border-radius: 8px; padding: 0.9rem 1rem; }
.all-clear .ac-icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--pass); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.all-clear .ac-sub { color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
.everything-else { margin-top: 1rem; }
.everything-else summary { cursor: pointer; color: var(--muted); font-size: 0.92rem; font-weight: 600; }
.everything-else .else-table { margin-top: 0.6rem; margin-bottom: 0; }
.else-table td.status { width: 2.4rem; }

/* Details view reveals the per-server breakdown; Summary hides it. */
.row-verbose { display: none; }
#view-details:checked ~ table.report .row-verbose { display: block; }

/* Per-row dig detail: which server was asked what, as reproducible dig commands.
   Details view only. */
.dig-panel { display: none; margin-top: 0.4rem; font-size: 0.82rem; }
#view-details:checked ~ table.report .dig-panel { display: block; }
.dig-panel > summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.dig-panel[open] > summary { margin-bottom: 0.4rem; }
/* Terminal-style block: one dig command per line, server as a trailing comment. */
.dig-block { margin: 0; padding: 0.55rem 0.7rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; font-family: var(--mono); font-size: 0.82rem; line-height: 1.7; overflow-x: auto; white-space: pre; }
.dig-cmd { color: var(--text); }
.dig-srv { color: var(--muted); }
.dig-note { margin: 0.4rem 0 0.1rem; color: var(--muted); }
.dig-note code { font-family: var(--mono); }

/* "Learn more" chip into the knowledgebase (report rows): a small, quiet info
   pill so it reads as a secondary aid, not a stray link. */
.learn-more { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.35rem 0 0.15rem; padding: 0.12rem 0.55rem 0.12rem 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--info); background: var(--tint-info-bg); border: 1px solid var(--tint-info-border); border-radius: 99px; text-decoration: none; }
.learn-more:hover { border-color: var(--info); text-decoration: none; }
.learn-more svg { flex: none; opacity: 0.85; }

/* Knowledgebase public pages. */
.kb-breadcrumb { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.6rem; }
.kb-breadcrumb a { color: var(--link); }
.kb-cat-list, .kb-article-list { list-style: none; padding: 0; margin: 0.4rem 0 1rem; display: grid; gap: 0.35rem; }
/* Hierarchical KB tree (index). */
.kb-tree { list-style: none; margin: 0.2rem 0; padding: 0; }
.kb-tree-root { margin: 0.6rem 0 1rem; }
.kb-tree .kb-tree { margin-left: 1.1rem; padding-left: 0.8rem; border-left: 1px solid var(--border); }
.kb-tree-cat > .kb-tree-catname { font-weight: 700; }
.kb-cat > summary { cursor: pointer; list-style: none; padding: 0.1rem 0; }
.kb-cat > summary::-webkit-details-marker { display: none; }
.kb-cat > summary::before { content: "\25B8"; display: inline-block; width: 1em; color: var(--muted); transition: transform 0.12s; }
.kb-cat[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .kb-cat > summary::before { transition: none; } }
.kb-cat > summary .kb-tree-catname { font-weight: 700; }
.kb-tree-catlink { color: var(--muted); text-decoration: none; font-size: 0.9em; }
.kb-tree-catlink:hover { color: var(--link); }
.kb-tree-controls { display: flex; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.2rem; font-size: 0.85rem; color: var(--muted); }
.kb-tree-controls button { font: inherit; color: var(--link); background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0; }
.kb-tree-controls button:hover { text-decoration: underline; }
.kb-tree-article { margin: 0.15rem 0; }
.kb-tree li { margin: 0.15rem 0; }
/* Navigation link lists (KB index tree, category/article lists, breadcrumb): keep
   the color, but underline only on hover. Inline links inside article prose
   (.kb-body a) keep their resting underline, where it does real work. */
.kb-tree-article a, .kb-cat-list a, .kb-article-list a, .kb-breadcrumb a { text-decoration: none; }
.kb-tree-article a:hover, .kb-cat-list a:hover, .kb-article-list a:hover, .kb-breadcrumb a:hover { text-decoration: underline; }
.kb-draft-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--warn); background: var(--tint-warn-bg); border: 1px solid var(--tint-warn-border); border-radius: 99px; padding: 0.02rem 0.4rem; vertical-align: 0.08em; }
.kb-draft-badge.members { color: var(--info); background: var(--tint-info-bg); border-color: var(--tint-info-border); }
.kb-admin-note { background: var(--tint-info-bg); border: 1px solid var(--tint-info-border); border-radius: 8px; padding: 0.5rem 0.8rem; font-size: 0.9rem; margin: 0 0 1rem; }
/* KB search box + results. */
.kb-searchbox { display: flex; gap: 0.5rem; max-width: 30rem; margin: 0 0 1.2rem; }
.kb-searchbox input { flex: 1; min-width: 0; padding: 0.5rem 0.7rem; font-size: 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.kb-searchbox input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.kb-searchbox button { padding: 0.5rem 1rem; font-weight: 600; color: var(--accent-text); background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; }
.kb-results { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.9rem; }
.kb-result-title { font-weight: 600; font-size: 1.05rem; }
.kb-result-excerpt { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.kb-cat-child { margin-left: 1.2rem; }
.kb-cat-desc { display: block; font-size: 0.85rem; color: var(--muted); }
.kb-meta { font-size: 0.85rem; color: var(--muted); margin: 0 0 1rem; }
.kb-admin-edit { margin: 0 0 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
.kb-admin-edit .kb-admin-edit-btn,
.kb-admin-edit .kb-admin-edit-btn:link,
.kb-admin-edit .kb-admin-edit-btn:visited,
.kb-admin-edit .kb-admin-edit-btn:hover { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--accent-text, #fff); background: var(--accent); border: 0; border-radius: 6px; text-decoration: none; }
.kb-admin-edit .kb-admin-edit-btn:hover { filter: brightness(1.08); }
.kb-admin-edit-note { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--border); border-radius: 99px; padding: 0.05rem 0.4rem; }
.kb-related { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.kb-body img { max-width: 100%; height: auto; cursor: zoom-in; border-radius: 6px; }
.kb-body a img { cursor: pointer; }
.kb-preview-banner { background: var(--tint-warn-bg); border: 1px solid var(--tint-warn-border); color: var(--tint-warn-text); border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0 0 1rem; font-size: 0.92rem; }
/* Lightbox for article images. */
.kb-lightbox { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); padding: 1.5rem; }
.kb-lightbox.open { display: flex; }
.kb-lightbox img { max-width: 100%; max-height: 100%; border-radius: 4px; cursor: zoom-out; }
.kb-lightbox-x { position: fixed; top: 0.6rem; right: 0.9rem; font-size: 2rem; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }
.kb-body pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.8rem; overflow-x: auto; }
.kb-body code { font-family: var(--mono); }
.kb-body table { border-collapse: collapse; }
.kb-body th, .kb-body td { border: 1px solid var(--border); padding: 0.3rem 0.6rem; text-align: left; }

/* Reader modal (report "Learn more"): a titled panel with a scrolling body and
   a quiet footer link to the full article. */
/* Only a native <dialog> opened with showModal() gets [open]; a closed one stays
   display:none (UA default) so it never renders blank in the page flow.
   Body carries .prose too; selectors here are raised to .kb-modal-body[.prose]
   so its padding and heading sizes win over the generic .prose rules. */
.kb-modal { border: 1px solid var(--border); border-radius: 14px; padding: 0; max-width: 40rem; width: calc(100% - 2rem); max-height: 85vh; background: var(--panel); color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,0.35); overflow: hidden; }
.kb-modal[open] { display: flex; flex-direction: column; }
.kb-modal::backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.kb-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem 1rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--panel); }
.kb-modal-title { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0; }
.kb-modal-xform { margin: 0; line-height: 0; }
.kb-modal-x { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; flex: none; }
.kb-modal-x:hover { color: var(--text); background: var(--panel-2); }
.kb-modal-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kb-modal .kb-modal-body { padding: 1.5rem 1.75rem 1.75rem; overflow-y: auto; }
.kb-modal-body.prose { max-width: none; }
.kb-modal-body > * { max-width: 40rem; }
.kb-modal-body > :first-child { margin-top: 0; }
.kb-modal-body > :last-child { margin-bottom: 0; }
.kb-modal-body.prose h1, .kb-modal-body.prose h2, .kb-modal-body.prose h3 { line-height: 1.3; font-weight: 700; margin: 1.6rem 0 0.5rem; }
.kb-modal-body.prose h1 { font-size: 1.3rem; }
.kb-modal-body.prose h2 { font-size: 1.1rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.kb-modal-body.prose h3 { font-size: 0.98rem; color: var(--muted); text-transform: none; }
.kb-modal-body.prose p, .kb-modal-body.prose li { line-height: 1.65; }
.kb-modal-body.prose p { margin: 0 0 0.9rem; }
.kb-modal-body.prose ul, .kb-modal-body.prose ol { padding-left: 1.3rem; margin: 0 0 0.9rem; }
.kb-modal-body.prose li { margin: 0.3rem 0; }
.kb-modal-body.prose pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1rem; overflow-x: auto; font-size: 0.82rem; line-height: 1.5; margin: 0 0 1rem; }
.kb-modal-body.prose code { font-family: var(--mono); font-size: 0.85em; }
.kb-modal-body.prose :not(pre) > code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.35em; }
.kb-modal-body.prose img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); }
.kb-modal-body.prose a { color: var(--accent); }
.kb-modal-loading { color: var(--muted); }
.kb-modal-foot { display: flex; justify-content: flex-end; align-items: center; padding: 0.9rem 1.5rem; border-top: 1px solid var(--border); background: var(--panel-2); }
.kb-modal-open { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; font-size: 0.95rem; font-weight: 600; line-height: 1.2; color: var(--accent-text); background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; text-decoration: none; cursor: pointer; }
.kb-modal-open:hover { filter: brightness(1.08); text-decoration: none; }
.kb-modal-open:visited { color: var(--accent-text); }
.kb-modal-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

table.report { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 2.5rem; }
table.report th, table.report td { text-align: left; vertical-align: top; padding: 0.55rem 0.7rem; border-top: 1px solid var(--border); }
table.report thead th { background: var(--panel-2); border-top: 0; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
tbody.category { border-top: 2px solid var(--border); }
.cat-name { font-weight: 700; white-space: nowrap; width: 4.5rem; background: var(--panel-2); font-size: 0.9rem; }
.col-status, td.status { width: 2.4rem; white-space: nowrap; text-align: center; }
td.status svg { width: 1.1rem; height: 1.1rem; vertical-align: -0.18rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
td.status-warn svg path:first-child { fill: none; }
/* Icon-only column: keep the label for screen readers and hover title. */
td.status .status-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
td.status-pass { color: var(--pass); } td.status-info { color: var(--info); } td.status-warn { color: var(--warn); }
td.status-error { color: var(--error); } td.status-skipped { color: var(--skipped); } td.status-inconclusive { color: var(--inconclusive); }
.test-name { width: 11rem; font-weight: 600; font-size: 0.92rem; }
/* A row can sit under the sticky summary bar, so keep breathing room when a
   pill or a deep link jumps to it. */
.check-row { scroll-margin-top: 5rem; }
.check-row.row-target > td, .check-row.row-target > th { background: var(--tint-info-bg); transition: background 0.3s; }
.col-status { text-align: center; }
.skip-names { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--muted); }
.skip-names summary { cursor: pointer; }
.skip-names[open] summary { margin-bottom: 0.25rem; }
.info p { margin: 0 0 0.35rem; font-size: 0.94rem; }
pre.details .dl { display: block; padding-left: 2ch; text-indent: -2ch; }
pre.details { margin: 0.3rem 0 0; padding: 0.45rem 0.6rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }

.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.88rem; }
.site-footer .wrap { padding: 1rem; }

@media (max-width: 760px) {
  table.report, table.report thead, table.report tbody, table.report tr, table.report th, table.report td { display: block; width: auto; }
  table.report thead { display: none; }
  .cat-name { width: auto; background: var(--panel-2); }
  table.report td { border-top: 0; padding: 0.3rem 0.7rem; }
  table.report tr { border-top: 1px solid var(--border); padding: 0.3rem 0; }
  .test-name { width: auto; padding-bottom: 0; }
  /* No column header on the stacked view, so show the status word next to the
     icon: status must not be conveyed by colour alone. */
  td.status { text-align: left; }
  td.status .status-label { position: static; width: auto; height: auto; margin: 0 0 0 0.4rem; padding: 0; clip: auto; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: uppercase; }
}

.prose { max-width: 44rem; padding: 1.5rem 0; }
.prose h1 { font-size: 1.6rem; }
.prose h2 { font-size: 1.1rem; margin-top: 1.6rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: 0.25rem 0; }

.test-banner { background: var(--tint-warn-bg); border: 1px solid var(--tint-warn-border); border-radius: 6px; padding: 0.45rem 0.7rem; font-size: 0.9rem; }
.challenge-note { color: var(--muted); font-size: 0.85rem; }
.share-error { color: var(--error, #c92a2a); font-size: 0.85rem; margin: 0.5rem 0 0; }

/* Soft-navigation progress bar: a thin sweeping line at the very top while a page is fetched. */
.nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 50; }
.nav-progress span { display: block; height: 100%; width: 30%; background: var(--accent); border-radius: 0 2px 2px 0; transform: translateX(-100%); }
html.nav-loading .nav-progress { opacity: 1; }
html.nav-loading .nav-progress span { animation: nav-sweep 1.2s ease-in-out infinite; }
html.nav-loading main.wrap { opacity: 0.6; transition: opacity 0.3s ease 0.3s; }
@keyframes nav-sweep { 0% { transform: translateX(-100%); } 60% { transform: translateX(250%); } 100% { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { html.nav-loading .nav-progress span { animation: none; transform: translateX(0); width: 100%; } }

/* Signed-in admin strip in the public header. */
.site-header .spacer { flex: 1; }
.admin-strip { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.admin-strip .maint-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.admin-strip .maint-pill { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.45rem; border-radius: 99px; }
.admin-strip .maint-pill.on { color: #fff; background: var(--error); }
.admin-strip .maint-pill.off { color: var(--pass); background: var(--tint-ok-bg); border: 1px solid var(--tint-ok-border); }
.admin-strip .maint-btn { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 6px; border: 0; background: var(--accent); color: var(--accent-text); cursor: pointer; }
.admin-strip .maint-btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.admin-strip .maint-btn.ghost:hover { color: var(--text); border-color: var(--accent); }
.admin-strip .who { color: var(--muted); }
.admin-strip a.admin-link { text-decoration: none; display: inline-block; line-height: 1.3; }
.admin-strip a.admin-link:hover { text-decoration: none; filter: brightness(1.08); }

/* View transitions for soft navigation (cross-fade; no-ops where unsupported). */
main.wrap { view-transition-name: site-main; }
::view-transition-old(site-main), ::view-transition-new(site-main) { animation-duration: 0.28s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Challenge page: the Continue button fades in once the widget passes. */
.challenge-form #challenge-continue { transition: opacity 0.5s ease, transform 0.5s ease; }
.challenge-form #challenge-continue.pending { opacity: 0; transform: translateY(4px); pointer-events: none; }
.note-btn:disabled { opacity: 0.55; cursor: default; }

/* Contact page */
.contact-form { display: grid; gap: 0.3rem; max-width: 40rem; }
.contact-form label { font-weight: 600; margin-top: 0.6rem; }
.contact-form input, .contact-form textarea { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form button { margin-top: 0.9rem; justify-self: start; }
.contact-form .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-errors { margin: 0.5rem 0; }
.contact-done { text-align: center; padding: 2rem 0; }
.contact-done .contact-icon { display: inline-block; color: var(--accent); }
.contact-done.appear { animation: contact-in 0.6s ease; }
#contact-form-wrap.fade-out { opacity: 0; transition: opacity 0.4s ease; }
@keyframes contact-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.contact-done { view-transition-name: contact-done; }

/* Feedback widget: a vertical tab on the right edge that opens an inline form. */
.feedback-widget { position: fixed; right: 0; top: 42%; z-index: 45; }
/* Vertical tab: rounded on the inner (page-facing) edge, flush against the
   viewport edge. The 180deg rotation swaps left/right, so the radius is set on
   the pre-rotation right corners to land on the visible left edge. */
.feedback-tab { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0.9rem 0.4rem; font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; color: var(--accent-text); background: var(--accent); border: 0; border-radius: 0 7px 7px 0; cursor: pointer; box-shadow: -2px 2px 8px rgba(0,0,0,0.18); }
.feedback-tab:hover { filter: brightness(1.08); }
.feedback-panel { position: fixed; right: 0.6rem; top: 50%; transform: translateY(-50%); width: min(340px, calc(100vw - 1.2rem)); max-height: 82vh; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.24); padding: 0.9rem 1rem 1rem; z-index: 46; }
.feedback-widget:has(.feedback-panel:not([hidden])) .feedback-tab { display: none; }
.feedback-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.feedback-x { background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 0.2rem; }
.feedback-x:hover { color: var(--text); }
.feedback-form { display: grid; gap: 0.3rem; }
.feedback-l { font-size: 0.85rem; font-weight: 600; margin-top: 0.3rem; }
.feedback-opt { font-weight: 400; color: var(--muted); }
.feedback-intro { font-size: 0.88rem; color: var(--muted); margin: 0 0 0.6rem; line-height: 1.5; }
.feedback-form textarea, .feedback-form input[type="email"], .feedback-form select { font: inherit; width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.feedback-form textarea { resize: vertical; min-height: 5rem; }
.feedback-captcha { margin-top: 0.5rem; min-height: 0; }
.feedback-captcha:empty { margin-top: 0; }
.feedback-submit { margin-top: 0.5rem; padding: 0.5rem 0.9rem; font: inherit; font-weight: 600; color: var(--accent-text); background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; }
.feedback-submit:hover { filter: brightness(1.08); }
.feedback-submit:disabled { opacity: 0.6; cursor: default; }
.feedback-errors { background: var(--tint-err-bg); border: 1px solid var(--error); border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.88rem; color: var(--text); margin-bottom: 0.3rem; }
.feedback-done { padding: 0.6rem 0; }
.feedback-widget .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .feedback-panel { right: 0.4rem; left: 0.4rem; width: auto; } }
.site-header .header-link { font-size: 0.9rem; color: var(--muted); text-decoration: none; margin-left: auto; }
.site-header .header-link:hover { color: var(--accent); }
.site-header .header-link + .spacer { display: none; }
.site-header .header-link ~ .admin-strip { margin-left: 0.9rem; }

/* Stats for nerds: a corner pill for signed-in admins; fixed, so the page layout is untouched. */
.nerd { position: fixed; right: 0.8rem; bottom: 0.8rem; z-index: 40; font-size: 0.8rem; }
.nerd-pill { font: inherit; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 99px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.nerd-pill[aria-expanded="true"], .nerd-pill:hover { color: var(--accent); border-color: var(--accent); }
.nerd-panel { position: absolute; right: 0; bottom: 2.2rem; width: min(34rem, calc(100vw - 1.6rem)); max-height: 70vh; overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 0.7rem 0.9rem; }
.nerd-head { font-weight: 700; margin-bottom: 0.4rem; }
.nerd-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 99px; border: 1px solid var(--accent); color: var(--accent); }
.nerd-table { width: 100%; border-collapse: collapse; margin: 0.3rem 0; }
.nerd-table th, .nerd-table td { text-align: left; padding: 0.25rem 0.4rem; border-top: 1px solid var(--border); vertical-align: top; }
.nerd-table thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; }
.nerd-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nerd-table .hot { color: var(--error); font-weight: 700; }
.nerd-sub { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 0.15rem; }
.nerd-block { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--border); }
.nerd-block .ok { color: var(--pass); font-weight: 700; }
.nerd-err { color: var(--error); }
@media print { .nerd { display: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Floating back-to-top control (created by nav.js). Always visible as a base
   fallback; when nav.js adds .smart it fades in only after scrolling down. */
.back-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--accent-text); background: var(--accent); border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.22); }
.back-to-top:hover { filter: brightness(1.08); }
.back-to-top svg { width: 1.2rem; height: 1.2rem; }
.back-to-top.smart { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.back-to-top.smart.visible { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .back-to-top.smart { transition: none; } }
/* A visible focus ring for keyboard users on every interactive element that
   does not already define its own, so nothing is reachable-but-invisible. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.site-header .theme-label { margin-left: auto; }
.site-header .spacer + .admin-strip + .theme-label, .site-header .header-link + .theme-label, .site-header .admin-strip + .theme-label { margin-left: 0.6rem; }

/* Debug trace panel (admin ?debug) */
.debug-panel { margin: 0.6rem 0 1.4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); overflow: hidden; }
.debug-panel > summary { cursor: pointer; padding: 0.6rem 0.9rem; font-weight: 600; font-size: 0.94rem; background: var(--panel-2); list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.debug-panel > summary::-webkit-details-marker { display: none; }
.debug-panel > summary::before { content: "\25B8"; color: var(--muted); font-size: 0.8rem; }
.debug-panel[open] > summary::before { content: "\25BE"; }
.dbg-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0 0.3rem; }
.debug-body { padding: 0.9rem; }
.dbg-lead { margin: 0 0 0.9rem; font-size: 0.94rem; }
.dbg-warn { color: var(--error); font-weight: 600; }
.dbg-ok { color: var(--muted); }
.dbg-phases { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.dbg-phase { flex: 1 1 180px; border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.7rem; background: var(--panel-2); }
.dbg-phase-name { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.dbg-phase-val { display: block; font-size: 1.05rem; font-weight: 600; margin: 0.15rem 0; }
.dbg-phase-sub { display: block; font-size: 0.82rem; color: var(--muted); }
.dbg-h { font-size: 0.9rem; margin: 1.1rem 0 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.dbg-count { font-size: 0.78rem; font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 99px; padding: 0 0.5rem; }
.dbg-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
.dbg-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.dbg-table th, .dbg-table td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dbg-table thead th { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }
.dbg-table tbody tr:last-child td { border-bottom: 0; }
.dbg-table .mono { font-size: 0.82rem; }
.dbg-num { text-align: right; font-variant-numeric: tabular-nums; }
.dbg-cat { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.dbg-id { font-size: 0.76rem; color: var(--muted); }
.dbg-reason { color: var(--error); font-weight: 600; }
.dbg-detail { color: var(--muted); white-space: normal; }
/* The reason is the one long, explanatory column: let it wrap and give it room,
   instead of being squeezed to a sliver by the nowrap default. */
.dbg-reason-cell { white-space: normal; min-width: 22rem; }
.dbg-status { font-size: 0.76rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 99px; border: 1px solid var(--border); }
.dbg-status-pass { color: var(--pass); } .dbg-status-info { color: var(--info); } .dbg-status-warn { color: var(--warn); }
.dbg-status-error { color: var(--error); border-color: var(--error); } .dbg-status-skipped { color: var(--skipped, var(--muted)); } .dbg-status-inconclusive { color: var(--inconclusive, var(--muted)); }
.dbg-notes { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.84rem; color: var(--muted); }
.dbg-notes .dbg-num { text-align: left; color: var(--text); }
.dbg-note-cap { font-size: 0.82rem; color: var(--warn); margin: 0.6rem 0 0; }
.dbg-foot { margin: 0.9rem 0 0; font-size: 0.86rem; }

/* Live progress view (report streaming) */
.freshness.running { color: var(--info); background: var(--tint-info-bg); border: 1px solid var(--tint-info-border); }
.live-run { margin: 0.6rem 0 1.4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 1rem 1.1rem; }
.live-head { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; font-weight: 600; }
.live-spinner { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: live-spin 0.8s linear infinite; }
.live-stopped .live-spinner, .live-done .live-spinner { animation: none; border-top-color: var(--border); opacity: 0.4; }
.live-elapsed { margin-left: auto; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.live-done .live-elapsed { color: var(--pass); font-weight: 600; }
.live-count { margin-left: 0.7rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes live-spin { to { transform: rotate(360deg); } }
.live-steps { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.live-steps li { display: flex; align-items: center; gap: 0.55rem; padding: 0.28rem 0; color: var(--muted); font-size: 0.94rem; transition: color 0.15s ease; }
.live-step-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; position: relative; }
.live-step-label { flex: 1 1 auto; }
.live-step-time { flex: none; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.live-steps li.pending { opacity: 0.6; }
.live-steps li.done { color: var(--text); }
.live-steps li.done .live-step-dot { background: var(--pass); border-color: var(--pass); }
.live-steps li.done .live-step-dot::after { content: ""; position: absolute; left: 3px; top: 0px; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.live-steps li.current { color: var(--text); font-weight: 600; }
.live-steps li.current .live-step-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); animation: live-pulse 1.1s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); } }
.live-hint { margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--muted); }
.live-msg { margin: 0.8rem 0 0; font-size: 0.94rem; }
@media (prefers-reduced-motion: reduce) { .live-spinner { animation-duration: 2s; } .live-steps li.current .live-step-dot { animation: none; } }

/* Inconclusive note in the Issues view */
.incon-note { display: flex; gap: 0.6rem; align-items: flex-start; background: color-mix(in srgb, var(--inconclusive) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--inconclusive) 35%, var(--border)); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0 0 1rem; font-size: 0.92rem; }
.incon-icon { flex: none; color: var(--inconclusive); }
.incon-icon svg { width: 1.3rem; height: 1.3rem; vertical-align: -0.2rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Instant, styled tooltip (replaces the slow native title). Add data-tip="..."
   to any element. Theme-aware: dark bubble on light, light bubble on dark. */
[data-tip] { position: relative; }
[data-tip]::after, [data-tip]::before { position: absolute; left: 50%; bottom: 100%; opacity: 0; pointer-events: none; transition: opacity 0.07s ease; z-index: 60; }
[data-tip]::after {
  content: attr(data-tip);
  transform: translate(-50%, -0.45rem);
  background: var(--text); color: var(--panel);
  padding: 0.4rem 0.6rem; border-radius: 6px;
  font: 500 0.8rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal; text-transform: none;
  width: max-content; max-width: 17rem; white-space: normal; text-align: left;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
[data-tip]::before {
  content: ""; transform: translate(-50%, 0.15rem);
  border: 5px solid transparent; border-top-color: var(--text);
}
[data-tip]:hover::after, [data-tip]:hover::before,
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-tip]::after, [data-tip]::before { transition: none; } }