/* =========================================================
   Life Archive – der Baukasten der Stats-Reiter (app/stats.js)

   Was Calendar › Stats schon zeichnet (Jahr, Legenden, Moments,
   Tooltip, Flächen mit Schnitt und Sockel), kommt aus
   styles/patterns.css. Hier steht nur, was die Bereiche dazu
   brauchen: Zeitraum, Kacheln, Band, Insights, Diagrammtext.

   --k ist die Farbe des Bereichs und wird am Träger .st gesetzt.
   Nichts ist rund; Kreise gibt es nur als Daten (Donut, Uhr).
   ========================================================= */

.st { --k: var(--c-calendar); display: grid; gap: 26px; min-width: 0; padding-bottom: 24px; }

/* ---------- Zeitraum ------------------------------------------------------- */

.st-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.st-period {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(58px, 1fr);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  filter: drop-shadow(3px 4px 0 var(--py-plinth));
}

.st-period__btn {
  min-height: 36px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.st-period__btn + .st-period__btn { border-inline-start: 1px solid var(--line); }
.st-period__btn:hover { color: var(--text-strong); background: color-mix(in srgb, var(--k) 10%, transparent); }
.st-period__btn.is-on { color: var(--on-accent, var(--ink)); background: var(--k); }
.st-period__btn:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; position: relative; z-index: 1; }

.st-range { font-size: 12px; color: var(--text-subtle); }

/* ---------- Kacheln ---------------------------------------------------------- */

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

.st-tile {
  --cut: 12px;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 13px 14px 12px;
  color: inherit;
  text-decoration: none;
  filter: drop-shadow(4px 5px 0 var(--py-plinth));
}

.st-tile::before, .st-tile::after { content: ""; position: absolute; z-index: -2; clip-path: var(--cut-clip); }
.st-tile::before { inset: 0; background: var(--line-strong); }
.st-tile::after { inset: 1px; z-index: -1; background: linear-gradient(160deg, color-mix(in srgb, var(--k) 9%, var(--surface)), var(--surface) 70%); }
a.st-tile:hover::before { background: var(--k); }
a.st-tile:focus-visible { outline: 2px solid var(--k); outline-offset: 3px; }

.st-tile__value {
  font-family: var(--font-mono);
  font-size: clamp(20px, 5.4vw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.st-tile__label { font-size: 12px; color: var(--text-muted); }

.st-tile__delta { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); font-weight: 600; }
.st-tile__delta.is-good { color: var(--state-good); }
.st-tile__delta.is-bad  { color: var(--state-bad); }
.st-tile__delta.is-flat { color: var(--text-subtle); }

/* ---------- Abschnitte ------------------------------------------------------------ */

.st-flow { display: grid; gap: 26px; min-width: 0; }
@media (min-width: 720px) {
  .st-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; align-items: start; }
}

.st-panel { padding: 14px 14px 12px; justify-items: stretch; gap: 10px; }
.st-panel svg { max-width: none; }

.st-cap {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.st-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.st-note b { color: var(--text-strong); font-weight: 600; }

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

.st-year .pat-head { border-bottom: 0; padding-bottom: 0; }
.st-year__nav { display: inline-flex; align-items: center; gap: 8px; }
.st-year__num { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text-strong); min-width: 4ch; text-align: center; }
.st-year__lenses { display: flex; flex-wrap: wrap; gap: 8px 7px; align-items: center; }
/* Auswahlfeld für die lange Reihe (Muskelgruppen) – eckig, mit Sockel
   wie die Chips daneben. 16 px Schrift, sonst zoomt iOS beim Antippen. */
.st-more { position: relative; display: inline-block; filter: drop-shadow(3px 3px 0 var(--py-plinth)); }
.st-more select {
  min-height: 34px;
  padding: 4px 30px 4px 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
}
.st-more select:hover { border-color: var(--k); }
.st-more select:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }
.st-more select option { background: var(--surface); color: var(--text); }
.st-more::after {
  content: "";
  position: absolute;
  inset-inline-end: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-inline-end: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

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

.st-readout { margin: 0; min-height: 1.5em; font-size: 12.5px; color: var(--text-muted); }
.st-readout b { color: var(--text-strong); font-weight: 600; }

/* ---------- Diagrammtext ------------------------------------------------------------ */

.st-chart { display: block; width: 100%; height: auto; overflow: visible; }
.st-grid { stroke: var(--line); stroke-dasharray: 2 3; }
.st-axis { font-family: var(--font-mono); font-size: max(var(--fs-floor), 8.5px); fill: var(--text-subtle); }
.st-label { font-family: var(--font-mono); font-size: max(var(--fs-floor), 8.5px); letter-spacing: .04em; fill: var(--text-muted); }
.st-big { font-family: var(--font-mono); font-size: 15px; font-weight: 600; fill: var(--text-strong); text-anchor: middle; }
.st-small { font-family: var(--font-mono); font-size: max(var(--fs-floor), 6.5px); letter-spacing: .08em; fill: var(--text-subtle); text-anchor: middle; }
.st-hit { fill: transparent; }
.st-hit:hover { fill: color-mix(in srgb, var(--k) 10%, transparent); }

.st-donut { display: grid; gap: 12px; align-items: center; justify-items: center; }
.st-donut svg { width: 100%; max-width: 210px; height: auto; overflow: visible; }
@media (min-width: 420px) {
  .st-donut { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); justify-items: stretch; }
}
.st-legend { width: 100%; }

