/* Comes design system (source: dokumentation/design/README.md). Tokens first, then building blocks.
   No build step, no inline styles (Content-Security-Policy). Radius 0 everywhere, structure lines 2 px. */

@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/archivo-latin-800-normal.woff2") format("woff2"); }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #f3f2f2;
  --surface: #eae9e9;
  --text: #201e1d;
  --divider: color-mix(in srgb, #201e1d 40%, transparent);
  --muted: #605d5d;
  --paper: #ffffff;

  --accent: #072D25;
  --accent-100: #eef3f1;
  --accent-200: #d9e5e0;
  --accent-300: #b7cbc3;
  --accent-400: #86a69a;
  --accent-500: #4f7a6c;
  --accent-600: #0e3d33;
  --accent-700: #041d18;
  --on-accent: #f3f2f2;
  --champagne: #D8C7A5;
  --brand-green: #072D25;

  --alert: #ec3013;
  --alert-100: #fff2ef;
  --alert-200: #ffe0d9;
  --alert-700: #ae1800;

  --neutral-300: #d7d3d3;
  --neutral-600: #7d7979;
  --neutral-700: #605d5d;
  --neutral-800: #444141;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --gutter: 20px;

  --line: 2px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #05221c;
    --surface: #0b3229;
    --text: #efe9dc;
    --divider: color-mix(in srgb, #efe9dc 28%, transparent);
    --muted: #a9b8b0;
    --paper: #0b3229;
    --accent: #D8C7A5;
    --accent-100: #1f3a2f;
    --accent-200: #2d5345;
    --accent-600: #e3d6bb;
    --accent-700: #c9b48c;
    --on-accent: #05221c;
    --alert-100: #3a1a12;
    --alert-700: #ff9783;
    --neutral-300: #1d4338;
    --neutral-600: #a9b8b0;
    --neutral-700: #a9b8b0;
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.55; font-weight: 400;
  padding-top: env(safe-area-inset-top);
}
h1, h2, h3, h4 { font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: 44px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
svg { display: block; flex: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
[hidden] { display: none !important; }

/* ── Type helpers ───────────────────────────────────────────────────────── */
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.lead { font-size: 17px; margin-top: 10px; }
.kicker + h1, .kicker + h2, .kicker + h3 { margin-top: var(--space-2); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.app-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-1) var(--gutter) var(--space-3); border-bottom: var(--line) solid var(--divider);
}
.app-head .brand { font-weight: 800; font-size: 16px; color: var(--text); text-decoration: none; }
.app-head .meta { display: flex; align-items: center; gap: var(--space-4); font-size: 13px; color: var(--muted); }
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.page { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 28px var(--gutter) var(--space-8); display: flex; flex-direction: column; gap: 20px; }
.section { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--space-2); border-bottom: var(--line) solid var(--text); }
.empty { color: var(--muted); padding: var(--space-3) 0; }

/* ── Buttons (label left, icon right) ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 48px; padding: 0 18px; border: 1px solid transparent; border-radius: 0;
  font: inherit; font-weight: 800; font-size: 15px; line-height: 1.2; text-align: left; text-decoration: none;
  color: var(--text); background: transparent; cursor: pointer;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-600); }
.btn-primary:active { background: var(--accent-700); }
.btn-secondary { border-color: var(--divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--text) 14%, transparent); }
.btn-ghost { color: var(--accent); }
.btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn-lg { min-height: 56px; font-size: 16px; }
.btn-xl { min-height: 60px; font-size: 17px; padding: 0 20px; }
.btn-block { width: 100%; }
.btn-champagne { background: var(--champagne); color: var(--brand-green); }
.btn-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2); }
.btn-row .btn { padding: 0 14px; }
form.inline { margin: 0; display: contents; }

/* ── Tags ───────────────────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; text-transform: uppercase; }
.tag-type { background: var(--accent-100); color: var(--accent); }
.tag-check { background: var(--alert-100); color: var(--alert-700); }

/* ── Numbers grid (briefing) ────────────────────────────────────────────── */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--line) solid var(--text); border-bottom: var(--line) solid var(--divider); }
.figures > div { padding: 14px 12px; }
.figures > div:first-child { padding-left: 0; }
.figures > div + div { border-left: var(--line) solid var(--divider); }
.figures .num { font-size: 44px; font-weight: 800; line-height: 1; }
.figures .label { font-size: 13px; margin-top: 6px; }

