/* SilverRanking — app.css (H05)
 *
 * Ein Werkzeug fuer einen Menschen, der es mehrmals pro Woche benutzt und dabei Zahlen
 * vergleicht: Dichte schlaegt Weissraum, Lesbarkeit von Zahlen schlaegt Eleganz.
 *
 * Reihenfolge: Tokens · Reset · Grundtypografie · Layout · Kopf/Navigation · Flaechen ·
 * Tabellen · Positions-Badge · Delta · Formulare/Buttons · Flash · Leerer Zustand ·
 * Modal · Login · Hilfsklassen · reduced motion.
 *
 * Ab hier erfindet kein Haeppchen mehr eigenes CSS — entweder vorhandene Klasse nutzen
 * oder diese Datei erweitern.
 */

/* ---------------------------------------------------------------- Tokens */

:root {
    /* Flaechen und Text — Neutralgrau ist die Basis */
    --c-bg:          #f3f4f6;
    --c-surface:     #ffffff;
    --c-surface-alt: #f7f8fa;
    --c-border:      #d7dae0;
    --c-border-hard: #9aa2ad;
    --c-text:        #1a1d22;
    --c-muted:       #666d78;

    /* Genau zwei Signalfarben. Farbe ist nie der einzige Traeger — immer Pfeil/Symbol dazu. */
    --c-up:          #1f7a3f;
    --c-up-bg:       #e7f4ec;
    --c-down:        #b3261e;
    --c-down-bg:     #fcecea;

    /* Ein Bernsteinton, ausschliesslich fuer den other_page-Warnzustand */
    --c-warn:        #7a5200;
    --c-warn-bg:     #fdf4dd;
    --c-warn-border: #dfb45a;

    /* Interaktion (keine Statusfarbe) */
    --c-focus:       #0b57d0;

    /* Abstaende — kleine Schritte, damit dichte Tabellen moeglich bleiben */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;

    --r-1: 3px;
    --r-2: 6px;

    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;

    --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Consolas,
                 "Liberation Mono", monospace;

    --shadow-1: 0 1px 2px rgba(16, 20, 26, 0.06);
    --shadow-2: 0 8px 28px rgba(16, 20, 26, 0.18);

    --w-content: 1180px;
}

/* ----------------------------------------------------------------- Reset */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4,
p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; }

img, svg { max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------- Grundtypografie */

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-text);
    font-size: var(--fs-base);
    line-height: 1.45;
}

h1 { font-size: var(--fs-xl); line-height: 1.25; }
h2 { font-size: var(--fs-lg); line-height: 1.3; }
h3 { font-size: var(--fs-base); line-height: 1.3; }

a { color: var(--c-focus); text-decoration-thickness: 1px; text-underline-offset: 2px; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

/* Alle Positionen, Deltas und URLs sind Monospace und tabellarisch. */
.mono,
.num,
.url {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Nur umbrechen, wenn es sonst ueberlaeuft — `break-all` zerhackt jede lange URL. */
.url {
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }

:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
    border-radius: var(--r-1);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--sp-2);
    top: -3rem;
    z-index: 100;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-1);
}

.skip-link:focus { top: var(--sp-2); }

/* ---------------------------------------------------------------- Layout */

.container {
    width: 100%;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

.page { padding: var(--sp-5) 0 var(--sp-6); }

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-tight > * + * { margin-top: var(--sp-2); }

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

/* ------------------------------------------------------ Kopf / Navigation */

.app-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-1);
}

.app-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    min-height: 3.25rem;
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}

.brand {
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--c-text);
    text-decoration: none;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    list-style: none;
}

.nav a {
    display: block;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-1);
    color: var(--c-muted);
    text-decoration: none;
}

.nav a:hover { background: var(--c-surface-alt); color: var(--c-text); }

.nav a[aria-current="page"] {
    background: var(--c-surface-alt);
    color: var(--c-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--c-text);
}

.app-header__user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

/* --------------------------------------------------------------- Flaechen */

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-1);
}

.card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.card__body { padding: var(--sp-4); }

.card--flush .card__body { padding: 0; }

/* --------------------------------------------------------------- Tabellen */

.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.table th,
.table td {
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--c-surface-alt);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-muted);
    white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--c-surface-alt); }

/* Zahlenspalten: rechtsbuendig, Monospace, feste Breite. Sonst springen die Spalten,
 * sobald aus einer 4 eine 118 wird. */
