/* Hallmark · macrostructure: Long Document (review) / Workbench (dashboard) /
 *   Letter (write) · genre: editorial · theme: Tinte (custom) · nav: N9 edge-aligned
 * tone: editorial-calm · anchor hue: cool-indigo
 * contrast: pass · states: default/hover/focus/active/disabled shipped */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--color-ink);
    margin: 0;
    overflow-wrap: anywhere;
    min-width: 0;
}

p { margin: 0; }
a { color: var(--color-accent-deep); text-decoration-color: var(--color-rule-2); text-underline-offset: 2px; }

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

.wrap { width: min(100% - 2 * var(--space-md), 68rem); margin-inline: auto; }
.wrap--tight { width: min(100% - 2 * var(--space-md), 46rem); margin-inline: auto; }

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    margin: 0 0 var(--space-2xs);
}
.lead { font-size: var(--text-md); color: var(--color-ink-2); line-height: 1.5; }
.muted { color: var(--color-ink-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- nav · N9 */
.site-head {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: color-mix(in oklch, var(--color-paper) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(8px);
    border-bottom: var(--rule-hairline) solid var(--color-rule);
}
.site-head__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); min-height: 3.75rem;
}
.wordmark {
    display: inline-flex; align-items: baseline; gap: 0.4ch;
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-md);
    letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none;
}
.wordmark__dot { color: var(--color-accent); }
.nav { display: flex; align-items: center; gap: var(--space-xs); }
.nav__link {
    font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2);
    text-decoration: none; padding: 0.5rem 0.25rem; position: relative;
    border-radius: var(--radius-sm);
}
.nav__link:hover { color: var(--color-ink); }
.nav__link[aria-current="page"] { color: var(--color-ink); }
.nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.15rem;
    height: 2px; background: var(--color-accent); border-radius: 2px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
    --_bg: var(--color-ink); --_fg: var(--color-paper); --_bd: var(--color-ink);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5ch;
    min-height: var(--tap-min); padding: 0 var(--space-md);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
    line-height: 1; white-space: nowrap; cursor: pointer;
    background: var(--_bg); color: var(--_fg);
    border: var(--rule-hairline) solid var(--_bd); border-radius: var(--radius-pill);
    text-decoration: none;
    transition: transform var(--dur-short) var(--ease-out),
                background var(--dur-short) var(--ease-out),
                border-color var(--dur-short) var(--ease-out);
}
.btn:hover { background: color-mix(in oklch, var(--color-ink) 88%, var(--color-paper)); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--quiet {
    --_bg: var(--color-surface); --_fg: var(--color-ink-2); --_bd: var(--color-rule-2);
}
.btn--quiet:hover { --_fg: var(--color-ink); background: var(--color-paper-2); }
.btn--sm { min-height: 2.25rem; padding: 0 var(--space-sm); font-size: var(--text-xs); }

/* ---------------------------------------------------------------- cards */
.card {
    background: var(--color-surface);
    border: var(--rule-hairline) solid var(--color-rule);
    border-radius: var(--radius-card);
    padding: var(--space-md);
}
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.card__title { font-size: var(--text-sm); font-weight: 600; font-family: var(--font-body); letter-spacing: 0.01em; color: var(--color-ink-2); }

.badge {
    display: inline-flex; align-items: center; gap: 0.4ch;
    font-size: var(--text-xs); font-weight: 600; padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill); background: var(--color-accent-tint);
    color: var(--color-accent-deep); border: var(--rule-hairline) solid transparent;
}
.badge--level { font-family: var(--font-body); letter-spacing: 0.02em; }

/* ================================================================ DASHBOARD */
.page-head { padding: var(--space-xl) 0 var(--space-lg); }
.page-head h1 { font-size: var(--text-display); max-width: 22ch; }

.board { display: grid; gap: var(--space-md); grid-template-columns: repeat(12, minmax(0, 1fr)); padding-bottom: var(--space-2xl); }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* stat tile */
.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; }
.stat__label { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }

/* level ring */
.ring-wrap { display: flex; align-items: center; gap: var(--space-md); }
.ring { --_p: 62; width: 84px; height: 84px; flex: none; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring__track { stroke: var(--color-paper-2); }
.ring__fill { stroke: var(--color-accent); stroke-linecap: round; }
.ring__label { display: flex; flex-direction: column; }
.ring__level { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }

/* weekly bar chart */
.bars { display: flex; align-items: flex-end; gap: var(--space-2xs); height: 120px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 0; }
.bars__bar {
    width: 100%; max-width: 26px; border-radius: 4px 4px 0 0;
    background: linear-gradient(var(--color-accent), color-mix(in oklch, var(--color-accent) 70%, var(--color-paper)));
    transition: height var(--dur-med) var(--ease-out);
}
.bars__bar--last { background: var(--color-ink); }
.bars__tick { font-size: 0.6875rem; color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.trend-note { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-sm); }
.trend-note b { color: var(--err-lob); }

/* category breakdown bars */
.cat-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.cat-row { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: var(--space-sm); }
.cat-row__label { font-size: var(--text-sm); color: var(--color-ink-2); }
.cat-row__track { height: 10px; background: var(--color-paper-2); border-radius: var(--radius-pill); overflow: hidden; }
.cat-row__fill { height: 100%; border-radius: var(--radius-pill); background: var(--_c, var(--color-accent)); }
.cat-row__n { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink-3); font-weight: 600; }

/* recent list */
.recent { display: flex; flex-direction: column; }
.recent__item {
    display: flex; align-items: center; gap: var(--space-sm); justify-content: space-between;
    padding: var(--space-sm) 0; border-top: var(--rule-hairline) solid var(--color-rule);
    text-decoration: none; color: inherit;
}
.recent__item:first-child { border-top: none; }
.recent__item:hover .recent__topic { color: var(--color-accent-deep); }
.recent__main { min-width: 0; }
.recent__topic { font-family: var(--font-read); font-size: var(--text-md); font-weight: 500; }
.recent__meta { font-size: var(--text-xs); color: var(--color-ink-3); }
.recent__right { display: flex; align-items: center; gap: var(--space-sm); flex: none; }
.recent__errors { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }

/* ================================================================ WRITE (Letter) */
.letter { padding: var(--space-xl) 0 var(--space-2xl); }
.letter h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2xs); }
.field { margin-top: var(--space-md); }
.field__label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); margin-bottom: var(--space-2xs); }
.input, .textarea {
    width: 100%; font-family: inherit; font-size: var(--text-base); color: var(--color-ink);
    background: var(--color-surface); border: var(--rule-hairline) solid var(--color-rule-2);
    border-radius: var(--radius-input); padding: 0.7rem 0.9rem; line-height: 1.6;
}
.textarea { font-family: var(--font-read); font-size: var(--text-md); min-height: 16rem; resize: vertical; }
.input:focus, .textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: transparent; }
.letter__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); flex-wrap: wrap; }
.counter { font-size: var(--text-sm); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }

/* ================================================================ REVIEW (Long Document) */
.review { padding: var(--space-lg) 0 var(--space-2xl); }
.review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-md); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-ink); }
.review__title { font-size: var(--text-xl); }
.review__title small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-3); letter-spacing: 0.02em; margin-top: 0.35rem; }
.review__meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

.summary { background: var(--color-accent-tint); border-radius: var(--radius-card); padding: var(--space-md); margin: var(--space-md) 0; border: var(--rule-hairline) solid color-mix(in oklch, var(--color-accent) 20%, transparent); }
.summary p { font-size: var(--text-md); color: var(--color-ink); line-height: 1.55; }
.summary .eyebrow { color: var(--color-accent-deep); }

/* toggle: marked original ↔ clean corrected */
.doc-toggle { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--color-paper-2); border-radius: var(--radius-pill); margin: var(--space-md) 0; }
.doc-toggle__btn {
    min-height: 2.25rem; padding: 0 var(--space-md); border: none; background: transparent;
    font: 600 var(--text-sm)/1 var(--font-body); color: var(--color-ink-2); cursor: pointer;
    border-radius: var(--radius-pill);
}
.doc-toggle__btn[aria-pressed="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); }

/* the two-column document: text + margin notes */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-xl); align-items: start; }
.doc__text { font-family: var(--font-read); font-size: 1.375rem; line-height: 2.05; color: var(--color-ink); }
.doc__corrected { font-family: var(--font-read); font-size: 1.375rem; line-height: 2.0; color: var(--color-ink); }