/* ── Order list (briefing) ──────────────────────────────────────────────── */
.order { display: flex; flex-direction: column; }
.order .kicker { margin-bottom: 6px; }
.order-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: var(--line) solid var(--divider); font-size: 15px;
  color: inherit; text-decoration: none;
}
.order-row:last-child { border-bottom: 0; }
.order-row .pos, .order-row .score { font-weight: 800; }
.order-row.more { color: var(--muted); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card { background: var(--paper); border: var(--line) solid var(--text); padding: 18px; display: flex; flex-direction: column; gap: var(--space-3); }
.card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--line) solid var(--divider); }
.card-head h3 { font-size: 24px; }
.card-head .sub { font-size: 14px; color: var(--muted); margin-top: var(--space-1); }
.score-big { font-size: 40px; font-weight: 800; line-height: 1; text-align: right; }
.score-big small { display: block; font-size: 11px; font-weight: 600; }
.card-title { font-weight: 800; font-size: 16px; }
.card-text { font-size: 15px; line-height: 1.5; }
.card-meta { font-size: 12px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--divider); font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; font-size: 14px; font-weight: 800; }
.facts > div:only-child { grid-column: 1 / -1; }

/* Decision bar under a signal card: 3 equal cells, the letter cell filled */
.decide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--line) solid var(--text); border-top: 0; }
.decide form { margin: 0; display: flex; }
.decide button {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 56px;
  padding: 14px 16px; border: 0; border-radius: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer;
}
.decide form + form button { border-left: var(--line) solid var(--divider); }
.decide button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.decide .go button { background: var(--accent); color: var(--on-accent); }
.decide .go button:hover { background: var(--accent-600); }
.decide-later { margin: 0; }
.decide-later button {
  width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
}

/* ── Check notice ("Bitte prüfen") ──────────────────────────────────────── */
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: var(--space-3); background: var(--alert-100); color: var(--alert-700); font-size: 14px; }

/* ── Letter paper ───────────────────────────────────────────────────────── */
.letter {
  position: relative; max-height: 320px; overflow: auto; background: var(--paper);
  border: var(--line) solid var(--divider); padding: var(--space-4); font-size: 15px; line-height: 1.55;
  white-space: pre-line;
}
.disclosure { border-bottom: var(--line) solid var(--divider); }
.disclosure summary {
  display: flex; justify-content: space-between; align-items: center; min-height: 44px;
  font-weight: 800; cursor: pointer; list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure[open] summary svg { transform: rotate(90deg); }
.disclosure .body { padding: 0 0 var(--space-3); font-size: 14px; white-space: pre-line; }

/* ── Status message (flash) ─────────────────────────────────────────────── */
.toast {
  display: flex; align-items: center; gap: 10px; margin: var(--space-4) var(--gutter) 0; padding: 14px 16px;
  background: var(--text); color: var(--bg); font-size: 14px; box-shadow: var(--shadow-lg);
}

/* ── Tab bar ────────────────────────────────────────────────────────────── */
.tabbar {
  flex: none; position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--bg); border-top: var(--line) solid var(--divider);
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.tab {
  display: flex; flex-direction: column; gap: var(--space-1); padding: 12px var(--gutter);
  font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none;
}
.tab[aria-current="page"] { color: var(--accent); font-weight: 800; border-top: var(--line) solid var(--accent); margin-top: calc(-1 * var(--line)); }
.tab[aria-disabled="true"] { color: var(--neutral-600); pointer-events: none; }
.tab .badge-row { display: flex; gap: 6px; align-items: center; }
.badge { font-size: 10px; font-weight: 800; text-transform: uppercase; border: 1px solid currentColor; padding: 0 4px; }

/* ── Full-screen views (push setup, all done, login) ───────────────────── */
.screen { position: fixed; inset: 0; z-index: 10; overflow: auto; background: var(--bg); padding-top: env(safe-area-inset-top); }
.screen-inner { min-height: 100%; max-width: 640px; margin: 0 auto; padding: 24px var(--gutter) 36px; display: flex; flex-direction: column; gap: var(--space-4); }
.screen h2 { font-size: 34px; }
.screen .actions, .done .actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); }

.points { border-top: var(--line) solid var(--text); margin-top: var(--space-2); }
.points > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding: 14px 0; border-bottom: var(--line) solid var(--divider); }
.points strong { display: block; font-weight: 800; }
.points span { font-size: 14px; color: var(--muted); }

