/* =========================================================
   Life Archive – das Menü des zentralen Knopfes

   Aus dem kleinen Sheet ist ein fast bildschirmhohes geworden.
   Es bleibt ein Bottom-Sheet: Griff oben, abgerundete Kanten,
   nach unten wischen schließt. Die Grundzüge stehen weiter in
   styles/components.css, hier nur, was dazugekommen ist.
   ========================================================= */

/* Das Sheet liegt über der Kopfzeile (die steht auf 70). Sonst fängt
   sie die Klicks oberhalb des Sheets ab, und ein Druck daneben
   schließt es nicht – was die naheliegendste Geste ist.
   Die Tableiste unten ist die Ausnahme: die steht in shell.css über
   dem Sheet und bleibt sichtbar und bedienbar. */
.sheet { z-index: 75; }

/* Die Blockleiste eines Editors (.doc-bar, z-index 76) gehört zum
   Schreiben. Steht das Sheet offen, wird nicht geschrieben – sonst
   läge die Leiste über dem unteren Rand des Sheets. */
body:has(#sheet:not([hidden])) .doc-bar { visibility: hidden; }

.sheet__panel {
  display: flex;
  flex-direction: column;
  /* Deutlich unter der Kopfzeile beginnen: darüber bleibt Hintergrund
     sichtbar, und dass ein Druck daneben schließt, sieht man auch. */
  height: min(74dvh, calc(100dvh - var(--safe-top) - 150px));
  padding: 10px 0 0;
  overflow: hidden;
}

/* In einem Bereich fährt das Sheet hinter der Tableiste hoch: es reicht
   bis zur Unterkante des Bildschirms, die Leiste liegt aber darüber
   (z-index in shell.css) und ihr Kreis überdeckt die Kante. Damit die
   letzte Zeile nicht darunter verschwindet, endet der Inhalt früher. */
body[data-shell] .sheet__body {
  padding-bottom: calc(24px + var(--safe-bottom) + var(--sh-tabs-h));
}

/* Ist die Tastatur offen, steht die Tableiste nicht da (shell.css) –
   der Platz für sie gehört dann dem Feld, in das man tippt. */
body[data-shell].has-keyboard .sheet__body {
  padding-bottom: 24px;
}

/* Während der Wischgeste hängt das Sheet am Finger, ohne Nachlauf. */
.sheet__panel.is-dragging {
  transition: none;
  animation: none;
}

.sheet__grip {
  flex: none;
  margin: 4px auto 10px;
  cursor: grab;
  touch-action: none;
}

.sheet__grip::before {
  /* größere Trefferfläche als der sichtbare Strich */
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  height: 54px;
}

.sheet__panel .sheet__grip { position: relative; }

/* ---------- Reiterleiste ------------------------------------------------------ */

/* Kopf des Sheets: Haus links, Account und Bereiche in der Mitte,
   Einstellungen rechts.

   Die beiden äußeren Spalten sind über `1fr` gleich breit – dadurch
   steht die Mitte auch dann wirklich in der Mitte des Sheets, wenn
   links ein Knopf steht und rechts einer, aber unterschiedlich
   breite. Ein `justify-content: space-between` würde die Mitte
   stattdessen zwischen die Nachbarn schieben. */
.sheet-head {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--line);
  touch-action: none;
}

.sheet-head__side { display: flex; }
.sheet-head__side--end { justify-content: flex-end; }

.sheet-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  touch-action: none;
}

/* .sheet-tab: Rechteck mit Eckschnitt und Sockel wie jeder andere
   Zeichen-Knopf – der Bauplan steht in styles/components.css. Hier
   standen 12 px Radius und ein Rahmen; beide haben den gemeinsamen
   Bauplan überstimmt, weil sheet.css später geladen wird. Genau das
   waren die runden Knöpfe im Kopf des Sheets. */
.sheet-tab__icon {
  width: 22px;
  height: 22px;
  background: var(--text-dim);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  transition: background-color var(--dur) var(--ease-out);
}

.sheet-tab:hover .sheet-tab__icon { background: var(--text); }
.sheet-tab.is-on .sheet-tab__icon { background: var(--accent-app, #c7b3ff); }

/* ---------- Inhalt ------------------------------------------------------------- */

.sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px calc(24px + var(--safe-bottom));
  scrollbar-width: thin;
}

.sheet-note {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-faint);
}

/* ---------- Bereiche mit Schnellfunktionen -------------------------------------- */

/* ---------- Account (Platzhalter) ------------------------------------------------ */

.sheet-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
}

.sheet-empty__mark {
  width: 46px;
  height: 46px;
  background: var(--line-strong);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.sheet-empty__title { font-size: 17px; color: var(--text); }
.sheet-empty__text { max-width: 34ch; font-size: 13px; line-height: 1.6; color: var(--text-faint); }

/* ---------- Layer ------------------------------------------------------------------
   Derselbe Editor wie „Edit" auf Home – Kacheln, Griff, Hide/Show –, die
   Formen stehen in styles/home.css. Hier nur, was das Sheet anders hat:
   seine Fläche ist selbst --surface, also treten die Kacheln eine Stufe
   heller hervor. */

.sheet .hb-tile,
.sheet .hb-switch { background: var(--surface-2); }
.sheet .hb-tile:hover { background: var(--surface-3); }
.sheet .hb-layout { display: grid; gap: 24px; }

/* ---------- Einstellungen ---------------------------------------------------------- */

/* Farben je Bereich (App › Area colors, aufgeklappt) */

.set-colors { display: grid; gap: 8px; }

.set-color {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--field-bg, var(--g-47));
}

.set-color__name {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-swatch {
  position: relative;
  width: 34px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  cursor: pointer;
}

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

.set-reload {
  width: 28px;
  height: 26px;
  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), transform var(--dur) var(--ease-out);
}

.set-reload:hover { background: var(--text); }
.set-reload:active { transform: rotate(-180deg); }

