/* =========================================================
   Life Archive – Night Pond: das Aussehen von Home (seit 0.6.0 beta)

   Home ist ein Teich bei Nacht. Unter allem liegt ein Schein in den
   Farben der Bereiche (.la-pond), darüber schwimmen die Flächen als
   Glas, oben links sitzt der Koi des App-Symbols auf einer weißen
   Platte, und die Linie unter der Topbar ist weiß.

   Sieben Dinge daran stellt man ein (app/home/look.js, ⋯ › Home ›
   Look und „Edit" auf Home). Sie kommen als Attribute an <html>:

     data-look-line     solid · fade · glow · hair
     data-look-light    time · progress · still · deep · drift · ripple · off
     data-pond          morning · day · evening · night (bei „time"),
                        sonst derselbe Wert wie data-look-light
     data-look-cards    frost · clear · tint · edge · smoke
     data-look-buttons  grey · tint · glow · glass · solid
     data-look-tiles    classic · glow · fill · symbol · number · list
     data-look-now      classic · glow · solid · edge
     data-look-layout   classic · tidy · time

   Lesbarkeit, gemessen (Bericht „Home, Night Pond", 10. Oktober 2026):
   Text auf gefrostetem Glas (62 %) über einem Schein von 28 % hält
   5,0 : 1 für --text-muted; auf klarem Glas (40 %) fällt kleine graue
   Schrift ab 24 % unter AA. Darum bleibt jeder Schein hier unter 20 %.

   Formsprache: Glas ist eine Fläche (zwei geschnittene Ecken), Knöpfe
   bleiben eckig mit Sockel. Weiche Formen gibt es nur als Schein ohne
   Kante – die Ausnahme, die die Regeln für Halos vorsehen.

   Das Blatt des ⋯-Knopfes trägt dieselbe Sprache: Glas über einem
   Schein in der Farbe des Ortes, die Karten nach der Wahl „Cards".

   Im E-ink-Modus (ganz unten) gibt es nichts davon: kein Schein, kein
   Glas, kein Unscharf – Papier.
   ========================================================= */

/* ---------- Der Koi (app/koi.js) ------------------------------------------- */

.la-koi {
  --k-ink: #000;
  --k-fin: #fff;
  --k-a: var(--c-journal);
  --k-b: var(--c-nutrition);
  --k-c: var(--c-cue-diary);
  --k-d: var(--c-calendar);
  display: block;
  overflow: visible;
}

/* Im Zeichen oben links und in einem Sechseck-Abzeichen füllt der Koi
   die Platte – eine Maske wie bei den anderen Zeichen (56 %) ließe ihn
   zu klein. */
.sh-top__hex .sh-top__koi { width: 80%; height: 80%; }
.hex .hex__koi { width: 82%; height: 82%; }

/* Im Blatt (Reiter, Umschalter, „Home"-Knopf) dieselbe Platte, klein. */
.la-koi-chip.la-koi-chip {
  display: inline-grid;
  place-items: center;
  background: var(--c-home);
  -webkit-mask: none;
          mask: none;
  clip-path: var(--hex-clip);
  aspect-ratio: 1 / .866;
  height: auto;
}

.la-koi-chip .la-koi { width: 84%; height: 84%; }

/* ---------- Der Teich ------------------------------------------------------- */

.la-pond {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

body[data-shell="home"] .la-pond { display: block; }
html[data-look-light="off"] .la-pond { display: none; }

.la-pond__light {
  position: absolute;
  inset: 0;
  transition: opacity 1.2s var(--ease-out);
}

/* Die Tageszeit (ab Werk). Jede Zeit hat die Farben der Bereiche, die
   dann dran sind: morgens planen (Calendar, Journal, Nutrition), tags
   tun (Nutrition, Calendar, Fitness), abends ausklingen (Meditation,
   Cue Diary, Reader), nachts nur ein Rest Licht von unten. */
html[data-pond="morning"] .la-pond__light {
  background-image:
    radial-gradient(70% 42% at 12% 10%, color-mix(in srgb, var(--c-calendar) 18%, transparent), transparent 72%),
    radial-gradient(60% 36% at 96% 24%, color-mix(in srgb, var(--c-journal) 15%, transparent), transparent 72%),
    radial-gradient(70% 40% at 40% 96%, color-mix(in srgb, var(--c-nutrition) 11%, transparent), transparent 72%);
}

html[data-pond="day"] .la-pond__light {
  background-image:
    radial-gradient(60% 40% at 8% 16%, color-mix(in srgb, var(--c-nutrition) 15%, transparent), transparent 72%),
    radial-gradient(55% 36% at 96% 40%, color-mix(in srgb, var(--c-calendar) 15%, transparent), transparent 72%),
    radial-gradient(60% 38% at 24% 92%, color-mix(in srgb, var(--c-fitness) 12%, transparent), transparent 72%),
    radial-gradient(50% 30% at 84% 88%, color-mix(in srgb, var(--c-journal) 10%, transparent), transparent 72%);
}

html[data-pond="evening"] .la-pond__light {
  background-image:
    radial-gradient(70% 42% at 10% 18%, color-mix(in srgb, var(--c-meditation) 18%, transparent), transparent 72%),
    radial-gradient(60% 40% at 100% 52%, color-mix(in srgb, var(--c-cue-diary) 15%, transparent), transparent 72%),
    radial-gradient(70% 36% at 30% 100%, color-mix(in srgb, var(--c-reader) 18%, transparent), transparent 72%);
}

html[data-pond="night"] .la-pond__light {
  background-image:
    radial-gradient(90% 34% at 50% 108%, color-mix(in srgb, var(--c-meditation) 15%, transparent), transparent 76%),
    radial-gradient(55% 28% at 10% 100%, color-mix(in srgb, var(--c-calendar) 10%, transparent), transparent 76%);
}

html[data-pond="still"] .la-pond__light,
html[data-pond="drift"] .la-pond__light,
html[data-pond="ripple"] .la-pond__light {
  background-image:
    radial-gradient(60% 40% at 8% 18%, color-mix(in srgb, var(--c-calendar) 18%, transparent), transparent 70%),
    radial-gradient(55% 35% at 95% 42%, color-mix(in srgb, var(--c-cue-diary) 15%, transparent), transparent 70%),
    radial-gradient(60% 40% at 30% 92%, color-mix(in srgb, var(--c-nutrition) 14%, transparent), transparent 70%),
    radial-gradient(50% 30% at 80% 85%, color-mix(in srgb, var(--c-journal) 10%, transparent), transparent 70%);
}

html[data-pond="deep"] .la-pond__light {
  background-image:
    radial-gradient(90% 38% at 50% 108%, color-mix(in srgb, var(--c-nutrition) 19%, transparent), transparent 75%),
    radial-gradient(60% 30% at 15% 100%, color-mix(in srgb, var(--c-calendar) 16%, transparent), transparent 75%),
    radial-gradient(60% 30% at 90% 100%, color-mix(in srgb, var(--c-meditation) 13%, transparent), transparent 75%);
}

/* „Your day" (progress) malt app/home/look.js als Inline-Hintergrund;
   ist heute noch nichts geschehen, bleibt der Teich dunkel. */

html[data-pond="drift"] .la-pond__light {
  inset: -12%;
  animation: la-pond-drift 26s ease-in-out infinite alternate;
}

@keyframes la-pond-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(5%, -4%) scale(1.05); }
  100% { transform: translate(-4%, 4%) scale(.98); }
}

