/* scrollwit — Kante Design System 2.0
   Öffentliches Stylesheet: Kopfband, Feed, Quiz, Konto, Gespeichert,
   Kommentare, Quellen, Offline. Das Adminpanel hat sein eigenes
   Stylesheet (admin.css), das dieselben Tokens verwendet.

   Kante-Grundsätze, überall: 0 px Radius, keine Schatten, keine Verläufe,
   keine weichen Masken. Hierarchie entsteht durch Fläche, nicht durch Tiefe. */

@font-face {
  font-family: 'Geist Sans';
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Höhe des globalen, festen Kopfbands (header.app) — überall dort
     gebraucht, wo Inhalt darunter beginnen oder ihn umgehen muss. */
  --sw-header-h: 52px;
}

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

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--sw-night);
  color: var(--sw-text);
  font-family: 'Geist Sans', system-ui, -apple-system, sans-serif;
}

body {
  -webkit-tap-highlight-color: transparent;
}

h1, h2, p, ul, ol, figure { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }

.mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

:focus-visible {
  outline: var(--sw-border-active) solid var(--sw-cobalt);
  outline-offset: 2px;
}

/* ---------- Kopfband: global, fest, über allem ---------- */

header.app {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: var(--sw-header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sw-12);
  padding: env(safe-area-inset-top) calc(var(--sw-16) + env(safe-area-inset-right))
           0 calc(var(--sw-16) + env(safe-area-inset-left));
  background: var(--sw-night);
  border-bottom: var(--sw-border) solid var(--sw-line);
}
.brand { display: flex; align-items: center; gap: var(--sw-8); text-decoration: none; color: var(--sw-text); }
.brand .mark { width: 26px; height: 26px; color: var(--sw-text); flex: none; }
.brand .name { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.brand .name .wit { font-weight: 700; color: var(--sw-orange); }

.head-links { display: flex; align-items: center; gap: var(--sw-4); }
.navlink {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--sw-text-muted);
  border: var(--sw-border) solid transparent;
}
.navlink svg { width: 20px; height: 20px; fill: currentColor; }
.navlink:hover { color: var(--sw-text); }
.navlink.on { color: var(--sw-mint); border-color: var(--sw-line); }
.who-chip {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; color: var(--sw-text-muted);
  padding: 0 var(--sw-12);
  border-right: var(--sw-border) solid var(--sw-line);
  margin-right: var(--sw-4);
  white-space: nowrap;
}

/* ---------- Gemeinsame Seitenhülle (Konto, Quiz, Kommentare, …) ---------- */

.page {
  margin: 0 auto;
  padding: calc(var(--sw-header-h) + var(--sw-32) + env(safe-area-inset-top))
           calc(var(--sw-16) + env(safe-area-inset-right))
           calc(var(--sw-64) + env(safe-area-inset-bottom))
           calc(var(--sw-16) + env(safe-area-inset-left));
}
.page--narrow { max-width: 30rem; }
.page--medium { max-width: 34rem; }
.page--wide   { max-width: 68rem; }

.page h1 {
  font-size: var(--sw-title-size); line-height: var(--sw-title-lh);
  font-weight: var(--sw-title-weight);
  letter-spacing: -.01em;
  margin-bottom: var(--sw-4);
}
.page .sub {
  font-size: var(--sw-body-size); line-height: var(--sw-body-lh);
  color: var(--sw-text-muted);
  margin-bottom: var(--sw-32);
}
.page .empty {
  color: var(--sw-text-muted);
  font-size: var(--sw-body-size); line-height: var(--sw-body-lh);
}
.page .empty code {
  font-family: 'Geist Mono', monospace;
  background: var(--sw-night-lift);
  padding: 2px 6px;
}

/* ---------- Knöpfe & Formulare ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sw-8);
  min-height: 44px; padding: 0 var(--sw-16);
  border: var(--sw-border) solid var(--sw-line);
  border-radius: var(--sw-radius);
  background: transparent;
  color: var(--sw-text);
  font: 600 15px/1 'Geist Sans', sans-serif;
  cursor: pointer;
  transition: background var(--sw-ms-feedback) var(--sw-ease),
              border-color var(--sw-ms-feedback) var(--sw-ease);
  text-decoration: none;
}
.btn:hover { border-color: var(--sw-text-muted); }
.btn-primary { background: var(--sw-orange); color: var(--sw-night); border-color: transparent; }
.btn-primary:hover { background: var(--sw-orange); filter: brightness(1.08); }
.btn-danger { color: var(--sw-error); border-color: var(--sw-error); }
.btn-block { width: 100%; }

/* ---------- Installationshinweis ---------- */

