/* =====================================================================
   NAPOLEON — Auswertung („Der Spiegel")
   ---------------------------------------------------------------------
   Eine gelesene Seite. Keine Kachel, kein Raster, keine Fortschritts-
   balken. Bernstein kommt genau einmal je Bogen vor — an der Kante des
   Satzes, den Napoleon spricht (.spricht, aus styles.css). Die Bilder
   darunter sind stumm und tragen nur Datenfarben.

   Es gibt bewusst keine einzige Sonderregel für den hellen Zweig: alles
   hier arbeitet ausschließlich mit den Variablen aus styles.css und mit
   currentColor und kippt deshalb von selbst mit.

   Ziffern stehen überall im Tabellensatz (tabular-nums), Datumsangaben
   kommen fertig deutsch formatiert aus auswertung.js.
   ===================================================================== */

/* Alles, was eine Zahl trägt, im gleichen Satz. */
.sp-bandn, .sp-tn, .sp-wtn, .sp-sdelta, .sp-kz-n, .sp-kz-fuss, .sp-tz,
.sp-fuss, .sp-banddetail, .sp-monat, .sp-tachse{
  font-variant-numeric:tabular-nums;
}

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

.sp-kopf{margin:2px 0 18px}
.sp-kopf h1{
  font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;
  letter-spacing:-.015em;margin:0 0 14px;color:var(--text);
}

.sp-zeit{display:flex;gap:8px;flex-wrap:wrap}
.sp-chip{
  position:relative;flex:0 0 auto;
  min-height:34px;padding:7px 14px;
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--text-3);background:var(--ebene-1);
  border:1px solid var(--kante);border-radius:99px;cursor:pointer;
  transition:color .18s, background .18s, border-color .18s;
}
/* Greifbar 44 px, ohne die Zeile aufzublähen. Achtung, hier lag ein
   Rechenfehler: `inset` zieht vom PADDING-Rand, nicht vom Außenrand. Der
   Chip ist 34 px hoch, davon 2×1 px Rahmen — die Padding-Box misst 32.
   Also 32 + 2×6 = 44 (mit -5px waren es gemessene 42). Bei .sp-weiter
   stimmte dasselbe Rezept, weil das Element keinen Rahmen trägt. */
.sp-chip::before{content:'';position:absolute;inset:-6px;border-radius:99px}
.sp-chip.on{background:var(--ebene-3);color:var(--text);border-color:var(--kante-stark);font-weight:600}
.sp-chip:active{transform:scale(.97)}
.sp-chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--grund),0 0 0 4px var(--ring)}

.sp-auftakt{font-size:19px;margin:6px 0 30px}
.sp-befund{font-size:18px;margin:2px 0 20px}
.sp-warte{opacity:.7}
.sp-fuss-zeile{margin:10px 0 0;line-height:1.5}
.sp-fuss{margin:38px 0 8px;padding-top:16px;border-top:1px solid var(--kante);text-align:center}
.sp-fuss p{margin:0 0 4px}
.sp-leer{margin:0;padding:16px 18px;color:var(--text-2);font-size:14.5px}

/* ------------------ Der Strom der Worte ------------------
   Ein Seismogramm über den ganzen Zeitraum. preserveAspectRatio="none"
   staucht die Fläche auf die Breite des Geräts; damit die Striche dabei
   nicht zu Haaren werden, hält vector-effect ihre Stärke fest. */
.sp-stromfeld{position:relative;margin:4px 0 0}
.sp-strom{display:block;width:100%;height:104px;overflow:visible}
.sp-strom .worte line{stroke:var(--stein);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.85}
.sp-strom .lesen line{stroke:var(--kupfer);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.8}
.sp-strom .basis{stroke:var(--kante-stark);stroke-width:1;vector-effect:non-scaling-stroke}
.sp-strom .raster{stroke:var(--kante);stroke-width:1;vector-effect:non-scaling-stroke}
/* Die Monatsmarken stehen als HTML unter dem Bild, nicht darin: Text im
   gestauchten SVG käme auf dem Handy bei vier Pixeln Höhe heraus. */
.sp-monate{position:relative;height:15px;margin-top:2px}
.sp-monat{
  position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--sans);font-size:10px;letter-spacing:.06em;color:var(--text-3);
}
.sp-monat:first-child{transform:none}

/* -------------------- Das Kartenblatt -------------------- */

.sp-suchlabel{margin-top:4px}
.sp-such{margin-bottom:12px}

