/* dmarc-report.css — page-specific styles for the DMARC report viewer
   (dmarc-report-viewer.html / de/dmarc-report-viewer.html). Separate file because the site
   CSP is style-src 'self' (no inline styles) and styles.css must not be touched (site-wide
   ?v= bump). Prefix: drv-. Colours come from the styles.css tokens --pass/--warn/--fail/--info
   and their -bg variants, so dark mode needs nothing extra here. */

.drv-app { max-width: 960px; margin: 8px auto 0; }
/* `hidden` only works through the UA's display:none; an author display on the same
   element would override it. Same guard as .st-app in send-test.css. */
.drv-app [hidden] { display: none !important; }

.drv-drop { position: relative; border: 2px dashed var(--line-ink); padding: 22px 18px; text-align: center; background: var(--bg-sunk); }
.drv-drop.drv-over { border-color: var(--brand); background: var(--bg); }
/* The real <input type=file> stays in the DOM and focusable (not `hidden`) so keyboard and
   screen-reader users can reach it; this visually hides it while keeping it operable. Its
   <label class="drv-btn …"> remains the visible trigger. `position: absolute` needs a
   positioned ancestor to anchor to — `.drv-drop` above, the element it actually sits in —
   or it escapes to whichever ancestor further up happens to be positioned. `clip-path` is
   the modern half of the legacy `clip` hiding technique; both stay, `clip` is dropped by
   nothing that still needs it and `clip-path` alone is enough on its own everywhere else. */
.drv-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Surfaces the focused (but invisible) file input on the drop zone it belongs to. */
.drv-drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.drv-drop p { margin: 0 0 12px; }
.drv-label { display: block; margin: 16px 0 6px; font-weight: 600; }
.drv-text { width: 100%; min-height: 150px; box-sizing: border-box; font-family: var(--font-mono); font-size: 0.85rem; padding: 10px; border: 1px solid var(--line-ink); background: var(--bg); color: var(--text); }
.drv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.drv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--brand-ink); background: var(--brand); border: none; border-radius: 0; cursor: pointer; }
.drv-btn:hover { background: var(--brand-dark); }
.drv-btn-secondary { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong); }
.drv-btn-secondary:hover { background: var(--bg-sunk); border-color: var(--brand); }
.drv-status { padding: 10px 14px; border-left: 4px solid var(--info); background: var(--info-bg); margin: 0 0 12px; }
.drv-status-ok { border-color: var(--pass); background: var(--pass-bg); }
.drv-status-fail { border-color: var(--fail); background: var(--fail-bg); }

.drv-list-items { margin: 0 0 12px; padding-left: 22px; }
.drv-list-items li { margin: 4px 0; }

.drv-report { border: 1px solid var(--line-ink); padding: 16px 18px 18px; margin: 20px 0; }
.drv-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.drv-head h2 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.drv-light { display: inline-flex; align-items: center; gap: 7px; padding: 2px 11px; border: 1px solid; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.drv-light::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
/* Scoped to .drv-light (the badge) — .drv-report also carries drv-light-<light> for its
   left-border colour below, and an unscoped rule here would tint the whole report's text. */
.drv-light.drv-light-green { color: var(--pass); border-color: var(--pass); background: var(--pass-bg); }
.drv-light.drv-light-orange { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.drv-light.drv-light-red { color: var(--fail); border-color: var(--fail); background: var(--fail-bg); }
.drv-light.drv-light-info { color: var(--text-muted); border-color: var(--info); background: var(--info-bg); }
.drv-report.drv-light-green { border-left: 6px solid var(--pass); }
.drv-report.drv-light-orange { border-left: 6px solid var(--warn); }
.drv-report.drv-light-red { border-left: 6px solid var(--fail); }

.drv-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0; font-size: 0.9rem; }
.drv-meta dt { color: var(--text-muted); }
.drv-meta dd { margin: 0; overflow-wrap: anywhere; }
.drv-errors { padding: 8px 12px; border-left: 4px solid var(--warn); background: var(--warn-bg); }

.drv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 8px; }
.drv-tile { background: var(--bg-sunk); padding: 10px 12px; }
.drv-tile b { display: block; font-size: 1.35rem; line-height: 1.2; }
.drv-tile span { color: var(--text-muted); font-size: 0.85rem; }
.drv-bar { display: flex; height: 10px; background: var(--fail-bg); overflow: hidden; margin: 6px 0 12px; }
.drv-bar-pass { background: var(--pass); height: 100%; }
.drv-bar-w0 { width: 0; } .drv-bar-w5 { width: 5%; } .drv-bar-w10 { width: 10%; } .drv-bar-w15 { width: 15%; }
.drv-bar-w20 { width: 20%; } .drv-bar-w25 { width: 25%; } .drv-bar-w30 { width: 30%; } .drv-bar-w35 { width: 35%; }
.drv-bar-w40 { width: 40%; } .drv-bar-w45 { width: 45%; } .drv-bar-w50 { width: 50%; } .drv-bar-w55 { width: 55%; }
.drv-bar-w60 { width: 60%; } .drv-bar-w65 { width: 65%; } .drv-bar-w70 { width: 70%; } .drv-bar-w75 { width: 75%; }
.drv-bar-w80 { width: 80%; } .drv-bar-w85 { width: 85%; } .drv-bar-w90 { width: 90%; } .drv-bar-w95 { width: 95%; }
.drv-bar-w100 { width: 100%; }
.drv-verdict { margin: 0 0 14px; }

