/*
 * status.quip.network — shared design system (QUI-841)
 *
 * One stylesheet for every surface (public, internal, settings, login,
 * change-password). Keeps the EXISTING semantic variable names used across the
 * templates but re-points their VALUES to Quip brand tokens (zinc ramp, coral
 * accent #ff6467, ABC Favorit / Gaisyr / Favorit-Mono fonts, 4/8px radii).
 *
 * Three theme layers, matching how the templates already switch:
 *   1. :root ................................. light default
 *   2. @media (prefers-color-scheme: dark) ... OS dark (unless user forced light)
 *   3. [data-theme="dark"] ................... explicit user override
 * There is no [data-theme="light"] block — forced light falls back to :root.
 *
 * Brand rule: coral is visually a RED. Status stays green / amber / red
 * semantic (never coral); the DOWN red is a truer crimson so it reads distinct
 * from coral. Coral's always-on home is the focus ring. This ships the
 * coral-ACCENT treatment (coral links/accents/focus, dark-ink primary buttons),
 * chosen at the QUI-841 mockup sign-off.
 */

/* ---------- Brand fonts (variable woff2; no .woff fallback is vendored) ---------- */
@font-face {
    font-family: "ABC Favorit";
    src: url("/static/fonts/ABCFavoritVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "ABC Favorit Mono";
    src: url("/static/fonts/ABCFavoritMonoVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "ABC Gaisyr";
    src: url("/static/fonts/ABCGaisyrVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "ABC Gaisyr";
    src: url("/static/fonts/ABCGaisyrVariableItalic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ============================ LAYER 1 — light (:root) ============================ */
:root {
    /* type + radius tokens */
    --font-body: "ABC Favorit", system-ui, -apple-system, sans-serif;
    --font-heading: "ABC Gaisyr", Georgia, serif;
    --font-mono: "ABC Favorit Mono", ui-monospace, "SFMono-Regular", monospace;
    --radius-small: 4px;
    --radius-medium: 8px;

    /* chrome / neutrals (zinc ramp) */
    --bg-primary: #fafafa;      /* zinc-50  */
    --bg-secondary: #ffffff;    /* card     */
    --bg-tertiary: #f4f4f5;     /* zinc-100 */
    --text-primary: #27272a;    /* zinc-800 */
    --text-secondary: #52525c;  /* zinc-600 */
    --text-muted: #71717b;      /* zinc-500 */
    --border: #d4d4d8;          /* zinc-250 */
    --border-light: #e4e4e7;    /* zinc-150 */

    /* accent (coral) */
    --accent: #ff6467;
    --accent-hover: #f2555a;
    --focus-ring: #ff6467;
    --link: #ff6467;            /* Variant A: coral links */
    --nav-active: #ff6467;      /* Variant A: coral active nav */
    --hero-accent: #ff6467;     /* Variant A: coral hero accent bar */

    /* primary button — Variant A: dark ink */
    --btn-bg: #18181b;          /* zinc-900 */
    --btn-text: #fafafa;        /* zinc-50  */
    --btn-hover: #27272a;       /* zinc-800 */

    /* inputs */
    --input-bg: #ffffff;
    --input-text: #27272a;
    --input-border: #d4d4d8;

    /* nav */
    --nav-bg: #ffffff;
    --nav-text: #27272a;
    --nav-link: #71717b;

    /* status banners (public + internal) — semantic tints, never coral */
    --banner-ok-bg: #e6f6ec;   --banner-ok-text: #1a7f37;
    --banner-warn-bg: #fdf6e3; --banner-warn-text: #8a6413;
    --banner-bad-bg: #fdeaea;  --banner-bad-text: #b42318;

    /* status dots + uptime bars — green / amber / red / blue, kept semantic */
    --dot-up: #16a34a;         --bar-up: #16a34a;
    --dot-degraded: #d97706;   --bar-degraded: #d97706;
    --dot-down: #dc2626;       --bar-down: #dc2626;   /* truer red, distinct from coral */
    --dot-maintenance: #2563eb;--bar-maintenance: #2563eb;
    --dot-unmonitored: #a1a1aa;--bar-nodata: #d4d4d8;

    /* tags (public + internal) */
    --tag-public-bg: #e6f6ec;  --tag-public-text: #1a7f37;
    --tag-private-bg: #f4f4f5; --tag-private-text: #52525c;

    /* info panels (public + internal + change-password) */
    --info-bg: #f4f4f5;        --info-text: #52525c;

    /* maintenance banner (public + internal) */
    --maintenance-banner-bg: #eef2ff;
    --maintenance-banner-text: #3730a3;
    --maintenance-banner-border: #c7d2fe;

    /* alert box (internal) */
    --alert-bg: #fdf6e3; --alert-border: #d97706; --alert-title: #8a6413;

    /* flash messages (settings) */
    --flash-success-bg: #e6f6ec; --flash-success-text: #1a7f37; --flash-success-border: #b7e4c7;
    --flash-error-bg: #fdeaea;   --flash-error-text: #b42318;   --flash-error-border: #f5c2c0;

    /* small + danger buttons (settings) */
    --btn-sm-bg: #f4f4f5; --btn-sm-text: #3f3f46; --btn-sm-border: #d4d4d8; --btn-sm-hover: #e4e4e7;
    --btn-danger-bg: #fdeaea; --btn-danger-text: #b42318; --btn-danger-border: #f5c2c0; --btn-danger-hover: #f8d7d5;

    /* tooltip (settings) */
    --tooltip-bg: #f4f4f5; --tooltip-text: #27272a; --tooltip-border: #d4d4d8;

    /* error box (login + change-password) */
    --error-bg: #fdeaea; --error-text: #b42318; --error-border: #f5c2c0;
}

/* ===================== LAYER 2 — OS dark (unless forced light) ===================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #09090b;   /* zinc-950 */
        --bg-secondary: #18181b; /* zinc-900 */
        --bg-tertiary: #212124;  /* zinc-850 */
        --text-primary: #f4f4f5; /* zinc-100 */
        --text-secondary: #9f9fa9;/* zinc-400 */
        --text-muted: #71717b;   /* zinc-500 */
        --border: #27272a;       /* zinc-800 */
        --border-light: #212124; /* zinc-850 */

        --accent: #ff6467;
        --accent-hover: #ff7d80;
        --focus-ring: #ff6467;
        --link: #ff6467;
        --nav-active: #ff6467;
        --hero-accent: #ff6467;

        --btn-bg: #f4f4f5;       /* inverted light button */
        --btn-text: #18181b;
        --btn-hover: #dbdbde;

        --input-bg: #18181b;
        --input-text: #f4f4f5;
        --input-border: #3f3f46;

        --nav-bg: #09090b;
        --nav-text: #f4f4f5;
        --nav-link: #9f9fa9;

        --banner-ok-bg: #0f2e1a;   --banner-ok-text: #4ade80;
        --banner-warn-bg: #2e2410; --banner-warn-text: #fbbf24;
        --banner-bad-bg: #2e1414;  --banner-bad-text: #fca5a5;

        --dot-up: #22c55e;         --bar-up: #22c55e;
        --dot-degraded: #f59e0b;   --bar-degraded: #f59e0b;
        --dot-down: #ef4444;       --bar-down: #ef4444;
        --dot-maintenance: #3b82f6;--bar-maintenance: #3b82f6;
        --dot-unmonitored: #52525c;--bar-nodata: #3f3f46;

        --tag-public-bg: #0f2e1a;  --tag-public-text: #4ade80;
        --tag-private-bg: #212124; --tag-private-text: #9f9fa9;

        --info-bg: #212124;        --info-text: #9f9fa9;

        --maintenance-banner-bg: #1e1b4b;
        --maintenance-banner-text: #a5b4fc;
        --maintenance-banner-border: #3730a3;

        --alert-bg: #2e2410; --alert-border: #a16207; --alert-title: #fbbf24;

        --flash-success-bg: #0f2e1a; --flash-success-text: #4ade80; --flash-success-border: #166534;
        --flash-error-bg: #2e1414;   --flash-error-text: #fca5a5;   --flash-error-border: #7f1d1d;

        --btn-sm-bg: #212124; --btn-sm-text: #dbdbde; --btn-sm-border: #3f3f46; --btn-sm-hover: #27272a;
        --btn-danger-bg: #2e1414; --btn-danger-text: #fca5a5; --btn-danger-border: #7f1d1d; --btn-danger-hover: #3a1a1a;

        --tooltip-bg: #212124; --tooltip-text: #f4f4f5; --tooltip-border: #3f3f46;

        --error-bg: #2e1414; --error-text: #fca5a5; --error-border: #7f1d1d;
    }
}

/* ================== LAYER 3 — explicit user override [data-theme="dark"] ================== */
[data-theme="dark"] {
    --bg-primary: #09090b;
    --bg-secondary: #18181b;
    --bg-tertiary: #212124;
    --text-primary: #f4f4f5;
    --text-secondary: #9f9fa9;
    --text-muted: #71717b;
    --border: #27272a;
    --border-light: #212124;

    --accent: #ff6467;
    --accent-hover: #ff7d80;
    --focus-ring: #ff6467;
    --link: #ff6467;
    --nav-active: #ff6467;
    --hero-accent: #ff6467;

    --btn-bg: #f4f4f5;
    --btn-text: #18181b;
    --btn-hover: #dbdbde;

    --input-bg: #18181b;
    --input-text: #f4f4f5;
    --input-border: #3f3f46;

    --nav-bg: #09090b;
    --nav-text: #f4f4f5;
    --nav-link: #9f9fa9;

    --banner-ok-bg: #0f2e1a;   --banner-ok-text: #4ade80;
    --banner-warn-bg: #2e2410; --banner-warn-text: #fbbf24;
    --banner-bad-bg: #2e1414;  --banner-bad-text: #fca5a5;

    --dot-up: #22c55e;         --bar-up: #22c55e;
    --dot-degraded: #f59e0b;   --bar-degraded: #f59e0b;
    --dot-down: #ef4444;       --bar-down: #ef4444;
    --dot-maintenance: #3b82f6;--bar-maintenance: #3b82f6;
    --dot-unmonitored: #52525c;--bar-nodata: #3f3f46;

    --tag-public-bg: #0f2e1a;  --tag-public-text: #4ade80;
    --tag-private-bg: #212124; --tag-private-text: #9f9fa9;

    --info-bg: #212124;        --info-text: #9f9fa9;

    --maintenance-banner-bg: #1e1b4b;
    --maintenance-banner-text: #a5b4fc;
    --maintenance-banner-border: #3730a3;

    --alert-bg: #2e2410; --alert-border: #a16207; --alert-title: #fbbf24;

    --flash-success-bg: #0f2e1a; --flash-success-text: #4ade80; --flash-success-border: #166534;
    --flash-error-bg: #2e1414;   --flash-error-text: #fca5a5;   --flash-error-border: #7f1d1d;

    --btn-sm-bg: #212124; --btn-sm-text: #dbdbde; --btn-sm-border: #3f3f46; --btn-sm-hover: #27272a;
    --btn-danger-bg: #2e1414; --btn-danger-text: #fca5a5; --btn-danger-border: #7f1d1d; --btn-danger-hover: #3a1a1a;

    --tooltip-bg: #212124; --tooltip-text: #f4f4f5; --tooltip-border: #3f3f46;

    --error-bg: #2e1414; --error-text: #fca5a5; --error-border: #7f1d1d;
}

/* ================================ Base / reset ================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--link); }

code, pre, .mono { font-family: var(--font-mono); }

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }

h2.section {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    margin-bottom: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.container { max-width: var(--container-max, 1000px); margin: 0 auto; padding: 24px 16px; }

/* ================================ Brand header + hero ================================ */
.brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max, 1000px);
    margin: 0 auto;
    padding: 20px 16px 0;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
/* The Quip logo is a monochrome SVG (all paths fill=currentColor). Render it as a
 * CSS mask over the current text color so it themes correctly in light AND dark —
 * an <img>-referenced SVG cannot inherit currentColor. preserveAspectRatio='none'
 * would stretch it, so we also pin the aspect ratio. Markup: a <span class="logo">. */
.logo {
    display: inline-block;
    aspect-ratio: 50 / 19.4642;
    background-color: currentColor;
    -webkit-mask: url('/static/img/quip-logo.svg') no-repeat center / contain;
            mask: url('/static/img/quip-logo.svg') no-repeat center / contain;
}
.brand-lockup .logo { width: 92px; height: auto; display: block; color: var(--text-primary); }
.brand-lockup .wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--text-muted); }