.sp-kliste{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
  border:1px solid var(--kante);border-radius:var(--r-l);
  box-shadow:inset 0 1px 0 var(--glanz), var(--heben-1);
  overflow:hidden;
}
.sp-kzeile{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"name n" "bahn bahn" "fuss fuss";
  gap:4px 10px;width:100%;min-height:44px;padding:13px 16px;
  text-align:left;background:none;border:none;border-bottom:1px solid var(--kante);
  color:var(--text);cursor:pointer;font-family:var(--sans);
  transition:background .18s;
}
.sp-kzeile:last-child{border-bottom:none}
.sp-kzeile:active{background:var(--ebene-3)}
.sp-kzeile:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ring)}
.sp-kz-name{
  grid-area:name;font-family:var(--serif);font-size:17.5px;line-height:1.25;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sp-kz-n{grid-area:n;font-size:12px;color:var(--text-3);align-self:center}
.sp-kz-bahn{grid-area:bahn;display:block;color:var(--f,var(--stein))}
.sp-kz-fuss{grid-area:fuss;display:block;margin-top:2px}

/* Die Bahn: WANN eine Karte kam, nicht DASS sie kam. */
.sp-bahn{display:block;width:100%;height:12px;color:inherit}
.sp-bahn rect{fill:currentColor}
.sp-bahn .achse{fill:var(--kante-stark)}
.sp-bahn.gross{height:18px}

/* Der Knopf trägt bewusst kein `wide` mehr (siehe auswertung.js): dessen
   width:100% aus styles.css schlug diese Regel und lief mitsamt der 16 px
   Rand über die Liste hinaus. Hier steht die Breite doppelt gesichert —
   als Flex-Kind dehnt er sich ohnehin, calc hält ihn auch dann im Rahmen,
   wenn die Liste einmal keine Flex-Spalte mehr ist. */
.sp-mehr{margin:10px 16px 14px;width:calc(100% - 32px);align-self:stretch}

/* Treffer der Suche — neutral unterstrichen, nie in seiner Stimme. */
mark.sp-tr{
  background:none;color:var(--text);
  box-shadow:inset 0 -2px 0 var(--stein);border-radius:1px;
}

/* -------- Die Tafel: was an diesen Tagen stand --------
   Liegt über der Reiterleiste (z-index 20) und unter der Körnung (900),
   damit das Material der App auch hier durchscheint. */
.sp-tafel{
  position:fixed;inset:0;z-index:120;
  display:flex;justify-content:center;align-items:flex-end;
  animation:sp-auf .22s var(--feder);
}
/* Der Schleier kommt aus dem Grund der App, nicht aus einem festen Schwarz:
   im hellen Modus deckt er mit Papier ab statt mit Nacht. Als eigene Schicht,
   damit die Deckkraft nicht auf die Tafel darüber durchschlägt. */
.sp-tafel::before{
  content:'';position:absolute;inset:0;
  background:var(--grund);opacity:.74;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
@keyframes sp-auf{from{opacity:0}to{opacity:1}}
.sp-tinnen{
  width:100%;max-width:720px;max-height:94dvh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* Eine Fläche, kein Verlauf: der Kopf klebt oben fest, und über einem
     Verlauf müsste er entweder die Farbe wechseln oder durchscheinen —
     dann liefe der Text darunter als Geisterzeile durch ihn hindurch. */
  background:var(--ebene-1);
  border:1px solid var(--kante-stark);border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl);
  box-shadow:var(--heben-2);
  padding:0 20px calc(var(--safe-b) + 28px);
  position:relative;z-index:1;color:var(--text);
}
.sp-tkopf{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 0 12px;margin-bottom:14px;
  background:var(--ebene-1);border-bottom:1px solid var(--kante);
}
.sp-tart{margin:0 0 3px}
.sp-tname{
  margin:0;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.2;
  letter-spacing:-.012em;color:var(--text);
}
.sp-tzu{flex:0 0 auto;min-width:44px;min-height:44px;font-size:17px}

/* Ein festes Raster statt Flex: „14. Jan. 26" brach sonst auf 375 px mitten
   im Datum um. Zwei Spalten auf dem Handy, vier auf dem Tisch. */
.sp-tz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 16px}
.sp-tz span{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  padding:9px 12px;border:1px solid var(--kante);border-radius:var(--r-m);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;color:var(--text-3);
  text-transform:uppercase;
}
.sp-tz b{
  font-size:15.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sp-tbahn{margin:0 0 16px;color:var(--f,var(--stein))}
.sp-tachse{display:flex;justify-content:space-between;margin:5px 0 0}
.sp-tsatz{font-size:15px;color:var(--text-2);margin:0 0 12px;line-height:1.5}
.sp-th{
  margin:20px 0 10px;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}
.sp-lift{display:flex;flex-direction:column;gap:7px;margin:0 0 14px}
.sp-liftzeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;font-size:14.5px;color:var(--text-2)}
.sp-liftzeile b{font-weight:500;color:var(--text)}