.st-hexrow { max-width: 520px; }

.st-radar { display: grid; gap: 12px; justify-items: center; }
.st-radar svg { max-width: 300px; }

.st-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; width: 100%; margin: 0; }
.st-facts div { display: grid; gap: 2px; padding: 8px 10px; border-inline-start: 2px solid var(--k); background: color-mix(in srgb, var(--k) 6%, transparent); }
.st-facts dt { font-family: var(--font-mono); font-size: max(var(--fs-floor), 10px); letter-spacing: .12em; color: var(--text-subtle); }
.st-facts dd { margin: 0; font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--text-strong); }
html[data-eink] .st-facts div { background: #fff; border-inline-start-color: #000; }
.st-heat { width: 100%; height: auto; }

/* ---------- Rangliste --------------------------------------------------------------- */

.st-ranked { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.st-ranked li > * {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 6px 4px;
  color: inherit;
  text-decoration: none;
}
.st-ranked a:hover { background: color-mix(in srgb, var(--k) 8%, transparent); }
.st-ranked__label { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.st-ranked b { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-strong); }
.st-ranked s {
  grid-column: 1 / -1;
  height: 6px;
  background: linear-gradient(90deg, var(--bk) var(--w), var(--py-cell) var(--w));
  text-decoration: none;
}

/* ---------- Band (Wochenvolumen) ------------------------------------------------------- */

.st-band { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }

.st-band__row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
}

.st-band__label { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.st-band__row b { font-family: var(--font-mono); font-size: 12px; text-align: end; color: var(--text-strong); }

.st-band__track {
  position: relative;
  height: 12px;
  background:
    linear-gradient(90deg, transparent var(--lo), color-mix(in srgb, var(--state-good) 22%, transparent) var(--lo),
                    color-mix(in srgb, var(--state-good) 22%, transparent) var(--hi), transparent var(--hi)),
    var(--py-cell);
}

.st-band__track s {
  position: absolute;
  inset: 3px auto 3px 0;
  width: var(--w);
  background: var(--k);
  text-decoration: none;
}

.st-band__row.is-low s  { background: color-mix(in srgb, var(--k) 55%, var(--surface)); }
.st-band__row.is-high s { background: var(--state-warn); }

.st-band__key {
  display: inline-block;
  width: 14px;
  height: 8px;
  margin-inline-end: 6px;
  vertical-align: 1px;
  background: color-mix(in srgb, var(--state-good) 40%, transparent);
}

/* ---------- Insights ------------------------------------------------------------------ */

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

.st-insight > * {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-inline-start: 2px solid var(--ik, var(--k));
  background: color-mix(in srgb, var(--ik, var(--k)) 6%, var(--surface));
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
}

.st-insight a:hover { background: color-mix(in srgb, var(--ik, var(--k)) 12%, var(--surface)); }
.st-insight a:focus-visible { outline: 2px solid var(--ik, var(--k)); outline-offset: 2px; }
.st-insight i { width: 12px; height: 11px; margin-top: 4px; background: var(--ik, var(--k)); clip-path: var(--hex-clip); }
.st-insight b { color: var(--text-strong); font-weight: 600; }
.st-insight.is-cross > * { --ik: var(--c-calendar); }
.st-insight.is-cross span::before {
  content: "Across areas · ";
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-calendar);
}
.st-insight__meta { color: var(--text-subtle); font-size: 12px; }

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

.st-empty { --cut: 16px; display: grid; gap: 10px; justify-items: start; padding: 20px; }
.st-empty b { font-size: 15px; color: var(--text-strong); }

/* ---------- Breite ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .st-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-moments .pat-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

html[data-eink] .st-period,
html[data-eink] .st-tile { filter: none; }
html[data-eink] .st-period__btn.is-on { background: #000; color: #fff; }
html[data-eink] .st-tile::after { background: #fff; }
html[data-eink] .st-tile__delta.is-good,
html[data-eink] .st-tile__delta.is-bad { color: #000; }
html[data-eink] .st-band__track s,
html[data-eink] .st-band__row.is-high s { background: #000; }
html[data-eink] .st-insight > * { background: #fff; border-inline-start-color: #000; }
html[data-eink] .st-insight i { background: #000; }

/* Der Jahresbericht trägt die Farbe des Bereichs, nicht die des Kalenders. */
.st-report::before { background: color-mix(in srgb, var(--k) 55%, var(--line-strong)); }
html[data-eink] .st-report::before { background: #000; }

/* ---------- Zielstreifen (Nutrition › Goals) --------------------------------------------- */

.st-strips { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.st-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: baseline;
}

.st-strip__label { font-size: 13px; color: var(--text); }
.st-strip > b { font-family: var(--font-mono); font-size: 13px; color: var(--text-strong); }
.st-strip small { grid-column: 1 / -1; font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }

/* Ein Kästchen je Tag, so breit, dass der Zeitraum genau in die Zeile passt. */
.st-strip__cells {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 2px;
}
.st-strip__cell { height: 14px; background: var(--py-cell); }
.st-strip__cell.is-ok { background: var(--sk); }
.st-strip__cell.is-part { background: color-mix(in srgb, var(--sk) 30%, var(--py-cell)); }
.st-strip__cell.is-miss { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sk) 60%, transparent); background: transparent; }