/* Abweichende Farbe: der Pfeil zeigt, dass es etwas zurückzusetzen gibt. */
.set-reload.is-on { background: var(--accent-app, #c7b3ff); }

/* Platzhalterzeilen */

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
}

.set-row:last-child { border-bottom: 0; }

.set-row__body { display: grid; gap: 2px; min-width: 0; }
.set-row__name { font-size: 14px; color: var(--text-dim); }
.set-row__hint { font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

/* Zeile mit Auswahl - der dritte Zeilentyp neben Schalter und
   Platzhalter. Das Feld hält sich an die Breite, die ihm bleibt: der
   Name links darf nicht wegen eines langen Notiztitels umbrechen. */
.set-row__select {
  flex: none;
  max-width: 48%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3, var(--surface));
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  text-overflow: ellipsis;
}

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

/* =========================================================
   Ab 900: aus dem Bottom-Sheet wird ein Dialog

   Am Telefon fährt das Sheet von unten hoch, weil dort der Daumen
   ist. Am Rechner ist dort niemand: ein Blatt, das über die ganze
   Fensterbreite von der Unterkante hochkommt, ist auf 1280px keine
   Geste mehr, sondern eine Wand.

   Es wird deshalb zu dem, was ein Sheet auf einem großen Bildschirm
   ist – ein Dialog in der Mitte, wie ihn iPadOS zeigt. Alles, was
   daran Sheet war, bleibt: der Griff oben, das Ziehen nach unten
   zum Schließen, der Druck daneben, die Höhengrenze, der Inhalt der
   scrollt. Kein Zeilchen JavaScript weiß davon (app/sheet.js zieht
   weiter mit `translateY` am Panel – das stimmt hier genauso).
   ========================================================= */

@media (min-width: 900px) {
  .sheet { align-items: center; }

  /* Seit das Sheet alle Einstellungen eines Bereichs trägt (Rechner,
     Lebensmittelliste, Gruppen), ist ein 520 px schmaler Dialog auf
     einem großen Bildschirm zu eng: auf 1900 × 900 blieb ein Drittel der
     Höhe und drei Viertel der Breite ungenutzt. Jetzt bis 760 px breit
     und fast so hoch wie das Fenster.

     Die Ecken: vorher ein Radius – rund gibt es in dieser App nicht.
     Der Dialog trägt den Eckschnitt wie jede Fläche. Der Rand fällt weg,
     ein Rahmen überlebt den Schnitt nicht; die Fläche hebt sich über den
     abgedunkelten Grund ab. */
  .sheet__panel {
    --cut: 18px;
    width: 100%;
    max-width: min(760px, calc(100vw - 96px));
    height: min(88dvh, 940px);
    margin-bottom: 0;
    border-radius: 0;
    border: 0;
    clip-path: var(--cut-clip);
    padding-bottom: 0;
  }

  .sheet-top { padding-inline: 22px; }
  .sheet__body { padding-inline: 22px; }

  /* Kacheln: so viele nebeneinander, wie Platz haben – vier bei voller
     Breite. Die breite erste Kachel einer ungeraden Reihe füllt dann
     zwei Spalten, die Reihe bleibt geschlossen. */
  .sheet-dos { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

  /* Die Bereiche zum Eintragen auf Home: drei Spalten statt zwei. */
  .sheet-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Der Fußabstand für die Tableiste entfällt mit ihr; die 0px von
     --sh-tabs-h (styles/shell.css) räumen ihn schon weg, hier steht
     nur noch die Luft, die ein Dialog unten braucht. */
  body[data-shell] .sheet__body { padding-bottom: 20px; }
}

/* ---------- Sofort eintragen -------------------------------------------
   Der Hauptteil des Sheets. Hier stand die Liste aller Bereiche mit
   ihren Schnellfunktionen – ein zweiter Weg durch die App neben Ring
   und Leisten. Den braucht es nicht; was der Knopf wirklich können
   muss, ist etwas eintragen, ohne vorher irgendwohin zu gehen.

   Zwei Spalten statt einer: sechs Bereiche stehen damit auf einen
   Blick da, ohne dass man scrollt. */

.sheet-tracks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Der Kalender: eine Zeile über die volle Breite, mit größerem
   Zeichen. Er trägt nicht eine Sache ein, er bietet sechs Arten an –
   darum steht er über den Kacheln und nicht zwischen ihnen. */
.sheet-track--wide {
  width: 100%;
  margin-bottom: 8px;
  padding: 14px 16px;
  gap: 14px;
  --cut: 14px;
}

.sheet-track__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sheet-track--wide .sheet-track__name { font-size: 16.5px; font-weight: 600; }

.sheet-track__hint {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Dieselbe Tönung wie die Zeilen der Add-Fenster (.trk-row, .lk-row):
   leicht in der Farbe des Bereichs, die Farbe als Kante links. Vorher
   grau – die Kacheln führten in Fenster, die schon farbig waren, und
   sahen selbst aus wie aus einer älteren Fassung. */
.sheet-track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 13px;
  text-align: start;
  background:
    linear-gradient(90deg, var(--tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 8%, var(--field-bg));
  clip-path: var(--cut-clip);
  --cut: 10px;
  transition:
    background-color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.sheet-track:hover,
.sheet-track:focus-visible {
  background:
    linear-gradient(90deg, var(--tone) 0 3px, transparent 3px),
    color-mix(in srgb, var(--tone) 17%, var(--field-bg));
}
.sheet-track:active { transform: scale(.98); }

.sheet-track__name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-strong);
}

.sheet-track:hover .sheet-track__name { color: var(--tone); }

html[data-eink] .sheet-track { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

@media (max-width: 359px) {
  .sheet-tracks { grid-template-columns: 1fr; }
}

/* ---------- Wege in Home ------------------------------------------------
   Archive · Notes · Tutorial · Updates. Die Bereiche darüber TRAGEN ein,
   diese hier FÜHREN hin – also eine andere Form, damit man den
   Unterschied sieht, bevor man ihn liest:

     Eintragen   gefüllte Fläche, Eckschnitt, Sechseck in Bereichsfarbe
     Hingehen    keine Fläche, eine Haarlinie, gerade Ecken, ein Symbol
                 in der Farbe von Home, der Ort als Zeile darüber und
                 ein Pfeil nach rechts, der beim Zeigen mitgeht

   Eine Zwischenzeile „Go to" mit Linie trennt die beiden Gruppen. */

.sheet-go-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 10px;
}

.sheet-go-head__label {
  flex: none;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.sheet-go-head__rule {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.sheet-gos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.sheet-go {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px;
  text-align: start;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition:
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.sheet-go:hover {
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--c-home-stroke);
}
.sheet-go:active { transform: scale(.98); }
.sheet-go:focus-visible { outline: 2px solid var(--c-home); outline-offset: 2px; }

.sheet-go__icon {
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--c-home);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.sheet-go__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.sheet-go__where {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .04em;
  color: var(--text-subtle);
}

.sheet-go__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* Ungelesene Updates – dieselbe Marke wie am Reiter „Guide" (.sh-tab__badge). */
.sheet-go__count {
  flex: none;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: var(--state-over);
  color: var(--on-accent);
  font: 700 max(var(--fs-floor), 10px)/17px var(--font-mono);
}

/* Der Pfeil: zwei Kanten eines Quadrats, kein Zeichen aus der Schrift –
   so sitzt er in jeder Schrift gleich. */
.sheet-go__arrow {
  flex: none;
  width: 7px;
  height: 7px;
  margin-inline-end: 2px;
  border-top: 1.5px solid var(--text-subtle);
  border-inline-end: 1.5px solid var(--text-subtle);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.sheet-go:hover .sheet-go__arrow {
  border-color: var(--c-home);
  transform: translateX(3px) rotate(45deg);
}

@media (max-width: 359px) {
  .sheet-gos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-go:hover .sheet-go__arrow { transform: rotate(45deg); }
}

/* Der Griff oben am Sheet war eine Kapsel. Rund gibt es in dieser App
   nicht mehr – auch nicht bei einer Kleinigkeit, denn gerade die
   Kleinigkeiten verraten, ob eine Form eine Sprache ist oder Zufall. */
.sheet__grip { border-radius: 0; }

/* Der Schalter in der Layer-Liste: Kapsel mit rundem Knauf. Beides wird
   rechteckig – ein Schalter ist ein Bedienelement, und Bedienelemente
   sind in dieser App eckig. Der Knauf bekommt den kleinen Eckschnitt,
   die Bahn den etwas größeren. */


/* Die vier Knöpfe im Kopf stehen auf der Sheet-Fläche selbst (--surface).
   Mit --surface-2 als Fläche lägen nur sieben Stufen zwischen Knopf und
   Grund – sichtbar, aber nicht als Knopf lesbar. Sie stehen deshalb eine
   Stufe höher als anderswo. */
.sheet-tab {
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
}

/* ---------- Der Rest des Sheets ----------------------------------------
   Alles, was hier noch einen Radius trug: Zeilen, Kästen und Felder sind
   Flächen und bekommen den Eckschnitt; der Zurücksetzen-Knopf und die
   beiden Pfeile sind Knöpfe und bekommen ihn ebenfalls, aber ohne
   Sockel – sie stehen in einer Liste, und eine Liste voller Sockel wäre
   ein Setzkasten. Tiefe bleibt den einzeln stehenden Handgriffen. */

.set-color   { --cut: 8px;  border-radius: 0; clip-path: var(--cut-clip); }
.set-swatch  { --cut: 5px;  border-radius: 0; clip-path: var(--cut-clip); }
.set-reload  { --cut: 5px;  border-radius: 0; clip-path: var(--cut-clip); }

/* Der Schalter: Bahn und Knauf. Der Rahmen muss weg – clip-path nimmt
   ihn an den Schrägen mit, und übrig bliebe eine offene Ecke. Die Bahn
   trägt ihren Zustand deshalb allein über die Fläche. */




/* ---------- Wo der Eckschnitt nicht hingehört -------------------------
   Der Schnitt braucht Platz. Auf einem Feld von 26 × 13 px – den beiden
   Pfeilen zum Verschieben – reicht eine 4-px-Schräge bis mitten in das
   Zeichen und schneidet es an. Dasselbe beim Zurücksetzen-Pfeil.

   Faustregel für die ganze App: unter etwa 30 px Kantenlänge bekommt
   ein Feld mit Zeichen darin KEINEN Eckschnitt. Es bleibt ein
   gewöhnliches Rechteck – das ist immer noch nicht rund und damit
   sprachlich richtig, nur ohne dem Zeichen die Ecke zu nehmen. */

.set-reload {
  border-radius: 0;
  clip-path: none;
}

/* Der Schalter in der Layer-Liste ist ein Bedienelement, also ein
   Rechteck – Bahn wie Knauf. Mit Eckschnitt sahen beide aus wie
   schiefe Parallelogramme; das war schlicht falsch. */

/* =========================================================
   Der neue Aufbau des Sheets (0.2.0 beta)

   Kopf:   wo man ist (Zeichen, Name, Bildschirm, Home) und vier
           Reiter MIT Namen – der Bereich zuerst, dann Account,
           Layers, App. Vorher vier gleiche Quadrate ohne Namen,
           und der Inhalt des Bereichs hatte gar keinen Reiter.
   Inhalt: Do (Kacheln) · Set (Karten mit Zeilen) · Go (Wege) ·
           Appearance. Die Bausteine baut app/rows.js.

   Formen nach der Regel der App: Flächen (Reiterleiste, Kachel,
   Karte, Segmentleiste) tragen den Eckschnitt; Knöpfe (Home) sind
   Rechtecke mit Sockel; nichts ist rund.
   ========================================================= */

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

.sheet-top {
  position: relative;          /* Anker der Liste des Umschalters */
  z-index: 2;
  flex: none;
  display: grid;
  gap: 12px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--line);
  touch-action: none;
}

.sheet-where {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.sheet-where .hex { flex: none; --hex-w: 36px; }

.sheet-where__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.sheet-where__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.sheet-where__crumb {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-where__home { flex: none; }

.sheet-where__glyph {
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* Die Reiter: eine Fläche mit Eckschnitt, darin vier Felder. Der erste
   ist breiter – er trägt den Namen des Panels UND den Pfeil des
   Umschalters.

   Jedes Feld trägt den Eckschnitt selbst. Vorher hatte nur die Leiste
   ihn: das aktive Feld links stieß mit einer geraden Ecke in die
   Schräge der Leiste, und die Ecke sah abgebrochen aus. Der Zustand
   steht in der Fläche (getönt), nicht in einer Unterkante – die
   ginge an der Schräge unten rechts verloren. */
.sheet-faces {
  --cut: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  clip-path: var(--cut-clip);
}

.sheet-face {
  --cut: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 2px 6px;
  color: var(--text-muted);
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 600;
  clip-path: var(--cut-clip);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

/* Der erste Reiter: Name links, Pfeil rechts – zwei Knöpfe in einem
   Feld, getrennt durch eine Haarlinie. */
.sheet-face--place {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.sheet-face__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 7px 2px 6px 6px;
  color: inherit;
  font: inherit;
}

.sheet-face__more {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  color: inherit;
  box-shadow: inset 1px 0 0 var(--line-strong);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.sheet-face__more:hover { color: var(--text); background: rgba(var(--o), .06); }
.sheet-face__main:focus-visible,
.sheet-face__more:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -3px; }

/* Ein Pfeil aus zwei Kanten – zeigt nach unten, offen nach oben. */
.sheet-face__caret {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}

.sheet-face__more[aria-expanded="true"] .sheet-face__caret {
  margin-top: 3px;
  transform: rotate(225deg);
}

.sheet-face__more[aria-expanded="true"] { color: var(--accent-app); }

.sheet-face__glyph {
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.sheet-face__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-face:hover { color: var(--text); background: var(--surface-2); }
.sheet-face:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -3px; }

.sheet-face.is-on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent-app) 20%, var(--surface-3));
}

.sheet-face.is-on .sheet-face__glyph { background: var(--accent-app); }

/* ---------- Der Umschalter ----------------------------------------------------
   Die Liste aller Orte, unter den Reitern über dem Inhalt. Außen eine
   Hülle mit Schatten (drop-shadow – ein box-shadow würde vom Eckschnitt
   mit abgeschnitten), innen die Fläche mit dem Schnitt. */

.sheet-switch {
  position: absolute;
  top: calc(100% - 8px);
  inset-inline-start: 16px;
  width: min(300px, calc(100% - 32px));
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .55));
  animation: sheet-switch-in var(--dur) var(--ease-out);
}

@keyframes sheet-switch-in {
  from { opacity: 0; transform: translateY(-6px); }
}

.sheet-switch__panel {
  --cut: 12px;
  max-height: min(56dvh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--surface-3);
  clip-path: var(--cut-clip);
  scrollbar-width: thin;
}

.sheet-switch__head {
  margin: 8px 8px 4px;
  font: 600 max(var(--fs-floor), 10px)/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.sheet-switch__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  text-align: start;
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.sheet-switch__opt:hover { background: rgba(var(--o), .07); }
.sheet-switch__opt:focus-visible { outline: 2px solid var(--tone); outline-offset: -2px; }
.sheet-switch__opt.is-on { background: color-mix(in srgb, var(--tone) 16%, transparent); }

.sheet-switch__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
}

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

.sheet-switch__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }

.sheet-switch__here {
  flex: none;
  padding: 3px 6px;
  font: 600 max(var(--fs-floor), 9.5px)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(var(--o), .08);
}

.sheet-switch__tick {
  flex: none;
  width: 10px;
  height: 6px;
  margin: 0 4px 3px 2px;
  border-inline-start: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg);
}

.sheet-switch__opt.is-on .sheet-switch__tick { border-color: var(--tone); }

/* ---------- Ein fremdes Panel ---------------------------------------------------
   Die Zeile über dem Panel eines anderen Ortes: wessen Menü das ist,
   wo man steht, und die beiden Wege – zurück, oder hin. */

.sheet-away {
  --cut: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent-app) 12%, var(--surface-2));
  clip-path: var(--cut-clip);
}

