/*
  valentin-pellio.de — ein Logbuch.

  Die Gestaltung folgt dem Kontobuch, nicht dem Magazin: links eine
  schmale Spalte für die harten Daten (Nummer, Datum, Uhrzeit, Tag),
  rechts der Eintrag. Dazwischen läuft eine Linie durch das ganze
  Blatt, wie die vorgedruckte Spalte in einem Journal.

  SCHRIFTSYSTEM — feste Rollen:
    IBM Plex Mono   Nummer, Datum, Uhrzeit, Überschriften, Navigation
    Public Sans     Lesetext
  Die Überschrift steht bewusst in der Mono: In einem Logbuch gehört
  sie zur Erfassung, nicht zur Erzählung — sie ist mit der Nummer
  verwandt, nicht mit dem Text. Der Sprung von der Mono in die Sans
  markiert genau die Kante zwischen Verwaltung und Inhalt.

  ZIFFERN — im Lesetext Mediävalziffern, damit Zahlen im Satz
  mitlaufen; in der Datenspalte Tabellenziffern, damit sie fluchten.

  FARBE — Sonnengelb färbt Schrift und Linien. Keine Flächen, nirgends.
  Einzige Ausnahme ist die Textauswahl, weil markierter Text ohne
  Hintergrund nicht als markiert zu erkennen wäre.

  Zwei Stärken, weil ein Ton allein nicht beides kann:

    --sonne       das volle Gelb. Linien und Schrift auf dunklem Grund.
    --sonne-text  dasselbe Gelb, so weit abgedunkelt, dass es als
                  Schrift auf hellem Papier lesbar bleibt (4,6:1 statt
                  1,4:1). Im Dunkelmodus entfällt die Abdunklung —
                  dort trägt das volle Gelb selbst.

  Wo es erscheint:
    berührt   Schrift färbt sich, Unterstreichung wird volles Gelb
    fokussiert Rahmen in Tinte, Schrift färbt sich
    hier      die Nummer des Blattes, auf dem man gerade steht — das
              einzige Gelb, das ohne Zutun dasteht
*/

:root {
  --papier:   #F2F1EC;
  --tinte:    #191917;
  --leise:    #78756D;
  --linie:    #D9D7CF;

  --sonne:      #FFC61A;
  --sonne-text: #8A6800;
  --marker:     rgba(255, 198, 26, 0.62);
  --auf-sonne:  #191917;

  --spalte:  7rem;    /* Breite der Datenspalte */
  --rinne:   2.75rem; /* Abstand Datenspalte zu Text */
  --satz:    34rem;   /* Satzbreite des Lesetextes */
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141413;
    --tinte:  #E7E5DD;
    --leise:  #858177;
    --linie:  #2B2A26;
    /* Auf dunklem Grund trägt das volle Gelb auch als Schrift. */
    --sonne-text: #FFC61A;
    --marker: rgba(255, 198, 26, 0.82);
  }
}

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

html { background: var(--papier); -webkit-text-size-adjust: 100%; }

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  font-size: 1.04rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--marker); color: var(--auf-sonne); }

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 2px;
  color: var(--sonne-text);
}

.lb-blatt {
  max-width: calc(var(--spalte) + var(--rinne) + var(--satz));
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

.lb-sprung { position: absolute; left: -9999px; }
.lb-sprung:focus {
  left: 1.5rem; top: 1rem; z-index: 10;
  background: var(--tinte); color: var(--papier);
  padding: 0.5rem 0.9rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
}

/* ── Kopf: das Deckblatt ─────────────────────────────────────── */

.lb-kopf {
  display: grid;
  grid-template-columns: var(--spalte) minmax(0, 1fr);
  column-gap: var(--rinne);
  align-items: baseline;
  padding: 4rem 0 2.75rem;
}

.lb-kopf-gattung {
  grid-column: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--leise);
}

.lb-kopf-name {
  grid-column: 2; grid-row: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.02rem; font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--tinte); text-decoration: none;
}
.lb-kopf-name:hover { color: var(--sonne-text); }

.lb-bestand {
  grid-column: 2; grid-row: 2;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem; font-variant-numeric: tabular-nums;
  color: var(--leise);
  margin-top: 0.3rem;
}

/* ── Das Blattraster ─────────────────────────────────────────── */

main {
  position: relative;
  border-top: 1px solid var(--linie);
  padding-top: 2.5rem;
}

/* Die durchlaufende Spaltenlinie — das eigentliche Logbuch-Merkmal. */
main::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--spalte) + var(--rinne) / 2);
  width: 1px;
  background: var(--linie);
}

.lb-eintrag {
  display: grid;
  grid-template-columns: var(--spalte) minmax(0, 1fr);
  column-gap: var(--rinne);
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}

/* Trennung nur im Textfeld, nicht über der Datenspalte — so bleibt
   das Raster ein Raster und wird keine Kachelreihe. */