.st-strip__bar { grid-column: 1 / -1; height: 8px; background: var(--py-cell); }
.st-strip__bar s { display: block; height: 100%; width: var(--w); background: var(--sk); text-decoration: none; }

.st-link { justify-self: start; color: var(--k); text-decoration-color: color-mix(in srgb, var(--k) 40%, transparent); }

html[data-eink] .st-strip__cell.is-ok,
html[data-eink] .st-strip__bar s { background: #000; }
html[data-eink] .st-strip__cell.is-miss { box-shadow: inset 0 0 0 1px #000; }
html[data-eink] .st-strip__cell.is-part { background: #bbb; }

/* ---------- Tabelle (Cue Diary › What you did) ----------------------------------------- */

.st-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-table th, .st-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: end; }
.st-table thead th {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.st-table tbody th { text-align: start; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.st-table thead th:first-child { text-align: start; }
.st-table td { font-family: var(--font-mono); color: var(--text-strong); white-space: nowrap; }
.st-table tbody tr:last-child > * { border-bottom: 0; }

.st-wave { max-width: 300px; justify-self: center; }

/* ---------- Leseziel (Reader) ------------------------------------------------------------ */

.st-goal { display: flex; align-items: center; gap: 16px; }
.st-goal .rd-goal__body { display: grid; gap: 8px; justify-items: start; }

/* Ein Wort, das etwas tut, mitten im Satz (Meditation › „Change goal"). */
.st-inline {
  padding: 2px 0;
  font: inherit;
  color: var(--k);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--k) 40%, transparent);
}
.st-inline:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }

/* ---------- Details: doppelt tippen (LA.stats.more) ------------------------------------------
   Alles mit data-more hat ein Fenster dahinter. Zwei schnelle Klicks
   markieren sonst Text, und das Telefon zoomt beim Doppeltipp – beides
   gehört hier nicht hin. */

[data-more] {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
[data-more]:focus-visible { outline: 2px solid var(--k, var(--accent-app)); outline-offset: 2px; }

.pat-tip em {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9.5px);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--k);
}

.st-dt-pop { width: min(520px, 100%); }
.st-dt { width: 100%; }
.st-dt .pop__body { gap: 14px; }
.st-dt__sub {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .06em;
  color: var(--text-muted);
}
.st-dt__facts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.st-dt__facts dd { font-size: 15px; }
.st-dt__cap {
  margin: 4px 0 -4px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.st-dt__list { display: grid; gap: 12px; }
.st-dt__day { display: grid; gap: 4px; }
.st-dt__date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .06em;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.st-dt__date span { color: var(--k); font-size: 14px; }
.st-dt__date:hover, .st-dt__date:focus-visible { color: var(--text-strong); }

.st-dt__rows { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.st-dt__row {
  --cut: 7px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  color: inherit;
  text-decoration: none;
  clip-path: var(--cut-clip);
  background: linear-gradient(90deg, var(--rk) 0 2px, color-mix(in srgb, var(--rk) 6%, transparent) 2px);
  transition: background-color var(--dur) var(--ease-out);
}
a.st-dt__row:hover, a.st-dt__row:focus-visible {
  background: linear-gradient(90deg, var(--rk) 0 2px, color-mix(in srgb, var(--rk) 13%, transparent) 2px);
}
.st-dt__time { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.st-dt__body { display: grid; gap: 2px; min-width: 0; }
.st-dt__title { font-size: 14px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dt__meta { font-size: max(var(--fs-floor), 11.5px); line-height: 1.45; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dt--wrap .st-dt__meta { white-space: normal; overflow-wrap: anywhere; }
.st-dt__rest { margin: 0; font-size: 12px; color: var(--text-muted); text-align: center; }
.st-dt__open { justify-self: center; }

html[data-eink] .pat-tip em { color: #000; }
html[data-eink] .st-dt__row { background: linear-gradient(90deg, #000 0 2px, #fff 2px); }
html[data-eink] a.st-dt__row:hover { background: linear-gradient(90deg, #000 0 4px, #fff 4px); }
html[data-eink] .st-dt__date span { color: #000; }