.howto { background: var(--surface); padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-2); }
.howto .step { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.howto .step b { width: 16px; font-weight: 800; }

/* "All done": the only full green surface */
.done { flex: 1; display: flex; flex-direction: column; background: var(--brand-green); color: #f3f2f2; }
.done .screen-inner { flex: 1; width: 100%; padding-top: 40px; gap: var(--space-6); }
.done .kicker, .done .sub, .done .next { color: var(--champagne); }
.done h1 { font-size: 88px; letter-spacing: -0.04em; color: var(--champagne); margin-top: var(--space-2); }
.done .tally { border-top: var(--line) solid #f3f2f2; }
.done .tally > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--line) solid color-mix(in srgb, #f3f2f2 35%, transparent); }
.done .tally > div:last-child { border-bottom: 0; }
.done .tally .n { font-size: 24px; font-weight: 800; line-height: 1.1; }
.done .tally strong { font-weight: 800; }
.done .sub { font-size: 14px; }
.done .next { font-size: 14px; }

.foot-link { align-self: flex-start; margin-top: var(--space-6); font-size: 13px; color: var(--muted); }

/* ── Check box with salutation choice ───────────────────────────────────── */
.check-box { display: flex; flex-direction: column; gap: 10px; }
.check-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); }
.check-box.is-done { background: var(--accent-100); color: var(--accent); }

/* ── Segment choice (Herr/Frau, intervals) ──────────────────────────────── */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: var(--line) solid var(--text); }
.seg form { margin: 0; display: flex; }
.seg button {
  flex: 1; min-height: 44px; padding: 10px; border: 0; border-radius: 0; background: transparent; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 800; text-align: left; color: var(--text); cursor: pointer;
}
.seg > * + *, .seg form + form button { border-left: var(--line) solid var(--text); }
.seg form + form { border-left: 0; }
.seg button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.seg-alert { border-color: var(--alert-700); }
.seg-alert button { color: var(--alert-700); font-size: 15px; }
.seg-alert > * + * { border-left-color: var(--alert-700); }
.link-muted { font-size: 13px; color: var(--muted); }
.hint { display: none; font-size: 11px; font-weight: 600; color: var(--muted); }
.decide .go .hint { color: inherit; }
.card-head-plain { align-items: start; }