/* Lichtnetz wie auf dem Grund eines Teichs – aus Sechsecken. */
html[data-pond="ripple"] .la-pond__light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--o), .06);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 80'%3E%3Cpath d='M11.5 0 L34.5 0 L46 20 L34.5 40 L11.5 40 L0 20 Z M11.5 40 L0 60 L11.5 80 M34.5 40 L46 60 L34.5 80' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 46px 80px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 80'%3E%3Cpath d='M11.5 0 L34.5 0 L46 20 L34.5 40 L11.5 40 L0 20 Z M11.5 40 L0 60 L11.5 80 M34.5 40 L46 60 L34.5 80' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 46px 80px;
}

html[data-motion="reduce"] .la-pond__light { animation: none; }
@media (prefers-reduced-motion: reduce) { .la-pond__light { animation: none; } }

/* Der Ton von Home gilt auch im Inhalt – Links („Upcoming"), Marken
   („0.6.0 beta"), der Knopf bei Karl. Die Leiste setzt ihn nur an sich
   selbst (app/shell.js), darunter stand sonst noch das alte Lavendel. */
body[data-shell="home"] .app {
  --accent-app: var(--c-home);
  --accent-deep: var(--c-home-stroke);
}

/* Die Tableiste von Home lässt den Teich durchscheinen. */
body[data-shell="home"] .sh-top::before { background: color-mix(in srgb, var(--bg) 94%, transparent); }

/* ---------- Die Linie unter der Topbar (nur Home) ---------------------------- */

html[data-look-line="fade"] body[data-shell="home"] .sh-top__rule {
  background: linear-gradient(90deg,
    var(--accent-app) 0%,
    color-mix(in srgb, var(--accent-app) 80%, transparent) 32%,
    transparent 100%);
}

html[data-look-line="glow"] body[data-shell="home"] .sh-top__rule {
  box-shadow:
    0 0 10px 1px color-mix(in srgb, var(--accent-app) 55%, transparent),
    0 0 26px 2px color-mix(in srgb, var(--accent-app) 18%, transparent);
}

html[data-look-line="hair"] body[data-shell="home"] .sh-top__rule {
  height: 1px;
  opacity: .85;
}

/* Beim Haarstrich leuchtet statt der Linie die Platte. */
html[data-look-line="hair"] body[data-shell="home"] .sh-top__mark::before {
  content: "";
  position: absolute;
  inset: -45% -40%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-app) 24%, transparent), transparent);
  pointer-events: none;
}

/* ---------- Karten: die Flächen auf dem Teich -------------------------------
   Jede Fläche rechnet ihre Werte bei sich selbst – nur dort kennt sie
   ihren Ton (--tone steht inline an Kachel, Karte, Chip, Zeile). */

html[data-look-cards] .hb :is(.hb-td, .hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) {
  --lk-card: color-mix(in srgb, var(--surface) 62%, transparent);
  --lk-blur: blur(14px);
  --lk-card-img: none;
  background-color: var(--lk-card);
  background-image: var(--lk-tile-img, none), var(--lk-card-img);
  -webkit-backdrop-filter: var(--lk-blur);
          backdrop-filter: var(--lk-blur);
  transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

/* Die Now-Karte trägt dazu ihren Schein aus der Ecke (.la-shine). */
html[data-look-cards] .hb .hb-now {
  --lk-shine: linear-gradient(160deg, color-mix(in srgb, var(--shine, var(--tone)) 14%, transparent) 0%, transparent 70%);
  background-image: var(--lk-now-img, none), var(--lk-card-img), var(--lk-shine);
}

html[data-look-cards] .hb :is(.hb-now.is-linked, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row):hover {
  box-shadow: inset 0 0 0 999px rgba(var(--o), .045);
}

html[data-look-cards="clear"] .hb :is(.hb-td, .hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) {
  --lk-card: color-mix(in srgb, var(--surface) 40%, transparent);
  --lk-blur: blur(22px) saturate(1.5);
  --lk-card-img: linear-gradient(160deg, rgba(var(--o), .09), transparent 42%);
}

html[data-look-cards="tint"] .hb :is(.hb-td, .hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) {
  --lk-card: color-mix(in srgb, var(--tone, var(--surface)) 11%, color-mix(in srgb, var(--surface) 62%, transparent));
}

html[data-look-cards="edge"] .hb :is(.hb-td, .hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) {
  --lk-card-img: linear-gradient(135deg,
    transparent calc(var(--cut) * .7071 - .5px),
    var(--tone, rgba(var(--o), .7)) calc(var(--cut) * .7071 - .5px) calc(var(--cut) * .7071 + 1.5px),
    color-mix(in srgb, var(--tone, #fff) 20%, transparent) calc(var(--cut) * .7071 + 1.5px),
    transparent calc(var(--cut) * .7071 + 36px));
}

html[data-look-cards="smoke"] .hb :is(.hb-td, .hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) {
  --lk-card: color-mix(in srgb, var(--bg) 84%, transparent);
  --lk-blur: blur(8px);
}

/* Ohne backdrop-filter (ältere Browser): dieselben Flächen, nur fest. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-look-cards] .hb :is(.hb-td, .hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) {
    --lk-card: var(--surface);
  }
}

/* ---------- Knöpfe: das „+" der Kacheln ------------------------------------- */

html[data-look-buttons="grey"] .hb-tile__act::before { background: var(--btn-quiet-lift); }
html[data-look-buttons="grey"] .hb-tile__act::after { background: var(--btn-quiet); box-shadow: none; }

html[data-look-buttons="glow"] .hb-tile__act {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tone) 55%, transparent));
}