.table th.col-num,
.table td.col-num {
    width: 6.5rem;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.table th.col-pos,
.table td.col-pos { width: 6.5rem; }

.table th.col-delta,
.table td.col-delta { width: 8.5rem; }

.table th.col-date,
.table td.col-date { width: 10rem; white-space: nowrap; }

/* Zeilenaktionen: feste Breite, rechtsbuendig — die Spalte darf nicht mitwandern (H06). */
.table th.col-actions,
.table td.col-actions { width: 13rem; white-space: nowrap; }

.row-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
}

/* Warnzeile: other_page — Bernstein plus Symbol, nie Farbe allein. */
.table tr.is-warn td { background: var(--c-warn-bg); }
.table tr.is-warn:hover td { background: var(--c-warn-bg); }
.table tr.is-warn td:first-child { box-shadow: inset 3px 0 0 var(--c-warn-border); }

.warn-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
    color: var(--c-warn);
    font-size: var(--fs-sm);
}

.warn-note::before { content: "\26A0"; font-size: 1em; }

/* Die gefundene Fremd-URL bekommt eine eigene Zeile — sonst bricht sie mitten im Wort. */
.warn-note .url { flex: 1 0 100%; }

/* --------------------------------------------------------- Positions-Badge */

/* Vier Stufen plus "nicht gefunden". Unterschieden wird ueber Fuellung und Randstil,
 * nicht ueber Farbe — in Graustufen bleiben alle fuenf Zustaende unterscheidbar. */
.badge-pos {
    display: inline-block;
    min-width: 3.25rem;
    padding: 1px var(--sp-2);
    border: 2px solid transparent;
    border-radius: var(--r-1);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
}

.badge-pos--top3 {
    background: var(--c-text);
    border-color: var(--c-text);
    color: #fff;
}

.badge-pos--top10 {
    background: #e2e5ea;
    border-color: var(--c-border-hard);
    color: var(--c-text);
}

.badge-pos--top20 {
    background: transparent;
    border: 2px dashed var(--c-border-hard);
    color: var(--c-text);
}

.badge-pos--rest {
    background: transparent;
    border-color: transparent;
    color: var(--c-muted);
    font-weight: 500;
}

/* position IS NULL = nicht in den geprueften Ergebnissen gefunden. Nie 0, nie 101. */
.badge-pos--none {
    background: transparent;
    border: 2px dotted var(--c-border-hard);
    color: var(--c-muted);
    font-weight: 500;
}

/* ------------------------------------------------------------------ Delta */

/* Delta = vorherige Position minus aktuelle. Positiv = Verbesserung = gruen + Pfeil hoch. */
.delta {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-1);
    min-width: 4.25rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.delta__sign { font-size: 1em; }

.delta--up   { color: var(--c-up); }
.delta--down { color: var(--c-down); }
.delta--flat { color: var(--c-muted); font-weight: 500; }

/* Grenzfaelle werden nie als Zahl ausgegeben. */
.delta--new,
.delta--lost {
    padding: 0 var(--sp-2);
    border-radius: var(--r-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

.delta--new  { background: var(--c-up-bg);   color: var(--c-up); }
.delta--lost { background: var(--c-down-bg); color: var(--c-down); }

/* Kein zweiter Messpunkt: ein Strich, keine Null und kein Pfeil. */
.delta--none { color: var(--c-muted); font-weight: 500; }

/* ------------------------------------------------ Kontingent-Kopfzeile (H13) */

/* Bleibt beim Scrollen stehen — die Frage „reicht das Kontingent noch" stellt sich
 * genau dann, wenn man weit unten in der Liste einen Button drueckt. */
.quota {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-1);
}

.quota__figures { display: flex; flex-direction: column; }

/* tabular-nums: 187 und 88 duerfen die Zeile nicht unterschiedlich breit machen. */
.quota__num {
    font-size: var(--fs-xl);
    font-weight: 650;
    line-height: 1.15;
}

.quota__of { color: var(--c-muted); font-weight: 500; }

.quota__label { font-size: var(--fs-sm); color: var(--c-muted); }

.quota__meta { display: flex; flex-direction: column; gap: var(--sp-1); }

.quota__meta form { display: inline-flex; }

.quota__action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-2);
    margin-left: auto;
    text-align: right;
}

.quota__short { margin: 0; max-width: 26rem; }

/* Reicht das Kontingent nicht, ist der Grund kein Alarm, sondern eine Ansage. */
.quota__short:not(.muted) { color: var(--c-warn); font-weight: 600; }

/* Mismatch und Rueckfallebene stehen dezent unter den Zahlen, nicht als Fehlerbox. */
.quota__note { flex: 1 0 100%; margin: 0; }

