/* =========================================================
   Life Archive – Dokument-Kern

   Alles, was zum Block-Editor gehört: Blöcke, Gutter,
   Slash-Menü, Leseansicht sowie die Auswahl- und Rückfrage-
   Popups. Diese Datei gehört keiner Umgebung – Journal, Notes
   und alles Weitere benutzen dieselben Klassen.

   Gefärbt wird ausschließlich über zwei Variablen, die die
   Umgebung setzt (.jr gelb, .ar grau):
     --accent-app   Flächen, Marken, Text-Akzent
     --accent-deep  Rahmen, Linien, Knöpfe
   ========================================================= */

/* =========================================================
   Auswahlzeilen und Rückfragen
   ========================================================= */

.doc-picks { display: grid; gap: 8px; }

.doc-picks--scroll {
  max-height: 52dvh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.doc-pick {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--field-bg);
  text-align: start;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.doc-pick:hover { background: var(--g-42); }
.doc-pick:active { transform: scale(.98); }

.doc-pick__mark {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  background: var(--accent-app);
}

.doc-pick__body { display: grid; gap: 2px; min-width: 0; }

.doc-pick__name {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-pick__meta {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ja/Nein-Rückfrage */

.doc-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.doc-ask__name { text-align: center; color: var(--accent-app); font-size: 15px; }

.doc-ask__btn {
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--accent-deep);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.doc-ask__btn:hover { filter: brightness(1.08); }
.doc-ask__btn:active { transform: scale(.96); }

.doc-ask__btn--ghost {
  background: transparent;
  border: 1.5px solid var(--line-strong);
  color: var(--text-dim);
}

.doc-ask__btn--ghost:hover { background: rgba(var(--o), .06); }

/* Löschen bleibt rot – unabhängig vom Akzent der Umgebung. */
.doc-ask__btn--danger { background: #f26c6c; color: #1a0d0d; }

/* =========================================================
   Editor
   ========================================================= */

.doc-editor { position: relative; }

/* Links bleibt Platz für „+" und Griff – wie in Notion steht der Text
   eingerückt und die Knöpfe liegen daneben im Rand. */
.doc-body {
  display: grid;
  gap: 2px;
  padding-inline-start: 42px;
}

/* Der Rumpf ist selbst das Schreibfeld (siehe app/doc/editor.js,
   „Ein Schreibfeld"). Nur so läuft die Auswahl über Blockgrenzen –
   am Telefon der Griff, am Rechner die Maus. Er darf dabei nichts
   anzeigen: der Rahmen des Fokus gehört der Zeile, nicht der Seite. */
.doc-body[contenteditable] { outline: none; }
.doc-body[contenteditable]:focus,
.doc-body[contenteditable]:focus-visible { outline: none; }

/* Fläche unter dem letzten Block – ein Klick hängt einen Absatz an. */
.doc-pad { min-height: 140px; cursor: text; }

.doc-b { position: relative; }

/* ---------- Knöpfe links neben der Zeile ------------------------------------- */

.doc-gutter {
  position: absolute;
  display: flex;
  gap: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.doc-gutter.is-on { opacity: 1; pointer-events: auto; }

/* Eckig, nicht abgerundet: das ist ein Knopf, und Knöpfe sind in
   dieser App Rechtecke. Unter dreißig Pixeln fällt auch der Eckschnitt
   weg – er liefe sonst quer durch das Zeichen. */
.doc-gutter__btn {
  width: 20px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 0;
  transition: background-color var(--dur) var(--ease-out);
}

.doc-gutter__btn:hover { background: rgba(var(--o), .09); }

.doc-gutter__grip { cursor: grab; touch-action: none; }
.doc-gutter__grip:active { cursor: grabbing; }

.doc-gutter__icon {
  width: 14px;
  height: 14px;
  background: var(--text-faint);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  transition: background-color var(--dur) var(--ease-out);
}

.doc-gutter__btn:hover .doc-gutter__icon { background: var(--accent-app); }

/* ---------- Der feste Griff am Finger ------------------------------------------

   Der schwebende Gutter darüber ist eine Maus-Sache: er folgt dem
   Zeiger und ist weg, sobald man ihn nicht braucht. Am Finger gibt es
   keinen Zeiger, dem er folgen könnte – dort steht in jeder Zeile ein
   eigener Griff, dauerhaft, in der Spur, die --gutter-w links ohnehin
   freihält (app/doc/editor.js, syncGrips).

   Er wird nur auf Touch-Geräten überhaupt erzeugt; es braucht deshalb
   keine Media Query, die ihn wieder wegnimmt. */

.doc-hold {
  position: absolute;
  top: 0;
  /* An der Spur des Dokuments verankert, nicht am Block: eine
     eingerückte Zeile wandert über margin-left nach rechts (--lvl),
     ihr Griff soll das nicht mittun – sonst stünde er auf Stufe vier
     mitten im Text. */
  inset-inline-start: calc(-34px - var(--lvl, 0) * 22px);
  z-index: 1;

  width: 34px;
  height: 100%;
  min-height: 36px;

  /* Oben, an der ersten Zeile – nicht in der Mitte des Blocks. Eine
     Aufgabe mit Marken und Link ist drei Zeilen hoch; mittig stünde
     der Griff dann neben den Marken statt neben dem Satz.
     --hold-y setzt app/doc/editor.js (placeGrips) je Block. */
  display: grid;
  place-items: start center;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: grab;
  /* Sonst nähme der Browser die Geste als Scrollen und der Griff
     bekäme nie ein pointermove zu sehen. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.doc-hold__icon {
  width: 15px;
  height: 15px;
  margin-top: calc(var(--hold-y, 18px) - 7.5px);
  /* --text-faint war 2,4:1 und damit unauffindbar. --text-muted misst
     5,9:1 gegen den Grund – sichtbar, ohne der Zeile die Schau zu
     stehlen, um die es hier eigentlich geht. */
  background: var(--text-muted);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.doc-hold:active { cursor: grabbing; }
.doc-hold:active .doc-hold__icon {
  background: var(--accent-app);
  transform: scale(1.15);
}

/* Die Zeile, die gerade am Griff hängt, tritt zurück. */
.doc-b.is-moving { opacity: .4; }

/* Zielmarke beim Verschieben */
.doc-drop {
  position: absolute;
  inset-inline-start: 42px;
  inset-inline-end: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-app);
  opacity: 0;
  pointer-events: none;
  transition: top 90ms linear, opacity var(--dur-fast) var(--ease-out);
}

.doc-drop.is-on { opacity: 1; }

.doc-b__text {
  /* Der Lesesatz des Blockkerns. Steht hier und nicht am Behälter,
     damit die Blockschrift aus dem Blockmenü
     (.doc-b[data-font], weiter unten) sie ausstechen kann. */
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  min-height: 1.6em;
  padding: 3px 2px;
  border-radius: 5px;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.doc-b__text:focus { background: rgba(var(--o), .03); }

/* Platzhalter: das Attribut setzt der Editor, sobald das Feld leer ist. */
.doc-b__text[data-blank]::before {
  content: attr(data-ph);
  color: var(--text-faint);
  pointer-events: none;
}

/* nur im fokussierten Block, sonst flimmert die ganze Seite voller Hinweise */
.doc-b__text[data-blank]:not(:focus)::before { opacity: 0; }

/* Den Fokus hat seit dem einen Schreibfeld der Rumpf, nie die Zeile –
   die Regel darüber ließ den Hinweis deshalb nie mehr sehen. Die Zeile
   mit der Marke trägt `is-caret` (app/doc/editor.js, markCaretLine). */
.doc-body:focus .doc-b__text.is-caret[data-blank]::before { opacity: 1; }

/* Ein Absatz lässt sich einrücken wie eine Liste (Tab, Shift+Tab). */
.doc-b--text[data-indent] { margin-inline-start: calc(var(--lvl, 0) * 22px); }

/* Eine leere Aufgabe zeigt ihren Hinweis auch unfokussiert: neben einem
   Kästchen ohne Text sähe die Zeile sonst aus wie ein Fehler.

   Der Textblock stand hier einmal mit – damals war er selbst ein
   einzelnes Textfeld und der Hinweis sein Inhalt. Seit er ein Rahmen
   um Blöcke ist, träfe die Regel jede leere Zeile darin, und im Kasten
   stünde dauerhaft „Write something…". Sie gilt deshalb nur noch für
   das, wofür sie gedacht war. */
.doc-b--todo .doc-b__text[data-blank]:not(:focus)::before { opacity: .55; }

/* Überschriften – absteigende Größe */
.doc-b--h1 .doc-b__text { font-size: clamp(24px, 6.4vw, 28px); font-weight: 600; margin-top: 12px; }
.doc-b--h2 .doc-b__text { font-size: clamp(20px, 5.4vw, 23px); font-weight: 600; margin-top: 10px; }
.doc-b--h3 .doc-b__text { font-size: clamp(17px, 4.6vw, 19px); font-weight: 600; margin-top: 8px; }
.doc-b--h4 .doc-b__text { font-size: 16px; font-weight: 600; letter-spacing: .02em; margin-top: 6px; }

/* --- Linie unter einer Überschrift (Blockmenü → „Rule below") ---------

   Der Strich, den man in einem Text von Hand zöge, um einen Abschnitt
   abzusetzen. Er hängt am Block und nicht am Textfeld: so läuft er über
   die volle Breite und nicht nur so weit wie die Wörter.

   `padding-bottom` gehört dazu, sonst klebte der Strich an der
   Unterlänge des „g". Die Farbe ist die des Textes, ein Fünftel
   deckend – eine Linie, die gliedert, muss nicht rufen. */
.doc-b[data-headrule] {
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--b-color, var(--text)) 22%, transparent);
  margin-bottom: 6px;
}

/* Trennlinie: zentriert, ca. 90 % Breite, in Akzentfarbe */
.doc-b--divider { display: grid; place-items: center; padding: 12px 0; }

.doc-rule {
  display: block;
  width: 90%;
  height: 1.5px;
  /* Zwei Pixel Radius auf anderthalb Pixel Höhe waren nie zu sehen und
     standen trotzdem gegen die Regel. Eine Linie hat keine Ecken. */
  border-radius: 0;
  background: var(--accent-app);
}

/* --- Art der Linie (Blockmenü → „Rule") -------------------------------

   Vier Möglichkeiten an derselben Stelle. Gepunktet und gestrichelt
   werden zum Rand statt zur Fläche – nur so kann der Browser sie
   überhaupt unterbrechen. „Space" ist die stillste: eine Pause, die
   man sieht, ohne dass ein Strich sie behauptet. */

.doc-b--divider[data-rule="dotted"] .doc-rule,
.doc-b--divider[data-rule="dashed"] .doc-rule {
  height: 0;
  background: none;
  border-top-width: 1.5px;
  border-top-color: var(--accent-app);
}

.doc-b--divider[data-rule="dotted"] .doc-rule { border-top-style: dotted; }
.doc-b--divider[data-rule="dashed"] .doc-rule { border-top-style: dashed; }
.doc-b--divider[data-rule="thick"]  .doc-rule { height: 3px; width: 46%; }

.doc-b--divider[data-rule="space"] { padding: 22px 0; }
.doc-b--divider[data-rule="space"] .doc-rule { background: none; height: 0; }

/* ---------- Listen ------------------------------------------------------------ */

.doc-b--bullet,
.doc-b--num {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
}

/* Der Punkt einer Aufzählung war ein Kreis – das einzige Runde, das
   sich hier gehalten hatte. Jetzt ist er ein Sechseck mit Spitze oben,
   dasselbe Zeichen wie der Punkt im Kalenderband. Sechs Pixel klein,
   aber die kleinen Dinge sind genau die, an denen man sieht, ob eine
   Form eine Sprache ist oder ein Zufall. */
.doc-bullet {
  width: 6px;
  height: 7px;
  margin: 11px 0 0 6px;
  border-radius: 0;
  clip-path: var(--hex-clip-pointy);
  background: var(--accent-app);
}

/* --- Zeichen der Aufzählung (Blockmenü → „List mark") ------------------

   Vier Zeichen, jedes an derselben Stelle und in derselben Größe. Sie
   ändern nur, was dort steht, nicht wie die Zeile gebaut ist – deshalb
   trägt der Block ein Attribut und nicht eine andere Vorlage. */

.doc-b--bullet[data-mark] .doc-bullet {
  clip-path: none;
  background: none;
  width: 10px;
  height: auto;
  margin: 4px 0 0 4px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--accent-app);
}

.doc-b--bullet[data-mark="dash"]   .doc-bullet::before { content: "–"; }
.doc-b--bullet[data-mark="tri"]    .doc-bullet::before { content: "▸"; }

/* Hohl und Quadrat bleiben Flächen, keine Schriftzeichen – ein „□" aus
   der Schrift säße auf einer anderen Grundlinie als der Punkt daneben. */
.doc-b--bullet[data-mark="ring"] .doc-bullet,
.doc-b--bullet[data-mark="square"] .doc-bullet {
  position: relative;
  width: 7px;
  height: 8px;
  margin: 11px 0 0 6px;
  background: var(--accent-app);
}

.doc-b--bullet[data-mark="ring"] .doc-bullet { clip-path: var(--hex-clip-pointy); }

/* Hohl heißt: dieselbe Form noch einmal, eineinhalb Pixel kleiner, in
   der Farbe des Grundes. Ein `box-shadow: inset` täte es nicht – den
   schneidet clip-path an beiden Diagonalen mit weg. */
.doc-b--bullet[data-mark="ring"] .doc-bullet::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: var(--hex-clip-pointy);
  background: var(--bg);
}

.doc-b--bullet[data-mark="square"] .doc-bullet {
  height: 7px;
  clip-path: none;
}

/* Nummerierung über einen CSS-Zähler: jeder Block, der keine Nummer
   ist, setzt ihn zurück – dadurch beginnt jede Liste wieder bei 1. */
.doc-body, .doc-read { counter-reset: doc-num; }
.doc-b:not(.doc-b--num) { counter-reset: doc-num; }
.doc-b--num { counter-increment: doc-num; }

.doc-num {
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  text-align: end;
  padding-inline-end: 6px;
  color: var(--accent-app);
}

.doc-num::before { content: counter(doc-num) "."; }

/* --- Zählweise (Blockmenü → „Numbering") -------------------------------

   Derselbe Zähler, nur anders geschrieben. `counter()` kennt die
   Formate selbst – es braucht dafür keine Zeile JavaScript und keine
   zweite Vorlage. */
.doc-b--num[data-num="alpha"] .doc-num::before {
  content: counter(doc-num, lower-alpha) ".";
}
.doc-b--num[data-num="roman"] .doc-num::before {
  content: counter(doc-num, lower-roman) ".";
}
.doc-b--num[data-num="paren"] .doc-num::before {
  content: counter(doc-num) ")";
}

/* To-do */
.doc-b--todo {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

/* Einrückung per Tab: je Stufe eine Breite nach rechts, der Punkt
   wird blasser – so bleibt die Gliederung auf einen Blick lesbar. */
.doc-b--bullet,
.doc-b--num,
.doc-b--todo { margin-inline-start: calc(var(--lvl, 0) * 22px); }

.doc-b--bullet .doc-bullet { opacity: calc(1 - var(--lvl, 0) * .2); }
.doc-b--num[data-indent] .doc-num { opacity: .7; }

/* Ab der zweiten Stufe ein hohler Punkt, wie in Word. Hohl über eine
   zweite Lage, nicht über `box-shadow: inset` – den schnitte das
   clip-path des Sechsecks an den Diagonalen mit weg und ließe zwei
   Splitter stehen. Ein ausdrücklich gewähltes Zeichen (data-mark)
   sticht die Stufe aus: wer sich für ein Zeichen entschieden hat,
   soll es auf jeder Stufe wiederfinden. */
.doc-b--bullet[data-indent]:not([data-mark]) .doc-bullet { position: relative; }

.doc-b--bullet[data-indent]:not([data-mark]) .doc-bullet::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: var(--hex-clip-pointy);
  background: var(--bg);
}

.doc-b--todo[data-indent] .doc-check {
  border-color: color-mix(in srgb, var(--accent-deep) 62%, transparent);
}

.doc-todo__body { display: grid; gap: 6px; min-width: 0; }

/* Eckig. Ein Häkchenfeld ist ein Bedienelement, und Bedienelemente
   sind in dieser App Rechtecke; bei neunzehn Pixeln fällt auch der
   Eckschnitt weg, er liefe quer durch den Haken. */
.doc-check {
  width: 19px;
  height: 19px;
  margin-top: 7px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 0;
  background: transparent;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.doc-check:active { transform: scale(.88); }

/* Zustand 1 – Haken aus zwei Linien, ohne zusätzliches Icon */
.doc-check.is-on { background: var(--accent-app); position: relative; }
/* 19 px gezeichnet, aber 31 px zum Treffen (WCAG 2.5.8, 10.10.2026). */
.doc-check { position: relative; }
.doc-check::before { content: ''; position: absolute; inset: -6px; }

.doc-check.is-on::after {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.doc-b--todo .doc-check.is-on ~ .doc-todo__body .doc-b__text { color: var(--text-faint); }

/* =========================================================
   Aufgabe

   Dasselbe To-do, nur in einer Aufgabenliste (app/notes). Der Text
   bleibt die Hauptsache und behält seine Zeile; was an der Aufgabe
   hängt, steht darunter und kleiner: Dauer, Frist, Wiederholung,
   Verknüpfung. Die Beschreibung liegt hinter einem Wort und kommt
   erst auf Klick – eine Liste soll eine Liste bleiben.

   Im Journal gibt es nichts davon: dort wird ohne `tasks: true`
   gezeichnet und keine dieser Klassen ausgegeben.
   ========================================================= */

/* Eine Aufgabe ist eine Einheit, keine Zeile.

   Vorher lief eine Liste zusammen: Titel, darunter die Marken, darunter
   der nächste Titel – bei drei Aufgaben mit Chips stand ein Feld aus
   zwölf Elementen da, und kein Auge fand die Grenze dazwischen. Jede
   Aufgabe bekommt deshalb Luft und einen Haarstrich darunter.

   Der Strich sitzt am Block und nicht zwischen den Blöcken, weil
   zwischen zwei Aufgaben auch eine Überschrift oder eine Linie stehen
   kann – ein `+`-Nachbarselektor hinge dann in der Luft. Die letzte
   Aufgabe vor einem anderen Block behält ihn trotzdem: er trennt sie
   von dem, was danach kommt, und das ist genau sein Zweck. */
.doc-b--todo:has(.doc-task) {
  padding: 7px 0 9px;
  border-bottom: 1px solid var(--line);
}

/* Ohne :has() (ältere Browser) bleibt die Liste die alte – lesbar,
   nur ohne die Trennung. Kein Grund, dort etwas kaputtzumachen. */
@supports not selector(:has(*)) {
  .doc-b--todo { padding: 0; border-bottom: 0; }
}

/* Die letzte Aufgabe einer Gruppe braucht keinen Strich nach unten –
   darunter kommt die Zwischenzeile („Finished (n)"), und die bringt
   ihre eigene mit. Zwei Linien übereinander lesen als Fehler, nicht
   als Trennung. */
.doc-b--todo:has(.doc-task):last-child,
.doc-b--todo:has(.doc-task):has(+ [data-task-head]) { border-bottom: 0; }

.doc-task { gap: 5px; }

/* Text und Stift in einer Zeile. `baseline` wäre hier falsch: der
   Stift richtet sich nach der ersten Zeile des Textes, nicht nach
   seiner Schriftlinie – bei zwei Zeilen rutschte er sonst mit. */
.doc-task__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
}

/* Ein Knopf ist ein Rechteck – kein Eckschnitt, kein Radius.
   Er steht immer da, nicht erst beim Überfahren: auf dem Handy gibt
   es kein Überfahren, und ein Griff, den man nicht sieht, ist keiner.
   Zurückgenommen ist er trotzdem – die Aufgabe ist die Aussage. */
.doc-task__edit {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-subtle);
  opacity: .75;
  transition: opacity var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.doc-task__edit svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doc-task__edit:hover {
  opacity: 1;
  background: var(--surface-2);
  color: var(--text);
}

.doc-task__edit:focus-visible { opacity: 1; color: var(--text); }
.doc-task__edit:active { transform: scale(.9); }

/* ---------- Marken unter dem Text ---------------------------------------- */

.doc-task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}

/* Dieselbe geschnittene Fläche wie an einer Notizkarte (--cut-clip).
   Ein Rahmen überlebt den Schnitt nicht, die Farbe steckt deshalb in
   der Fläche – siehe die Begründung bei .nt-chip in notes.css. */
.doc-task__chip {
  --cut: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
  font-size: max(var(--fs-floor), 11px);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--text-muted);
  white-space: nowrap;
}

.doc-task__glyph {
  width: 11px;
  height: 11px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}

/* Eine Wiederholung darf länger werden („Every 2 weeks on Mon, Thu“)
   und bricht dann lieber um, als die Zeile zu sprengen. */
.doc-task__chip--repeat { white-space: normal; }

/* Verstrichen, aber noch offen: dieselbe Sprache wie eine überfällige
   Notiz – Ton in der Fläche, Schrift in voller Farbe. */
.doc-task__chip--due.is-over {
  background: rgba(242, 108, 108, .18);
  color: #ff9a9a;
}

/* Verfallen: vorbei, nicht dringend. Zurückgenommen statt rot. */
.doc-task__chip--due.is-expired {
  background: var(--surface-3);
  color: var(--text-subtle);
  text-decoration: line-through;
}

/* Der Link steht als vierte Marke in derselben Reihe und nimmt sich
   auf die Höhe der anderen zurück. */
.doc-task__meta .doc-link { margin: 0; }

/* ---------- Beschreibung -------------------------------------------------- */

/* Ein Wort, unterstrichen, in der Größe der Marken: es soll als
   Handgriff lesbar sein, ohne wie ein weiterer Knopf auszusehen. */
.doc-task__more {
  justify-self: start;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .04em;
  color: var(--text-subtle);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.doc-task__more:hover { color: var(--text); }
.doc-task__more[aria-expanded="true"] { color: var(--text-muted); }

.doc-task__note {
  padding: 8px 10px;
  border-inline-start: 2px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Abgehakt heißt: da, aber erledigt. Der Haken behält seine Farbe –
   er ist die Aussage, der Text nur ihr Gegenstand. */
.doc-b--todo .doc-check.is-on ~ .doc-task .doc-b__text {
  text-decoration: line-through;
}

.doc-b--todo[data-expired] .doc-task .doc-b__text { color: var(--text-faint); }
.doc-b--todo[data-expired] .doc-check { opacity: .55; }

/* ---------- Knöpfe rechts in der Aufgabe ------------------------------------

   Kette (verknüpfen) und Stift (Details) nebeneinander, gleich still.
   Die Kette steht nur an Aufgaben ohne Link – danach ist ihr Platz der
   Knopf des Bereichs. */
.doc-task__acts {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.doc-task__chain svg { stroke-width: 1.4; }

/* ---------- Die verknüpfte Aufgabe ------------------------------------------

   Hängt ein Link an einer Aufgabe, IST die Aufgabe der Link: die ganze
   Zeile trägt den Bereich – Kante in seiner tiefen Farbe, ein Hauch
   seiner Farbe in der Fläche, von oben rechts ein Schein. Dasselbe
   Rezept wie das alte Link-Kästchen (.doc-link), nur eine Ebene höher,
   damit es keine zwei Flächen mehr ineinander gibt.

   Die Fläche liegt auf ::before und nicht am Block selbst: das
   clip-path des Eckschnitts schnitte sonst den Griff ⋮ ab, der links
   außerhalb des Blocks steht (.doc-hold). --tone / --tone-deep setzt
   app/doc/blocks.js inline aus der Modul-Registry, eigene Farben und
   E-ink eingeschlossen. */
.doc-b--linked {
  --tone: var(--text-subtle);
  --tone-deep: var(--g-31);
  isolation: isolate;
}

.doc-b--todo.doc-b--linked:has(.doc-task) {
  padding: 12px 10px 12px 12px;
  margin-block: 6px;
  border-bottom: 0;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 12px;
}

.doc-b--linked::before {
  --cut: 12px;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--cut-clip);
  background:
    linear-gradient(90deg, var(--tone-deep) 0 3px, transparent 3px),
    radial-gradient(120% 140% at 100% 0%,
      color-mix(in srgb, var(--tone) 14%, transparent), transparent 60%),
    color-mix(in srgb, var(--tone) 7%, var(--surface));
  transition: background-color var(--dur) var(--ease-out);
}

/* Der Haken in der Farbe des Bereichs – Rand offen, Fläche erledigt. */
.doc-b--linked .doc-check {
  /* auf der Höhe des Titels, nicht der Zeile darüber */
  margin-top: 35px;
  border-color: color-mix(in srgb, var(--tone) 75%, transparent);
}
.doc-b--linked .doc-check.is-on { background: var(--tone); }

.doc-task--linked { gap: 6px; }

.doc-b--linked .doc-task .doc-b__text { color: var(--text-strong); }

/* Die Zeile über dem Titel: [⬡] TODAY’S WORKOUT · Jogging. Ein Knopf,
   weil sie das Menü des Links öffnet (Open · Change · Remove) – aber
   ohne Fläche: sie soll gelesen werden, nicht gedrückt aussehen. */
.doc-task__eye {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.doc-task__hex {
  display: grid;
  place-items: center;
  width: 22px;
  height: 19px;
  flex: none;
  clip-path: var(--hex-clip);
  background: color-mix(in srgb, var(--tone) 24%, transparent);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.doc-task__hex-icon {
  width: 12px;
  height: 12px;
  background: var(--tone);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.doc-task__kind {
  flex: none;
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tone);
}

.doc-task__sep { flex: none; color: var(--tone); opacity: .5; font-size: max(var(--fs-floor), 11px); }

/* Überschreibt .doc-link__name (dort 15 px): der Name des Ziels steht
   hier in der Zeile über dem Titel, nicht als Titel. */
.doc-task__eye .doc-task__target {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-task__eye:hover .doc-task__hex,
.doc-task__eye:focus-visible .doc-task__hex {
  background: color-mix(in srgb, var(--tone) 40%, transparent);
}
.doc-task__eye:hover .doc-task__target { text-decoration: underline; text-underline-offset: 3px; }

/* Oben: die Zeile des Links und rechts der Stift, auf einer Höhe. Der
   Knopf des Bereichs steht darunter neben dem Titel – so wird eine
   einzeilige Aufgabe nicht vom Stift in die Länge gezogen. */
.doc-task__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-top: -4px;
}

.doc-task__top .doc-task__edit { width: 26px; height: 26px; }

/* Die einzige gefüllte Fläche der Zeile – eckig, mit Sockel in der
   tiefen Farbe, wie jeder Handgriff in der App. Das Zeichen ist dunkel:
   alle Bereichsfarben sind hell, Tinte darauf hält AA. */
.doc-task__go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: var(--tone);
  box-shadow: 3px 3px 0 var(--tone-deep);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              filter var(--dur) var(--ease-out);
}

.doc-task__go-glyph {
  width: 17px;
  height: 17px;
  background: var(--g-47, var(--bg));
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.doc-task__go:hover { filter: brightness(1.08); }
.doc-task__go:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--tone-deep); }
.doc-task__go:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.doc-task__go[disabled] { opacity: .4; box-shadow: none; cursor: default; }

.doc-b--linked .doc-task__edit { color: color-mix(in srgb, var(--tone) 45%, var(--text-subtle)); }

/* Marken in der Farbe des Bereichs. Überfällig bleibt rot – das ist
   eine Warnung, kein Bereich. */
.doc-b--linked .doc-task__chip {
  background: color-mix(in srgb, var(--tone) 13%, transparent);
  color: color-mix(in srgb, var(--tone) 50%, var(--text));
}
.doc-b--linked .doc-task__chip--due.is-over {
  background: rgba(242, 108, 108, .2);
  color: #ff9a9a;
}

.doc-b--linked .doc-task__note {
  border-inline-start-color: color-mix(in srgb, var(--tone) 50%, transparent);
  background: color-mix(in srgb, var(--tone) 6%, transparent);
}

/* Die Quittung: was der Bereich gemessen hat, und wann. */
.doc-task__receipt {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .02em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Erledigt heißt grau: der Bereich hat seine Arbeit getan, die Farbe
   gehört jetzt den offenen Aufgaben. Die Form bleibt – man sieht noch,
   dass es eine verknüpfte war. */
.doc-b--linked:has(.doc-check.is-on) {
  --tone: var(--text-subtle);
  --tone-deep: var(--g-31);
}
.doc-b--linked:has(.doc-check.is-on)::before {
  background:
    linear-gradient(90deg, var(--g-31) 0 3px, transparent 3px),
    var(--surface);
}
.doc-b--linked:has(.doc-check.is-on) .doc-task .doc-b__text { color: var(--text-subtle); }
.doc-b--linked:has(.doc-check.is-on) .doc-check.is-on { background: var(--text-muted); }

/* Ziel gelöscht: grau, der Knopf ohne Wirkung – „Change link…“ im
   Menü der Zeile darüber führt heraus. */
.doc-b--linked[data-link-dead] .doc-task__target { color: var(--text-muted); }

/* E-ink: keine Farbe – die Kante wird schwarz, die Fläche weicht
   einem Haarrahmen, der Knopf wird Tinte. */
html[data-eink] .doc-b--linked::before,
html[data-eink] .doc-b--linked:has(.doc-check.is-on)::before {
  background: linear-gradient(90deg, var(--text) 0 3px, transparent 3px);
  box-shadow: inset 0 0 0 1px currentColor;
}
html[data-eink] .doc-task__go { background: var(--text); box-shadow: none; }

/* ---------- Hervorhebungen ------------------------------------------------------ */

/* Textblock und Zitat sind Rahmen um Blöcke, nicht um Text: darin
   steht alles, was auch im Dokument steht – Überschriften, Listen,
   To-dos, ein weiterer Rahmen. Der Kasten trägt deshalb `data-children`
   und keine eigene Eingabe (siehe app/doc/blocks.js). */
.doc-b--tblock { padding: 6px 0; }

/* Der Rahmen ist eine Fläche, auf der Text steht – also der Eckschnitt
   der App, nicht ein Radius. Seine Kante kann er dabei nicht mit
   `border` zeichnen: clip-path schnitte sie an beiden Diagonalen mit
   weg. Sie liegt deshalb als `inset`-Schatten auf der Fläche, was hier
   ohnehin besser passt – ein Rand zählte zur Größe und verschöbe den
   Text um anderthalb Pixel, sobald man die Farbe wechselt.

   --b-frame kommt aus dem Blockmenü („Frame") und fällt auf die
   Akzentfarbe des Bereichs zurück. */
.doc-tblock__box {
  --frame: var(--b-frame, var(--accent-deep));
  --cut: 10px;

  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  box-shadow: inset 0 0 0 1.5px var(--frame);
  background: color-mix(in srgb, var(--frame) 7%, transparent);
}

/* --- Zeichen vor dem Rahmen (Blockmenü → „Badge") ---------------------

   Es steht in der oberen linken Ecke des Rahmens und der Text rückt ihm
   aus dem Weg. Bewusst NICHT im Textfluss der ersten Zeile: dort läge
   es auf demselben ::before wie der Platzhalter eines leeren Feldes,
   und eines von beiden wäre immer weg.

   --b-badge trägt das Emoji selbst (siehe styleParts in
   app/doc/blocks.js) – das CSS kennt keine Liste davon und kann
   deshalb auch nicht von ihr abweichen. Eigenschaften erben, also
   findet der Kasten den Wert, den der Block darüber trägt. */
.doc-b--tblock[data-badge] .doc-tblock__box {
  position: relative;
  padding-inline-start: 42px;
}

.doc-b--tblock[data-badge] .doc-tblock__box::before {
  content: var(--b-badge);
  position: absolute;
  inset-inline-start: 13px;
  top: 10px;
  font-size: 15px;
  line-height: 1.6;
}

/* Der Rahmen soll auch leer eine Fläche sein, nicht ein Strich. */
.doc-tblock__box { min-height: 3.2em; }

/* Die erste und die letzte Zeile drücken sonst gegen die Rahmenkante:
   Überschriften bringen ihren eigenen Abstand nach oben mit. */
.doc-tblock__box > .doc-b:first-child .doc-b__text { margin-top: 0; }

/* Zitat – nur eine Linie links, bewusst leiser als der Textblock.
   --b-line kommt aus dem Blockmenü („Line") und fällt auf die
   Akzentfarbe des Bereichs zurück. */
.doc-b--quote {
  padding: 2px 0 2px 14px;
  border-inline-start: 2.5px solid var(--b-line, var(--accent-deep));
  margin: 6px 0;
}

/* Kursiv und gedämpft gilt für alles im Zitat – auch für eine Liste
   darin. Überschriften behalten ihre Größe, nur den Ton nicht. */
.doc-b--quote .doc-b__text { color: var(--g-19); font-style: italic; }

.doc-quote__box > .doc-b:first-child .doc-b__text { margin-top: 0; }

/* ---------- Aufklappbarer Abschnitt ---------------------------------------------- */

.doc-b--toggle {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  padding: 2px 0;
}

.doc-toggle__arrow {
  width: 20px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  transition: background-color var(--dur) var(--ease-out);
}

.doc-toggle__arrow::before {
  content: "";
  width: 0;
  height: 0;
  border-inline-start: 6px solid var(--accent-app);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transform: rotate(90deg);
  transition: transform var(--dur) var(--ease-out);
}

.doc-toggle__arrow:hover { background: rgba(var(--o), .07); }

.doc-b--toggle[data-closed] .doc-toggle__arrow::before { transform: rotate(0deg); }

.doc-toggle__body { min-width: 0; }
.doc-toggle__body > .doc-b__text { font-weight: 600; }

/* Titelstufe: ein Toggle Heading liest sich wie die Überschrift, die es
   ist – dieselben Größen wie /h1 … /h4. */
.doc-b--toggle[data-head="h1"] > .doc-toggle__body > .doc-b__text { font-size: clamp(24px, 6.4vw, 28px); }
.doc-b--toggle[data-head="h2"] > .doc-toggle__body > .doc-b__text { font-size: clamp(20px, 5.4vw, 23px); }
.doc-b--toggle[data-head="h3"] > .doc-toggle__body > .doc-b__text { font-size: clamp(17px, 4.6vw, 19px); }
.doc-b--toggle[data-head="h4"] > .doc-toggle__body > .doc-b__text { font-size: 16px; letter-spacing: .02em; }

/* Der Pfeil bleibt auf Höhe der ersten Zeile, auch bei großer Schrift. */
.doc-b--toggle[data-head="h1"] > .doc-toggle__arrow,
.doc-b--toggle[data-head="h2"] > .doc-toggle__arrow { height: 1.6em; }

/* Der Inhalt eines Abschnitts sind vollständige Blöcke – derselbe
   Abstand wie im Dokument, damit To-dos und Überschriften darin
   genauso sitzen wie außerhalb. */
.doc-toggle__inner {
  display: grid;
  gap: 2px;
  border-inline-start: 1.5px solid color-mix(in srgb, var(--accent-deep) 45%, transparent);
  margin: 2px 0 4px 0;
  padding-inline-start: 10px;
}

/* Die erste Überschrift im Abschnitt braucht keinen zusätzlichen Abstand. */
.doc-toggle__inner > .doc-b:first-child .doc-b__text { margin-top: 0; }

.doc-b--toggle[data-closed] .doc-toggle__inner { display: none; }

/* ---------- Spalten und Links ----------------------------------------------------- */

.doc-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0;
}

.doc-col {
  min-width: 0;
  padding: 6px 8px;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent-deep) 55%, transparent);
}

/* --- Breitenverhältnis (Blockmenü → „Widths") -------------------------

   Gleich ist der Normalfall und steht deshalb nicht im Markup. Die
   beiden anderen sind für „Text neben Randnotiz": eine Spalte bekommt
   doppelt so viel Platz wie jede andere.

   Dafür wird aus dem Raster kurz eine Reihe. Der Grund ist handfest:
   `repeat()` will eine ganze Zahl, und `calc(var(--cols) - 1)` ist
   keine – die Rasterlösung ließe sich nur schreiben, indem man für
   zwei, drei und vier Spalten je eine eigene Zeile hinschreibt. Als
   Reihe genügt eine, und sie stimmt für jede Spaltenzahl. */
.doc-b--columns[data-ratio] .doc-cols {
  display: flex;
  gap: 10px;
}

.doc-b--columns[data-ratio] .doc-col { flex: 1 1 0; min-width: 0; }

.doc-b--columns[data-ratio="left"]  .doc-col:first-child { flex-grow: 2; }
.doc-b--columns[data-ratio="right"] .doc-col:last-child  { flex-grow: 2; }

.doc-b--link { padding: 6px 0; }

/* Ein Link trägt die Farbe SEINES Bereichs (--tone, gesetzt von
   app/doc/links.js), nicht die der Umgebung, in der er steht: im
   Journal sieht ein Atem-Link lavendel aus, ein Buch braun, ein
   Workout rot. Links eine Akzentkante, das Bereichszeichen in einem
   Sechseck, zwei Zeilen Text, rechts der Knopf. */
.doc-link {
  --tone: var(--accent-app);
  --tone-deep: var(--accent-deep);
  --cut: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 10px;
  background:
    linear-gradient(90deg, var(--tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 9%, var(--surface));
  clip-path: var(--cut-clip);
  transition: background-color var(--dur) var(--ease-out);
}

.doc-link__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  flex: none;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  clip-path: var(--hex-clip);
}

.doc-link__icon,
.doc-link__glyph {
  width: 16px;
  height: 16px;
  background: var(--tone);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.doc-link__text { display: grid; gap: 1px; min-width: 0; }

.doc-link__kind {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-link__name {
  font-size: 15px;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-link[data-doc-empty] { --tone: var(--text-subtle); }
.doc-link[data-doc-empty] .doc-link__name { color: var(--text-dim); }

.doc-link__play {
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
  background: var(--tone);
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

/* Das Zeichen im Knopf steht dunkel auf der Bereichsfarbe – die Farben
   sind alle hell, Tinte darauf hält den Kontrast über AA. */
.doc-link__play .doc-link__glyph { background: var(--g-47, var(--bg)); }
.doc-link__play:hover { filter: brightness(1.08); }
.doc-link__play:active { transform: scale(.92); }
.doc-link__play[disabled] { opacity: .4; cursor: default; }

/* ---------- „Link to …": nach Bereichen gegliedert ------------------------ */

.lk { display: grid; gap: 16px; }

.lk-group { display: grid; gap: 8px; }

.lk-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tone);
}

.lk-group__hex {
  display: grid;
  place-items: center;
  width: 26px;
  height: 23px;
  background: var(--tone);
  clip-path: var(--hex-clip);
}

.lk-group__glyph {
  width: 13px;
  height: 13px;
  background: var(--g-47, var(--bg));
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.lk-group__rows { display: grid; gap: 6px; }

.lk-group__hint { margin: 0; font-size: 12.5px; color: var(--text-muted); }

.lk-row {
  --cut: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px 8px 12px;
  border: 0;
  text-align: start;
  color: inherit;
  background:
    linear-gradient(90deg, var(--tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 7%, var(--field-bg));
  clip-path: var(--cut-clip);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}

.lk-row:hover,
.lk-row:focus-visible {
  background:
    linear-gradient(90deg, var(--tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 16%, var(--field-bg));
}
.lk-row:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }

.lk-row__icon {
  width: 20px;
  height: 20px;
  background: var(--tone);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.lk-row__body { display: grid; gap: 2px; min-width: 0; }
.lk-row__name { font-size: 15.5px; color: var(--text-strong); }
.lk-row__meta {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-row__more { font-size: 22px; line-height: 1; color: var(--tone); }

.lk-list { max-height: 60dvh; overflow-y: auto; scrollbar-width: thin; }

/* Mahlzeiten als Chips: ein Griff, kein zweites Fenster. */
.lk-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.lk-chip {
  --cut: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  font-size: 14px;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--tone) 12%, var(--field-bg));
  clip-path: var(--cut-clip);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.lk-chip:hover, .lk-chip:focus-visible { background: color-mix(in srgb, var(--tone) 24%, var(--field-bg)); }

.lk-chip__icon {
  width: 16px;
  height: 16px;
  background: var(--tone);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

html[data-eink] .doc-link,
html[data-eink] .lk-row,
html[data-eink] .lk-chip { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Slash-Menü ------------------------------------------------------------

   Eine Fläche, also der Eckschnitt – zwei Lagen wie die Leiste über der
   Tastatur: außen der Rand in --accent-deep, darin dieselbe Form in der
   Fläche (ein `border` unter clip-path hinterließe an beiden Diagonalen
   Splitter). Abschnitte mit Überschrift, je Zeile das Zeichen des
   Befehls, rechts sein Schlüssel und – wo es eines gibt – das Kürzel.
   Die Wege von /link stehen eingerückt unter „Link" und sagen, wozu
   sie gehören. */

.doc-slash {
  --cut: 14px;
  position: absolute;
  z-index: 30;
  isolation: isolate;
  display: grid;
  width: min(360px, 92%);
  padding: 7px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-deep) 55%, var(--surface));
  filter: drop-shadow(0 10px 24px rgba(var(--o-deep), .5));
  animation: pop-in 160ms var(--ease-out) both;
}

.doc-slash::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: var(--surface);
}

.doc-slash__list {
  max-height: min(340px, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.doc-slash__head {
  padding: 11px 12px 5px;
  font: 500 max(var(--fs-floor), 10px)/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Eine Zeile, die man liest und wählt – eine Fläche, also der Schnitt.
   15 px seitlich: die Diagonale läuft bei --cut 7 neben der Schrift. */
.doc-slash__item {
  --cut: 7px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  text-align: start;
}

.doc-slash__item.is-active { background: color-mix(in srgb, var(--accent-deep) 20%, transparent); }

/* Ein Weg von /link: eingerückt, mit dem Hinweis, wozu er gehört. */
.doc-slash__item.is-part { padding-inline-start: 30px; }

.doc-slash__ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--surface-2);
  color: var(--text);
}

.doc-slash__item.is-part .doc-slash__ico { width: 26px; height: 26px; }
.doc-slash__item.is-active .doc-slash__ico { background: var(--accent-app); color: var(--on-accent); }

.doc-ico { width: 20px; height: 20px; display: block; }

.doc-slash__body { display: grid; gap: 1px; min-width: 0; }
.doc-slash__label {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-strong);
}
.doc-slash__hint {
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-slash__part {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 0 5px;
  vertical-align: 1px;
  font: 500 max(var(--fs-floor), 9px)/1.6 var(--font-mono);
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface-2);
}

.doc-slash__meta {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.doc-slash__key {
  font: 500 max(var(--fs-floor), 11px)/1 var(--font-mono);
  color: var(--accent-app);
}

.doc-slash__keys { display: flex; gap: 2px; }

.doc-slash kbd,
.doc-desk__tip kbd {
  display: inline-block;
  min-width: 16px;
  padding: 1px 4px;
  font: 500 max(var(--fs-floor), 9.5px)/1.5 var(--font-mono);
  text-align: center;
  color: var(--text-muted);
  background: var(--surface-2);
  box-shadow: 1.5px 1.5px 0 var(--g-42);
}

.doc-slash__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  padding: 8px 12px 4px;
  border-top: 1px solid var(--line);
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-subtle);
}

/* =========================================================
   Leseansicht

   Dieselben Blöcke, nur ohne Eingabefelder: kein Platz für den
   Gutter, keine Platzhalter, leere Zeilen fallen zusammen.
   ========================================================= */

.doc-read { display: grid; gap: 2px; }

.doc-read .doc-b__text { padding: 2px 0; }
.doc-read .doc-b__text[data-blank] { min-height: 0; }
.doc-read .doc-b__text[data-blank]::before { content: none; }

.doc-read .doc-b--h1 .doc-b__text { margin-top: 4px; }
.doc-read .doc-check { cursor: pointer; }

/* =========================================================
   Ziehen und Ablegen (LA.sortable)
   ========================================================= */

/* Der Klon am Zeiger */
.is-ghost {
  opacity: .92;
  transform-origin: top left;
  box-shadow: var(--shadow-2);
  border-color: var(--accent-app) !important;
}

.is-ghost .ar-card__tool--grip { color: var(--text); }

/* Der echte Knoten bleibt als Lücke stehen */
.is-dragging {
  opacity: .32;
  filter: grayscale(1);
}

/* Solange gezogen wird, markiert nichts anderes mit. */
body.is-sorting { user-select: none; cursor: grabbing; }

/* =========================================================
   Blockweise Formatierung

   Alle Werte hängen als CSS-Variablen am Block, gesetzt vom
   Blockmenü. Die Attribut-Selektoren stechen die Typregeln
   oben aus – eine eigene Größe schlägt also auch die einer
   Überschrift.
   ========================================================= */

.doc-b[data-color] .doc-b__text { color: var(--b-color); }
.doc-b[data-size] .doc-b__text { font-size: var(--b-size); }

/* ---------- Warum eine kleine Zeile beim Tippen wächst ---------------------

   Safari auf dem iPhone zoomt die Seite von selbst hinein, sobald ein
   Feld den Fokus bekommt, dessen Schrift kleiner als 16 Pixel ist. Und
   es zoomt danach nicht wieder heraus: der Ausschnitt bleibt eng, über
   jeden Seitenwechsel hinweg. Wer eine Notiz in Blockgröße „S" (14px)
   oder „XS" (12,5px) antippt und danach in den Kalender geht, sieht
   dort fünf Tage statt sieben – nicht weil der Kalender zu breit wäre,
   sondern weil der Ausschnitt zu klein ist.

   Für `input`, `select` und `textarea` steht die Gegenmaßnahme längst
   in styles/base.css (16px). Ein Block ist aber keines von dreien,
   sondern ein contenteditable – und für das gilt dieselbe Regel des
   Browsers.

   Also wächst die Zeile genau so lange, wie sie den Fokus hat. Gelesen
   wird weiter in der gewählten Größe; beim Schreiben ist sie 16px, und
   das ist ohnehin die angenehmere Größe zum Tippen. */
.doc-b[data-size] .doc-b__text:focus { font-size: max(16px, var(--b-size)); }
.doc-b[data-font] .doc-b__text { font-family: var(--b-font); }

.doc-b[data-bg] {
  background: var(--b-bg);
  border-radius: 7px;
  padding: 3px 8px;
}

.doc-b.is-bold .doc-b__text { font-weight: 700; }
.doc-b.is-italic .doc-b__text { font-style: italic; }

/* Unterstrichen und durchgestrichen können zusammen auftreten. */
.doc-b.is-underline .doc-b__text { text-decoration-line: underline; }
.doc-b.is-strike .doc-b__text { text-decoration-line: line-through; }
.doc-b.is-underline.is-strike .doc-b__text { text-decoration-line: underline line-through; }
.doc-b.is-underline .doc-b__text,
.doc-b.is-strike .doc-b__text { text-underline-offset: 3px; }

/* Sprungziel aus dem Inhaltsverzeichnis kurz aufleuchten lassen. */
.doc-b.is-jumped { animation: doc-jump 900ms var(--ease-out) both; }

@keyframes doc-jump {
  0%   { background: color-mix(in srgb, var(--accent-app) 26%, transparent); }
  100% { background: transparent; }
}

/* =========================================================
   Tabelle
   ========================================================= */

.doc-b--table { padding: 8px 0; }

/* Platz rechts und unten für die beiden Plus-Knöpfe. */
.doc-table {
  position: relative;
  padding: 0 22px 22px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.doc-table__grid {
  border-collapse: collapse;
  width: 100%;
  min-width: 220px;
  table-layout: fixed;
}

.doc-td {
  padding: 0;
  border: 1px solid var(--line-strong);
  vertical-align: top;
}

/* Die erste Zeile liest sich als Kopfzeile – es sei denn, die Tabelle
   sagt, dass sie keine hat (Blockmenü → „Header row"). Eine Tabelle
   aus lauter gleichrangigen Zeilen gibt es: eine Preisliste, ein
   Stundenplan ohne Titel. */
.doc-b--table:not([data-nohead]) .doc-table__grid tr:first-child .doc-td {
  background: rgba(var(--o), .04);
  font-weight: 600;
}

/* --- Ausrichtung und Dichte (Blockmenü → „Align" / „Compact") ---------

   Beides sitzt am Block und wirkt auf alle Zellen. Zahlen liest man
   rechtsbündig, Häkchen und kurze Marken mittig – eine Spalte für sich
   auszurichten wäre das Nächste, braucht aber einen Ort, an dem eine
   SPALTE angesprochen werden kann; den gibt es noch nicht. */
.doc-b--table[data-align="center"] .doc-td .doc-b__text { text-align: center; }
.doc-b--table[data-align="right"]  .doc-td .doc-b__text { text-align: end; }

.doc-b--table[data-dense] .doc-td .doc-b__text {
  min-height: 1.7em;
  padding: 3px 7px;
  font-size: 13.5px;
}

.doc-td .doc-b__text {
  min-height: 2.2em;
  padding: 7px 9px;
  border-radius: 0;
}

.doc-table__add {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(var(--o), .05);
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.doc-table__add:hover { background: color-mix(in srgb, var(--accent-deep) 22%, transparent); color: var(--accent-app); }
.doc-table__add:active { transform: scale(.92); }

.doc-table__add--col { top: 0; inset-inline-end: 0; bottom: 22px; width: 18px; }
.doc-table__add--row { inset-inline-start: 0; inset-inline-end: 22px; bottom: 0; height: 18px; }

/* =========================================================
   Inhaltsverzeichnis
   ========================================================= */

.doc-b--toc { padding: 6px 0; }

.doc-toc {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-inline-start: 2px solid var(--accent-deep);
  border-radius: 0 8px 8px 0;
  background: rgba(var(--o), .03);
}

.doc-toc__title {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.doc-toc__list { display: grid; gap: 2px; justify-items: start; }

.doc-toc__item {
  max-width: 100%;
  padding: 2px 0;
  text-align: start;
  font-size: 14px;
  color: var(--g-12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}

.doc-toc__item:hover { color: var(--accent-app); text-decoration: underline; text-underline-offset: 3px; }

/* Die Ebene der Überschrift wird zur Einrückung. */
.doc-toc__item[data-level="h2"] { margin-inline-start: 14px; font-size: 13.5px; }
.doc-toc__item[data-level="h3"] { margin-inline-start: 28px; font-size: 13px; color: var(--g-23); }
.doc-toc__item[data-level="h4"] { margin-inline-start: 42px; font-size: 12.5px; color: var(--g-23); }

.doc-toc__empty { font-size: 12.5px; color: var(--text-faint); }

/* =========================================================
   Blockmenü
   ========================================================= */

.doc-bm { gap: 16px; }

.doc-bm__acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.doc-act {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 10px;
  background: var(--field-bg);
  font-size: 12.5px;
  color: var(--g-11);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.doc-act img { width: 19px; }
.doc-act:hover { background: var(--g-42); }
.doc-act:active { transform: scale(.97); }

.doc-act--danger { color: #ff9a9a; }
.doc-act--danger img { filter: none; }
.doc-act--danger:hover { background: rgba(var(--t-fitness-stroke), .14); }

.doc-bm__row { display: grid; gap: 8px; }

.doc-bm__label {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Farbfelder */

.doc-sws { display: flex; flex-wrap: wrap; gap: 7px; }

.doc-sw {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(var(--o), .14);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.doc-sw:hover { border-color: rgba(var(--o), .34); }
.doc-sw:active { transform: scale(.92); }
.doc-sw.is-on { border-color: var(--accent-app); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-app) 28%, transparent); }

/* „kein Wert" – durchgestrichenes leeres Feld */
.doc-sw--none { position: relative; color: var(--text-faint); }

.doc-sw--none::after {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-inline-end: 4px;
  height: 1.5px;
  background: rgba(var(--o), .3);
  transform: rotate(-45deg);
}

.doc-sw--pick { position: relative; overflow: hidden; padding: 0; cursor: pointer; }

.doc-sw--pick input {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Chips für Größe und Schrift */

.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Eckig, nicht als Pille: ein Chip, den man drückt, ist ein Knopf, und
   Knöpfe sind hier Rechtecke. Der Rand trägt den Stand – das geht bei
   einem Rechteck, weil kein clip-path ihn zerschneidet. */
.doc-chip {
  padding: 7px 13px;
  border: 1px solid rgba(var(--o), .22);
  border-radius: 0;
  font-size: 12.5px;
  color: var(--g-11);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.doc-chip:hover { border-color: rgba(var(--o), .32); }

.doc-chip.is-on {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 18%, transparent);
  color: var(--accent-app);
}

/* ---------- Stufenleiste einer Liste (Blockmenü → „Level") ---------------------

   Raus, Stand, rein. Der Stand steht dazwischen und nicht daneben,
   damit man beim Tippen sieht, was sich ändert – auf einem Telefon ist
   der eigene Daumen sonst genau über der Zahl. */

.doc-steps {
  display: flex;
  align-items: center;
  gap: 10px;
}

.doc-step {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 38px;
  border: 1px solid rgba(var(--o), .22);
  border-radius: 0;
  color: var(--text);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.doc-step svg { width: 19px; height: 19px; }

.doc-step:hover:not([disabled]) {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 18%, transparent);
}

.doc-step:active:not([disabled]) { transform: scale(.94); }

.doc-step[disabled] { color: var(--text-disabled); border-color: rgba(var(--o), .10); }

.doc-step__now {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Bold / Italic / Underlined / Crossed out */

.doc-marks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }

.doc-mark {
  padding: 9px 10px;
  border: 1px solid rgba(var(--o), .22);
  border-radius: 0;
  font-size: 13px;
  color: var(--g-11);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.doc-mark--bold { font-weight: 700; }
.doc-mark--italic { font-style: italic; }
.doc-mark--underline { text-decoration: underline; text-underline-offset: 3px; }
.doc-mark--strike { text-decoration: line-through; }

.doc-mark:hover { border-color: rgba(var(--o), .32); }

.doc-mark.is-on {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 18%, transparent);
  color: var(--accent-app);
}

/* Das Mülleimer-Icon ist ein schwarzes SVG – als Maske nimmt es die
   Warnfarbe an, statt auf dunklem Grund zu verschwinden. */
.doc-act__icon {
  width: 19px;
  height: 19px;
  background: #ff9a9a;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* Der Farbwähler ganz rechts zeigt, dass hier frei gewählt wird. */
.doc-sw--pick {
  background: conic-gradient(#f9b4c9, #f6d68a, #82f5cb, #98e2f5, #c7b3ff, #f9b4c9);
}

/* =========================================================
   Eingesetzte Notiz (/note)
   ========================================================= */

.doc-b--note { padding: 6px 0; }

.doc-note {
  border: 1.5px solid var(--accent-deep);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-deep) 7%, transparent);
  overflow: hidden;
}

.doc-note__head {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(var(--o), .08);
}

.doc-note__mark {
  width: 15px;
  height: 15px;
  background: var(--accent-app);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.doc-note__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-04);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Verknüpft oder eingefroren – das muss man sehen können. */
.doc-note__mode {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: max(var(--fs-floor), 10px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.doc-note__mode.is-live { border-color: var(--accent-deep); color: var(--accent-app); }

.doc-note__open {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--accent-app);
  font-size: 14px;
  transition: background-color var(--dur) var(--ease-out);
}

.doc-note__open:hover { background: rgba(var(--o), .09); }

.doc-note__body { padding: 4px 11px 10px; }

/* --- Nur der Titel (Blockmenü → „Shows") -----------------------------

   Eine eingesetzte Notiz bringt ihren ganzen Inhalt mit. Das ist meist
   das Gemeinte – manchmal aber will man nur die Verknüpfung: eine
   Zeile, die sagt, wohin sie führt, und keinen halben Bildschirm
   fremden Text mitten im eigenen Dokument.

   Der Inhalt wird versteckt, nicht weggelassen: „live" liest ihn
   weiterhin bei jedem Zeichnen aus dem Store, und ein Umschalten
   zurück braucht deshalb keinen Neuaufbau. */
.doc-b--note[data-brief] .doc-note__body { display: none; }

/* Der Inhalt liest sich als Zitat der Notiz – kleiner und ruhiger. */
.doc-note__body .doc-b__text { font-size: 13.5px; }
.doc-note__body .doc-b--h1 .doc-b__text { font-size: 17px; margin-top: 6px; }
.doc-note__body .doc-b--h2 .doc-b__text { font-size: 15.5px; margin-top: 5px; }
.doc-note__body .doc-b--h3 .doc-b__text,
.doc-note__body .doc-b--h4 .doc-b__text { font-size: 14px; margin-top: 4px; }
.doc-note__body .doc-b__text:focus { background: none; }

.doc-note__empty { padding: 10px 11px; font-size: 12.5px; color: var(--text-faint); }

/* =========================================================
   Blockleiste über der Tastatur (app/doc/toolbar.js)

   Nur auf Geräten mit grobem Zeiger – dort ersetzt sie den
   Schrägstrich, der hinter der Tastatur verschwände.

   Sie liegt im body, nicht im Editor: `position: fixed` in
   einem Element mit `transform` würde gegen dieses Element
   rechnen statt gegen das Fenster. Die Akzente bringt sie über
   ihre Umgebungsklasse (.jr, .ar, .nu) selbst mit.

   Höhe: unter den Popups (80) und unter der Speichermeldung
   (78), über allem Inhalt. Die Tableiste (80) tritt ab, solange
   die Leiste steht – siehe .has-doc-bar in styles/shell.css.

   Unterkante: `--kb-inset` ist der Rückfall für Browser ohne
   `interactive-widget=resizes-content` (Firefox); wo das Layout
   ohnehin mitschrumpft, steht dort 0.
   ========================================================= */

.doc-bar {
  /* Die Leiste ist eine Fläche, auf der Knöpfe stehen – also trägt sie
     den Eckschnitt der App, nicht einen Radius. Den Rand kann sie dabei
     nicht mit `border` zeichnen: clip-path schneidet auch den Rand, und
     übrig blieben zwei farbige Splitter an den Diagonalen. Deshalb zwei
     Lagen – außen die Randfarbe, darin dieselbe Form in der Fläche. */
  --cut: 12px;
  isolation: isolate;

  position: fixed;
  inset-inline-start: 6px;
  inset-inline-end: 6px;
  bottom: calc(var(--kb-inset, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 76;
  display: none;
  width: auto;
  max-width: var(--flow);
  margin-inline: auto;
  align-items: center;
  gap: 2px;
  /* 1.5px Rand + die 5/4 von vorher */
  padding: 6.5px 5.5px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--accent-deep);
  /* box-shadow fiele dem clip-path zum Opfer; drop-shadow folgt der
     geschnittenen Kontur. */
  filter: drop-shadow(0 8px 20px rgba(var(--o-deep), .45));
  touch-action: manipulation;
}

.doc-bar::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: var(--surface);
}

.doc-bar.is-on {
  display: flex;
  animation: doc-bar-in 180ms var(--ease-out) both;
}

/* Nur die Deckkraft, kein Heraufgleiten: wo die Leiste am Ende steht,
   darf nicht davon
   abhängen, dass eine Animation durchläuft. Ein Reiter im Hintergrund
   friert sie ein; mit `both` bliebe die Leiste dann auf dem
   Anfangsbild stehen – vierzehn Pixel unter dem Bildrand. */
@keyframes doc-bar-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Die drei Zonen der Leiste ------------------------------------------

   Links das Blockmenü, rechts Ein- und Ausrücken – beide fest. Nur
   dazwischen wird gescrollt. Vorher lag alles in einer einzigen
   Rutschbahn, und auf 320 Pixeln standen 325 von 595 Pixeln hinter dem
   rechten Rand: Einrücken, Rückgängig und das Blockmenü waren da, aber
   unerreichbar für jeden, der nicht wusste, dass er wischen muss. */

.doc-bar__fixed {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.doc-bar__fixed[hidden] { display: none; }

/* Die Reihe dazwischen schiebt sich seitwärts, wie die Vorschläge über
   einer Tastatur. */
.doc-bar__row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.doc-bar__row::-webkit-scrollbar { display: none; }

.doc-bar__sep {
  flex: none;
  width: 1px;
  height: 22px;
  margin-inline: 3px;
  background: color-mix(in srgb, var(--accent-deep) 45%, transparent);
}

/* 44 × 44 – die kleinste Fläche, die sich mit dem Daumen sicher
   treffen lässt (WCAG 2.1 AA, 2.5.5). */
.doc-bar__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  /* Eckig: ein Knopf ist in dieser App ein Rechteck. Der Eckschnitt
     gehört der Fläche, auf der er steht – und bei 44 Pixeln liefe er
     ohnehin quer durch das Zeichen. */
  border-radius: 0;
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

/* Die beiden verankerten Knöpfe stehen außerhalb der Rutschbahn und
   dürfen nicht mit ihr schrumpfen. */
.doc-bar__btn--fixed { flex: none; }

.doc-bar__ico { width: 20px; height: 20px; }

.doc-bar__btn:active { transform: scale(.9); }

/* Der aktive Typ trägt den Akzent als Fläche. --on-accent ist der
   dunkle Grund der App: auf Gelb (#f6d68a) wie auf Grau (#c9ccd3)
   liegt er deutlich über 7:1 und damit sicher über AA. */
.doc-bar__btn.is-on {
  background: var(--accent-app);
  color: var(--on-accent);
}

.doc-bar__btn[disabled] { opacity: .32; }
.doc-bar__btn[disabled]:active { transform: none; }

@media (hover: hover) {
  .doc-bar__btn:not([disabled]):hover {
    background: color-mix(in srgb, var(--accent-deep) 22%, transparent);
  }
  .doc-bar__btn.is-on:hover { background: var(--accent-app); }
}

/* ---------- Popups über der Leiste ---------------------------------------------- */

/* H und + klappen nach oben auf – nach unten läge die Tastatur. */
/* Dieselben zwei Lagen wie die Leiste darunter: außen die Randfarbe,
   darin dieselbe geschnittene Form in der Fläche. Ein `border` unter
   clip-path hinterließe an beiden Diagonalen farbige Splitter. */
/* Es liegt als Geschwister der Leiste im body (siehe openPopover in
   app/doc/toolbar.js): in der Leiste schnitt deren clip-path es komplett
   weg. `bottom`, `left` und `max-height` rechnet das Skript aus der
   Leiste; die Werte hier gelten nur für den ersten Frame. */
.doc-bar__pop {
  --cut: 12px;
  isolation: isolate;

  position: fixed;
  inset-inline-start: 8px;
  bottom: calc(var(--kb-inset, 0px) + 72px);
  z-index: 77;
  display: grid;
  align-content: start;
  gap: 2px;
  width: min(260px, calc(100vw - 24px));
  max-height: 46dvh;
  overscroll-behavior: contain;
  overflow-y: auto;
  padding: 7.5px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--accent-deep);
  filter: drop-shadow(0 8px 20px rgba(var(--o-deep), .45));
  scrollbar-width: thin;
  animation: pop-in 160ms var(--ease-out) both;
}

.doc-bar__pop::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: var(--surface);
}

/* Eine Zeile, die man liest und antippt – also eine Fläche, also der
   Schnitt. Die 15 Pixel seitlich sind gerechnet, nicht geraten: die
   Diagonale läuft bei --cut 8 acht Pixel weit ins Feld, die Schrift
   muss daneben stehen und nicht darunter. */
.doc-bar__item {
  --cut: 8px;
  display: grid;
  gap: 1px;
  min-height: 44px;
  padding: 7px 15px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  text-align: start;
}

.doc-bar__item.is-on,
.doc-bar__item:hover { background: color-mix(in srgb, var(--accent-deep) 18%, transparent); }
.doc-bar__item.is-on .doc-bar__item-label { color: var(--accent-app); font-weight: 600; }

.doc-bar__item-label { font-size: 14px; }
.doc-bar__item-hint { font-size: max(var(--fs-floor), 11.5px); color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .doc-bar.is-on,
  .doc-bar__pop { animation: none; }
  .doc-bar__btn { transition: none; }
  .doc-bar__btn:active { transform: none; }
}

/* =========================================================
   Der Editor bleibt eine Spalte

   Blöcke sind Text, und Text hört bei --flow auf. Auf den meisten
   Wegen macht das schon .mnt (styles/components.css) – die Regel
   steht hier trotzdem, weil der Editor auch dort eingehängt wird,
   wo kein .mnt darüber liegt (Beschreibung eines Rezepts, eines
   Plans). Zweimal dieselbe Grenze schadet nicht; eine fehlende
   schon.
   ========================================================= */

.doc-editor,
.doc-read {
  /* width dazu, nicht nur max-width: wäre der Editor einmal Kind
     eines Grids, machte `margin-inline: auto` aus ihm ein Kästchen
     in Textbreite statt einer zentrierten Spalte (siehe die Notiz
     bei .cal-detail in styles/calendar.css). */
  width: 100%;
  max-width: var(--flow);
  margin-inline: auto;
}

/* Ab 900 liegt links die Schiene. Die Blockleiste schwebt über dem
   Inhalt, nicht über dem Fenster – sonst stünde sie halb auf der
   Schiene. Sie bleibt dabei in der Mitte: `left`/`right` gesetzt,
   Breite offen, `margin-inline: auto` – wie gehabt. */
@media (min-width: 900px) {
  body[data-shell] .doc-bar { inset-inline-start: calc(var(--rail-w) + 6px); }
}

/* ---------- Formensprache: der Textkern eines Blocks --------------------
   Er trug border-radius:5px – sichtbar nur an der schwachen Fläche, die
   beim Schreiben erscheint, aber rund ist rund.

   Ein Eckschnitt kommt hier trotzdem nicht in Frage: die Zeile ist rund
   26px hoch und voller Glyphen, und der Schnitt liefe durch den ersten
   und letzten Buchstaben. Unter etwa 30px gilt deshalb die Ausnahme der
   Formensprache – rechter Winkel, kein Schnitt. Nicht rund ist es
   trotzdem, und darum geht es. */
.doc-b__text { border-radius: 0; }

/* =========================================================
   Auswahl über mehrere Blöcke

   Jeder Block ist ein eigenes contenteditable; Android kann
   über deren Grenzen hinweg nicht auswählen. Der Editor führt
   deshalb eine eigene Auswahl (langer Druck, dann ziehen) –
   siehe app/doc/editor.js. Das hier ist ihr Aussehen.

   Sie soll wie eine Textauswahl lesen, nicht wie ein
   ausgewählter Datensatz: eine durchgehende Fläche über die
   volle Zeilenbreite, kein Rahmen, keine Ecken.
   ========================================================= */

/* Solange sie steht, ist die Auswahl des Browsers stillgelegt –
   zwei Auswahlen übereinander liest niemand. Das gilt für den
   ganzen Editor, damit auch das Ziehen darüber hinweg nichts
   markiert, was gleich wieder verschwände. */
.doc-editor.is-marking,
.doc-editor.is-marking [data-text] {
  -webkit-user-select: none;
  user-select: none;
}

/* Der lange Druck darf nicht das Kontextmenü des Systems
   auslösen – das läge sonst über der Auswahl, die er gerade
   aufgemacht hat. */
.doc-editor.is-marking [data-text] { -webkit-touch-callout: none; }

.doc-b.is-marked::before {
  content: "";
  position: absolute;
  inset: -1px -6px;
  z-index: -1;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-deep) 30%, transparent);
  pointer-events: none;
}

/* Der Haken eines ausgewählten To-dos bleibt sichtbar: die Fläche
   liegt hinter dem Inhalt, nicht darüber. */
.doc-b.is-marked { isolation: isolate; }

/* E-ink mischt keine Farben – dort trägt eine Umkehrung. */
html[data-eink] .doc-b.is-marked::before {
  background: rgba(var(--o), .18);
  border-radius: 0;
}

/* ---------- Die Auswahl des Browsers -----------------------------------
   Sie läuft jetzt über Blockgrenzen und ist damit vom Randfall zur
   Hauptsache geworden – eine ganze Liste steht darin. Das Grau, das
   der Browser dafür nimmt, legt sich auf dem dunklen Grund fast über
   die Schrift. Also der Akzent des Bereichs als Fläche und der Text
   auf voller Stärke: derselbe Griff wie bei .is-marked, damit beide
   Auswahlen als dieselbe Sache lesen. */
.doc-editor ::selection,
.doc-editor::selection {
  background: color-mix(in srgb, var(--accent-deep) 42%, transparent);
  color: var(--text-strong);
}

html[data-eink] .doc-editor ::selection,
html[data-eink] .doc-editor::selection {
  background: rgba(var(--o), .22);
  color: var(--text-strong);
}

/* =========================================================
   Nachtrag: fünf Stellen im Dokument selbst

   Sie waren bei den bisherigen Durchgängen nie auf dem
   Bildschirm – Tabelle, Toggle, eingesetzte Notiz und der
   Verknüpfungs-Block stehen in keiner der Beispielnotizen.
   Erst eine Testnotiz mit allen Blockarten hat sie gezeigt.

   Vier davon sind Knöpfe und tragen deshalb weder Radius
   noch Schnitt; einer ist eine Marke und trägt den Schnitt.
   ========================================================= */

/* Der Umschalter „+" an Tabelle, der Pfeil am Toggle, „Notiz
   öffnen" und der Abspielknopf einer Verknüpfung: alle vier sind
   Knöpfe, alle vier unter dreißig Pixeln. Eckig, ohne Schnitt –
   eine Diagonale liefe hier quer durch das Zeichen. */
.doc-table__add,
.doc-toggle__arrow,
.doc-note__open,
.doc-link__play {
  border-radius: 0;
  clip-path: none;
}

/* „LIVE" / „COPY" ist keine Handlung, sondern eine Marke, die man
   liest – also der Eckschnitt. Bei fünf Pixeln Schnitt braucht die
   Schrift daneben Platz: acht Pixel Innenabstand reichten dafür
   nicht, elf schon.

   Ihr Rand überlebt den Schnitt nicht (er bricht an beiden Diagonalen
   ab und lässt Splitter stehen). Der Stand liegt deshalb in der
   Fläche – derselbe Ton, geringe Deckkraft, Schrift in voller Stärke,
   und damit auch über AA. */
.doc-note__mode {
  --cut: 5px;
  padding: 2px 11px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: rgba(var(--o), .09);
}

.doc-note__mode.is-live {
  background: color-mix(in srgb, var(--accent-deep) 26%, transparent);
  color: var(--accent-app);
}

/* ---------- Nachtrag: Auswahlzeilen tragen den Eckschnitt ------------------

   .doc-pick ist eine Zeile in einer Liste (Vorlagen, Verknuepfungen,
   Schnellstarts) - eine Flaeche, kein Knopf. Sie trug 10px Radius und
   keinen Schnitt; jetzt dieselbe Form wie jede andere Listenzeile. Die
   Marke darin ist kleiner als 30px: dort schnitte der Schnitt nur, also
   ein schlichtes Quadrat - eckig, aber ohne Diagonale. */
.doc-pick {
  --cut: 10px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.doc-pick__mark { border-radius: 0; }

/* ---------- Ja/Nein-Knöpfe: Rechteck mit Sockel ----------------------------
   Bis 0.4.0 trugen sie 8 px Radius und gaben beim Drücken nur per
   scale() nach – rund und ohne Tiefe, das Einzige dieser Art in den
   Fenstern des Archive. Jetzt wie jeder Knopf (diligent-work): gerade
   Ecken, Fläche (::after) über einem versetzten Sockel (::before), beim
   Drücken sinkt der Knopf um genau die Sockeltiefe ein. */

.doc-ask__btn {
  --depth: 3px;
  --ask-face: var(--accent-deep);
  --ask-lift: color-mix(in srgb, var(--accent-deep) 45%, #000000);
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.doc-ask__btn::before,
.doc-ask__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.doc-ask__btn::before {
  background: var(--ask-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.doc-ask__btn::after {
  background: var(--ask-face);
  transition: filter var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.doc-ask__btn:hover { filter: none; }
.doc-ask__btn:hover::after { filter: brightness(1.08); }
.doc-ask__btn:active { transform: translate(var(--depth), var(--depth)); }
.doc-ask__btn:active::before { opacity: 0; }
.doc-ask__btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* Der leise Knopf: Kante statt Fläche, derselbe Sockel in Grau. Die
   Fläche ist der Grund des Fensters, nicht durchsichtig – sonst schiene
   der Sockel hindurch und der leise Knopf sähe gefüllt aus. */
.doc-ask__btn--ghost {
  --ask-face: var(--surface);
  --ask-lift: var(--btn-quiet-lift);
  border: 0;
  background: none;
}
.doc-ask__btn--ghost::after { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.doc-ask__btn--ghost:hover { background: none; }
.doc-ask__btn--ghost:hover::after { filter: none; background: var(--surface-2); }

.doc-ask__btn--danger {
  --ask-face: #f26c6c;
  --ask-lift: #7a2b2b;
  background: none;
}

html[data-eink] .doc-ask__btn { --ask-face: #000000; --ask-lift: #000000; color: #ffffff; }
html[data-eink] .doc-ask__btn--ghost { --ask-face: #ffffff; color: #000000; }
html[data-eink] .doc-ask__btn--ghost::after { box-shadow: inset 0 0 0 2px #000000; }
html[data-eink] .doc-ask__btn--danger { --ask-face: #2e2e2e; background: none; }

/* ---------- Nach einem Workout: verknüpfte Aufgaben abhaken ----------------
   app/notes/linkdone.js › dialog(). Jede Aufgabe trägt dieselbe Fläche
   wie im Editor (Kante und Hauch in der Farbe des Bereichs), damit man
   sie wiedererkennt. Bei mehreren ist die Zeile wählbar: das Kästchen
   links füllt sich, die Fläche wird kräftiger. Eine Zeile ist eine
   Fläche, kein Knopf – Eckschnitt, kein Sockel. */

.lt-ask { display: grid; gap: 12px; }

.lt-ask__lead {
  margin: 0;
  text-align: start;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.lt-ask__lead b { color: var(--text-strong); font-weight: 600; }

.lt-ask__list { display: grid; gap: 8px; }

.lt-ask__list--scroll {
  max-height: 44dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-inline-end: 2px;
}

.lt-task {
  --cut: 12px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px 14px 12px 15px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  text-align: start;
  font: inherit;
}

.lt-task::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--cut-clip);
  background:
    linear-gradient(90deg, var(--tone-deep) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 8%, var(--surface-2));
  transition: background-color var(--dur) var(--ease-out);
}

.lt-task--pick { cursor: pointer; }
.lt-task--pick:hover::before {
  background:
    linear-gradient(90deg, var(--tone-deep) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 13%, var(--surface-2));
}
.lt-task--pick.is-picked::before {
  background:
    linear-gradient(90deg, var(--tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 22%, var(--surface-2));
}
.lt-task--pick:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Das Kästchen: unter 30 px, also ohne Schnitt – ein gerades Quadrat. */
.lt-task__box {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 70%, var(--text-subtle));
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lt-task__box::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--ink);
  -webkit-mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
          mask: url("../assets/icons/done_icon.svg") center / contain no-repeat;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out);
}
.is-picked .lt-task__box { background: var(--tone); box-shadow: none; }
.is-picked .lt-task__box::after { opacity: 1; transform: none; }

.lt-task__body { display: grid; gap: 3px; min-width: 0; flex: 1; }

.lt-task__eye {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tone);
}

.lt-task__hex {
  display: grid;
  place-items: center;
  width: 20px;
  height: 17px;
  flex: none;
  clip-path: var(--hex-clip);
  background: color-mix(in srgb, var(--tone) 24%, transparent);
}
.lt-task__hex-icon {
  width: 11px;
  height: 11px;
  background: var(--tone);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.lt-task__name {
  font-size: 16px;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.lt-task__where {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* „Tick all" über dem Paar darunter – ein eigener Knopf, volle Breite. */
.lt-ask__all { width: 100%; }

.lt-ask .doc-ask__btn:disabled { opacity: .45; cursor: default; }
.lt-ask .doc-ask__btn:disabled:active { transform: none; }
.lt-ask .doc-ask__btn:disabled:active::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lt-task__box::after { transition: none; }
}

/* Auf Papier: Rand als eigene Schicht (::before schwarz, ::after die
   Fläche 1 px darin) – ein inset-Schatten verschwände entlang der
   Diagonalen. Gewählt: doppelt so dicker Rand und Kante. */
html[data-eink] .lt-task::before,
html[data-eink] .lt-task--pick:hover::before,
html[data-eink] .lt-task--pick.is-picked::before { background: #000000; }
html[data-eink] .lt-task::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: linear-gradient(90deg, #000000 0 2px, #ffffff 2px);
}
html[data-eink] .lt-task--pick.is-picked::after {
  inset: 2px;
  background: linear-gradient(90deg, #000000 0 5px, #ffffff 5px);
}
html[data-eink] .lt-task__eye,
html[data-eink] .lt-task__name { color: #000000; }
html[data-eink] .lt-task__hex { background: #000000; }
html[data-eink] .lt-task__hex-icon { background: #ffffff; }
html[data-eink] .lt-task__box { box-shadow: inset 0 0 0 2px #000000; }
html[data-eink] .is-picked .lt-task__box { background: #000000; }
html[data-eink] .lt-task__box::after { background: #ffffff; }

/* =========================================================
   Formensprache im Editor (Fassung 0.6.0 beta)

   Gemessen im laufenden Editor: sechs Flächen waren noch rund – das
   Slash-Menü (oben schon neu gezeichnet), die eingesetzte Notiz samt
   LIVE-Marke, das Inhaltsverzeichnis, die markierte Zeile, der Rumpf.
   Steht hier am Ende, weil frühere Regeln derselben Datei sonst
   gewännen (Diligent Work, Fallstrick 3). Flächen bekommen den
   Eckschnitt, alles unter rund 30 px wird ein schlichtes Rechteck.
   ========================================================= */

.doc-body,
.doc-b[data-bg],
.doc-toc,
.doc-b.is-marked::before,
.doc-table__add,
.doc-toggle__arrow,
.doc-note__open,
.doc-drop { border-radius: 0; }

/* Die eingesetzte Notiz: Rand als eigene Lage, sonst bräche der Rand
   an den Diagonalen weg (clip-path schneidet `border` mit). */
.doc-note {
  --cut: 12px;
  position: relative;
  isolation: isolate;
  padding: 1.5px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--accent-deep);
}

.doc-note::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-deep) 7%, var(--bg));
}

/* Eine ausgewählte Linie, ein ausgewähltes Verzeichnis: dieselbe
   Fläche wie die Blockauswahl, dazu eine Kante – eine Linie allein
   wäre unter einer halbdurchsichtigen Fläche kaum zu sehen. */
.doc-b--divider.is-marked::before,
.doc-b--toc.is-marked::before,
.doc-b--link.is-marked::before,
.doc-b--note.is-marked::before,
.doc-b--table.is-marked::before,
.doc-b--columns.is-marked::before {
  inset: -4px -8px;
  outline: 1.5px solid var(--accent-app);
  outline-offset: 0;
}

/* =========================================================
   Befehlsleiste am Rechner (app/doc/deskbar.js)

   Ein Streifen direkt unter der Topbar – dieselbe Stelle und dieselbe
   Höhe im Stapel (60, unter der Topbar mit 70) wie der Streifen des
   Termin-Formulars. Der Streifen ist eine Fläche (Eckschnitt, zwei
   Lagen), die Knöpfe darauf sind Rechtecke: in Ruhe flach, damit
   dreißig Zeichen nicht dreißig Kästen werden; beim Überfahren steht
   der Sockel, beim Drücken sinkt der Knopf darauf. Eingeschaltet trägt
   er die Farbe des Bereichs als Fläche – nie als Rand.
   ========================================================= */

.doc-desk {
  --cut: 12px;
  position: fixed;
  top: calc(var(--safe-top) + var(--sh-top-h) + 6px);
  inset-inline-start: 16px;
  inset-inline-end: 16px;
  z-index: 60;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 1200px;
  height: 50px;
  margin-inline: auto;
  padding: 0 9px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-deep) 55%, var(--surface));
  animation: doc-desk-in 180ms var(--ease-out) both;
}

.doc-desk::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: var(--surface);
}

.doc-desk.is-tight {
  overflow-x: auto;
  scrollbar-width: none;
}

.doc-desk.is-tight::-webkit-scrollbar { display: none; }

@keyframes doc-desk-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mit Schiene (ab 900 px) rückt der Streifen um ihre Breite ein – wie
   .cal-form__bar. */
@media (min-width: 900px) {
  body[data-shell] .doc-desk { inset-inline-start: calc(var(--rail-w) + 16px); }
}

/* Die Seite beginnt unter dem Streifen, und die Marke wird beim Tippen
   nicht hinter ihn gerollt. */
body[data-shell].has-desk-bar .app {
  padding-top: calc(var(--safe-top) + var(--sh-top-h) + 14px + 62px);
}
html.has-desk-bar { scroll-padding-top: calc(var(--safe-top) + var(--sh-top-h) + 76px); }

.doc-desk__grp { flex: none; display: flex; align-items: center; gap: 2px; }

.doc-desk__sep {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 5px;
  background: var(--line-strong);
}

.doc-desk__gap { flex: 1 1 auto; min-width: 6px; }

.doc-desk__btn {
  --depth: 2px;
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 32px;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  transition: transform var(--dur-fast) var(--ease-out);
}

.doc-desk__btn::before,
.doc-desk__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

/* Der Sockel – erst beim Überfahren da. */
.doc-desk__btn::before {
  background: rgba(var(--o), .16);
  transform: translate(var(--depth), var(--depth));
  opacity: 0;
}

.doc-desk__btn::after { background: transparent; }

.doc-desk__btn:not([disabled]):hover::after,
.doc-desk__btn.is-open::after { background: var(--surface-3); }

.doc-desk__btn:not([disabled]):hover::before,
.doc-desk__btn.is-open::before { opacity: 1; }

.doc-desk__btn:not([disabled]):active { transform: translate(var(--depth), var(--depth)); }
.doc-desk__btn:not([disabled]):active::before { opacity: 0; }

/* Eingeschaltet: Fläche im Ton des Bereichs, Zeichen in voller Farbe. */
.doc-desk__btn.is-on { color: var(--accent-app); }
.doc-desk__btn.is-on::after { background: color-mix(in srgb, var(--accent-app) 20%, var(--surface)); }
.doc-desk__btn.is-on::before { opacity: 1; background: color-mix(in srgb, var(--accent-deep) 55%, transparent); }

.doc-desk__btn[disabled] { color: var(--text-disabled); cursor: default; }

.doc-desk__btn:focus-visible {
  outline: 2px solid var(--accent-app);
  outline-offset: 2px;
}

.doc-desk__ico { width: 20px; height: 20px; display: block; flex: none; }
.doc-desk__chev { width: 9px; height: 9px; flex: none; color: var(--text-subtle); }

/* Der Stilkasten steht immer erhaben – er ist das Wichtigste der
   Leiste, wie das Formatfeld in Word. */
.doc-desk__style {
  width: 128px;
  justify-content: space-between;
  padding: 0 8px 0 10px;
}
.doc-desk__style::after { background: var(--surface-2); }
.doc-desk__style::before { opacity: 1; }
.doc-desk__style[disabled]::after { background: transparent; }
.doc-desk__style[disabled]::before { opacity: 0; }

.doc-desk__style-name {
  overflow: hidden;
  font: 600 14px/1 var(--font-serif);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-strong);
}
.doc-desk__style[disabled] .doc-desk__style-name { color: var(--text-disabled); }

/* ---------- Menüs der ▾-Knöpfe ----------------------------------------

   Zwei Lagen wie die Leiste. Gerollt wird in der Liste darin, nicht in
   der Fläche – sonst rollte die innere Lage mit weg, und unten stünde
   der Rand als Streifen. */

.doc-desk__pop {
  --cut: 12px;
  position: fixed;
  z-index: 62;
  isolation: isolate;
  display: grid;
  min-width: 230px;
  max-width: 330px;
  padding: 7px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-deep) 55%, var(--surface));
  animation: pop-in 160ms var(--ease-out) both;
}

.doc-desk__pop::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: var(--surface);
}

.doc-desk__pop-list {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.doc-desk__head {
  padding: 10px 12px 5px;
  font: 500 max(var(--fs-floor), 10px)/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.doc-desk__item {
  --cut: 7px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 6px 13px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  text-align: start;
  font-size: 13.5px;
  color: var(--text);
}

.doc-desk__item:hover,
.doc-desk__item:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent-deep) 22%, transparent);
}

.doc-desk__item.is-on { color: var(--accent-app); font-weight: 600; }
.doc-desk__item.is-danger { color: var(--danger); }
.doc-desk__item-ico { display: grid; place-items: center; color: var(--text-muted); }
.doc-desk__item.is-danger .doc-desk__item-ico { color: var(--danger); }
.doc-desk__item-key { font: 500 max(var(--fs-floor), 10.5px)/1 var(--font-mono); color: var(--text-subtle); white-space: nowrap; }

.doc-desk__line { height: 1px; margin: 6px 8px; background: var(--line); }

.doc-desk__row { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 10px 8px; }

.doc-desk__sw {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 0;
}

.doc-desk__sw span {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--text);
  box-shadow: inset 0 0 0 1px rgba(var(--o), .18);
}

.doc-desk__sw--bg span { background: transparent; }
.doc-desk__sw.is-on { outline: 1.5px solid var(--text-strong); outline-offset: 0; }
.doc-desk__sw:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 1px; }

.doc-desk__chip {
  padding: 6px 10px;
  border-radius: 0;
  font-size: 12.5px;
  background: var(--surface-2);
  color: var(--text);
}

.doc-desk__chip:hover { background: var(--surface-3); }
.doc-desk__chip.is-on {
  background: color-mix(in srgb, var(--accent-app) 22%, var(--surface));
  color: var(--accent-app);
  font-weight: 600;
}
.doc-desk__chip--bold { font-weight: 800; }
.doc-desk__chip--italic { font-style: italic; }
.doc-desk__chip--underline { text-decoration: underline; }
.doc-desk__chip--strike { text-decoration: line-through; }

.doc-desk__note { margin: 0; padding: 2px 12px 6px; font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }

/* Tooltip: Name, Befehl, Kürzel. Unter 30 px hoch – also ein schlichtes
   Rechteck, kein Schnitt. */
.doc-desk__tip {
  position: fixed;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  pointer-events: none;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
  background: var(--surface-3);
  filter: drop-shadow(0 6px 14px rgba(var(--o-deep), .5));
  animation: doc-desk-in 120ms var(--ease-out) both;
}

.doc-desk__tip-slash { font: 500 max(var(--fs-floor), 11px)/1 var(--font-mono); color: var(--accent-app); }
.doc-desk__tip-keys { display: flex; gap: 2px; }

/* ---------- Auswahllisten: Suche, Abschnitte, Hinweis ---------------- */

.lk-tip {
  margin: 0 0 12px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  background: rgba(var(--o), .04);
  border-inline-start: 2px solid var(--accent-deep);
}

.lk-tip b { font: 500 max(var(--fs-floor), 11.5px)/1 var(--font-mono); color: var(--accent-app); }

.lk-search {
  --cut: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin: 0 0 10px;
  padding: 0 12px;
  clip-path: var(--cut-clip);
  background: var(--field-bg);
}

.lk-search__ico { width: 18px; height: 18px; flex: none; color: var(--text-subtle); }

.lk-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: 15px var(--font);
  color: var(--text-strong);
}

.lk-search__input::placeholder { color: var(--text-subtle); }
.lk-search:focus-within { background: color-mix(in srgb, var(--accent-deep) 12%, var(--field-bg)); }

.lk-list__head {
  display: flex;
  justify-content: space-between;
  margin: 8px 2px 2px;
  font: 500 max(var(--fs-floor), 10px)/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.lk-list__head[hidden],
[data-lk-item][hidden] { display: none; }

/* ---------- E-ink ------------------------------------------------------- */

html[data-eink] .doc-desk,
html[data-eink] .doc-desk__pop,
html[data-eink] .doc-slash { background: #000000; filter: none; animation: none; }
html[data-eink] .doc-desk::before,
html[data-eink] .doc-desk__pop::before,
html[data-eink] .doc-slash::before { background: #ffffff; }
html[data-eink] .doc-desk__btn { color: #000000; transition: none; }
html[data-eink] .doc-desk__btn::before { background: #000000; }
html[data-eink] .doc-desk__btn:not([disabled]):hover::after,
html[data-eink] .doc-desk__btn.is-open::after,
html[data-eink] .doc-desk__style::after { background: #ffffff; }
html[data-eink] .doc-desk__btn.is-on { color: #ffffff; }
html[data-eink] .doc-desk__btn.is-on::after { background: #000000; }
html[data-eink] .doc-desk__btn[disabled] { color: #8a8a8a; }
html[data-eink] .doc-desk__sep { background: #000000; }
html[data-eink] .doc-desk__style-name,
html[data-eink] .doc-desk__chev { color: #000000; }
html[data-eink] .doc-desk__item:hover,
html[data-eink] .doc-desk__item:focus-visible,
html[data-eink] .doc-slash__item.is-active { background: #000000; color: #ffffff; }
html[data-eink] .doc-slash__item.is-active .doc-slash__label,
html[data-eink] .doc-slash__item.is-active .doc-slash__hint { color: #ffffff; }
html[data-eink] .doc-slash__item.is-active .doc-slash__ico { background: #ffffff; color: #000000; }
html[data-eink] .doc-desk__tip { background: #000000; color: #ffffff; filter: none; animation: none; }
html[data-eink] .doc-slash kbd,
html[data-eink] .doc-desk__tip kbd { box-shadow: 1.5px 1.5px 0 #000000; }
html[data-eink] .doc-note { background: #000000; }
html[data-eink] .doc-note::before { background: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .doc-desk,
  .doc-desk__pop,
  .doc-desk__tip,
  .doc-slash { animation: none; }
  .doc-desk__btn,
  .doc-desk__btn::before,
  .doc-desk__btn::after { transition: none; }
  .doc-desk__btn:not([disabled]):active { transform: none; }
}

/* Fuß des Menüs: zwischen Taste und Wort etwas Luft. */
.doc-slash__foot kbd:last-of-type { margin-inline-end: 5px; }
.doc-slash__foot kbd + kbd { margin-inline-start: 2px; }

html[data-eink] .doc-slash__item.is-active .doc-slash__key,
html[data-eink] .doc-desk__item:hover .doc-desk__item-key,
html[data-eink] .doc-desk__item:hover .doc-desk__item-ico { color: #ffffff; }

/* =========================================================
   Verknüpfungen wie die Kacheln auf Home (Fassung 0.6.0 beta)

   Vorbild sind die Bereichskacheln auf Home: eine ruhige Fläche mit
   Eckschnitt, das Sechseck des Bereichs gefüllt in seiner Farbe, der
   Name groß, darunter eine Zeile in Mono – und rechts der Knopf als
   getöntes Quadrat. Die Farbe des Bereichs steckt nur noch im
   Sechseck und im Knopf, nicht mehr in der Fläche und keiner Kante
   links: zwei Links untereinander lesen sich wie zwei Kacheln, nicht
   wie zwei Warnstreifen.

   Der Knopf ist die zweite Stufe aus styles/components.css
   (--btn-tinted-*): Fläche ein Hauch der Farbe, Kante in voller
   Stärke, Zeichen in der Farbe, Sockel darunter, sinkt beim Drücken.
   Dieselbe Form tragen alle „+" des Editors.
   ========================================================= */

/* ---------- Der getönte Knopf -------------------------------------------- */

.doc-link__play,
.doc-task__go,
.doc-gutter__btn[data-add-block],
.doc-table__add {
  --depth: 3px;
  --tint: var(--tone, var(--accent-app));
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: none;
  box-shadow: none;
  filter: none;
  color: var(--tint);
  transition: transform var(--dur-fast) var(--ease-out);
}

.doc-link__play::before,
.doc-link__play::after,
.doc-task__go::before,
.doc-task__go::after,
.doc-gutter__btn[data-add-block]::before,
.doc-gutter__btn[data-add-block]::after,
.doc-table__add::before,
.doc-table__add::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Sockel */
.doc-link__play::before,
.doc-task__go::before,
.doc-gutter__btn[data-add-block]::before,
.doc-table__add::before {
  background: color-mix(in srgb, var(--tint) var(--btn-tinted-lift), transparent);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Fläche mit Kante – die Kante ist ein inset-Schatten: ein `border`
   verschöbe das Zeichen beim Wechsel des Standes. */
.doc-link__play::after,
.doc-task__go::after,
.doc-gutter__btn[data-add-block]::after,
.doc-table__add::after {
  background: color-mix(in srgb, var(--tint) var(--btn-tinted), var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint) var(--btn-tinted-edge), transparent);
  transition: background-color var(--dur) var(--ease-out);
}

.doc-link__play:not([disabled]):hover::after,
.doc-task__go:not([disabled]):hover::after,
.doc-gutter__btn[data-add-block]:hover::after,
.doc-table__add:hover::after {
  background: color-mix(in srgb, var(--tint) var(--btn-tinted-hover), var(--surface));
}

.doc-link__play:not([disabled]):active,
.doc-task__go:not([disabled]):active,
.doc-gutter__btn[data-add-block]:active,
.doc-table__add:active { transform: translate(var(--depth), var(--depth)); filter: none; }

.doc-link__play:not([disabled]):active::before,
.doc-task__go:not([disabled]):active::before,
.doc-gutter__btn[data-add-block]:active::before,
.doc-table__add:active::before { opacity: 0; }

.doc-link__play:hover,
.doc-task__go:hover { filter: none; }

.doc-link__play:focus-visible,
.doc-task__go:focus-visible,
.doc-gutter__btn[data-add-block]:focus-visible,
.doc-table__add:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }

.doc-link__play[disabled],
.doc-task__go[disabled] { opacity: .45; cursor: default; }

/* Das Zeichen in der Farbe des Bereichs – auf der getönten Fläche hält
   jede Bereichsfarbe AA (sie sind alle hell, die Fläche ist dunkel). */
.doc-link__play .doc-link__glyph,
.doc-task__go-glyph { background: var(--tint); }

/* Maße wie auf Home: 40 × 36. */
.doc-link__play,
.doc-task__go { width: 40px; height: 36px; }
.doc-link__play .doc-link__glyph,
.doc-task__go-glyph { width: 16px; height: 16px; }

/* Das „+" neben einer Zeile: in der Farbe der Umgebung, klein wie der
   Griff daneben – unter 30 px, also ohne Schnitt, aber mit Sockel. */
.doc-gutter__btn[data-add-block] {
  --depth: 2px;
  --tint: var(--accent-app);
  width: 20px;
  height: 20px;
  margin: 2px 3px 2px 0;
}
.doc-gutter__btn[data-add-block] .doc-gutter__icon,
.doc-gutter__btn[data-add-block]:hover .doc-gutter__icon {
  width: 11px;
  height: 11px;
  background: var(--tint);
}
.doc-gutter__btn[data-add-block]:hover { background: none; }

/* Die beiden „+" an der Tabelle: schmale Leisten, dieselbe Bauart. */
.doc-table__add {
  --depth: 2px;
  --tint: var(--accent-app);
  position: absolute;
  font-weight: 600;
}
.doc-table__add:hover { background: none; color: var(--tint); }
/* Der Sockel ragt um --depth nach rechts unten – die Leisten rücken
   um genau so viel ein, sonst schöbe er Bildlaufleisten in die Tabelle. */
.doc-table__add--col { width: 18px; inset-inline-end: 2px; }
.doc-table__add--row { height: 18px; bottom: 2px; }

/* ---------- Das Link-Kästchen als Kachel ---------------------------------- */

.doc-link {
  --cut: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 12px 14px 12px 12px;
  background: var(--surface);
  transition: background-color var(--dur) var(--ease-out);
}

.doc-link:hover { background: var(--surface-2); }

/* Das Sechseck wie auf der Kachel: gefüllt in der Farbe des Bereichs,
   das Zeichen dunkel darauf. */
.doc-link__mark {
  width: 40px;
  height: 35px;
  background: var(--tone);
}

.doc-link__mark .doc-link__icon {
  width: 20px;
  height: 20px;
  background: var(--g-47, var(--bg));
}

.doc-link__text { gap: 3px; }

/* Oben der Name, darunter die Art in Mono – wie Name und Stand auf
   der Kachel. */
.doc-link__text .doc-link__name {
  order: -1;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-strong);
}

.doc-link__kind {
  font: 400 max(var(--fs-floor), 11.5px)/1.4 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.doc-link[data-doc-empty] .doc-link__mark { background: var(--text-subtle); }

/* ---------- Die verknüpfte Aufgabe als Kachel ----------------------------- */

.doc-b--linked::before {
  --cut: 14px;
  background: var(--surface);
}

.doc-b--linked:hover::before { background: var(--surface-2); }

.doc-b--linked:has(.doc-check.is-on)::before { background: var(--surface); }

.doc-task__hex { background: var(--tone); }
.doc-task__hex-icon { background: var(--g-47, var(--bg)); }
.doc-task__eye:hover .doc-task__hex,
.doc-task__eye:focus-visible .doc-task__hex { background: var(--tone); filter: brightness(1.1); }

.doc-task__kind {
  font: 400 max(var(--fs-floor), 11px)/1.3 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

/* ---------- E-ink ------------------------------------------------------- */

html[data-eink] .doc-link,
html[data-eink] .doc-b--linked::before { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; }
html[data-eink] .doc-link__mark,
html[data-eink] .doc-task__hex { background: #000000; }
html[data-eink] .doc-link__mark .doc-link__icon,
html[data-eink] .doc-task__hex-icon { background: #ffffff; }
html[data-eink] .doc-link__play::before,
html[data-eink] .doc-task__go::before,
html[data-eink] .doc-gutter__btn[data-add-block]::before,
html[data-eink] .doc-table__add::before { background: #000000; }
html[data-eink] .doc-link__play::after,
html[data-eink] .doc-task__go::after,
html[data-eink] .doc-gutter__btn[data-add-block]::after,
html[data-eink] .doc-table__add::after { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; }
html[data-eink] .doc-link__play .doc-link__glyph,
html[data-eink] .doc-task__go-glyph,
html[data-eink] .doc-gutter__btn[data-add-block] .doc-gutter__icon { background: #000000; }
html[data-eink] .doc-table__add { color: #000000; }

@media (prefers-reduced-motion: reduce) {
  .doc-link__play,
  .doc-task__go,
  .doc-gutter__btn[data-add-block],
  .doc-table__add { transition: none; }
  .doc-link__play:active,
  .doc-task__go:active,
  .doc-gutter__btn[data-add-block]:active,
  .doc-table__add:active { transform: none; }
}

/* =========================================================
   Adressen aus dem Netz (app/doc/embed.js)

   Lesezeichen und Video sind Flächen – Eckschnitt in zwei Lagen
   (Rand außen, Fläche innen; clip-path schnitte einen `border` an den
   Diagonalen weg). Ihre Knöpfe sind Rechtecke auf einem Sockel.

   Die Bühne des Videos ist ein schlichtes Rechteck und liegt mit
   Abstand im Schnitt der Karte: über und an den Spieler darf nichts,
   auch keine abgeschnittene Ecke (YouTube, Required Minimum
   Functionality). Mindestens 200 × 200 px, auch am Telefon in einem
   eingerückten Abschnitt.
   ========================================================= */

.doc-b--bookmark,
.doc-b--video { padding: 6px 0; }

/* ---------- Lesezeichen --------------------------------------------------- */

.doc-bk {
  --tone: var(--text-muted);
  --cut: 10px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 10px 8px 12px;
  clip-path: var(--cut-clip);
  background:
    linear-gradient(90deg, var(--tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 8%, var(--surface));
  transition: background-color var(--dur) var(--ease-out);
}

/* Das Zeichen der Seite: ihr Anfangsbuchstabe in ihrem Ton. Ein
   Quadrat ohne Schnitt – so klein schnitte die Diagonale in den
   Buchstaben (diligent-work, Größengrenze). */
.doc-bk__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  font: 600 16px/1 var(--font-mono);
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent);
}

.doc-bk__text { display: grid; gap: 2px; min-width: 0; }

.doc-bk__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-strong);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.doc-bk__site {
  overflow: hidden;
  font: 400 max(var(--fs-floor), 11.5px)/1.3 var(--font-mono);
  color: var(--text-subtle);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.doc-bk[data-bk-empty] .doc-bk__name { color: var(--text-muted); }

/* In der Leseansicht ist die ganze Karte der Link (app/doc/reader.js). */
.doc-read .doc-bk { cursor: pointer; }
.doc-read .doc-bk:hover {
  background:
    linear-gradient(90deg, var(--tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 15%, var(--surface));
}

/* ---------- Der Pfeil hinaus (Lesezeichen und Video) ----------------------- */

.doc-embed__out {
  --depth: 3px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  margin: 0 var(--depth) var(--depth) 0;
  color: var(--tint-ink);
  transition: transform var(--dur-fast) var(--ease-out);
}

.doc-embed__out::before,
.doc-embed__out::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.doc-embed__out::before {
  background: var(--tint-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.doc-embed__out::after {
  background: var(--tint-face);
  box-shadow: inset 0 0 0 1px var(--tint-edge);
  transition: background-color var(--dur) var(--ease-out);
}

.doc-embed__out:hover::after { background: var(--tint-hover); }
.doc-embed__out:active { transform: translate(var(--depth), var(--depth)); }
.doc-embed__out:active::before { opacity: 0; }
.doc-embed__out:focus-visible { outline: 2px solid var(--tint-ink); outline-offset: 3px; }

.doc-embed__out-ico { width: 18px; height: 18px; display: block; }

/* ---------- Video ------------------------------------------------------------ */

.doc-vid {
  --cut: 12px;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 10px;
  padding: 10px 12px 12px;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-app) 34%, transparent);
}

.doc-vid::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-app) 6%, var(--surface));
}

.doc-vid__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-inline-start: 4px;
}

.doc-vid__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--accent-app);
  background: color-mix(in srgb, var(--accent-app) 16%, transparent);
}

.doc-vid__mark-ico { width: 20px; height: 20px; display: block; }

.doc-vid__text { display: grid; gap: 2px; min-width: 0; }

.doc-vid__kind {
  overflow: hidden;
  font: 600 max(var(--fs-floor), 10.5px)/1.3 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-app);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.doc-vid__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-strong);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

/* Die Bühne: dunkel wie ein ausgeschalteter Bildschirm, nie geschnitten. */
.doc-vid__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 200px;
  min-height: 200px;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--bg) 82%, #000000);
  box-shadow: inset 0 0 0 1px rgba(var(--o), .08);
}

/* Shorts stehen hochkant. */
.doc-vid[data-vid-tall] .doc-vid__stage {
  width: min(100%, 240px);
  aspect-ratio: 9 / 16;
  justify-self: center;
}

.doc-vid__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000000;
}

/* Vor der Zustimmung: was „Play" auslöst, in einem Satz – darunter
   leise „Always allow". Eine einzige gefüllte Fläche: Play. */
.doc-vid__gate {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 34ch;
  padding: 18px 16px;
  text-align: center;
}

.doc-vid__play {
  --depth: 3px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0 var(--depth) var(--depth) 0;
  padding: 0 24px 0 20px;
  font: 600 16px/1 var(--font);
  color: var(--on-accent);
  transition: transform var(--dur-fast) var(--ease-out);
}

.doc-vid__play::before,
.doc-vid__play::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.doc-vid__play::before {
  background: color-mix(in srgb, var(--accent-deep) 55%, #000000);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.doc-vid__play::after {
  background: var(--accent-app);
  transition: filter var(--dur) var(--ease-out);
}

.doc-vid__play:hover::after { filter: brightness(1.08); }
.doc-vid__play:active { transform: translate(var(--depth), var(--depth)); }
.doc-vid__play:active::before { opacity: 0; }
.doc-vid__play:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }

.doc-vid__play-ico { width: 18px; height: 18px; display: block; }

.doc-vid__note {
  margin: 0;
  font-size: max(var(--fs-floor), 12.5px);
  line-height: 1.45;
  color: var(--text-muted);
}

.doc-vid__always {
  --depth: 2px;
  position: relative;
  isolation: isolate;
  min-height: 34px;
  margin: 0 var(--depth) var(--depth) 0;
  padding: 0 12px;
  font-size: max(var(--fs-floor), 12.5px);
  color: var(--text);
  transition: transform var(--dur-fast) var(--ease-out);
}

.doc-vid__always::before,
.doc-vid__always::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.doc-vid__always::before {
  background: var(--btn-quiet-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.doc-vid__always::after {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.doc-vid__always:hover::after { background: var(--surface-2); }
.doc-vid__always:active { transform: translate(var(--depth), var(--depth)); }
.doc-vid__always:active::before { opacity: 0; }
.doc-vid__always:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }

.doc-vid__gate.is-offline .doc-vid__note { color: var(--text-subtle); }

/* Ausgewählt im Editor: wie Linie und Notiz – Fläche dahinter, Kante darum. */
.doc-b--bookmark.is-marked::before,
.doc-b--video.is-marked::before {
  inset: -4px -8px;
  border-radius: 0;
  outline: 1.5px solid var(--accent-app);
  outline-offset: 0;
}

/* ---------- Eine Adresse als Text, beim Lesen ------------------------------ */

.doc-read a.doc-weblink {
  color: var(--accent-app);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.doc-read a.doc-weblink:hover { text-decoration-thickness: 2px; }

/* ---------- „Paste as" – dasselbe Menü wie die Befehle, schmaler ----------- */

.doc-slash--paste { width: min(320px, 92%); }

@media (pointer: coarse) {
  .doc-slash--paste .doc-slash__foot { display: none; }
}

/* ---------- Das Fenster hinter /video und /bookmark --------------------------- */

.doc-url { display: grid; gap: 16px; }

.doc-url__field { display: grid; gap: 6px; }

.doc-url__label {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.doc-url__input {
  --cut: 8px;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--field-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.doc-url__input:focus {
  background: color-mix(in srgb, var(--accent-deep) 14%, var(--field-bg));
  box-shadow: inset 0 -2px 0 var(--accent-app);
}

.doc-url__input::placeholder { color: var(--text-subtle); opacity: 1; }

.doc-url__hint {
  margin: -6px 0 0;
  min-height: 1.45em;
  font-size: max(var(--fs-floor), 12.5px);
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.doc-url__hint.is-off { color: var(--danger); }
.doc-url__hint.is-note { color: var(--text-strong); }

/* „Add" wartet auf eine Adresse – sichtbar matt, ohne einzusinken. */
.doc-url .doc-ask__btn[disabled] { opacity: .45; cursor: default; }
.doc-url .doc-ask__btn[disabled]:hover::after { filter: none; }
.doc-url .doc-ask__btn[disabled]:active { transform: none; }
.doc-url .doc-ask__btn[disabled]:active::before { opacity: 1; }

/* Im Blockmenü: Titel und Adresse. */
.doc-bm__title { min-height: 42px; font-size: 15px; }

.doc-bm__url {
  margin: 0;
  font: 400 max(var(--fs-floor), 12px)/1.45 var(--font-mono);
  color: var(--text-muted);
  overflow-wrap: anywhere;
  user-select: text;
}

/* ---------- E-ink ---------------------------------------------------------------- */

html[data-eink] .doc-bk,
html[data-eink] .doc-read .doc-bk:hover { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; clip-path: none; }
html[data-eink] .doc-bk__mark { color: #ffffff; background: #000000; box-shadow: none; }
html[data-eink] .doc-vid { background: #000000; }
html[data-eink] .doc-vid::before { background: #ffffff; }
html[data-eink] .doc-vid__mark { color: #ffffff; background: #000000; }
html[data-eink] .doc-vid__kind { color: #000000; }
html[data-eink] .doc-vid__stage { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; }
html[data-eink] .doc-vid__play { color: #ffffff; }
html[data-eink] .doc-vid__play::before,
html[data-eink] .doc-vid__play::after { background: #000000; }
html[data-eink] .doc-vid__always::before { background: #000000; }
html[data-eink] .doc-vid__always::after { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; }
html[data-eink] .doc-read a.doc-weblink { color: #000000; }
html[data-eink] .doc-url__input { background: #ffffff; clip-path: none; box-shadow: inset 0 0 0 2px #000000; }
html[data-eink] .doc-url__hint.is-off { color: #000000; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .doc-embed__out,
  .doc-vid__play,
  .doc-vid__always { transition: none; }
  .doc-embed__out:active,
  .doc-vid__play:active,
  .doc-vid__always:active { transform: none; }
}

/* ---------- Zwei Geräte, ein Absatz (Abgleich, R4 – app/sync/engine.js) -----
   Haben zwei Geräte denselben Absatz geändert, bleiben beide: der jüngere
   an seinem Platz, der andere direkt darunter, mit dieser leisen Zeile
   davor. Kein Alarm – nur, damit man sieht, warum etwas doppelt steht.
   Die Zeile verschwindet, sobald der Absatz selbst geändert wird. */
.doc-b[data-conflict] {
  padding-inline-start: 10px;
  box-shadow: inset 2px 0 0 var(--state-warn);
}
.doc-b[data-conflict]::after {
  content: attr(data-conflict);
  position: absolute;
  inset-inline-end: 0;
  top: -1.15em;
  font-size: max(var(--fs-floor), .68rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--state-warn);
  pointer-events: none;
}
.doc-b[data-conflict] + .doc-b,
.doc-b[data-conflict] { margin-top: 1.3em; }
html[data-eink] .doc-b[data-conflict] { box-shadow: inset 2px 0 0 #000000; }
html[data-eink] .doc-b[data-conflict]::after { color: #000000; }