/* =========================================================
   Life Archive – Patterns: das Jahr, die Instrumente, eigene
   Tracker, Einchecken und der Jahresbericht

   Formensprache wie überall (diligent-work):
     Flächen       zwei geschnittene Ecken (links oben, rechts
                   unten), dazu hier ein dunkler, harter Sockel
                   unter jedem Instrument – --py-plinth, als
                   drop-shadow am Träger, damit er dem Schnitt folgt
     Knöpfe        Rechteck mit Sockel (.btn3d), nie geschnitten
     Quadrate      unter 30 px ohne Schnitt – eckig, nicht rund
     Kreise        nur in Diagrammen (Ring, Donut, Uhr): Daten,
                   keine Bedienelemente

   Farben ausschließlich aus Token. Eine Linse bringt ihre Farbe
   als --k mit; jede Stufe ist color-mix() derselben Farbe mit
   --py-cell – so stimmen Raster, Ring, Legende und Poster.

   Breiten: unter 720 px eine Spalte (das Telefon), ab 720 die
   Karten zu zweit, ab 1024 ein Raster aus zwölf Spalten, in dem
   das Jahr eine Reihe ist und der Ausleser daneben steht.
   ========================================================= */

/* ---------- Seite ---------------------------------------------------------- */

#cal-pat { max-width: var(--board); }
@media (min-width: 1024px) { #cal-pat { max-width: var(--shell); } }

.pat { gap: 30px; padding-bottom: 24px; }

.pat-sec { display: grid; gap: 12px; align-content: start; min-width: 0; }

.pat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.pat-head__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.pat-head__hint { font-size: 12px; color: var(--text-subtle); text-align: end; }

.pat-head__link {
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--c-calendar);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--o), .25);
}

.pat-quiet { margin: 0; font-size: 13px; color: var(--text-muted); }

/* Die Fläche eines Instruments: Rand, Fläche, Sockel – alles mit Schnitt. */
.pat-panel,
.pat-year,
.pat-fig,
.pat-card,
.pat-trk,
.pat-readout,
.pat-report,
.pat-body,
.pat-rhythm__body,
.ti-item,
.pat-empty {
  --cut: 14px;
  position: relative;
  isolation: isolate;
  filter: drop-shadow(5px 6px 0 var(--py-plinth));
}

.pat-year::before, .pat-fig::before, .pat-card::before, .pat-trk::before, .pat-readout::before,
.pat-report::before, .pat-body::before, .pat-rhythm__body::before, .ti-item::before, .pat-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: var(--cut-clip);
  background: var(--line-strong);
}

.pat-year::after, .pat-fig::after, .pat-card::after, .pat-trk::after, .pat-readout::after,
.pat-report::after, .pat-body::after, .pat-rhythm__body::after, .ti-item::after, .pat-empty::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--cut-clip);
  background: var(--surface);
}

/* ---------- Das Jahr ---------------------------------------------------------- */

.pat-year { --cut: 18px; padding: 16px 16px 18px; gap: 14px; }

.pat-rail { display: flex; flex-wrap: wrap; gap: 8px 7px; align-items: center; }

.pat-rail__group {
  flex-basis: 100%;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.pat-rail__group:first-child { margin-top: 0; }

@media (min-width: 720px) {
  .pat-rail__group { flex-basis: auto; margin: 0 2px 0 8px; }
  .pat-rail__group:first-child { margin-inline-start: 0; }
}

/* Ein Chip der Leiste: ein Knopf, der umschaltet – mit Sockel. */
.pat-lens {
  --btn-face-hover: color-mix(in srgb, var(--k, var(--c-calendar)) 14%, transparent);
  gap: 7px;
  min-height: 34px;
  font-size: 12.5px;
}

.pat-lens i { width: 8px; height: 8px; background: var(--k, var(--c-calendar)); flex: none; }

.pat-lens.is-on {
  --btn-face: color-mix(in srgb, var(--k, var(--c-calendar)) 24%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--k, var(--c-calendar)) 30%, transparent);
  --btn-edge: var(--k, var(--c-calendar));
  color: var(--text-strong);
  font-weight: 600;
}

.pat-lens--more { color: var(--text-muted); }

.pat-pair { gap: 8px; }
.pat-pair__glyph {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, var(--c-calendar) 0 50%, var(--tr-iris) 50% 100%);
  flex: none;
}
.pat-pair__x {
  margin: -4px -6px -4px 2px;
  padding: 2px 6px;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
}
.pat-pair__x:hover { color: var(--text-strong); }

.pat-year__main { display: grid; gap: 14px; min-width: 0; }

@media (min-width: 1024px) {
  .pat-year__main { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
}

.pat-year__left { display: grid; gap: 10px; min-width: 0; }

.pat-year__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.pat-year__id { display: grid; gap: 2px; min-width: 0; flex: 1 1 160px; }

.pat-year__num {
  font-family: var(--font-mono);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--text-strong);
}

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

.pat-year__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.pat-step { min-width: 38px; min-height: 34px; padding: 6px 10px; font-size: 16px; }

.pat-grid { min-width: 0; }

.pat-info {
  justify-self: start;
  font-size: 12px;
  color: var(--text-subtle);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--o), .2);
}
.pat-info:hover { color: var(--text); }

/* ---------- Raster (app/calendar/year.js) --------------------------------------- */

.py-grid { display: grid; gap: 14px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }

.py-block { display: grid; grid-template-columns: 16px auto; gap: 3px 5px; justify-content: start; }

.py-months { grid-column: 2; position: relative; height: 15px; }