.hero {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-top: 3px solid var(--hero-accent);
    border-radius: var(--radius-medium);
    padding: 28px 28px;
    margin: 16px 0 32px;
    text-align: center;
}
.hero .hero-status {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    color: var(--text-primary);
}
.hero .hero-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.hero .hero-sub { margin-top: 8px; font-size: 13px; color: var(--text-muted); }

/* ================================ Nav ================================ */
.nav {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav .nav-brand { display: flex; align-items: center; gap: 10px; }
.nav .nav-brand .logo { width: 72px; height: auto; display: block; color: var(--nav-text); }
.nav .nav-right { display: flex; align-items: center; gap: 18px; }
.nav a { color: var(--nav-link); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--text-primary); }
.nav .nav-current { color: var(--nav-active); font-weight: 600; font-size: 14px; }

/* ================================ Banner ================================ */
.banner {
    padding: 20px 24px;
    border-radius: var(--radius-medium);
    margin-bottom: 32px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    font-family: var(--font-heading);
}
.banner.operational { background: var(--banner-ok-bg);  color: var(--banner-ok-text); }
.banner.partial     { background: var(--banner-warn-bg); color: var(--banner-warn-text); }
.banner.major       { background: var(--banner-bad-bg);  color: var(--banner-bad-text); }

/* ================================ Status dots ================================ */
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.up          { background: var(--dot-up); }
.dot.degraded    { background: var(--dot-degraded); }
.dot.down        { background: var(--dot-down); }
.dot.maintenance { background: var(--dot-maintenance); }
.dot.unmonitored,
.dot.dns_removed { background: var(--dot-unmonitored); }