.install-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sw-16);
  flex-wrap: wrap;
  background: var(--sw-night-lift);
  border-top: var(--sw-border) solid var(--sw-line);
  padding: var(--sw-16) calc(var(--sw-16) + env(safe-area-inset-right))
           calc(var(--sw-16) + env(safe-area-inset-bottom)) calc(var(--sw-16) + env(safe-area-inset-left));
}
.install-banner-text {
  color: var(--sw-text);
  font: 600 15px/1.3 'Geist Sans', sans-serif;
  margin: 0;
}
.install-banner-actions {
  display: flex; gap: var(--sw-8);
  flex-shrink: 0;
}

textarea, input[type=text], input[type=number] {
  font: inherit; color: var(--sw-text);
  background: var(--sw-night-lift);
  border: var(--sw-border) solid var(--sw-line);
  border-radius: var(--sw-radius);
  padding: var(--sw-12);
}
textarea:focus-visible, input:focus-visible { border-color: var(--sw-cobalt); }
textarea { width: 100%; resize: vertical; min-height: 72px; }

/* ---------- Konto ---------- */

.who {
  padding: var(--sw-16); margin-bottom: var(--sw-24);
  background: var(--sw-night-lift);
  border: var(--sw-border) solid var(--sw-line);
}
.who .label { display: block; font-size: var(--sw-meta-size); font-weight: var(--sw-meta-weight); letter-spacing: .04em; text-transform: uppercase; color: var(--sw-text-muted); }
.who .value { display: block; font-size: 16px; overflow-wrap: anywhere; margin-top: 2px; }
.who .value + .label { margin-top: var(--sw-12); }
.actions { display: flex; flex-direction: column; gap: var(--sw-8); }
.actions a {
  display: block; padding: var(--sw-12) var(--sw-16);
  text-decoration: none; color: var(--sw-text); font-size: 15px;
  background: var(--sw-night-lift);
  border: var(--sw-border) solid var(--sw-line);
}
.actions a:hover, .actions a:focus-visible { border-color: var(--sw-text-muted); }
.actions a .hint { display: block; font-size: 12px; color: var(--sw-text-muted); margin-top: 2px; }
.actions a.primary { background: var(--sw-orange); color: var(--sw-night); border-color: transparent; font-weight: 700; }
.actions a.primary:hover { filter: brightness(1.08); }
.actions a.danger { color: var(--sw-error); }
.hint { font-size: 13px; color: var(--sw-text-muted); margin-top: var(--sw-4); }
.note { font-size: 14px; color: var(--sw-text-muted); }

/* ---------- Gespeichert ---------- */

.list { display: flex; flex-direction: column; gap: var(--sw-8); }
.list a {
  display: block; padding: var(--sw-12) var(--sw-16);
  text-decoration: none; color: var(--sw-text); font-size: 15px;
  background: var(--sw-night-lift);
  border: var(--sw-border) solid var(--sw-line);
}
.list a:hover, .list a:focus-visible { border-color: var(--sw-text-muted); }

/* ---------- Kommentare ---------- */

form.post { margin-bottom: var(--sw-24); }
.form-row { display: flex; justify-content: flex-end; margin-top: var(--sw-8); }
.signin-hint { color: var(--sw-text-muted); font-size: 14px; margin-bottom: var(--sw-24); }
.signin-hint a { color: var(--sw-cobalt); }

.comment { padding: var(--sw-12) 0; border-bottom: var(--sw-border) solid var(--sw-line); }
.comment:last-child { border-bottom: 0; }
.comment .who { all: unset; display: inline; font-weight: 600; font-size: 14px; }
.comment .when { font-size: 12px; color: var(--sw-text-muted); margin-left: var(--sw-8); }
.comment .body { font-size: 15px; line-height: 1.5; margin: var(--sw-4) 0 var(--sw-8); }
.comment .body.removed { color: var(--sw-text-muted); font-style: italic; }
.comment .actions { display: flex; align-items: center; gap: var(--sw-16); }
.comment .actions form { margin: 0; }
.like-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--sw-text-muted); font-size: 13px; font-family: 'Geist Mono', monospace;
}
.like-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.like-btn.on { color: var(--sw-orange); }
.like-btn.on svg { fill: var(--sw-orange); stroke: var(--sw-orange); }
.comment .actions a, .comment .actions summary, .comment .actions button:not(.like-btn) {
  background: none; border: none; padding: 0;
  font-size: 13px; color: var(--sw-text-muted); cursor: pointer; list-style: none;
  font-family: inherit;
}
.comment .actions summary::-webkit-details-marker { display: none; }
.comment .actions a:hover, .comment .actions summary:hover, .comment .actions button:not(.like-btn):hover { color: var(--sw-text); }
.reply-form { margin-top: var(--sw-8); }

/* ---------- Quiz ---------- */

