/* ─── Resets ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Theme variables ────────────────────────────────────────── */

[data-scheme="midnight"][data-mode="dark"] {
    --bg: #0d1117; --surface: #161b22; --surface-alt: #21262d;
    --border: #30363d; --text: #c9d1d9; --text-muted: #8b949e;
    --accent: #58a6ff; --accent-hover: #79c0ff; --accent-sub: rgba(88,166,255,.12);
}
[data-scheme="midnight"][data-mode="light"] {
    --bg: #f6f8fa; --surface: #ffffff; --surface-alt: #f0f3f6;
    --border: #d0d7de; --text: #24292f; --text-muted: #57606a;
    --accent: #0969da; --accent-hover: #0550ae; --accent-sub: rgba(9,105,218,.1);
}

[data-scheme="forest"][data-mode="dark"] {
    --bg: #091510; --surface: #0e2118; --surface-alt: #173325;
    --border: #1e3a27; --text: #b2d4be; --text-muted: #6a9e7e;
    --accent: #3fb950; --accent-hover: #56d364; --accent-sub: rgba(63,185,80,.12);
}
[data-scheme="forest"][data-mode="light"] {
    --bg: #f0faf3; --surface: #ffffff; --surface-alt: #e8f5ec;
    --border: #c6e6ce; --text: #1a3d28; --text-muted: #4a7d5e;
    --accent: #1a7f37; --accent-hover: #0f5d26; --accent-sub: rgba(26,127,55,.1);
}

[data-scheme="ember"][data-mode="dark"] {
    --bg: #130b07; --surface: #1f1209; --surface-alt: #2e1c0e;
    --border: #3d2210; --text: #e8c4a8; --text-muted: #a07050;
    --accent: #f0883e; --accent-hover: #f5a265; --accent-sub: rgba(240,136,62,.12);
}
[data-scheme="ember"][data-mode="light"] {
    --bg: #fff8f5; --surface: #ffffff; --surface-alt: #fff0e8;
    --border: #f0d4c4; --text: #3d1f0d; --text-muted: #8c5030;
    --accent: #c53d0b; --accent-hover: #a0310a; --accent-sub: rgba(197,61,11,.1);
}

[data-scheme="ocean"][data-mode="dark"] {
    --bg: #061218; --surface: #0a1e28; --surface-alt: #0f2d3d;
    --border: #143447; --text: #a8d5e5; --text-muted: #5a9ab0;
    --accent: #38bdf8; --accent-hover: #7dd3fc; --accent-sub: rgba(56,189,248,.12);
}
[data-scheme="ocean"][data-mode="light"] {
    --bg: #f0faff; --surface: #ffffff; --surface-alt: #e0f4ff;
    --border: #bae6fd; --text: #0c2d40; --text-muted: #2d7a9a;
    --accent: #0284c7; --accent-hover: #0369a1; --accent-sub: rgba(2,132,199,.1);
}

[data-scheme="violet"][data-mode="dark"] {
    --bg: #0f0a1e; --surface: #16102a; --surface-alt: #211840;
    --border: #2d2060; --text: #c4b5f0; --text-muted: #8b75c8;
    --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-sub: rgba(167,139,250,.12);
}
[data-scheme="violet"][data-mode="light"] {
    --bg: #faf5ff; --surface: #ffffff; --surface-alt: #f3e8ff;
    --border: #e9d5ff; --text: #2e1065; --text-muted: #6b28c5;
    --accent: #7c3aed; --accent-hover: #6d28d9; --accent-sub: rgba(124,58,237,.1);
}

[data-scheme="amber"][data-mode="dark"] {
    --bg: #120e00; --surface: #1e1800; --surface-alt: #2d2400;
    --border: #3d3000; --text: #f0d890; --text-muted: #a09030;
    --accent: #fbbf24; --accent-hover: #fcd34d; --accent-sub: rgba(251,191,36,.12);
}
[data-scheme="amber"][data-mode="light"] {
    --bg: #fffbeb; --surface: #ffffff; --surface-alt: #fef3c7;
    --border: #fde68a; --text: #3d2e00; --text-muted: #8c6d00;
    --accent: #b45309; --accent-hover: #92400e; --accent-sub: rgba(180,83,9,.1);
}

[data-scheme="rose"][data-mode="dark"] {
    --bg: #130811; --surface: #1f0e1c; --surface-alt: #2e1528;
    --border: #3d1835; --text: #f0b8d8; --text-muted: #a06080;
    --accent: #f472b6; --accent-hover: #fb7fc6; --accent-sub: rgba(244,114,182,.12);
}
[data-scheme="rose"][data-mode="light"] {
    --bg: #fff0f8; --surface: #ffffff; --surface-alt: #ffe4f3;
    --border: #fcc8e8; --text: #3d0f2e; --text-muted: #8c3060;
    --accent: #be185d; --accent-hover: #9d174d; --accent-sub: rgba(190,24,93,.1);
}