.py-month {
  position: absolute;
  top: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  line-height: 15px;
  color: var(--text-subtle);
  transition: color var(--dur-fast) var(--ease-out);
}
.py-month:hover, .py-month.is-hot { color: var(--k); }
/* Die Monatsnamen sind Knöpfe, aber nur 15 px hoch: die Trefferfläche
   reicht unsichtbar darüber hinaus (WCAG 2.5.8, 10.10.2026). */
.py-month::before { content: ''; position: absolute; inset: -5px -3px; }
.py-month.is-focus { color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }

.py-days {
  display: grid;
  grid-template-rows: repeat(7, var(--cs));
  row-gap: var(--cg);
  align-items: center;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9px);
  line-height: 1;
  color: var(--text-subtle);
}
.py-days .is-hot { color: var(--k); font-weight: 600; }

.py-cells {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--cs));
  grid-auto-columns: var(--cs);
  gap: var(--cg);
}

.py-cell {
  display: block;
  width: var(--cs, 10px);
  height: var(--cs, 10px);
  background: var(--py-cell);
  outline: 1px solid transparent;
  outline-offset: 1px;
  transition: background-color var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.py-cells .py-cell { cursor: pointer; }
.py-cell[data-l="1"] { background: color-mix(in srgb, var(--k) 28%, var(--py-cell)); }
.py-cell[data-l="2"] { background: color-mix(in srgb, var(--k) 52%, var(--py-cell)); }
.py-cell[data-l="3"] { background: color-mix(in srgb, var(--k) 76%, var(--py-cell)); }
.py-cell[data-l="4"] {
  background: var(--k);
  box-shadow: 0 0 6px color-mix(in srgb, var(--k) 40%, transparent);
}
.py-cell.is-cat { background: var(--cc); box-shadow: none; }
.py-cell.is-pair { background: linear-gradient(135deg, var(--pa) 0 50%, var(--pb) 50% 100%); box-shadow: none; }
.py-cell.is-miss { background: var(--py-cell); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 70%, transparent); }
.py-cell.is-fut { background: transparent; box-shadow: inset 0 0 0 1px var(--py-future-line); cursor: default; }
.py-cell.is-void { visibility: hidden; }
.py-cell.is-today { outline-color: var(--text-muted); }
.py-cell.is-sel { outline: 2px solid var(--text-strong); outline-offset: 1px; position: relative; z-index: 1; }
.py-cell.is-dim { opacity: .16; }
.py-cells .py-cell:hover { outline-color: var(--text); }
.py-cell:focus-visible { outline: 2px solid var(--c-calendar); outline-offset: 2px; }

.py-all { display: grid; gap: 22px; }
.py-year { display: grid; gap: 8px; }
.py-year__head { display: flex; align-items: baseline; gap: 12px; font-size: 12.5px; color: var(--text-muted); }
.py-year__name {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(var(--o), .2);
}
.py-quiet {
  justify-self: start;
  margin: 0;
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-subtle);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.py-key { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; font-family: var(--font-mono); font-size: max(var(--fs-floor), 10px); color: var(--text-subtle); }
.py-key .py-cell { width: 11px; height: 11px; display: inline-block; }
.py-key span + .py-cell { margin-inline-start: 6px; }
.py-key__pair { width: 11px; height: 11px; display: inline-block; background: linear-gradient(135deg, var(--pa) 0 50%, var(--py-cell) 50% 100%); }
.py-key__pair--b { margin-inline-start: 8px; background: linear-gradient(135deg, var(--py-cell) 0 50%, var(--pb) 50% 100%); }

/* ---------- Ausleser und Kacheln ------------------------------------------------- */

.pat-year__side { display: grid; gap: 10px; align-content: start; }

.pat-readout { --cut: 12px; padding: 13px 15px; display: grid; gap: 12px; }

.pat-readout__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  margin: 0;
  font-size: 13px;
}
.pat-readout__list dt {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding-top: 2px;
}
.pat-readout__list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; color: var(--text); }

.pat-readout__acts { display: flex; flex-wrap: wrap; gap: 8px; }

