/* =========================================================
   Life Archive – Bereichs-Gerüst: Topbar + Tableiste

   Beide Leisten sind fix: die Topbar klebt oben, die Tableiste
   unten – der Inhalt scrollt dazwischen durch. Es ist in jeder
   Umgebung dieselbe Leiste, auch auf Home; nur Zeichen und Farbe
   wechseln.

   TOPBAR

     [Sechseck]  Life Archive / Bereich              [Werkzeuge]
     ────────────────────────────────────────────────────────────

   Das Bereichszeichen sitzt links, mit seiner Mitte genau auf der
   Akzentlinie. Die Linie läuft von dort bis an den rechten Rand;
   Überschrift und Werkzeuge stehen im Band darüber. Kein Bogen, keine
   Kontur um das Zeichen, kein zweites Sechseck an seiner Ecke – das
   Zeichen ist das eine Sechseck der Leiste.

   Das Band über der Linie ist so hoch, dass ein Werkzeug mit Sockel
   darin oben und unten Luft hat (--sh-tool-h). Die Leiste hat die
   Farbe des Grundes und endet unten mit einem kurzen Verlauf, damit
   der Inhalt nicht an einer Kante abreißt, sondern unter ihr
   verschwindet.
   ========================================================= */

:root {
  --sh-rule-w:      2px;
  --sh-bar:         var(--g-37);    /* Fläche der Schiene am Rechner */
  --sh-fab-fill:    var(--g-40);
  --sh-fab-stroke:  var(--g-34);

  /* Halbe Höhe eines flat-top-Sechsecks: H = 0.866 · W, also 0.433 · W. */
  --sh-half:        .433;

  /* ---- Topbar --------------------------------------------------------- */
  --sh-mark:        clamp(56px, 15.4vw, 64px);   /* Breite des Zeichens */
  --sh-mark-h:      calc(var(--sh-mark) * .866);
  --sh-mark-x:      14px;                        /* linke Kante des Zeichens */
  --sh-tool-h:      30px;                        /* Höhe eines Werkzeugs */
  --sh-tool-depth:  3px;                         /* sein Sockel */
  /* Das Band über der Linie: über dem Werkzeug 10 px Luft, unter
     seinem Sockel ebenfalls 10 px bis zur Linie – oben und unten gleich
     viel. Vorher klebte der Knopf an der Linie. */
  --sh-top-rule-y:  calc(10px + var(--sh-tool-h) + var(--sh-tool-depth) + 10px);
  --sh-top-fade:    14px;
  /* Höhe der Leiste ohne den Streifen der Statusleiste: bis zur Linie,
     die untere Hälfte des Zeichens, dann der Verlauf. Andere Blätter
     richten sich danach (Termin-Streifen, Lesekopf, Lauf-Streifen). */
  --sh-top-h:       calc(var(--sh-top-rule-y) + var(--sh-mark-h) / 2 + var(--sh-top-fade));
  /* Wo die Überschrift beginnt: rechts neben dem Zeichen. */
  --sh-title-x:     calc(var(--sh-mark-x) + var(--sh-mark) + 14px);
  --sh-top-pad-r:   14px;

  /* ---- Tableiste ------------------------------------------------------ */
  --sh-fab:         62px;       /* Breite des Dreipunkt-Sechsecks */
  --sh-fab-gap:     9px;
  --sh-menu-w:      96px;       /* Breite seiner Zone am rechten Rand */
  --sh-fab-cx:      calc(var(--sh-menu-w) / 2);
  --sh-hex-fw:      calc(var(--sh-fab) + var(--sh-fab-gap) * 2.3094);
  --sh-rise:        calc(var(--sh-hex-fw) * var(--sh-half));
  --sh-tabs-body:   74px;       /* Höhe unterhalb der Linie */
  --sh-tab-max:     128px;      /* Höchstbreite eines Reiters */
  --sh-tabs-h:      calc(var(--sh-rise) + var(--sh-tabs-body));

  /* Was die Leiste unten wirklich verdeckt – ohne den Aufstieg des
     Sechsecks um den Dreipunkt-Knopf, der nichts verdeckt. Wer sich
     über der Leiste absetzen will (Fortschrittszeile des Readers,
     Streifen eines laufenden Workouts), meint diese Zahl. */
  --sh-tabs-clear:  calc(var(--sh-tabs-body) + var(--safe-bottom));
}

.shell[hidden] { display: none; }

/* =========================================================
   Topbar
   ========================================================= */

.sh-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: calc(var(--safe-top) + var(--sh-top-h));
  padding-top: var(--safe-top);
  /* Die Leiste nimmt ihre Klicks selbst, auch im Verlauf unten: was
     halb hinter ihr liegt, trifft man ohnehin nicht sicher. */
  pointer-events: auto;
}

/* Die Fläche: Farbe des Grundes, unten ein kurzer Verlauf. Als eigene
   Ebene, damit die Maske nur die Fläche trifft und nicht das Zeichen,
   das bis in den Verlauf hinunterreicht. */
.sh-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - var(--sh-top-fade)), #0000);
          mask: linear-gradient(to bottom, #000 calc(100% - var(--sh-top-fade)), #0000);
}

.sh-top__inner {
  position: relative;
  width: var(--shell);
  height: var(--sh-top-h);
  margin-inline: auto;
}

/* Die Akzentlinie: von der Mitte des Zeichens bis an den rechten Rand
   des Fensters, nicht nur der Spalte. Sie hängt an .sh-top (volle
   Breite); die Mitte des Zeichens rechnet sie aus der Spalte nach. */
.sh-top__rule {
  position: absolute;
  top: calc(var(--safe-top) + var(--sh-top-rule-y) - var(--sh-rule-w) / 2);
  inset-inline-start: calc(max(0px, (100% - var(--shell)) / 2) + var(--sh-mark-x) + var(--sh-mark) / 2);
  inset-inline-end: 0;
  height: var(--sh-rule-w);
  background: var(--accent-app);
  pointer-events: none;
  overflow: hidden;
}

/* Laden in Etappen (app/loader.js, seit 11.10.2026): solange ein Tipp
   oder ein Bildschirmwechsel auf den Rest der App wartet – meist nur
   Sekundenbruchteile nach dem Start –, läuft eine Lücke die Linie
   entlang, vom Zeichen weg. Eine Lücke in der Farbe des Grundes, kein
   Licht: die Linie ist auf Home weiß, ein helles Licht verschwände
   darauf. Nur transform: das rechnet der Grafikchip, auch während der
   Hauptfaden Skripte liest. */