.sheet-away__text { font-size: 12.5px; color: var(--text-muted); }
.sheet-away__text b { color: var(--text); font-weight: 700; }

.sheet-away__acts { display: flex; gap: 14px; margin-inline-start: auto; }

.sheet-away__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.sheet-away__btn:hover { color: var(--text); }
.sheet-away__btn--go { color: var(--accent-app); }
.sheet-away__btn--go .sheet-go__arrow { border-color: currentColor; }
.sheet-away__btn:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

/* ---------- Gruppen zum Auf- und Zuklappen ------------------------------------
   Eine Karte mit Kopf. Zu zeigt sie nur, was darin eingestellt ist
   („2000 kcal · 50 g protein") – auf, darunter die Zeilen. */

.sheet-fold {
  --cut: 12px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
}

.sheet-fold + .sheet-fold,
.sheet-card + .sheet-fold,
.sheet-fold + .sheet-card { margin-top: 8px; }

.sheet-fold__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  text-align: start;
  color: var(--text);
  transition: background-color var(--dur) var(--ease-out);
}

.sheet-fold__head:hover { background: var(--surface-3); }
.sheet-fold__head:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }

.sheet-fold__title { font-size: 14.5px; font-weight: 700; }

.sheet-fold__chev {
  flex: none;
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 0;
  border-inline-end: 1.5px solid var(--text-subtle);
  border-bottom: 1.5px solid var(--text-subtle);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}