/* a marked span */
.mark { --c: var(--color-ink-3); --ct: var(--color-paper-2); position: relative; white-space: normal; }
.mark--grammatik { --c: var(--err-grammatik); --ct: var(--err-grammatik-tint); }
.mark--kasus { --c: var(--err-kasus); --ct: var(--err-kasus-tint); }
.mark--wortstellung { --c: var(--err-wortstellung); --ct: var(--err-wortstellung-tint); }
.mark--rechtschreibung { --c: var(--err-rechtschreibung); --ct: var(--err-rechtschreibung-tint); }
.mark--wortwahl { --c: var(--err-wortwahl); --ct: var(--err-wortwahl-tint); }
.mark--zeichensetzung { --c: var(--err-zeichensetzung); --ct: var(--err-zeichensetzung-tint); }
.mark--lob { --c: var(--err-lob); --ct: var(--err-lob-tint); }

.mark--error {
    background: transparent; color: inherit;
    text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--c);
    text-decoration-thickness: 2px; text-underline-offset: 4px;
    cursor: pointer; border-radius: 2px;
    transition: background var(--dur-short) var(--ease-out);
}
.mark--error:hover, .mark--error.is-active { background: var(--ct); }
.mark--praise {
    background: var(--err-lob-tint); color: inherit;
    box-shadow: inset 0 -2px 0 var(--err-lob); border-radius: 2px; padding: 0 0.1em;
}
.mark__n {
    font-family: var(--font-body); font-weight: 700; font-size: 0.62em;
    color: var(--c); vertical-align: super; line-height: 0; text-decoration: none;
    margin-left: 0.12em; padding: 0 0.15em;
}
.mark__n:hover { text-decoration: underline; }
.mark--error:target, .mark--error.is-active { background: var(--ct); }

/* margin notes */
.notes { display: flex; flex-direction: column; gap: var(--space-sm); position: sticky; top: 4.75rem; }
.note {
    display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem;
    padding: var(--space-sm); background: var(--color-surface);
    border: var(--rule-hairline) solid var(--color-rule); border-radius: var(--radius-sm);
    border-left: 3px solid var(--_c, var(--color-rule-2)); scroll-margin-top: 5rem;
}
.note--grammatik { --_c: var(--err-grammatik); }
.note--kasus { --_c: var(--err-kasus); }
.note--wortstellung { --_c: var(--err-wortstellung); }
.note--rechtschreibung { --_c: var(--err-rechtschreibung); }
.note--wortwahl { --_c: var(--err-wortwahl); }
.note--zeichensetzung { --_c: var(--err-zeichensetzung); }
.note--lob { --_c: var(--err-lob); }
.note:target, .note.is-active { box-shadow: 0 0 0 2px var(--_c); }
.note__num {
    font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
    color: var(--_c); font-variant-numeric: tabular-nums;
}
.note__num--lob { font-size: 1rem; }
.note__chip {
    display: inline-flex; align-items: center; gap: 0.35ch; font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase; color: var(--_c);
    background: color-mix(in oklch, var(--_c) 12%, var(--color-surface));
    padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); margin-bottom: 0.35rem;
}
.note__fix { font-family: var(--font-read); font-size: var(--text-base); margin-bottom: 0.3rem; line-height: 1.4; }
.note__wrong { color: var(--color-ink-3); text-decoration: line-through; text-decoration-color: var(--_c); }
.note__arrow { color: var(--color-ink-3); padding: 0 0.3ch; }
.note__right { color: var(--color-ink); font-weight: 500; }
.note__text { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; }
.note__back { display: none; }

/* legend + scores */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-sm); margin-top: var(--space-lg); }
.legend-item { display: flex; align-items: center; gap: 0.5ch; font-size: var(--text-sm); color: var(--color-ink-2); }
.legend-swatch { width: 0.85rem; height: 0.85rem; border-radius: 3px; flex: none; background: var(--_c); }
.legend-item .tnum { margin-left: auto; color: var(--color-ink-3); font-weight: 600; }

.scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-md) var(--space-lg); }
.score { display: flex; flex-direction: column; gap: 0.3rem; }
.score__top { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-ink-2); }
.score__dots { display: flex; gap: 0.25rem; }
.score__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--color-paper-2); }
.score__dot--on { background: var(--_c, var(--color-accent)); }