/* ================================ Service list (public) ================================ */
.category { margin-bottom: 28px; }
.service-list { list-style: none; background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border); overflow: hidden; }
.service-item { padding: 14px 20px; border-bottom: 1px solid var(--border-light); }
.service-item:last-child { border-bottom: none; }
.service-row { display: flex; align-items: center; justify-content: space-between; }
.service-name { font-weight: 500; display: flex; align-items: center; gap: 10px; }
.service-name a { color: inherit; text-decoration: none; }
.service-name .desc { color: var(--text-muted); font-size: 13px; font-weight: 400; }
.service-uptime { font-size: 14px; color: var(--text-muted); }

/* uptime bar footer helper (bars themselves are inline-styled by the Go fragment) */
.uptime-bar { width: 100%; margin-top: 8px; }
.uptime-bar .bars { display: flex; gap: 2px; height: 30px; }
.uptime-bar .bars > div { flex: 1; border-radius: 2px; }
.uptime-bar .legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* ================================ Cards / details (internal) ================================ */
.card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-medium); }
.disclosure { margin-bottom: 20px; }
.disclosure > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    color: var(--text-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}
.disclosure[open] > summary { border-radius: var(--radius-medium) var(--radius-medium) 0 0; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure .rows { background: var(--bg-secondary); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-medium) var(--radius-medium); }
.disclosure .row { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--border-light); }
.disclosure .row:last-child { border-bottom: none; }