.result {
  padding: var(--sw-16); margin-bottom: var(--sw-24);
  border: var(--sw-border) solid var(--sw-line);
  background: var(--sw-night-lift);
}
.result.yes { border-color: var(--sw-mint); }
.result.no  { border-color: var(--sw-orange); }
.result .verdict { font-weight: 700; font-size: 17px; }
.result .solution, .result .note { color: var(--sw-text-muted); font-size: 14px; margin-top: var(--sw-4); }

.q { margin-bottom: var(--sw-32); padding-bottom: var(--sw-24); border-bottom: var(--sw-border) solid var(--sw-line); }
.q:last-of-type { border-bottom: 0; }
.q .crumb {
  font-family: 'Geist Mono', monospace;
  font-size: var(--sw-meta-size); font-weight: var(--sw-meta-weight);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--sw-text-muted); margin-bottom: var(--sw-8);
}
.q .text { font-size: var(--sw-subtitle-size); line-height: var(--sw-subtitle-lh); font-weight: var(--sw-subtitle-weight); margin-bottom: var(--sw-16); }

.answers { display: flex; flex-direction: column; gap: var(--sw-8); }
.answers button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: var(--sw-12) var(--sw-16);
  font: inherit; font-size: 15px; color: var(--sw-text);
  background: var(--sw-night-lift);
  border: var(--sw-border) solid var(--sw-line);
}
.answers button:hover, .answers button:focus-visible { border-color: var(--sw-cobalt); }

.attrib { color: var(--sw-text-muted); font-size: 12px; margin-top: var(--sw-32); line-height: 1.6; }
.attrib a { color: var(--sw-text-muted); }

/* ---------- Feed ---------- */

.feed-body {
  height: 100%;
  overflow: hidden;
  /* Ein Feed wird gewischt, nicht ausgewählt. */
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
}

.feed { --sw-bar-h: 44px; --sw-knowledge-h: 264px; }

.feed .empty { padding: calc(var(--sw-header-h) + var(--sw-32)) var(--sw-16); }

.feed .scroller {
  height: 100dvh;
  padding-top: calc(var(--sw-header-h) + env(safe-area-inset-top));
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.feed .scroller::-webkit-scrollbar { width: 0; height: 0; display: none; }

.topic {
  position: relative;
  height: calc(100dvh - var(--sw-header-h) - env(safe-area-inset-top));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; flex-direction: column;
}

/* Kopfleiste: gehört dem Thema, normaler Fluss, keine Überlagerung. */
.bar {
  flex: 0 0 auto;
  height: var(--sw-bar-h);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 0 calc(var(--sw-16) + env(safe-area-inset-right)) 0 calc(var(--sw-16) + env(safe-area-inset-left));
  background: var(--sw-night);
  border-bottom: var(--sw-border) solid var(--sw-line);
}
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sw-12); }
.crumb-group { display: flex; align-items: center; gap: var(--sw-8); min-width: 0; }
.crumb {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sw-text-muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb .idx { color: var(--sw-text); margin-left: var(--sw-8); }
/* Das Thema eines Artikels, aus Wikimedias eigener Artikel-Taxonomie —
   keine Wikipedia-Kategorie, siehe migrations/0010_categories.sql. */
.cat {
  flex: none;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sw-orange);
  border: var(--sw-border) solid var(--sw-orange);
  border-radius: 999px;
  padding: 2px var(--sw-8);
}
.src-link {
  flex: none;
  color: var(--sw-orange);
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  margin: 0 calc(var(--sw-16) * -1) 0 0;
  padding: 0 var(--sw-16) 0 var(--sw-8);
}
.src-link svg { width: 20px; height: 20px; }
.progress { display: flex; gap: 3px; }
.tick { flex: 1; height: var(--sw-border-progress); background: var(--sw-line); }
.tick.on { background: var(--sw-orange); }