/* ── 5 new schemes ─────────────────────────────────────────── */

[data-scheme="dracula"][data-mode="dark"] {
    --bg: #282a36; --surface: #21222c; --surface-alt: #44475a;
    --border: #44475a; --text: #f8f8f2; --text-muted: #6272a4;
    --accent: #bd93f9; --accent-hover: #cfa8ff; --accent-sub: rgba(189,147,249,.15);
}
[data-scheme="dracula"][data-mode="light"] {
    --bg: #f5f4ff; --surface: #ffffff; --surface-alt: #ece8ff;
    --border: #c4b8f0; --text: #282a36; --text-muted: #6272a4;
    --accent: #7c3aed; --accent-hover: #6d28d9; --accent-sub: rgba(124,58,237,.1);
}

[data-scheme="nord"][data-mode="dark"] {
    --bg: #2e3440; --surface: #3b4252; --surface-alt: #434c5e;
    --border: #4c566a; --text: #eceff4; --text-muted: #81a1c1;
    --accent: #88c0d0; --accent-hover: #8fbcbb; --accent-sub: rgba(136,192,208,.12);
}
[data-scheme="nord"][data-mode="light"] {
    --bg: #eceff4; --surface: #ffffff; --surface-alt: #e5e9f0;
    --border: #d8dee9; --text: #2e3440; --text-muted: #4c566a;
    --accent: #5e81ac; --accent-hover: #4e6d95; --accent-sub: rgba(94,129,172,.1);
}

[data-scheme="candy"][data-mode="dark"] {
    --bg: #1a0d2e; --surface: #2a1540; --surface-alt: #3d2255;
    --border: #5a3580; --text: #ffccff; --text-muted: #c080c0;
    --accent: #ff80bf; --accent-hover: #ff9fd0; --accent-sub: rgba(255,128,191,.12);
}
[data-scheme="candy"][data-mode="light"] {
    --bg: #fff0ff; --surface: #ffffff; --surface-alt: #ffe8ff;
    --border: #f0c0f0; --text: #2d0030; --text-muted: #a040a0;
    --accent: #cc0099; --accent-hover: #aa007a; --accent-sub: rgba(204,0,153,.1);
}

[data-scheme="monokai"][data-mode="dark"] {
    --bg: #272822; --surface: #2d2e27; --surface-alt: #3d3e35;
    --border: #49483e; --text: #f8f8f2; --text-muted: #75715e;
    --accent: #a6e22e; --accent-hover: #c0f040; --accent-sub: rgba(166,226,46,.12);
}
[data-scheme="monokai"][data-mode="light"] {
    --bg: #fafaf8; --surface: #ffffff; --surface-alt: #f2f2ee;
    --border: #d8d8c8; --text: #272822; --text-muted: #75715e;
    --accent: #5a8a00; --accent-hover: #4a7200; --accent-sub: rgba(90,138,0,.1);
}

[data-scheme="synthwave"][data-mode="dark"] {
    --bg: #16003a; --surface: #210052; --surface-alt: #320070;
    --border: #500090; --text: #e8c0ff; --text-muted: #9060c0;
    --accent: #df80ff; --accent-hover: #eb9fff; --accent-sub: rgba(223,128,255,.15);
}
[data-scheme="synthwave"][data-mode="light"] {
    --bg: #fdf0ff; --surface: #ffffff; --surface-alt: #f5e0ff;
    --border: #e0b0ff; --text: #16003a; --text-muted: #7030b0;
    --accent: #8800cc; --accent-hover: #6600aa; --accent-sub: rgba(136,0,204,.1);
}

/* ─── Fixed semantic + global tokens ─────────────────────────── */
:root {
    --critical: #da3633; --serious: #d29922; --moderate: #db6d28; --minor: #3fb950;
    --font:   -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, Arial, sans-serif;
    --mono:   'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
    --radius: 8px; --radius-sm: 5px;
    --shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* ─── Base ───────────────────────────────────────────────────── */
body {
    background: var(--bg); color: var(--text);
    font-family: var(--font); font-size: 14px; line-height: 1.6;
    min-height: 100vh; transition: background .2s, color .2s;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.hidden { display: none !important; }
.num { text-align: right; }

/* ─── Layout ─────────────────────────────────────────────────── */
.app { max-width: 1480px; margin: 0 auto; padding: 2rem 2.5rem 6rem; }

/* ─── Header ─────────────────────────────────────────────────── */
.site-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap;
}
.site-header h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.5px; }
.subtitle { font-size: .8rem; color: var(--text-muted); margin-top: .1rem; }
.header-actions { display: flex; gap: .6rem; align-items: center; }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font-size: .875rem; font-weight: 500; cursor: pointer; transition: .15s;
    text-decoration: none; user-select: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; border-color: transparent; }