.pat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1024px) { .pat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pat-tile {
  --cut: 9px;
  padding: 10px 9px;
  display: grid;
  gap: 2px;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
}
.pat-tile b { font-family: var(--font-mono); font-size: 18px; font-weight: 600; line-height: 1.1; }
.pat-tile span { font-size: max(var(--fs-floor), 10.5px); color: var(--text-muted); line-height: 1.3; }

/* ---------- Unter dem Jahr: Spalten, die für sich stapeln ------------------------------
   Keine gemeinsamen Reihen – jede Spalte ist eine eigene Säule mit immer
   demselben Abstand, also nie ein Loch neben einem hohen Nachbarn. Wie
   viele Spalten es sind und was wohin kommt, entscheidet arrange() in
   app/calendar/patterns.js nach der Breite der Fläche (nicht des
   Fensters – die Schiene links zählt nicht mit). */

.pat-flow { display: grid; gap: 30px 26px; min-width: 0; align-items: start; }
.pat-flow[data-cols="2"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pat-flow[data-cols="3"] { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }

.pat-col { display: grid; gap: 30px; align-content: start; min-width: 0; }
.pat-col:empty { display: none; }

/* In einer schmalen Spalte steht der Jahresbericht untereinander. */
.pat-flow[data-cols="2"] .pat-report,
.pat-flow[data-cols="3"] .pat-report { grid-template-columns: 1fr; }

/* ---------- Ring, Donut, Uhr --------------------------------------------------------- */

.pat-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.pat-fig { --cut: 12px; margin: 0; padding: 12px 10px 10px; display: grid; gap: 6px; justify-items: center; }
.pat-fig svg { width: 100%; max-width: 240px; height: auto; display: block; overflow: visible; }
.pat-fig figcaption {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center;
}

.py-ring line { stroke-width: 1.15; transition: opacity var(--dur-fast) var(--ease-out); }
.py-ring line.is-dim { opacity: .15; }
.py-ring line.is-pick { stroke: var(--text-strong); stroke-width: 2.4; }
.py-ring__sep { stroke: var(--py-spoke); stroke-width: .8; }
.py-ring__m { font-family: var(--font-mono); font-size: max(var(--fs-floor), 8px); fill: var(--text-subtle); text-anchor: middle; }
.py-ring__hit { fill: transparent; cursor: pointer; }
.py-ring__hit:hover, .py-ring__hit.is-on { fill: rgba(var(--o), .05); }
.py-ring__big { font-family: var(--font-mono); font-size: 24px; font-weight: 600; text-anchor: middle; fill: var(--text-strong); }
.py-ring__small { font-family: var(--font-mono); font-size: max(var(--fs-floor), 8px); letter-spacing: .12em; text-anchor: middle; fill: var(--text-subtle); }

.py-donut__ticks line { stroke: var(--py-spoke); }
.py-donut__slice, .py-clock path { cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out); }
.py-donut__slice.is-dim, .py-clock path.is-dim { opacity: .2; }
.py-donut__slice:hover, .py-clock path:hover { opacity: .85; }

.py-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.py-legend__row {
  --cut: 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  font-size: 12px;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.py-legend__row i { width: 9px; height: 9px; background: var(--k); }
/* Das Zeichen einer Art neben dem Farbfeld (Fitness: die Farben sind
   nur Stufen zweier Rottöne – erst das Zeichen sagt, welche Art). */
.py-legend__row .st-legend__ico { width: 14px; height: 14px; flex: none; opacity: .85; }
.py-legend__row b { font-family: var(--font-mono); font-size: max(var(--fs-floor), 10.5px); font-weight: 500; color: var(--text-muted); }
.py-legend__row:hover { background: color-mix(in srgb, var(--k) 14%, var(--surface-2)); }
.py-legend__row.is-on { background: color-mix(in srgb, var(--k) 24%, var(--surface-2)); }
.py-legend__row.is-dim { opacity: .4; }

.pat-rhythm__body { --cut: 14px; padding: 14px; display: grid; gap: 12px; justify-items: center; }
.pat-fig--clock { filter: none; padding: 0; }
.pat-fig--clock::before, .pat-fig--clock::after { display: none; }
.pat-rhythm__body .py-legend { justify-content: center; }

/* ---------- Körper ------------------------------------------------------------------------ */

.pat-body { padding: 14px; display: grid; gap: 14px; }
.pat-body__map { display: grid; justify-items: center; }
.pat-body__map .bodymap { width: 100%; max-width: 320px; height: auto; }
.pat-body__cap { margin: 0 0 6px; font-family: var(--font-mono); font-size: max(var(--fs-floor), 9.5px); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }

.py-mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.py-mlist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
  padding: 5px 4px;
  font-size: 12.5px;
  cursor: pointer;
}
.py-mlist__row b { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); font-weight: 500; color: var(--text-muted); }
.py-mlist__row s { grid-column: 1 / -1; position: relative; height: 3px; background: var(--py-cell); text-decoration: none; }
.py-mlist__row s::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c-fitness); }
.py-mlist__row:hover, .py-mlist__row.is-on { background: color-mix(in srgb, var(--c-fitness) 12%, transparent); }
.py-mlist__row:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 1px; }

/* Eine Spalte, aber breit: Karte und Liste nebeneinander. */
@media (min-width: 720px) {
  .pat-flow[data-cols="1"] .pat-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .pat-flow[data-cols="1"] .py-mlist { grid-template-columns: 1fr; }
}

/* ---------- Bereiche ---------------------------------------------------------------------- */

.pat-cards { display: grid; gap: 14px; }
@media (min-width: 560px) {
  .pat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Eine ungerade letzte Karte nimmt die ganze Reihe – kein halbes Loch. */
  .pat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.pat-card {
  --cut: 12px;
  display: grid;
  gap: 6px;
  padding: 12px 14px 10px;
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.pat-card:hover { transform: translate(-1px, -1px); }
.pat-card:active { transform: translate(2px, 2px); }
.pat-card.is-dim { opacity: .4; }
.pat-card:focus-visible { outline: 2px solid var(--k); outline-offset: 3px; }

.pat-card__head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.pat-card__head i { width: 13px; height: 11px; background: var(--k); clip-path: var(--hex-clip); flex: none; align-self: center; }
.pat-card__head b { margin-inline-start: auto; font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.pat-card__head small { font-size: max(var(--fs-floor), 11px); font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.pat-card__note { font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }

/* Die Fläche dehnt sich, Schrift und Endpunkt nicht (app/calendar/instruments.js). */
.py-chart { position: relative; display: block; height: 86px; }
.py-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.py-chart__grid { stroke: var(--line); stroke-width: 1; }
.py-chart__axis {
  position: absolute;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9px);
  line-height: 1;
  color: var(--text-subtle);
  white-space: nowrap;
  pointer-events: none;
}
.py-chart__axis--y { inset-inline-start: 0; transform: translateY(-50%); }
.py-chart__axis--x { bottom: 0; }
.py-chart__dot { position: absolute; width: 6px; height: 6px; transform: translate(-50%, -50%); }

/* ---------- Eigene Tracker ------------------------------------------------------------------ */

.pat-new { --accent: var(--tr-iris); }
.pat-trk-list { display: grid; gap: 14px; }

.pat-trk { --cut: 12px; display: grid; gap: 10px; padding: 12px 14px 12px; }

.pat-trk__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0;
  text-align: start;
  color: var(--text);
}
.pat-trk__main:focus-visible { outline: 2px solid var(--k); outline-offset: 4px; }

.trk-glyph {
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--k, var(--tk, var(--c-calendar)));
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.ti-item .trk-glyph, .cal-target .trk-glyph { background: var(--tk); }

.pat-trk__text { display: grid; gap: 1px; min-width: 0; }
.pat-trk__name { font-size: 14.5px; font-weight: 600; }
.pat-trk__meta { font-size: max(var(--fs-floor), 11.5px); color: var(--text-muted); }
.pat-trk__num { display: grid; justify-items: end; }
.pat-trk__num b { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--k); line-height: 1; }
.pat-trk__num small { font-size: max(var(--fs-floor), 10px); color: var(--text-subtle); }

/* Die Wochen füllen die Karte bis zum Rand: Spalten teilen sich die
   Breite, die Zellen bleiben quadratisch (wie .pat-jr__cells). */
.pat-trk__strip {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--w, 53), minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  gap: 2px;
}
.pat-trk__strip .py-cell { width: 100%; height: auto; aspect-ratio: 1; cursor: default; }
.pat-trk__strip .py-cell[data-l="4"] { box-shadow: none; }

