/* ============================================================
   Email Sorter — Direction B: SaaS App-Shell
   Operations console. Left icon rail + top bar + breadcrumbs.
   Anchor: euregio blue #0d6efd. Secondary accent: teal #0e9c98 (AI).
   Display font: Jost. Body: system stack.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    /* Brand */
    --blue: #0d6efd;
    --blue-600: #0b5ed7;
    --blue-700: #0a53be;
    --blue-050: #e7f0ff;
    --blue-100: #d4e4ff;

    /* Secondary accent — teal, reserved for AI affordances */
    --teal: #0e9c98;
    --teal-600: #0c827f;
    --teal-700: #0a6b69;      /* AA text on teal/blue-050 gradient (5.4:1) */
    --teal-050: #e3f7f6;
    --teal-100: #c5efed;

    /* Neutral slate scale */
    --n-0:  #ffffff;
    --n-25: #fbfcfe;
    --n-50: #f5f7fa;
    --n-75: #eef1f6;
    --n-100:#e6eaf1;
    --n-150:#dce1ea;
    --n-200:#cdd4e0;
    --n-300:#aab3c4;
    --n-400:#8590a3;
    --n-500:#677085;
    --n-600:#4e576a;
    --n-700:#3a4256;
    --n-800:#272e3f;
    --n-900:#141925;
    --ink:  #141925;

    /* Status */
    --green: #16a34a;
    --green-700:#157a3a;      /* AA text on green-050 (4.85:1) */
    --green-050:#e7f6ec;
    --amber: #d97706;
    --amber-700:#a8500a;      /* AA text on amber-050 (4.9:1) / warn-bg (5.05:1) */
    --amber-050:#fef0dc;
    --red:   #dc2626;
    --red-700:#b42121;        /* AA text on red-050 (5.3:1) — for DELETE/error labels */
    --red-050:#fdeaea;
    --violet:#7c3aed;
    --violet-050:#f1e9ff;
    --warn-bg:#fff4e0;        /* dedicated warning surface (distinct from amber scope badge) */
    --warn-border:#f4cf8e;

    /* Surfaces */
    --bg: #eef1f6;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --border: #e2e7f0;
    --border-strong: #d3dae5;

    /* Shape & shadow */
    --r-xs: 5px;     /* tiny pills, lang buttons, join tags */
    --r-sm: 7px;     /* small buttons, chips */
    --r-md: 9px;     /* buttons, inputs, controls */
    --r-card: 11px;  /* list rows, cards-lite */
    --r-lg: 14px;    /* primary cards */
    --r-xl: 20px;    /* pill / fully rounded UI */
    --shadow-xs: 0 1px 2px rgba(20,25,37,.05);
    --shadow-sm: 0 1px 3px rgba(20,25,37,.06), 0 1px 2px rgba(20,25,37,.04);
    --shadow-md: 0 4px 14px rgba(20,25,37,.07), 0 1px 3px rgba(20,25,37,.05);
    --shadow-lg: 0 18px 48px rgba(20,25,37,.16);
    --ring: 0 0 0 3px rgba(13,110,253,.22);

    /* Layout */
    --rail-w: 212px;
    --rail-w-collapsed: 68px;
    --topbar-h: 60px;
    --mockbar-h: 0px;   /* mockup scaffolding bar is not present in production */

    /* Type */
    --font-display: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Spacing scale */
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 12px;
    --space-6: 16px;
    --space-7: 20px;
    --space-8: 24px;
    --space-9: 32px;

    /* Type ramp (snapped from ~22 ad-hoc sizes) */
    --text-2xs: 10.5px;   /* badge / overline / tooltip-tiny */
    --text-xs:  12px;     /* tiny meta, captions */
    --text-sm:  13px;     /* small UI text, table cells, buttons */
    --text-base:14px;     /* body */
    --text-md:  15px;     /* card headings */
    --text-lg:  17px;     /* modal heading */
    --text-xl:  21px;     /* small page title / large numerals */
    --text-2xl: 26px;     /* page h1 / big stat value */
    --text-3xl: 30px;     /* hero numerals */

    /* Motion — shared durations/easing (was ad-hoc .12/.18/.22/.35s) */
    --motion-fast: .12s;
    --motion-mid:  .18s;
    --motion-slow: .35s;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);   /* M3/Fluent emphasized-decelerate */
    --dark-ring: 0 0 0 2px #0b1020, 0 0 0 4px #6aa6ff;  /* focus ring on dark rail */
}

* { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
html { color-scheme: light; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -.01em; color: var(--n-900); text-wrap: balance; }

/* ---------- Consistent keyboard focus ring (every interactive control) ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
.match-mode button:focus-visible, .settings-nav a:focus-visible, .cond-not:focus-visible,
.chip:focus-visible, .account-chip:focus-visible, .hist-row:focus-visible,
.webmail-btn:focus-visible, .lang-switch button:focus-visible {
    outline: none; box-shadow: var(--ring); border-radius: var(--r-sm);
}
/* Light-on-dark focus ring for controls on the dark rail / mockbar */
.rail-link:focus-visible, .rail-collapse-btn:focus-visible, .mockbar a:focus-visible {
    outline: none; box-shadow: var(--dark-ring);
}

svg.ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.16em; fill: currentColor; flex: none; }
.ic-lg { width: 1.3em; height: 1.3em; }