.sp-tag{
  padding:14px 0 4px;border-top:1px solid var(--kante);
}
.sp-tag:first-of-type{border-top:none}
.sp-tdatum{
  margin:0 0 8px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}
.sp-tlabelchen{
  margin:0 0 3px;font-family:var(--sans);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3);
}
.sp-tnotiz{margin:0 0 11px;font-size:15px;color:var(--text-2);line-height:1.55}
.sp-ttext{position:relative;margin:0 0 11px}
.sp-ttext p{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.62;color:var(--text)}
.sp-ttext.gekuerzt p{
  max-height:12.6em;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);
  mask-image:linear-gradient(180deg,#000 72%,transparent);
}
.sp-weiter{
  position:relative;
  margin-top:6px;min-height:34px;padding:6px 0;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--text-2);
  text-decoration:underline;text-underline-offset:3px;
}
/* 34 + 2×5 = 44 greifbar, ohne den Absatz auseinanderzuziehen — dieselbe
   Bauart wie bei .sp-chip und .btn.small. */
.sp-weiter::before{content:'';position:absolute;inset:-5px -8px;border-radius:var(--r-s)}
.sp-tquote{
  margin:0 0 11px;padding:0 0 0 14px;border-left:1px solid var(--kante-stark);
  font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--text-2);
}
.sp-tthemen{margin:0 0 6px;display:flex;flex-wrap:wrap}
.sp-tende{margin-top:18px}

/* ------------------ Die Färbung der Monate ------------------
   Fünf gedämpfte Farben sind auf 13 px nicht auseinanderzuhalten, und
   auf dem iPhone gibt es keinen Tooltip, der es verriete. Deshalb ist
   jede Zeile ein Knopf: antippen schreibt die Farben aus. */
.sp-band{display:flex;flex-direction:column}
.sp-bandzeile{
  display:grid;grid-template-columns:44px 1fr 28px;gap:10px;align-items:center;
  width:100%;min-height:44px;padding:6px 2px;
  background:none;border:none;border-radius:var(--r-s);cursor:pointer;text-align:left;
  color:var(--text-3);font-family:var(--sans);
}
.sp-bandzeile:active{background:var(--ebene-2)}
.sp-bandzeile:focus-visible{outline:none;box-shadow:0 0 0 2px var(--grund),0 0 0 4px var(--ring)}
.sp-bandlabel{font-size:11px;letter-spacing:.05em;color:var(--text-3)}
.sp-bandbar{
  display:flex;height:14px;border-radius:4px;overflow:hidden;
  background:var(--mulde);box-shadow:var(--senken);
}
.sp-bandn{font-size:11px;color:var(--text-3);text-align:right}
.sp-seg{display:block;height:100%;background:var(--f)}
.sp-seg + .sp-seg{box-shadow:inset 1px 0 0 var(--grund)}
.sp-banddetail{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  margin:0 0 8px 54px;padding:2px 0 8px;
  font-family:var(--sans);font-size:12px;color:var(--text-2);
}
.sp-banddetail[hidden]{display:none}
.sp-bd{display:flex;align-items:center;gap:6px}
.sp-bd i{width:8px;height:8px;border-radius:2.5px;background:var(--f);flex:0 0 8px}
.sp-legende{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:12px;font-size:11.5px;color:var(--text-2)}
.sp-lg{display:flex;align-items:center;gap:6px}
.sp-lg i{width:8px;height:8px;border-radius:2.5px;background:var(--f);flex:0 0 8px}

