/* Unthrottled - modern dark dashboard. Shares the wedding-planner DNA
   (dark base, purple accent, fixed sidebar) but adds gradients, glass cards,
   rounded geometry, and a colored-icon system. */

:root {
    color-scheme: dark;   /* native selects, date inputs, scrollbars render dark by default */
    --bg: #0b0c0f;
    --bg-grad: none;
    --surface: #101218;
    --surface-2: #14161d;
    --surface-3: #1b1e27;
    --hover: #1a1d27;
    --border: #202430;
    --border-soft: #181b23;
    --text: #eceef3;
    --text-2: #9aa3b2;
    --text-3: #646c7a;
    --accent: #f97316;
    --accent-2: #ea580c;
    --accent-ink: #ffb27a;
    --accent-grad: linear-gradient(135deg, #f97316, #ea580c);
    --good: #34d399;
    --warn: #facc15;
    --bad: #ef4444;
    --info: #3b82f6;
    --radius: 12px;
    --radius-sm: 8px;
    --sidebar-w: 256px;
    --sidebar-rail: 68px;
    --shadow: 0 6px 20px rgba(0,0,0,.30);
    --sidebar-bg: rgba(14,16,21,.9);
    --nav-active-fg: #fff;
    --topbar-bg: rgba(11,12,15,.72);
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}

/* ---------- Light theme ---------- */
html[data-theme="light"] {
    color-scheme: light;
    --bg: #eef1f6;
    --bg-grad: none;
    --surface: #ffffff;
    --surface-2: #f6f7fb;
    --surface-3: #eceef4;
    --hover: #e9ecf3;
    --border: #d4d9e4;
    --border-soft: #e4e7ef;
    --text: #1a1d27;
    --text-2: #545b6e;
    --text-3: #868ea1;
    --shadow: 0 8px 28px rgba(20,30,60,.10);
    --sidebar-bg: rgba(255,255,255,.88);
    --nav-active-fg: #ea580c;
    --topbar-bg: rgba(244,245,248,.72);
}
/* light-mode contrast: the dark-theme pastel greens/reds/accents are too faint on white */
html[data-theme="light"] .hl-delta.hl-good,
html[data-theme="light"] .delta-cell.delta-better,
html[data-theme="light"] .rp-good,
html[data-theme="light"] .badge-good,
html[data-theme="light"] .pill-good { color: #15803d; }
html[data-theme="light"] .hl-delta.hl-bad,
html[data-theme="light"] .delta-cell.delta-worse,
html[data-theme="light"] .rp-bad,
html[data-theme="light"] .badge-bad,
html[data-theme="light"] .pill-bad { color: #b91c1c; }
html[data-theme="light"] .badge-warn { color: #b45309; }
html[data-theme="light"] .flash-warn, html[data-theme="light"] .flash-warn .flash-white { color: #1a1a1a; }
html[data-theme="light"] .finding-sev.sev-good { color: #15803d; }
html[data-theme="light"] .finding-sev.sev-warn { color: #b45309; }
html[data-theme="light"] .finding-sev.sev-critical { color: #b91c1c; }
html[data-theme="light"] .badge-source { color: #4338ca; }
html[data-theme="light"] .badge-cat { color: #ea580c; }
html[data-theme="light"] .rpt-status.ok, html[data-theme="light"] .rs-tag.t-good, html[data-theme="light"] .report-pill { color: #15803d; }
html[data-theme="light"] .rpt-status.warn, html[data-theme="light"] .rs-tag.t-mid { color: #b45309; }
html[data-theme="light"] .rpt-status.bad, html[data-theme="light"] .rs-tag.t-bad { color: #b91c1c; }
html[data-theme="light"] .rs-tag.t-focus { color: #ea580c; }
html[data-theme="light"] .auth-body { background-image: var(--bg-grad); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font);
    background: var(--bg);
    background-image: var(--bg-grad);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
.icon { display: inline-block; vertical-align: middle; flex: none; }
.muted { color: var(--text-2); }
.small { font-size: .82rem; }
.strong { font-weight: 600; }
code { background: var(--surface-3); padding: 1px 6px; border-radius: 5px; font-size: .85em; }

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--border-soft);
    padding: 22px 0;
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 30;
    transition: transform .22s ease;
}
/* ---------- collapsible sidebar + hamburger ---------- */
.sidebar { width: var(--sidebar-w); transition: width .22s ease, transform .22s ease; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; }
/* collapsed = slim icon rail (still accessible), desktop */
html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-rail); }
html[data-sidebar="collapsed"] .main-content { margin-left: var(--sidebar-rail); }
html[data-sidebar="collapsed"] .sidebar-title,
html[data-sidebar="collapsed"] .sidebar-subtitle,
html[data-sidebar="collapsed"] .nav-label,
html[data-sidebar="collapsed"] .newtest-label { display: none; }
html[data-sidebar="collapsed"] .sidebar-header { padding: 0 0 16px; display: grid; place-items: center; }
html[data-sidebar="collapsed"] .nav-menu { padding: 0 10px; }
html[data-sidebar="collapsed"] .nav-link { justify-content: center; padding: 11px 0; gap: 0; }
html[data-sidebar="collapsed"] .sidebar-foot { padding: 14px 10px 0; }
html[data-sidebar="collapsed"] .newtest-btn { padding-left: 0; padding-right: 0; }
/* custom hover tooltips to the RIGHT of each rail icon (never a system tooltip).
   overflow:visible so the tooltip isn't clipped by the slim rail. */
html[data-sidebar="collapsed"] .sidebar { overflow: visible; }
html[data-sidebar="collapsed"] .nav-link, html[data-sidebar="collapsed"] .newtest-btn { position: relative; }
html[data-sidebar="collapsed"] .nav-link::after,
html[data-sidebar="collapsed"] .newtest-btn::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-5px);
    background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 11px; font-size: .82rem; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transition: opacity .1s ease, transform .1s ease; z-index: 70; pointer-events: none;
}
html[data-sidebar="collapsed"] .nav-link:hover::after,
html[data-sidebar="collapsed"] .newtest-btn:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px;
    padding: 0 9px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--border); cursor: pointer; }
.hamburger span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }
.hamburger:hover { background: var(--hover); }
@media (max-width: 900px) {
    /* mobile: collapsed = off-canvas, open = full overlay (not a rail) */
    html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-w); transform: translateX(-100%); }
    html[data-sidebar="collapsed"] .main-content { margin-left: 0; }
    html[data-sidebar="open"] .sidebar { width: var(--sidebar-w); transform: none; }
    html[data-sidebar="open"] .main-content { margin-left: 0; }
    html[data-sidebar="open"] .sidebar-backdrop { display: block; }
    html[data-sidebar="open"] .nav-label, html[data-sidebar="open"] .sidebar-title,
    html[data-sidebar="open"] .sidebar-subtitle, html[data-sidebar="open"] .newtest-label { display: inline; }
}
.sidebar-header { padding: 0 18px 20px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand:hover .sidebar-title { color: var(--accent); }
.brand-mark {
    width: 40px; height: 40px;
    display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 12px rgba(234,88,12,.35)); }
.sidebar-title { font-size: 1.22rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; font-family: "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif; }
.sidebar-subtitle { font-size: .76rem; color: var(--text-3); margin-top: 1px; }
.nav-menu { list-style: none; padding: 0 12px; flex: 1; }
.nav-item { margin-bottom: 3px; }
.nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    color: var(--text-2); font-size: .92rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--hover); color: var(--text); }
.nav-link.active { background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(99,102,241,.14)); color: var(--nav-active-fg); font-weight: 600; }
.nav-link.active .nav-icon { filter: drop-shadow(0 0 6px rgba(249,115,22,.5)); }
.nav-icon { display: inline-flex; }
.sidebar-foot { padding: 14px 16px 0; }

/* ---------- Main ---------- */
/* Fluid: fill the width left of the sidebar; card grids add columns as the screen
   grows. Forms/prose keep their own readable max-widths. */
.main-content { margin-left: var(--sidebar-w); flex: 1; min-width: 0; padding: 20px clamp(24px, 3vw, 56px) 64px; max-width: 2400px; transition: margin-left .22s ease; }

/* ---------- Topbar (hamburger + profile menu) ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 18px; padding: 8px 0; position: sticky; top: 0; z-index: 20;
    background: var(--topbar-bg); backdrop-filter: blur(8px); }
.profile-menu { position: relative; }
.profile-btn { display: inline-flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; color: var(--text); font-family: inherit; }
.profile-btn:hover { background: var(--hover); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-grad); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.profile-name { font-size: .88rem; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { color: var(--text-3); font-size: .7rem; }
.profile-dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 250px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; z-index: 40; }
.profile-menu.open .profile-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.profile-menu.open .profile-btn { border-color: var(--accent); }
.pd-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; }
.pd-name { font-weight: 650; }
.pd-email { font-size: .78rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-role { display: inline-block; margin-top: 5px; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--accent); background: rgba(249,115,22,.12); border-radius: 5px; padding: 1px 6px; }
.pd-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm);
    background: none; border: none; color: var(--text); font-family: inherit; font-size: .88rem; cursor: pointer; text-align: left; }
.pd-item:hover { background: var(--hover); }
.pd-toggle { justify-content: space-between; cursor: pointer; }
.pd-logout { margin: 0; }
.pd-logout-btn { color: var(--bad); }
.pd-link { text-decoration: none; color: var(--text); }
/* toggle switch */
.switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch { position: relative; width: 38px; height: 21px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); transition: background .15s; flex: none; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--text-2); transition: transform .15s, background .15s; }
.switch-input:checked + .switch { background: var(--accent); border-color: transparent; }
.switch-input:checked + .switch::after { transform: translateX(17px); background: #fff; }
.switch-input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
/* compare input forms stay readable even though results fill the width */
.main-compare .compare-tabs, .main-compare .tab-pane { max-width: 1080px; }
.compare-lower, .test-lower { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.compare-lower .ai-card, .test-lower .ai-card { margin-bottom: 0; }
.compare-cards { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.vs-context { margin-top: 12px; }
@media (max-width: 1100px) { .compare-lower, .test-lower { grid-template-columns: 1fr; } }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.subtitle { color: var(--text-2); font-size: .92rem; margin-top: 6px; max-width: 70ch; }
h2 { font-size: 1.08rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
h3 { font-size: .98rem; font-weight: 600; }
h4 { font-size: .9rem; font-weight: 600; margin: 6px 0; }
.header-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}
.card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: var(--radius-sm);
    background: var(--surface-3); color: var(--text);
    border: 1px solid var(--border); font-size: .88rem; font-weight: 550;
    cursor: pointer; transition: all .15s; font-family: inherit;
}
.btn:hover { background: var(--hover); border-color: #353a48; }
.btn-accent { background: var(--accent); border: none; color: #fff; }
.btn-accent:hover { background: #fb923c; }
.btn-sm { padding: 6px 11px; font-size: .8rem; }
.btn-lg { padding: 12px 22px; font-size: .95rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon { padding: 6px 8px; }
.btn-icon:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); }
.link { color: var(--accent); font-weight: 550; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { color: #fdba74; }

/* ---------- Badges & pills ---------- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 650;
    text-transform: uppercase; letter-spacing: .04em; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); margin-left: 6px; vertical-align: middle; }
.badge-source { background: rgba(99,102,241,.14); color: #a5b4fc; border-color: transparent; }
.badge-cat { background: rgba(249,115,22,.14); color: #d8b4fe; border-color: transparent; }
.badge-main { background: var(--accent-grad); color: #fff; border: none; }
.badge-good { background: rgba(34,197,94,.16); color: #4ade80; border-color: transparent; }
.badge-warn { background: rgba(245,158,11,.16); color: #facc15; border-color: transparent; }
.badge-bad { background: rgba(239,68,68,.16); color: #f87171; border-color: transparent; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 650; }
.pill-good { background: rgba(34,197,94,.16); color: #4ade80; }
.pill-bad { background: rgba(239,68,68,.16); color: #f87171; }
.pill-flat { background: var(--surface-3); color: var(--text-2); }

/* ---------- Flash ---------- */
.flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm);
    background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #86efac; margin-bottom: 20px; font-size: .9rem; }
.flash-error { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #fca5a5; }
/* auto-dismissing session flash: collapses smoothly so content below slides up */
.flash-auto { max-height: 120px; overflow: hidden;
    transition: opacity .35s ease, max-height .4s ease, margin .4s ease, padding .4s ease, border-width .4s ease; }
.flash-auto.flash-dismiss { opacity: 0; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
.flash-warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.32); color: #fcd34d; }
.flash-white, .flash-white strong { color: #fff; }

/* custom hover tooltip (data-tip), right-anchored below the element */
.has-tip { position: relative; }
.has-tip::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 8px); right: 0; width: 260px; max-width: 72vw;
    padding: 9px 11px; background: var(--surface-3); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow);
    font-size: .76rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: pre-line;
    text-transform: none; letter-spacing: normal;   /* tooltip text is sentence-case even on uppercase badges */
    opacity: 0; visibility: hidden; transform: translateY(-2px);
    transition: opacity .06s ease, transform .06s ease; z-index: 60; pointer-events: none;
}
.has-tip:hover::after, .has-tip:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }
/* in the headline cards the tipped elements sit on the left, so anchor left */
.highlight-card .has-tip::after, .highlight-card.has-tip::after { left: 0; right: auto; width: max-content; max-width: 250px; }
/* whole-card "system max" tooltip: suppress it while hovering an inner tooltip (delta rows / sensor) */
.highlight-card.has-tip:has(.has-tip:hover)::after { opacity: 0 !important; visibility: hidden !important; }
.highlight-card.has-tip { cursor: help; }

/* ---------- Stat / highlight grids ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card { display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px 20px; }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-3); display: grid; place-items: center; }
.stat-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.stat-label { font-size: .8rem; color: var(--text-2); }

.score-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-bottom: 22px; }
.score-card { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; }
.score-ring { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem;
    background: conic-gradient(var(--accent) var(--p, 70%), var(--surface-3) 0); position: relative; }
.score-ring span { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.score-ring.score-good { --accent: var(--good); }
.score-ring.score-mid { --accent: var(--warn); }
.score-ring.score-bad { --accent: var(--bad); }
.score-label { font-weight: 600; }
.highlight-card { display: flex; align-items: flex-start; gap: 13px; margin: 0; padding: 19px 20px; }
.highlight-card > div { min-width: 0; flex: 1; }   /* let inner text shrink/wrap, never overflow the card */
.hl-deltas { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; }
.hl-delta { font-size: .82rem; font-weight: 700; width: fit-content; max-width: 100%; cursor: default; }
.hl-delta.hl-good { color: #4ade80; }
.hl-delta.hl-bad { color: #f87171; }
.hl-delta.hl-neutral { color: var(--text-3); }
.hl-delta .hl-num { white-space: nowrap; }
.hl-sensor { font-size: .69rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 2px; cursor: default; }
.hl-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--surface-3); display: grid; place-items: center; }
.hl-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.hl-label { font-size: .82rem; color: var(--text-2); }

/* ---------- Tables ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th { text-align: left; padding: 9px 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-3); border-bottom: 1px solid var(--border); font-weight: 650; }
.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255,255,255,.02); }
/* A cell whose value is the thing to look at (a starved sample rate, a rejected
   upload) - readable at a glance while scanning a column, without a badge's weight. */
.data-table td.txt-warn, .data-table td .txt-warn { color: var(--warn); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sensor-name { font-weight: 500; }
.unit { font-weight: 400; font-size: .8em; }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 40px 20px; color: var(--text-2); }
.empty .icon { opacity: .8; margin-bottom: 12px; }
.empty p { margin-bottom: 16px; }

/* ---------- CTA / filter ---------- */
.cta-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.cta-card p { color: var(--text-2); font-size: .88rem; margin-top: 4px; }
.filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.chip { padding: 5px 13px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; color: var(--text-2); }
.chip:hover { color: var(--text); }
.chip-on { background: var(--accent-grad); color: #fff; border: none; }

/* ---------- Two column ---------- */

/* ---------- Findings (info | advice, two columns when the card is wide) ---------- */
.findings-wrap { container-type: inline-size; }
.findings { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.findings-head { display: none; }
.finding { display: grid; grid-template-columns: 1fr; gap: 7px 20px;
    padding: 13px 15px; border-radius: var(--radius-sm); background: var(--surface-2);
    border: 1px solid var(--border-soft); border-left: 3px solid var(--text-3); }
.finding-good { border-left-color: var(--good); }
.finding-info { border-left-color: var(--info); }
.finding-warn { border-left-color: var(--warn); }
.finding-critical { border-left-color: var(--bad); }
.finding-main { display: flex; gap: 12px; }
.finding-icon { flex: none; }
.finding-title { font-weight: 600; font-size: .92rem; }
.finding-detail { color: var(--text-2); font-size: .85rem; margin-top: 2px; }
.finding-advice:empty { display: none; }
.finding-recs { display: flex; flex-direction: column; gap: 8px; }
.finding-rec { background: var(--surface-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 8px 11px; color: var(--text-2); font-size: .83rem; line-height: 1.45; }
.finding-rec-caution { border-color: rgba(250,204,21,.4); background: rgba(250,204,21,.06); }
.finding-rec-caution::before { content: '\26A0'; color: var(--warn); font-weight: 700; margin-right: 7px; }
html[data-theme="light"] .finding-rec-caution::before { color: #b45309; }
/* severity label pill on each finding title */
.finding-sev { display: inline-block; font-family: var(--mono); font-size: .6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; padding: 2px 7px; border-radius: 5px; margin-right: 8px; vertical-align: middle;
    border: 1px solid var(--border); color: var(--text-3); }
.finding-sev.sev-critical { color: #fca5a5; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.1); }
.finding-sev.sev-warn { color: #fcd34d; border-color: rgba(250,204,21,.45); background: rgba(250,204,21,.1); }
.finding-sev.sev-good { color: #6ee7b7; border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.1); }
/* recommendations read as clear next-actions */
.finding-rec:not(.finding-rec-caution)::before { content: '\2192'; color: var(--accent); font-weight: 700; margin-right: 7px; }
/* structured metric chip: measured value, a mini bar vs its ceiling, % over */
.finding-body { min-width: 0; }
.finding-metric { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; font-family: var(--mono); }
.fm-val { font-weight: 700; font-size: .84rem; color: var(--text); font-variant-numeric: tabular-nums; }
.fm-bar { width: 92px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; flex: none; }
.fm-bar i { display: block; height: 100%; border-radius: 3px; background: var(--text-3); }
.fm-bar i.ok { background: var(--good); } .fm-bar i.warn { background: var(--warn); }
.fm-bar i.bad { background: var(--bad); } .fm-bar i.acc { background: var(--accent); }
.fm-lim, .fm-over { color: var(--text-3); font-size: .76rem; }
.fm-over { padding-left: 9px; border-left: 1px solid var(--border-soft); }
/* "why it matters" - the causal explanation, set apart from the what-happened detail */
/* All-clear layout: one lead card, then the passed checks folded into compact rows.
   The lead card renders exactly as any finding; only the passed list below is new. */
.findings-passed { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.findings-passed-head { font-family: var(--mono); text-transform: uppercase; font-size: .62rem;
    letter-spacing: .1em; color: var(--text-3); padding: 2px 2px 4px; }
/* A passed check: one scannable line that expands in place. Lighter than a card on
   purpose - it recedes so the lead card and any real problem carry the visual weight. */
.finding-mini { border: 1px solid var(--border-soft); border-left: 3px solid var(--good);
    border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.finding-mini > summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    cursor: pointer; list-style: none; user-select: none; }
.finding-mini > summary::-webkit-details-marker { display: none; }
.finding-mini > summary:hover { background: rgba(255,255,255,.03); }
html[data-theme="light"] .finding-mini > summary:hover { background: rgba(0,0,0,.03); }
.finding-mini > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fmini-icon { flex: none; display: inline-flex; color: var(--good); }
.fmini-title { font-weight: 600; font-size: .86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmini-terse { margin-left: auto; font-family: var(--mono); font-size: .78rem; color: var(--text-3);
    font-variant-numeric: tabular-nums; flex: none; }
.fmini-chev { flex: none; display: inline-flex; color: var(--text-3); transform: rotate(90deg);
    transition: transform .15s ease; }
.finding-mini[open] > summary .fmini-chev { transform: rotate(-90deg); }
/* No terse metric? The chevron still anchors right. */
.finding-mini > summary > .fmini-title:last-of-type ~ .fmini-chev { margin-left: auto; }
.fmini-body { padding: 0 12px 12px 34px; display: flex; flex-direction: column; gap: 9px; }
.fmini-body .finding-why { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .fmini-chev { transition: none; } }

.finding-why { margin-top: 9px; font-size: .84rem; color: var(--text-2); line-height: 1.5; }
.finding-why-k { display: inline-block; font-family: var(--mono); text-transform: uppercase; font-size: .58rem; font-weight: 700;
    letter-spacing: .1em; color: var(--accent-ink); margin-right: 8px; padding: 1px 6px; vertical-align: middle;
    border: 1px solid rgba(249,115,22,.35); border-radius: 4px; background: rgba(249,115,22,.08); }
@container (min-width: 580px) {
    .findings-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; padding: 0 15px 2px; }
    .findings-head span { font-family: var(--mono); text-transform: uppercase; font-size: .65rem; letter-spacing: .12em; color: var(--text-3); }
    .finding { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
    .finding-advice { border-left: 1px solid var(--border-soft); padding-left: 20px; }
}

/* ---------- AI panel ---------- */
.ai-card { border: 1px solid rgba(217,70,239,.25); background: linear-gradient(180deg, var(--surface), #1b1726); }
.ai-disabled { text-align: center; padding: 14px; color: var(--text-2); }
.ai-disabled .btn { margin: 10px 0; }
.ai-output { font-size: .9rem; }
.ai-loading { display: flex; align-items: center; gap: 10px; color: var(--text-2); padding: 10px 0; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-text h4 { margin: 14px 0 6px; color: #e9d5ff; }
.ai-text p { margin-bottom: 8px; color: var(--text); }
.ai-text ul { margin: 4px 0 10px 18px; }
.ai-text li { margin-bottom: 4px; color: var(--text-2); }
.ai-text strong { color: var(--text); }
.ai-error { color: #fca5a5; padding: 8px 0; }

/* ---------- Sensor detail ---------- */
.sensor-group { margin-bottom: 18px; }
.group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.inline-search { padding: 7px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: .85rem; width: 220px; }
.discard-note { display: flex; align-items: center; gap: 6px; margin: -8px 0 18px; }

/* ---------- Forms ---------- */
.form-card { max-width: 760px; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label { font-size: .85rem; font-weight: 550; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .form-grid-2 { grid-template-columns: 1fr; } }
input:not([type]), input[type=text], input[type=password], input[type=number], input[type=search], input[type=email], select, textarea {
    padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface);
    border: 1px solid var(--border); color: var(--text); font-size: .9rem; font-family: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(234,88,12,.18); }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.hint { font-size: .8rem; color: var(--text-3); }
.hint-warn { color: var(--warn); }
.check { display: flex; align-items: center; gap: 8px; font-size: .85rem; margin: 6px 0; }
.check input { width: auto; }

/* ---------- Dropzone ---------- */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px; border: 2px dashed var(--border);
    border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: all .15s; text-align: center; }
.dropzone:hover, .dropzone.drag { border-color: var(--accent-2); background: rgba(234,88,12,.06); }
.dropzone.has-file { border-style: solid; border-color: var(--good); }
.dropzone-sm { padding: 18px 14px; gap: 6px; border-radius: var(--radius-sm); }
.dropzone-sm .dz-text { font-size: .82rem; }
.dz-text { color: var(--text-2); font-size: .9rem; }
.dz-file { color: var(--good); font-weight: 600; font-size: .88rem; }

/* ---------- Compare ---------- */
.compare-picker { max-width: 100%; }
.compare-head { margin-bottom: 16px; }
.compare-vs { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; font-weight: 600; }
.vs-a { color: var(--text-2); }
.vs-b { color: var(--text); }
.vs-sep { color: var(--accent); }
.delta-card { margin: 0; padding: 16px; border-left: 3px solid var(--text-3); }
.delta-new { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.delta-was { color: var(--text-3); font-size: .82rem; margin-left: 8px; }
.vs-tag { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-2); margin-left: 2px; }
.vs-tag-new { background: rgba(234,88,12,.2); color: var(--accent); }
.delta-card.delta-better { border-left-color: var(--good); }
.delta-card.delta-worse { border-left-color: var(--bad); }
.delta-card.delta-same, .delta-card.delta-neutral { border-left-color: var(--text-3); }

/* ---------- Community comparison (vs other builds) ---------- */
.vs-list { display: flex; flex-direction: column; }
.vs-row { display: grid; grid-template-columns: 180px 1fr 168px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.vs-row:last-child { border-bottom: 0; }
.vs-label { font-size: .88rem; font-weight: 500; }
.vs-bar { position: relative; height: 18px; background: var(--surface-3); border-radius: 9px; }
.vs-bar::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.vs-fill { position: absolute; top: 2px; bottom: 2px; max-width: 50%; border-radius: 5px; }
.vs-fill-pos { left: 50%; }
.vs-fill-neg { right: 50%; }
.vs-better .vs-fill { background: var(--good); }
.vs-worse  .vs-fill { background: var(--bad); }
.vs-same .vs-fill, .vs-neutral .vs-fill { background: var(--text-3); }
.vs-num { text-align: right; font-size: .78rem; color: var(--text-3); display: flex; flex-direction: column; gap: 1px; }
.vs-pct { font-weight: 700; font-size: .96rem; color: var(--text-2); }
.vs-better .vs-pct { color: var(--good); }
.vs-worse .vs-pct { color: var(--bad); }
.vs-legend { margin-top: 12px; }
@media (max-width: 720px) { .vs-row { grid-template-columns: 104px 1fr 116px; gap: 8px; } }

.delta-label { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: .82rem; color: var(--text-2); margin-bottom: 8px; }
.delta-title { font-weight: 600; color: var(--text); font-size: .92rem; }
.delta-label .icon { color: var(--text-3); cursor: help; }
.delta-orig { font-size: .72rem; color: var(--text-3); }
.delta-values { font-size: 1.05rem; }
.delta-change { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .82rem; color: var(--text-2); }
.delta-peak { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: .84rem; color: var(--text-2); }
.delta-cell.delta-better { color: #4ade80; }
.delta-cell.delta-worse { color: #f87171; }
.delta-cell .small { display: block; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { font-size: .74rem; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); }

/* ---------- Computers ---------- */
.computers-layout { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .computers-layout { grid-template-columns: 1fr; } }
.computers-list { display: flex; flex-direction: column; gap: 8px; }
.comp-pill { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border-soft); font-size: .9rem; font-weight: 500; }
.comp-pill:hover { background: var(--hover); }
.comp-pill-on { background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(99,102,241,.14)); border-color: rgba(249,115,22,.3); }
.comp-pill span { flex: 1; }
.mini-form { padding: 16px; margin-top: 4px; }
.mini-form .form-row { margin-bottom: 10px; }
.hidden { display: none !important; }
.part-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.part-cat-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-3); display: grid; place-items: center; flex: none; }
.part-info { flex: 1; }
.part-name { font-weight: 600; font-size: .92rem; }
.part-specs { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .78rem;
    color: var(--text-2); background: var(--surface-3); border-radius: 6px; padding: 2px 8px; }
.curve-details { margin-top: 8px; }
.curve-details summary { cursor: pointer; font-size: .82rem; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.curve-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.curve-table th { font-size: .72rem; color: var(--text-3); text-align: left; padding: 4px; text-transform: uppercase; }
.curve-table td { padding: 3px 4px; }
.curve-table input { padding: 6px 8px; font-size: .85rem; }
.curve-table td:first-child { width: 28px; color: var(--text-3); text-align: center; }
/* dashboard getting-started / onboarding */
.onboard { margin-bottom: 22px; }
.onboard > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; }
.onboard > summary::-webkit-details-marker { display: none; }
.onboard > summary h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
/* modern chevron drawn from two strokes - points down when closed, up when open */
.onboard > summary::after { content: ''; margin-left: auto; flex: none; width: 11px; height: 11px;
    border-right: 2.5px solid var(--text-2); border-bottom: 2.5px solid var(--text-2); border-radius: 1px;
    transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.onboard > summary:hover::after { border-color: var(--text); }
.onboard[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.onboard[open] > summary .onboard-sub { display: none; }
.onboard-body { margin-top: 14px; }
.onboard-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 13px; line-height: 1.55; }
.onboard-steps > li { padding-left: 4px; }
.onboard-steps ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); }
.onboard-intro { color: var(--text-2); margin: 0 0 16px; line-height: 1.55; max-width: 70ch; }
.onboard-then { margin-top: 8px; line-height: 1.5; }
/* dashboard "getting started" hero - prominent purple wrapper around the two paths */
.onboard.get-started[open] { border: 1px solid rgba(249,115,22,.4); background: linear-gradient(180deg, rgba(249,115,22,.10), var(--surface-2)); }
.onboard.get-started > summary h2 { font-size: 1.2rem; }

/* collapsible sensor detail + focus-relevant row highlight */
.sensor-detail > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; }
.sensor-detail > summary::-webkit-details-marker { display: none; }
.sensor-detail > summary h2 { margin: 0; }
.sensor-detail > summary::after { content: '▸'; margin-left: auto; color: var(--text-3); font-size: 1rem; transition: transform .15s ease; }
.sensor-detail[open] > summary::after { transform: rotate(90deg); }
.sensor-detail-body { margin-top: 16px; }
.sensor-row.focus-match { background: rgba(234,88,12, .06); }
.sensor-row.focus-match td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* while editing a build, hide the top "Edit build" toggle (Save/Cancel are in the sheet) */
.detail-grid.editing .edit-toggle-top { display: none; }
.curve-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.curve-copy label { font-size: .78rem; color: var(--text-2); }
.curve-copy select { padding: 5px 8px; font-size: .82rem; max-width: 220px; }
.curve-copy .curve-copy-msg { margin-left: 2px; }

/* ---------- Build sheet (one slot per component) ---------- */
.build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.build-slot { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.slot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.slot-head .part-cat-icon { width: 30px; height: 30px; border-radius: 8px; }
.slot-label { font-weight: 600; font-size: .9rem; }
.slot-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.slot-item:last-of-type { border-bottom: 0; }
.slot-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slot-item-main .part-name { font-size: .88rem; }
.slot-remove { display: inline-flex; align-items: center; flex: none; }
.slot-remove.inline { margin-left: 8px; }
.trash-btn { background: none; border: 0; color: var(--bad); cursor: pointer; padding: 3px 5px; display: inline-flex; border-radius: 6px; transition: background .12s, color .12s; }
.trash-btn:hover { color: #fff; background: var(--bad); }
/* add-picker inside a slot */
.slot-add { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-soft); display: flex; flex-direction: column; gap: 6px; }
.add-row-fields { display: flex; gap: 6px; }
.add-row-fields input { flex: 1; min-width: 0; }
.add-row-wide { max-width: 560px; }
.slot-adds { display: flex; flex-direction: column; }
.slot-add-btn { margin-top: 8px; }
.picker-discard { align-self: center; }
/* missing integral part: red-bordered slot + tag */
.slot-missing { border-color: var(--bad); box-shadow: 0 0 0 1px rgba(239, 68, 68, .35); }
.slot-missing-tag { margin-left: auto; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--bad); background: rgba(239, 68, 68, .14); padding: 2px 8px; border-radius: 999px; }

/* part source tag: auto-detected by the agent vs added by hand */
.part-src { display: inline-block; margin-left: 7px; font-size: .6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.part-src-agent  { background: rgba(52, 211, 153, .15); color: var(--good); }
.part-src-manual { background: var(--surface-3); color: var(--text-3); }
html[data-theme="light"] .part-src-agent { color: #15803d; }

/* per-component rating tag (Great/Good/Average/Bad/Poor) */
.rate-tag { flex: none; align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rate-great   { background: rgba(34, 197, 94, .16);  color: #4ade80; }
.rate-good    { background: rgba(132, 204, 22, .16); color: #a3e635; }
.rate-average { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.rate-bad     { background: rgba(249, 115, 22, .16); color: #fb923c; }
.rate-poor    { background: rgba(239, 68, 68, .16);  color: #f87171; }

/* rule-based recommendation block inside the panel */
.rec-pick { background: var(--surface-3); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 12px;
    border-left: 3px solid var(--accent); }
.rec-pick-head { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: .92rem; }
.rec-current { font-size: .8rem; color: var(--text-3); margin: 5px 0 7px; }
.rec-pick p { font-size: .86rem; color: var(--text-2); line-height: 1.5; margin: 0; }
.rec-sugg { margin-top: 8px !important; color: var(--accent) !important; display: flex; align-items: center; gap: 5px; }
.rec-balanced { border-left-color: var(--good); }
.rec-minor { border-left-color: var(--text-3); }
.rec-platform { border-left-color: var(--warn); }
.rec-bad { border-left-color: var(--bad); }
.rec-points { margin: 8px 0 0; padding-left: 16px; font-size: .84rem; color: var(--text-2); }
.rec-points li { margin: 3px 0; }
.rec-points .rp-good { color: #86efac; }
.rec-points .rp-bad { color: #fca5a5; }
.rec-requires { margin-top: 8px !important; color: var(--warn) !important; display: flex; align-items: center; gap: 5px; font-size: .82rem !important; }
.ai-keynote { margin-top: 10px; }

/* read-only vs edit toggle */
.comp-head { min-height: 104px; }
.comp-head .header-actions { flex-wrap: wrap; }
/* one-line note keeps the header card a constant height across builds */
.comp-notes { margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* detail layout: header + components on the left, recommendations on the right */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.detail-main { min-width: 0; }
.detail-side { position: sticky; top: 24px; }
.detail-side .ai-card { margin-bottom: 0; }
/* read-only components show two columns inside the wide left column */
#build-readonly .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* edit mode goes full width and hides the recommendations rail */
#build-sheet { display: none; }
.detail-grid.editing { grid-template-columns: 1fr; }
.detail-grid.editing #build-sheet { display: block; }
.detail-grid.editing #build-readonly { display: none; }
.detail-grid.editing .detail-side { display: none; }
@media (max-width: 1300px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-side { position: static; }
    #build-readonly .build-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.build-actions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 12px; align-items: center;
    margin: 4px 0 0; padding: 14px 4px 18px; background: linear-gradient(to top, var(--bg) 60%, transparent); }
.build-warn { align-items: flex-start; }
.link-btn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }

/* ---------- Instructions ---------- */
.instructions { padding: 0; }
.instructions > summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; }
.instructions > summary::-webkit-details-marker { display: none; }
.instructions > summary h2 { margin: 0; }
.instructions[open] > summary { border-bottom: 1px solid var(--border-soft); }
.instructions .steps, .instructions .instr-sub, .instructions .instr-table, .instructions > p { margin: 14px 22px; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 8px; color: var(--text-2); }
.steps strong { color: var(--text); }
.instr-sub { font-size: .95rem; }
.instr-table td { vertical-align: top; font-size: .85rem; }
.instr-table td:first-child { white-space: nowrap; }

/* ---------- New-build inline field ---------- */
.new-build-input { margin-top: 8px; }
.program-other { margin-top: 8px; }

/* ---------- Compare tabs + upload ---------- */
.compare-tabs, .admin-tabs { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); margin-bottom: 18px; }
.admin-tabs { flex-wrap: wrap; }
.admin-tabs .tab-btn { text-decoration: none; }
.tab-btn { padding: 7px 16px; border-radius: 7px; background: transparent; border: none; color: var(--text-2); font-size: .86rem; font-weight: 550; cursor: pointer; font-family: inherit; }
.tab-btn:hover { color: var(--text); }
.tab-btn.tab-on { background: var(--accent-grad); color: #fff; }
.compare-upload-grid { gap: 22px; }
.upload-col { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 16px; }
.upload-col h3 { margin-bottom: 12px; }
.upload-col .vs-a { color: var(--text-2); }
.upload-col .vs-b { color: var(--text); }
.upload-col .form-row { margin-bottom: 10px; }
.compare-vs .muted { font-weight: 400; }

/* ---------- Auth / login ---------- */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.auth-card { width: 100%; max-width: 380px; background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-form .form-row { margin-bottom: 16px; }
.auth-form .btn-block { margin-top: 6px; }
.auth-hint { margin-top: 16px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.auth-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--text-3); font-size: .78rem; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-alt-btn { background: transparent; border: 1px solid var(--border); color: var(--text); }
.auth-alt-btn:hover { border-color: var(--accent); color: #fff; }
.auth-alt { margin-top: 18px; text-align: center; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.label-row .small { font-size: .8rem; }

/* ---------- Users page ---------- */
.inline-details { display: inline-block; position: relative; }
.inline-details > summary { list-style: none; cursor: pointer; }
.inline-details > summary::-webkit-details-marker { display: none; }
.popform { display: flex; gap: 6px; align-items: center; margin-top: 8px; padding: 10px;
    background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.popform input { width: 160px; }

/* ---------- Instrument: monospaced numerics ---------- */
.stat-value, .hl-value { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sensor-table td:not(.sensor-name) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sensor-table th { letter-spacing: .07em; }

/* ---------- Instrument report (test page hero) ---------- */
/* No overflow:hidden. It was here so the full-bleed .report-bar could not poke its
   square corners outside the card's rounded ones, but it also clipped every tooltip
   inside the report - a tooltip belongs on top of the page, not inside a box. The bar
   now carries the matching radius itself, which does the same job without clipping
   descendants. */
.report { padding: 0; }
.report-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 20px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0; }
.report-file { font-family: var(--mono); font-size: .82rem; color: var(--text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-pill { flex: none; font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--good); border: 1px solid rgba(52,211,153,.35); background: rgba(52,211,153,.08); padding: 3px 9px; border-radius: 6px; }
.report-body { padding: 22px 20px; }
.report-score { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
/* Idle-time control / banner. Understated by default (a quiet offer), quietly emphasised
   when active so it is clear the numbers on screen are the trimmed set. */
.report-idle { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-top: 14px; font-size: .84rem; color: var(--text-2); }
.report-idle svg { flex: none; color: var(--text-3); }
.report-idle a { color: var(--accent); text-decoration: none; font-weight: 600; }
.report-idle a:hover { text-decoration: underline; }
.report-idle-on { padding: 10px 13px; border-radius: var(--radius-sm);
    background: var(--surface-3); border: 1px solid var(--border-soft); }
.report-idle-on svg { color: var(--accent); }
.report-idle-on strong { color: var(--text); font-variant-numeric: tabular-nums; }
.rs-num { font-family: var(--mono); font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--text); }
.rs-num small { font-size: 1rem; font-weight: 600; color: var(--text-3); margin-left: 3px; }
.rs-num.score-mid { color: var(--warn); } .rs-num.score-bad { color: var(--bad); }
.rs-meta { display: flex; flex-direction: column; gap: 7px; }
.rs-label { font-family: var(--mono); text-transform: uppercase; font-size: .68rem; letter-spacing: .16em; color: var(--text-3); }
.rs-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-tag { font-family: var(--mono); font-size: .7rem; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-2); }
.rs-tag.t-good { color: #6ee7b7; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.rs-tag.t-mid  { color: #fcd34d; border-color: rgba(250,204,21,.4); background: rgba(250,204,21,.08); }
.rs-tag.t-bad  { color: #fca5a5; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.rs-tag.t-focus { color: var(--accent-ink); border-color: rgba(249,115,22,.4); background: rgba(249,115,22,.08); }

.rpt-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.rpt-row { display: grid; grid-template-columns: minmax(116px,168px) minmax(70px,auto) 1fr minmax(54px,auto);
    align-items: center; gap: 16px; padding: 9px 6px; border-radius: 7px; }
.rpt-row.has-tip { cursor: default; }
.rpt-row:hover { background: rgba(255,255,255,.025); }
.rpt-k { font-family: var(--mono); font-size: .73rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt-v { font-family: var(--mono); font-size: .92rem; color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rpt-bar i { display: block; height: 100%; border-radius: 3px; background: var(--text-3); transition: width .3s ease; }
.rpt-bar i.ok { background: var(--good); } .rpt-bar i.warn { background: var(--warn); }
.rpt-bar i.bad { background: var(--bad); } .rpt-bar i.acc { background: var(--accent); }
/* clock/fan rows have no meaningful "% of limit" - leave the bar slot blank
   (keeps columns aligned) rather than a striped placeholder that reads as clutter */
.rpt-bar.empty { background: transparent; }
.rpt-status { font-family: var(--mono); font-size: .73rem; text-align: right; white-space: nowrap; color: var(--text-3); }
.rpt-status.ok { color: #6ee7b7; } .rpt-status.warn { color: #fcd34d; } .rpt-status.bad { color: #fca5a5; }
.rpt-verdict { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); color: var(--text-2); font-size: .9rem; }
.rpt-verdict b { color: var(--accent); margin-right: 6px; font-weight: 700; }
.rpt-vs { margin-top: 8px; }
/* "What to change" zone: findings folded into the report card */
.rpt-findings { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.rpt-findings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.rpt-findings-head h3 { margin: 0; font-family: var(--mono); text-transform: uppercase; font-size: .72rem; letter-spacing: .14em; color: var(--text-3); }
.rpt-findings-meta { display: flex; align-items: center; gap: 10px; }
.rpt-ai { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.rpt-ai .ai-output:empty { display: none; }
.rpt-ai .ai-output { margin-top: 12px; }
.report .has-tip::after { left: auto; right: 0; }
@media (max-width: 640px) {
    .rpt-row { grid-template-columns: 1fr auto; grid-template-areas: "k v" "bar bar" "st st"; gap: 5px 12px; }
    .rpt-k { grid-area: k; } .rpt-v { grid-area: v; } .rpt-bar { grid-area: bar; } .rpt-status { grid-area: st; text-align: left; }
}

/* report (2/3) + compact advisor (1/3) */
.report-row { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.report-row > .card { margin-bottom: 0; }
@media (max-width: 980px) { .report-row { grid-template-columns: 1fr; } }
.advice-verdict { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: .92rem; }
.advice-verdict.v-good { color: #6ee7b7; } .advice-verdict.v-mid { color: #fcd34d; } .advice-verdict.v-bad { color: #fca5a5; }
.advice-line { color: var(--text-2); font-size: .9rem; margin-top: 9px; line-height: 1.5; }
.advice-vs { color: var(--text-3); font-size: .82rem; margin-top: 10px; }
.advice-vs strong { color: var(--text-2); }
html[data-theme="light"] .advice-verdict.v-good { color: #15803d; }
html[data-theme="light"] .advice-verdict.v-mid { color: #b45309; }
html[data-theme="light"] .advice-verdict.v-bad { color: #b91c1c; }

/* ===== Dashboard: two data paths + Agent page ===== */
.paths-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.paths-in-step { margin: 12px 0 4px; }
.onboard-bench { margin-top: 10px; line-height: 1.5; }
.path { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 20px; background: var(--surface-2);
    display: flex; flex-direction: column; }
.path-agent { border-color: rgba(249,115,22,.4); background:
    linear-gradient(180deg, rgba(249,115,22,.07), var(--surface-2) 60%); }
.path-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.path-head h3 { font-size: 1.02rem; display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.path-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
    color: var(--text-3); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; }
.path-tag-easy { color: var(--accent-ink); border-color: rgba(249,115,22,.45); background: rgba(249,115,22,.1); }
.path-tag-rec { color: #fff; border-color: rgba(249,115,22,.9); background: rgba(249,115,22,.85); }
.path p { color: var(--text-2); font-size: .92rem; }
.path-question { color: var(--text-2); border-left: 2px solid var(--border); padding-left: 11px; }
.path-question strong { color: var(--text); }
.path-note { margin-top: -2px; line-height: 1.45; }
.path ol { margin: 12px 0 16px 18px; color: var(--text-2); font-size: .9rem; display: flex; flex-direction: column; gap: 5px; }
.path .btn { align-self: flex-start; margin-top: auto; }
.path-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.path-actions .btn { margin-top: 0; align-self: auto; }

.agent-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; margin-bottom: 18px; }
.agent-dl { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 18px; }
.agent-steps { margin: 0 0 16px 18px; color: var(--text-2); display: flex; flex-direction: column; gap: 7px; }
.agent-note { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--text-3);
    border-top: 1px solid var(--border-soft); padding-top: 14px; }
.agent-pair-card { display: flex; flex-direction: column; }
.pair-code { font-family: var(--mono, ui-monospace, monospace); font-size: 2rem; font-weight: 700; letter-spacing: .22em;
    text-align: center; padding: 16px; margin: 6px 0 8px; border: 1px dashed rgba(249,115,22,.5);
    border-radius: var(--radius); background: rgba(249,115,22,.07); color: var(--accent-ink);
    /* whole box is the copy button */
    display: flex; align-items: center; justify-content: center; gap: 14px; position: relative;
    width: 100%; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.pair-code:hover { background: rgba(249,115,22,.13); border-color: rgba(249,115,22,.75); }
.pair-code:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(249,115,22,.3); }
.pair-code-text { flex: 1; }
.pair-code-copy { position: absolute; right: 14px; display: inline-flex; align-items: center;
    color: var(--text-3); font-family: var(--font); font-size: .72rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; transition: color .15s ease; }
.pair-code:hover .pair-code-copy { color: var(--text-2); }
.pair-code.is-copied { border-color: rgba(34,197,94,.7); background: rgba(34,197,94,.10); }
.pair-code.is-copied .pair-code-copy { color: #22c55e; }
.agent-devices { margin-top: 20px; border-top: 1px solid var(--border-soft); padding-top: 16px; }
.agent-devices h3 { font-size: .95rem; margin-bottom: 10px; }
.device-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.device-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface-2); }
.device-list .device-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.device-list form { margin-left: auto; }

@media (max-width: 880px) {
    .paths-two, .agent-grid { grid-template-columns: 1fr; }
}

/* ===================== "How are we doing?" review modal ===================== */
body.modal-open { overflow: hidden; }
.review-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(6, 7, 10, .68); backdrop-filter: blur(4px);
    animation: review-fade .18s ease;
}
/* The class sets display:flex, so the plain [hidden] attribute needs an explicit
   override to actually keep the modal hidden until it's opened. */
.review-overlay[hidden] { display: none; }

/* Permanent "leave a review" entry at the bottom of the results page. */
.review-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 22px 0 6px; padding: 14px 18px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.review-cta-text { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.review-cta-text strong { color: var(--text); }

/* Dashboard review card: the accent button + a small dismiss (x). */
.review-dash-actions { display: flex; align-items: center; gap: 8px; }
.review-dash-x {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.review-dash-x:hover { background: var(--hover); color: var(--text); }
@keyframes review-fade { from { opacity: 0; } to { opacity: 1; } }
.review-card {
    position: relative; width: 100%; max-width: 460px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
    animation: review-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes review-pop { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.review-x {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.review-x:hover { background: var(--hover); color: var(--text); }
.review-body { padding: 30px 28px 22px; text-align: center; }
.review-body.hidden { display: none; }
.review-body h2 { margin: 0 0 8px; font-size: 23px; }
.review-sub { color: var(--text-2); font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.review-stepper {
    display: flex; gap: 10px; justify-content: center; margin: 8px 0 12px; outline: none;
}
.review-stepper:focus-visible { box-shadow: 0 0 0 3px rgba(249,115,22,.35); border-radius: 14px; }
.rev-seg {
    flex: 1; max-width: 80px; height: 48px; border-radius: 11px; cursor: pointer;
    border: 1px solid var(--border-strong, var(--border)); background: var(--surface-2);
    color: var(--text-3); font-family: inherit; font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    transition: background .12s, transform .12s, border-color .12s, color .12s, box-shadow .12s;
}
.rev-seg .rev-seg-n { pointer-events: none; opacity: .9; }
.rev-seg:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--text); }
.rev-seg.on { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 3px 12px rgba(249,115,22,.35); }
.review-scoreline { margin-bottom: 20px; min-height: 24px; }
.review-score-num { font-size: 22px; font-weight: 800; color: var(--text); }
.review-score-den { color: var(--text-3); font-weight: 700; }
.review-score-word { margin-left: 10px; color: var(--accent-ink); font-weight: 600; font-size: 14px; }
.review-label { display: block; text-align: left; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.review-text {
    width: 100%; resize: vertical; min-height: 64px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); padding: 10px 12px; font-family: inherit; font-size: 14px;
}
.review-text:focus { outline: none; border-color: var(--accent); }
.review-actions { margin: 18px 0 12px; }
.review-actions .btn { width: 100%; justify-content: center; }
.review-foot { line-height: 1.45; margin: 4px 0 0; }
.review-done-mark {
    width: 56px; height: 56px; margin: 6px auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: #fff; background: var(--accent-grad);
    box-shadow: 0 6px 18px rgba(249,115,22,.4);
}

/* ===================== Chat widget (footer) ===================== */
.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 900; }
.chat-fab {
    position: relative; width: 56px; height: 56px; border-radius: 50%;
    border: none; cursor: pointer; color: #fff; background: var(--accent-grad);
    box-shadow: 0 8px 22px rgba(234,88,12,.45);
    display: flex; align-items: center; justify-content: center; transition: transform .15s;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.04); }
.chat-widget.has-unread .chat-fab { animation: chat-pulse 1.8s ease-out infinite; }
@keyframes chat-pulse {
    0%   { box-shadow: 0 8px 22px rgba(234,88,12,.45), 0 0 0 0 rgba(249,115,22,.55); }
    70%  { box-shadow: 0 8px 22px rgba(234,88,12,.45), 0 0 0 16px rgba(249,115,22,0); }
    100% { box-shadow: 0 8px 22px rgba(234,88,12,.45), 0 0 0 0 rgba(249,115,22,0); }
}
.chat-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: 10px; background: var(--bad); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--bg);
}
.chat-panel {
    position: absolute; right: 0; bottom: 70px; width: 340px; max-width: 86vw;
    height: 460px; max-height: 70vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.5); overflow: hidden;
}
.chat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.chat-title { font-weight: 700; font-size: 14px; }
.chat-close { background: none; border: none; color: var(--text-2); font-size: 22px; cursor: pointer; line-height: 1; }
.chat-close:hover { color: var(--text); }
.chat-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { text-align: center; margin: auto 10px; }
.chat-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--surface-2); }
.chat-compose textarea {
    flex: 1; resize: none; max-height: 96px; background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 14px;
}
.chat-compose textarea:focus { outline: none; border-color: var(--accent); }
.msg { display: flex; flex-direction: column; max-width: 84%; }
.msg-admin { align-self: flex-start; align-items: flex-start; }
.msg-user { align-self: flex-end; align-items: flex-end; }
.msg-bubble { padding: 8px 12px; border-radius: 13px; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.msg-admin .msg-bubble { background: var(--surface-3); color: var(--text); border-bottom-left-radius: 4px; }
.msg-user .msg-bubble { background: var(--accent-grad); color: #fff; border-bottom-right-radius: 4px; }
.msg-meta { font-size: 11px; color: var(--text-3); margin-top: 3px; }

/* ===================== Admin testimonials page ===================== */
.tm-list { display: flex; flex-direction: column; gap: 12px; }
.tm-row { display: flex; gap: 16px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.tm-score { color: var(--accent); font-size: 16px; white-space: nowrap; letter-spacing: 1px; }
.tm-score .tm-num { color: var(--text-2); font-size: 13px; margin-left: 6px; letter-spacing: 0; }
.tm-main { flex: 1; min-width: 0; }
.tm-who { margin-bottom: 4px; }
.tm-body { margin: 0; color: var(--text); line-height: 1.5; }
.tm-acts { display: flex; gap: 8px; }
.tm-acts form { margin: 0; }
.tm-pill { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.tm-pill-ok { background: rgba(52,211,153,.14); color: var(--good); }
.tm-pill-low { background: rgba(250,204,21,.14); color: var(--warn); }
.tm-pill-new { background: rgba(239,68,68,.16); color: var(--bad); }
.thread { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: var(--surface-2); }
.thread-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.thread-msgs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; padding: 4px 0; }
.thread-reply textarea { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 14px; resize: vertical; }
.thread-reply textarea:focus { outline: none; border-color: var(--accent); }
.thread-reply-acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.thread-email-opt { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.thread-email-opt.disabled { opacity: .5; cursor: not-allowed; }
.status-pill { display: inline-block; padding: 1px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.status-approved { background: rgba(52,211,153,.14); color: var(--good); }
.status-pending  { background: rgba(249,115,22,.16); color: var(--accent-ink); }
.status-private  { background: rgba(154,163,178,.14); color: var(--text-2); }
.status-rejected { background: rgba(239,68,68,.14); color: var(--bad); }
.tm-row-acts { display: flex; gap: 6px; }
.tm-row-acts form { margin: 0; }

@media (max-width: 560px) {
    .tm-row { flex-direction: column; gap: 10px; }
    .chat-panel { right: -6px; }
}

/* ===== Admin per-user review (admin_user.php) ===== */
.admin-view-banner { margin-bottom: 18px; }
.admin-build { padding: 16px 0; border-top: 1px solid var(--border-soft); }
.admin-build:first-of-type { border-top: 0; padding-top: 4px; }
.admin-build-name { display: flex; align-items: center; gap: 10px; font-size: 1.04rem; margin-bottom: 10px; }

/* ---- "Start here" top-finding callout on the test report ---- */
.rpt-top { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; padding: 13px 16px;
    border: 1px solid var(--border-soft); border-left: 3px solid var(--warn); border-radius: 10px;
    background: rgba(250,204,21, .06); }
.rpt-top-good { border-left-color: var(--good); background: rgba(52, 211, 153, .07); }
.rpt-top-bad  { border-left-color: var(--bad);  background: rgba(239, 68, 68, .07); }
.rpt-top-tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); }
.rpt-top-good .rpt-top-tag { color: var(--good); }
.rpt-top-bad .rpt-top-tag { color: var(--bad); }
.rpt-top-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rpt-top-body strong { font-size: .98rem; font-weight: 650; }
.rpt-top-body span { color: var(--text-2); font-size: .86rem; }
.rpt-top-more { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-size: .8rem; color: var(--accent); font-weight: 550; }
@media (max-width: 620px) { .rpt-top { flex-wrap: wrap; } .rpt-top-more { margin-left: 0; } }

/* ---- admin traffic analytics ---- */
.tf-range { display: flex; gap: 6px; margin-bottom: 18px; }
.tf-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
.tf-kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; }
.tf-kpi-n { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.tf-kpi-l { color: var(--text-2); font-size: .9rem; }
.tf-bar-row { display: grid; grid-template-columns: 130px 1fr 120px; align-items: center; gap: 12px; padding: 7px 0; }
.tf-bar-label { font-size: .92rem; }
.tf-bar { height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.tf-bar i { display: block; height: 100%; border-radius: 5px; }
.tf-src-search { background: var(--good); }
.tf-src-direct { background: var(--accent); }
.tf-src-referral { background: var(--accent-2); }
.tf-src-social { background: var(--warn); }
.tf-bar-n { text-align: right; font-size: .9rem; }
.tf-days { display: flex; align-items: flex-end; gap: 6px; height: 132px; padding: 8px 2px 0; }
.tf-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.tf-day-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.tf-day-bar i { display: block; width: 100%; background: var(--accent-grad); border-radius: 4px 4px 0 0; }
.tf-day-x { font-size: .7rem; color: var(--text-2); }
.tf-tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .tf-tables { grid-template-columns: 1fr; } .tf-kpis { grid-template-columns: 1fr; } }

/* ---------- Admin dashboard ---------- */
.adm-kpi-caption { color: var(--text-3); font-size: .8rem; margin: 0 0 10px; }
/* "Needs attention" strip: the admin's to-do as linked counts. Reads left to right like a
   sentence, wraps on narrow screens, and quietly confirms when there's nothing to do. */
.adm-attention { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
    padding: 13px 18px; margin-bottom: 16px; }
.adm-att-lead { font-family: var(--mono); text-transform: uppercase; font-size: .64rem;
    letter-spacing: .1em; color: var(--text-3); }
.adm-att-item { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    color: var(--text-2); font-size: .9rem; padding: 4px 10px 4px 4px; border-radius: 999px;
    border: 1px solid var(--border-soft); background: var(--surface-2); }
.adm-att-item:hover { color: var(--text); border-color: var(--warn); }
.adm-att-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
    height: 22px; padding: 0 6px; border-radius: 999px; font-family: var(--mono); font-weight: 700;
    font-size: .8rem; color: #1a1d27; background: var(--warn); }
.adm-attention.is-clear { padding: 11px 18px; }
.adm-att-clear { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: .88rem; }
.adm-att-clear svg { color: var(--good); }

.adm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.adm-kpi { margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.adm-kpi-top { display: flex; align-items: center; gap: 10px; }
.adm-kpi-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-3); display: grid; place-items: center; flex: none; }
.adm-kpi-label { font-size: .78rem; color: var(--text-2); }
.adm-kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.adm-kpi-foot { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--text-3); }
.adm-delta { font-weight: 700; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.adm-delta.up { color: #4ade80; }
.adm-delta.down { color: #f87171; }
.adm-delta.flat { color: var(--text-3); }
html[data-theme="light"] .adm-delta.up { color: #15803d; }
html[data-theme="light"] .adm-delta.down { color: #b91c1c; }

/* Collapsible section (native <details>) */
.adm-section { margin-bottom: 16px; padding: 0; overflow: hidden; }
.adm-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px;
    padding: 15px 20px; user-select: none; }
.adm-section > summary::-webkit-details-marker { display: none; }
.adm-section > summary::marker { content: ""; }
.adm-section > summary:hover { background: rgba(255,255,255,.02); }
html[data-theme="light"] .adm-section > summary:hover { background: rgba(20,30,60,.03); }
.adm-section-title { font-size: 1rem; font-weight: 650; display: flex; align-items: center; gap: 9px; }
.adm-section-title svg { color: var(--accent-ink); }
.adm-section-meta { color: var(--text-3); font-size: .78rem; margin-left: auto; text-align: right; }
.adm-chevron { display: inline-flex; color: var(--text-3); transition: transform .18s ease; }
.adm-section[open] > summary .adm-chevron { transform: rotate(90deg); }
.adm-section-body { padding: 4px 20px 18px; }
.adm-section-body.is-flush { padding: 0; }
.adm-section-body.is-flush .data-table th:first-child,
.adm-section-body.is-flush .data-table td:first-child { padding-left: 20px; }
.adm-section-body.is-flush .data-table th:last-child,
.adm-section-body.is-flush .data-table td:last-child { padding-right: 20px; }
.adm-loading { padding: 22px 20px; color: var(--text-3); font-size: .85rem; display: flex; align-items: center; gap: 10px; }
.adm-spinner { width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%;
    animation: adm-spin .7s linear infinite; flex: none; }
@keyframes adm-spin { to { transform: rotate(360deg); } }
.adm-toolbar { display: flex; gap: 10px; align-items: center; padding: 14px 20px 6px; flex-wrap: wrap; }
.adm-search { flex: 1 1 240px; max-width: 340px; }
.adm-pager { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 14px 20px; flex-wrap: wrap; }
.adm-pager-info { color: var(--text-3); font-size: .8rem; }

/* Security / hardening checklist panel */
.adm-notices > summary .adm-section-title svg { color: var(--warn); }
.adm-notice { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.adm-notice:first-of-type { border-top: none; }
.adm-notice-body { min-width: 0; }
.adm-notice-title { font-weight: 600; font-size: .9rem; }
.adm-notice-detail { margin-top: 3px; line-height: 1.5; }
.adm-notice-cat { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
    border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.adm-notice-sev { flex: none; font-size: .64rem; font-weight: 800; letter-spacing: .05em; border-radius: 5px;
    padding: 3px 7px; margin-top: 1px; min-width: 58px; text-align: center; }
.adm-notice-sev.sev-high { background: rgba(239,68,68,.16); color: #f87171; }
.adm-notice-sev.sev-medium { background: rgba(250,204,21,.16); color: #facc15; }
.adm-notice-sev.sev-low { background: rgba(59,130,246,.16); color: #60a5fa; }
.adm-notice-sev.sev-info { background: var(--surface-3); color: var(--text-2); }
html[data-theme="light"] .adm-notice-sev.sev-high { color: #b91c1c; }
html[data-theme="light"] .adm-notice-sev.sev-medium { color: #b45309; }
html[data-theme="light"] .adm-notice-sev.sev-low { color: #1d4ed8; }

/* ---------- Ads (direct-sold house ads) ---------- */
.ut-slot-wrap { position: relative; display: block; width: fit-content; line-height: 0; }
.ut-slot-link img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.ut-slot-tag { position: absolute; top: 5px; right: 5px; font: 700 .55rem/1.6 var(--font); letter-spacing: .06em;
    text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); border-radius: 4px; padding: 0 5px; pointer-events: none; }
.ut-slot-sidebar { margin: 10px 16px 2px; width: auto; }
.ut-slot-sidebar img { width: 100%; }
[data-sidebar="collapsed"] .ut-slot-sidebar { display: none; }
.ut-slot-strip { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 900;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 7px;
    box-shadow: var(--shadow); display: flex; align-items: center; gap: 7px; max-width: 94vw; }
.ut-slot-strip img { max-height: 90px; }
.ut-slot-strip-x { background: var(--surface-3); border: none; color: var(--text-2); border-radius: 50%;
    width: 22px; height: 22px; cursor: pointer; font-size: 15px; line-height: 1; flex: none; }
.ut-slot-strip-x:hover { color: var(--text); }

/* Paired start/end date inputs sharing one form-row 50/50 (flatpickr or native). */
.date-pair { display: flex; gap: 8px; }
.date-pair input { flex: 1; min-width: 0; }

/* Info-icon tooltip trigger (used with .has-tip / data-tip). */
.tip-ico { cursor: help; color: var(--text); display: inline-flex; vertical-align: middle; }
.tip-ico:hover { color: var(--accent-ink); }

/* Premium upsell shown in place of the AI deep-dive control for non-premium users. */
.rpt-ai-upsell { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; border-top: 1px solid var(--border-soft); margin-top: 6px; padding-top: 14px; }
.rpt-ai-upsell > span { color: var(--text-2); font-size: .9rem; display: inline-flex; align-items: center; gap: 8px; }
.rpt-ai-upsell .btn { flex: none; }
.ai-upsell { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px 14px;
    margin-top: 10px; background: var(--surface-2); }
.ai-upsell p { margin: 0; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* iOS-style toggle switch (submits a form on click; used for the admin AI-beta switch). */
.ut-toggle-wrap { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; cursor: help; }
.ut-toggle-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.ut-toggle { padding: 0; margin: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.ut-toggle-track { display: inline-block; width: 34px; height: 20px; border-radius: 999px;
    background: var(--surface-3); border: 1px solid var(--border); position: relative;
    transition: background .15s ease, border-color .15s ease; }
.ut-toggle-knob { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .16s ease; }
.ut-toggle.is-on .ut-toggle-track { background: var(--accent); border-color: var(--accent); }
.ut-toggle.is-on .ut-toggle-knob { transform: translateX(14px); }
.ut-toggle:focus-visible .ut-toggle-track { box-shadow: 0 0 0 3px rgba(249,115,22,.35); outline: none; }

/* Admin -> user message thread on the user detail page. */
.msg-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-height: 320px; overflow-y: auto; }
.msg-line { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; max-width: 80%; }
.msg-line.is-admin { align-self: flex-end; background: rgba(249,115,22,.14); border: 1px solid rgba(249,115,22,.25); }
.msg-line.is-user { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.msg-who { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.msg-text { color: var(--text); font-size: .9rem; line-height: 1.45; white-space: pre-wrap; }
.msg-when { font-size: .68rem; }

.wm-un { color: var(--accent); }

/* ============================================================================
   Dashboard status panel (app/dashboard.php) - the at-a-glance readout of the
   user's latest run. Reuses the run page's score/verdict tokens (.rs-num,
   .rs-tag, .rec-pick) and the shared surface/line/accent vars.
   ============================================================================ */

/* Status band: score + verdict + file/time | delta | fact pills. */
.db-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; }
.db-score-block { display: flex; align-items: center; gap: 18px; min-width: 0; }
.db-score-block .rs-num { font-size: 2.7rem; }
.db-score-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.db-score-meta .rs-tag { align-self: flex-start; }
.db-file { font-weight: 650; font-size: .95rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.db-time { color: var(--text-3); }

.db-status-facts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.db-divider { width: 1px; align-self: stretch; min-height: 42px; background: var(--border); flex: 0 0 auto; }
.db-delta { display: flex; flex-direction: column; gap: 3px; }
.db-delta-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.db-delta-v { display: flex; align-items: baseline; gap: 4px; font-family: var(--mono); }
.db-delta-v small { color: var(--text-3); font-size: .72rem; }
.db-delta-empty { font-size: .82rem; color: var(--text-2); max-width: 190px; line-height: 1.35; }

.db-arrow { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.db-arrow.db-up { color: var(--good); }
.db-arrow.db-down { color: var(--bad); }
.db-arrow.db-flat { color: var(--text-3); font-weight: 600; }

.db-pills { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
    padding: 5px 11px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2); }
.db-pill svg { color: var(--text-3); }
.db-pill.db-pill-warn { color: var(--warn); border-color: rgba(250,204,21,.34); background: rgba(250,204,21,.08); }
.db-pill.db-pill-warn svg { color: var(--warn); }
.db-pill.db-pill-good { color: var(--good); border-color: rgba(52,211,153,.34); background: rgba(52,211,153,.08); }
.db-pill.db-pill-good svg { color: var(--good); }

/* Two-column row: start-here (left) + run-over-run verdict (right). */
.db-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
@media (max-width: 860px) { .db-cols { grid-template-columns: 1fr; } }

.db-starthere { display: flex; flex-direction: column; gap: 9px; border-left: 4px solid var(--accent); margin: 0; }
.db-starthere.db-clear { border-left-color: var(--good); }
.db-sh-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 650;
    text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.db-starthere.db-clear .db-sh-tag { color: var(--good); }
.db-sh-body { display: flex; flex-direction: column; gap: 4px; }
.db-sh-body strong { font-size: 1.02rem; font-weight: 650; line-height: 1.3; }
.db-sh-body span { color: var(--text-2); font-size: .88rem; line-height: 1.5; }
.db-sh-link { align-self: flex-start; margin-top: auto; font-size: .84rem; font-weight: 550; }

.db-verdict { margin: 0; }
.db-verdict .card-header { margin-bottom: 12px; }
.db-verdict .rec-pick { margin-bottom: 0; }
.db-verdict-src { margin-top: 10px; }
.db-verdict-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--text-2); }
.db-verdict-empty p { font-size: .88rem; line-height: 1.5; margin: 0; }

/* Trend sparkline cards. */
.db-trends { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; }
.db-trend { margin: 0; padding: 15px 17px; display: flex; flex-direction: column; gap: 6px; }
.db-trend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-trend-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 600; }
.db-trend-delta .db-arrow { font-size: .82rem; }
.db-trend-val { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.db-spark { display: block; width: 100%; height: 34px; margin-top: 2px; color: var(--accent); overflow: visible; }

/* Regression watch strip (reuses .flash.flash-warn, made a full-row link). */
.db-watch { text-decoration: none; margin-bottom: 22px; }
.db-watch span { line-height: 1.45; font-size: .88rem; }
.db-watch-more { white-space: nowrap; font-weight: 600; opacity: .85; }

/* Recent runs list. */
.db-recent { margin-bottom: 22px; }
.db-run-list { display: flex; flex-direction: column; }
.db-run { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.db-run:first-child { border-top: 0; }
.db-run-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.db-run-meta { color: var(--text-3); }
.db-chip { flex: 0 0 auto; font-family: var(--mono); font-weight: 700; font-size: 1rem; padding: 3px 10px;
    border-radius: var(--radius-sm); border: 1px solid var(--border); }
.db-chip small { font-size: .62rem; font-weight: 600; color: var(--text-3); margin-left: 1px; }
.db-chip.db-chip-good { color: #6ee7b7; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.db-chip.db-chip-mid  { color: #fcd34d; border-color: rgba(250,204,21,.4); background: rgba(250,204,21,.08); }
.db-chip.db-chip-bad  { color: #fca5a5; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.db-run-delta { flex: 0 0 auto; min-width: 44px; text-align: right; }
.db-run-delta .db-arrow { font-size: .9rem; }
@media (max-width: 560px) { .db-run-meta { display: block; } .db-chip { font-size: .9rem; } }

html[data-theme="light"] .db-chip.db-chip-good { color: #15803d; }
html[data-theme="light"] .db-chip.db-chip-mid { color: #b45309; }
html[data-theme="light"] .db-chip.db-chip-bad { color: #b91c1c; }
html[data-theme="light"] .db-arrow.db-up { color: #15803d; }
html[data-theme="light"] .db-arrow.db-down { color: #b91c1c; }

/* Compare page: lead-in + legend chips */
.compare-lead { margin: 4px 0 16px; max-width: 60ch; }
.compare-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Fan-curve preview (inline SVG line chart beside the temp/duty grid) */
.curve-editor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.curve-editor .curve-table { margin: 0; }
.curve-preview { position: relative; width: 150px; padding: 8px 8px 4px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.curve-spark { display: block; width: 100%; aspect-ratio: 120 / 64; color: var(--accent); }
.curve-spark-dots circle { fill: var(--accent); }
.curve-spark-axis { display: block; text-align: center; margin-top: 3px; font-size: 10px; }
.curve-spark-empty { display: none; position: absolute; inset: 0;
    align-items: center; justify-content: center; text-align: center; padding: 8px; }
.curve-preview.curve-empty .curve-spark { visibility: hidden; }
.curve-preview.curve-empty .curve-spark-axis { visibility: hidden; }
.curve-preview.curve-empty .curve-spark-empty { display: flex; }
.curve-preview-ro { margin-top: 8px; }

/* Danger zone - account deletion (app/account.php) */
.danger-zone { border-color: rgba(239,68,68,.35); }
.danger-zone .card-header h2 { color: #f87171; }
.btn-danger { background: var(--bad); border: none; color: #fff; }
.btn-danger:hover { background: #dc2626; }

/* KPI value suffix on the admin Deletions page (admin/deletions.php) */
.adm-kpi-unit { font-size: .9rem; font-weight: 500; color: var(--text-2); }

/* ===================== Styled confirm / prompt dialogs =====================
   utConfirm()/utPrompt() reuse the review modal shell (.review-overlay/.review-card
   /.review-body/.review-x) so they look native. Only the button row and the
   single-line prompt input need their own rules. */
.ut-dialog-card { max-width: 420px; }
.ut-dialog-body { text-align: left; }
.ut-dialog-body h2 { font-size: 20px; }
.ut-dialog-actions { display: flex; gap: 10px; margin: 22px 0 4px; }
.ut-dialog-actions .btn { flex: 1; width: auto; justify-content: center; }
.ut-dialog-input { min-height: 0; height: auto; resize: none; margin-top: 2px; }

/* Wide data tables scroll inside their own container on narrow screens (desktop-neutral) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .table-scroll .data-table { min-width: 600px; }
}

/* /agent - which build a linked device records to */
.device-build { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.device-build label { font-size: .78rem; color: var(--text-2); }
.device-build select { max-width: 220px; }
.device-build .hint { flex-basis: 100%; margin: 2px 0 0; }

/* Reserve the scrollbar's space at all times. Without this, any dynamic change to
   page height (showing/hiding a line, a flash message, an expanding section) can
   cross the "does this page need a scrollbar" threshold, and the content width
   jumps by the scrollbar's width - every line of text re-wraps and the page appears
   to flash. Seen on /register at 1080p while scrolling the terms box. */
html { scrollbar-gutter: stable; }

/* Informational banner (neither a warning nor an error). Used for the "why fans are
   worth entering" note in the build editor. */
.flash-info { background: rgba(96,165,250,.10); border-color: rgba(96,165,250,.30); color: #93c5fd; }
html[data-theme="light"] .flash-info, html[data-theme="light"] .flash-info .flash-white { color: #1a1a1a; }
.fans-why { align-items: flex-start; margin: 0 0 14px; }

/* Optional intake/exhaust selector on a fan row in the build editor. */
.fan-dir { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
    font-size: .74rem; color: var(--text-2); }
.fan-dir select { font-size: .78rem; padding: 3px 6px; }

/* A new-fan row now carries a full curve editor, so it needs more room than a
   plain part picker and a little separation from the name/vendor fields. */
.slot-adds[data-category="fan"].add-row-wide { max-width: 720px; }
.slot-add > .new-fan-extra { margin-top: 2px; }

/* AdSense fill units: .ut-slot-wrap is fit-content (sized to image banners), but a
   responsive AdSense unit needs a definite width to size itself. */
.ut-slot-ads { width: auto; display: block; }
.ut-slot-ads ins.adsbygoogle { display: block; width: 100%; max-width: 100%; }

/* App footer: legal + contact links on every signed-in page. */
.app-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--border-soft);
    color: var(--text-3); font-size: .8rem; }
.app-foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.app-foot-links a { color: var(--text-3); text-decoration: none; }
.app-foot-links a:hover { color: var(--text-2); text-decoration: underline; }

/* Reading tiles on /test, mirroring the agent's sensor window: small uppercase
   label, large value, thin bar. Replaces one full-width row per metric, which
   spent most of a screen on eight glanceable numbers. 11px radius and the
   label/value proportions are taken from the agent's TilePanel. */
.rpt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 10px; margin-top: 18px; }
.rpt-tile { display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px 11px; border: 1px solid var(--border); border-radius: 11px;
    background: var(--surface-2); }
.rpt-tile.has-tip { cursor: default; }
.rpt-tile:hover { border-color: var(--border-soft); background: var(--surface-3); }
.rpt-t-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.rpt-t-k { font-family: var(--mono); font-size: .63rem; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt-t-s { font-family: var(--mono); font-size: .62rem; letter-spacing: .04em;
    text-transform: uppercase; white-space: nowrap; color: var(--text-3); }
.rpt-t-s.warn { color: #fcd34d; }
.rpt-t-s.bad  { color: #fca5a5; }
.rpt-t-v { font-size: 1.14rem; font-weight: 650; line-height: 1.1; color: var(--text);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-t-bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.rpt-t-bar i { display: block; height: 100%; border-radius: 2px; background: var(--text-3);
    transition: width .3s ease; }
.rpt-t-bar i.ok  { background: var(--good); }
.rpt-t-bar i.warn { background: var(--warn); }
.rpt-t-bar i.bad { background: var(--bad); }
.rpt-t-bar i.acc { background: var(--accent); }
.rpt-t-bar.empty { background: transparent; }

/* A tile or finding that can point the over-time chart at its sensor. Only carries
   these classes when the run still has its CSV, so nothing looks clickable when
   there is no chart to show. */
.rpt-tile-linked, .finding-linked { cursor: pointer; }
.rpt-tile-linked:hover { border-color: var(--accent); }
.rpt-tile-linked:focus-visible, .finding-linked:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; }
.finding-linked:hover { background: rgba(255,255,255,.03); }

/* The reference a tile's bar is drawn against ("of 300 W", "limit 105 C"), so the
   bar means something without hovering. Mirrors the secondary line on the agent's
   tiles, which carry the same context. */
.rpt-t-ref { font-family: var(--mono); font-size: .62rem; letter-spacing: .03em;
    color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Landing flash when a tile points at the finding about that sensor. Same idea as
   the chart's .rc-flash, on a list row. */
@keyframes finding-flash-kf {
    from { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 2px rgba(249,115,22,.45); }
    to   { box-shadow: inset 3px 0 0 transparent, 0 0 0 2px transparent; }
}
.finding-flash { animation: finding-flash-kf 1.2s ease-out; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .finding-flash { animation: none; } }

/* AdSense marks a slot it could not fill with data-ad-status="unfilled". Collapse the
   whole wrapper (including our "Ad" label) rather than leaving an empty white box on
   the page - unfilled is normal for a new/low-traffic site and should be invisible. */
.ut-slot-ads:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ---------- sidebar: feature tag (Beta) ---------- */
/* Muted and pushed to the right, so it labels the item without competing with it. */
.nav-link .nav-tag {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .75;
}
[data-sidebar="collapsed"] .nav-link .nav-tag { display: none; }

/* ---------- Arena ---------- */
.arena-score {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: .2rem 0 .8rem;
    flex-wrap: wrap;
}
.arena-score-big {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
}
.arena-leg {
    border: 1px solid var(--line);
    border-radius: .6rem;
    padding: .8rem .9rem;
    margin: 0 0 .8rem;
    background: var(--panel-2, transparent);
}
.arena-leg > div:first-child {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.arena-leg summary { cursor: pointer; font-size: .86rem; color: var(--muted); }
.arena-leg .table { margin-top: .6rem; }

/* Compact table variant used by the Arena score breakdown. */
.table-sm th, .table-sm td { padding: .35rem .5rem; font-size: .86rem; }

/* An inline warning block inside a card (unscorable entries, missing sensors). */
.card-warn {
    border-left: 3px solid #f59e0b;
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    padding: .7rem .9rem;
    border-radius: .4rem;
}

/* Keep the "Ad" label hidden until Google actually fills the slot, so an unfilled unit
   never flashes a labelled white box before collapsing. */
.ut-slot-ads .ut-slot-tag { display: none; }
.ut-slot-ads:has(ins.adsbygoogle[data-ad-status="filled"]) .ut-slot-tag { display: block; }

/* ---------- Arena: score dial ---------- */
/* An instrument, not a trophy: thin strokes, tabular numerals, one accent sweep. */
.arena-dial { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.arena-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.arena-dial circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.arena-dial .dial-track { stroke: var(--line); }
.arena-dial .dial-fill  { stroke: var(--accent); }
.arena-dial .dial-value {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 1.9rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.arena-dial .dial-cap {
    position: absolute; left: 0; right: 0; bottom: 26px;
    text-align: center; font-size: .58rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}

/* ---------- Arena: head to head ---------- */
.arena-vs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 .4rem;
}
.arena-vs .vs-mid {
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.arena-vs .vs-label {
    font-size: .78rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arena-vs .vs-bar {
    height: 10px; border-radius: 999px; background: var(--line);
    overflow: hidden; margin: .3rem 0;
}
.arena-vs .vs-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--muted);
    transition: width .8s cubic-bezier(.2,.7,.3,1);
}
.arena-vs .vs-win .vs-bar > span { background: var(--accent); }
.arena-vs .vs-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.arena-vs .vs-win .vs-num { color: var(--accent); }
@media (max-width: 640px) {
    .arena-vs { grid-template-columns: 1fr; }
    .arena-vs .vs-mid { display: none; }
}

/* ---------- Arena: intro ---------- */






/* The bottom ad strip is position:fixed, so it reserves no space and floats on top of
   whatever is at the bottom of the viewport. On short pages that means it covers real
   controls, and clicks meant for the page hit the ad instead. Reserve room for it. */
body:has(.ut-slot-strip) main { padding-bottom: 104px; }

/* ================= Arena: hero ================= */
/* This is a competition. A grey heading reads as dead on arrival, so the top of the
   page carries some weight - but it stays built from the existing palette rather than
   becoming a different product. */
.arena-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 30px 28px 26px;
    margin: 0 0 18px;
    background:
        radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, black) 0%, var(--panel) 100%);
}
.arena-hero-glow {
    position: absolute; inset: -40% -10% auto -10%; height: 220px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent);
    filter: blur(18px);
    pointer-events: none;                 /* never eat clicks meant for the page */
}
.arena-hero-inner { position: relative; }
.arena-hero-mark { line-height: 0; margin-bottom: .5rem; opacity: .95; }
.arena-hero h1 {
    margin: 0 0 .35rem;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    letter-spacing: -.02em;
    line-height: 1.05;
}
.arena-hero h1 span { color: var(--accent); }
.arena-hero h1 em {
    font-style: normal; font-size: .42em; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); vertical-align: middle; margin-left: .5rem;
    border: 1px solid var(--line); border-radius: 999px; padding: .18em .6em;
}
.arena-hero > .arena-hero-inner > p { margin: 0; color: var(--muted); max-width: 60ch; }
.arena-hero-stats { display: flex; gap: 2rem; margin-top: 1.1rem; flex-wrap: wrap; }
.arena-hero-stats div { display: flex; flex-direction: column; }
.arena-hero-stats strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1; }
.arena-hero-stats span {
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .3rem;
}

/* ================= Arena: empty state ================= */
.arena-empty { text-align: center; padding: 2.2rem 1rem 2rem; }
.arena-empty-mark { line-height: 0; opacity: .5; margin-bottom: .6rem; }
.arena-empty h4 { margin: 0 0 .5rem; font-size: 1.2rem; }
.arena-empty > p { color: var(--muted); max-width: 52ch; margin: 0 auto 1.2rem; }




/* ================= Arena: the ladder ================= */
.arena-list { display: flex; flex-direction: column; gap: .5rem; }
.arena-row {
    display: grid;
    grid-template-columns: 44px minmax(120px, 1.3fr) minmax(140px, 1.4fr) minmax(80px, 1fr) 64px 92px;
    align-items: center; gap: .9rem;
    padding: .7rem .9rem;
    border: 1px solid var(--line); border-radius: 10px;
    text-decoration: none; color: inherit;
    transition: border-color .15s, transform .15s, background .15s;
}
.arena-row:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    transform: translateY(-1px);
}
.arena-rank {
    font-size: 1.3rem; font-weight: 700; text-align: center;
    color: var(--muted); font-variant-numeric: tabular-nums;
}
.arena-row-top .arena-rank { color: var(--accent); }
.arena-row.rank-1 { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.arena-who { display: flex; flex-direction: column; min-width: 0; }
.arena-who strong, .arena-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-meta { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; min-width: 0; }
.arena-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.arena-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.arena-rowscore { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.arena-go { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; }
.arena-go span { font-weight: 400; }
@media (max-width: 900px) {
    .arena-row { grid-template-columns: 36px 1fr auto; row-gap: .5rem; }
    .arena-meta { grid-column: 2 / -1; }
    .arena-bar  { grid-column: 2 / -1; }
    .arena-go   { display: none; }
}

/* ===== Arena hero: centred, and the page's centre of gravity ===== */
.arena-hero { padding: 40px 28px 34px; text-align: center; }
.arena-hero-glow { inset: -55% -10% auto -10%; height: 300px; }
.arena-hero-inner { max-width: 760px; margin: 0 auto; }
.arena-hero > .arena-hero-inner > p { margin: 0 auto; }
.arena-hero-stats { justify-content: center; gap: 2.8rem; }
.arena-hero-stats div { align-items: center; }

/* ===== Arena: explainer beside the competition, not above it ===== */
/* Stacked full-width, the hero plus the explainer pushed the entries off-screen even on
   a large display. The explainer is reference material; the entries are the point. */
.arena-cols {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.arena-cols > .arena-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.arena-cols > .arena-main > * { margin: 0; }






@media (max-width: 1100px) {
    .arena-cols { grid-template-columns: 1fr; }

}

/* ===== Arena: start a new one ===== */
.arena-start { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.arena-start > div:first-child { flex: 1 1 220px; }
.arena-start h3 { margin: 0 0 .2rem; }
.arena-start p { margin: 0; }
.arena-start-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.arena-start-form input[type=text] { min-width: 190px; }

/* ===== Arena: the spec panel on a contest ===== */
.arena-spec-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.arena-spec-head h3 { margin: 0 0 .2rem; }
.arena-spec-head p { margin: 0; }
.arena-spec-req {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .8rem; padding: .9rem 0 .2rem; border-top: 1px solid var(--line);
}
.arena-spec-req div { display: flex; flex-direction: column; gap: .2rem; }
.arena-spec-req span {
    font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.arena-spec-req strong { font-size: 1rem; }

/* A contest row leads with how many have entered rather than a rank. */
.arena-row-contest .arena-rank { font-size: 1.15rem; color: var(--accent); }

/* The hero tagline is the whole pitch, and on an empty Arena it is the only thing on the
   page doing any work. Give the turn of phrase real weight rather than a faint bold. */
.arena-hero > .arena-hero-inner > p { font-size: 1.06rem; }
.arena-hero > .arena-hero-inner > p strong {
    color: var(--text);
    font-weight: 700;
    box-shadow: inset 0 -.42em 0 color-mix(in srgb, var(--accent) 26%, transparent);
}

/* Tagline emphasis: colour and weight only. An underline (or a highlight behind the
   text) reads as a link or a mistake, especially mid-sentence. */
.arena-hero > .arena-hero-inner > p strong {
    box-shadow: none;
    color: var(--accent);
    font-weight: 700;
}
.arena-hero > .arena-hero-inner > p em {
    font-style: normal;
    color: var(--muted);
}

/* Arena beta notice: present and legible, but not shouting over the hero. */
.arena-beta-bar {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .7rem .9rem; margin: 0 0 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    font-size: .88rem;
}
.arena-beta-tag {
    flex: 0 0 auto;
    font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 999px; padding: .18em .55em; margin-top: .1rem;
}

/* Starting an arena is a publish action, so it lives behind a disclosure rather than a
   single always-live button on a pre-filled row. */
.arena-start { display: block; }
.arena-start > summary {
    cursor: pointer; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    list-style: none;
}
.arena-start > summary::-webkit-details-marker { display: none; }
.arena-start > summary::before {
    content: "+"; color: var(--accent); font-weight: 700; margin-right: .1rem;
}
.arena-start[open] > summary::before { content: "\2212"; }
.arena-start-form {
    display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-end;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
    /* Room for the settings hint, which is positioned out of flow (see below). */
    padding-bottom: 1.6rem;
}
.arena-start-form label {
    display: flex; flex-direction: column; gap: .3rem;
    font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.arena-start-form input[type=text] { min-width: 220px; }

/* ===== Arena: how to take this on ===== */
/* The instructions are the feature for a first-timer, so they get real estate rather
   than a footnote. */
.arena-howto-steps { list-style: none; padding: 0; margin: 0; }
.arena-howto-steps > li {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 0 0 1.1rem;
}
.arena-howto-steps > li:last-child { padding-bottom: .2rem; }
.arena-howto-steps > li > div { min-width: 0; }
.arena-howto-steps p { margin: .25rem 0 0; }
.arena-step-n {
    flex: 0 0 26px; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent); font-weight: 700; font-size: .8rem;
}
.arena-bench { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; }
.arena-bench li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.arena-bench a { font-weight: 600; }

/* ===== Arena: spec panel ===== */
/* Was cramped and sparse at once: the CTA jammed against a dropdown in the corner while
   four stats sprawled across the full width. The call to action gets room and weight;
   the stats sit in a tighter band that doesn't stretch to fill a 32" display. */
.arena-spec-head { align-items: center; gap: 1.5rem; margin-bottom: 1.2rem; }
.arena-spec-head > div:first-child { flex: 1 1 260px; }
.arena-spec-head h3 { font-size: 1.35rem; }
.arena-spec-head form { margin: 0; }

.btn-lg {
    font-size: 1rem;
    padding: .75rem 1.5rem;
    font-weight: 600;
}

.arena-spec-req {
    display: flex; flex-wrap: wrap; gap: 2.4rem;
    padding: 1rem 0 .4rem; border-top: 1px solid var(--line);
}
.arena-spec-req div { flex: 0 0 auto; }
.arena-spec-req strong { font-size: 1.1rem; }

/* Any inline form controls sitting next to a button need breathing room. This pattern
   recurs across the app, so fix it once here rather than per page. */
form select + .btn, form input + .btn, .btn + .btn { margin-left: .6rem; }

/* ===== Arena: once you know the drill, the board gets the width ===== */
.arena-cols-solo { grid-template-columns: minmax(0, 1fr); }

/* ===== Arena: contest rows carry their own Enter button ===== */
/* Different shape to a leaderboard row: no rank, no bar, and an action on the end. */
/* Superseded below: this still described the leading rank column, which the rows no
   longer have. Kept only for the non-layout bits. */
.arena-row-contest {
    cursor: default;
}
.arena-row-contest:hover { transform: none; }
.arena-row-contest .arena-who a { text-decoration: none; }
.arena-row-contest .arena-who a:hover { text-decoration: underline; }
.arena-row-contest .arena-rank {
    font-size: 1.25rem;
    color: var(--accent);
}
.arena-enter { display: flex; justify-content: flex-end; }
.arena-enter form { margin: 0; }
@media (max-width: 900px) {
    .arena-row-contest { grid-template-columns: 44px 1fr; }
    .arena-row-contest .arena-meta,
    .arena-row-contest .arena-rowscore,
    .arena-enter { grid-column: 2 / -1; }
    .arena-enter { justify-content: flex-start; }
}

/* ===== Arena: instructions fold away once you're in ===== */
.arena-howto > summary {
    cursor: pointer; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    list-style: none;
}
.arena-howto > summary::-webkit-details-marker { display: none; }
.arena-howto > summary::before { content: "\25B8"; color: var(--accent); }
.arena-howto[open] > summary::before { content: "\25BE"; }
.arena-howto[open] > summary { margin-bottom: 1rem; }

/* ===== Arena: the number to beat ===== */
/* A score is a fact; a target is a provocation. Red rather than the usual accent so it
   reads as the thing standing in your way, not as a status. */
.arena-target { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.arena-target-label {
    font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
    color: #ef4444; font-weight: 700;
}
.arena-target-num {
    font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: #ef4444;
}
.arena-target-open .arena-target-label { color: var(--muted); }
.arena-target-open .arena-target-num { color: var(--muted); }

/* First row of the progression: mark it as the way in. */
.arena-row-contest:first-child { border-color: color-mix(in srgb, #ef4444 40%, var(--line)); }
.arena-row-contest:first-child .arena-rank { color: #ef4444; }

/* ===== Arena: what to do next, right after entering ===== */
/* The drop-off point. Someone has just committed and needs one unambiguous next action,
   not a status line. */
.arena-next {
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-radius: 10px; padding: 1rem 1.1rem; margin: .2rem 0 .4rem;
}
.arena-next-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.arena-next-head strong { font-size: 1.05rem; }
.arena-next-tag {
    font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 999px; padding: .2em .6em;
}
.arena-next-steps { margin: 0; padding-left: 1.2rem; }
.arena-next-steps li { margin: 0 0 .45rem; }

/* How to run the named benchmark: the single most-missed instruction, since both Unigine
   apps ship a timed Benchmark button that stops after one pass. */
.arena-bench-how {
    margin: .8rem 0 0; padding: .6rem .8rem;
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-radius: 0 6px 6px 0; font-size: .9rem;
}

/* "Keep me signed in" on the sign-in form. */
.auth-remember { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px;
    font-size: .84rem; color: var(--text-2); cursor: pointer; }
.auth-remember input { flex: none; }

/* Run shape. Sits where the "Start here" banner used to, directly under the score,
   because it frames how much the numbers below are worth: a run that never settled
   is a floor, not a measurement. A bordered strip rather than a coloured panel - it
   is context, not an alarm. */
.report .run-shape { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
    margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--border-soft);
    border-left: 3px solid var(--text-3); border-radius: 10px;
    background: var(--surface-2); font-size: .86rem; line-height: 1.45;
    font-variant-numeric: tabular-nums; }
.report .run-shape .rs-sensor { color: var(--text); font-weight: 600; }
.report .run-shape .rs-facts { color: var(--text-2); }

/* Set by the tooltip edge-flip in app.js when a right-anchored bubble would be cut
   off by the window: hang it to the right of the element instead. */
.has-tip.tip-left::after,
.report .has-tip.tip-left::after { left: 0; right: auto; }

/* Run shape is two lines: the facts, then what they are worth. The meaning line is
   the point of the strip for anyone who does not already read sensor logs. */
.report .run-shape { flex-direction: column; align-items: flex-start; gap: 3px; }
.report .run-shape .rs-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.report .run-shape .rs-meaning { color: var(--text-3); font-size: .82rem; }

/* ===== Arena: filters that look pressable ===== */
/* Two passes to get here. As comma-separated links after a bare "Length:" they read as a
   sentence. As loose outlined pills they read as floating: only the selected one had any
   fill, so the rest were bare text sitting on the card with nothing holding them together.
   These are the same segmented control as .compare-tabs above - one recessed track, the
   active segment lit - which is the idiom the rest of the app already uses for "pick one".
   Scoped to .arena-chipset so the global .chip (line ~364) is left alone. */
.arena-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.5rem; margin: 0 0 1.25rem; }
.arena-filter-row { display: flex; align-items: center; gap: .6rem; }
.arena-filter-label {
    font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); min-width: 58px;
}
.arena-chipset {
    display: inline-flex; gap: 3px; padding: 3px;
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.arena-chipset .chip {
    display: inline-block; padding: .28rem .68rem; border: 0; background: transparent;
    border-radius: calc(var(--radius-sm) - 3px);
    font-size: .8rem; text-decoration: none; color: var(--muted); white-space: nowrap;
    transition: color .12s, background .12s;
}
.arena-chipset .chip:hover { background: rgba(127, 127, 127, .10); color: var(--text); }
.arena-chipset .chip-on {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent); font-weight: 600;
}
.arena-chipset .chip-on:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* What to install, said once. */
.arena-run-what { font-size: .86rem; color: var(--muted); }
.arena-run-what strong { color: var(--text); }

/* Contest rows lost their leading count column: the number was unlabelled and read as a
   rank. Entry count now sits in the meta line where it can be named.

   Every column is a FIXED width at the right-hand end, and that matters: each row is its
   own grid container, so an `auto` or `fr` track resolves independently per row. A row
   whose button says "Finish it" sized that column narrower than one saying "Enter this
   arena", which pushed everything to its left out of line with the rows above and below.
   Fixed tracks make all rows resolve identically. */
.arena-row-contest {
    grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 1.2fr) 96px 148px;
}
/* Buttons fill their track so a short label can't leave the column looking ragged.
   .btn is display:inline-flex with no justify-content, so its content sits at flex-start
   and text-align does nothing to it. Stretched to a fixed track, a short label like
   "Finish it" ends up hard against the left edge while a long one like "Enter this arena"
   fills enough of the box to hide the same bug. justify-content is what actually centres
   it, scoped here rather than added to .btn app-wide. */
.arena-row-contest .arena-enter .btn,
.arena-row-contest .arena-enter form { width: 100%; }
.arena-row-contest .arena-enter .btn { justify-content: center; text-align: center; }
@media (max-width: 900px) {
    .arena-row-contest { grid-template-columns: 1fr; }
    .arena-row-contest .arena-meta,
    .arena-row-contest .arena-target,
    .arena-enter { grid-column: 1 / -1; }
    .arena-target { align-items: flex-start; }
}

/* Score dispute: a footnote after the board, not a box competing with the score itself. */
.arena-dispute { margin: 1.4rem 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
.arena-dispute a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.arena-dispute a:hover { color: var(--text); }

/* Settings input in the arena creation form: a free-text field among selects, so it needs
   to fill the row rather than sit inline like a dropdown.

   The hint is taken OUT OF FLOW. The row is align-items:flex-end, so every control lines
   up on its bottom edge - and a hint sitting inside the label made that bottom edge the
   bottom of the HINT, lifting the input a whole line above every other field in the row.
   Absolute positioning keeps the field's box the same height as its neighbours; the form
   reserves the space below so nothing collides with it.

   text-transform is reset too: .arena-start-form label uppercases its text so the field
   labels read as small caps, and the hint was inheriting it and shouting a full sentence. */
.arena-settings-field { position: relative; flex: 1 1 300px; min-width: 240px; }
.arena-settings-field input { width: 100%; }
.arena-settings-field .muted {
    position: absolute; top: calc(100% + .35rem); left: 0;
    width: max-content; max-width: 100%;
    text-transform: none; letter-spacing: 0; line-height: 1.35;
}

/* The required settings, called out rather than whispered. This was grey small print under
   a numbered step and got read straight past three times in a row - which is expensive,
   because a run at the wrong preset either isn't comparable or fails the load check. */
.arena-settings-call {
    display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
    margin: .5rem 0 .1rem; padding: .5rem .7rem;
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border-radius: 0 6px 6px 0;
}
.arena-settings-label {
    font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
    color: var(--accent); font-weight: 700; flex: 0 0 auto;
}
.arena-settings-call strong { color: var(--text); font-size: .92rem; }

/* The primer under the contest list. It used to be a left-hand column, which squeezed the
   contest rows into the remaining half of the page; full width below the list keeps the
   rows readable and puts the explanation after the thing it explains. */




/* ===== Arena: the three steps, across the page ===== */
/* Sits under the beta banner, before the arenas. Card-per-step reads as a sequence at a
   glance in a way a numbered list in a sidebar never did, and full width means the arenas
   below keep theirs. */
.arena-flow-wrap { margin: 0 0 1.4rem; }
.arena-flow {
    list-style: none; margin: 0 0 .8rem; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
.arena-flow li {
    padding: 1rem 1.15rem 1.05rem;
    border: 1px solid var(--line); border-radius: 12px;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
        var(--surface-2);
}
/* The numeral sits IN FLOW next to its heading. As an absolutely positioned watermark it
   read as floating, and the corner it was pinned to clipped it. Same weight and ghosting,
   given a place to be. */
.arena-flow-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.arena-flow-n {
    font-size: 2rem; font-weight: 800; line-height: 1;
    color: color-mix(in srgb, var(--accent) 34%, transparent);
    font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.arena-flow h4 { margin: 0; font-size: .98rem; color: var(--text); }
.arena-flow > li > p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.arena-flow > li > p strong { color: var(--text); font-weight: 600; }

/* The three claims under the steps. As one paragraph capped at 100ch this hugged the left
   edge of a wide page and read as unformatted filler. Split across the same three tracks
   it lines up with the steps above and can be skimmed. */
.arena-flow-note {
    list-style: none; margin: 0; padding: .85rem 0 0;
    border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
.arena-flow-note li {
    margin: 0; font-size: .8rem; line-height: 1.55; color: var(--muted);
    padding-left: .7rem; border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.arena-flow-note strong { display: block; color: var(--text); font-weight: 600; }
@media (max-width: 820px) {
    .arena-flow, .arena-flow-note { grid-template-columns: 1fr; }
}

/* ===== Arena entry: points earned, the leg header, the build ===== */
/* Points EARNED, not lost. Showing a deduction made a perfect component read as a
   penalty that rounded to nothing, and asked the reader to subtract to learn they did
   well. The full-marks case is coloured so a clean run is legible at a glance. */
.arena-pts { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); white-space: nowrap; }
.arena-pts-of { color: var(--muted); font-weight: 400; }
.arena-pts-full { color: var(--accent); }

.arena-leg-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
/* The run link gets its own affordance. It used to be the run's machine-generated name,
   which looked like a title and behaved like a link. */
.arena-leg-link { margin-left: auto; font-size: .8rem; text-decoration: none; color: var(--muted); }
.arena-leg-link:hover { color: var(--accent); }

/* The hardware behind a score. On a board of numbers this is the context that makes them
   mean anything, so it is a panel rather than a footnote. */
.arena-rig {
    margin-top: 1.2rem; padding: .9rem 1rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.arena-rig-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.arena-rig-label {
    font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.arena-rig-change { margin-top: .7rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.arena-rig-change select { margin-left: .4rem; }

/* ===== Arena: the parts behind a score ===== */
/* Icon + name, in a small card each. This sits where a board used to print the build's
   NAME, which was never publishable anyway (people name machines personally, and it
   explains nothing about the number), so the slot was reserved for something we had to
   withhold. Compact enough to sit inside a leaderboard row. */
.arena-chips {
    list-style: none; margin: .25rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .3rem;
}
.arena-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .18rem .45rem .18rem .38rem;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface-2);
    font-size: .78rem; color: var(--text-2, var(--text));
    max-width: 100%;
}
.arena-chip svg { flex: 0 0 auto; }
/* Long part names truncate rather than wrapping a row to two lines. The full name is on
   the entry page, which is one click away and has room for it. */
.arena-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-chips-sm .arena-chip { font-size: .72rem; padding: .12rem .38rem .12rem .32rem; }
.arena-chips-sm .arena-chip span { max-width: 15ch; }
@media (max-width: 900px) {
    .arena-chips-sm .arena-chip span { max-width: 22ch; }
}

/* Deleting an arena: available, not advertised. Sits under the spec, reads as plain text
   until hovered, and only renders for someone who can actually use it. There is no
   .btn-quiet elsewhere, so it is defined here rather than borrowed. */
.arena-danger {
    margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.arena-danger .btn-quiet {
    background: transparent; border: 1px solid var(--line); color: var(--muted);
    font-size: .82rem;
}
.arena-danger .btn-quiet:hover {
    border-color: #b91c1c; color: #ef4444; background: rgba(185, 28, 28, .08);
}

/* Arena runs that never reached a board. Presented as recoverable work rather than as an
   error: the run was fine, it just landed in a different bracket than intended. */
.arena-orphans {
    margin: 0 0 1.4rem; padding: .9rem 1rem 1rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.arena-orphans h4 { margin: 0 0 .2rem; font-size: .95rem; }
.arena-orphans > p { margin: 0 0 .8rem; }
.arena-orphan {
    display: flex; align-items: center; justify-content: space-between;
    gap: .8rem; flex-wrap: wrap;
    padding: .6rem 0; border-top: 1px solid var(--line);
}
.arena-orphan-what { display: flex; flex-direction: column; gap: .15rem; min-width: 200px; }
.arena-orphan-what a { text-decoration: none; }
.arena-orphan-what a:hover { color: var(--accent); }
.arena-orphan-move { display: flex; align-items: center; gap: .5rem; margin: 0; }

/* Links inside the orphan panel. Both of these sat in muted small text and inherited its
   colour, so "Open one" and "Sensor data" read as ordinary prose with no sign they did
   anything. Accent plus an underline is the least a link can do to announce itself. */
.arena-orphan a,
.arena-orphans a {
    color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.arena-orphan a:hover,
.arena-orphans a:hover { color: var(--text); }
/* The sensor-data link is a trailing affordance rather than part of the sentence, so it
   keeps the quieter treatment and only lights up on hover. */
.arena-orphan-what a { color: var(--muted); text-decoration: none; }
.arena-orphan-what a:hover { color: var(--accent); text-decoration: underline; }

/* Finished arenas. Folded away by default so it never competes with the boards someone
   can actually enter, but present, because a score people earned should not vanish on a
   date. */
.arena-archive { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.arena-archive > summary {
    cursor: pointer; list-style: none; display: flex; align-items: baseline;
    gap: .6rem; flex-wrap: wrap;
}
.arena-archive > summary::-webkit-details-marker { display: none; }
.arena-archive > summary::before {
    content: "+"; color: var(--accent); font-weight: 700; margin-right: .1rem;
}
.arena-archive[open] > summary::before { content: "‘2"; }
.arena-archive-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }
.arena-archive-row {
    display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
    padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px;
    text-decoration: none; color: inherit;
}
.arena-archive-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.arena-archive-name { font-weight: 600; }
.arena-archive-top { margin-left: auto; font-size: .82rem; color: var(--muted); }
.arena-archive-top strong { color: var(--accent); font-variant-numeric: tabular-nums; }

/* The row you are looking at, or the row that is yours. Wears the hover treatment
   permanently so it can be found on a long board without reading every name.

   Deliberately NOT the podium styling it used to borrow: that painted the entry you had
   open as if it had won, whatever it actually placed. The transform is dropped too, since
   a row that sits raised while nothing is hovering it just reads as misalignment. */
.arena-row-current {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* Hovering the current row still has to do something, or it feels dead. */
.arena-row-current:hover {
    border-color: color-mix(in srgb, var(--accent) 75%, var(--line));
    background: color-mix(in srgb, var(--accent) 13%, transparent);
}