/* ================================================================ AGENDA (HERMES) */
.agenda { padding: var(--space-lg) 0 var(--space-2xl); }
.agenda__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding-bottom: var(--space-md); }
.agenda__head h1 { font-size: var(--text-2xl); max-width: 20ch; }

/* HERMES nudge banner */
.nudge {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm) var(--space-md);
    align-items: center; padding: var(--space-md);
    background: var(--color-accent-tint); border: var(--rule-hairline) solid color-mix(in oklch, var(--color-accent) 22%, transparent);
    border-radius: var(--radius-card); margin: var(--space-md) 0 var(--space-lg);
}
.nudge__badge {
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-deep);
    writing-mode: horizontal-tb; align-self: start;
}
.nudge__msg { font-family: var(--font-read); font-size: var(--text-md); color: var(--color-ink); line-height: 1.5; }
.nudge--warn { background: var(--err-kasus-tint); border-color: color-mix(in oklch, var(--err-kasus) 30%, transparent); }
.nudge--warn .nudge__badge { color: var(--err-kasus); }
.nudge--push { background: var(--err-wortstellung-tint); border-color: color-mix(in oklch, var(--err-wortstellung) 30%, transparent); }
.nudge--push .nudge__badge { color: var(--err-wortstellung); }
.nudge--celebrate { background: var(--err-lob-tint); border-color: color-mix(in oklch, var(--err-lob) 30%, transparent); }
.nudge--celebrate .nudge__badge { color: var(--err-lob); }

/* assignment cards */
.tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.task { display: flex; flex-direction: column; gap: var(--space-sm); border-left: 3px solid var(--_c, var(--color-accent)); }
.task--grammatik { --_c: var(--err-grammatik); }
.task--kasus { --_c: var(--err-kasus); }
.task--wortstellung { --_c: var(--err-wortstellung); }
.task--rechtschreibung { --_c: var(--err-rechtschreibung); }
.task--wortwahl { --_c: var(--err-wortwahl); }
.task--zeichensetzung { --_c: var(--err-zeichensetzung); }
.task__row { display: flex; align-items: center; gap: 0.5ch; flex-wrap: wrap; }
.task__kind {
    display: inline-flex; align-items: center; gap: 0.4ch; font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--_c, var(--color-accent-deep));
    background: color-mix(in oklch, var(--_c, var(--color-accent)) 12%, var(--color-surface));
    padding: 0.15rem 0.5rem; border-radius: var(--radius-pill);
}
.task__surprise { color: var(--err-lob); font-weight: 700; font-size: var(--text-xs); }
.task__due { margin-left: auto; font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.task__due--over { color: var(--err-kasus); font-weight: 600; }
.task__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.task__prompt { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; }
.task__foot { display: flex; align-items: center; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-2xs); flex-wrap: wrap; }
.task__foot form { display: inline; }
.task__linkbtn { background: none; border: none; padding: 0.4rem 0; font: 600 var(--text-sm)/1 var(--font-body); color: var(--color-ink-3); cursor: pointer; }
.task__linkbtn:hover { color: var(--color-ink); }

/* mini quiz inside a test assignment */
.quiz { display: flex; flex-direction: column; gap: var(--space-sm); }
.quiz__q { font-size: var(--text-sm); }
.quiz__q b { font-family: var(--font-read); font-weight: 600; }
.quiz__opts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.quiz__opt { font-size: var(--text-xs); padding: 0.25rem 0.6rem; border: var(--rule-hairline) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-surface); cursor: pointer; }
.quiz__opt.is-right { background: var(--err-lob-tint); border-color: var(--err-lob); color: var(--color-ink); }
.quiz__explain { font-size: var(--text-xs); color: var(--color-ink-3); margin-top: 0.35rem; display: none; }
.quiz__explain.is-shown { display: block; }

.agenda-empty { text-align: center; padding: var(--space-2xl) var(--space-md); color: var(--color-ink-3); }

/* ================================================================ AGENT HUB */
.agent { padding-bottom: var(--space-2xl); }
code {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.875em; background: var(--color-paper-2); padding: 0.1em 0.4em; border-radius: 4px;
}