html[data-look-buttons="glass"] .hb-tile__act::before { background: rgba(var(--o), .34); }
html[data-look-buttons="glass"] .hb-tile__act::after {
  background: rgba(var(--o), .07);
  box-shadow: inset 0 0 0 1px rgba(var(--o), .26);
}

html[data-look-buttons="solid"] .hb-tile__act { color: var(--on-accent); }
html[data-look-buttons="solid"] .hb-tile__act::before { background: var(--tone-deep); }
html[data-look-buttons="solid"] .hb-tile__act::after { background: var(--tone); box-shadow: none; }

html[data-look-buttons] .hb-tile__act:hover { filter: brightness(1.12); }
html[data-look-buttons="glow"] .hb-tile__act:hover {
  filter: brightness(1.12) drop-shadow(0 0 9px color-mix(in srgb, var(--tone) 65%, transparent));
}

/* ---------- Kacheln der Bereiche ---------------------------------------------- */

.hb-tile__mark,
.hb-tile__num { display: none; }

/* Glow: das Zeichen erhellt seine eigene Kachel. */
html[data-look-tiles="glow"] .hb .hb-tile:not(.hb-tile--edit) {
  --lk-tile-img: radial-gradient(72% 62% at 24% 22%, color-mix(in srgb, var(--tone) 24%, transparent), transparent 70%);
}

/* Fill up: die Farbe steigt mit dem Tag, mit einer Wasserlinie oben.
   Fertig heißt voll – die Kachel steht in ihrer Farbe, die Schrift
   dunkel. Bereiche ohne Ziel (Cue Diary) füllen sich nie. */
html[data-look-tiles="fill"] .hb .hb-tile:not(.hb-tile--edit) {
  --lk-tile-img:
    linear-gradient(to top,
      transparent calc(var(--fill, 0%) - 2px),
      var(--tone) calc(var(--fill, 0%) - 2px) var(--fill, 0%),
      transparent var(--fill, 0%)),
    linear-gradient(to top,
      color-mix(in srgb, var(--tone) 26%, transparent) var(--fill, 0%),
      transparent var(--fill, 0%));
}

html[data-look-tiles="fill"] .hb .hb-tile:not(.hb-tile--edit) :is(.hb-tile__bar, .hb-tile__segs) { display: none; }

html[data-look-tiles="fill"] .hb .hb-tile.is-done:not(.hb-tile--edit) {
  --lk-tile-img: none;
  --lk-card-img: none;
  background-color: var(--tone);
}

html[data-look-tiles="fill"] .hb .hb-tile.is-done :is(.hb-tile__name, .hb-tile__status) { color: var(--on-accent); }
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hex { --hex-color: var(--on-accent); --hex-stroke: var(--on-accent); }
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hex__icon { filter: invert(1); }
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hb-tile__act { color: var(--on-accent); filter: none; }
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hb-tile__act::after {
  background: color-mix(in srgb, var(--on-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-accent) 60%, transparent);
}
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hb-tile__act::before {
  background: color-mix(in srgb, var(--on-accent) 40%, transparent);
}

/* Symbol (ab Werk): das Zeichen des Bereichs groß und blass in der
   unteren rechten Ecke, der Balken leuchtet. Es liegt unter dem Inhalt
   (z-index -1 in der eigenen Ebene der Kachel – clip-path schafft sie). */
html[data-look-tiles="symbol"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__mark {
  display: block;
  position: absolute;
  inset-inline-end: -16px;
  bottom: -22px;
  z-index: -1;
  width: 104px;
  height: 104px;
  background: var(--text-strong);
  opacity: .075;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  pointer-events: none;
}

html[data-look-tiles="symbol"] .hb .hb-tile__bar i { box-shadow: 0 0 8px var(--tone); }

/* Number: der Stand des Tages zuerst, groß und in der Farbe. */
html[data-look-tiles="number"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__num {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  font: 600 24px/1 var(--font-mono);
  letter-spacing: -.04em;
  color: var(--tone);
  font-variant-numeric: tabular-nums;
}

html[data-look-tiles="number"] .hb .hb-tile__num small {
  margin-inline-start: 2px;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-muted);
}

html[data-look-tiles="number"] .hb .hb-tile:not(.hb-tile--edit):not(.is-neutral) .hb-tile__name {
  margin-top: 6px;
  padding-top: 0;
}

/* List: eine Zeile je Bereich – schneller zu überfliegen, kürzer am
   Telefon. Am Rechner zwei Spalten. */
html[data-look-tiles="list"] .hb:not(.is-editing) .hb-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) { --cut: 10px; }

html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__link {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 10px 68px 12px 12px;
}

html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__sign { grid-row: 1 / 3; }
html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__sign .hex { --hex-w: 34px; }

html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__name {
  margin: 0;
  padding: 0;
  align-self: end;
  font-size: 15px;
}

html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__status {
  margin: 2px 0 0;
  align-self: start;
  -webkit-line-clamp: 1;
}

html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__act {
  top: calc(50% - 18px);
  inset-inline-end: 12px;
  width: 40px;
  height: 36px;
}

html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) :is(.hb-tile__bar, .hb-tile__segs) { height: 2px; }

@media (min-width: 900px) {
  html[data-look-tiles="list"] .hb:not(.is-editing) .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Die Now-Karte ------------------------------------------------------ */

.hb-nowwrap { position: relative; isolation: isolate; min-width: 0; }
.hb-nowwrap + .hb-chips { margin-top: -18px; }

/* Glow: ein Schein in der Farbe des Vorschlags hinter der Karte – der
   hellste Punkt der Seite, damit der Squint-Test hier landet. */
html[data-look-now="glow"] .hb .hb-nowwrap::before {
  content: "";
  position: absolute;
  inset: -34px -18px;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 26%, transparent), transparent);
  pointer-events: none;
}