.sheet-fold.is-open .sheet-fold__chev {
  margin-top: 4px;
  transform: rotate(225deg);
  border-color: var(--accent-app);
}

.sheet-fold.is-open .sheet-fold__head .sheet-row__ico {
  background: color-mix(in srgb, var(--accent-app) 22%, transparent);
}
.sheet-fold.is-open .sheet-fold__head .sheet-row__glyph { background: var(--accent-app); }

.sheet-fold__body { box-shadow: inset 0 1px 0 var(--line); padding-bottom: 4px; }
.sheet-fold__body[hidden] { display: none; }

/* Offen muss man sehen, wo die Gruppe aufhört: der Inhalt rückt ein
   Stück nach rechts, eine Schiene in Akzentfarbe läuft links daran
   herunter und knickt am Ende zu einem kleinen Fuß ab – wie eine
   schließende Klammer. Davor und danach mehr Luft als zwischen zwei
   zugeklappten Gruppen. */
.sheet-fold.is-open { margin-block: 20px; }
.sheet-fold.is-open:first-child { margin-top: 0; }
.sheet-fold.is-open:last-child { margin-bottom: 0; }

.sheet-fold.is-open .sheet-fold__body {
  position: relative;
  padding: 0 0 18px 14px;
}

.sheet-fold.is-open .sheet-fold__body::before,
.sheet-fold.is-open .sheet-fold__body::after {
  content: '';
  position: absolute;
  inset-inline-start: 12px;
  background: color-mix(in srgb, var(--accent-app) 55%, transparent);
  pointer-events: none;
}