/* ---------- Mockup scaffolding bar ---------- */
.mockbar {
    position: fixed; inset: 0 0 auto 0; height: var(--mockbar-h);
    z-index: 1000;
    background: #0b1020; color: #c3ccdd;
    display: flex; align-items: center; gap: 2px;
    padding: 0 12px; font-size: 11.5px;
    overflow-x: auto; white-space: nowrap;
    border-bottom: 1px solid #1d2741;
    scrollbar-width: thin;
}
.mockbar .mb-tag {
    font-family: var(--font-mono); font-weight: 700; letter-spacing: .08em;
    color: #6f7ea3; text-transform: uppercase; margin-right: 8px; font-size: 10px;
}
.mockbar a {
    color: #aab6d0; padding: 4px 9px; border-radius: var(--r-xs); text-decoration: none;
    transition: background .12s, color .12s;
}
.mockbar a:hover { background: #1a2440; color: #fff; text-decoration: none; }
.mockbar a.active { background: var(--blue); color: #fff; }
.mockbar .mb-back { margin-left: auto; color: #7e8cae; border: 1px solid #2a375a; }
.mockbar .mb-back:hover { background: #2a375a; color:#fff; }

/* ---------- App shell ---------- */
.app {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "rail top" "rail main";
    min-height: calc(100vh - var(--mockbar-h));
    margin-top: var(--mockbar-h);
    transition: grid-template-columns .18s ease;
}
.app.rail-collapsed { grid-template-columns: var(--rail-w-collapsed) 1fr; }

/* ---------- Sidebar rail ---------- */
.rail {
    grid-area: rail;
    background: linear-gradient(178deg, #0c1426 0%, #101a30 60%, #0e1830 100%);
    color: #c4cde0;
    display: flex; flex-direction: column;
    border-right: 1px solid #1b2842;
    position: sticky; top: var(--mockbar-h);
    height: calc(100vh - var(--mockbar-h));
    z-index: 60;
}
.rail-head {
    display: flex; align-items: center; gap: 10px;
    height: var(--topbar-h); padding: 0 16px;
    border-bottom: 1px solid #1b2842; flex: none;
}
.rail-brand {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
    text-decoration: none; border-radius: var(--r-md);
}
.rail-brand:hover { text-decoration: none; }
.rail-brand:hover .rail-mark { box-shadow: 0 4px 16px rgba(13,110,253,.6); }
/* Drawer close (X) — only shown when the rail is an off-canvas drawer (≤820px). */
.rail-close {
    display: none; flex: none; width: 34px; height: 34px; border-radius: var(--r-md);
    align-items: center; justify-content: center; cursor: pointer;
    background: transparent; border: 1px solid #1b2842; color: #9fb0d6;
}
.rail-close svg { width: 16px; height: 16px; }
.rail-close:hover { background: #1b2842; color: #fff; }
.rail-mark {
    width: 34px; height: 34px; border-radius: var(--r-md); flex: none;
    background: linear-gradient(135deg, var(--blue) 0%, #4f9cff 100%);
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 4px 12px rgba(13,110,253,.45);
}
.rail-mark svg { width: 19px; height: 19px; }
.rail-title { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
.rail-title b { font-family: var(--font-display); font-size: 14.5px; color: #fff; font-weight: 600; white-space: nowrap; }
.rail-title span { font-size: 10.5px; color: #6b7aa0; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

.rail-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.rail-section { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8896c0; padding: 14px 10px 6px; }
.rail-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: var(--r-md); color: #b3bdd6;
    font-weight: 500; font-size: var(--text-sm); cursor: pointer;
    margin-bottom: 2px; position: relative;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.rail-link svg { width: 18px; height: 18px; opacity: .85; }
.rail-link:hover { background: #18233e; color: #fff; text-decoration: none; }
.rail-link.active { background: linear-gradient(90deg, rgba(13,110,253,.22), rgba(13,110,253,.06)); color: #fff; }
.rail-link.active::before {
    content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--blue);
}
.rail-link .badge-dot { margin-left: 2px; background: var(--teal); color: #fff;
    font-size: 10.5px; font-weight: 700; border-radius: var(--r-xl); padding: 1px 7px; }

.rail-foot { padding: 12px; border-top: 1px solid #1b2842; flex: none; }
.rail-collapse-btn {
    width: 100%; display: flex; align-items: center; gap: 10px; justify-content: flex-start;
    background: #16213b; border: 1px solid #243355; color: #9fabc9;
    padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; font-size: 12.5px; font-family: var(--font-body);
    transition: background .12s, color .12s;
}
.rail-collapse-btn:hover { background: #1d2b49; color: #fff; }
.rail-collapse-btn svg { width: 15px; height: 15px; transition: transform .2s; }

/* Collapsed rail */
.rail-collapsed .rail-title,
.rail-collapsed .rail-section,
.rail-collapsed .rail-link span[data-i18n],
.rail-collapsed .rail-collapse-btn span[data-i18n],
.rail-collapsed .rail-link .badge-dot { display: none; }
.rail-collapsed .rail-head { justify-content: center; padding: 0; }
.rail-collapsed .rail-brand { flex: none; }
.rail-collapsed .rail-link { justify-content: center; padding: 11px 0; }
.rail-collapsed .rail-collapse-btn { justify-content: center; }
.rail-collapsed .rail-collapse-btn svg { transform: rotate(180deg); }
/* Let tooltips escape the rail when collapsed (6 icon links — no scroll needed) */
.rail-collapsed .rail-nav { overflow: visible; }
.rail-collapsed .rail-link::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) scale(.96);
    transform-origin: left center;
    background: var(--n-900); color: #fff; padding: 6px 10px; border-radius: var(--r-sm);
    font-size: 12.5px; font-weight: 500; white-space: nowrap; line-height: 1;
    pointer-events: none; opacity: 0; box-shadow: var(--shadow-md); z-index: 90;
    transition: opacity .12s ease, transform .12s ease;
}
.rail-collapsed .rail-link::before {
    content: ""; position: absolute; left: calc(100% + 6px); top: 50%;
    transform: translateY(-50%); border: 6px solid transparent; border-right-color: var(--n-900);
    pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 90;
}
.rail-collapsed .rail-link:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
.rail-collapsed .rail-link:hover::before { opacity: 1; }

/* ---------- Top bar ---------- */
.topbar {
    grid-area: top;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 16px;
    padding: 0 22px;
    position: sticky; top: var(--mockbar-h); z-index: 55;
    min-width: 0; overflow: hidden;
}
.topbar-right { min-width: 0; }
.hamb {
    display: none; background: none; border: 1px solid var(--border-strong);
    border-radius: var(--r-md); width: 38px; height: 38px; cursor: pointer; color: var(--n-700);
    align-items: center; justify-content: center;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--n-500); min-width: 0; }
.crumbs .euregio-logo { height: 26px; width: auto; margin-right: 6px; flex: none; }
.crumbs .sep { color: var(--n-300); }
.crumbs .crumb-current { color: var(--n-900); font-weight: 600; }
.crumbs a { color: var(--n-500); }
.crumbs a:hover { color: var(--blue); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.lang-switch { display: inline-flex; gap: 4px; }
.lang-switch button {
    border: 1px solid var(--blue); background: var(--surface); color: var(--blue);
    font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: var(--r-xs); cursor: pointer;
    font-family: var(--font-body); letter-spacing: .02em;
    transition: background .12s, color .12s;
}
.lang-switch button:hover { background: var(--blue-050); }
.lang-switch button.active { background: var(--blue); color: #fff; }

.topbar-divider { width: 1px; height: 26px; background: var(--border); }

.account-chip { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 6px; border-radius: var(--r-md);
    border: none; background: transparent; font-family: var(--font-body); text-decoration: none; color: inherit; }
.account-chip:hover { background: var(--n-50); }
.avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--blue) 0%, var(--teal) 130%);
    color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
    letter-spacing: .02em;
}
.account-meta { line-height: 1.2; text-align: left; }
.account-meta b { font-size: 13px; color: var(--n-900); display: block; }
.account-meta span { font-size: 11px; color: var(--n-500); }

.webmail-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--n-700);
    padding: 7px 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 600; cursor: pointer;
    font-family: var(--font-body);
}
.webmail-btn:hover { background: var(--n-50); border-color: var(--n-300); text-decoration: none; }

/* ---------- Main content ---------- */
.main { grid-area: main; padding: 26px 30px 60px; overflow-x: hidden; min-width: 0; }
.page-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head .ph-text { min-width: 0; }
.page-head h1 { font-size: var(--text-2xl); line-height: 1.15; }
.page-head .subtitle { color: var(--n-500); font-size: 13.5px; margin-top: 5px; }
.page-head .ph-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--n-700);
    padding: 8px 14px; border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
    font-family: var(--font-body); white-space: nowrap;
    transition: background .12s, border-color .12s, box-shadow .12s, transform .04s;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: var(--n-50); border-color: var(--n-300); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(13,110,253,.28); }
.btn-primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
/* Tonal secondary tier — between filled primary and outlined default */
.btn-secondary { background: var(--blue-050); border-color: transparent; color: var(--blue-700); }
.btn-secondary:hover { background: var(--blue-100); border-color: transparent; }
.btn-ai {
    /* Both gradient stops keep white text ≥4.5:1 (teal-600 = 4.65, #0a6b69 = 6.3) */
    background: linear-gradient(135deg, #0a6b69 0%, var(--teal-600) 100%);
    border-color: var(--teal-600); color: #fff; box-shadow: 0 2px 10px rgba(14,156,152,.32);
}
.btn-ai:hover { background: linear-gradient(135deg, #085553 0%, #0a6b69 100%); border-color: #085553; }
.btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.btn-success:hover { background: #15893f; border-color: #15893f; }
.btn-run { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn-run:hover { background: var(--n-50); border-color: var(--n-300); }
.btn-danger { color: var(--red); border-color: #f1c4c4; background: var(--surface); }
.btn-danger:hover { background: var(--red-050); border-color: #e9a9a9; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--n-75); }
.btn-sm { padding: 5px 10px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.btn-sm svg { width: 13px; height: 13px; }
.btn-icon { padding: 7px; width: 34px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Touch hit-area expansion — keeps desktop visuals compact while meeting
   the 44px minimum on coarse (touch) pointers. The ::before grows the tap
   zone past the visible control without changing its painted size. */
.btn, .lang-switch button, .cond-del, .switch, .hamb { position: relative; }
@media (pointer: coarse) {
    .btn-sm, .lang-switch button, .cond-del, .pager .btn-sm {
        min-height: 44px;
    }
    .btn-sm, .lang-switch button { display: inline-flex; align-items: center; }
    .cond-del { width: 44px; height: 44px; }
    .switch::before, .hamb::before {
        content: ""; position: absolute; left: 50%; top: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
    .rule-actions .btn-sm::before {
        content: ""; position: absolute; inset: -8px;
    }
}

/* ---------- Cards ---------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px; }
.card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.card-head h3, .card-head .card-h { font-size: var(--text-md); }
.card-head .ch-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-body { padding: 18px; }
.muted { color: var(--n-500); }
.tiny { font-size: var(--text-xs); }

/* ---------- Badges & pills ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 8px; border-radius: var(--r-sm); line-height: 1.4; white-space: nowrap;
}
.badge svg { width: 11px; height: 11px; }
.badge-move   { background: var(--blue-050); color: var(--blue-700); }
/* COPY: neutral-blue tint, outlined — distinct from solid MOVE, teal reserved for AI */
.badge-copy   { background: var(--n-50); color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-100); }
.badge-delete { background: var(--red-050); color: var(--red-700); }
.badge-read   { background: var(--n-100); color: var(--n-600); }
.badge-forward{ background: var(--violet-050); color: var(--violet); }
.badge-scope-all    { background: var(--amber-050); color: var(--amber-700); }
.badge-scope-unread { background: var(--n-100); color: var(--n-600); }
.badge-scope-read   { background: var(--teal-050, #e6f7f5); color: var(--teal-700, #0f766e); }
/* Warning / conflict: own surface, no longer reuses the amber scope badge */
.badge-warn   { background: var(--warn-bg); color: var(--amber-700); box-shadow: inset 0 0 0 1px var(--warn-border); }
.badge-ai { background: linear-gradient(135deg, var(--teal-050), var(--blue-050)); color: var(--teal-700); }
.badge-neutral { background: var(--n-100); color: var(--n-600); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-xl);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--n-700);
    white-space: nowrap;
}
.chip svg { width: 12px; height: 12px; flex: none; }
/* Long chip labels (e.g. a forward address in the analyzer) truncate within the
   chip instead of overflowing the table cell; the full value stays in title. */
.chip { max-width: 100%; }
.chip .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msg-suggestion { overflow: hidden; }
.chip-folder { color: var(--blue-700); background: var(--blue-050); border-color: transparent; }
.chip-suggest { background: var(--green-050); color: var(--green-700); border-color: transparent; }
/* AI suggestion chip — teal accent (AI), reserves teal as the single AI cue */
.chip-ai { background: linear-gradient(135deg, var(--teal-050), var(--blue-050)); color: var(--teal-700); border-color: transparent; }
/* Deterministic (header-detected) suggestion chip — amber, never teal so it's
   visibly NOT an AI suggestion (no API call, no cost). */
.chip-det { background: var(--amber-050); color: var(--amber-700); border-color: transparent; }
button.chip-det:hover { background: var(--amber-050); border-color: var(--amber-700); }
/* Analyzer: a row acted on this session — kept visible but greyed (the applied
   destination shows in the Suggestion column). "Hide handled" removes them. */
tr.msg-handled { opacity: .55; }
tr.msg-handled:hover { opacity: 1; }
/* Analyzer: the app's own daily-brief email — shown but non-actionable, so the
   count matches the real inbox and the user knows the brief ran. */
tr.msg-system { background: var(--surface-2); }
tr.msg-system .msg-from .cell-strong, tr.msg-system .msg-subject { color: var(--n-500); }
.chip-system { background: var(--n-100); color: var(--n-600); border-color: transparent; }
button.chip, a.chip { cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast); }
button.chip:hover, a.chip:hover { background: var(--n-50); border-color: var(--n-300); text-decoration: none; }
button.chip-folder:hover, a.chip-folder:hover { background: var(--blue-100); border-color: transparent; }

/* ---------- Toggle switch (iOS-style: recessed track + raised knob) ---------- */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
    position: absolute; inset: 0; background: var(--n-300); border-radius: var(--r-xl);
    transition: background var(--motion-mid) var(--ease-standard); cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(20,25,37,.18);   /* recessed off-track */
}
.switch .track::before {
    content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%;
    transition: transform var(--motion-mid) var(--ease-standard);
    box-shadow: 0 1px 2px rgba(20,25,37,.3), 0 2px 5px rgba(20,25,37,.18);  /* raised knob */
}
.switch input:checked + .track { background: var(--green); box-shadow: none; }
.switch input:checked + .track::before { transform: translateX(18px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

/* ---------- Forms ---------- */
label { font-size: 13px; font-weight: 600; color: var(--n-700); display: block; margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.hint { font-size: 12px; color: var(--n-500); margin-top: 6px; }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=time], select, textarea {
    width: 100%; font-family: var(--font-body); font-size: 13.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r-md); padding: 9px 11px; transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--n-400); }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23677085'><path d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 30px; cursor: pointer; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--n-400); }
.input-icon input { padding-left: 34px; }

.checkrow { display: flex; align-items: flex-start; gap: 10px; }
.checkrow input[type=checkbox] { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--blue); flex: none; cursor: pointer; }
.checkrow label { margin: 0; font-weight: 500; cursor: pointer; }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.tbl th {
    text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--n-500); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border);
    background: var(--surface-2); white-space: nowrap; position: sticky; top: 0;
}
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--n-800); }
table.tbl th.sortable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); color: var(--n-800); }
table.tbl th.sortable::after { content: ""; display: inline-block; width: 0; }
table.tbl th[aria-sort=ascending]::after { content: " ▲"; font-size: 9px; color: var(--blue); }
table.tbl th[aria-sort=descending]::after { content: " ▼"; font-size: 9px; color: var(--blue); }
table.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: none; }
.cell-strong { font-weight: 600; color: var(--n-900); }
.cell-sub { color: var(--n-500); font-size: 12px; }
.truncate { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fixed-layout tables: explicit column widths, flexible column absorbs the rest */
table.tbl.tbl-fixed { table-layout: fixed; }
.tbl-fixed .truncate { max-width: none; }
.tbl-fixed .cell-strong, .tbl-fixed .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 16px 17px; box-shadow: var(--shadow-xs); position: relative; overflow: hidden;
}
/* Clickable stat tile (e.g. Last run → run detail) */
a.stat-link { text-decoration: none; color: inherit; display: block; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .08s; }
a.stat-link:hover { border-color: var(--blue-100); box-shadow: var(--shadow-sm); transform: translateY(-1px); text-decoration: none; }
.stat .stat-icon {
    width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 12px;
}
.stat .stat-icon svg { width: 18px; height: 18px; }
/* Media-row icon tile: used inline next to text (schedule card, AI callout),
   i.e. outside a .stat where the sizing rules above don't apply. */
.stat-icon.tile { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; }
.stat-icon.tile svg { width: 17px; height: 17px; }
.stat .stat-label { font-size: 12px; color: var(--n-500); font-weight: 600; }
.stat .stat-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--n-900); line-height: 1.1; margin-top: 3px; letter-spacing: -.02em; }
.stat .stat-meta { font-size: 12px; color: var(--n-500); margin-top: 6px; }
.stat .stat-meta .up { color: var(--green); font-weight: 600; }
.ic-blue  { background: var(--blue-050); color: var(--blue); }
.ic-teal  { background: var(--teal-050); color: var(--teal-600); }
.ic-green { background: var(--green-050); color: var(--green); }
.ic-amber { background: var(--amber-050); color: var(--amber); }
.ic-violet{ background: var(--violet-050); color: var(--violet); }
.ic-red   { background: var(--red-050); color: var(--red); }

/* ---------- Toolbar ---------- */
.toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.toolbar .grow { flex: 1; min-width: 160px; }
.toolbar .spacer { margin-left: auto; }

/* ---------- Inline conflict / optimize panel ---------- */
.inline-panel {
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
    box-shadow: var(--shadow-sm); margin-bottom: 18px; overflow: hidden;
}
.inline-panel.hidden { display: none; }
.inline-panel-head {
    display: flex; align-items: center; gap: 10px; padding: 13px 18px;
    background: var(--amber-050); border-bottom: 1px solid #f0dcb8;
}
.inline-panel-head svg { color: var(--amber); }
.inline-panel-head h3 { font-size: var(--text-base); color: #9a5a00; }
.inline-panel-head .ip-close { margin-left: auto; }
.inline-panel-body { padding: 16px 18px; }
.conflict-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; background: var(--surface-2);
}
.conflict-row .cr-rule { font-weight: 600; }
.conflict-row .cr-rel { color: var(--n-500); font-size: 12.5px; }

/* ---------- Rule list rows ---------- */
.rule-list { display: flex; flex-direction: column; gap: 9px; }
.rule-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
    padding: 11px 15px; box-shadow: var(--shadow-xs);
    transition: border-color .12s, box-shadow .12s;
}
.rule-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.rule-row.disabled { opacity: .62; background: var(--surface-2); }
.rule-drag { color: var(--n-300); cursor: grab; display: flex; }
.rule-drag svg { width: 16px; height: 16px; }
.rule-main { min-width: 0; cursor: pointer; }
.rule-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rule-name .rn { font-weight: 600; font-size: 14px; color: var(--n-900); }
/* Expand/collapse affordance: a caret at the end of the name row, rotated when
   collapsed. Toggled per-row (click the rule) and via Expand all / Collapse all. */
.rule-name::after {
    content: ""; width: 8px; height: 8px; margin-left: 4px;
    border-right: 2px solid var(--n-400); border-bottom: 2px solid var(--n-400);
    transform: rotate(45deg); transition: transform .15s; flex: none;
}
.rule-row.collapsed .rule-name::after { transform: rotate(-45deg); }
.rule-name .disabled-tag { color: var(--red); font-size: 11.5px; font-weight: 600; }
.rule-cond { color: var(--n-500); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Expanded: reveal the full condition summary instead of a truncated one line. */
.rule-row:not(.collapsed) .rule-cond { white-space: normal; overflow: visible; text-overflow: clip; }
.rule-target { display: flex; align-items: center; gap: 7px; }
.rule-badges { display: flex; gap: 6px; align-items: center; }
.rule-actions { display: flex; align-items: center; gap: 6px; }

/* ---------- Rule editor ---------- */
.editor-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.cond-list { display: flex; flex-direction: column; gap: 8px; }
.cond-row {
    display: grid;
    grid-template-columns: auto auto 130px 138px 1fr auto;
    align-items: center; gap: 8px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 7px 9px;
}
.cond-row .cond-join {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    color: var(--blue-700); background: var(--blue-050); border-radius: var(--r-xs);
    padding: 3px 7px; min-width: 48px; text-align: center;
}
.cond-row .cond-join.and { color: var(--violet); background: var(--violet-050); }
.cond-not {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
    color: var(--n-500); padding: 5px 9px; border: 1px solid var(--border-strong);
    border-radius: var(--r-sm); cursor: pointer; user-select: none; white-space: nowrap;
}
.cond-not input { width: 14px; height: 14px; accent-color: var(--red); margin: 0; }
.cond-row select, .cond-row input { padding: 7px 9px; font-size: var(--text-xs); }
.cond-del {
    border: none; background: var(--red-050); color: var(--red); border-radius: var(--r-sm);
    width: 30px; height: 30px; cursor: pointer; display: grid; place-items: center; flex: none;
}
.cond-del:hover { background: #f9d4d4; }
.cond-del svg { width: 13px; height: 13px; }

/* Segmented control (gray track + white selected thumb) — macOS/Fluent idiom */
.match-mode { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--r-md); background: var(--n-100); border: 1px solid var(--n-150); }
.match-mode button {
    border: none; background: transparent; padding: 6px 14px; font-size: var(--text-xs); font-weight: 600;
    color: var(--n-600); cursor: pointer; font-family: var(--font-body); border-radius: var(--r-sm);
    transition: background var(--motion-fast), color var(--motion-fast);
}
.match-mode button:hover { color: var(--n-900); }
.match-mode button.active { background: var(--surface); color: var(--blue-700); box-shadow: var(--shadow-xs); }

.preview-panel { position: sticky; top: calc(var(--topbar-h) + var(--mockbar-h) + 14px); }
.preview-row {
    display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.preview-row:last-child { border-bottom: none; }
.preview-row .pr-from { font-weight: 600; color: var(--n-800); }
.preview-count {
    font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--blue);
    letter-spacing: -.02em; line-height: 1;
}

/* ---------- History rows ---------- */
.hist-list { display: flex; flex-direction: column; gap: 9px; }
.hist-row {
    display: flex; align-items: center; gap: 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
    padding: 14px 18px; box-shadow: var(--shadow-xs); cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .08s;
}
.hist-row:hover { border-color: var(--blue-100); box-shadow: var(--shadow-sm); transform: translateX(2px); text-decoration: none; }
.hist-date { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--n-900); min-width: 150px; }
.hist-spark { flex: 1; height: 26px; display: flex; align-items: flex-end; gap: 3px; }
.hist-spark .bar { width: 6px; border-radius: 2px 2px 0 0; background: var(--blue-100); }
.hist-stats { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.hist-stats .hs { text-align: right; }
.hist-stats .hs b { font-family: var(--font-display); font-size: 16px; color: var(--n-900); }
.hist-stats .hs span { font-size: 11px; color: var(--n-500); display: block; }

/* ---------- Logs ---------- */
.log-list { font-size: var(--text-sm); }
.log-row {
    display: grid; grid-template-columns: 168px 92px 1fr; gap: 14px; align-items: baseline;
    padding: 9px 14px; border-bottom: 1px solid var(--border);
}
.log-row:hover { background: var(--surface-2); }
.log-row:last-child { border-bottom: none; }
.log-time { font-family: var(--font-mono); font-size: 12px; color: var(--n-500); white-space: nowrap; }
.log-msg { color: var(--n-800); word-break: break-word; }
.lvl { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-xs); display: inline-block; }
.lvl-info { background: var(--blue-050); color: var(--blue-700); }
.lvl-warning { background: var(--amber-050); color: var(--amber-700); }
.lvl-error { background: var(--red-050); color: var(--red); }
.lvl-debug { background: var(--n-100); color: var(--n-600); }

/* ---------- Activity feed ---------- */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.feed-item:last-child { border-bottom: none; }
/* Clickable activity rows → run detail */
a.feed-item { text-decoration: none; color: inherit; cursor: pointer; padding: 11px 10px; margin: 0 -10px; border-radius: var(--r-md); transition: background .12s; }
a.feed-item:hover { background: var(--n-50); text-decoration: none; }
.feed-ic { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; }
.feed-ic svg { width: 15px; height: 15px; }
.feed-body { min-width: 0; }
.feed-body .ft { font-size: 13px; color: var(--n-800); }
.feed-body .ft b { color: var(--n-900); font-weight: 600; }
.feed-body .fm { font-size: 11.5px; color: var(--n-500); margin-top: 2px; }

/* ---------- Settings sub-nav ---------- */
.settings-grid { display: grid; grid-template-columns: 232px 1fr; gap: 26px; align-items: start; min-width: 0; }
/* Prevent grid/flex children blowing out the row from long <select> options or
   the horizontally-scrolling sub-nav (the min-width:auto blowout) — esp. on mobile. */
.settings-grid > *, .settings-section, .card { min-width: 0; }
.grid-2 > *, .grid-3 > *, .dash-split > *, .stat-grid > * { min-width: 0; }
/* Card headers wrap their action buttons below the title when they don't fit
   (e.g. AI-stats Refresh/Reset, results filters) instead of forcing overflow. */
.card-head { flex-wrap: wrap; row-gap: 8px; }
.card-head h2, .card-head h3, .card-head .card-h { min-width: 0; }
/* API key + buttons row wraps on narrow screens instead of overflowing. */
.api-key-row { flex-wrap: wrap; }
.api-key-row .input-icon { flex: 1 1 160px; min-width: 0; }

/* Settings save bar — floating at the bottom on small screens.
   position:fixed (not sticky) because .main has overflow-x:hidden, which makes
   it a non-scrolling overflow container and breaks sticky. fixed escapes it. */
.settings-savebar {
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    position: fixed; left: var(--rail-w); right: 0; bottom: 0; z-index: 60;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(20,25,37,.10);
    transition: left .18s ease;
}
/* Bar starts where the rail ends, and follows the rail when it collapses. */
.app.rail-collapsed .settings-savebar { left: var(--rail-w-collapsed); }
/* "Unsaved changes" note on the left — reserved space, shown only while dirty. */
.settings-savebar .savebar-hint { margin-right: auto; font-size: 13px; color: var(--n-500); }
.settings-savebar:not(.is-dirty) .savebar-hint { visibility: hidden; }
/* The floating bar replaces the top-right Save button at every width. */
.page-head #save-settings-btn { display: none; }
/* Clearance so the last settings aren't hidden behind the fixed bar. */
.settings-grid { padding-bottom: 84px; }

@media (max-width: 820px) {
    /* Rail becomes an off-canvas drawer — the bar spans the full viewport. */
    .settings-savebar { left: 0; }
}
@media (max-width: 900px) {
    .settings-savebar { padding-left: 16px; padding-right: 16px; }
    .settings-savebar .savebar-hint { display: none; }
    .settings-savebar .btn-block { width: 100%; padding: 11px; }
}
.settings-nav { position: sticky; top: calc(var(--topbar-h) + var(--mockbar-h) + 14px); display: flex; flex-direction: column; gap: 2px; }
.settings-nav a {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-md);
    color: var(--n-600); font-weight: 500; font-size: 13.5px;
}
.settings-nav a svg { width: 16px; height: 16px; opacity: .8; }
.settings-nav a:hover { background: var(--n-75); color: var(--n-900); text-decoration: none; }
.settings-nav a.active { background: var(--blue-050); color: var(--blue-700); font-weight: 600; }
.settings-section { scroll-margin-top: calc(var(--topbar-h) + var(--mockbar-h) + 18px); margin-bottom: 18px; }