.btn-lg { padding: .7rem 1.5rem; font-size: 1rem; }

.btn-icon {
    background: none; border: none; color: var(--text-muted);
    font-size: 1.1rem; cursor: pointer; line-height: 1; padding: .25rem;
    border-radius: var(--radius-sm); transition: .15s;
}
.btn-icon:hover { color: var(--text); background: var(--surface-alt); }

.btn-view {
    padding: .2rem .65rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); font-size: .75rem; cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn-view:hover { background: var(--accent-sub); color: var(--accent); border-color: var(--accent); }

/* ─── Empty / loading / error ────────────────────────────────── */
.empty-state {
    text-align: center; padding: 8rem 2rem;
    border: 2px dashed var(--border); border-radius: 12px; color: var(--text-muted);
}
.empty-icon { font-size: 3.5rem; margin-bottom: 1.25rem; display: block; }
.empty-state h2 { font-size: 1.4rem; color: var(--text); margin-bottom: .5rem; }
.empty-state p { margin-bottom: 1.75rem; font-size: .95rem; }
.empty-state code { background: var(--surface-alt); padding: .15em .4em; border-radius: 3px; font-family: var(--mono); font-size: .9em; }

.loading-state {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; padding: 6rem 2rem; color: var(--text-muted); font-size: .95rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }

.error-banner { padding: 1rem 1.5rem; background: rgba(218,54,51,.1); border: 1px solid rgba(218,54,51,.35); border-radius: var(--radius); color: var(--critical); font-size: .9rem; }

/* ─── Dashboard ──────────────────────────────────────────────── */
.dashboard { display: flex; flex-direction: column; gap: 1.5rem; }

/* ─── Metrics ────────────────────────────────────────────────── */
.metrics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.metric-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.25rem 1.5rem;
    display: flex; flex-direction: column; gap: .3rem;
    position: relative; overflow: hidden;
}
.metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); opacity: .5; }
.metric-card.accent-critical::before { background: var(--critical); opacity: .8; }
.metric-card.accent-warning::before  { background: var(--serious);  opacity: .8; }
.metric-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-muted); }
.metric-value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.accent-critical .metric-value { color: var(--critical); }
.accent-warning  .metric-value { color: var(--serious);  }

/* ─── Charts ─────────────────────────────────────────────────── */
.charts-top { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 1.25rem; }

.chart-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.25rem 1.5rem;
    position: relative;
}

.chart-hd {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 1rem;
}

.chart-title {
    font-size: .72rem; text-transform: uppercase;
    letter-spacing: .07em; font-weight: 700; color: var(--text-muted);
}

/* download button on chart cards */
.chart-dl-btn {
    opacity: 0; transition: opacity .2s;
    padding: .3rem .4rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface-alt);
    color: var(--text-muted); cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.chart-card:hover .chart-dl-btn { opacity: 1; }
.chart-dl-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-sub); }

.chart-wrap { position: relative; height: 220px; }
.chart-wrap-tall { height: 310px; }

/* ─── Table ──────────────────────────────────────────────────── */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.table-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border);
    gap: 1rem; flex-wrap: wrap; background: var(--surface-alt);
}
.table-title { font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.count-badge { display: inline-block; padding: .1em .55em; background: var(--accent-sub); color: var(--accent); border-radius: 20px; font-size: .75rem; font-weight: 600; }

.filters { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.filter-input, .filter-select {
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-sm); padding: .4rem .7rem; font-size: .82rem; transition: border-color .15s;
}
.filter-input { min-width: 220px; }
.filter-input:focus, .filter-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sub); }
.filter-select option { background: var(--surface); }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); font-size: .83rem; }
th {
    background: var(--surface-alt); font-size: .72rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
    cursor: pointer; user-select: none; white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
th:hover { color: var(--text); }
th.sort-asc::after  { content: ' ↑'; color: var(--accent); }
th.sort-desc::after { content: ' ↓'; color: var(--accent); }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--accent-sub); }
tbody tr:last-child td { border-bottom: none; }
.empty-row { text-align: center; padding: 3rem; color: var(--text-muted); }
.rule-cell { max-width: 260px; }
.rule-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.rule-link:hover { text-decoration: underline; }