.sheet-fold.is-open .sheet-fold__body::before { top: 10px; bottom: 10px; width: 2px; }
.sheet-fold.is-open .sheet-fold__body::after { bottom: 10px; width: 12px; height: 2px; }

/* In einer Gruppe: kleine Überschriften, leise Sätze, freies Markup. */
.sheet-sub {
  margin: 0;
  padding: 16px 12px 4px 54px;
  font: 600 max(var(--fs-floor), 10px)/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.sheet-row-note {
  margin: 0;
  padding: 2px 12px 12px 54px;
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.5;
  color: var(--text-subtle);
}

.sheet-free { padding: 4px 12px 12px; }
.sheet-row + .sheet-sub,
.sheet-row + .sheet-free { box-shadow: inset 0 1px 0 var(--line); }

/* Der eine Handgriff einer Gruppe („Use as calorie goal"). */
.sheet-row--accent .sheet-row__name { color: var(--accent-app); }

/* ---------- Zahlenfeld ------------------------------------------------------------ */

.sheet-num { display: inline-flex; align-items: center; gap: 6px; }

.sheet-num__input {
  width: 74px;
  padding: 7px 8px;
  border: 0;
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text);
  font: 500 13px/1.2 var(--font-mono);
  text-align: end;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.sheet-num__input::-webkit-outer-spin-button,
.sheet-num__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sheet-num__input:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.sheet-num__unit {
  min-width: 22px;
  font: 500 max(var(--fs-floor), 11px)/1 var(--font-mono);
  color: var(--text-subtle);
}

/* ---------- Nutrition im Sheet: Rechner und Lebensmittel -----------------------
   Freies Markup in Gruppen (app/nutrition/settings.js). Dieselbe Sprache:
   Zahlen in Mono, rechtsbündig, Flächen mit Eckschnitt. */

.nu-sheet-calc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.nu-sheet-calc li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 6px 42px;
  font-size: 13px;
  color: var(--text-muted);
}

.nu-sheet-calc li i {
  display: block;
  font-style: normal;
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-subtle);
}

.nu-sheet-calc li b {
  font: 500 13px/1 var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.nu-sheet-calc__target {
  --cut: 10px;
  margin: 8px 0 0;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--accent-app) 14%, var(--surface-3));
  clip-path: var(--cut-clip);
}

.nu-sheet-calc__target b {
  font: 700 26px/1 var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.nu-sheet-calc__target span { flex-basis: 100%; font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }

.nu-sheet-calc__warn,
.nu-sheet-calc__empty {
  margin: 8px 0 0;
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.5;
  color: var(--text-subtle);
}

.nu-sheet-calc__warn { color: var(--state-warn); }

.nu-sheet-search { margin-bottom: 8px; }

.nu-sheet-search__input {
  --cut: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  clip-path: var(--cut-clip);
}

.nu-sheet-search__input:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.nu-sheet-foods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.nu-sheet-food {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
}

.nu-sheet-food + .nu-sheet-food { box-shadow: inset 0 1px 0 var(--line); }

.nu-sheet-food__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.nu-sheet-food__name {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-sheet-food__name i { font-style: normal; font-weight: 400; color: var(--text-subtle); }
.nu-sheet-food__meta { font: 400 max(var(--fs-floor), 11px)/1.3 var(--font-mono); color: var(--text-subtle); }

.nu-sheet-food .iconbtn img { width: 14px; }
.nu-sheet-food__drop img { filter: none; }

.nu-sheet-foods__empty,
.nu-sheet-foods__count {
  margin: 8px 2px 0;
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.5;
  color: var(--text-subtle);
}

html[data-eink] .nu-sheet-calc__target,
html[data-eink] .nu-sheet-search__input { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; clip-path: none; }

/* ---------- Ein Panel ------------------------------------------------------- */

.sheet-pane > .sheet-go-head:first-child { margin-top: 2px; }

.sheet-pane__lede {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-subtle);
}

/* ---------- Do: Kacheln ------------------------------------------------------ */

.sheet-dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sheet-do {
  --cut: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 10px 12px;
  text-align: start;
  background: var(--btn-quiet);
  clip-path: var(--cut-clip);
  transition:
    background-color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.sheet-do--wide { grid-column: span 2; }
.sheet-do:hover { background: var(--btn-quiet-hover); }
.sheet-do:active { transform: scale(.98); }
.sheet-do:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }
.sheet-do[disabled] { opacity: .45; cursor: default; transform: none; }

.sheet-do__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: color-mix(in srgb, var(--accent-app) 22%, transparent);
}

.sheet-do__glyph {
  width: 17px;
  height: 17px;
  background: var(--accent-app);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.sheet-do__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.2;
}

.sheet-do__name { font-size: 14px; font-weight: 600; color: var(--text); }

.sheet-do__hint {
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 359px) {
  .sheet-dos { grid-template-columns: 1fr; }
  .sheet-do--wide { grid-column: auto; }
}

/* ---------- Set: Karten und Zeilen ------------------------------------------- */

.sheet-card {
  --cut: 12px;
  display: grid;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
}

.sheet-card__note {
  margin: 8px 2px 0;
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.5;
  color: var(--text-subtle);
}

.sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 9px 12px;
  text-align: start;
  color: var(--text);
}

.sheet-row + .sheet-row { box-shadow: inset 0 1px 0 var(--line); }

.sheet-row--tap { transition: background-color var(--dur) var(--ease-out); }
.sheet-row--tap:hover { background: var(--surface-3); }
.sheet-row--tap:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }
.sheet-row[disabled] { opacity: .45; cursor: default; }

/* Das Zeichen einer Einstellung ist grau: die Farbe gehört den
   Kacheln darüber, die etwas tun. Unter 30 px kein Eckschnitt. */