.note {
    display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 12.5px;
    background: var(--blue-050); color: var(--blue-700); border: 1px solid var(--blue-100);
}
.note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.note-green { background: var(--green-050); color: var(--green-700); border-color: #cdeccf; }
.note-amber { background: var(--amber-050); color: var(--amber-700); border-color: #f0dcb8; }

/* Run-detail results filter bar */
.rd-filters { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 18px 0; }
.rd-filters select { width: auto; min-width: 130px; font-size: var(--text-sm); }

/* ---------- AI daily brief (run detail) ---------- */
.brief-grid { display: grid; gap: 15px; margin: 4px 0 16px; }
.brief-sec { border-left: 3px solid var(--border-strong); padding: 1px 0 1px 13px; }
.brief-sec.attn    { border-color: var(--amber); }
.brief-sec.sec     { border-color: var(--blue); }
.brief-sec.routine { border-color: var(--n-300); }
.brief-sec.ai      { border-color: var(--teal-600); }
.brief-sec h4 {
    margin: 0 0 4px; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em;
    color: var(--n-500); font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.brief-sec h4 svg { width: 12px; height: 12px; }
.brief-sec.attn h4 { color: var(--amber-700); }
.brief-sec.ai h4   { color: var(--teal-600); }
.brief-sec p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--n-700); }
.brief-sec p b { color: var(--n-900); font-weight: 600; }

/* ---------- Alert / failure banners (IMAP down, LLM error, staleness) ---------- */
.alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 16px; border-radius: var(--r-md); margin-bottom: 18px;
    border: 1px solid var(--border); background: var(--surface); font-size: var(--text-sm);
}
.alert .alert-ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.alert .alert-body { min-width: 0; flex: 1; }
.alert .alert-title { font-weight: 700; color: var(--n-900); margin-bottom: 2px; }
.alert .alert-text { color: var(--n-600); line-height: 1.5; }
.alert .alert-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.alert-error  { background: var(--red-050); border-color: #f1c4c4; }
.alert-error .alert-ic, .alert-error .alert-title { color: var(--red-700); }
.alert-warn   { background: var(--warn-bg); border-color: var(--warn-border); }
.alert-warn .alert-ic, .alert-warn .alert-title { color: var(--amber-700); }
.alert-info   { background: var(--blue-050); border-color: var(--blue-100); }
.alert-info .alert-ic, .alert-info .alert-title { color: var(--blue-700); }
.alert-success{ background: var(--green-050); border-color: #cdeccf; }
.alert-success .alert-ic, .alert-success .alert-title { color: var(--green-700); }
@media (max-width: 560px) { .alert { flex-wrap: wrap; } .alert .alert-actions { margin-left: 0; width: 100%; } }

/* ---------- Empty / loading states ---------- */
.empty { text-align: center; padding: 50px 20px; color: var(--n-500); }
.empty svg { width: 44px; height: 44px; color: var(--n-300); margin-bottom: 12px; }
.empty h3 { font-size: var(--text-lg); color: var(--n-700); margin-bottom: 6px; }
.empty p { max-width: 38ch; margin: 0 auto 16px; line-height: 1.55; }
.empty.hidden { display: none; }

/* ---------- Help page ---------- */
.help-body { color: var(--n-700); font-size: var(--text-base); line-height: 1.62; }
.help-body p { margin: 0 0 12px; }
.help-body p:last-child { margin-bottom: 0; }
.help-body ul { margin: 4px 0 14px; padding-left: 20px; }
.help-body li { margin: 5px 0; }
.help-body strong { color: var(--n-900); font-weight: 600; }
.help-body em { color: var(--n-700); font-style: normal; background: var(--n-75); padding: 1px 5px; border-radius: var(--r-xs); font-size: .94em; }
.help-figure { margin: 0 0 18px; }
.help-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow .15s; }
.help-figure a:hover img { box-shadow: var(--shadow-md); }
.help-figure figcaption { font-size: var(--text-xs); color: var(--n-500); margin-top: 9px; text-align: center; }

/* Chart hover tooltip (dashboard 14-day bars) */
.chart-tip {
    position: absolute; transform: translateX(-50%);
    background: var(--n-900); color: #fff; padding: 5px 9px; border-radius: var(--r-sm);
    font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; line-height: 1.3;
    pointer-events: none; box-shadow: var(--shadow-md); z-index: 5;
}
.chart-tip.hidden { display: none; }

/* Loading skeleton (table/list placeholder) */
.skeleton { background: var(--n-100); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    transform: translateX(-100%); animation: sk-shimmer 1.3s infinite;
}
.skeleton-row { height: 14px; margin: 10px 0; }
@keyframes sk-shimmer { to { transform: translateX(100%); } }

/* Visually-hidden (for accessible names / skip target) */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — appears on keyboard focus */
.skip-link {
    position: fixed; left: 8px; top: -80px; z-index: 1001;
    background: var(--blue); color: #fff; padding: 9px 14px; border-radius: var(--r-md);
    font-size: var(--text-sm); font-weight: 600; box-shadow: var(--shadow-md);
    transition: top .15s ease;
}
.skip-link:focus { top: calc(var(--mockbar-h) + 8px); outline: none; text-decoration: none; }

/* Busy state for long-running action buttons */
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy .spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    display: inline-block; animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Modal (small transactional only) ---------- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(20,25,37,.5); z-index: 200;
    display: grid; place-items: center; padding: 20px; backdrop-filter: blur(2px);
}
.modal-backdrop.hidden { display: none; }
.modal {
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 440px; overflow: hidden;
    display: flex; flex-direction: column; max-height: calc(100vh - 48px);
}
.modal-head { padding: 18px 20px 0; display: flex; align-items: center; gap: 11px; flex: none; }
.modal-head h2, .modal-head h3 { font-size: var(--text-lg); }
.modal-head .stat-icon { display: grid; place-items: center; border-radius: var(--r-md); flex: none; }
.modal-head .stat-icon svg { width: 17px; height: 17px; }
.modal-body { padding: 14px 20px 20px; color: var(--n-600); font-size: 13.5px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-foot { padding: 14px 20px 20px; display: flex; gap: 10px; justify-content: flex-end; flex: none; }
/* Scrollable pick-lists inside a modal (folder browse, IMAP folder chips) keep
   any input row + footer visible instead of pushing them off-screen. */
.modal-list { max-height: 46vh; overflow-y: auto; }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; color: var(--n-500); font-size: 13px; }
.pager .btn-sm { min-width: 86px; }