/* keys panel */
.keys { display: flex; flex-direction: column; gap: var(--space-sm); }
.keys__row { display: grid; grid-template-columns: minmax(10rem, auto) minmax(9rem, auto) 1fr; gap: var(--space-sm) var(--space-md); align-items: baseline; padding: var(--space-2xs) 0; }
.keys__name { background: var(--color-ink); color: var(--color-paper); font-weight: 600; }
.keys__where { font-size: var(--text-sm); color: var(--color-ink-2); }
.keys__desc { font-size: var(--text-sm); color: var(--color-ink-3); }

/* copy-able code block */
.codeblock {
    margin: 0; max-height: 26rem; overflow: auto;
    background: var(--color-ink); color: var(--color-paper);
    border-radius: var(--radius-input); padding: var(--space-md);
    font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: var(--text-sm); line-height: 1.55; white-space: pre; tab-size: 2;
}
.codeblock code { background: none; color: inherit; padding: 0; font-size: inherit; white-space: pre; }
.copybtn.is-copied { --_bg: var(--err-lob); --_bd: var(--err-lob); }

/* endpoint reference */
.endpoints { display: flex; flex-direction: column; }
.endpoint {
    display: grid; grid-template-columns: 3.6rem minmax(11rem, auto) 4.2rem 1fr;
    gap: var(--space-sm) var(--space-md); align-items: baseline;
    padding: var(--space-xs) 0; border-top: var(--rule-hairline) solid var(--color-rule);
}
.endpoint:first-child { border-top: none; }
.method {
    font-family: var(--font-body); font-weight: 700; font-size: 0.6875rem;
    letter-spacing: 0.04em; text-align: center; padding: 0.2rem 0; border-radius: var(--radius-sm);
    color: var(--color-paper); background: var(--color-ink-3);
}
.method--get { background: var(--err-lob); }
.method--post { background: var(--err-wortstellung); }
.endpoint__path { background: none; padding: 0; color: var(--color-ink); font-weight: 500; overflow-wrap: anywhere; }
.endpoint__desc { font-size: var(--text-sm); color: var(--color-ink-2); }
.tag {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem; border-radius: var(--radius-pill); text-align: center;
}
.tag--public { background: var(--color-paper-2); color: var(--color-ink-3); }
.tag--token { background: var(--err-kasus-tint); color: var(--err-kasus); }
.method-key { display: inline-flex; align-items: center; gap: 0.4ch; }
.done-strip { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.done-chip { font-size: var(--text-xs); color: var(--color-ink-3); background: var(--color-paper-2); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); }