.sheet-row__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--surface-3);
}

.sheet-row__ico--tone {
  background: linear-gradient(135deg, var(--tone) 50%,
              color-mix(in srgb, var(--tone) 62%, var(--bg)) 50%);
}

.sheet-row__glyph {
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.sheet-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.sheet-row__name { font-size: 14px; font-weight: 600; }
.sheet-row__hint { font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }

.sheet-row__end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 55%;
}

.sheet-row__value {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-muted);
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-row__value.is-due { color: var(--state-warn); }

.sheet-row__chev {
  flex: none;
  width: 7px;
  height: 7px;
  margin-inline-end: 2px;
  border-top: 1.5px solid var(--text-subtle);
  border-inline-end: 1.5px solid var(--text-subtle);
  transform: rotate(45deg);
}

.sheet-row--tap:hover .sheet-row__chev { border-color: var(--accent-app); }

/* Aufgeklappt (App › Area colors): der Pfeil zeigt nach unten. */
.sheet-row--open .sheet-row__chev { transform: rotate(135deg); }

.sheet-row--danger .sheet-row__name { color: var(--state-over); }
.sheet-row--danger .sheet-row__ico { background: color-mix(in srgb, var(--state-over) 16%, transparent); }
.sheet-row--danger .sheet-row__glyph { background: var(--state-over); }

/* Segmente, die nicht neben den Namen passen, rutschen in die zweite
   Zeile – eingerückt unter den Text, nicht unter das Zeichen. */
.sheet-row--stack { flex-wrap: wrap; row-gap: 8px; }
.sheet-row--stack .sheet-row__end { flex-basis: 100%; min-width: 0; max-width: none; padding-inline-start: 42px; }
/* Passen die Segmente nicht nebeneinander, brechen sie um – nie
   schmaler als ihr Wort. Basis 0 + gleiches Wachsen: jede Zeile teilt
   sich gleich auf (vier Segmente auf 390 px = zwei mal zwei). */
.sheet-row--stack .sheet-seg { flex: 1; min-width: 0; flex-wrap: wrap; }
.sheet-row--stack .sheet-seg__opt { flex: 1 1 0; min-width: max-content; }
.sheet-row--stack .sheet-row__select { flex: 1; }
.sheet-row--stack .sheet-num { margin-inline-start: auto; }

.sheet-row__select {
  max-width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-overflow: ellipsis;
}

.sheet-row__select:focus-visible,
.sheet-row__time:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.sheet-row__time {
  width: 84px;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text);
  font: 500 12px/1.2 var(--font-mono);
  color-scheme: dark;
}

.sheet-row__time[hidden] { display: none; }

/* Segmente: eine schmale Leiste, das gewählte Feld wie der aktive
   Reiter oben. Unter 30 px Höhe – also kein Eckschnitt. */
.sheet-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg);
}

.sheet-seg__opt {
  min-width: 34px;
  padding: 8px 8px;
  color: var(--text-muted);
  font: 500 max(var(--fs-floor), 11px)/1 var(--font-mono);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.sheet-seg__opt:hover { color: var(--text); }
.sheet-seg__opt:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }

.sheet-seg__opt.is-on {
  color: var(--text);
  background: var(--surface-3);
  box-shadow: inset 0 -2px 0 var(--accent-app);
}

/* Regler: Bahn und eckiger Knauf. */
.sheet-range { display: flex; align-items: center; gap: 10px; }

.sheet-range input {
  width: 104px;
  height: 22px;
  margin: 0;
  background: none;
  accent-color: var(--accent-app);
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

/* Die Bahn: gefüllt bis zum Wert in der Farbe des Bereichs, danach eine
   Stufe, die sich vom Grund der Karte abhebt (--line-strong). */
.sheet-range input::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(var(--accent-app), var(--accent-app)) 0 0 / var(--fill, 50%) 100% no-repeat,
              var(--line-strong);
}
.sheet-range input::-moz-range-track { height: 4px; background: var(--line-strong); }
.sheet-range input::-moz-range-progress { height: 4px; background: var(--accent-app); }

.sheet-range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 0;
  background: var(--accent-app);
  box-shadow: 2px 2px 0 var(--btn-quiet-lift);
}
.sheet-range input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: var(--accent-app);
  box-shadow: 2px 2px 0 var(--btn-quiet-lift);
}
.sheet-range input:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.sheet-range__out {
  min-width: 34px;
  font: 500 max(var(--fs-floor), 11.5px)/1 var(--font-mono);
  color: var(--text-muted);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* ---------- Go: Wege – eine Spalte statt der zwei auf Home ----------------- */

.sheet-gos--list { grid-template-columns: 1fr; gap: 6px; }
.sheet-gos--list .sheet-go__icon { background: var(--accent-app); }
.sheet-gos--list .sheet-go:hover { box-shadow: inset 0 0 0 1px var(--accent-app); }
.sheet-gos--list .sheet-go:hover .sheet-go__arrow { border-color: var(--accent-app); }

/* ---------- Farben ------------------------------------------------------------ */

/* Die Vorschau aller Farben in einer Zeile (App › Area colors). */
.sheet-tones { display: flex; gap: 3px; }
.sheet-tones i { width: 10px; height: 18px; background: var(--c); }

/* Aufgeklappt: die Farbzeilen wie bisher, in der Karte. */
.sheet-colors { display: grid; gap: 6px; padding: 2px 12px 12px; }
.sheet-colors .set-color { background: var(--surface-3); }
.sheet-colors__foot { display: flex; justify-content: flex-end; padding-top: 6px; }

.sheet-row .set-swatch { width: 30px; height: 24px; }

/* In der Zeile „Area color" eines Bereichs: nur die zwei Felder und
   der Pfeil – der Name steht schon links in der Zeile. */
.set-color.set-color--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  clip-path: none;
}

/* ---------- Account ------------------------------------------------------------ */

.sheet-fine {
  margin-top: 16px;
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.55;
  color: var(--text-subtle);
}

/* ---------- E-ink ---------------------------------------------------------------
   Auf Papier gibt es keine getönten Flächen: Kacheln und Zeichen
   stehen schwarz auf weiß, die Unterkanten werden voll schwarz. */