/* -------------------- Themen, die tragen -------------------- */
.sp-themen{display:flex;flex-direction:column;gap:11px}
.sp-thema{display:grid;grid-template-columns:minmax(74px,30%) 1fr auto auto;gap:10px;align-items:center}
.sp-tlabel{font-size:14.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-spark{display:block;width:100%;height:22px;color:var(--salbei)}
.sp-spark .li{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.sp-spark .fl{fill:currentColor;opacity:.13}
.sp-tn{font-size:12.5px;color:var(--text-3)}
.sp-tn i{font-style:normal;opacity:.6}
.sp-tm{min-width:52px;text-align:right}
@media (max-width:400px){
  .sp-thema{grid-template-columns:minmax(70px,32%) 1fr auto}
  .sp-tm{display:none}
}

/* ------------------ Wann du wortreich bist ------------------
   Ein Punkt je geschriebenem Tag. Bewusst keine Balken: Balken laden zum
   Vergleichen ein, Punkte zeigen nur, wie es verteilt liegt. */
.sp-wt{display:flex;flex-direction:column;gap:3px}
.sp-wtzeile{display:grid;grid-template-columns:26px 1fr 38px;gap:10px;align-items:center;min-height:26px}
.sp-wtlabel{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--text-3)}
.sp-wtachse{
  position:relative;height:22px;border-radius:6px;
  background:var(--mulde);box-shadow:var(--senken);
}
.sp-wtachse i{
  position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--schiefer);opacity:.55;
}
.sp-wtachse b{
  position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;border-radius:2px;
  background:var(--stein);
}
.sp-wtn{text-align:right}

/* ------------------ Wohin die Stunden gehen ------------------
   Beide Marken in derselben Farbe: die Strecke zeigt eine Richtung,
   keine Bewertung. Grün-gegen-Rot hätte hier nichts verloren. */
.sp-slope{display:flex;flex-direction:column;gap:9px}
.sp-szeile{display:grid;grid-template-columns:minmax(70px,28%) 1fr auto;gap:10px;align-items:center}
.sp-slabel{font-size:14px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-strecke{
  position:relative;height:18px;border-radius:6px;
  background:var(--mulde);box-shadow:var(--senken);
}
.sp-jetzt{
  position:absolute;left:0;top:0;bottom:0;border-radius:6px;
  background:var(--stein);opacity:.42;
}
.sp-vorher{
  position:absolute;top:2px;bottom:2px;width:2px;margin-left:-1px;border-radius:2px;
  background:var(--stein);
}
.sp-sdelta{min-width:62px;text-align:right;color:var(--text-2)}
.sp-sdelta i{font-style:normal;color:var(--text-3);margin-left:3px}
.sp-pvorher-l{display:inline-block;width:2px;height:10px;border-radius:2px;
  background:var(--stein);vertical-align:-1px;margin:0 2px}
/* Zwei Zeichen hinter dem Kategoriennamen, zwei Bedeutungen:
   ◦ = später angelegt als die erste Zeit-Kategorie (.sp-jung)
   □ = nicht mehr in der Liste, Stunden zählen weiter (.sp-still)
   Sie sehen gleich aus, gehören aber nicht zusammen — eigene Klasse, damit
   das eine sich ändern lässt, ohne das andere mitzunehmen. Beide bleiben
   Stein, nie Bernstein: sie erklären die Tabelle, sie sprechen nicht. */
.sp-jung{font-style:normal;color:var(--text-3);margin-left:4px}
.sp-still{font-style:normal;color:var(--text-3);margin-left:4px}

/* ---------------------- Deine Wörter ---------------------- */
.sp-feld{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:18px 20px;border-radius:var(--r-l);
  background:linear-gradient(180deg,var(--ebene-2),var(--ebene-1));
  border:1px solid var(--kante);box-shadow:inset 0 1px 0 var(--glanz), var(--heben-1);
}
.sp-wort{font-family:var(--sans);line-height:1.25;color:var(--text)}
.sp-listen{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}
.sp-liste{flex:1 1 160px;padding:13px 16px;border:1px solid var(--kante);border-radius:var(--r-m)}
.sp-liste p.tiny{margin:0 0 6px}
.sp-liste p:last-child{margin:0;font-size:14.5px;color:var(--text-2);line-height:1.5}

/* ---------------------- Größere Geräte ---------------------- */
@media (min-width:700px){
  .sp-kopf h1{font-size:36px}
  .sp-auftakt{font-size:21px}
  .sp-befund{font-size:19.5px}
  .sp-strom{height:132px}
  .sp-tafel{align-items:center}
  .sp-tz{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sp-tinnen{max-height:86dvh;border-radius:var(--r-xl);padding-bottom:28px}
}

@media (prefers-reduced-motion:reduce){
  .sp-tafel{animation:none}
}