/*
 * emojirate Kunden-App – gleiche Gestaltung wie der Team-Admin (feedback.emojirate.de/assets/admin.css),
 * ergänzt um Bausteine für Kunden: Planhinweise, Einrichtung, QR-Karten, Auswertung.
 * Ruhig und dicht: weiße Flächen auf kühlem Grau, Emoji-Gelb nur als Markierung.
 * Bewertungsfarben (1–5) divergierend Rot ↔ Blau (SCORE_COLORS in feedback.emojirate.de/app/ui.php),
 * Mengen (Heatmap, Balken) sequenziell in Blau.
 */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ground: #F3F4F6;
  --panel: #FFFFFF;
  --ink: #1C1F26;
  --muted: #5B6170;
  --faint: #8A909B;
  --line: #E3E5EA;
  --line-soft: #EEF0F3;
  --sun: #FFC83D;
  --sun-soft: #FFF3C4;
  --blue: #2A78D6;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --ok: #157347;
  --ok-soft: #E3F5EA;
  --r: 12px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); }
body { margin: 0; font: 400 0.9375rem/1.5 "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
h1, h2, p, dl, dd { margin: 0; }
h1 { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
a { color: var(--ink); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 0.75rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.face-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.face { display: block; width: 100%; height: auto; }
.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 10; padding: 0.5rem 1rem; background: var(--ink); color: #fff; border-radius: 8px; }
.skip:focus { left: 0.5rem; }

/* ---------- Gerüst ---------- */

.app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--panel) 15rem, var(--line) 15rem calc(15rem + 1px), transparent calc(15rem + 1px)); }