.pat-trk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pat-trk__acts > span { flex: 1 1 140px; font-size: 12px; color: var(--text-muted); min-width: 0; }
.pat-trk__done { color: var(--k) !important; font-weight: 600; }
.pat-trk__open { color: var(--text) !important; }

/* ---------- Ein Tracker mit Ende: die Strecke (app/calendar/patterns.js, journey) --
   Kopfzeile · Schiene · Anfang/Ende · Raster mit Zahlen daneben. Die
   Farbe ist --k, die des Trackers; alles andere sind die Bausteine des
   Jahres (.py-cell), damit die Strecke aussieht wie ein Ausschnitt aus
   ihm und nicht wie ein fremdes Instrument. */

.pat-jr { display: grid; gap: 8px; }

.pat-jr__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.pat-jr__top b {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}
.pat-jr__left b { color: var(--k); }

/* Die Schiene: Zeit vom Anfang bis zum Ende. Gefüllt ist, was vorbei
   ist – aus dem Dunkel in die Farbe des Trackers, wie die Balken der
   Ränge. Unter 30 px hoch, also ohne Schnitt. */
.pat-jr__rail {
  position: relative;
  height: 8px;
  margin: 6px 0 2px;
  background: var(--py-cell);
}
.pat-jr__rail i {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--py-future-line);
}
.pat-jr__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--k) 30%, transparent), var(--k));
  transform-origin: left center;
  animation: pat-jr-grow 900ms var(--ease-out) both;
}

/* Heute: das Sechseck auf der Schiene, mit dem Rand der Fläche darum,
   damit es sich vom Balken abhebt. Gelesen, nicht gedrückt. */
.pat-jr__now {
  position: absolute;
  top: 50%;
  inset-inline-start: clamp(10px, calc(var(--p) * 100%), calc(100% - 10px));
  width: 20px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: var(--surface);
  clip-path: var(--hex-clip);
  animation: pat-jr-in 500ms var(--ease-out) 700ms both;
}
.pat-jr__now::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--k);
  clip-path: var(--hex-clip);
}

.pat-jr__ends {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10px);
  color: var(--text-subtle);
}
.pat-jr__nowlabel {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--k);
  font-weight: 600;
}

/* Raster und Zahlen: nebeneinander, wenn Platz ist, sonst untereinander. */
.pat-jr__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  margin-top: 6px;
}

.pat-jr__map {
  --cs: 22px;
  --cg: 3px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(var(--w) * (var(--cs) + var(--cg)));
  display: grid;
  gap: 5px;
}

/* Jede Woche eine Spalte; die Spalten schrumpfen mit der Karte, die
   Zellen bleiben quadratisch. */
.pat-jr__months,
.pat-jr__cells {
  display: grid;
  grid-template-columns: repeat(var(--w), minmax(0, 1fr));
  column-gap: var(--cg);
}
.pat-jr__cells { grid-auto-flow: column; grid-template-rows: repeat(7, auto); row-gap: var(--cg); }

.pat-jr__months span {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  line-height: 1;
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: visible;
}

.pat-jr__cells .py-cell {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  cursor: default;
}
.pat-jr__cells .py-cell[data-l="4"] { box-shadow: none; }
/* Ein freier Tag eines Trackers mit festen Wochentagen: kein Rahmen,
   nur ein Hauch – er ist weder offen noch versäumt. */
.pat-jr__cells .py-cell.is-off {
  background: linear-gradient(var(--py-future-line), var(--py-future-line)) center / 4px 4px no-repeat;
  box-shadow: none;
}
.pat-jr__cells .py-cell.is-today {
  outline: 2px solid var(--text-strong);
  outline-offset: 1px;
  position: relative;
  z-index: 1;
}

.pat-jr__nums {
  flex: none;
  display: flex;
  gap: 18px;
  padding-bottom: 2px;
}
.pat-jr__num { display: grid; gap: 2px; }
.pat-jr__num b {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--k);
}
.pat-jr__num em { font-style: normal; font-size: 13px; margin-inline-start: 1px; }
.pat-jr__num + .pat-jr__num b { color: var(--text-strong); }
.pat-jr__num small {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Vorbei: die Schiene ist voll, das Sechseck steht nicht mehr darauf. */
.pat-jr.is-done .pat-jr__day b { color: var(--k); }
.pat-jr.is-ahead .pat-jr__day b { color: var(--text-strong); }

@keyframes pat-jr-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pat-jr-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .pat-jr__fill, .pat-jr__now { animation: none; }
}
html[data-motion="reduce"] .pat-jr__fill,
html[data-motion="reduce"] .pat-jr__now { animation: none; }