.lb-eintrag + .lb-eintrag { position: relative; }
.lb-eintrag + .lb-eintrag::before {
  content: '';
  position: absolute;
  top: -3rem;
  left: calc(var(--spalte) + var(--rinne));
  right: 0;
  height: 1px;
  background: var(--linie);
}

.lb-eintrag:last-child { margin-bottom: 0; padding-bottom: 1rem; }
.lb-eintrag--einzeln { padding-bottom: 1.5rem; margin-bottom: 0; }

/* ── Datenspalte ─────────────────────────────────────────────── */

.lb-marginalie {
  position: sticky;
  top: 1.75rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  line-height: 1.55;
  padding-top: 0.3rem;
}

.lb-nummer {
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tinte);
  text-decoration: none;
  margin-bottom: 0.35rem;
}
a.lb-nummer:hover { color: var(--sonne-text); }

/* Das Blatt, auf dem man gerade ist — das einzige Gelb, das von allein
   dasteht, ohne dass man etwas anfasst. Wie der Daumen, mit dem man
   die Seite hält. */
.lb-nummer--hier { color: var(--sonne-text); }

.lb-wert { color: var(--leise); }
.lb-wert--leise { opacity: 0.72; }

/* ── Eintrag ─────────────────────────────────────────────────── */

.lb-korpus { min-width: 0; }

.lb-titel {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.24rem; font-weight: 500;
  line-height: 1.38; letter-spacing: -0.014em;
  text-wrap: balance;
  margin-bottom: 0.9rem;
}
.lb-titel a { color: inherit; text-decoration: none; }
.lb-titel a:hover { color: var(--sonne-text); }
.lb-titel--datum { font-weight: 400; color: var(--leise); }

.lb-text {
  hyphens: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.lb-text p + p { margin-top: 1.1rem; }
.lb-text strong { font-weight: 600; }

.lb-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--linie);
  overflow-wrap: anywhere;
}
/* Berührt: die Schrift färbt sich, und die Unterstreichung nimmt das
   volle Gelb an — dort darf es knallen, weil eine Linie keinen
   Lesekontrast braucht. */
.lb-text a:hover {
  color: var(--sonne-text);
  text-decoration-color: var(--sonne);
  text-decoration-thickness: 2px;
}

.lb-text blockquote {
  margin: 1.3rem 0;
  padding-left: 1.35rem;
  border-left: 1px solid var(--linie);
  font-style: italic;
  color: var(--leise);
}

/* ── Blättern ────────────────────────────────────────────────── */

.lb-blaettern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}

.lb-blaettern-ziel {
  display: flex; flex-direction: column; gap: 0.15rem;
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  align-self: start;
}
.lb-blaettern-ziel--rechts { text-align: right; justify-self: end; }

.lb-blaettern-marke {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--leise);
}
.lb-blaettern-nr { font-size: 0.82rem; font-weight: 500; color: var(--tinte); }

.lb-blaettern-ziel:hover .lb-blaettern-nr,
.lb-blaettern-ziel:hover .lb-blaettern-marke { color: var(--sonne-text); }

/* ── Kleinkram ───────────────────────────────────────────────── */

.lb-leer {
  grid-column: 1 / -1;
  color: var(--leise); font-style: italic;
}

.lb-zurueck {
  margin-top: 2rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
}
.lb-zurueck a {
  color: var(--leise);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 1px;
}
.lb-zurueck a:hover { color: var(--sonne-text); border-color: var(--sonne); }

/* ── Fuß ─────────────────────────────────────────────────────── */

.lb-fuss {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--leise);
}
.lb-fuss a { color: var(--leise); text-decoration: none; }
.lb-fuss a:hover { color: var(--sonne-text); }

/* ── Schmale Bildschirme ─────────────────────────────────────── */
/* Die Datenspalte kippt über den Text und wird zur Kopfzeile des
   Eintrags — dieselben Angaben, nur nebeneinander statt untereinander. */

@media (max-width: 44rem) {
  :root { --spalte: 0; --rinne: 0; }

  body { font-size: 1rem; }
  .lb-blatt { padding: 0 1.25rem 3.5rem; }

  .lb-kopf { display: block; padding: 2.75rem 0 2rem; }
  .lb-kopf-gattung { margin-bottom: 0.15rem; }

  main::before { display: none; }
  main { padding-top: 1.75rem; }

  .lb-eintrag { display: block; padding-bottom: 2.25rem; margin-bottom: 2.25rem; }
  .lb-eintrag + .lb-eintrag::before { left: 0; top: -2.25rem; }

  .lb-marginalie {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.75rem;
    padding-top: 0;
    margin-bottom: 0.6rem;
  }
  .lb-nummer { margin-bottom: 0; }
  .lb-titel { font-size: 1.14rem; }
  .lb-wert--leise { display: none; } /* Wochentag entfällt, Platz geht vor */
}