/* ================================================================ URMĂRIRE (follow-up) */
/* current situation banner (agent's read on presence/reaction) */
.situation {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem var(--space-md);
    padding: var(--space-md); border-radius: var(--radius-card); margin-bottom: var(--space-lg);
    border: var(--rule-hairline) solid var(--_c, var(--color-rule));
    background: color-mix(in oklch, var(--_c, var(--color-accent)) 8%, var(--color-surface));
    border-left: 4px solid var(--_c, var(--color-accent));
}
.situation--good { --_c: var(--err-lob); }
.situation--warn { --_c: var(--err-wortstellung); }
.situation--bad { --_c: var(--err-kasus); }
.situation--neutral { --_c: var(--color-ink-3); }
.situation__main { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.situation__badge { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--_c); }
.situation__state { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); }
.situation__note { font-family: var(--font-read); font-size: var(--text-md); color: var(--color-ink-2); flex: 1 1 100%; }
.situation__when { margin-left: auto; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* signal feed */
.signals { display: flex; flex-direction: column; }
.signal { display: flex; align-items: baseline; gap: var(--space-sm); padding: var(--space-xs) 0; border-top: var(--rule-hairline) solid var(--color-rule); }
.signal:first-child { border-top: none; }
.signal__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--_c, var(--color-ink-3)); flex: none; align-self: center; }
.signal--good { --_c: var(--err-lob); }
.signal--warn { --_c: var(--err-wortstellung); }
.signal--bad { --_c: var(--err-kasus); }
.signal--neutral { --_c: var(--color-ink-3); }
.signal__state { font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); white-space: nowrap; }
.signal__note { font-size: var(--text-sm); color: var(--color-ink-2); min-width: 0; }
.signal__when { margin-left: auto; font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.patterns { display: flex; flex-direction: column; gap: var(--space-xs); }
.pattern { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.pattern__k { font-size: var(--text-sm); color: var(--color-ink-3); }
.pattern__v { font-size: var(--text-sm); color: var(--color-ink); font-weight: 600; }

/* adaptation notes log */
.notes-log { display: flex; flex-direction: column; gap: var(--space-sm); }
.note-log {
    display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem var(--space-sm); align-items: baseline;
    padding: var(--space-sm); border-radius: var(--radius-sm);
    border: var(--rule-hairline) solid var(--color-rule); border-left: 3px solid var(--_c, var(--color-accent));
}
.note-log--pattern { --_c: var(--err-wortstellung); }
.note-log--adaptation { --_c: var(--color-accent); }
.note-log--cadence { --_c: var(--err-kasus); }
.note-log__kind {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--_c); background: color-mix(in oklch, var(--_c) 12%, var(--color-surface));
    padding: 0.15rem 0.45rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.note-log__text { font-family: var(--font-read); font-size: var(--text-base); color: var(--color-ink); line-height: 1.45; }
.note-log__when { font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* outreach timeline */
.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-sm); }
.tl__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-ink-3); margin-top: 0.45rem; position: relative; }
.tl:not(:last-child) .tl__dot::after { content: ""; position: absolute; left: 50%; top: 14px; bottom: -14px; width: 2px; transform: translateX(-50%); background: var(--color-rule); }
.tl--ok .tl__dot { background: var(--err-lob); }
.tl--no .tl__dot { background: var(--err-kasus); }
.tl__body { padding-bottom: var(--space-md); min-width: 0; }
.tl__row { display: flex; align-items: baseline; gap: 0.5ch var(--space-sm); flex-wrap: wrap; }
.tl__chan { font-weight: 700; font-size: var(--text-sm); color: var(--color-ink); }
.tl__status { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.12rem 0.45rem; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-3); }
.tl__status--responded { background: var(--err-lob-tint); color: var(--err-lob); }
.tl__status--ignored { background: var(--err-kasus-tint); color: var(--err-kasus); }
.tl__status--sent { background: var(--color-accent-tint); color: var(--color-accent-deep); }
.tl__when { margin-left: auto; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.tl__msg { font-family: var(--font-read); font-size: var(--text-md); color: var(--color-ink-2); margin-top: 0.25rem; line-height: 1.45; }
.tl__resp { font-size: var(--text-sm); color: var(--color-ink); margin-top: 0.35rem; }
.tl__react { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: var(--radius-pill); margin-left: 0.35rem; }
.tl__react--positive { background: var(--err-lob-tint); color: var(--err-lob); }
.tl__react--negative { background: var(--err-kasus-tint); color: var(--err-kasus); }
.tl__react--neutral { background: var(--color-paper-2); color: var(--color-ink-3); }
.tl__mark { display: flex; gap: var(--space-sm); margin-top: 0.35rem; }

/* ================================================================ FILTERS (chips) */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding-bottom: var(--space-md); }
.filters__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.filters__label { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.chip {
    display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.85rem;
    font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2);
    background: var(--color-surface); border: var(--rule-hairline) solid var(--color-rule-2);
    border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap;
    transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.chip:hover { color: var(--color-ink); background: var(--color-paper-2); }
.chip.is-on { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.chip--sm { min-height: 1.85rem; padding: 0 0.65rem; font-variant-numeric: tabular-nums; }
.chip--clear { color: var(--color-ink-3); border-style: dashed; }

/* ---------------------------------------------------------------- footer */
.site-foot { border-top: var(--rule-hairline) solid var(--color-rule); padding: var(--space-lg) 0; color: var(--color-ink-3); font-size: var(--text-sm); }
.site-foot__row { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; justify-content: space-between; }

.section-gap { margin-top: var(--space-xl); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .doc { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
    .notes { position: static; }
    .col-4, .col-5, .col-7, .col-8 { grid-column: span 12; }
    .col-6-md { grid-column: span 12; }
    .tasks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .stat-row { grid-template-columns: 1fr 1fr; }
    .cat-row { grid-template-columns: 6.5rem 1fr auto; }
    .doc__text, .doc__corrected { font-size: 1.25rem; line-height: 1.95; }
    .review__meta { margin-left: 0; width: 100%; }
    .page-head { padding-top: var(--space-lg); }
    .endpoint { grid-template-columns: 3.6rem 1fr auto; }
    .endpoint__desc { grid-column: 1 / -1; }
    .keys__row { grid-template-columns: 1fr; gap: 0.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}