html[data-eink] .pat-jr__fill { background: #1c1c1c; animation: none; }
html[data-eink] .pat-jr__now { animation: none; }
html[data-eink] .pat-jr__now::after { background: #1c1c1c; }
html[data-eink] .pat-jr__rail { box-shadow: inset 0 0 0 1px #1c1c1c; }

.pat-empty { --cut: 14px; padding: 16px; display: grid; gap: 12px; }
.pat-empty p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); max-width: 62ch; }
.pat-empty p b { color: var(--text-strong); }
.pat-empty__ideas { display: flex; flex-wrap: wrap; gap: 8px; }

.pat-archived { --fold-accent: var(--c-calendar); }   /* Kopf: .la-fold (components.css) */
.pat-archived ul { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.pat-archived li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pat-archived li span { flex: 1; min-width: 0; }

/* ---------- Höhepunkte und Serien --------------------------------------------------------------- */

.pat-moments { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.pat-moment {
  --cut: 10px;
  width: 100%;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-align: start;
  color: var(--text);
  clip-path: var(--cut-clip);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.pat-moment:hover { background: color-mix(in srgb, var(--k) 8%, var(--surface)); }
.pat-moment:focus-visible { outline: 2px solid var(--k); outline-offset: -2px; }
.pat-moment i { width: 12px; height: 11px; background: var(--k); clip-path: var(--hex-clip); }
.pat-moment span { display: grid; gap: 1px; min-width: 0; }
.pat-moment b { font-size: 13.5px; font-weight: 600; }
.pat-moment small { font-size: max(var(--fs-floor), 11.5px); color: var(--text-muted); overflow-wrap: anywhere; }
.pat-moment strong { font-family: var(--font-mono); font-size: 15px; color: var(--k); white-space: nowrap; }

.pat-streaks { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pat-streak {
  --cut: 8px;
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
}
.pat-streak b { font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--k); line-height: 1.1; }
.pat-streak span { font-size: max(var(--fs-floor), 11px); color: var(--text-muted); overflow-wrap: anywhere; }
.pat-streak.is-live { box-shadow: inset 0 2px 0 var(--k); }

/* ---------- Jahresbericht ------------------------------------------------------------------------ */

.pat-report { --cut: 16px; padding: 16px; display: grid; gap: 12px; align-items: center; }
.pat-report::before { background: color-mix(in srgb, var(--c-calendar) 55%, var(--line-strong)); }
.pat-report .pat-head__title { margin-bottom: 4px; }
.pat-report__btn { justify-self: start; }
@media (min-width: 720px) { .pat-report { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- Tooltip (nur Zeiger) ------------------------------------------------------------------ */

.pat-tip {
  --cut: 8px;
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  z-index: 90;
  display: grid;
  gap: 2px;
  max-width: 260px;
  padding: 9px 12px;
  pointer-events: none;
  opacity: 0;
  clip-path: var(--cut-clip);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 2px 0 var(--k);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.pat-tip.is-on { opacity: 1; }
.pat-tip b { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11.5px); font-weight: 600; color: var(--text-strong); }
.pat-tip span { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); color: var(--text-muted); }

.pat-pairlist { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- Einchecken (app/calendar/tracker-input.js) ---------------------------------------------- */

.ti-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.ti-item { --cut: 10px; display: grid; gap: 10px; padding: 11px 12px 12px; }
.ti-item::before { background: color-mix(in srgb, var(--tk) 30%, var(--line-strong)); }
.ti-item.is-done::before { background: color-mix(in srgb, var(--tk) 70%, var(--line-strong)); }

.ti-item__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ti-item__text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ti-item__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ti-item__meta { font-size: max(var(--fs-floor), 11.5px); color: var(--text-muted); overflow-wrap: anywhere; }

.ti-item__state {
  flex: none;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ti-item.is-done .ti-item__state { color: var(--on-accent); background: var(--tk); box-shadow: none; }
.ti-item.is-open .ti-item__state { color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--tk); }
.ti-item.is-missed .ti-item__state { color: var(--c-fitness-stroke); box-shadow: inset 0 0 0 1px var(--c-fitness-stroke); }

.ti-clear { flex: none; padding: 4px 2px; font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); text-decoration: underline; text-underline-offset: 3px; }
.ti-clear:hover { color: var(--text); }

.ti-row { display: flex; gap: 8px; }
.ti-row--wrap { flex-wrap: wrap; }
.ti-row .ti-btn { flex: 1 1 auto; }

.ti-btn { --btn-face-hover: color-mix(in srgb, var(--tk, var(--c-calendar)) 14%, transparent); min-height: 38px; }
.ti-btn.is-on {
  --btn-face: color-mix(in srgb, var(--tk, var(--c-calendar)) 26%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--tk, var(--c-calendar)) 32%, transparent);
  --btn-edge: var(--tk, var(--c-calendar));
  color: var(--text-strong);
  font-weight: 600;
}

.ti-scale { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.ti-scale .ti-btn { flex-direction: column; gap: 1px; padding: 6px 3px; min-height: 48px; }
.ti-scale .ti-btn b { font-family: var(--font-mono); font-size: 14px; }
.ti-scale .ti-btn small { font-size: max(var(--fs-floor), 10px); line-height: 1.15; color: var(--text-muted); text-align: center; overflow-wrap: anywhere; }
.ti-scale .ti-btn.is-on small { color: var(--text); }

.ti-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ti-step--line { flex-wrap: nowrap; }
.ti-step .ti-btn { min-width: 42px; }
.ti-num { width: 76px; text-align: center; font-family: var(--font-mono); }
.ti-num--wide { width: 120px; }
.ti-time { width: 128px; font-family: var(--font-mono); }
.ti-line { flex: 1; min-width: 0; }
.ti-unit { font-size: 12.5px; color: var(--text-muted); }
.ti-swatch { width: 10px; height: 10px; background: var(--opt, var(--tk)); flex: none; }


.pop--ti .modal-panel, .pop--ti { max-width: min(560px, calc(100vw - 24px)); }

/* ---------- Kalender: Tagesdetail, Raster, Upcoming ------------------------------------------- */

.cal-ti .cal-sec__body { display: grid; gap: 12px; }
.cal-ti__foot { display: flex; justify-content: flex-end; }
.cal-ti__link { font-size: 12.5px; color: var(--c-calendar); text-decoration: none; }
.cal-ti__link:hover { text-decoration: underline; }

.cal-cell__marks {
  position: absolute;
  inset-inline-start: 5px;
  inset-inline-end: 5px;
  bottom: 9px;
  display: flex;
  gap: 2px;
  pointer-events: none;
}
.cal-cell__marks i { flex: 1; height: 3px; background: var(--m); }
.cal-cell__marks i.is-miss { background: none; box-shadow: inset 0 0 0 1px var(--m); opacity: .8; }

.cal-cell.is-painted { background: var(--paint) !important; }
.cal-cell.is-painted .cal-cell__n { color: var(--text-strong); text-shadow: 0 1px 2px rgba(var(--o-deep), .7); }
.cal-cell.is-paint-miss { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paint-k) 70%, transparent) !important; }

.cal-paint {
  --cut: 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 8px 10px 8px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--k) 12%, var(--surface));
}
.cal-paint__dot { width: 9px; height: 9px; background: var(--k); flex: none; }
.cal-paint__text { flex: 1 1 140px; min-width: 0; }
.cal-paint__text b { color: var(--text-strong); font-weight: 600; }
.cal-paint__key { display: inline-flex; gap: 2px; }
.cal-paint__key i { width: 10px; height: 10px; }
.cal-paint__x { padding: 2px 6px; font-size: 18px; line-height: 1; color: var(--text-muted); }
.cal-paint__x:hover { color: var(--text-strong); }

.cal-head:not(.cal-head--plain):not(.cal-head--inline) { grid-template-columns: 34px 1fr 34px auto auto; }
.cal-paint-btn { gap: 6px; padding: 7px 10px; }
.cal-paint-btn__icon {
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, var(--c-calendar) 0 50%, var(--tr-iris) 50% 100%);
}
.cal-paint-btn.is-on { --btn-edge: var(--c-calendar); --btn-face: rgba(var(--t-calendar), .18); }
@media (max-width: 479px) {
  .cal-paint-btn { width: 36px; min-height: 34px; padding: 0; }
  .cal-paint-btn__text { display: none; }
}