/* ---------- Drawer scrim (mobile) ---------- */
.scrim { position: fixed; inset: 0; background: rgba(20,25,37,.5); z-index: 58; display: none; }
.scrim.show { display: block; }

/* ---------- Utilities ---------- */
.hidden { display: none !important; }
.row { display: flex; gap: 12px; }
.row-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-start { justify-content: flex-start; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 18px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-md { margin-bottom: 18px; }
.m-0 { margin: 0; }
.w-full { width: 100%; }
.flex-none { flex: none; }
.tnum { font-variant-numeric: tabular-nums; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-split { grid-template-columns: 1.55fr 1fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.col { display: flex; flex-direction: column; }
.flex1 { flex: 1; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
    .editor-grid { grid-template-columns: 1fr; }
    .preview-panel { position: static; }
}

@media (max-width: 900px) {
    .settings-grid { grid-template-columns: 1fr; }
    .settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
    .settings-nav a { white-space: nowrap; }
    /* Tablet keeps two columns (no dead side-space); 3-up becomes 2-up */
    .grid-3 { grid-template-columns: 1fr 1fr; }

    /* Rule rows: reflow before badges/actions cram (was only at ≤640).
       Two-row layout — name+conditions+target on top, badges+actions below. */
    .rule-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "drag main target" "drag badges actions";
        row-gap: 10px; column-gap: 12px;
    }
    .rule-drag { grid-area: drag; align-self: start; margin-top: 4px; }
    .rule-main { grid-area: main; }
    .rule-target { grid-area: target; align-self: start; }
    .rule-badges { grid-area: badges; }
    .rule-actions { grid-area: actions; justify-content: flex-end; }
}

@media (max-width: 820px) {
    /* Sidebar becomes a drawer */
    .app { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
    .rail {
        position: fixed; top: var(--mockbar-h); left: 0; bottom: 0; width: var(--rail-w);
        transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg);
    }
    .rail.open { transform: translateX(0); }
    .app.rail-collapsed { grid-template-columns: 1fr; }
    /* Drawer always shows the full, left-aligned expanded rail — ignore collapsed state */
    .rail-collapsed .rail-title, .rail-collapsed .rail-section,
    .rail-collapsed .rail-link span[data-i18n], .rail-collapsed .rail-collapse-btn span[data-i18n] { display: block; }
    .rail-collapsed .rail-link .badge-dot { display: inline-block; }
    .rail-collapsed .rail-head { justify-content: flex-start; padding: 0 16px; }
    .rail-collapsed .rail-link { justify-content: flex-start; padding: 9px 10px; }
    .rail-collapsed .rail-collapse-btn { justify-content: flex-start; }
    .rail-collapsed .rail-collapse-btn svg { transform: none; } /* drawer: arrow points left (closes) */
    .rail-collapsed .rail-nav { overflow-y: auto; }
    .rail-collapsed .rail-link::after, .rail-collapsed .rail-link::before { display: none; }
    .hamb { display: inline-flex; }
    /* Drawer mode: the brand stays a link, plus a visible close (X) at top-right. */
    .rail-close { display: inline-flex; }
    .rail-collapsed .rail-brand { flex: 1; }
    .main { padding: 18px 16px 56px; }

    /* Condition row — compact stacked layout; remove control rides the
       join/NOT header row instead of being orphaned on its own line. */
    .cond-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "join not del" "field op op" "val val val";
        align-items: center; gap: 8px;
    }
    .cond-row .cond-join { grid-area: join; width: auto; justify-self: start; }
    .cond-row .cond-not  { grid-area: not; justify-self: start; }
    .cond-row .cond-del  { grid-area: del; justify-self: end; }
    .cond-row > select:nth-of-type(1) { grid-area: field; }
    .cond-row > select:nth-of-type(2) { grid-area: op; }
    .cond-row input[type=text] { grid-area: val; }
}

@media (max-width: 640px) {
    .topbar { padding: 0 14px; gap: 10px; flex-wrap: nowrap; min-height: var(--topbar-h); }
    .account-meta { display: none; }
    .webmail-btn { display: none; }
    .topbar-divider { display: none; }
    .crumbs { flex: 1; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
    /* On mobile the brand wordmark lives in the drawer; topbar shows menu + page title + actions */
    .crumbs .euregio-logo { display: none; }
    /* Collapse breadcrumb to the current page only — keep topbar one line */
    .crumbs a, .crumbs .sep { display: none; }
    .crumbs .crumb-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); }
    .topbar-right { flex: none; gap: 8px; }
    .page-head h1 { font-size: var(--text-xl); }

    /* Tables collapse to cards */
    .responsive-cards thead { display: none; }
    .responsive-cards tr {
        display: block; border: 1px solid var(--border); border-radius: var(--r-card);
        margin-bottom: 10px; padding: 10px 12px; background: var(--surface);
    }
    .responsive-cards td {
        display: flex; justify-content: flex-start; gap: 14px; padding: 5px 0;
        border: none; text-align: left;
    }
    /* Value sits left, right of its fixed-width label, and wraps cleanly */
    .responsive-cards td > * { text-align: left; }
    .responsive-cards td::before {
        content: attr(data-label); font-weight: 700; font-size: 11px; text-transform: uppercase;
        letter-spacing: .04em; color: var(--n-500); text-align: left; flex: none;
        min-width: 82px; max-width: 82px;
    }
    .responsive-cards td.truncate { max-width: none; white-space: normal; text-align: left; }

    .rule-row { grid-template-columns: 1fr auto; grid-template-areas: "main badges" "cond cond" "target actions"; row-gap: 8px; }
    .rule-drag { display: none; }
    .rule-main { grid-area: main; }
    .rule-badges { grid-area: badges; }
    .rule-target { grid-area: target; }
    .rule-actions { grid-area: actions; justify-content: flex-end; }

    .hist-row { flex-wrap: wrap; }
    .hist-spark { display: none; }
    .hist-date { min-width: 0; }
    .hist-stats { margin-left: auto; gap: 14px; }

    .log-row { grid-template-columns: 1fr; gap: 3px; }
    .lang-switch button { padding: 4px 6px; }

    /* Stat grids: clean 2×2 instead of orphaned 3+1 */
    .stat-grid { grid-template-columns: 1fr 1fr; }
    /* Multi-column content stacks on phones */
    .grid-2, .grid-3, .dash-split { grid-template-columns: 1fr; }

    /* Prevent iOS focus-zoom: form controls ≥16px on mobile only */
    input[type=text], input[type=email], input[type=password], input[type=search],
    input[type=number], input[type=time], select, textarea { font-size: 16px; }
    .cond-row select, .cond-row input { font-size: 16px; }
}