/* -------------------------------------------------- Dashboard-Kennzahlen (H17) */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--sp-3);
}

.kpi {
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-1);
}

.kpi__value { font-size: var(--fs-xl); font-weight: 650; line-height: 1.15; }
.kpi__label { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-muted); }
.kpi__sub   { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-muted); }

/* Gewinner/Verlierer nebeneinander, unter 720px (siehe .group__summary) untereinander. */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--sp-4);
}

/* ------------------------------------------------------ Gruppen / Accordion */

/* Eine Gruppe je Landingpage. Der Zustand liegt in localStorage (app.js), nicht in der
 * Session — er gehoert zu diesem Browser, nicht zum Konto. */
.group { position: relative; }

.group__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    padding-right: 14rem;
    cursor: pointer;
    list-style: none;
}

.group__summary::-webkit-details-marker { display: none; }

/* Das Dreieck traegt den Zustand mit — die Umrandung allein waere zu leise. */
.group__summary::before {
    content: "\25B6";
    margin-right: var(--sp-1);
    font-size: 0.75em;
    color: var(--c-muted);
}

.group__details[open] > .group__summary::before { content: "\25BC"; }

.group__summary:hover { background: var(--c-surface-alt); }

.group__details[open] > .group__summary { border-bottom: 1px solid var(--c-border); }

.group__title { font-weight: 650; }

.group__stats {
    flex: 1 0 100%;
    font-size: var(--fs-sm);
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}

/* Der Knopf liegt ueber der Zusammenfassung statt darin: ein Button in <summary> wuerde
 * beim Klick die Gruppe auf- und zuklappen. */
.group__action {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-4);
}

@media (max-width: 720px) {
    .group__summary { padding-right: var(--sp-4); }

    .group__action {
        position: static;
        padding: 0 var(--sp-4) var(--sp-3);
    }
}

/* Noch nie geprueft ist nicht „nicht gefunden" (H12) — die Zeile bleibt zurueckhaltend. */
.table tr.is-unmeasured td { color: var(--c-muted); }

/* Neutrale Randnotiz an einer Tabellenzeile — das Gegenstueck zu .warn-note ohne Warnung. */
.row-note {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

/* ----------------------------------------------------- Formulare, Buttons */

.field { display: block; }
.field + .field { margin-top: var(--sp-3); }

.field__label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.field__hint {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

/* Feldfehler steht am Feld, nicht nur oben auf der Seite (H06). */
.field__error {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-down);
}

.field__error a { color: inherit; }

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--c-down); }

.input,
.select,
.textarea {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border-hard);
    border-radius: var(--r-1);
    font-size: var(--fs-base);
}

.input:hover,
.select:hover { border-color: var(--c-text); }

.input--mono { font-family: var(--font-mono); }

/* Keyword-Liste (H07): eine Zeile je Keyword, deshalb Monospace und frei in der Hoehe. */
.textarea {
    font-family: var(--font-mono);
    line-height: 1.5;
    resize: vertical;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border-hard);
    border-radius: var(--r-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.btn:hover { background: var(--c-surface-alt); border-color: var(--c-text); }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--c-text);
    border-color: var(--c-text);
    color: #fff;
}

.btn--primary:hover { background: #000; border-color: #000; }

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--c-muted);
}

.btn--ghost:hover { background: var(--c-surface-alt); color: var(--c-text); border-color: transparent; }

.btn--sm { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ Flash */

.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-border);
    border-left-width: 4px;
    border-radius: var(--r-1);
    background: var(--c-surface);
    font-size: var(--fs-sm);
}

/* Das Symbol traegt die Bedeutung mit — Farbe allein genuegt nicht. */
.flash::before { font-family: var(--font-text); line-height: 1.4; }

.flash--info    { border-left-color: var(--c-border-hard); }
.flash--info::before { content: "\2139"; }

.flash--success { border-left-color: var(--c-up); background: var(--c-up-bg); color: var(--c-up); }
.flash--success::before { content: "\2713"; }

.flash--warn    { border-left-color: var(--c-warn-border); background: var(--c-warn-bg); color: var(--c-warn); }
.flash--warn::before { content: "\26A0"; }

.flash--error   { border-left-color: var(--c-down); background: var(--c-down-bg); color: var(--c-down); }
.flash--error::before { content: "\2715"; }

.flash__body { flex: 1 1 auto; }
.flash__hint { margin-top: var(--sp-1); opacity: 0.85; }

/* --------------------------------------------------------- Leerer Zustand */