/* ── Undo bar (5 s) ─────────────────────────────────────────────────────── */
.undo {
  --undo-bg: var(--text); --undo-fg: var(--bg);
  position: fixed; left: 12px; right: 12px; z-index: 30; max-width: 480px; margin: 0 auto;
  bottom: calc(var(--undo-offset, 16px) + env(safe-area-inset-bottom));
  background: var(--undo-bg); color: var(--undo-fg); box-shadow: var(--shadow-lg);
}
@media (prefers-color-scheme: dark) { .undo { --undo-bg: #0e3d33; --undo-fg: #efe9dc; } }
.undo-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px 6px 16px; font-size: 14px; }
.undo-row button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px;
  background: none; border: 0; font: inherit; font-size: 14px; font-weight: 800; color: var(--champagne); cursor: pointer;
}
.undo-timer { height: 3px; background: color-mix(in srgb, #f3f2f2 25%, transparent); }
.undo-timer span { display: block; height: 3px; background: var(--champagne); transform-origin: left; }
.undo.is-running .undo-timer span { animation: undo-run 5s linear forwards; }
@keyframes undo-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast-error { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 40; margin: 0 auto; max-width: 480px; background: var(--alert-700); color: #fff; }

/* ── Stack: one decision after the other ────────────────────────────────── */
.stack-head {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4);
  align-items: center; padding: var(--space-1) var(--gutter) var(--space-1); background: var(--bg);
}
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.progress i { height: 4px; background: var(--neutral-300); }
.progress i.on { background: var(--accent); }
.stack-count { font-size: 13px; font-weight: 600; }
.icon-btn { width: 44px; height: 44px; margin-right: -11px; display: grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; }

.item.is-decided { display: none !important; }
.stacking .app-head, .stacking .briefing, .stacking .section-head, .stacking .foot-link,
.stacking .tabbar, .stacking > .toast:not(.toast-error) { display: none !important; }
.stacking .page { max-width: 640px; padding: var(--space-2) var(--gutter) 0; gap: 0; }
.stacking .section { display: contents; }
.stacking .item { display: none; }
.stacking .item.is-current {
  display: flex; flex-direction: column; min-height: calc(100dvh - 60px - env(safe-area-inset-top));
  animation: card-in 150ms ease-out;
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stacking .hint { display: block; }
.stacking .decide-later .hint { display: inline; }
.stacking .item-actions { margin: auto calc(-1 * var(--gutter)) 0; background: var(--bg); }

/* signal card with the offset card behind it */
.stacking .item[data-kind="signal"] { gap: 0; }
.stacking .swipe-area { position: relative; flex: 1; min-height: 360px; margin-bottom: 28px; }
.stacking .swipe-area::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 16px; bottom: -12px;
  background: var(--surface); border: var(--line) solid var(--divider);
}
.stacking .swipe-area .card { position: absolute; inset: 0; overflow: auto; touch-action: none; user-select: none; -webkit-user-select: none; transform-origin: 50% 100%; }
.stacking .item-actions .decide { border: 0; border-top: var(--line) solid var(--divider); }
.stacking .decide-later { border-top: var(--line) solid var(--divider); }
.stacking .decide-later button { padding: 10px var(--gutter) 28px; }
.card.is-dragging { box-shadow: var(--shadow-lg); }
.card.is-settling { transition: transform 200ms ease-out; }
.stamp {
  position: absolute; top: 10px; right: 16px; z-index: 2; padding: 2px 8px; border: 3px solid var(--accent);
  color: var(--accent); font-size: 14px; font-weight: 800; letter-spacing: .04em; transform: rotate(-8deg);
  opacity: 0; pointer-events: none; transition: opacity 100ms;
}

/* letter: page background, white paper, buttons at the thumb */
.stacking .card.item[data-kind="letter"] { border: 0; background: transparent; padding: var(--space-2) 0 0; }
.stacking .item[data-kind="letter"] .letter { flex: 1; max-height: none; min-height: 180px; }
.stacking .item[data-kind="letter"] .item-actions {
  position: sticky; bottom: 0; padding: var(--space-3) var(--gutter) 32px; border-top: var(--line) solid var(--divider);
}
.stacking .item[data-kind="followup"] { margin: var(--space-2) 0 112px; }

.stack-done { position: fixed; inset: 0; z-index: 20; overflow: auto; }

/* ── Voice note ("Sprechen") ────────────────────────────────────────────── */
.notiz-step { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.notiz-step .actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.notiz-step .actions.btn-row { display: grid; }
.notiz-upload { margin: 0; }
.rec-time { font-size: 88px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.meter { height: 4px; background: var(--neutral-300); overflow: hidden; }
.meter span { display: block; width: 0; height: 4px; background: var(--accent); }
.meter.is-busy span { width: 30%; animation: meter-busy 1.2s ease-in-out infinite alternate; }
@keyframes meter-busy { from { transform: translateX(-100%); } to { transform: translateX(333%); } }
.notiz .points > div > svg { margin-top: 2px; }

/* Tab "Erledigt": letters after approval */
.letter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--line) solid var(--divider); }
.letter-row strong { display: block; overflow-wrap: anywhere; }
.reply-rate { font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.done .link-btn { align-self: flex-start; }

/* ── Letter editor (1a·3): full screen, only the letter text changes ─────── */
.editor { display: none; position: fixed; inset: 0; z-index: 25; flex-direction: column; background: var(--bg); padding-top: env(safe-area-inset-top); }
.editor:target, .editor.is-open { display: flex; }
.editor.is-open { height: var(--editor-height, 100dvh); }
body.editing { overflow: hidden; }
.editor-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2);
  min-height: 52px; padding: 0 var(--gutter); border-bottom: var(--line) solid var(--divider);
}
.editor-head h2 { font-size: 17px; font-weight: 800; }
.editor-head a, .editor-head button { min-height: 44px; display: flex; align-items: center; font: inherit; font-size: 16px; color: var(--text); text-decoration: none; }
.editor-head button { justify-self: end; background: none; border: 0; padding: 0; font-weight: 800; color: var(--accent); cursor: pointer; }
.editor-head button:disabled { color: var(--neutral-600); cursor: default; }
.editor-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 680px; margin: 0 auto; padding: var(--space-3) var(--gutter) var(--space-4); }
.editor-tabs { flex: none; }
.editor-tabs button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.editor-form { flex: 1; min-height: 0; display: flex; margin: 0; }
.editor-text {
  flex: 1; width: 100%; min-height: 160px; resize: none; padding: var(--space-4); border: var(--line) solid var(--accent); border-radius: 0;
  background: var(--paper); color: var(--text); font: inherit; font-size: 16px; line-height: 1.55;
}
.editor-text:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor-original { flex: 1; max-height: none; }
.editor-meter { flex: none; display: grid; grid-template-columns: 96px auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
.editor-changes { justify-self: end; color: var(--muted); }
.meter { display: block; height: 4px; background: var(--neutral-300); }
.meter i { display: block; height: 4px; width: 0; background: var(--accent); }
.editor.is-over .editor-text { border-color: var(--alert); }
.editor.is-over .editor-meter { color: var(--alert-700); }
.editor.is-over .meter i { background: var(--alert); }
.editor-more { flex: none; font-size: 13px; color: var(--muted); }
.editor-more a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }

/* changed passages in the letter, compared with the AI draft */
.letter mark { background: var(--accent-200); color: inherit; }
.letter-legend { display: flex; align-items: center; gap: var(--space-2); margin-top: calc(-1 * var(--space-2)); font-size: 12px; color: var(--muted); }
.letter-legend i { width: 12px; height: 12px; background: var(--accent-200); }

/* ── Week list (1b·1 mobile tab "Woche", 2a desktop left column) ──────────── */
kbd { font: inherit; font-size: 12px; font-weight: 800; line-height: 18px; padding: 0 5px; border: 1px solid currentColor; }
.btn-end { display: inline-flex; align-items: center; gap: var(--space-2); }
.workspace { flex: 1; display: flex; flex-direction: column; }
.overview { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 var(--gutter) var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.overview-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-6); }
.seg-filter button { padding: 10px 12px; }
.seg-filter button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.row-group .kicker { padding-bottom: 6px; border-bottom: var(--line) solid var(--text); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) 0; border-bottom: var(--line) solid var(--divider); color: inherit; text-decoration: none;
}
.row strong { display: block; font-size: 16px; font-weight: 800; }
.row-sub, .row-receipt { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-score { font-size: 20px; font-weight: 800; }
.row.is-done { background: var(--accent-100); }
.row.is-done .row-sub, .row.is-done .row-score, .row.is-done .tag { display: none; }
.row.is-done .row-receipt { color: var(--accent); font-weight: 600; }
.keys-hint { font-size: 12px; color: var(--muted); }
.keys-hint kbd { font-size: 11px; line-height: 16px; padding: 0 4px; }
.overview .foot-link { margin-top: var(--space-2); }

/* the cards open from the list: in the stack (mobile), on the right (desktop), via #anchor without JavaScript */
.section.cards { display: contents; }
.cards .section-head { display: none; }
.cards .item { display: none; flex-direction: column; }
body:not(.js) .cards .item:target, .cards .item:has(.editor:target), .cards .item:has(.editor.is-open), .cards .item.is-selected { display: flex; }
.stacking .overview { display: none; }

/* signal: "later" as its own row under the three decisions (mobile) */
.decide .decide-later { grid-column: 1 / -1; border-top: var(--line) solid var(--divider); }
.decide .decide-later button { flex-direction: row; align-items: center; gap: 4px; border-left: 0; min-height: 44px; padding: 10px 16px; color: var(--muted); font-weight: 600; }
.decide-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.stacking .item-actions .decide-later button { padding: 10px var(--gutter) 28px; }

.fact-table { width: 100%; border-collapse: collapse; font-size: 14px; border-top: var(--line) solid var(--text); margin-bottom: var(--space-3); }
.fact-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 12px 6px 0; }
.fact-table td { padding: 8px 12px 8px 0; border-top: var(--line) solid var(--divider); vertical-align: top; }