/* ============================================================
   Login — classic light landing (Direction A layout, B tokens)
   Used by login.html. Replaces the dark split-screen login.
   ============================================================ */
.lpc {
    min-height: calc(100vh - var(--mockbar-h));
    margin-top: var(--mockbar-h);
    display: flex; flex-direction: column;
    background:
        radial-gradient(circle at 16% 28%, rgba(13,110,253,.06), transparent 42%),
        radial-gradient(circle at 86% 10%, rgba(14,156,152,.05), transparent 40%),
        var(--n-50);
}
.lpc-header { display: flex; align-items: center; gap: 16px; padding: 18px 32px; }
.lpc-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.lpc-brand img { height: 30px; }
.lpc-brand .prod {
    font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink);
    border-left: 1px solid var(--border-strong); padding-left: 14px;
}
.lpc-brand .prod b { color: var(--blue); font-weight: 600; }
.lpc-header .lang-switch { margin-left: auto; }

.lpc-main {
    flex: 1; width: 100%; max-width: 1140px; margin: 0 auto;
    padding: 16px 32px 56px; display: grid; grid-template-columns: 1.05fr .95fr;
    gap: 56px; align-items: center;
}
.lpc-intro h1 {
    font-family: var(--font-display); font-size: 40px; line-height: 1.1;
    letter-spacing: -.01em; margin: 0 0 16px; max-width: 14ch; color: var(--ink);
}
.lpc-lede { color: var(--n-500); font-size: 16px; max-width: 46ch; margin: 0 0 34px; line-height: 1.55; }
.lpc-features { display: flex; flex-direction: column; gap: 18px; }
.lpc-feature { display: flex; gap: 14px; align-items: flex-start; }
.lpc-fic {
    width: 42px; height: 42px; border-radius: var(--r-lg); flex: none; display: grid; place-items: center;
    background: var(--blue-050); color: var(--blue); border: 1px solid var(--blue-100);
}
.lpc-fic svg { width: 18px; height: 18px; }
.lpc-fic.ai { background: var(--teal-050); color: var(--teal); border-color: var(--teal-100); }
.lpc-feature b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.lpc-feature .d { color: var(--n-500); font-size: 13px; }