.cal-targets { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cal-target { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "g t b" "g bar bar"; align-items: center; gap: 6px 10px; }
.cal-target .trk-glyph { grid-area: g; }
.cal-target__text { grid-area: t; display: grid; gap: 1px; min-width: 0; }
.cal-target__text b { font-size: 13.5px; }
.cal-target__text small { font-size: max(var(--fs-floor), 11.5px); color: var(--text-muted); }
.cal-target .cal-act { grid-area: b; }
.cal-target__bar { grid-area: bar; height: 4px; background: var(--py-cell); position: relative; }
.cal-target__bar i { position: absolute; inset: 0 auto 0 0; background: var(--tk); }

.cal-sum__grid--sheet { padding: 6px 0; }

.nt-toast.cal { --accent-app: var(--c-calendar); }

/* ---------- Tracker bauen (app/calendar/tracker-screen.js) ----------------------------------------- */

#cal-tb { max-width: var(--board); }

.tb { gap: 22px; }

.tb-mark {
  width: 34px;
  height: 34px;
  flex: none;
  background: var(--tk);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.tb-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.tb-steps__item {
  --cut: 8px;
  display: grid;
  gap: 2px;
  padding: 8px 9px 7px;
  text-align: start;
  color: var(--text-muted);
  clip-path: var(--cut-clip);
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--line-strong);
}
.tb-steps__item.is-past { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tk) 55%, transparent); }
.tb-steps__item.is-on { color: var(--text-strong); background: color-mix(in srgb, var(--tk) 14%, var(--surface)); box-shadow: inset 0 -2px 0 var(--tk); }
.tb-steps__item:focus-visible { outline: 2px solid var(--tk); outline-offset: -2px; }
.tb-steps__n { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); font-weight: 600; }
.tb-steps__label { font-size: max(var(--fs-floor), 11.5px); line-height: 1.25; overflow-wrap: anywhere; }
@media (max-width: 420px) { .tb-steps__label { font-size: max(var(--fs-floor), 10.5px); } }

.tb-sec { display: grid; gap: 16px; }
.tb-sec__title { margin: 0; font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tb-sec__hint { margin: -8px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.tb-ideas { display: grid; gap: 8px; }
.tb-ideas__head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.tb-ideas__head i { width: 9px; height: 9px; background: var(--tk); }
.tb-ideas__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }

.tb-idea {
  --cut: 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  padding: 9px 10px;
  text-align: start;
  color: var(--text);
  clip-path: var(--cut-clip);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tb-idea .trk-glyph { grid-row: span 2; width: 20px; height: 20px; background: var(--tk); }
.tb-idea__name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tb-idea__type { font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); }
.tb-idea:hover { background: color-mix(in srgb, var(--tk) 12%, var(--surface)); }
.tb-idea:focus-visible { outline: 2px solid var(--tk); outline-offset: -2px; }

.tb-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .tb-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tb-type {
  --cut: 10px;
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 11px 12px;
  text-align: start;
  color: var(--text);
  clip-path: var(--cut-clip);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tb-type b { font-size: 13.5px; }
.tb-type span { font-size: max(var(--fs-floor), 11.5px); color: var(--text-muted); line-height: 1.35; }
.tb-type small { font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); line-height: 1.35; }
.tb-type:hover { background: color-mix(in srgb, var(--tk) 10%, var(--surface)); }
.tb-type.is-on { background: color-mix(in srgb, var(--tk) 18%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--tk); }
.tb-type[disabled] { opacity: .4; cursor: not-allowed; }
.tb-type:focus-visible { outline: 2px solid var(--tk); outline-offset: -2px; }

/* Acht Töne und das Rad in EINER Reihe, auch auf 390 px: die Felder
   schrumpfen bis knapp 30 px, statt das Rad allein in eine zweite Zeile
   zu schieben. */
.tb-swatches { display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 34px)); gap: 7px; }
.tb-swatch {
  width: 100%;
  aspect-ratio: 1;
  background: var(--tk);
  box-shadow: 3px 3px 0 var(--py-plinth);
  transition: transform var(--dur-fast) var(--ease-out);
}
.tb-swatch:active { transform: translate(3px, 3px); box-shadow: none; }
.tb-swatch.is-on { outline: 2px solid var(--text-strong); outline-offset: 3px; }
.tb-swatch:focus-visible { outline: 2px solid var(--c-calendar); outline-offset: 3px; }
.tb-swatch--sm { width: 26px; height: 26px; aspect-ratio: auto; flex: none; }