/* ── Desktop: list left, detail right (2a / 2b), from 900 px ─────────────── */
@media (max-width: 899.98px) {
  .desk-only { display: none !important; }
}
@media (min-width: 900px) {
  .mob-only { display: none !important; }
  /* only the week view is split into two scrolling columns; Erledigt and Sprechen stay normal pages */
  body:has(.workspace) { height: 100dvh; overflow: hidden; }

  .app-head { height: 64px; padding: 0 28px; border-bottom: 0; background: var(--brand-green); color: #f3f2f2; }
  .app-head .brand { width: 372px; font-size: 24px; color: #f3f2f2; }
  .brand-dot { color: var(--champagne); }
  .brand-sub { margin-left: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--champagne); }
  .app-head .meta { flex: 1; color: #f3f2f2; font-size: 14px; }
  .app-head .head-center { margin-right: auto; color: var(--champagne); }

  .workspace { min-height: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); }
  .overview { order: -1; max-width: none; margin: 0; padding: 4px 28px 24px; overflow: auto; border-right: var(--line) solid var(--divider); }
  .overview-head h3 { font-size: 22px; }
  .row { padding: var(--space-3); margin: 0 calc(-1 * var(--space-3)); }
  .row[aria-current="true"] { background: var(--brand-green); color: #f3f2f2; }
  .row[aria-current="true"] .row-sub, .row[aria-current="true"] .row-receipt { color: var(--champagne); }
  .row[aria-current="true"] .tag { background: var(--champagne); color: var(--brand-green); }
  .row[aria-current="true"] { --row-selected: var(--brand-green); background: var(--row-selected); }
  .row:not([aria-current="true"]):hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
  /* tabs Woche / Sprechen / Erledigt at the foot of the list column */
  .workspace ~ .tabbar { position: fixed; left: 0; bottom: 0; width: 400px; padding-bottom: 12px; border-right: var(--line) solid var(--divider); }
  .workspace .overview { padding-bottom: 104px; }

  .workspace .page { max-width: none; margin: 0; padding: 24px 40px 40px; overflow: auto; }
  body.js .briefing { display: none; }
  .detail-head h3, .item .card-head h3 { font-size: 32px; }

  /* 2a letter: letter left, profile and facts right, action bar below */
  .cards .item[data-kind="letter"] { border: 0; background: transparent; padding: 0; }
  .cards .item.is-selected[data-kind="letter"], body:not(.js) .cards .item:target[data-kind="letter"] {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 40px; row-gap: var(--space-4); align-items: start;
    grid-template-areas: "head head" "check side" "letter side" "legend side" "actions actions";
  }
  .item[data-kind="letter"] .detail-head { grid-area: head; }
  .item[data-kind="letter"] .check-box { grid-area: check; }
  .item[data-kind="letter"] .letter { grid-area: letter; max-height: none; max-width: 680px; padding: 28px 32px; font-size: 16px; line-height: 1.6; }
  .item[data-kind="letter"] .letter-legend { grid-area: legend; margin-top: 0; }
  .item[data-kind="letter"] .letter-side { grid-area: side; }
  .item[data-kind="letter"] .item-actions {
    grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--line) solid var(--text);
  }
  .item[data-kind="letter"] [data-approve] { min-width: 240px; }
  .item[data-kind="letter"] [data-next] { margin-left: auto; gap: var(--space-3); }

  /* 2b signal: four decisions in one row, keys B / A / S / V */
  .item[data-kind="signal"] .card { border: 0; background: transparent; padding: 0; gap: var(--space-4); }
  .item[data-kind="signal"] .card > div:first-of-type { display: flex; align-items: center; gap: var(--space-3); }
  .item .score-big { font-size: 64px; }
  .signal-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
  .signal-main { display: flex; flex-direction: column; gap: var(--space-3); }
  .signal-body .card-title { font-size: 20px; }
  .signal-body .card-text { font-size: 16px; line-height: 1.6; }
  .signal-body .chips { flex-direction: column; align-items: stretch; gap: 0; border-top: var(--line) solid var(--text); }
  .signal-body .chip { justify-content: space-between; border: 0; border-bottom: var(--line) solid var(--divider); padding: var(--space-3) 0; font-size: 15px; }
  .item[data-kind="signal"] .item-actions { margin-top: var(--space-6); }
  .item[data-kind="signal"] .decide { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 920px; border: var(--line) solid var(--text); }
  .decide form { border-right: var(--line) solid var(--divider); }
  .decide form + form button { border-left: 0; }
  .decide [data-swipe="right"] { order: 1; }
  .decide [data-swipe="up"] { order: 2; }
  .decide [data-swipe="down"] { order: 3; }
  .decide [data-swipe="left"] { order: 4; border-right: 0; }
  .decide button, .decide .decide-later button { flex-direction: column; align-items: flex-start; min-height: 96px; padding: 18px; gap: var(--space-3); font-size: 16px; font-weight: 800; color: var(--text); }
  .decide .decide-later { grid-column: auto; border-top: 0; }
  .decide [data-swipe="left"] button { color: var(--muted); }
  .decide .go button { color: var(--on-accent); }

  .cards .item[data-kind="followup"], .cards .item[data-kind="network"] { max-width: 640px; }

  /* editor, undo bar and "all done" stay in the detail area, the list stays visible */
  .editor:target, .editor.is-open { top: 64px; left: 402px; height: auto; }
  .undo { left: 428px; right: auto; width: 480px; margin: 0; bottom: 24px; --undo-bg: var(--brand-green); --undo-fg: #f3f2f2; }
  .stack-done { top: 64px; left: 402px; }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  .row[aria-current="true"] { --row-selected: #0e3d33; }
}