.sh-top__rule::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, var(--bg) 55%, transparent);
  opacity: 0;
  transform: translateX(-100%);
}

html[data-la-wait] .sh-top__rule::after {
  opacity: .9;
  animation: la-wait-run 1.1s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes la-wait-run {
  to { transform: translateX(320%); }
}

/* Ohne Bewegung: die Linie wird still matter, solange gewartet wird. */
@media (prefers-reduced-motion: reduce) {
  html[data-la-wait] .sh-top__rule::after { animation: none; width: 100%; transform: none; opacity: .45; }
}
html[data-motion="reduce"][data-la-wait] .sh-top__rule::after { animation: none; width: 100%; transform: none; opacity: .45; }
html[data-eink] .sh-top__rule::after { display: none; }

html[data-la-wait] { cursor: progress; }

/* Das Bereichszeichen: Tippen führt an den Anfang des Bereichs, eine
   Sekunde Halten nach Hause (app/shell.js). */
.sh-top__mark {
  position: absolute;
  inset-inline-start: var(--sh-mark-x);
  top: calc(var(--sh-top-rule-y) - var(--sh-mark-h) / 2);
  z-index: 2;
  display: block;

  /* Eine Sekunde auf einem Link zu bleiben, ruft sonst das
     System-Menü („Link öffnen…") oder die Textauswahl auf den Plan. */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.sh-top__hex {
  --hex-w: var(--sh-mark);
  --hex-color: var(--accent-app);
  --hex-stroke: var(--accent-deep, var(--accent-app));
}

.sh-top__hex .hex__icon { width: 56%; height: 56%; }

/* Hover: das Zeichen wächst um seine eigene Mitte, statt zu steigen.
   Die Mitte sitzt genau auf der Akzentlinie – ein Anheben zerriss diese
   Deckung, ein Wachsen um die Mitte hält sie: die Linie trifft das
   Sechseck weiter genau auf halber Höhe. Dazu wird die Fläche eine
   Spur heller und das Zeichen darin wächst leicht mit, damit der
   Zustand auch ohne die Größe zu lesen ist.

   Nur, wo es wirklich einen Zeiger gibt – auf dem Telefon bliebe ein
   Hover nach dem Tippen sonst hängen. */
@media (hover: hover) {
  .sh-top__mark:hover .sh-top__hex {
    transform: scale(1.08);
    filter: brightness(1.08);
  }

  .sh-top__mark:hover .sh-top__glyph:not(.sh-top__glyph--home) { transform: scale(1.06); }
}

.sh-top__mark:active .sh-top__hex { transform: scale(.94); }

/* Fokus: ein klarer Rahmen um das Zeichen. Eckig, nicht rund – und
   deutlich genug für die Tastatur (WCAG 2.4.7). */
.sh-top__mark:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: 3px;
}

/* Bereichszeichen und Haus liegen in derselben Zelle des Sechsecks
   übereinander (.hex ist ein Grid mit place-items:center). Sichtbar
   ist immer nur eins: das Haus erst, wenn das Halten die Sekunde
   voll hat. */
.sh-top__glyph {
  grid-area: 1 / 1;
  /* transform steht mit in der Blende: bricht das Halten mitten im
     letzten Viertel ab, fahren beide Zeichen weich zurück statt zu
     springen. */
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.sh-top__glyph--home { opacity: 0; }

/* Ohne Bewegung (reduced motion, siehe unten) bleibt der harte
   Wechsel – dann ist .is-home der ganze Effekt. */
.sh-top__hex.is-home:not(.is-holding) .sh-top__glyph { opacity: 0; }
.sh-top__hex.is-home:not(.is-holding) .sh-top__glyph--home { opacity: 1; }

/* Mit Bewegung gehört der Wechsel ans ENDE des Haltens, nicht an
   seinen Anfang. Vorher sprang das Haus schon beim ersten Berühren
   hervor: die Geste war noch nicht halb geschehen und sah bereits
   erledigt aus, und das Bereichszeichen – das, was man festhält –
   war die ganze Sekunde nicht zu sehen.

   Die ersten drei Viertel steht deshalb weiter das Bereichszeichen.
   Erst im letzten Viertel (250ms von 1000) blenden die beiden
   ineinander: das eine schrumpft weg, das andere kommt eine Spur zu
   groß herein und setzt sich. Das fällt mit dem Einrasten der Drehung
   zusammen (sh-mark-spin/-pop, 85–100%) – ein Ankommen, kein Sprung. */
@keyframes sh-mark-glyph-out {
  0%, 75% { opacity: 1; transform: scale(1); }
  100%    { opacity: 0; transform: scale(.78); }
}

@keyframes sh-mark-glyph-in {
  0%, 75% { opacity: 0; transform: scale(1.22); }
  100%    { opacity: 1; transform: scale(1); }
}

/* Die Dauer steht neben der von sh-mark-spin und HOLD_MS in
   app/shell.js – alle drei sind dieselbe Sekunde. */
.sh-top__hex.is-holding.is-home .sh-top__glyph {
  animation: sh-mark-glyph-out 1000ms cubic-bezier(.4, 0, .2, 1) forwards;
}

.sh-top__hex.is-holding.is-home .sh-top__glyph--home {
  animation: sh-mark-glyph-in 1000ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Das Halten selbst: das Sechseck dreht sich über die Sekunde – erst
   zögernd, dann immer schneller, und ganz am Ende rastet es ein. Die
   Zeit wird dadurch sichtbar, bevor sie um ist, und das Einrasten
   fällt mit dem Haus und dem Klick zusammen (app/shell.js, HOLD_MS).
   Die Dauer steht bewusst hier neben HOLD_MS.

   90° – eine Vierteldrehung, keine ganze. Eine Sekunde ist kurz, und
   ein Zeichen, das darin einmal herumfährt, wirkt hektisch statt
   entschlossen.

   Warum nicht irgendein Winkel: --hex-clip (styles/base.css) setzt die
   Ecken auf 0%/50% und 100%/50%, also links und rechts – die Spitzen
   liegen waagerecht, oben und unten sind Kanten. Sechs Ecken, 60°
   auseinander. Damit unten eine Spitze steht, muss die Drehung auf
   „Vielfaches von 60° plus 30°" enden; unter einer vollen Umdrehung
   bleiben 30, 90, 150, 210, 270 und 330. 90° ist davon das, was man
   deutlich sieht, ohne dass es zappelt.

   Gedreht wird die Form, nicht das ganze Zeichen: die beiden Glyphen
   (Bereich und Haus) liegen als Geschwister daneben, und ein Haus,
   das am Ende um 30° schief steht, wäre kein Ankommen. */
@keyframes sh-mark-spin {
  /* Phase 1 – Anlauf: lange kaum etwas, dann immer schneller. */
  0%   { transform: rotate(0deg);
         animation-timing-function: cubic-bezier(.55, 0, .95, .35); }
  /* Phase 2 – der schnelle Teil, gleichmäßig durchgezogen. */
  85%  { transform: rotate(46deg);
         animation-timing-function: cubic-bezier(.25, 0, .35, 1); }
  /* Phase 3 – das Einrasten: der Bezier schießt über 90° hinaus und
     federt zurück, statt dass ein weiteres Bild den Überschwung
     festschreibt. So endet die Drehung garantiert genau bei 90°. */
  95%  { transform: rotate(78deg);
         animation-timing-function: cubic-bezier(.34, 1.6, .64, 1); }
  100% { transform: rotate(90deg); }
}

/* Der Stups liegt auf dem Zeichen selbst – nur Größe und Helligkeit,
   damit das Haus im letzten Bild gerade steht. */
@keyframes sh-mark-pop {
  0%   { transform: scale(1); filter: brightness(1);
         animation-timing-function: cubic-bezier(.55, 0, .95, .35); }
  /* Der Wert von --ease-out, ausgeschrieben: eine Variable als
     animation-timing-function innerhalb eines Keyframes lösen nicht
     alle Browser zuverlässig auf. */
  85%  { transform: scale(.94); filter: brightness(1.18);
         animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  95%  { transform: scale(1.09); filter: brightness(1.32);
         animation-timing-function: cubic-bezier(.34, 1.6, .64, 1); }
  100% { transform: scale(1); filter: brightness(1.14); }
}

.sh-top__hex.is-holding { animation: sh-mark-pop 1000ms linear forwards; }

/* Die Drehung sitzt eine Ebene tiefer, auf der Fläche mit dem
   clip-path. `.hex__shape` ist absolut auf inset: 0 gesetzt und dreht
   damit um die eigene Mitte. */
.sh-top__hex.is-holding .hex__shape {
  animation: sh-mark-spin 1000ms linear forwards;
}

/* ---------- Überschrift und Werkzeuge --------------------------------- */

.sh-top__bar {
  position: absolute;
  top: 0;
  inset-inline-start: var(--sh-title-x);
  inset-inline-end: var(--sh-top-pad-r);
  height: var(--sh-top-rule-y);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Beide Hälften der Überschrift sind Wege: „Life Archive" nach Hause,
   der Bereichsname an den Anfang des Bereichs. Sie sehen aus wie Text –
   dass sie reagieren, zeigt sich beim Berühren. */
.sh-top__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.005em;
  white-space: nowrap;
}

.sh-top__brand,
.sh-top__area {
  text-decoration: none;
  transition: opacity var(--dur) var(--ease-out);
  /* Die Fläche zum Antippen war nur 20 px hoch (WCAG 2.5.8 will 24).
     Innen mehr Luft, außen gleich viel zurück: sichtbar ändert sich
     nichts, getroffen wird leichter (10.10.2026). */
  padding-block: 6px;
  margin-block: -6px;
}

/* Wer weichen muss, wenn der Platz knapp wird: die Marke. Sie steht auf
   jedem Bildschirm gleich und ist gekürzt noch zu erraten; der Name
   des Bereichs sagt, wo man ist, und bleibt ganz. */
.sh-top__brand {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--text-strong);
}

.sh-top__slash {
  flex: none;
  font-weight: 400;
  color: var(--text-subtle);
}

.sh-top__area {
  flex: none;
  font-weight: 500;
  color: var(--text-muted);
}

a.sh-top__brand:hover,
a.sh-top__area:hover { opacity: .72; }

a.sh-top__brand:active,
a.sh-top__area:active { opacity: .55; }

/* Schmale Geräte (iPhone SE und kleiner): eine Stufe kleiner, damit
   „Life Archive" neben zwei Werkzeugen öfter ganz stehen bleibt. Reicht
   es trotzdem nicht, kürzt sich die Marke – nie der Bereichsname. */
@media (max-width: 360px) {
  .sh-top__title { font-size: 15px; gap: 5px; }
  .sh-top__bar { gap: 10px; }
  .sh-tools { gap: 8px; }
}

/* Werkzeuge des laufenden Bildschirms – Stern im Journal, Filter im
   Kalender, Edit auf Home – und als letzter der Handgriff zum
   Eintragen. Alle gleich gebaut: eckig, mit Sockel, sinken beim
   Drücken ein. */
.sh-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sh-tools:empty { display: none; }

/* Knopf und Sockel zusammen stehen mittig im Band – nicht der Knopf
   allein. Sonst läge der Sockel näher an der Linie als die Oberkante
   am Rand. */
.sh-top__bar > .sh-tools,
.sh-top__bar > .sh-tool { margin-bottom: var(--sh-tool-depth); }

/* Seit Night Pond (0.6.0 beta) getönt wie das „+" auf Home: Fläche im
   Ton des Ortes, Kante in voller Stärke, Sockel im tiefen Ton – auf Home
   weiß, im Journal Amber. Vorher eine graue Fläche (--surface-3), die
   neben Home aussah wie aus einer anderen App. Die Token --tint-* stehen
   in styles/pond.css und folgen der Wahl „Buttons". */
.sh-tool {
  --depth: var(--sh-tool-depth);
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  --btn-edge: var(--tint-edge);

  position: relative;
  isolation: isolate;
  flex: none;
  min-width: 34px;
  height: var(--sh-tool-h);
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tint-ink);
  font: 600 13px/1 var(--font);
  touch-action: manipulation;
  filter: var(--tint-glow);
  transition: transform var(--dur-fast) var(--ease-out);
}

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

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

.sh-tool::after {
  background: var(--btn-face);
  box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent);
  transition: background-color var(--dur) var(--ease-out);
}

.sh-tool:hover::after,
.sh-tool:focus-visible::after { background: var(--btn-face-hover); }
.sh-tool:active { transform: translate(var(--depth), var(--depth)); }
.sh-tool:active::before { opacity: 0; }

/* Ein Werkzeug mit Beschriftung (Edit, Done) bekommt mehr Luft seitlich,
   damit die Schrift nicht an den Kanten klebt. */
.sh-tool--text { padding: 0 13px; }

.sh-tool__icon {
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* Abgleichen (Home, neben Edit – app/home/hub.js, app/sync/now.js).
   Ein quadratisches Werkzeug; die beiden Zeichen liegen übereinander,
   damit der Wechsel zum Häkchen nichts verschiebt. Drehen nur, solange
   abgeglichen wird – ein Zeichen, das immer kreist, sagt nichts mehr. */
.sh-tool--sync { width: var(--sh-tool-h); padding: 0; }
.sh-sync__icon,
.sh-sync__done {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.sh-sync__done { opacity: 0; transform: scale(.4); }
.sh-tool--sync.is-done .sh-sync__icon { opacity: 0; transform: scale(.4); }
.sh-tool--sync.is-done .sh-sync__done { opacity: 1; transform: none; }

.sh-tool--sync[data-state="syncing"] .sh-sync__icon {
  animation: sh-sync-turn 900ms linear infinite;
}
@keyframes sh-sync-turn { to { transform: rotate(360deg); } }

/* Der Punkt an der Ecke: offline und „Server nicht erreichbar" still in
   Grau (offline ist normal, P1), ein Fehler in Amber – nie Rot. */
.sh-sync__dot {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  width: 7px;
  height: 7px;
  background: var(--text-muted);
  box-shadow: 0 0 0 2px var(--surface);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.sh-tool--sync[data-state="offline"] .sh-sync__dot,
.sh-tool--sync[data-state="unreachable"] .sh-sync__dot,
.sh-tool--sync[data-state="error"] .sh-sync__dot { opacity: 1; transform: none; }
.sh-tool--sync[data-state="error"] .sh-sync__dot { background: var(--c-journal); }
/* Ruhender Zugang (app/access.js): grau und still, auch über einem Fehler */
.sh-tool--sync[data-paused] .sh-sync__dot { opacity: 1; transform: none; background: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .sh-tool--sync[data-state="syncing"] .sh-sync__icon { animation: none; opacity: .55; }
}
html[data-motion="reduce"] .sh-tool--sync[data-state="syncing"] .sh-sync__icon { animation: none; opacity: .55; }

/* Ein eingeschaltetes Werkzeug (Filter an) – kräftiger getönt. */
.sh-tool.is-on {
  --btn-face: color-mix(in srgb, var(--accent-app) 34%, var(--surface));
  --btn-face-hover: color-mix(in srgb, var(--accent-app) 42%, var(--surface));
  color: var(--accent-app);
}

/* Eingeschaltet (Edit → Done): die Fläche trägt den Akzent, die Schrift
   die Tinte darauf. */
.sh-tool.is-active {
  --btn-face: var(--accent-app);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--accent-deep, var(--accent-app));
  --btn-edge: transparent;
  color: var(--on-accent);
  filter: none;
}

/* Der Handgriff zum Eintragen – gebaut wie „+ Add" im Kalender und
   „+ Log dinner" auf Home: volle Fläche in der Farbe des Bereichs,
   dunkle Tinte darauf, Plus und Wort. Er ist der Weg nach vorn in der
   Leiste; die übrigen Werkzeuge bleiben still und grau daneben.
   Vorher stand hier ein farbiges Plus auf grauem Grund – es sah aus
   wie ein Werkzeug unter vielen. */
.sh-tool--act {
  --btn-face: var(--accent-app);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
  --btn-edge: transparent;
  filter: none;
  padding: 0 12px 0 10px;
  gap: 6px;
  color: var(--on-accent);
  font-weight: 700;
}
.sh-tool--act:hover::after,
.sh-tool--act:focus-visible::after { filter: brightness(1.08); }
.sh-tool--act .sh-tool__icon { width: 14px; height: 14px; }

/* Auf dem Telefon, sobald ein zweites Werkzeug daneben steht (Filter im
   Kalender, Scanner in Nutrition): nur das Plus. Sonst müsste „Life
   Archive" gekürzt werden – die Fläche in der Bereichsfarbe sagt auch
   ohne Wort, dass hier eingetragen wird. */
@media (max-width: 440px) {
  .sh-tools:not(:empty) + .sh-tool--act { padding: 0 9px; }
  .sh-tools:not(:empty) + .sh-tool--act .sh-tool__label { display: none; }
  /* Ein langes Wort (Deutsch, Italienisch …) kürzte sonst den Schriftzug. */
  .sh-tool--act.sh-tool--terse { padding: 0 9px; }
  .sh-tool--act.sh-tool--terse .sh-tool__label { display: none; }
}

/* Sehr schmal: immer nur das Plus. */
@media (max-width: 360px) {
  .sh-tool--act { padding: 0 9px; }
  .sh-tool--act .sh-tool__label { display: none; }
}

/* `shell.track: false` – während des Eintragens gibt es nichts nachzutragen. */
.sh-tool[hidden] { display: none; }

/* Marke am Reiter – eckig, gelesen und nicht gedrückt. Sie trägt Zahl
   UND Wort („5 new"), weil „Guide" nicht sagt, was gezählt wird.

   .sh-tab__badge ist nur der Platz: von der rechten Schulter des
   Sechsecks bis knapp über den Reiter hinaus, nie bis an den ⋯-Knopf.
   Die Marke darin steht links (margin-right: auto); ist das Wort
   länger als der Platz (Spanisch, Pseudo-Sprache), gibt es keinen
   freien Raum mehr zu verteilen, flex-end greift, und sie wächst nach
   links über das Sechseck statt nach rechts in den Knopf. */
.sh-tab__badge {
  position: absolute;
  top: 8px;
  inset-inline-start: calc(50% + 7px);
  inset-inline-end: -12px;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.sh-tab__badge[hidden] { display: none; }

.sh-tab__badge-text {
  flex: none;
  margin-inline-end: auto;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--state-over);
  color: var(--on-accent);
  font: 700 max(var(--fs-floor), 10px)/17px var(--font-mono);
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   Tableiste
   ========================================================= */

/* Gleiches Prinzip wie oben: gefüllt ist nur die Fläche innerhalb
   der Akzentkontur, darüber ist die Leiste durchsichtig.

   Sie steht über dem Sheet des Dreipunkt-Knopfes (75): das Sheet hört
   über ihr auf, also bleibt sie sichtbar und bedienbar, während es
   offen ist. Durch die durchsichtigen Stellen fällt der Druck weiter
   auf den Hintergrund und schließt das Sheet. */
/* Die Leiste hat keine Fläche mehr und keine Linie, die sagt, wo sie
   aufhört. Der Inhalt läuft sichtbar unter ihr durch und wird dabei
   leicht verwischt – man sieht, dass da noch etwas ist, ohne dass es
   mit der Beschriftung um Aufmerksamkeit streitet.

   Anfassen lässt er sich dort aber nicht: `pointer-events: auto` liegt
   auf der ganzen Leiste, auch wo sie durchsichtig ist. Das ist Absicht.
   Was halb hinter einer Leiste liegt, trifft man ohnehin nicht sicher –
   ein Knopf, der zur Hälfte verdeckt ist und trotzdem reagiert, ist
   eine Falle, keine Freundlichkeit.

   Die Ausbuchtung um den Dreipunkt-Knopf ist mit der Linie zusammen
   weggefallen: sie war eine Aussparung IN der Linie, und ohne Linie
   hat sie nichts, worin sie aussparen könnte. */
.sh-tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  padding-bottom: var(--safe-bottom);
  pointer-events: auto;

  -webkit-backdrop-filter: blur(9px);
          backdrop-filter: blur(9px);

  /* Ein Hauch Fläche, damit die Unschärfe überhaupt etwas zu tun hat
     und die Beschriftung nicht auf wechselndem Untergrund steht.
     Kein Rand, keine Linie, keine Kante. */
  background: linear-gradient(to top,
              rgba(var(--o-bg), .72), rgba(var(--o-bg), .38));
}

/* Solange die Blockleiste über der Tastatur steht (app/doc/toolbar.js),
   tritt die Tableiste ab: sie läge sonst entweder hinter der Tastatur
   oder unter der Leiste, und zwei feste Streifen an derselben Kante
   sind einer zu viel. Sie kommt zurück, sobald der Cursor das
   Dokument verlässt. */
body.has-doc-bar .sh-tabs {
  display: none;
}

/* Dasselbe für jedes andere Feld: Die App verkleinert mit der Tastatur
   das Layout (interactive-widget=resizes-content, index.html), und eine
   Leiste mit bottom: 0 führe sonst auf der Tastatur mit nach oben –
   mitten über das Feld, in das man gerade tippt (Wasserziel im Sheet).
   Sie bleibt unten, also hinter der Tastatur; app/shell.js setzt
   `has-keyboard`, solange ein Textfeld den Fokus hat UND das Bild
   geschrumpft ist. */
body.has-keyboard .sh-tabs {
  display: none;
}

.sh-tabs__inner {
  position: relative;
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: stretch;
}

.sh-tabs__row {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

/* ---------- ein Reiter ---------------------------------------------------- */

/* Die Reiter teilen sich den Platz, aber keiner wird breiter als
   --sh-tab-max. Sonst würde ein Bereich mit nur einem Reiter ihn
   über die ganze Leiste ziehen; so sitzen sie immer links und
   wirken bei einem, zwei oder drei Reitern gleich.

   `color` ist hier die eine Stelle, an der der Zustand steht: Linie
   und Zeichen holen sich ihn über currentColor, die Beschriftung
   ohnehin. Ohne das müsste jede der drei Regeln den Wechsel einzeln
   nachziehen, und eine davon würde es irgendwann vergessen. */
.sh-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--sh-tab-max);
  height: var(--sh-tabs-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text);
  transition: color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-spring);
}

.sh-tab.is-on { color: var(--accent-app); }

/* Die Farbe allein trug den Zustand nicht überall: auf Home ist der
   Akzent Weiß, im Archive (seit 0.6.0 beta ein eigener Bereich) ein
   helles Grau – beide fast so hell wie die Schrift der anderen Reiter,
   das Grau sogar etwas dunkler. Der aktive Reiter füllt sein Sechseck
   deshalb leicht in seiner Farbe und setzt die Beschriftung kräftiger.
   Das gilt in jedem Bereich, auch für eigene Farben aus den
   Einstellungen. */
.sh-tab.is-on .sh-tab__ring polygon { fill: color-mix(in srgb, currentColor 20%, transparent); }
.sh-tab.is-on .sh-tab__label { font-weight: 600; }

/* Das Sechseck eines Reiters, mit der Spitze nach oben – anders
   gedreht als die flach liegenden Sechsecke der Bereiche. Ein Reiter
   ist kein Bereich, und die Drehung sagt das, ohne dass jemand es
   erklären muss. */
.sh-tab__hex {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: calc(32px * 1.1547);
}

.sh-tab__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sh-tab__ring polygon {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sh-tab__icon {
  position: relative;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* Ein langer Name („Annotations") ist breiter als sein Viertel der
   Leiste. Statt ihn abzuschneiden, darf die Beschriftung ein Stück über
   den Reiter hinausragen: daneben stehen kurze Namen, dort ist Platz. */
.sh-tab__label {
  max-width: max(100%, 92px);
  font-size: max(var(--fs-floor), 11.5px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.sh-tab:hover  { transform: translateY(-2px); }
a.sh-tab:active { transform: scale(.94); transition-duration: var(--dur-fast); }

.sh-tab.is-soon { cursor: default; color: var(--text-disabled); }

/* ---------- Zone des Dreipunkt-Knopfes ------------------------------------ */

.sh-tabs__menu {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sh-menu-w);
  height: var(--sh-tabs-body);
}

/* Der Dreipunkt-Knopf. Er sitzt jetzt IN der Leiste statt halb darüber –
   ohne Linie gibt es nichts mehr, worüber er hinausragen könnte.

   Er öffnet die Einstellungen dieses Bereichs (früher das Zahnrad oben
   rechts). Ein Sechseck mit der Spitze nach oben wie die Reiter, aber
   gefüllt statt nur gezeichnet: er schaltet nichts um, er macht etwas
   auf. Die Punkte tragen die Akzentfarbe – das Einzige an ihm, was
   sagt, zu welchem Bereich er gehört. */
.sh-fab {
  position: relative;
  width: var(--sh-fab);
  height: calc(var(--sh-fab) * 1.1547);
  display: grid;
  place-items: center;
  clip-path: var(--hex-clip-pointy);
  background: var(--sh-fab-stroke);
  transition: transform var(--dur) var(--ease-spring);
}

.sh-fab__face {
  position: absolute;
  inset: calc(var(--sh-fab) * var(--hex-rim-ratio));
  clip-path: var(--hex-clip-pointy);
  background: var(--sh-fab-fill);
  transition: background-color var(--dur) var(--ease-out);
}

.sh-fab:hover .sh-fab__face { background: var(--g-36); }
.sh-fab:active { transform: scale(.92); transition-duration: var(--dur-fast); }

.sh-fab__dots {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  transition: transform var(--dur) var(--ease-spring);
}

.sh-fab__dots i {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--accent-app);
}

.sh-fab[aria-expanded="true"] .sh-fab__dots { transform: rotate(90deg); }


/* =========================================================
   Seite unter den Leisten
   ========================================================= */

body[data-shell] .app {
  padding-top: calc(var(--safe-top) + var(--sh-top-h) + 14px);
  /* --toast-space: solange unten eine Meldung steht, rollt das Ende
     der Seite über sie hinaus (app/toast.js) */
  padding-bottom: calc(var(--safe-bottom) + var(--sh-tabs-h) + 26px + var(--toast-space, 0px));
}

/* Der eigene Kopfabstand der Modulseite entfällt – den macht jetzt
   die Leiste. */
body[data-shell] .mnt { padding-top: 0; }

/* Das Sheet liegt unter der Tableiste; sein Inhalt muss trotzdem
   vollständig erreichbar bleiben. */
body[data-shell] .sheet__body {
  padding-bottom: calc(var(--sh-tabs-h) + var(--safe-bottom) + 18px + var(--toast-space, 0px));
}

/* =========================================================
   Bereichs-Einstellungen (Zahnrad in der Topbar)
   ========================================================= */

.sh-set { width: min(460px, 100%); }

.sh-set__body { padding: 4px 18px 22px; display: grid; gap: 18px; }

/* Bereichseigene Aktionen ganz oben – das, was früher im
   Dreipunkt-Menü der Kopfzeile stand. */
.sh-set__acts { display: grid; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .sh-fab__dots,
  .sh-fab__home,
  .sh-tab__body,
  .sh-tab__icon,
  .sh-top__glyph,
  .sh-cog__icon { transition: none; }

  /* Das Halten wirkt weiter, es sieht nur nicht mehr danach aus –
     und klingt auch nicht danach (app/sound.js schweigt hier). */
  .sh-top__hex.is-holding,
  .sh-top__hex.is-holding .hex__shape { animation: none; }

  /* Ohne die Blende bleibt nur der harte Wechsel – aber er muss
     bleiben, sonst zeigt das Zeichen beim Halten gar kein Haus. */
  .sh-top__hex.is-holding.is-home .sh-top__glyph,
  .sh-top__hex.is-holding.is-home .sh-top__glyph--home { animation: none; }
  .sh-top__hex.is-home .sh-top__glyph { opacity: 0; transform: none; }
  .sh-top__hex.is-home .sh-top__glyph--home { opacity: 1; transform: none; }
}

/* =========================================================
   Ab 900: aus der Leiste wird eine Schiene

   Es bleibt DIE EINE Leiste – sie steht nur nicht mehr unten quer,
   sondern links hochkant. Kein zweites Markup, keine zweite Logik:
   app/shell.js baut weiter genau dasselbe, und was hier passiert,
   ist ein Umlegen derselben Teile.

   Was sich dreht:

     Akzentlinie   lief waagerecht über die Tableiste – läuft jetzt
                   senkrecht an der rechten Kante der Schiene. Der
                   aktive Reiter legt weiter sein eigenes Stück in
                   --accent-deep darüber (.sh-tab__rule), also
                   markiert weiterhin die Farbe, nicht die Dicke.

     Reiter        standen nebeneinander – stehen jetzt untereinander.
                   Symbol über Text bleibt, wie es war.

     Dreipunkt     saß rechts in der Leiste – sitzt jetzt unten in der
                   Schiene.

     Topbar        bleibt, wie sie ist: Zeichen links auf der Linie,
                   Überschrift daneben. Sie läuft über die volle
                   Breite, das Zeichen steht über der Schiene, und
                   die Schiene beginnt unter der Topbar.

   Stapelhöhe: die Schiene geht hier von 80 auf 65 herunter. Unten
   stand sie über dem Sheet (75), weil sie dort sichtbar bleiben
   sollte, während das Sheet davor hochfuhr. Auf dem Rechner ist das
   Sheet ein Dialog in der Mitte – der deckt zu, was hinter ihm liegt,
   und ein Druck auf die Schiene schließt ihn. Nebenbei löst das die
   zweite Frage: die Topbar (70) liegt über der Schiene.
   ========================================================= */

@media (min-width: 900px) {
  :root {
    --sh-mark:       64px;
    /* Das Zeichen steht mittig über der Schiene, die Überschrift
       direkt daneben – dieselbe Leiste wie am Telefon, nur breiter. */
    --sh-mark-x:     calc((var(--rail-w) - var(--sh-mark)) / 2);
    --sh-title-x:    calc(var(--rail-w) + 8px);
    --sh-top-pad-r:  24px;
    /* Die Schiene beginnt unter der Topbar; oben braucht sie nur Luft. */
    --sh-rail-head:  18px;

    /* Unten steht nichts mehr im Weg. Das räumt in einem Zug den
       Fußabstand der Seite, den des Sheets, den Sitz des
       Lauf-Streifens (.fit-chip) und den der Zielerinnerung
       (.rd-remind) – sie alle rechnen mit --sh-tabs-h. */
    --sh-tabs-h:     0px;
    --sh-tabs-clear: 0px;
  }

  /* Die Seite rückt um die Schiene ein. Das steht am body und nicht
     an .app, damit `margin-inline: auto` dort weiter zentriert –
     .app und die feste Topbar treffen sich so auf derselben Mitte,
     ohne dass eine von beiden 100vw und die Bildlaufleiste raten
     muss. Ohne Umgebung (Anmeldung) gibt es keine
     Schiene und also auch keinen Einzug. */
  body[data-shell] { padding-inline-start: var(--rail-w); }

  /* ---------- die Schiene ------------------------------------------------ */

  .sh-tabs {
    inset: 0 auto 0 0;
    z-index: 65;
    width: var(--rail-w);
    padding-bottom: 0;
    background: var(--sh-bar);
    pointer-events: auto;
  }

  /* Die Blockleiste des Editors trat unten gegen die Tableiste an –
     zwei feste Streifen an derselben Kante. Hier stehen sie sich
     nicht mehr im Weg: die eine links, die andere unten im
     Inhaltsbereich. Also bleibt die Schiene stehen. */
  body.has-doc-bar .sh-tabs,
  body.has-keyboard .sh-tabs { display: block; }

  /* Aus dem Streifen über dem Home-Indikator wird die durchgehende
     Akzentlinie an der rechten Kante. Ein Element, eine Linie – die
     Stücke, die vorher Reihe und Menüzone einzeln beisteuerten,
     treten dafür ab (weiter unten). */
  .sh-tabs::after {
    inset: 0 0 0 auto;
    width: var(--sh-rule-w);
    height: auto;
    background: var(--accent-app);
  }

  .sh-tabs__inner {
    width: 100%;
    height: 100%;
    padding-top: var(--sh-rail-head);
    flex-direction: column;
    align-items: stretch;
  }

  /* Über der Linie liegen – sonst deckt ::after (im Markup hinter
     allem) das Stück des aktiven Reiters zu. */
  .sh-tabs__row {
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    /* Mehr Reiter als Platz: der Reader hat vier, die passen. Ein
       kurzes Fenster in der Höhe soll trotzdem nichts abschneiden. */
    overflow-y: auto;
    scrollbar-width: none;
  }

  .sh-tabs__row::-webkit-scrollbar { display: none; }

  /* Die Grundlinie der Reihe lief waagerecht über deren Oberkante.
     Senkrecht deckt sie ::after ab – ein Strich genügt. */
  .sh-tabs__row::before { content: none; }

  .sh-tab {
    flex: none;
    max-width: none;
    height: var(--sh-tabs-body);
  }

  /* Das eigene Stück der Linie kippt mit: aus einem Strich über dem
     Reiter wird einer an seiner rechten Kante. Der aktive färbt ihn
     weiter in --accent-deep – die Markierung ist dieselbe. */
  .sh-tab__rule {
    top: 0;
    bottom: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: var(--sh-rule-w);
    height: auto;
  }

  a.sh-tab:hover .sh-tab__body  { transform: translateX(2px); }
  a.sh-tab:active .sh-tab__body { transform: scale(1.08); }

  /* Die Reihe rollt hier (overflow-y), schneidet also auch seitlich ab:
     die Marke bleibt innerhalb der Schiene, vor ihrer Linie. */
  .sh-tab__badge { inset-inline-end: 6px; }

  /* ---------- Dreipunkt am Fuß der Schiene ------------------------------- */

  .sh-tabs__menu {
    width: 100%;
    height: auto;
    margin-top: auto;
    padding: 20px 0 calc(20px + var(--safe-bottom));
    display: grid;
    place-items: center;
    z-index: 1;
  }

  .sh-fab {
    position: relative;
    inset-inline-start: auto;
    top: auto;
  }

  /* ---------- Topbar über der ganzen Breite ------------------------------ */

  /* Die Topbar bleibt, wie sie am Telefon ist: Zeichen links, Linie,
     Überschrift. Sie läuft über die ganze Breite, das Zeichen steht
     über der Schiene, und die Schiene beginnt darunter. */
  .sh-top__inner { width: 100%; }

  .sh-top__rule { inset-inline-start: calc(var(--sh-mark-x) + var(--sh-mark) / 2); }

  .sh-tabs { top: calc(var(--safe-top) + var(--sh-top-h)); }


  /* ---------- Sprungmarke ------------------------------------------------- */

  body[data-shell] .skip-link { inset-inline-start: calc(50% + var(--rail-w) / 2); }
}

/* ---------- Die Reiter: Rahmen dünner, Zeichen größer -------------------
   Der erste Wurf war grob falsch. `vector-effect: non-scaling-stroke`
   hält die Linienstärke in BILDSCHIRM-Pixeln fest, nicht in denen des
   viewBox – aus stroke-width 6 wurden also 6 echte Pixel auf einem
   Sechseck von 32 px Breite. Ein Fünftel der Breite war Rahmen, und
   das Zeichen im Rest sah verloren aus.

   Ohne die Zeile skaliert die Linie mit: 7 von 100 viewBox-Einheiten
   auf 28 px sind knapp 2 px. Das Sechseck ist zugleich kleiner
   geworden und das Zeichen darin deutlich größer – vorher 15 px in
   32 px Breite, jetzt 17 px in 28 px. */

.sh-tab__hex {
  width: 28px;
  height: calc(28px * 1.1547);
}

.sh-tab__ring polygon {
  stroke-width: 7;
  vector-effect: none;
}

.sh-tab__icon {
  width: 17px;
  height: 17px;
}

.sh-tab { gap: 4px; }

/* ---------- Der Dreipunkt-Knopf sitzt zu tief --------------------------
   Er stand vorher halb über der Leiste und damit optisch höher als die
   Reiter. In der Mitte der Leiste wirkt er, als wäre er nach unten
   gerutscht. Er geht deshalb wieder ein Stück hinauf – nicht über die
   Leiste hinaus, aber über die Reiterzeile. Die Ränder links und
   rechts bleiben, wie sie waren (--sh-menu-w). */
.sh-tabs__menu { align-items: start; padding-top: 4px; }

.sh-fab { top: -10px; }

/* ---------- Die Unschärfe: weicher und schwächer -----------------------
   Sie lag als voller Block auf der ganzen Leiste und setzte an ihrer
   Oberkante hart ein – eine unsichtbare Leiste mit sichtbarer Kante,
   also genau das, was sie nicht sein sollte.

   Jetzt liegt sie auf einem eigenen Feld, das über die Leiste
   hinausragt und nach oben ausgeblendet wird. Die Maske nimmt dabei
   auch die Unschärfe mit: oben ist gar keine, unten die volle. Sie
   beginnt damit nirgends, sie wird. */

.sh-tabs {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background: none;
}

.sh-tabs::before {
  content: "";
  position: absolute;
  inset: -26px 0 0 0;
  z-index: -1;
  pointer-events: none;

  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);

  background: linear-gradient(to top,
              rgba(var(--o-bg), .46), rgba(var(--o-bg), 0));

  -webkit-mask: linear-gradient(to top, #000 45%, #0000 100%);
          mask: linear-gradient(to top, #000 45%, #0000 100%);
}

/* Solange die Blockleiste steht, braucht die Seite unten Luft: sonst
   kann die letzte Zeile nicht ueber die Leiste gezogen werden, und man
   schreibt hinter ihr (app/doc/toolbar.js, keepCaret). --kb-room ist
   gemessen: Tastatur + Leiste + Luft. Die pauschalen 40vh allein waren
   am iPhone kleiner als Tastatur und Leiste zusammen. */
body[data-shell].has-doc-bar .app {
  padding-bottom: max(40vh, var(--kb-room, 0px) + 24px);
}

/* Marke einer Aktion in der Farbe ihres Bereichs (--act-tone, gesetzt
   von actionsMarkup). Mit Zeichen wird die Marke zur Kachel: getönte
   Fläche, Zeichen in voller Farbe – wie die Mahlzeitkacheln auf Today. */
.sh-set__acts .opt-btn__mark { background: var(--act-tone, var(--accent-app)); }

.sh-set__acts .opt-btn__mark--icon {
  position: relative;
  width: 34px;
  height: 34px;
  background: color-mix(in srgb, var(--act-tone, var(--accent-app)) 18%, transparent);
}

.sh-set__acts .opt-btn__mark--icon::after {
  content: '';
  position: absolute;
  inset: 8px;
  background: var(--act-tone, var(--accent-app));
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.opt-btn__text { display: grid; gap: 2px; text-align: start; min-width: 0; }
.opt-btn__label { font-size: 16px; color: var(--text-strong); }
.opt-btn__hint { font-size: 12.5px; color: var(--text-muted); }

html[data-eink] .sh-set__acts .opt-btn__mark--icon { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
html[data-eink] .sh-set__acts .opt-btn__mark--icon::after { background: currentColor; }

/* ---------- Zurück (LA.shell.setBack) ------------------------------------

   Links vor der Überschrift: ein Werkzeug wie die rechts – eckig, mit
   Sockel –, beschriftet mit dem Ort, zu dem es führt („Notes",
   „Board"). Auf dem Telefon weicht dafür „Life Archive /"; der Name
   des Bereichs bleibt stehen und sagt weiter, wo man ist. */

.sh-back { flex: none; display: flex; align-items: center; }
.sh-back:empty { display: none; }

.sh-top__bar > .sh-back { margin-bottom: var(--sh-tool-depth); }

/* Zurück ist die stille Stufe: keine Fläche, nur eine Kante – wie
   „Later" auf Home. Wer geht, soll nicht lauter sein als wer handelt. */
.sh-back__btn {
  --btn-face: transparent;
  --btn-face-hover: rgba(var(--o), .10);
  --btn-lift: rgba(var(--o), .22);
  --btn-edge: rgba(var(--o), .26);
  padding: 0 11px 0 8px;
  gap: 6px;
  color: var(--text);
  filter: none;
}
.sh-back__icon { width: 14px; height: 14px; }
.sh-back__label { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
  .sh-top__bar.has-back .sh-top__brand,
  .sh-top__bar.has-back .sh-top__slash { display: none; }
}

/* ---------- Die Demo (seit 12.10.2026) ----------------------------------------
   Der Testaccount heißt „Demo" und soll auf JEDEM Bildschirm erkennbar
   sein, ohne Platz zu nehmen (app/account/screen.js, A.demo):
   1. ein Schild vor dem Titel, wo sonst „Life Archive" steht – eine stille
      Stufe wie „‹ Back" (Kante, keine Fläche), in Amber, mit einem
      Stück Absperrband davor und einem Pfeil durch die Tür dahinter; es
      ist der Weg hinaus: Tippen führt zurück an den Anfang des Tors
      („Who are you?"). „Life Archive" bleibt daneben stehen und führt wie
      überall nach Home – bei knappem Platz kürzt es sich wie sonst auch
      (seit 13.10.2026; vorher wich es dem Schild, und Home war nur noch
      durch Halten des Zeichens zu erreichen);
   2. die Linie unter der Topbar gestrichelt – dasselbe Band, quer über
      die ganze Breite. Als Maske, damit Verlauf und Schein (Look › Line)
      bleiben. */
.sh-demo {
  /* Eine deckende Fläche: durch eine durchsichtige schiene der Sockel. */
  --btn-face: color-mix(in srgb, var(--state-warn) 10%, var(--bg));
  --btn-face-hover: color-mix(in srgb, var(--state-warn) 20%, var(--bg));
  --btn-lift: color-mix(in srgb, var(--state-warn) 38%, var(--bg));
  --btn-edge: color-mix(in srgb, var(--state-warn) 70%, transparent);
  padding: 0 10px 0 8px;
  gap: 6px;
  color: var(--state-warn);
  filter: none;
  font: 700 11px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sh-demo__tape {
  flex: none;
  width: 12px;
  height: 12px;
  background: repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 4.5px);
}
.sh-demo__word { white-space: nowrap; }
.sh-demo__out {
  flex: none;
  width: 12px;
  height: 12px;
  margin-inline-start: 1px;
  opacity: .85;
  transition: transform var(--dur) var(--ease-out);
}
/* Die Tür gibt nach: der Pfeil rückt ein Stück hinaus. */
.sh-demo:hover .sh-demo__out,
.sh-demo:focus-visible .sh-demo__out { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .sh-demo__out { transition: none; } }
html[data-motion="reduce"] .sh-demo__out { transition: none; }

/* Am Telefon passen Schild, „Life Archive", Bereichsname und „+" nicht
   in eine Zeile (gemessen bei 375 px: die Marke schrumpfte auf „l").
   In der Demo weicht dort der Bereichsname: welcher Bereich es ist, sagen
   das Zeichen, die Farbe und der Reiter unten; der Weg nach Home in einem
   Tipp hat sonst keinen Platz. Mit „‹ Back" bleibt alles wie überall
   (dann weicht die Marke, Regel oben). */
@media (max-width: 560px) {
  html[data-demo] .sh-top__bar:not(.has-back) .sh-top__slash,
  html[data-demo] .sh-top__bar:not(.has-back) .sh-top__area { display: none; }
}

html[data-demo] .sh-top__rule {
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 19px);
          mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 19px);
}

html[data-eink] .sh-tool.sh-demo { color: #000000; --btn-face: #ffffff; --btn-face-hover: #eeeeee; --btn-edge: #000000; }