.region-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.region-card { padding: 14px 20px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-medium); min-width: 150px; }
.region-card .label { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; }
.region-card .value { font-size: 22px; font-weight: 700; font-family: var(--font-heading); }

/* ================================ Tables ================================ */
table { width: 100%; border-collapse: collapse; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-medium); overflow: hidden; }
th, td { text-align: left; padding: 10px 14px; font-size: 14px; }
thead th { background: var(--bg-tertiary); color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
tbody tr { border-bottom: 1px solid var(--border-light); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-tertiary); }
td a { color: var(--link); text-decoration: none; }
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]:hover { color: var(--text-primary); }
.sparkline { display: block; color: var(--accent); }  /* Go emits stroke=currentColor after QUI-843 */

/* ================================ Tags / pills ================================ */
.tag { font-size: 12px; padding: 2px 8px; border-radius: var(--radius-small); font-weight: 500; }
.tag-public { background: var(--tag-public-bg); color: var(--tag-public-text); }
.tag-private { background: var(--tag-private-bg); color: var(--tag-private-text); }

.pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; border: 1px solid transparent; }
.pill-monitored { background: var(--tag-public-bg); color: var(--tag-public-text); }
.pill-inactive { background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border); }
.pill-public { background: var(--info-bg); color: var(--info-text); }
.pill-maintenance { background: var(--maintenance-banner-bg); color: var(--maintenance-banner-text); }