.lpc-cardwrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* IMAP/POP explainer under the sign-in card — collapsible disclosure */
details.lpc-note { width: 100%; max-width: 400px; background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: var(--r-lg); }
.lpc-note-summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none; }
.lpc-note-summary::-webkit-details-marker { display: none; }
.lpc-note-summary .lpc-note-ic { color: var(--blue); flex: none; display: flex; }
.lpc-note-summary .lpc-note-ic svg { width: 18px; height: 18px; }
.lpc-note-summary b { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.lpc-note-chev { color: var(--n-400); flex: none; display: flex; }
.lpc-note-chev svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .2s; }
details.lpc-note[open] .lpc-note-chev svg { transform: rotate(-90deg); }
.lpc-note-body { padding: 0 16px 14px 42px; }
.lpc-note-body p { margin: 0; color: var(--n-600); font-size: 12.5px; line-height: 1.5; }
.lpc-note-warn { margin-top: 8px !important; color: var(--amber-700) !important; display: flex; gap: 6px; align-items: flex-start; }
.lpc-note-warn svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.lpc-card {
    width: 100%; max-width: 400px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: 32px;
}
.lpc-card h2 { font-family: var(--font-display); font-size: 23px; margin: 0 0 6px; color: var(--ink); }
.lpc-card .sub { color: var(--n-500); font-size: 13.5px; margin: 0 0 24px; }
.lpc-check { display: flex; align-items: center; gap: 9px; margin: 2px 0 20px; font-size: 13.5px; color: var(--n-700); cursor: pointer; }
.lpc-check input { width: auto; }
.lpc-card .btn-block { width: 100%; padding: 11px; font-size: 14px; }
.lpc-trust { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px;
    font-size: var(--text-xs); color: var(--n-500); text-align: center; }