/* ─── Badges & pills ─────────────────────────────────────────── */
.badge { display: inline-block; padding: .18em .6em; border-radius: 20px; font-size: .7rem; font-weight: 700; text-transform: capitalize; letter-spacing: .02em; white-space: nowrap; }
.badge-critical { background: rgba(218,54,51,.15);  color: var(--critical); border: 1px solid rgba(218,54,51,.4);  }
.badge-serious  { background: rgba(210,153,34,.15); color: var(--serious);  border: 1px solid rgba(210,153,34,.4); }
.badge-moderate { background: rgba(219,109,40,.15); color: var(--moderate); border: 1px solid rgba(219,109,40,.4); }
.badge-minor    { background: rgba(63,185,80,.15);  color: var(--minor);    border: 1px solid rgba(63,185,80,.4);  }
.type-pill { display: inline-block; padding: .15em .55em; border-radius: 4px; font-size: .7rem; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.type-violations { background: var(--accent-sub); color: var(--accent); }
.type-incomplete  { background: rgba(139,148,158,.1); color: var(--text-muted); border: 1px solid var(--border); }

/* ─── Gear button ────────────────────────────────────────────── */
.gear-btn {
    position: fixed; bottom: 1.75rem; right: 1.75rem;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow); transition: .2s; z-index: 50;
}
.gear-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-alt); transform: rotate(30deg); }

/* ─── Dialogs (shared) ───────────────────────────────────────── */
dialog {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--text);
    padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.55);
    margin: auto;
}
dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.dialog-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border); gap: 1rem;
}
.dialog-header h2 { font-size: 1rem; font-weight: 600; }
.dialog-header h3 { font-size: .95rem; font-weight: 600; }
.dialog-header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.dialog-body { padding: 1.25rem 1.5rem; }

/* ─── Theme dialog ───────────────────────────────────────────── */
.theme-dialog { width: 420px; max-width: 95vw; }
.dialog-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: .6rem; }
.mode-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.25rem; }
.mode-btn { flex: 1; padding: .5rem; border: none; background: transparent; color: var(--text-muted); font-size: .85rem; font-weight: 500; cursor: pointer; transition: .15s; }
.mode-btn.active { background: var(--accent); color: #fff; }
.mode-btn:not(.active):hover { background: var(--surface-alt); color: var(--text); }
.scheme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: .25rem; }
.scheme-card {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: .75rem .4rem; border: 2px solid var(--border); border-radius: var(--radius);
    background: transparent; color: var(--text); cursor: pointer; transition: .15s; font-family: var(--font);
}
.scheme-card:hover { border-color: var(--accent); background: var(--accent-sub); }
.scheme-card.active { border-color: var(--accent); background: var(--accent-sub); }
.scheme-swatch { width: 30px; height: 30px; border-radius: 50%; display: block; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.scheme-label { font-size: .72rem; font-weight: 500; }

/* ─── Details dialog ─────────────────────────────────────────── */
.details-dialog { width: 92vw; max-width: 1280px; max-height: 88vh; }
.details-dialog[open] { display: flex; flex-direction: column; }
.details-heading { min-width: 0; }
.details-meta { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.details-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.criterion-tag { font-size: .72rem; color: var(--text-muted); background: var(--surface-alt); padding: .15em .5em; border-radius: 3px; font-family: var(--mono); }
.help-link { font-size: .75rem; color: var(--accent); text-decoration: none; margin-left: .25rem; }
.help-link:hover { text-decoration: underline; }
.url-cell { max-width: 300px; word-break: break-all; font-size: .78rem; }
.url-cell a { color: var(--text); text-decoration: none; }
.url-cell a:hover { color: var(--accent); text-decoration: underline; }
.code-cell { max-width: 240px; overflow-wrap: anywhere; font-family: var(--mono); font-size: .75rem; color: var(--accent); }
.overflow-note { padding: .9rem 1.5rem; font-size: .8rem; color: var(--text-muted); text-align: center; border-top: 1px solid var(--border); margin-top: auto; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .metrics-grid { grid-template-columns: repeat(3, 1fr); }
    .charts-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .app { padding: 1.25rem 1rem 5rem; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-top { grid-template-columns: 1fr; }
    .site-header { flex-direction: column; align-items: flex-start; }
    .filter-input { min-width: unset; width: 100%; }
    .scheme-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .metrics-grid { grid-template-columns: 1fr 1fr; }
    .scheme-grid { grid-template-columns: repeat(2, 1fr); }
}