.side {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100vh;
  padding: 1.25rem 0.875rem;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.brand .face { width: 1.75rem; }

.env { align-self: flex-start; margin-left: 0.5rem; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 650; border-radius: 999px; }
.env-dev .env { color: #8A4B00; background: #FFE8CC; }
.env-test .env { color: #174EA6; background: #E1ECFC; }
.env-prod .env { color: var(--ok); background: var(--ok-soft); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .me a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-weight: 550;
  text-decoration: none;
  border-radius: 8px;
  color: var(--muted);
}
.nav a:hover, .me a:hover { color: var(--ink); background: var(--line-soft); }
.nav a[aria-current="page"], .me a[aria-current="page"] { color: var(--ink); background: var(--sun-soft); box-shadow: inset 3px 0 0 var(--sun); }

.help-link { margin-top: auto; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 550; color: var(--muted); text-decoration: none; border-radius: 8px; }
.help-link:hover { color: var(--ink); background: var(--line-soft); }
.help-link + .me { margin-top: 0; }
.me { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.me a strong { display: block; color: var(--ink); font-weight: 600; }
.me a span { display: block; font-size: 0.8125rem; }
.me form { padding: 0.25rem 0.75rem; }

.main { padding: 2rem clamp(1.25rem, 3vw, 2.5rem) 4rem; max-width: 84rem; outline: none; }
.main > * + * { margin-top: 1.25rem; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head .muted { margin-top: 0.25rem; }
.head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.crumbs { margin-bottom: 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

.panel { padding: 1.25rem 1.375rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.panel > h2 + * { margin-top: 0.75rem; }
.panel > h2 + .muted.small { margin-top: 0.125rem; }
.panel.flush { padding: 0; overflow: hidden; }
.panel.narrow { max-width: 32rem; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.875rem; }
.panel-head .muted { margin-top: 0.125rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grid-wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.grid-2 > .panel { margin: 0; }

.flash { padding: 0.75rem 1rem; border-radius: 10px; font-weight: 550; background: var(--ok-soft); color: var(--ok); }
.flash-error { background: var(--danger-soft); color: var(--danger); }
.flash-info { background: #E1ECFC; color: #174EA6; }
.panel .flash { margin-bottom: 1rem; }

.empty { padding: 2rem 1.375rem; color: var(--muted); }
.panel .empty { padding: 0.5rem 0; }

/* ---------- Kennzahlen ---------- */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.kpi { display: flex; flex-direction: column; padding: 1rem 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.kpi strong { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.kpi-sub { font-size: 0.8125rem; color: var(--muted); }
.kpi-wide { justify-content: center; gap: 0.5rem; }

/* ---------- Diagramme ---------- */

.day-chart { display: block; width: 100%; height: auto; margin-top: 0.75rem; overflow: visible; }
.day-chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.day-chart .baseline { stroke: #C9CCD3; stroke-width: 1; }
.day-chart .axis { fill: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.day-chart .col { fill: var(--blue); }
.day-chart .hit { fill: transparent; }
.day-chart .bar:hover .hit, .day-chart .bar:focus .hit { fill: rgb(42 120 214 / 0.07); }
.day-chart .bar:focus { outline: none; }
.day-chart .bar:focus .col { fill: #1C5CAB; }

.dist { display: flex; gap: 2px; height: 10px; min-width: 7rem; }
.dist span { border-radius: 2px; min-width: 3px; }
.dist span:first-child { border-radius: 4px 2px 2px 4px; }
.dist span:last-child { border-radius: 2px 4px 4px 2px; }
.dist span:only-child { border-radius: 4px; }
.dist-big .dist { height: 18px; margin-top: 1.25rem; }
.dist-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted); }
.dist-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.dist-legend i { width: 0.625rem; height: 0.625rem; border-radius: 2px; }
.dist-legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.tip { position: fixed; z-index: 20; padding: 0.375rem 0.625rem; font-size: 0.8125rem; font-weight: 550; color: #fff; background: var(--ink); border-radius: 6px; pointer-events: none; white-space: nowrap; }

.score-badge { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.score-badge .face { width: 1.5rem; }

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

.table-wrap { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: 0.625rem 0.875rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); background: #FAFAFB; }
.table td { padding: 0.75rem 0.875rem; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FAFBFC; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .sub { display: block; font-size: 0.8125rem; color: var(--muted); }
.table .w-dist { width: 12rem; }
.table td:has(.dist) { vertical-align: middle; }
.panel:not(.flush) .table th:first-child, .panel:not(.flush) .table td:first-child { padding-left: 0; }
.row-link { text-decoration: none; }
.row-link:hover strong { text-decoration: underline; }
.row-actions { text-align: right; }
.ratings .answers p + p { margin-top: 0.25rem; }
.ratings .answers .muted { margin-right: 0.25rem; }

.org { display: flex; align-items: center; gap: 0.75rem; }
.org-logo { display: grid; place-items: center; width: 3.5rem; height: 2rem; padding: 0.125rem 0.25rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.org-logo img { max-width: 100%; max-height: 100%; }
.swatch { display: inline-grid; place-items: center; width: 2rem; height: 1.5rem; margin-right: 0.375rem; font-size: 0.75rem; font-weight: 700; border-radius: 6px; vertical-align: middle; }

.pill { display: inline-block; padding: 0.0625rem 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); background: var(--line-soft); border-radius: 999px; white-space: nowrap; }
.pill-on { color: var(--ok); background: var(--ok-soft); }
.pill-team { color: #8A4B00; background: var(--sun-soft); }

.copy { cursor: pointer; padding: 0.125rem 0.375rem; background: var(--line-soft); border-radius: 6px; }
.copy:hover { background: var(--line); }
.copy.is-copied::after { content: " kopiert"; color: var(--ok); font-family: "Instrument Sans", sans-serif; font-weight: 600; }
.copy.big { font-size: 1.25rem; padding: 0.375rem 0.75rem; letter-spacing: 0.04em; }

/* ---------- Formulare ---------- */

.stack { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.span-2 { grid-column: 1 / -1; }
.field { display: grid; gap: 0.375rem; align-content: start; }
.field label, .toggles legend { font-size: 0.8125rem; font-weight: 600; }
.opt { font-weight: 400; color: var(--faint); }
.hint { font-size: 0.8125rem; color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #CFD3DA;
  border-radius: 8px;
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgb(42 120 214 / 0.3); outline-offset: 0; border-color: var(--blue); }
input[type="file"] { padding: 0.375rem 0; }

.color-pick { display: flex; gap: 0.5rem; }
.color-pick input[type="color"] { width: 3rem; height: 2.5rem; padding: 0.125rem; background: #fff; border: 1px solid #CFD3DA; border-radius: 8px; cursor: pointer; }
.brand-preview { display: grid; gap: 0.25rem; padding: 1rem 1.25rem; border-radius: 10px; }
.brand-preview strong { font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.15; }

.toggles { display: grid; gap: 0.625rem; margin: 0; padding: 0; border: 0; }
.toggles legend { margin-bottom: 0.375rem; padding: 0; }
.toggles-row { grid-auto-flow: column; justify-content: start; gap: 1.5rem; }
.toggle { display: flex; align-items: flex-start; gap: 0.625rem; }
.toggle input { flex: none; width: 2.25rem; height: 1.25rem; margin: 0.125rem 0 0; appearance: none; background: #CFD3DA; border-radius: 999px; position: relative; cursor: pointer; transition: background-color 150ms; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; background: #fff; border-radius: 50%; transition: transform 150ms; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); }
.toggle input:checked { background: var(--ink); }
.toggle input:checked::after { transform: translateX(1rem); }
.toggle label { display: grid; cursor: pointer; }
.toggle label strong { font-weight: 550; }
.toggle label span { font-size: 0.8125rem; color: var(--muted); }

.range-pick { display: flex; align-items: center; gap: 0.5rem; }

.actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  background: #fff;
  border: 1px solid #CFD3DA;
  border-radius: 8px;
  cursor: pointer;
}
.btn:hover { background: var(--line-soft); }
.btn-primary { color: #fff; background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: #33373F; }
.btn-danger { color: var(--danger); border-color: #F2C4BF; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-small { min-height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.link { padding: 0; font-weight: 550; color: var(--muted); background: none; border: 0; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link:hover { color: var(--ink); }

.inline-form { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.inline-form .field { min-width: 14rem; }

.filters { display: flex; align-items: flex-end; gap: 0.75rem 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.filters .field { min-width: 10rem; }
.filters .toggle { padding-bottom: 0.625rem; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; }

/* ---------- Fragen ---------- */

.questions { margin: 0 0 1rem; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; }
.questions:empty { display: none; }
.question + .question { border-top: 1px solid var(--line-soft); }
.question summary { display: grid; gap: 0.125rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none; }
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { background: #FAFBFC; }
.question .q-title { font-weight: 600; }
.question .q-meta { font-size: 0.8125rem; color: var(--muted); }
.question.is-off .q-title { color: var(--faint); }
.question details[open] summary { background: #FAFBFC; border-bottom: 1px solid var(--line-soft); }
.q-form { padding: 1rem; }
.add-question > summary { list-style: none; }
.add-question > summary::-webkit-details-marker { display: none; }
.add-question[open] > summary { margin-bottom: 0.75rem; }
.add-question .q-form { border: 1px solid var(--line); border-radius: 10px; }

.danger-zone { border-color: #F2C4BF; }
.danger-zone .muted { margin: 0.25rem 0 0.75rem; }

/* ---------- Feed & Protokoll ---------- */

.feed, .audit { margin: 0; padding: 0; list-style: none; }
.feed li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--line-soft); }
.feed li:first-child { border-top: 0; padding-top: 0.25rem; }
.feed .score-badge > span:last-child { display: none; }
.feed .score-badge .face { width: 1.75rem; }
.feed-meta { font-size: 0.8125rem; color: var(--muted); }
.feed-meta strong { color: var(--ink); margin-right: 0.25rem; }
.feed .small .muted { margin-right: 0.25rem; }
.audit li { padding: 0.5rem 0; font-size: 0.875rem; color: var(--muted); border-top: 1px solid var(--line-soft); }
.audit li:first-child { border-top: 0; }
.audit li > span { color: var(--ink); font-weight: 600; }
.audit em { font-style: normal; color: var(--ink); }
.audit time { display: block; font-size: 0.75rem; color: var(--faint); }

.logo-stage { display: grid; place-items: center; min-height: 7rem; margin-bottom: 1rem; padding: 1rem; background: repeating-conic-gradient(#F3F4F6 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 1px solid var(--line); border-radius: 10px; }
.logo-stage img { max-width: 100%; max-height: 6rem; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; margin-bottom: 1rem; font-size: 0.875rem; }
.facts dt { color: var(--muted); }

.temp-pass { border-color: var(--sun); background: #FFFBEB; }
.temp-pass p { margin-top: 0.5rem; }

/* ---------- Pläne & Abos ---------- */

.panel-pad { padding: 1.25rem 1.375rem 0.875rem; }
.panel-pad .muted { margin-top: 0.125rem; }
.table tr.is-off td { color: var(--faint); }
.pill-warn { color: #8A4B00; background: #FFE8CC; }
.h3 { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 650; }
.sub-current { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 1.125rem; }
.sub-current + .muted { margin-top: 0.25rem; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.875rem 1.5rem; }
.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 0; border-top: 1px solid var(--line-soft); }
.plain-list li:first-child { border-top: 0; }
.attention { border-color: #FFD89A; background: #FFFBF0; }
.plan-form > * + * { margin-top: 1.25rem; }


/* ---------- Seitenleiste: Organisation ---------- */

.org { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.5rem; border: 1px solid var(--line); border-radius: 10px; }
.org-logo { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.25rem; padding: 0.125rem 0.25rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.org-logo img { max-width: 100%; max-height: 100%; }
.org-logo b { font-size: 0.8125rem; color: var(--muted); }
.org-text { display: grid; min-width: 0; }
.org-text strong { font-size: 0.875rem; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-text span { font-size: 0.75rem; color: var(--muted); }

/* ---------- Hinweise ---------- */

.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; margin-right: 0.375em; flex: none; }
.banner { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.875rem; }
.banner a { font-weight: 600; margin-left: 0.25rem; }
.banner .icon { margin-top: 0.2em; }
.banner-warn { background: #FFF4E0; color: #6B3A00; border: 1px solid #FFD89A; }
.banner-info { background: #E1ECFC; color: #174EA6; }
.banner-support { justify-content: space-between; flex-wrap: wrap; background: var(--ink); color: #fff; }
.banner-support a { color: #fff; }
.locked-note { display: flex; align-items: flex-start; gap: 0.125rem; font-size: 0.8125rem; color: var(--muted); }
.locked-note .icon { margin-top: 0.2em; }
.upsell { display: flex; gap: 0.75rem; padding: 1.125rem 1.25rem; background: linear-gradient(135deg, #FFFBEB, #FFF3C4); border: 1px solid #FFE08A; border-radius: var(--r); }
.upsell .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: #8A4B00; }
.upsell p { margin-top: 0.25rem; color: #5B4A1F; max-width: 60ch; }
.upsell a { display: inline-block; margin-top: 0.5rem; font-weight: 600; }
.panel-alert { border-color: #F2C4BF; }
.btn.is-disabled { color: var(--faint); background: var(--line-soft); border-color: var(--line); cursor: not-allowed; }
.btn-primary.is-disabled { color: #fff; background: #9A9EA7; border-color: #9A9EA7; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-big { min-height: 3rem; padding: 0.75rem 1.5rem; font-size: 1rem; }
.pill-warn { color: #8A4B00; background: #FFE8CC; }
.h3 { margin: 0 0 0.625rem; font-size: 0.9375rem; font-weight: 650; }
.label-like { font-size: 0.8125rem; font-weight: 600; }
fieldset.plain { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset:disabled .toggle input, fieldset:disabled .toggle label { cursor: not-allowed; opacity: 0.7; }
.panel-pad { padding: 1rem 1.375rem 0.25rem; }

/* ---------- Kennzahlen ---------- */

.kpi-face { gap: 0.125rem; }
.avg-face { display: inline-flex; align-items: center; gap: 0.5rem; }
.avg-face .face { width: 2.25rem; }
.avg-face b { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.avg-face.is-empty { font-size: 2rem; font-weight: 700; color: var(--faint); }
.delta { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.delta-up { color: #1C5CAB; }
.delta-down { color: var(--danger); }
.table .sub .delta { font-weight: 550; }
.dist-prev .dist { height: 8px; opacity: 0.6; margin-top: 0.375rem; }

.usage-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.usage-row .usage { min-width: 16rem; padding: 0.75rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.usage + .usage { margin-top: 0.75rem; }
.usage-row .usage + .usage { margin-top: 0; }
.usage-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; color: var(--muted); }
.usage-head b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.usage-bar { height: 6px; margin-top: 0.375rem; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.usage-bar span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.usage.is-full .usage-bar span { background: #E8A33D; }

/* ---------- Zeitraum ---------- */

.segmented { display: inline-flex; flex-wrap: wrap; margin: 0; padding: 3px; border: 1px solid #CFD3DA; border-radius: 10px; background: #fff; }
.seg { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 2.125rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 550; color: var(--muted); border-radius: 7px; cursor: pointer; white-space: nowrap; }
.seg input:checked + span { color: #fff; background: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 1px; }
.seg.is-locked span { color: var(--faint); cursor: not-allowed; }
.seg:not(.is-locked) span:hover { color: var(--ink); }
.seg input:checked + span:hover { color: #fff; }

/* ---------- Übersicht ---------- */

.onboarding { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.5rem; padding: 2rem; }
.onboarding-face .face { width: 5rem; }
.steps-list { margin: 1rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.steps-list li::marker { font-weight: 700; }

/* ---------- Standort ---------- */

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: 0.625rem 0.875rem; font-weight: 550; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sun); }
.page-head h1 .pill { vertical-align: middle; font-size: 0.8125rem; letter-spacing: 0; }

.checklist { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.checklist li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.5rem; }
.checklist li::before { content: ""; grid-row: span 2; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; border: 2px solid #CFD3DA; border-radius: 50%; }
.checklist li.is-done::before { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.checklist a { font-weight: 600; }
.checklist span { font-size: 0.8125rem; color: var(--muted); }

.wizard { display: grid; gap: 1.25rem; }
.wizard-step { margin: 0; padding: 1.25rem 1.375rem 1.375rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.wizard-step legend { float: left; width: 100%; display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; padding: 0; font-size: 1.0625rem; font-weight: 650; }
.wizard-step legend + * { clear: both; }
.step-no { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; font-size: 0.875rem; font-weight: 700; background: var(--sun); border-radius: 50%; }
.choice-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.choice-card { position: relative; display: grid; gap: 0.25rem; align-content: start; padding: 1rem 1.125rem; border: 1.5px solid #CFD3DA; border-radius: 12px; cursor: pointer; }
.choice-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice-card:hover { border-color: #9A9EA7; }
.choice-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #FFFDF5; }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.choice-card.is-locked { cursor: not-allowed; color: var(--faint); background: #FAFAFB; }
.choice-card > span:not(.choice-art) { font-size: 0.8125rem; color: var(--muted); }
.choice-art .face { width: 2.25rem; margin-bottom: 0.25rem; }

.next-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 1.5rem; }
.next-steps li { position: relative; padding-left: 2.75rem; counter-increment: step; }
.next-steps li::before { content: counter(step); position: absolute; left: 0; top: -0.125rem; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; font-weight: 700; background: var(--sun); border-radius: 50%; }
.next-steps p { margin-top: 0.375rem; }
.next-steps .actions { margin-top: 0.625rem; }

.qr { display: grid; place-items: center; aspect-ratio: 1; width: 100%; max-width: 12rem; background: #fff; border-radius: 8px; }
.qr svg { width: 100%; height: auto; display: block; }
.qr-panel { display: grid; justify-items: center; text-align: center; gap: 0.75rem; }
.qr-panel .qr { max-width: 14rem; }

.link-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); gap: 1.25rem; }
.link-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 0; }
.link-card .qr { max-width: 8.5rem; border: 1px solid var(--line); padding: 0.25rem; }
.link-body { display: grid; gap: 0.625rem; min-width: 0; }
.link-body .actions { gap: 0.5rem 0.75rem; }
.rename { display: flex; gap: 0.5rem; }
.rename input { font-weight: 600; }
.inline-form.flat { margin-top: 0.5rem; padding-top: 0; border-top: 0; }

/* ---------- Auswertung ---------- */

.heat { border-collapse: separate; border-spacing: 3px; margin-top: 0.75rem; font-size: 0.75rem; }
.heat th { padding: 0 0.25rem; font-weight: 600; color: var(--muted); text-align: center; }
.heat tbody th { text-align: left; padding-right: 0.5rem; }
.heat td { width: 1.75rem; min-width: 1.5rem; height: 1.625rem; border-radius: 4px; }
.heat td:hover { outline: 2px solid var(--ink); outline-offset: -1px; }
.lv0 { background: #F1F2F5; }
.lv1 { background: #DCE9FA; }
.lv2 { background: #B5D1F4; }
.lv3 { background: #86B6EF; }
.lv4 { background: #4F93E3; }
.lv5 { background: #2A78D6; }
.heat-legend { display: flex; align-items: center; gap: 3px; margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); }
.heat-legend i { width: 1rem; height: 0.75rem; border-radius: 3px; }
.heat-legend span:first-child { margin-right: 0.375rem; }
.heat-legend span:last-child { margin-left: 0.375rem; }

.q-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 1rem; margin-top: 1rem; }
.q-stat { padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: 10px; }
.q-stat h3 { margin: 0; font-size: 0.9375rem; font-weight: 650; }
.q-stat header { margin-bottom: 0.75rem; }
.q-avg { margin-bottom: 0.5rem; color: var(--muted); }
.q-avg b { font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.375rem; font-size: 0.8125rem; }
.bars li { display: grid; grid-template-columns: minmax(4rem, 9rem) minmax(0, 1fr) 6.5rem; align-items: center; gap: 0.625rem; }
.bars-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars-track { height: 0.625rem; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.bars-track span { display: block; height: 100%; background: var(--blue); border-radius: 999px; min-width: 2px; }
.bars-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.quotes { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.quotes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem; font-size: 0.875rem; }
.quotes .score-badge > span:last-child { display: none; }
.quotes time { display: block; font-size: 0.75rem; color: var(--faint); }

/* ---------- Benutzer ---------- */

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 0.75rem; }
.roles dt { font-weight: 650; }
.roles dd { font-size: 0.8125rem; color: var(--muted); }
.role-pick, .scope-pick { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.role-pick legend, .scope-pick legend { margin-bottom: 0.375rem; padding: 0; font-size: 0.8125rem; font-weight: 600; }
.radio-card { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid #CFD3DA; border-radius: 10px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--ink); background: #FFFDF5; }
.radio-card input { margin-top: 0.25rem; accent-color: var(--ink); }
.radio-card > span { display: grid; }
.radio-card > span span { font-size: 0.8125rem; color: var(--muted); }
.radio-line, .check-line { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.radio-line input, .check-line input { accent-color: var(--ink); width: 1rem; height: 1rem; }
.loc-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 0.375rem 1rem; margin: 0.25rem 0 0 1.5rem; padding: 0.75rem; background: #FAFAFB; border-radius: 8px; }
.scope-pick:disabled { color: var(--faint); }
.scope-pick:disabled label { cursor: not-allowed; }

/* ---------- Organisation & Plan ---------- */

.plan-card { padding: 1.5rem; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.plan-name { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; margin: 0.125rem 0 0.25rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.plan-price { display: grid; justify-items: end; text-align: right; }
.plan-price strong { font-size: 1.375rem; letter-spacing: -0.02em; }
.plan-state { margin-top: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; background: var(--line-soft); border-radius: 8px; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; margin-top: 1.5rem; }
.limits { margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
.limits li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; border-top: 1px solid var(--line-soft); }
.limits b { font-weight: 650; font-variant-numeric: tabular-nums; }
.features { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.features li { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.5rem; }
.features li > span:last-child { display: grid; }
.feature-mark { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; font-size: 0.75rem; font-weight: 700; border-radius: 50%; }
.features .is-on .feature-mark { color: #fff; background: var(--ok); }
.features .is-off .feature-mark { color: var(--faint); background: var(--line-soft); }
.features .is-off strong { color: var(--muted); font-weight: 550; }
.plan-contact { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-size: 0.875rem; color: var(--muted); }
.brand-logo { max-height: 2.5rem; max-width: 10rem; margin-bottom: 0.375rem; }
.audit li > span { color: var(--ink); font-weight: 600; }

/* ---------- Ohne Anmeldung ---------- */

.public-main { display: grid; place-items: center; align-content: center; gap: 1rem; min-height: 100vh; padding: 1.5rem 1rem; }
.public-main > .flash { width: min(100%, 26rem); }
.card { width: min(100%, 26rem); padding: 2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.card-mark { width: 3rem; margin-bottom: 1rem; }
.card h1 { font-size: 1.5rem; }
.card > .muted { margin: 0.375rem 0 1.5rem; }
.card .flash { margin-bottom: 1rem; }
.card-foot { margin-top: 1.25rem; font-size: 0.875rem; }
.card-foot + .card-foot { margin-top: 0.5rem; }
.public-foot { font-size: 0.8125rem; color: var(--muted); }
.public-foot a { color: var(--muted); }
.detail { margin-top: 1rem; padding: 0.75rem; font-size: 0.75rem; white-space: pre-wrap; background: var(--line-soft); border-radius: 8px; }

/* ---------- Druckkarte ---------- */

.is-print { background: var(--ground); }
.print-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 40rem; margin: 1.5rem auto 1rem; padding: 0 1rem; }
.print-card { width: 105mm; min-height: 148mm; margin: 0 auto 2rem; background: #fff; border-radius: 4mm; overflow: hidden; box-shadow: 0 4px 24px rgb(0 0 0 / 0.08); display: flex; flex-direction: column; align-items: center; text-align: center; }
.print-card header { width: 100%; padding: 8mm 7mm 10mm; }
.print-logo { max-height: 12mm; max-width: 60mm; margin-bottom: 4mm; }
.print-name { font-weight: 700; margin-bottom: 3mm; }
.print-card h1 { font-size: 6.5mm; line-height: 1.15; letter-spacing: -0.02em; }
.print-faces { display: flex; gap: 2mm; margin-top: -6mm; padding: 2mm 3mm; background: #fff; border-radius: 99px; }
.print-faces .face { width: 9mm; }
.print-qr { width: 52mm; max-width: none; margin-top: 5mm; }
.print-how { margin: 4mm 9mm 0; font-size: 3.6mm; color: var(--muted); }
.print-url { margin: auto 0 6mm; padding-top: 3mm; font-size: 3.4mm; font-weight: 600; }
@page { size: A6 portrait; margin: 0; }
@media print {
  .is-print { background: #fff; }
  .print-bar { display: none; }
  .print-card { margin: 0; box-shadow: none; border-radius: 0; width: 105mm; height: 148mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Kleinere Bildschirme ---------- */

@media (max-width: 70rem) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-wide-left { grid-template-columns: minmax(0, 1fr); }
  .choice-cards, .roles { grid-template-columns: minmax(0, 1fr); }
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 56rem) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .env { margin: 0; }
  .nav { flex-direction: row; order: 3; width: 100%; overflow-x: auto; }
  .nav a { white-space: nowrap; }
  .me { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0 auto; padding: 0; border: 0; }
  .me a span { display: none; }
  .main { padding: 1.25rem 1rem 3rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .toggles-row { grid-auto-flow: row; }
  .org { order: 2; padding: 0.25rem 0.5rem; border: 0; }
  .org-logo { display: none; }
  .link-cards { grid-template-columns: minmax(0, 1fr); }
  .onboarding { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
}

@media (max-width: 34rem) {
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .link-card { grid-template-columns: minmax(0, 1fr); }
  .bars li { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .bars-track { grid-column: 1 / -1; grid-row: 2; }
  .plan-price { justify-items: start; text-align: left; }
}

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

/* Bewertungen: Adresse löschen (Widerruf) */
.ratings .forget { margin-top: 0.125rem; }
.ratings .forget .link { font-size: 0.75rem; font-weight: 500; }

/* ---------- Öffentliche Doku (/doku) ---------- */

.is-docs { background: #fff; }
.docs-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem clamp(1rem, 3vw, 2rem); background: rgb(255 255 255 / 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.docs-top .brand { padding: 0; }
.docs-badge { margin-left: 0.25rem; padding: 0.0625rem 0.5rem; font-size: 0.75rem; font-weight: 650; letter-spacing: 0; background: var(--sun-soft); border-radius: 999px; }
.docs-top-links { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; font-weight: 550; }
.docs-top-links a:not(.btn) { color: var(--muted); text-decoration: none; }
.docs-top-links a:not(.btn):hover { color: var(--ink); }

.docs { display: grid; grid-template-columns: 17rem minmax(0, 1fr) 14rem; max-width: 84rem; margin: 0 auto; }
.docs-menu > summary { display: none; }
.docs-nav { position: sticky; top: 3.75rem; max-height: calc(100vh - 3.75rem); overflow-y: auto; padding: 1.5rem 1rem 3rem clamp(1rem, 3vw, 2rem); border-right: 1px solid var(--line-soft); }
.docs-search input { min-height: 2.25rem; font-size: 0.875rem; }
.docs-group { margin-top: 1.25rem; }
.docs-group-title { margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.docs-group ul, .docs-toc ul { margin: 0; padding: 0; list-style: none; }
.docs-nav li a { display: block; padding: 0.3125rem 0.625rem; font-size: 0.9rem; color: var(--muted); text-decoration: none; border-radius: 6px; }
.docs-nav li a:hover { color: var(--ink); background: var(--line-soft); }
.docs-nav li a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--sun-soft); box-shadow: inset 3px 0 0 var(--sun); }
.docs-empty { margin-top: 1rem; }

.docs-main { min-width: 0; padding: 2.25rem clamp(1.25rem, 4vw, 3.5rem) 4rem; outline: none; }
.doc { max-width: 46rem; font-size: 1rem; line-height: 1.65; }
.doc-section { font-size: 0.8125rem; font-weight: 650; color: var(--muted); }
.doc h1 { margin-top: 0.25rem; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
.doc-lede { margin-top: 0.5rem; font-size: 1.125rem; color: var(--muted); }
.doc h2 { position: relative; margin: 2.5rem 0 0.75rem; padding-top: 0.25rem; font-size: 1.3125rem; scroll-margin-top: 5rem; }
.doc h3 { margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; font-weight: 650; scroll-margin-top: 5rem; }
.doc p, .doc ul, .doc ol, .doc table, .doc dl { margin: 0.75rem 0 0; }
.doc ul, .doc ol { padding-left: 1.375rem; }
.doc li + li { margin-top: 0.375rem; }
.doc li > ul, .doc li > ol { margin-top: 0.375rem; }
.doc a { color: #1C5CAB; }
.doc strong { font-weight: 650; }
.doc code { padding: 0.0625rem 0.3125rem; background: var(--line-soft); border-radius: 4px; }
.doc .anchor { position: absolute; left: -1.25rem; color: var(--faint); text-decoration: none; opacity: 0; }
.doc h2:hover .anchor, .doc .anchor:focus { opacity: 1; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.doc th, .doc td { padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc th { font-size: 0.8125rem; color: var(--muted); background: #FAFAFB; }
.doc td:first-child { font-weight: 600; white-space: nowrap; }
.doc .table-scroll { overflow-x: auto; }
.doc ol.steps { padding: 0; list-style: none; counter-reset: s; }
.doc ol.steps > li { position: relative; padding-left: 2.25rem; counter-increment: s; }
.doc ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 0.1rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; font-size: 0.8125rem; font-weight: 700; background: var(--sun); border-radius: 50%; }
.doc ol.steps > li + li { margin-top: 0.75rem; }

.ui-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.25rem; padding: 0.0625rem 0.4375rem; font-size: 0.875em; font-weight: 600; background: var(--line-soft); border: 1px solid var(--line); border-radius: 6px; }
.ui-sep { color: var(--faint); font-weight: 400; }
.role-tag { display: inline-block; padding: 0 0.4375rem; font-size: 0.8125em; font-weight: 650; color: #174EA6; background: #E1ECFC; border-radius: 999px; }

.callout { margin: 1.25rem 0 0; padding: 0.875rem 1rem; border-left: 4px solid; border-radius: 0 8px 8px 0; background: var(--line-soft); }
.callout > :first-child, .callout > .callout-label + * { margin-top: 0; }
.callout-label { margin: 0 0 0.25rem !important; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.callout-tip { border-color: var(--ok); background: var(--ok-soft); }
.callout-tip .callout-label { color: var(--ok); }
.callout-note { border-color: var(--blue); background: #EEF4FD; }
.callout-note .callout-label { color: #174EA6; }
.callout-warn { border-color: #E8A33D; background: #FFF6E5; }
.callout-warn .callout-label { color: #8A4B00; }
.callout-plan { border-color: var(--sun); background: #FFFBEB; }
.callout-plan .callout-label { color: #8A4B00; }

.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 0.75rem; margin-top: 1rem; padding: 0; list-style: none; }
.doc-cards li { margin: 0 !important; }
.doc-cards a { display: block; height: 100%; padding: 0.875rem 1rem; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 10px; }
.doc-cards a:hover { border-color: #9A9EA7; background: #FAFBFC; }
.doc-cards strong { display: block; }
.doc-cards span { display: block; margin-top: 0.125rem; font-size: 0.875rem; color: var(--muted); line-height: 1.45; }

.doc-pager { display: flex; justify-content: space-between; gap: 1rem; max-width: 46rem; margin-top: 3rem; }
.doc-pager a { display: grid; gap: 0.125rem; min-width: 0; max-width: 48%; padding: 0.75rem 1rem; font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 10px; }
.doc-pager a:hover { border-color: #9A9EA7; }
.doc-pager span { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.doc-next { margin-left: auto; text-align: right; }
.doc-foot { max-width: 46rem; margin-top: 2rem; padding-top: 1rem; font-size: 0.8125rem; color: var(--muted); border-top: 1px solid var(--line-soft); }
.doc-foot p + p { margin-top: 0.25rem; }
.doc-foot a { color: var(--muted); }

.docs-toc { position: sticky; top: 3.75rem; align-self: start; max-height: calc(100vh - 3.75rem); overflow-y: auto; padding: 2.5rem 1rem 2rem 0; }
.docs-toc li a { display: block; padding: 0.25rem 0 0.25rem 0.75rem; font-size: 0.8125rem; color: var(--muted); text-decoration: none; border-left: 2px solid var(--line-soft); }
.docs-toc li a:hover { color: var(--ink); border-left-color: #9A9EA7; }
.docs-toc li a.is-active { color: var(--ink); border-left-color: var(--sun); }

@media (max-width: 72rem) {
  .docs { grid-template-columns: 16rem minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 52rem) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-menu { position: sticky; top: 3.5rem; z-index: 4; background: #fff; border-bottom: 1px solid var(--line); }
  .docs-menu > summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 650; cursor: pointer; list-style: none; }
  .docs-menu > summary::-webkit-details-marker { display: none; }
  .docs-menu > summary::after { content: "▾"; margin-left: auto; color: var(--faint); }
  .docs-menu[open] > summary::after { content: "▴"; }
  .docs-menu-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--muted); }
  .docs-nav { position: static; max-height: 60vh; padding: 0 1rem 1rem; border-right: 0; }
  .docs-main { padding: 1.5rem 1rem 3rem; }
  .docs-top-links a:not(.btn) { display: none; }
  .doc .anchor { display: none; }
  .doc td:first-child { white-space: normal; }
  .doc-pager { flex-direction: column; }
  .doc-pager a { max-width: none; }
}