/* Die Reiterleiste trägt den Eckschnitt – ein Rand ginge an den Schrägen
   verloren. Auf Papier reicht der schwarze aktive Reiter. */
html[data-eink] .sheet-faces { background: #ffffff; }
html[data-eink] .sheet-seg { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; }
html[data-eink] .sheet-face.is-on,
html[data-eink] .sheet-seg__opt.is-on { background: #000000; color: #ffffff; box-shadow: none; }
html[data-eink] .sheet-face.is-on .sheet-face__glyph { background: #ffffff; }
html[data-eink] .sheet-face--place.is-on .sheet-face__more { box-shadow: inset 1px 0 0 #ffffff; }
html[data-eink] .sheet-switch { filter: none; }
html[data-eink] .sheet-switch__panel { background: #ffffff; box-shadow: inset 0 0 0 2px #000000; }
html[data-eink] .sheet-switch__opt.is-on { background: #000000; color: #ffffff; }
html[data-eink] .sheet-switch__opt.is-on .sheet-switch__glyph { background: #ffffff; }
html[data-eink] .sheet-switch__opt.is-on .sheet-switch__tick { border-color: #ffffff; }
html[data-eink] .sheet-switch__mark { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; }
html[data-eink] .sheet-switch__glyph { background: #000000; }
html[data-eink] .sheet-switch__opt.is-on .sheet-switch__mark { background: #000000; box-shadow: inset 0 0 0 1px #ffffff; }
html[data-eink] .sheet-switch__opt.is-on .sheet-switch__glyph { background: #ffffff; }
html[data-eink] .sheet-switch__opt.is-on .sheet-switch__here { color: #000000; background: #ffffff; }
html[data-eink] .sheet-away,
html[data-eink] .sheet-fold { background: #ffffff; }
html[data-eink] .sheet-fold__head { box-shadow: inset 0 0 0 1px #000000; }
html[data-eink] .sheet-fold.is-open .sheet-fold__head .sheet-row__ico { background: #000000; }
html[data-eink] .sheet-fold.is-open .sheet-fold__head .sheet-row__glyph { background: #ffffff; }
html[data-eink] .sheet-num__input { background: #ffffff; color: #000000; box-shadow: inset 0 0 0 1px #000000; }
html[data-eink] .sheet-do,
html[data-eink] .sheet-card { background: #ffffff; }
html[data-eink] .sheet-do__ico,
html[data-eink] .sheet-row__ico { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; }
html[data-eink] .sheet-do__glyph,
html[data-eink] .sheet-row__glyph,
html[data-eink] .sheet-gos--list .sheet-go__icon { background: #000000; }
html[data-eink] .sheet-row + .sheet-row { box-shadow: inset 0 1px 0 #000000; }
html[data-eink] .sheet-row__select,
html[data-eink] .sheet-row__time { background: #ffffff; color: #000000; box-shadow: inset 0 0 0 1px #000000; color-scheme: light; }
html[data-eink] .sheet-range input::-webkit-slider-runnable-track { background: #000000; }
html[data-eink] .sheet-range input::-webkit-slider-thumb { background: #000000; box-shadow: none; }
html[data-eink] .sheet-tones i { box-shadow: inset 0 0 0 1px #000000; }
html[data-eink] .sheet-row--danger .sheet-row__name { color: #000000; text-decoration: underline; }



/* Eine Dauer (LA.rows › duration) steht immer in voller Breite unter
   ihrem Namen – Feld und Abkürzungen brauchen den Platz. */
.sheet-row--stack .sheet-dur { flex: 1; min-width: 0; }

/* Ein Schalter im Sheet mit der Tastatur: der Ring liegt auf der
   gezeichneten Schiene, das echte Kästchen ist unsichtbar. */
.sheet-row__sw { cursor: pointer; }
.sheet-row__sw input:focus-visible + .rd-check__box { outline: 2px solid var(--accent-app); outline-offset: 2px; }
div.sheet-row:has(> .sheet-row__end > .sheet-row__sw:only-child) { cursor: pointer; }

/* =========================================================
   ⋯ › Feedback (app/feedback.js, seit 12.10.2026)

   Oben die Karte mit Karl, darunter das Formular in einer Karte, dann
   „Your messages". Genau EINE gefüllte Fläche: „Send". Felder liegen
   eine Stufe tiefer als die Karte (--bg), damit man sieht, wo man tippt.
   ========================================================= */

.sheet-feedback {
  --cut: 14px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  background:
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--accent-app) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2) 78%, transparent);
  clip-path: var(--cut-clip);
}
.sheet-feedback__karl { display: block; width: 76px; }
.sheet-feedback__karl .karl { width: 100%; height: auto; }
.sheet-feedback__body { display: grid; gap: 6px; min-width: 0; }
.sheet-feedback__eyebrow {
  margin: 0;
  font: 500 max(var(--fs-floor), 11px)/1.3 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.sheet-feedback__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text-strong); text-wrap: balance; }
.sheet-feedback__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

.fb .sheet-feedback + .sheet-card { margin-top: 12px; }

/* Die Zeile, in der Formular und Liste stehen, ist kein Listeneintrag */
.fb .sheet-card > .sheet-row:has(.fb-form, .fb-done, .fb-mine) { display: block; padding: 0; min-height: 0; }

/* ---------- das Formular ---------- */

.fb-form { display: grid; gap: 16px; padding: 16px 14px 14px; }
.fb-field { display: grid; gap: 7px; min-width: 0; }
.fb-label { font-size: 13px; font-weight: 600; color: var(--text); }
.fb-optional {
  margin-inline-start: 4px;
  font: 500 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.fb-hint { font-size: max(var(--fs-floor), 11.5px); line-height: 1.45; color: var(--text-subtle); }

.fb-kinds { width: 100%; }
.fb-kinds .sheet-seg__opt { flex: 1 1 0; min-height: 40px; font-size: max(var(--fs-floor), 12px); }

.fb-input {
  --cut: 8px;
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 0;
  background: var(--bg);
  color: var(--text-strong);
  font: 500 16px/1.4 var(--font);       /* 16 px: iOS zoomt sonst beim Antippen */
  clip-path: var(--cut-clip);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur) var(--ease-out);
}
.fb-input:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 26%, transparent); }
.fb-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-app); }
.fb-input::placeholder { color: var(--text-subtle); }
.fb-input--area { min-height: 132px; resize: vertical; line-height: 1.5; }
.fb-input--code { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

.fb-count {
  justify-self: end;
  font: 500 max(var(--fs-floor), 11px)/1.2 var(--font-mono);
  color: var(--text-subtle);
}
.fb-count:empty { display: none; }
.fb-count.is-low { color: var(--state-warn); }

/* „Send app details": Schalter, daneben, was genau mitgeht */
.fb-details {
  --cut: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  clip-path: var(--cut-clip);
  cursor: pointer;
}
.fb-details__text { display: grid; gap: 2px; min-width: 0; }
.fb-details__name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.fb-details input:focus-visible + .rd-check__box { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.fb-send { display: grid; gap: 10px; }
.fb-send .btn3d { width: 100%; }
.fb-send .btn3d.is-busy { cursor: progress; }
.fb-note { margin: 0; font-size: max(var(--fs-floor), 12px); line-height: 1.45; color: var(--text-subtle); text-align: center; }
.fb-note.is-error { color: var(--danger); }

/* ---------- nach dem Senden ---------- */

.fb-done {
  display: grid;
  gap: 8px;
  padding: 18px 16px 16px;
  animation: fb-in 320ms var(--ease-out) both;
}
.fb-done__title { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.fb-done__text { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.fb-done__code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.fb-done__code code {
  --cut: 6px;
  padding: 9px 12px;
  background: var(--bg);
  color: var(--text-strong);
  font: 600 17px/1 var(--font-mono);
  letter-spacing: .14em;
  clip-path: var(--cut-clip);
  user-select: all;
}
.fb-done--queued .fb-done__title { color: var(--state-warn); }

@keyframes fb-in {
  from { opacity: 0; transform: translateY(6px); }
}

.fb-link {
  justify-self: start;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: max(var(--fs-floor), 12.5px);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}
.fb-link:hover { color: var(--text); }
.fb-link:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }
.fb-link--danger { color: var(--danger); }
.fb-link--danger:hover { color: var(--danger); text-decoration-color: currentColor; }

/* ---------- Your messages ---------- */

.fb-mine { display: grid; }
.fb-list { margin: 0; padding: 0; list-style: none; }
.fb-item + .fb-item { box-shadow: inset 0 1px 0 var(--line); }
.fb-item__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.fb-item__head::-webkit-details-marker { display: none; }
.fb-item__head:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }
.fb-item__kind {
  align-self: start;
  padding: 3px 6px;
  background: var(--bg);
  color: var(--text-muted);
  font: 600 max(var(--fs-floor), 10px)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fb-item__excerpt {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Offen steht der ganze Text darunter – die Vorschau oben fällt weg */
.fb-item__box[open] .fb-item__excerpt.is-text { display: none; }
.fb-item__meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-subtle);
}
.fb-item.has-reply .fb-item__state { color: var(--state-good); }
.fb-item__new {
  padding: 2px 6px;
  background: var(--state-over);
  color: var(--on-accent);
  font: 700 max(var(--fs-floor), 10px)/1.3 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fb-item__body { display: grid; gap: 12px; padding: 0 14px 14px; }
.fb-item__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fb-reply {
  --cut: 8px;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent-app) 9%, var(--bg));
  box-shadow: inset 3px 0 0 var(--accent-app);
  clip-path: var(--cut-clip);
}
[dir="rtl"] .fb-reply { box-shadow: inset -3px 0 0 var(--accent-app); }
.fb-reply__from {
  font: 600 max(var(--fs-floor), 10.5px)/1.2 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-app);
}
.fb-reply__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-strong); white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-item__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fb-item__foot .fb-link--danger { margin-inline-start: auto; }
.fb-item__code { font: 500 max(var(--fs-floor), 11.5px)/1 var(--font-mono); letter-spacing: .1em; color: var(--text-subtle); }

.fb-empty { margin: 0; padding: 16px 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.fb-mine__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 4px 14px 12px; }
.fb-mine__foot:empty { display: none; }

.fb-code { display: grid; gap: 7px; padding: 12px 14px 14px; box-shadow: inset 0 1px 0 var(--line); }
.fb-code .fb-label { font-weight: 500; color: var(--text-muted); font-size: max(var(--fs-floor), 12.5px); }
.fb-code__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.fb-code .fb-input { min-height: 40px; padding-block: 8px; }
.fb-code .fb-hint:empty { display: none; }

/* Das Gespräch (seit 13.10.2026): eigene Nachträge still, ohne Akzent –
   die Antworten bleiben, was ins Auge fällt. Darunter ein Nachtrag. */
.fb-reply--you { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.fb-reply--you .fb-reply__from { color: var(--text-subtle); }
.fb-reply--you .fb-reply__text { color: var(--text); }
.fb-more { display: grid; gap: 7px; }
.fb-more .fb-label { font-weight: 500; color: var(--text-muted); font-size: max(var(--fs-floor), 12.5px); }
.fb-more__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fb-more .fb-hint:empty { display: none; }
html[data-eink] .fb-reply--you { box-shadow: inset 0 0 0 1px #000000; }

/* Die Marke am Reiter: ungelesene Antworten */
.sheet-face { position: relative; }
.sheet-face__count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: var(--state-over);
  color: var(--on-accent);
  font: 700 max(var(--fs-floor), 10px)/16px var(--font-mono);
}

html[data-eink] .sheet-feedback { background: var(--surface); }
html[data-eink] .fb-input,
html[data-eink] .fb-done__code code { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; clip-path: none; }
html[data-eink] .fb-input:focus { box-shadow: inset 0 0 0 2px #000000; }
html[data-eink] .fb-reply { background: #ffffff; box-shadow: inset 3px 0 0 #000000, inset 0 0 0 1px #000000; clip-path: none; }
html[data-eink] .fb-item__new,
html[data-eink] .sheet-face__count { background: #000000; color: #ffffff; }
html[data-eink] .fb-details,
html[data-eink] .fb-item__kind { background: transparent; box-shadow: inset 0 0 0 1px currentColor; clip-path: none; }