/* ================================ Buttons ================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px;
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: var(--radius-small);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, opacity 0.12s ease;
}
.btn:hover { background: var(--btn-hover); }
.btn-block { width: 100%; padding: 11px; }

.btn-sm { padding: 5px 12px; font-size: 13px; background: var(--btn-sm-bg); color: var(--btn-sm-text); border: 1px solid var(--btn-sm-border); border-radius: var(--radius-small); cursor: pointer; font-family: var(--font-body); }
.btn-sm:hover { background: var(--btn-sm-hover); }

.btn-danger { background: var(--btn-danger-bg); color: var(--btn-danger-text); border: 1px solid var(--btn-danger-border); }
.btn-danger:hover { background: var(--btn-danger-hover); }

.theme-toggle {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-small);
    padding: 5px 11px;
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.theme-toggle:hover { border-color: var(--text-muted); }

/* ================================ Forms ================================ */
.field { margin-bottom: 16px; }
.field label, .field-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 5px; }
.field input, .field-input, select.field-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-small);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 14px;
    font-family: var(--font-body);
}
.field input:focus, .field-input:focus, select.field-input:focus, textarea:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
    border-color: var(--focus-ring);
}
.checkbox-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }

/* ================================ Tab bar (settings) ================================ */
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); max-width: var(--container-max, 1000px); margin: 0 auto; padding: 0 16px; }
.tab { padding: 10px 16px; color: var(--nav-link); text-decoration: none; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600; }

/* ================================ Incidents ================================ */
.incidents { margin-top: 32px; }
.incident-list { background: var(--bg-secondary); border-radius: var(--radius-medium); border: 1px solid var(--border); overflow: hidden; }
.incident-item { padding: 14px 20px; border-bottom: 1px solid var(--border-light); }
.incident-item:last-child { border-bottom: none; }
.incident-target { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.incident-status { font-size: 12px; padding: 1px 8px; border-radius: var(--radius-small); font-weight: 500; color: #fff; }
.incident-status.down { background: var(--dot-down); }
.incident-status.degraded { background: var(--dot-degraded); color: #1a1a1a; }
.incident-desc { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }
.incident-time { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.incident-resolved { color: var(--dot-up); font-weight: 500; }
.incident-ongoing  { color: var(--dot-down); font-weight: 500; }
.incident-duration { color: var(--text-muted); }
.no-incidents, .no-data { padding: 20px; text-align: center; color: var(--text-muted); }

/* ================================ Error box ================================
 * Declared before .toast: settings renders <div class="toast error"> for an error
 * flash, and both rules match at (0,1,0). Later wins, so .error must sit first or
 * it steals .toast's box metrics and an error flash renders smaller than a success
 * one. .toast.error (0,2,0) still wins the colours from either position. */
.error { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); padding: 9px 12px; border-radius: var(--radius-small); font-size: 13px; margin-bottom: 16px; }

/* ================================ Toast / flash ================================ */
.toast { padding: 12px 16px; border-radius: var(--radius-small); margin-bottom: 16px; font-size: 14px; background: var(--flash-success-bg); color: var(--flash-success-text); border: 1px solid var(--flash-success-border); opacity: 1; transition: opacity 0.4s ease; }
.toast.error { background: var(--flash-error-bg); color: var(--flash-error-text); border-color: var(--flash-error-border); }
/* settings.html adds .fade-out 3s after showing a toast and removes the node at 3.5s. */
.toast.fade-out { opacity: 0; }

/* ================================ Login card ================================ */
.login-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 24px; }
.login-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-medium); padding: 32px; width: 100%; max-width: 380px; }
.login-card .logo { width: 120px; height: auto; display: block; margin: 0 auto 8px; color: var(--text-primary); }
.login-card h1 { font-size: 18px; margin-bottom: 24px; text-align: center; color: var(--text-muted); font-weight: 500; font-family: var(--font-body); }