.tb-glyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.tb-glyph {
  display: grid;
  place-items: center;
  height: 44px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 3px 3px 0 var(--py-plinth);
  transition: transform var(--dur-fast) var(--ease-out);
}
.tb-glyph .trk-glyph { background: var(--text-muted); }
.tb-glyph.is-on { background: color-mix(in srgb, var(--tk) 18%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--tk), 3px 3px 0 var(--py-plinth); }
.tb-glyph.is-on .trk-glyph { background: var(--tk); }
.tb-glyph:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 1px var(--line); }
.tb-glyph:focus-visible { outline: 2px solid var(--c-calendar); outline-offset: 2px; }

.tb-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-chip { --btn-face-hover: color-mix(in srgb, var(--tk) 14%, transparent); min-height: 36px; }
.tb-chip.is-on {
  --btn-face: color-mix(in srgb, var(--tk) 24%, transparent);
  --btn-edge: var(--tk);
  color: var(--text-strong);
  font-weight: 600;
}

.tb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }

.tb-levels { display: grid; gap: 6px; }
.tb-level { display: grid; grid-template-columns: minmax(24px, auto) minmax(0, 1fr) 26px 32px; gap: 10px; align-items: center; }
.tb-level b { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: end; }

/* Unter den Stufen: anhängen links, die Anfangszahl rechts. */
.tb-levels__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 4px; }
.tb-levels__first { display: inline-flex; align-items: center; gap: 10px; }
.tb-levels__first .ti-step { gap: 6px; }
.tb-levels__first .tb-count { min-width: 28px; font-size: 15px; }

.tb-options { display: grid; gap: 8px; justify-items: start; }
.tb-option { display: grid; grid-template-columns: auto minmax(0, 1fr) 32px; gap: 10px; align-items: center; width: 100%; }

/* Entfernen: ein Knopf wie jeder andere – eckig, mit Sockel –, nur
   leise. Rot wird er erst unter dem Zeiger. */
.tb-x { width: 32px; height: 32px; padding: 0; font-size: 21px; line-height: 1; color: var(--text-muted); }
.tb-x:hover { color: var(--c-fitness-stroke); }
.tb-x[disabled] { opacity: .35; cursor: not-allowed; }

/* ---------- Leer anfangen ----------------------------------------------------- */

/* Der größte Knopf des ersten Schritts. Stufe 2 (tinted), nicht 1: die
   eine volle Akzentfläche des Formulars bleibt „Save" im Streifen. */
.tb-empty {
  width: 100%;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 16px;
  text-align: start;
  --tone: var(--tk);
  color: var(--text-strong);
}
.tb-empty__plus {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--on-accent);
  background: var(--tk);
}
.tb-empty__text { display: grid; gap: 2px; min-width: 0; }
.tb-empty__text b { font-size: 15px; font-weight: 600; }
.tb-empty__text small { font-size: 12px; font-weight: 400; color: var(--text-muted); }

/* ---------- Farbfelder: Rad, Abstufung, Fenster -------------------------------- */

/* Das Rad-Feld zeigt, was dahinter liegt: alle Töne im Kreis, in der
   Mitte die Fläche – ein Rad im Quadrat (wie in den Notizen). */
.tb-swatch--wheel {
  background:
    radial-gradient(closest-side, var(--surface-2) 0 28%, transparent 72%),
    conic-gradient(from 90deg, var(--tr-coral), var(--tr-amber), var(--tr-lime), var(--tr-teal),
                   var(--tr-sky), var(--tr-iris), var(--tr-orchid), var(--tr-coral));
}
/* Eine eigene Farbe trägt das Feld selbst, mit einem Keil Rad in der Ecke. */
.tb-swatch--wheel.is-custom {
  background:
    conic-gradient(from 90deg at 84% 84%, var(--tr-coral), var(--tr-amber), var(--tr-teal), var(--tr-sky), var(--tr-orchid), var(--tr-coral))
      100% 100% / 32% 32% no-repeat,
    var(--tk);
}

/* „Abgestuft": die Fläche der Stufe mit einer feinen Diagonale – sie
   folgt der Trackerfarbe und ist keine feste Wahl. */
.tb-swatch--auto,
.tb-swatch.is-shade {
  background:
    linear-gradient(135deg, transparent 46%, rgba(var(--o), .55) 46% 54%, transparent 54%),
    var(--tk);
}

.tb-tonepop { display: grid; gap: 14px; }
.tb-tonepop .tb-swatches { gap: 8px; }
.tb-tonepop .pop__text { margin: 0; font-size: 12.5px; color: var(--text-muted); }

