/* ===== Spánek 2.0 – mřížka widgetů, hero skóre, rozepsaná noc, přepínač grafu =====
 * Vše přes stávající tokeny (--sp-*, --r-*, --fs-*, povrchy, --accent-ink),
 * ať to sedí se zbytkem appky v dark i light. Staré .orb-* a .spanek-orb-karta
 * v screens.css zůstávají – používají je detail noci, pravidelnost i trend.
 */

/* ---------- Mřížka přizpůsobitelných widgetů ---------- */
/* Nahrazuje dřívější pevné rozdělení .sp-levy / .sp-pravy: pořadí i velikost
 * si teď určuje uživatel, takže sloupce nemůžou být natvrdo. */
.sp-mriz { display: flex; flex-direction: column; gap: 12px; }

/* Karty mají vlastní spodní margin; v mřížce rozestup řeší gap, jinak by byl dvojitý. */
.sp-mriz .card,
.sp-mriz .graf-box { margin-bottom: 0; }
.sp-mriz .sp-sekce-nadpis { margin: 0 0 12px; }
.sp-mriz .sp-hint { line-height: 1.45; }

/* Skrytý widget je vidět jen v režimu úprav – ztlumený. */
.sp-mriz > .skryta,
.sp-bunka.skryta { opacity: .45; }

@media (min-width: 820px) {
  /* Na PC dva sloupce, „velký" widget (grafy, konzistence, zápis) zabere oba.
   * Původní sticky levý sloupec tím padá – pral by se s přesouváním widgetů. */
  .sp-mriz { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .sp-mriz > .sp-w-velka { grid-column: 1 / -1; }
  /* hero přes celou šířku unese metriky do jedné řady (v úpravách je třída na obalu) */
  .sp-w-velka .sp-hero-mriz.ctyri { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Režim úprav (obal widgetu + tažení) ---------- */
.sp-bunka { display: flex; flex-direction: column; gap: 8px; }

/* V úpravách se s obsahem widgetu nedá interagovat (formulář, přepínače grafu,
 * klik na kartu skóre) – ovládací lišta nad ním samozřejmě ano. */
.sp-mriz.edit .sp-bunka > *:not(.dash-edit-bar) { pointer-events: none; }
.sp-mriz.edit .sp-bunka .card { background: var(--surface-card); border-color: var(--border-hairline); }
.sp-mriz.edit .sp-bunka .sp-hero { background: var(--card-raised); }

/* Povinný widget (Zapsat noc) skrýt nejde – ať je to na přepínači vidět. */
.sp-bunka .dash-edit-toggle:disabled { opacity: .45; cursor: default; }

/* Originál pod plovoucím klonem + samotný klon během tažení. */
.sp-bunka.tahne-se { opacity: .35; }
.sp-klon { border-radius: var(--r-lg); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }

/* ---------- Widget „Skóre poslední noci" (hero) ---------- */
.sp-hero { display: block; background: var(--card-raised); border-radius: var(--r-xl); }
/* karta je klikací (detail noci), ale hover ji nesmí rozsvítit jinak než ostatní feature plochy */
.sp-hero.tlac:hover { background: var(--card-raised); border-color: var(--border-strong); }

.sp-hero-hlava { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.sp-hero-texty { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-hero-titulek {
  font-size: var(--fs-micro); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.sp-hero-datum {
  font-family: var(--font-nadpis); font-size: var(--fs-h3);
  font-weight: 600; letter-spacing: -0.01em;
}
/* Trend proti průměru – monochrom (lepší = inkoust, horší = tlumené), žádné duhy. */
.sp-hero-delta {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font-size: var(--fs-caption); font-variant-numeric: tabular-nums;
  background: var(--surface-control); border-radius: var(--r-pill); padding: 4px 10px;
  color: var(--muted);
}
.sp-hero-delta.up { color: var(--accent-ink); }

.sp-hero-ring {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-3);
}
.sp-hero .orb-cislo {
  font-family: var(--font-nadpis); font-size: 42px;
  font-weight: 600; letter-spacing: -0.03em;
}
.sp-hero-znamka {
  font-family: var(--font-nadpis); font-size: var(--fs-h2);
  font-weight: 600; letter-spacing: -0.02em;
}

/* Plnění cíle délky – tenký pruh, hned je vidět, jestli se dospalo. */
.sp-hero-cil-pruh {
  height: 6px; border-radius: var(--r-pill);
  background: var(--surface-control); overflow: hidden;
}
.sp-hero-cil-vypln {
  height: 100%; background: var(--accent-ink); border-radius: var(--r-pill);
  transition: width .35s var(--ease-out);
}
.sp-hero-cil-popis { margin-top: 6px; text-align: center; }

/* Metriky noci v mřížce (dřív tři textové řádky vedle kruhu). */
.sp-hero-mriz {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border-hairline);
}
.sp-hero-mriz.ctyri { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-3); }
.sp-hero-metrika { text-align: center; min-width: 0; }
.sp-hero-metrika-ik { display: inline-flex; color: var(--text-tertiary); }
.sp-hero-metrika-hodn {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; margin-top: 2px; overflow-wrap: anywhere;
}
.sp-hero-metrika-popis { font-size: var(--fs-micro); line-height: 1.3; }

/* Rozpad skóre pod hairline (dřív to řešilo pravidlo .spanek-orb-karta .sp-rozpad). */
.sp-hero .sp-rozpad {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border-hairline);
}

/* Prázdný stav – bez kruhu na nule, ta vypadá jako selhání. */
.sp-hero-prazdno {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center; padding: var(--sp-4) 0 var(--sp-1);
}
.sp-hero-prazdno-ik { display: inline-flex; color: var(--text-tertiary); }

/* ---------- Rozepsaná noc (koncept) ---------- */
.sp-jdu-spat { margin-top: 12px; }
.sp-koncept { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.sp-koncept-ik { display: flex; color: var(--accent-ink); }
.sp-koncept-zahod {
  margin-left: auto; background: none; border: none; padding: 6px 4px;
  font: inherit; font-size: var(--fs-caption); color: var(--muted);
  text-decoration: underline; cursor: pointer;
}
.sp-koncept-zahod:hover { color: var(--text); }

/* ---------- Grafy: dvě řady chipů (období + metrika) ---------- */
/* .seg-graf má margin-bottom 12px; horní řada je blíž, ať to drží pohromadě. */
.seg-graf-obdobi { margin-bottom: 8px; }
.sp-graf-popis { margin-top: 8px; text-align: center; }

/* Historie jako widget – tlačítko nemá vlastní odsazení, rozestup řeší mřížka. */
.sp-historie-btn { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .sp-hero-cil-vypln { transition: none; }
}