/* ================================ Footer ================================ */
.footer { margin-top: 40px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ============================== Settings (QUI-844) ==============================
 * settings.html is the only consumer. Everything above -- the reset, .btn/.btn-sm/
 * .btn-danger, .field-label/.field-input, .pill*, .dot*, .tab-bar/.tab, table/th/td,
 * .card, .disclosure, .mono, .toast, .error -- is reused rather than repeated here.
 * This block is only what has no equivalent above. */

/* -------------------------------- utilities -------------------------------- */
.muted { color: var(--text-muted); }
.sep { margin: 0 2px; }   /* &middot; between meta fields; colour inherits */

/* Unclassed controls: settings' add-endpoint row, webhook fields, balance forms.
 * :where() pins this at specificity 0 so .field-input, .editable-input and any
 * inline width= still win -- a bare input[type="text"] is (0,1,1) and would BEAT
 * .field-input (0,1,0). checkbox/radio are deliberately excluded: they must not take
 * width or padding. type="email" is included; settings' old inline rule omitted it,
 * so the webhook email field had been rendering unstyled. :focus needs no rule --
 * the global :focus-visible above already draws the coral ring on every control. */
:where(input[type="text"], input[type="number"], input[type="password"],
       input[type="url"], input[type="email"], input[type="search"],
       select, textarea) {
    padding: 6px 10px;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-small);
    font-family: var(--font-body);
    font-size: 13px;
}

/* ------------------- label/control rows (Monitoring + Account) -------------------
 * Container chrome comes from .card; .settings-rows adds only the padding .card
 * lacks. Not reusing `.disclosure .row` -- that selector is scoped under .disclosure
 * (a <details>), and these rows live in a plain <div>. */
.settings-rows { padding: 4px 20px; margin-bottom: 16px; }
.settings-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.settings-row:last-child { border-bottom: none; }
.settings-label { width: 240px; flex-shrink: 0; font-size: 14px; font-weight: 500; }
.settings-input { flex: 1; }
/* Free-text controls fill their cell so the password rows line up with the
 * maintenance-banner row. :where() keeps this at (0,1,0) so an inline width still
 * wins -- retention_days stays 80px. Selects keep their intrinsic width. */
.settings-input :where(input[type="text"], input[type="password"], input[type="url"], input[type="email"]) { width: 100%; }

.info-box { padding: 16px 20px; background: var(--info-bg); color: var(--info-text); border: 1px solid var(--border); border-radius: var(--radius-medium); font-size: 14px; }
.section-divider { height: 1px; background: var(--border); margin: 24px 0; }

/* [?] tooltip -- consumes the --tooltip-* tokens QUI-841 pre-provisioned for it. */
.help-tip { position: relative; display: inline-block; margin-left: 6px; color: var(--accent); font-size: 13px; cursor: help; }
.help-tip:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: max-content;
    max-width: 300px;
    padding: 6px 10px;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    border: 1px solid var(--tooltip-border);
    border-radius: var(--radius-small);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
}

/* -------------------------------- Endpoints tab --------------------------------
 * .domain-group is a 2-line modifier on .disclosure: its body is a stack of
 * .endpoint-details cards, not a bordered .rows panel, so the summary stays fully
 * rounded when open and the stack gets some air. Both tie .disclosure on specificity
 * and win by sitting later in the file. */
.domain-group { margin-bottom: 12px; }
.domain-group[open] > summary { border-radius: var(--radius-medium); margin-bottom: 6px; }