.lpc-trust svg { width: 13px; height: 13px; color: var(--green); flex: none; }

.lpc-footer { border-top: 1px solid var(--border); background: var(--surface); }
.lpc-foot-inner {
    max-width: 1140px; margin: 0 auto; padding: 16px 32px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12.5px; color: var(--n-500); flex-wrap: wrap; gap: 10px;
}
.lpc-foot-inner a { color: var(--n-600); text-decoration: none; }
.lpc-foot-inner a:hover { color: var(--blue); }
.lpc-foot-right { display: flex; align-items: center; gap: 16px; }

/* Login landing — feature gallery (localized screenshots) */
.lpc-gallery { background: var(--surface); border-top: 1px solid var(--border); }
.lpc-gallery-inner { max-width: 1140px; margin: 0 auto; padding: 48px 32px; }
.lpc-gallery-inner h2 { font-family: var(--font-display); font-size: 26px; text-align: center; margin: 0 0 6px; color: var(--ink); }
.lpc-gallery-sub { text-align: center; color: var(--n-500); font-size: 15px; max-width: 64ch; margin: 0 auto 32px; line-height: 1.55; }
.lpc-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lpc-shot { margin: 0; }
.lpc-shot a { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.lpc-shot a:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lpc-shot a:focus-visible { outline: none; box-shadow: var(--ring); }
.lpc-shot img { width: 100%; height: auto; display: block; }
.lpc-shot figcaption { text-align: center; font-weight: 600; color: var(--n-700); font-size: 13.5px; margin-top: 10px; }
@media (max-width: 760px) {
    .lpc-gallery-inner { padding: 32px 18px; }
    .lpc-gallery-grid { grid-template-columns: 1fr; gap: 18px; max-width: 460px; margin: 0 auto; }
}

@media (max-width: 880px) {
    .lpc-main { grid-template-columns: 1fr; gap: 30px; padding-top: 8px; }
    .lpc-intro { order: 2; }
    .lpc-cardwrap { order: 1; }
    .lpc-intro h1 { font-size: 30px; }
}
@media (max-width: 560px) {
    .lpc-header, .lpc-main, .lpc-foot-inner { padding-left: 18px; padding-right: 18px; }
    .lpc-header { gap: 10px; }
    .lpc-brand img { height: 24px; }
    .lpc-brand .prod { display: none; } /* product name still shown in hero/card */
    .lpc-card { padding: 24px; }
    .lpc-foot-inner { justify-content: center; }
}

/* ---------- Folder distribution (run-detail "Nach Ordner") ---------- */
.fdist { display: flex; flex-direction: column; gap: 15px; }
.fdist-row { display: flex; flex-direction: column; }
.fdist-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.fdist-name {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0;
    font-size: 13.5px; font-weight: 500; color: var(--n-800); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.fdist-name svg { width: 14px; height: 14px; flex: none; color: var(--n-400); }
.fdist-val {
    font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--n-900);
    font-variant-numeric: tabular-nums; flex: none;
}
.fdist-val.is-zero { color: var(--n-500); }
.fdist-track { height: 6px; background: var(--n-75); border-radius: 999px; overflow: hidden; }
/* Animate via transform (compositor-friendly) instead of width.
   JS sets --fill (0–1); the 8px floor for non-zero bars uses min-width. */
.fdist-fill {
    height: 100%; width: 100%; background: var(--blue); border-radius: 999px;
    transform: scaleX(var(--fill, 0)); transform-origin: left center;
    transition: transform .35s ease;
}
.fdist-fill.has-min { min-width: 8px; }

/* ============================================================
   Reduced motion — neutralize transitions/animations + toast
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .es-toast { transition: none !important; }
    .fdist-fill { transition: none !important; }
}

/* ===== Onboarding wizard (onboard.php) ===== */
.btn-lg { padding: 11px 22px; font-size: var(--text-md, 15px); }
.onb-step { max-width: 760px; }
.onb-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 26px; }
.onb-hero-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
    background: var(--blue-50, #eef4ff); color: var(--blue, #2563eb); }
.onb-hero-icon svg { width: 30px; height: 30px; }
.onb-hero-icon.ok { background: var(--teal-50, #e7faf3); color: var(--teal-600, #0d9488); }
.onb-hero-title { font-size: var(--text-xl); }
.onb-hero-body { color: var(--n-600, #4b5563); max-width: 52ch; line-height: 1.55; }
.onb-privacy { text-align: left; width: 100%; max-width: 52ch; }

/* Before/after KPI cards */
.onb-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.onb-kpi { background: var(--n-50, #f8fafc); border: 1px solid var(--n-150, #e8edf3); border-radius: var(--r-md, 10px);
    padding: 14px 12px; text-align: center; }
.onb-kpi.accent { background: var(--blue-50, #eef4ff); border-color: var(--blue-200, #c7dbff); }
.onb-kpi-v { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1; }
.onb-kpi.accent .onb-kpi-v { color: var(--blue, #2563eb); }
.onb-kpi-l { color: var(--n-500, #64748b); font-size: 12px; margin-top: 6px; }
@media (max-width: 640px) { .onb-kpis { grid-template-columns: repeat(2, 1fr); } }

.onb-groups-head { margin-bottom: 10px; }
.onb-sub-h { font-size: var(--text-md); margin-bottom: 2px; }
.onb-groups { display: flex; flex-direction: column; gap: 8px; }
.onb-group { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--n-150, #e8edf3); border-radius: var(--r-md, 10px); cursor: pointer; }
.onb-group:hover { border-color: var(--blue-200, #c7dbff); background: var(--n-50, #f8fafc); }
.onb-group input { flex: none; width: 16px; height: 16px; }
.onb-g-folder { color: var(--n-400, #94a3b8); flex: none; }
.onb-g-folder svg { width: 16px; height: 16px; }
.onb-g-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.onb-g-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb-g-sample { color: var(--n-500, #64748b); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb-g-dest { flex: none; }
.onb-g-count { flex: none; color: var(--n-500, #64748b); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 560px) { .onb-g-sample, .onb-g-count { display: none; } }

.onb-empty { display: flex; align-items: center; justify-content: center; gap: 10px;
    color: var(--n-500, #64748b); padding: 26px; text-align: center; }
.onb-empty svg { width: 18px; height: 18px; color: var(--teal-600, #0d9488); }

.onb-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.onb-actions.center { justify-content: center; }
.onb-actions.wrap { flex-wrap: wrap; }
.onb-groups-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.onb-selectall { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.onb-selectall input { width: 16px; height: 16px; }
.onb-selcount { font-size: 12.5px; }

/* Onboarding apply — indeterminate animated progress bar (unknown duration) */
.onb-progress { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 360px; }
.onb-progress-bar {
    width: 100%; height: 10px; border-radius: 999px;
    background-color: var(--n-150, #e8edf3);
    background-image: linear-gradient(45deg,
        rgba(37, 99, 235, 0.65) 25%, transparent 25%,
        transparent 50%, rgba(37, 99, 235, 0.65) 50%,
        rgba(37, 99, 235, 0.65) 75%, transparent 75%, transparent);
    background-size: 24px 24px;
    animation: onb-stripes 0.7s linear infinite;
}
@keyframes onb-stripes { 0% { background-position: 0 0; } 100% { background-position: 24px 0; } }
.onb-progress-label { font-size: 13.5px; color: var(--n-600, #4b5563); }

/* Onboarding intro — scan-depth control + persistent error */
.onb-scan-controls { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--n-600, #4b5563); }
.onb-scan-controls select { width: auto; padding: 6px 10px; }
.onb-scan-error { text-align: left; width: 100%; max-width: 52ch; }
.onb-scan-hint { font-size: 12.5px; max-width: 46ch; margin-top: -4px; }

/* Login — user-guide PDF download links (under the gallery) */
.lpc-guides { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.lpc-guides-label { color: var(--n-500, #64748b); font-size: 13px; }
.lpc-guide-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--blue, #2563eb); text-decoration: none; border: 1px solid var(--n-200, #dbe3ec); border-radius: 8px; padding: 5px 11px; }
.lpc-guide-link:hover { background: var(--blue-50, #eef4ff); border-color: var(--blue-200, #c7dbff); }
.lpc-guide-link svg { width: 13px; height: 13px; }