html[data-eink] .tb-swatch--wheel { background: repeating-linear-gradient(45deg, #000000 0 2px, #ffffff 2px 5px); box-shadow: inset 0 0 0 1.5px #000000, 3px 3px 0 #000000; }
html[data-eink] .tb-swatch--wheel.is-custom { background: var(--tk); }
html[data-eink] .tb-empty__plus { color: #ffffff; background: #000000; }

.tb-preview { --cut: 12px; padding: 14px; clip-path: var(--cut-clip); background: var(--surface); }
.tb-strip {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 14px);
  grid-auto-columns: 14px;
  gap: 3px;
  justify-content: start;
}
.tb-strip .py-cell { width: 14px; height: 14px; cursor: default; }

.tb-count { min-width: 34px; text-align: center; font-family: var(--font-mono); font-size: 18px; font-weight: 600; }

.tb-remind { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tb-remind .cal-input { width: 130px; }

/* Schalter: Bahn und Knopf eckig, beide mit Sockel – kein Kreis. */
.tb-switch { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13.5px; color: var(--text); }
.tb-switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  flex: none;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line-strong), 2px 2px 0 var(--py-plinth);
}
.tb-switch__knob {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  width: 14px;
  height: 14px;
  background: var(--text-subtle);
  box-shadow: 1.5px 1.5px 0 var(--py-plinth);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tb-switch[aria-checked="true"] .tb-switch__track { background: color-mix(in srgb, var(--tk, var(--c-calendar)) 30%, var(--surface-3)); }
.tb-switch[aria-checked="true"] .tb-switch__knob { transform: translateX(18px); background: var(--tk, var(--c-calendar)); }
.tb-switch:focus-visible { outline: 2px solid var(--c-calendar); outline-offset: 3px; }

.tb-nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }

.cal-input.is-invalid { box-shadow: inset 0 0 0 1.5px var(--c-fitness-stroke); }

/* ---------- Jahresbericht: das Fenster -------------------------------------------------------- */

.pop--poster { width: min(1080px, calc(100vw - 24px)); max-width: none; }
.pp { display: grid; gap: 18px; }
@media (min-width: 860px) { .pp { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }

.pp-stage { display: grid; justify-items: center; }
.pp-frame {
  width: 100%;
  max-height: 62vh;
  max-width: calc(62vh * 1080 / 1350);
  box-shadow: 6px 7px 0 var(--py-plinth);
  background: var(--bg);
}
.pp-stage--story .pp-frame { max-width: calc(62vh * 1080 / 1920); }
.pp-stage--landscape .pp-frame { max-width: 100%; max-height: none; }
.pp-frame img { width: 100%; height: 100%; display: block; }

.pp-ctl { display: grid; gap: 16px; align-content: start; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pp-note { font-size: 12px; }
.pp .cal-form__bar { justify-content: flex-start; }

/* ---------- Bewegung und Papier ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .py-cell, .pat-card, .py-ring line, .tb-switch__knob { transition: none; }
}
html[data-reduced-motion] .py-cell,
html[data-reduced-motion] .pat-card { transition: none; }

html[data-eink] .py-cell[data-l="4"] { box-shadow: none; }
html[data-eink] .pat-tip { box-shadow: inset 0 0 0 1.5px #000; }
html[data-eink] .py-cell,
html[data-eink] .pat-card,
html[data-eink] .py-ring line,
html[data-eink] .tb-switch__knob { transition: none; }
html[data-eink] .pat-year::before, html[data-eink] .pat-fig::before, html[data-eink] .pat-card::before,
html[data-eink] .pat-trk::before, html[data-eink] .pat-readout::before, html[data-eink] .pat-body::before,
html[data-eink] .pat-rhythm__body::before, html[data-eink] .ti-item::before, html[data-eink] .pat-empty::before,
html[data-eink] .pat-report::before { background: #1c1c1c; }

/* ---------- Die Leiste auf dem Telefon ------------------------------------------------------- */

.pat-rail--compact { display: grid; gap: 10px; }
.pat-rail__quick { display: flex; flex-wrap: wrap; gap: 7px; }

.pat-picker {
  --btn-face: color-mix(in srgb, var(--k) 16%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--k) 24%, transparent);
  --btn-edge: var(--k);
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 14px;
}
.pat-picker i { width: 10px; height: 10px; background: var(--k); flex: none; }
.pat-picker__group {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pat-picker__label { font-weight: 600; color: var(--text-strong); min-width: 0; overflow-wrap: anywhere; text-align: start; }
.pat-picker__caret {
  margin-inline-start: auto;
  width: 9px;
  height: 9px;
  border-inline-end: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-2px) rotate(45deg);
  flex: none;
}

/* Auf dem Telefon zählt jeder Pixel für die Quadrate. */
@media (max-width: 719px) {
  .pat-year { padding: 14px 11px 16px; }
}
.py-key { gap: 6px 12px; }
.py-key__item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.py-key__item .py-cell + .py-cell { margin-inline-start: 0; }
/* Eine Option eines Choice-Trackers trägt ihre eigene Farbe. */
.ti-btn[style*="--opt"] { --btn-face-hover: color-mix(in srgb, var(--opt) 14%, transparent); }
.ti-btn[style*="--opt"].is-on {
  --btn-face: color-mix(in srgb, var(--opt) 28%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--opt) 34%, transparent);
  --btn-edge: var(--opt);
}
/* Auf den hellen Stufen trägt die Zahl Tinte statt Weiß – AA auf jeder Linsenfarbe. */
.cal-cell.is-painted[data-paint-l="3"] .cal-cell__n,
.cal-cell.is-painted[data-paint-l="4"] .cal-cell__n { color: var(--on-accent); text-shadow: none; font-weight: 700; }