/* Solid: die Karte in voller Farbe, die eine laute Fläche auf Home. */
html[data-look-now="solid"] .hb .hb-now:not(.is-quiet) {
  --lk-shine: none;
  --lk-card-img: none;
  background-color: var(--tone);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

html[data-look-now="solid"] .hb .hb-now:not(.is-quiet) :is(.hb-now__eyebrow, .hb-now__title, .hb-now__text, .hb-now__chev) {
  color: var(--on-accent);
}

html[data-look-now="solid"] .hb .hb-now:not(.is-quiet) .hex { --hex-color: var(--on-accent); --hex-stroke: var(--on-accent); }
html[data-look-now="solid"] .hb .hb-now:not(.is-quiet) .hex__icon { filter: invert(1); }

html[data-look-now="solid"] .hb .hb-now__go {
  --accent: var(--on-accent);
  --btn-lift: color-mix(in srgb, var(--on-accent) 45%, transparent);
  color: var(--tone);
}

html[data-look-now="solid"] .hb .hb-now__later {
  --btn-edge: color-mix(in srgb, var(--on-accent) 60%, transparent);
  --btn-lift: color-mix(in srgb, var(--on-accent) 35%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--on-accent) 10%, transparent);
  color: var(--on-accent);
}

/* Lit edge: die Karte von Licht gerahmt statt gefüllt. */
html[data-look-now="edge"] .hb .hb-now:not(.is-quiet) {
  --lk-shine: none;
  --lk-now-img: linear-gradient(135deg,
    transparent calc(var(--cut) * .7071 - .5px),
    var(--tone) calc(var(--cut) * .7071 - .5px) calc(var(--cut) * .7071 + 2px),
    color-mix(in srgb, var(--tone) 18%, transparent) calc(var(--cut) * .7071 + 2px),
    transparent 45%);
}

html[data-look-now="edge"] .hb .hb-now:not(.is-quiet)::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--cut);
  inset-inline-end: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tone), transparent 72%);
  pointer-events: none;
}

/* ---------- Ordnung der Seite ---------------------------------------------- */

.hb-day__words,
.hb-row__sign { display: none; }

/* Tidy und Time first: der Stand des Tages direkt neben dem Datum, in
   Worten und als Sechsecke in den Farben der Bereiche. */
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day {
  justify-content: flex-start;
  column-gap: 24px;
  flex-wrap: wrap;
}

html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__count { display: none; }

html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__words {
  display: inline;
  font: 500 12px/1 var(--font-mono);
  color: var(--text-muted);
}

html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__words b {
  color: var(--text-strong);
  font-weight: 600;
}

html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__segs i {
  width: 15px;
  height: 13px;
  clip-path: var(--hex-clip);
  background: color-mix(in srgb, var(--tone) 30%, transparent);
}

html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__segs i.is-done { background: var(--tone); }

/* Chips brechen um, statt ein Wort zu zerschneiden. */
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-chips {
  flex-wrap: wrap;
  overflow: visible;
}