/* Leere Zustaende sind Handlungsaufforderungen, kein grauer Satz. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
}

.empty-state__title { font-size: var(--fs-lg); font-weight: 600; }
.empty-state__text { max-width: 46ch; color: var(--c-muted); font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ Modal */

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
    background: rgba(16, 20, 26, 0.45);
    overflow-y: auto;
}

.modal[hidden] { display: none; }

body.has-modal { overflow: hidden; }

.modal__dialog {
    width: 100%;
    max-width: 34rem;
    background: var(--c-surface);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-2);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.modal__title { font-size: var(--fs-lg); }
.modal__body { padding: var(--sp-4); }

.modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-alt);
    border-radius: 0 0 var(--r-2) var(--r-2);
}

.modal__close {
    padding: var(--sp-1) var(--sp-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-1);
    font-size: var(--fs-lg);
    line-height: 1;
    color: var(--c-muted);
    cursor: pointer;
}

.modal__close:hover { background: var(--c-surface-alt); color: var(--c-text); }

/* ------------------------------------------------- Aufklappbarer Bereich */

/* Fuer Einstellungen, die selten gebraucht werden — z.B. die abweichenden Suchparameter
   im Landingpage-Dialog (H07). Zugeklappt ist der Normalfall. */
.disclosure {
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-1);
}

.disclosure__summary {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.disclosure__body { padding: 0 var(--sp-3) var(--sp-3); }

.grid-params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--sp-3);
}

/* Im Raster sind die Felder Geschwister im Grid, nicht untereinander. */
.grid-params .field + .field { margin-top: 0; }

/* ------------------------------------------------------------------ Login */

.login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--sp-5) var(--sp-4);
}

.login-card { width: 100%; max-width: 22rem; }

.login-card .card__body { padding: var(--sp-5); }

.login-card__brand {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
}

.login-card .btn { width: 100%; }

/* ------------------------------------------------------- Prueflauf (H15) */

/* Der Fortschritt eines Laufs. Steht direkt unter der Kontingent-Kopfzeile, weil beides
 * dieselbe Frage beantwortet: was kostet das gerade, und wie weit ist es. */
.job__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.job__bar {
    height: 0.5rem;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-1);
    overflow: hidden;
}

/* --c-focus ist die Interaktionsfarbe, keine Statusfarbe: ein Fortschrittsbalken sagt nichts
 * ueber gut oder schlecht. Unter prefers-reduced-motion faellt der Uebergang weg (unten). */
.job__fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--c-focus);
    transition: width 0.25s ease-out;
}

/* Die Statuszeile nennt das gepruefte Keyword — nicht nur eine Prozentzahl. */
.job__text { margin: 0; min-height: 1.2em; }

.job__actions { gap: var(--sp-2); }

/* Frisch nachgeladene Zeile: ein kurzes Aufleuchten, damit „aktualisiert sich einzeln" auch
 * sichtbar ist. Traegt keine Bedeutung — die steht in Badge, Delta und Zeitstempel. */
@keyframes sr-row-updated {
    from { background-color: var(--c-warn-bg); }
    to   { background-color: transparent; }
}

.table tr.is-updated > td { animation: sr-row-updated 1.4s ease-out; }

/* ------------------------------------------------------------ Verlauf (H16) */

/* Aufklappbare Zusatzzeile unter einem Paar. Kein <details>, weil <tr> keins tragen kann —
 * app.js schaltet `hidden` selbst um. */
.row-history td {
    background: var(--c-surface-alt);
    padding: var(--sp-3) var(--sp-4);
}

.history { display: flex; flex-direction: column; gap: var(--sp-3); }

.history__chart { display: flex; flex-direction: column; gap: var(--sp-1); }

/* Reiner Strich in Neutralgrau — die Grafik ist dekorativ (aria-hidden), die Tabelle daneben
 * traegt dieselben Werte als Text. */
.sparkline { display: block; overflow: visible; }

.sparkline__line {
    fill: none;
    stroke: var(--c-border-hard);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.sparkline__point { fill: var(--c-text); }

.history__range { margin: 0; }

.history__table { font-size: var(--fs-sm); }

.history__flag--warn { color: var(--c-warn); font-weight: 600; }
.history__flag--warn::before { content: "\26A0\0020"; }

/* Der Umschalter traegt sein Dreieck wie das Accordion (H13) — dieselbe Sprache. */
[data-history-toggle]::before {
    content: "\25B8";
    margin-right: var(--sp-1);
    font-size: 0.85em;
}

[data-history-toggle][aria-expanded="true"]::before { content: "\25BE"; }

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}