.endpoint-details { margin: 0 0 6px 8px; }
.endpoint-details > summary {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    list-style: none;
    cursor: pointer;
}
.endpoint-details > summary::-webkit-details-marker { display: none; }
.endpoint-details > summary:hover { background: var(--bg-tertiary); }
/* Deliberately --border, not --accent: the pre-rebrand rule ringed an open card in
 * blue, but coral is a red and an accent ring here reads as an error state. The
 * approved mockup shows no outline; the header rule below delineates the card. */
.endpoint-details[open] { border: 1px solid var(--border); border-radius: var(--radius-medium); }
.endpoint-details[open] > summary { border: none; border-bottom: 1px solid var(--border); border-radius: var(--radius-medium) var(--radius-medium) 0 0; }
.endpoint-details.unmonitored { opacity: 0.5; }
.endpoint-details.unmonitored:hover,
.endpoint-details.unmonitored[open] { opacity: 1; }

.endpoint-summary-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.endpoint-summary-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.endpoint-summary-meta { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.endpoint-cell { font-size: 13px; color: var(--link); text-decoration: none; }   /* pair with .mono */

.endpoint-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
.endpoint-card-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 14px; background: var(--bg-primary); }

.advanced-details > summary { padding: 6px 14px 8px; background: var(--bg-primary); border-top: 1px solid var(--border-light); color: var(--text-muted); font-size: 11px; list-style: none; cursor: pointer; }
.advanced-details > summary::-webkit-details-marker { display: none; }
.advanced-details > summary:hover { color: var(--text-secondary); }
.advanced-details .advanced-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 8px 14px 12px; background: var(--bg-primary); }

/* toggleCustomPort() flips the inline display between none and flex -- inline wins. */
.custom-port-group { display: flex; align-items: center; gap: 6px; }
.checkbox-group { display: flex; align-items: center; gap: 12px; }

.footer-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.footer-bar-left { display: flex; gap: 8px; }
.footer-bar-right { display: flex; gap: 16px; font-size: 13px; }
.footer-bar-right a { color: var(--text-muted); text-decoration: none; }
.footer-bar-right a:hover { color: var(--text-secondary); }

/* --------------------------- Monitoring tab: balance ---------------------------
 * These three sections are .disclosure cards (same component as the internal
 * dashboard and the Endpoints tab): the summary is the card header and .rows is the
 * body, joined seamlessly by .rows' border-top:none. So the bodies here supply only
 * padding -- adding .card back would nest a border inside a border.
 * .source-card, .rescan-panel, .editable-label and .preview-* are also JS selector
 * hooks in settings.html -- do not rename them. */
.advanced-disclosure form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.advanced-disclosure label { display: flex; align-items: center; gap: 8px; }

/* NOT .advanced-body -- the Endpoints tab already owns that name (.advanced-details
 * .advanced-body), and a bare .advanced-body rule here would reach across to it. */
.balance-add-card, .balance-advanced-body { padding: 16px; }
.inline-form { display: flex; gap: 8px; margin-top: 8px; }
.inline-form input { flex: 1; }

/* The discover preview IS a distinct nested object inside the body, so it keeps .card. */
.preview-card { padding: 16px; margin-top: 16px; }
.preview-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.preview-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }

/* One address per row inside the .rows body -- dividers, not borders (cf. .disclosure
 * .row). Keeps its own rule rather than reusing .row: .row is a flex label/value pair
 * and these stack a wrapping meta line above an action bar. */
.source-card { padding: 10px 16px; border-bottom: 1px solid var(--border-light); }
.source-card:last-child { border-bottom: none; }
.source-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.source-actions { display: flex; gap: 8px; margin-top: 8px; }
.rescan-panel { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
/* The JS empty/error states are bare <p> in .rows and would otherwise sit flush. */
.empty-row { padding: 12px 16px; }

.editable-label { cursor: pointer; border-bottom: 1px dashed transparent; }
.editable-label:hover { border-bottom-color: var(--border); }
.editable-input { width: auto; padding: 2px 4px; font: inherit; }   /* beats the :where() rule at (0,1,0) */