html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-chips > li {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-chip { max-width: 100%; }

html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auch „Classic" wischt die Chips nur am Telefon seitwärts; ab 720 px
   brechen sie um (CLAUDE.md, „Seitwärts-Reihen"). */
@media (min-width: 720px) {
  html[data-look-layout="classic"] .hb-chips { flex-wrap: wrap; overflow: visible; }
  html[data-look-layout="classic"] .hb-chips > li { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  html[data-look-layout="classic"] .hb-chip { max-width: 100%; }
  html[data-look-layout="classic"] .hb-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Next up trägt das Zeichen des Bereichs statt des Punktes. */
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-row { grid-template-columns: 50px auto minmax(0, 1fr); }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-row__sign { display: block; }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-row:has(.hb-row__sign) .hb-row__dot { display: none; }
.hb-row__sign .hex { --hex-w: 22px; }

/* Die zwei Spalten. Am Telefon sind sie durchlässig: ihre Kinder stehen
   direkt im Raster von .hb, und `order` legt die Reihenfolge fest. */
.hb-col { display: contents; }
.hb-col > * { min-width: 0; }

.hb > .hb-day { order: 0; }
.hb-col > .hb-td,
.hb-col > .hb-nowwrap,
.hb-col > .hb-now { order: 1; }
.hb-col > .hb-chips { order: 2; }
.hb-col > .hb-areas { order: 4; }
.hb-col > .hb-next { order: 5; }
.hb-col > .hb-note { order: 6; }

html[data-look-layout="time"] .hb-col > .hb-next { order: 3; }

@media (min-width: 900px) {
  /* Die Spur der Spalte ist fest (minmax(0, 1fr)): ohne sie wächst die
     eine, unsichtbare Spur auf die Mindestbreite des breitesten Inhalts
     (ein langer Chip, die Karte „What's new") und schiebt die linke
     Spalte über die Kacheln. */
  html[data-look-layout] .hb:not(.is-editing) > .hb-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-content: start;
    min-width: 0;
  }

  html[data-look-layout] .hb:not(.is-editing) > .hb-col > * { min-width: 0; }

  html[data-look-layout] .hb:not(.is-editing) > .hb-col--now { grid-column: 1; grid-row: 2; }
  html[data-look-layout] .hb:not(.is-editing) > .hb-col--areas { grid-column: 2; grid-row: 2; }
}

/* ---------- Das Blatt des ⋯-Knopfes in derselben Sprache --------------------- */

.sheet__backdrop {
  background: rgba(var(--o-deep), .5);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
          backdrop-filter: blur(8px) saturate(1.15);
}

.sheet__panel {
  background-color: color-mix(in srgb, var(--surface) 88%, transparent);
  background-image:
    radial-gradient(80% 46% at 0% 0%, color-mix(in srgb, var(--accent-app) 13%, transparent), transparent 72%),
    radial-gradient(70% 44% at 100% 100%, color-mix(in srgb, var(--accent-deep, var(--accent-app)) 10%, transparent), transparent 74%);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
          backdrop-filter: blur(24px) saturate(1.3);
}

/* Die Karten im Blatt folgen der Wahl „Cards" – getönt in der Farbe
   des Ortes, dessen Panel man sieht. */
html[data-look-cards] .sheet :is(.sheet-card, .sheet-fold, .sheet-do) {
  background-color: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

html[data-look-cards="tint"] .sheet :is(.sheet-card, .sheet-fold, .sheet-do) {
  background-color: color-mix(in srgb, var(--accent-app) 7%, color-mix(in srgb, var(--surface-2) 80%, transparent));
}

html[data-look-cards="clear"] .sheet :is(.sheet-card, .sheet-fold, .sheet-do) {
  background-color: color-mix(in srgb, var(--surface-2) 58%, transparent);
  background-image: linear-gradient(160deg, rgba(var(--o), .07), transparent 42%);
}

html[data-look-cards="edge"] .sheet :is(.sheet-card, .sheet-fold, .sheet-do) {
  background-image: linear-gradient(135deg,
    transparent calc(var(--cut) * .7071 - .5px),
    var(--accent-app) calc(var(--cut) * .7071 - .5px) calc(var(--cut) * .7071 + 1.5px),
    transparent calc(var(--cut) * .7071 + 1.5px));
}

html[data-look-cards="smoke"] .sheet :is(.sheet-card, .sheet-fold, .sheet-do) {
  background-color: color-mix(in srgb, var(--bg) 78%, transparent);
}

html[data-look-cards] .sheet .sheet-do:hover { box-shadow: inset 0 0 0 999px rgba(var(--o), .05); }

/* ---------- Die Wahl: Look (⋯ › Home und Edit auf Home) -------------------- */

.lk {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.hb-look { display: grid; min-width: 0; }

/* Oben die ganze Seite im Kleinen, daneben was sie zeigt. */
.lk-live {
  --cut: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  clip-path: var(--cut-clip);
}

.lk-live__frame {
  width: 168px;
  height: 320px;
  overflow: hidden;
  outline: 1px solid rgba(var(--o), .1);
  outline-offset: -1px;
}

.lk-live__side { display: grid; gap: 8px; align-content: center; min-width: 0; }

.lk-live__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);
}

.lk-live__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.lk-live__meta { margin: 0; font: 500 12px/1.4 var(--font-mono); color: var(--text-muted); }
.lk-live__reset { justify-self: start; margin-top: 4px; }

/* Am Telefon steht die Skizze kleiner neben dem Text, damit die Wahl
   darunter gleich im Bild ist; erst unter 340 px übereinander. */
@media (max-width: 480px) {
  .lk-live { gap: 12px; padding: 12px; }
  .lk-live__frame { width: 126px; height: 240px; }
  .lk-live__frame .lkm { transform: scale(.75); transform-origin: 0 0; }
  .lk-live__text { font-size: 13px; }
}

@media (max-width: 340px) {
  .lk-live { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .lk-live__reset { justify-self: center; }
}

.lk-group { display: grid; gap: 4px; min-width: 0; }

.lk-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lk-group__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-strong); }

.lk-group__value {
  font: 500 12px/1.3 var(--font-mono);
  color: var(--text-muted);
  text-align: end;
}

.lk-group__hint { margin: 0 0 8px; font-size: 13px; color: var(--text-subtle); }

/* Die Bilder brechen um, statt seitwärts zu laufen (CLAUDE.md,
   „Seitwärts-Reihen"): jede Wahl ist auf einen Blick da. */
.lk-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: 8px;
}

/* Eine Wahl ist ein Bild, das man antippt – eine Fläche mit Schnitt,
   kein Knopf mit Sockel (wie die Kacheln, die man in einem Raster
   wählt). Gewählt: eine weiße Kante und ein Häkchen. */
.lk-opt {
  --cut: 10px;
  position: relative;
  display: grid;
  gap: 6px;
  padding: 6px 6px 8px;
  text-align: start;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  clip-path: var(--cut-clip);
  color: var(--text-muted);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.lk-opt:hover { background: color-mix(in srgb, var(--surface-3) 80%, transparent); color: var(--text); }
.lk-opt:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }

.lk-opt.is-on {
  background: color-mix(in srgb, var(--text-strong) 14%, var(--surface-2));
  color: var(--text-strong);
}

.lk-opt__view {
  position: relative;
  display: block;
  height: 78px;
  overflow: hidden;
  background: #0f1114;
}

.lk-opt.is-on .lk-opt__view { outline: 2px solid var(--text-strong); outline-offset: -2px; }

.lk-opt__zoom {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: block;
  transform-origin: 0 0;
}

.lk-opt__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.lk-opt__std {
  font: 500 max(var(--fs-floor), 9.5px)/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.lk-opt.is-on .lk-opt__name::after {
  content: "";
  flex: none;
  width: 10px;
  height: 6px;
  margin-inline-start: auto;
  border-inline-start: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(-45deg);
}

.lk-opt.is-on .lk-opt__std { display: none; }

/* ---------- Die kleine Home (.lkm) ----------------------------------------
   Eine Skizze, 168 × 320 px, aus Flächen statt Schrift. Sie zeigt jede
   Wahl so, wie sie auf der echten Seite wirkt – dieselben Farben, dieselbe
   Ordnung. Keine Unschärfe hier (zu teuer bei 35 Bildern); Glas ist eine
   durchscheinende Fläche über demselben Schein. */

.lkm {
  --bgm: #0f1114;
  --srf: 28, 31, 38;
  position: relative;
  display: block;
  width: 168px;
  height: 320px;
  overflow: hidden;
  background: var(--bgm);
  isolation: isolate;
}

/* Ohne Gewicht (:where), damit jede Regel darunter ihr display behält. */
:where(.lkm) :where(i, b) { display: block; font-style: normal; }

.lkm-pond { position: absolute; inset: 0; z-index: -1; }

.lkm[data-pond="morning"] .lkm-pond {
  background:
    radial-gradient(70% 42% at 12% 10%, color-mix(in srgb, var(--c-calendar) 24%, transparent), transparent 72%),
    radial-gradient(60% 36% at 96% 24%, color-mix(in srgb, var(--c-journal) 20%, transparent), transparent 72%),
    radial-gradient(70% 40% at 40% 96%, color-mix(in srgb, var(--c-nutrition) 16%, transparent), transparent 72%);
}
.lkm[data-pond="day"] .lkm-pond {
  background:
    radial-gradient(60% 40% at 8% 16%, color-mix(in srgb, var(--c-nutrition) 20%, transparent), transparent 72%),
    radial-gradient(55% 36% at 96% 40%, color-mix(in srgb, var(--c-calendar) 20%, transparent), transparent 72%),
    radial-gradient(60% 38% at 24% 92%, color-mix(in srgb, var(--c-fitness) 16%, transparent), transparent 72%);
}
.lkm[data-pond="evening"] .lkm-pond {
  background:
    radial-gradient(70% 42% at 10% 18%, color-mix(in srgb, var(--c-meditation) 24%, transparent), transparent 72%),
    radial-gradient(60% 40% at 100% 52%, color-mix(in srgb, var(--c-cue-diary) 20%, transparent), transparent 72%),
    radial-gradient(70% 36% at 30% 100%, color-mix(in srgb, var(--c-reader) 24%, transparent), transparent 72%);
}
.lkm[data-pond="night"] .lkm-pond {
  background:
    radial-gradient(90% 34% at 50% 108%, color-mix(in srgb, var(--c-meditation) 22%, transparent), transparent 76%),
    radial-gradient(55% 28% at 10% 100%, color-mix(in srgb, var(--c-calendar) 15%, transparent), transparent 76%);
}
.lkm:is([data-pond="still"], [data-pond="drift"], [data-pond="ripple"]) .lkm-pond {
  background:
    radial-gradient(60% 40% at 8% 18%, color-mix(in srgb, var(--c-calendar) 24%, transparent), transparent 70%),
    radial-gradient(55% 35% at 95% 42%, color-mix(in srgb, var(--c-cue-diary) 20%, transparent), transparent 70%),
    radial-gradient(60% 40% at 30% 92%, color-mix(in srgb, var(--c-nutrition) 18%, transparent), transparent 70%);
}
.lkm[data-pond="progress"] .lkm-pond {
  background:
    radial-gradient(55% 38% at 10% 18%, color-mix(in srgb, var(--c-journal) 26%, transparent), transparent 72%),
    radial-gradient(55% 38% at 92% 38%, color-mix(in srgb, var(--c-calendar) 20%, transparent), transparent 72%),
    radial-gradient(55% 38% at 24% 88%, color-mix(in srgb, var(--c-nutrition) 16%, transparent), transparent 72%);
}
.lkm[data-pond="deep"] .lkm-pond {
  background:
    radial-gradient(90% 38% at 50% 108%, color-mix(in srgb, var(--c-nutrition) 26%, transparent), transparent 75%),
    radial-gradient(60% 30% at 15% 100%, color-mix(in srgb, var(--c-calendar) 20%, transparent), transparent 75%);
}
.lkm[data-pond="ripple"] .lkm-pond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 80'%3E%3Cpath d='M11.5 0 L34.5 0 L46 20 L34.5 40 L11.5 40 L0 20 Z M11.5 40 L0 60 L11.5 80 M34.5 40 L46 60 L34.5 80' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 23px 40px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 80'%3E%3Cpath d='M11.5 0 L34.5 0 L46 20 L34.5 40 L11.5 40 L0 20 Z M11.5 40 L0 60 L11.5 80 M34.5 40 L46 60 L34.5 80' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 23px 40px;
}
.lkm[data-pond="drift"] .lkm-pond { transform: translate(6%, -4%) scale(1.08); }
.lkm[data-pond="off"] .lkm-pond { display: none; }


/* Topbar */
.lkm-top { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 0; height: 30px; z-index: 2; background: linear-gradient(var(--bgm) 70%, transparent); }
.lkm-line { position: absolute; inset-inline-start: 19px; inset-inline-end: 0; top: 16px; height: 1.5px; background: #fff; }
.lkm[data-line="fade"] .lkm-line { background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.8) 32%, transparent 100%); }
.lkm[data-line="glow"] .lkm-line { box-shadow: 0 0 6px 1px rgba(255,255,255,.55), 0 0 14px 2px rgba(255,255,255,.18); }
.lkm[data-line="hair"] .lkm-line { height: 1px; opacity: .85; }
.lkm-halo { display: none; position: absolute; inset-inline-start: -6px; top: -6px; width: 50px; height: 44px; background: radial-gradient(closest-side, rgba(255,255,255,.3), transparent); }
.lkm[data-line="hair"] .lkm-halo { display: block; }
.lkm-plate { position: absolute; inset-inline-start: 6px; top: 5.5px; width: 26px; height: 22.5px; display: grid; place-items: center; clip-path: var(--hex-clip); background: #fff; }
.lkm-plate .la-koi { width: 84%; height: 84%; }
.lkm-stamp { width: 12px; height: 12px; background: #0f1114; clip-path: var(--hex-clip); }
.lkm-title { position: absolute; inset-inline-start: 38px; top: 6px; width: 46px; height: 5px; background: rgba(255,255,255,.85); }
.lkm-tool { position: absolute; inset-inline-end: 6px; top: 3px; width: 16px; height: 9px; background: rgba(255,255,255,.18); }
.lkm-focus-line { position: absolute; inset-inline-start: 0; top: 0; width: 56px; height: 30px; }

/* Inhalt */
.lkm-body { position: absolute; inset-inline-start: 8px; inset-inline-end: 8px; top: 34px; bottom: 24px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }

.lkm-day { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 14px; }
.lkm-date { width: 52px; height: 9px; background: #fff; }
.lkm-meter { display: flex; gap: 2px; }
.lkm-meter b { width: 6px; height: 2.5px; background: #434a59; }
.lkm:is([data-layout="tidy"], [data-layout="time"]) .lkm-day { justify-content: flex-start; }
.lkm:is([data-layout="tidy"], [data-layout="time"]) .lkm-meter b { width: 7px; height: 6px; clip-path: var(--hex-clip); background: color-mix(in srgb, var(--tone) 32%, transparent); }
.lkm:is([data-layout="tidy"], [data-layout="time"]) .lkm-meter b.is-on { background: var(--tone); }

/* Flächen: Glas in der Skizze */
.lkm :is(.lkm-now, .lkm-tile, .lkm-row, .lkm-chips b) {
  --c: 10px;
  background-color: rgba(var(--srf), .62);
}
.lkm[data-cards="clear"] :is(.lkm-now, .lkm-tile, .lkm-row, .lkm-chips b) { background-color: rgba(var(--srf), .4); background-image: linear-gradient(160deg, rgba(255,255,255,.1), transparent 45%); }
.lkm[data-cards="tint"] :is(.lkm-now, .lkm-tile, .lkm-row, .lkm-chips b) { background-color: color-mix(in srgb, var(--tone, rgb(var(--srf))) 13%, rgba(var(--srf), .62)); }
.lkm[data-cards="edge"] :is(.lkm-now, .lkm-tile, .lkm-row, .lkm-chips b) { background-image: linear-gradient(135deg, transparent 3.5px, var(--tone, #fff) 3.5px 5px, color-mix(in srgb, var(--tone, #fff) 20%, transparent) 5px, transparent 22px); }
.lkm[data-cards="smoke"] :is(.lkm-now, .lkm-tile, .lkm-row, .lkm-chips b) { background-color: rgba(15, 17, 20, .86); }

.lkm-now, .lkm-tile, .lkm-row { clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }

/* Now */
.lkm-nowwrap { position: relative; isolation: isolate; }
.lkm[data-now="glow"] .lkm-nowwrap::before { content: ""; position: absolute; inset: -14px -8px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-calendar) 34%, transparent), transparent); }
.lkm-now { position: relative; display: grid; gap: 3px; padding: 7px; background-image: linear-gradient(160deg, color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%); }
.lkm[data-cards="clear"] .lkm-now, .lkm[data-cards="edge"] .lkm-now { background-image: linear-gradient(160deg, color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%); }
.lkm-now__eb { width: 46px; height: 3px; background: var(--tone); }
.lkm-now__title { width: 92px; height: 7px; margin-top: 2px; background: #fff; }
.lkm-now__text { width: 70px; height: 3px; background: rgba(255,255,255,.35); }
.lkm-now__acts { display: flex; gap: 4px; margin-top: 4px; }
.lkm-now__go { width: 30px; height: 10px; background: var(--tone); box-shadow: 1.5px 1.5px 0 var(--tone-deep); }
.lkm-now__later { width: 20px; height: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.lkm[data-now="solid"] .lkm-now { background: var(--tone); }
.lkm[data-now="solid"] .lkm-now__eb, .lkm[data-now="solid"] .lkm-now__title { background: #0f1114; }
.lkm[data-now="solid"] .lkm-now__text { background: rgba(15,17,20,.5); }
.lkm[data-now="solid"] .lkm-now__go { background: #0f1114; box-shadow: 1.5px 1.5px 0 rgba(15,17,20,.4); }
.lkm[data-now="solid"] .lkm-now__later { box-shadow: inset 0 0 0 1px rgba(15,17,20,.5); }
.lkm[data-now="edge"] .lkm-now { background-image: linear-gradient(135deg, transparent 3.5px, var(--tone) 3.5px 5.5px, color-mix(in srgb, var(--tone) 18%, transparent) 5.5px, transparent 45%); }
.lkm[data-now="edge"] .lkm-now::after { content: ""; position: absolute; inset-inline-start: 5px; inset-inline-end: 0; top: 0; height: 1.5px; background: linear-gradient(90deg, var(--tone), transparent 72%); }

/* Die Today-Karte in der Skizze (seit 13.10.2026): eine Fläche, darin je
   nach Ordnung der Schritt mit Zeilen, Reiter oder Kacheln. */
.lkm-today { position: relative; display: grid; gap: 3px; padding: 5px; background: rgba(var(--srf), .62); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.lkm[data-cards='tint'] .lkm-today { background-color: color-mix(in srgb, #fff 4%, rgba(var(--srf), .62)); }
.lkm-today__head { width: 30px; height: 3px; margin: 1px 0 1px 2px; background: rgba(255,255,255,.7); }
.lkm-today .lkm-now { margin: 0 -1px 1px; }
.lkm-trow { display: flex; align-items: center; gap: 4px; height: 11px; padding: 0 3px; border-top: 1px solid rgba(255,255,255,.07); }
.lkm-trow.is-shine { border-top-color: transparent; background: color-mix(in srgb, var(--tone) 16%, transparent); }
.lkm-trow__hex { flex: none; width: 6px; height: 5px; clip-path: var(--hex-clip); background: var(--tone); }
.lkm-trow__t { width: 64px; height: 3px; background: rgba(255,255,255,.75); }
.lkm-trow:nth-child(odd) .lkm-trow__t { width: 48px; }
.lkm-ttabs { display: grid; grid-template-columns: 1fr 1fr 18px; height: 9px; margin: 1px 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.lkm-ttabs b.is-on { background: rgba(255,255,255,.16); box-shadow: inset 0 -1.5px 0 #fff; }
.lkm-tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.lkm-tgrid b { height: 22px; background: color-mix(in srgb, var(--tone) 18%, transparent); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.lkm-tgrid b.is-shine { background: color-mix(in srgb, var(--tone) 34%, transparent); }
.lkm-tgrid b.is-done { background: color-mix(in srgb, var(--tone) 55%, transparent); }
.lkm-chips { display: flex; gap: 4px; margin-top: -3px; overflow: hidden; }
.lkm-chips b { flex: none; height: 9px; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.lkm-chips b:first-child { width: 44px; }
.lkm-chips b:last-child { width: 110px; }
.lkm:is([data-layout="tidy"], [data-layout="time"]) .lkm-chips { flex-wrap: wrap; }
.lkm:is([data-layout="tidy"], [data-layout="time"]) .lkm-chips b:last-child { width: 96px; }

.lkm-sec { width: 34px; height: 3px; margin-top: 2px; background: rgba(255,255,255,.35); }

/* Kacheln */
.lkm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lkm-tile { position: relative; height: 40px; padding: 5px; isolation: isolate; overflow: hidden; }
.lkm-sign { position: absolute; inset-inline-start: 5px; top: 5px; width: 11px; height: 9.5px; clip-path: var(--hex-clip); background: var(--tone); }
.lkm-add { position: absolute; inset-inline-end: 5px; top: 5px; width: 9px; height: 9px; background: color-mix(in srgb, var(--tone) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 80%, transparent), 1.2px 1.2px 0 color-mix(in srgb, var(--tone) 45%, transparent); }
.lkm-add::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 max(var(--fs-floor), 8px)/1 var(--font); color: var(--tone); }
.lkm[data-buttons="grey"] .lkm-add { background: rgba(255,255,255,.18); box-shadow: 1.2px 1.2px 0 rgba(255,255,255,.3); }
.lkm[data-buttons="glow"] .lkm-add { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tone) 70%, transparent)); }
.lkm[data-buttons="glass"] .lkm-add { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 1.2px 1.2px 0 rgba(255,255,255,.35); }
.lkm[data-buttons="solid"] .lkm-add { background: var(--tone); box-shadow: 1.2px 1.2px 0 var(--tone-deep); }
.lkm[data-buttons="solid"] .lkm-add::after { color: #0f1114; }
.lkm-name { position: absolute; inset-inline-start: 5px; bottom: 11px; width: 34px; height: 4.5px; background: #fff; }
.lkm-status { position: absolute; inset-inline-start: 5px; bottom: 6px; width: 26px; height: 2.5px; background: rgba(255,255,255,.35); }
.lkm-bar { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.lkm-bar::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: var(--fill); background: var(--tone); }
.lkm-mark, .lkm-num { display: none; }

.lkm[data-tiles="glow"] .lkm-tile { background-image: radial-gradient(70% 62% at 22% 22%, color-mix(in srgb, var(--tone) 30%, transparent), transparent 72%); }

.lkm[data-tiles="fill"] .lkm-bar { display: none; }
.lkm[data-tiles="fill"] .lkm-tile { background-image: linear-gradient(to top, transparent calc(var(--fill) - 1.5px), var(--tone) calc(var(--fill) - 1.5px) var(--fill), transparent var(--fill)), linear-gradient(to top, color-mix(in srgb, var(--tone) 30%, transparent) var(--fill), transparent var(--fill)); }
.lkm[data-tiles="fill"] .lkm-tile.is-done { background: var(--tone); }
.lkm[data-tiles="fill"] .lkm-tile.is-done :is(.lkm-sign, .lkm-name) { background: #0f1114; }
.lkm[data-tiles="fill"] .lkm-tile.is-done .lkm-status { background: rgba(15,17,20,.5); }

.lkm[data-tiles="symbol"] .lkm-mark { display: block; position: absolute; inset-inline-end: -6px; bottom: -8px; z-index: -1; width: 36px; height: 36px; background: #fff; opacity: .1; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.lkm[data-tiles="symbol"] .lkm-bar::after { box-shadow: 0 0 4px var(--tone); }

.lkm[data-tiles="number"] .lkm-num { display: block; position: absolute; inset-inline-start: 5px; bottom: 16px; font: 600 max(var(--fs-floor), 9px)/1 var(--font-mono); letter-spacing: -.04em; color: var(--tone); }
.lkm[data-tiles="number"] .lkm-sign { width: 9px; height: 8px; }

.lkm[data-tiles="list"] .lkm-tiles { grid-template-columns: 1fr; gap: 3px; }
.lkm[data-tiles="list"] .lkm-tile { height: 19px; }
.lkm[data-tiles="list"] .lkm-sign { top: 5px; }
.lkm[data-tiles="list"] .lkm-name { inset-inline-start: 21px; bottom: auto; top: 5px; }
.lkm[data-tiles="list"] .lkm-status { inset-inline-start: 21px; bottom: auto; top: 12px; }
.lkm[data-tiles="list"] .lkm-add { top: 5px; }

/* Next up */
.lkm-next { display: grid; gap: 3px; }
.lkm-row { display: flex; align-items: center; gap: 5px; height: 15px; padding: 0 5px; }
.lkm-row b:first-child { width: 12px; height: 3px; background: rgba(255,255,255,.35); }
.lkm-row b:last-child { width: 60px; height: 4px; background: #fff; }
.lkm-row__sign { width: 4px; height: 4px; background: var(--tone); }
.lkm:is([data-layout="tidy"], [data-layout="time"]) .lkm-row__sign { width: 8px; height: 7px; clip-path: var(--hex-clip); }

/* Tableiste */
.lkm-tabs { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 22px; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: rgba(11,13,16,.88); }
.lkm-tabplate { width: 12px; height: 13.8px; clip-path: var(--hex-clip-pointy); background: #fff; }
.lkm-tabs > b { width: 9px; height: 9px; background: rgba(255,255,255,.3); }
.lkm-fab { margin-inline-start: auto; width: 14px; height: 16px; clip-path: var(--hex-clip-pointy); background: #2b303c; }

/* ---------- E-ink: Papier ------------------------------------------------------ */

html[data-eink] .la-pond { display: none !important; }

html[data-eink] .hb :is(.hb-td, .hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card),
html[data-eink] .sheet :is(.sheet-card, .sheet-fold, .sheet-do),
html[data-eink] .sheet__panel {
  background-color: var(--surface) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: none;
}

html[data-eink] .sheet__backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-eink] .hb .hb-nowwrap::before,
html[data-eink] .hb .hb-now::after,
html[data-eink] body[data-shell="home"] .sh-top__mark::before { display: none; }
html[data-eink] body[data-shell="home"] .sh-top__rule { background: var(--text); box-shadow: none; opacity: 1; }
html[data-eink] .hb-tile__act { filter: none !important; }
html[data-eink] .hb-tile__mark { display: none !important; }
html[data-eink] .hb .hb-tile__bar i { box-shadow: none; }

/* Auf Papier: der Koi als schwarze Strichzeichnung (Schuppen und Flossen
   ausgespart) auf einer weißen Platte – Grau auf Grau läse sich nicht. */
html[data-eink] .la-koi { --k-ink: #000; --k-fin: #fff; --k-a: #fff; --k-b: #fff; --k-c: #fff; --k-d: #fff; }
html[data-eink] .sh-top__hex:has(.sh-top__koi:not(.sh-top__glyph--home)) .hex__face,
html[data-eink] .hex:has(.hex__koi) .hex__face,
html[data-eink] .la-koi-chip.la-koi-chip,
html[data-eink] .lkm-plate { background: #fff; }
html[data-eink] .lk-opt__view, html[data-eink] .lk-live__frame { filter: grayscale(1); }