.drv-pill { border-radius: 999px; padding: 0.05em 0.7em; font-size: 0.8em; border: 1px solid; white-space: nowrap; }
.drv-pill-pass { border-color: var(--pass); color: var(--pass); }
.drv-pill-fail { border-color: var(--fail); color: var(--fail); }
.drv-pill-info { border-color: var(--info); color: var(--text-muted); }
.drv-default { color: var(--text-muted); font-size: 0.85em; }

.drv-src { margin: 8px 0; border: 1px solid var(--line); }
/* Mirrors .drv-report.drv-light-* above: the class is emitted (dmarc-report.js srcClass())
   but had no rule of its own, so every source block showed the same neutral border
   regardless of its light. */
.drv-src.drv-src-green { border-left: 4px solid var(--pass); }
.drv-src.drv-src-orange { border-left: 4px solid var(--warn); }
.drv-src.drv-src-red { border-left: 4px solid var(--fail); }
.drv-src summary { padding: 8px 12px; cursor: pointer; background: var(--bg-sunk); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.drv-rec { padding: 10px 12px; border-top: 1px solid var(--line); border-left: 4px solid var(--info); }
.drv-rec-good { border-left-color: var(--pass); }
.drv-rec-warn { border-left-color: var(--warn); }
.drv-rec-bad { border-left-color: var(--fail); background: var(--fail-bg); }
.drv-rec h4 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; }
.drv-rec ul { margin: 6px 0; padding-left: 18px; }
.drv-ids { margin: 0 0 6px; font-size: 0.9rem; }
.drv-ids span { margin-right: 12px; overflow-wrap: anywhere; }
.drv-auth { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 6px; }
.drv-auth th, .drv-auth td { text-align: left; padding: 3px 10px 3px 0; vertical-align: top; }
.drv-notes { font-size: 0.9rem; margin-top: 12px; }
.drv-more { padding: 8px 14px; font: inherit; cursor: pointer; }

@media (max-width: 600px) {
  .drv-meta { grid-template-columns: 1fr; }
  .drv-btn { padding: 10px 16px; }
}

/* "Record today" (opt-in DNS check). Class table in dmarc-report.js (LIVE_CLASS): differs
   takes the warn tone, none and multi the fail tone; match and failed stay neutral. */
.drv-live { margin: 12px 0 16px; padding: 10px 14px; border-left: 4px solid var(--info); background: var(--bg-sunk); }
.drv-live h3 { margin: 0 0 6px; font-size: 1rem; }
.drv-live p { margin: 4px 0; }
.drv-live ul { margin: 6px 0; padding-left: 18px; }
.drv-live code { overflow-wrap: anywhere; }
.drv-live-differs { border-left-color: var(--warn); background: var(--warn-bg); }
.drv-live-none, .drv-live-multi { border-left-color: var(--fail); background: var(--fail-bg); }
/* The DNS-check button is disabled while a run is in progress and once every domain is checked. */
.drv-btn[disabled] { opacity: 0.6; cursor: default; }
.drv-btn[disabled]:hover { background: var(--bg-elev); border-color: var(--border-strong); }