.row {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  min-height: 0;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.row::-webkit-scrollbar { width: 0; height: 0; display: none; }

.card {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Bildfläche: läuft ohne Radius bis an den Rand, keine Farbfilterung. */
.stage { flex: 1 1 auto; min-height: 0; background: var(--sw-night-lift); overflow: hidden; }
.stage-media { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Wissensfläche: fester Night-Block, ersetzt den Verlauf über dem Bild. */
.knowledge {
  flex: 0 0 var(--sw-knowledge-h);
  height: var(--sw-knowledge-h);
  background: var(--sw-night);
  border-top: var(--sw-border) solid var(--sw-line);
  padding: var(--sw-16) calc(var(--sw-16) + env(safe-area-inset-right))
           calc(var(--sw-16) + env(safe-area-inset-bottom)) calc(var(--sw-16) + env(safe-area-inset-left));
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Kopfzeile der Wissensfläche: Meta-Label links, Schiene rechts daneben —
   beide auf einer Zeile, damit die Schiene keine eigene Spalte mehr braucht
   und Titel und Text die volle Breite bekommen. */
.knowledge-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sw-8);
  margin-bottom: var(--sw-8);
}
.knowledge .kicker {
  font-family: 'Geist Mono', monospace;
  font-size: var(--sw-meta-size); font-weight: var(--sw-meta-weight);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sw-orange);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.knowledge .title {
  flex: 0 0 auto;
  font-size: 22px; line-height: 1.25; font-weight: 700;
  margin-bottom: var(--sw-8);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.knowledge .body {
  font-size: 15px; line-height: 1.5; color: #D7D9E2;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}

/* Schiene: Merken, Quellen, Feedback. Klein und neben dem Meta-Label, nicht
   mehr als eigene Spalte über die volle Höhe der Wissensfläche. */
.rail { flex: none; display: flex; align-items: center; gap: var(--sw-16); }
.rail form { margin: 0; }
.rail-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--sw-4); margin: calc(var(--sw-4) * -1);
  background: none; border: none;
  color: var(--sw-text-muted); text-decoration: none; cursor: pointer;
}
.rail-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.rail-btn .count { font-family: 'Geist Mono', monospace; font-size: 11px; }
.rail-btn.like.on { color: var(--sw-orange); }
.rail-btn.like.on svg { fill: var(--sw-orange); stroke: var(--sw-orange); }
.rail-btn.save.on { color: var(--sw-gold); }
.rail-btn.save.on svg { fill: var(--sw-gold); stroke: var(--sw-gold); }

/* Pfeile: bleiben über der Bildfläche stehen, während die Reihe darunter
   waagrecht blättert. Zentriert etwa auf die Bildfläche, nicht die ganze
   Karte, weil die Wissensfläche eine feste Höhe hat. */
.nav {
  position: absolute;
  top: calc(50% - (var(--sw-knowledge-h) / 2));
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: var(--sw-border) solid var(--sw-line);
  background: var(--sw-night);
  color: var(--sw-text);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  padding: 0 0 2px;
}
/* Auf denselben 16 px wie .bar und .knowledge ausgerichtet, sonst stehen
   Kopfleiste, Pfeile und Wissensfläche nicht auf einer Kante. */
.nav.prev { left: calc(var(--sw-16) + env(safe-area-inset-left)); }
.nav.next { right: calc(var(--sw-16) + env(safe-area-inset-right)); }
.nav:hover { border-color: var(--sw-text-muted); }
.nav[hidden] { display: none; }
@media (hover: none) and (pointer: coarse) { .nav { opacity: .55; } }

video.stage-media { object-fit: contain; background: var(--sw-night); }

/* ---------- Quellen (Cloud-Fläche, einzige helle Seite) ---------- */

.sources-body { background: var(--sw-cloud); color: var(--sw-night); }
.sources-body header.app { background: var(--sw-cloud); border-bottom-color: rgba(11,16,32,.14); }
.sources-body .brand, .sources-body .navlink { color: var(--sw-night); }
.sources-body .brand .mark { color: var(--sw-night); }
.sources-body .navlink:hover { color: var(--sw-cobalt); }
.sources-body .who-chip { color: rgba(11,16,32,.6); border-color: rgba(11,16,32,.14); }

.sources-body .page .sub { color: rgba(11,16,32,.6); }

.source-item {
  display: flex; gap: var(--sw-16);
  padding: var(--sw-16) 0;
  border-bottom: var(--sw-border) solid rgba(11,16,32,.14);
}
.source-item:last-of-type { border-bottom: 0; }
.source-item .n {
  flex: none;
  font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 15px;
  color: var(--sw-cobalt);
}
.source-item h2 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.source-item p { font-size: 14px; color: rgba(11,16,32,.7); line-height: 1.5; }

.sources-body .btn:not(.btn-primary) { background: var(--sw-night); color: var(--sw-cloud); border-color: var(--sw-night); }
.sources-body .btn:not(.btn-primary):hover { filter: brightness(1.2); }

.source-actions { display: flex; flex-wrap: wrap; gap: var(--sw-12); margin-top: var(--sw-24); }

/* ---------- Offline ---------- */

.offline-page {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: var(--sw-12);
  padding: var(--sw-32);
}
.offline-page .mark { width: 56px; height: 56px; color: var(--sw-text-muted); }
.offline-page h1 { font-size: var(--sw-subtitle-size); font-weight: var(--sw-subtitle-weight); }
.offline-page p { color: var(--sw-text-muted); max-width: 26rem; }

@media (prefers-reduced-motion: reduce) {
  .feed .scroller, .row { scroll-behavior: auto; }
  .btn, .navlink, .nav { transition: none; }
}