/* ==========================================================================
   Novinky (dev.html): seznam patchů
   ==========================================================================
   Stránka sází text jako herní patch notes: nahoře číslo patche a datum,
   pod ním sekce Nové / Změny / Opravy a v nich jednotlivé změny. Změna má
   název, jednořádkové shrnutí, případně řádky „před ⇒ po“ a poznámku.

   Sazba stojí na týchž tokenech jako css/prose.css, jenom se jinak skládá:
   nadpisy patchů jdou vlevo, ne na osu sloupce, protože se v nich hledá
   datum očima při scrollování a středová osa to zdržuje. */

/* ------------------------------------------------------------ patch */
/* Číslo patche je nadpis dne. Datum pod ním drží labelovou sazbu, kterou
   má .prose h2 na ostatních stránkách, ať se stránky nerozejdou. */
.prose h2.patch {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.15;
  text-transform: none;
  text-align: left;
  color: var(--text);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  padding-bottom: calc(10px * var(--ui));
  border-bottom: var(--hairline) solid var(--border-strong);
}

.patch-date {
  display: block;
  font-family: var(--label-font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: calc(6px * var(--ui));
}

/* Shrnutí patche, jeden řádek nad sekcemi. Plná barva, ať se odliší od
   textu změn pod sebou. */
.prose p.patch-lead {
  color: var(--text);
  margin-bottom: var(--sp-4);
}

/* ----------------------------------------------------------- sekce */
/* Nové / Změny / Opravy. Popisek vlevo, zbytek řádku dotáhne linka,
   aby byl začátek sekce vidět i při rychlém scrollování. */
.prose h3.sec {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui));
  font-family: var(--label-font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.prose h3.sec::after {
  content: '';
  flex: 1;
  height: var(--hairline);
  background-color: var(--border);
}

/* ----------------------------------------------------------- změny */
/* Odrážka by tady kradla místo názvu změny, který ji zastane sám. */
.prose ul.chgs {
  list-style: none;
  margin-left: 0;
  gap: var(--sp-4);
}

.chg {
  display: grid;
  gap: calc(4px * var(--ui));
}

.chg-t {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  font-weight: var(--display-weight-sm);
  line-height: 1.3;
  color: var(--text);
}

/* Jednořádkové shrnutí: co se změnilo, bez důvodu. Důvod patří do .chg-n. */
.chg-s {
  color: var(--text);
}

/* Řádek „před ⇒ po“. Mono a tabulkové číslice, stejně jako metadata
   v bodovací tabulce: hodnoty se pod sebou porovnávají očima. */
.chg-r {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.chg-r b {
  color: var(--text);
  font-weight: 500;
}

.chg-r .to {
  color: var(--text-faint);
  padding-inline: 0.2em;
}

/* Poznámka vývojáře: proč se to změnilo. Kurzíva a linka vlevo ji drží
   stranou od výčtu, dá se přeskočit. */
.chg-n {
  border-left: calc(2px * var(--ui)) solid var(--border-strong);
  padding-left: var(--sp-3);
  margin-top: calc(4px * var(--ui));
  font-style: italic;
  color: var(--text-muted);
}

.chg-n b {
  font-style: normal;
  font-weight: 500;
  color: var(--text);
}

/* ---------------------------------------------------------- opravy */
/* Opravy jsou jednověté, název by u nich byl delší než ony samy, takže
   si nechávají odrážku běžného seznamu z css/prose.css. */
.prose ul.fixes {
  gap: calc(8px * var(--ui));
}

/* ---------------------------------------------------------- kresby */
/* Obrázek u patche. Kreslí se ve stránce, ne souborem: barvy si bere
   z proměnných motivu, takže se ve světlém i tmavém režimu překreslí
   sama a nic se nestahuje (týž důvod jako u ilustrací v pravidlech,
   viz css/linie.css).

   Kresba stojí schválně jen u změny, kterou je vidět líp než popsat:
   promítání, ztracené potvrzení tahu, záloha profilu a vlastní řádek
   pod žebříčkem. Ostatní patche obrázek nemají, jednou větou se řeknou
   rychleji.

   Beze slov: jsou v nich jenom číslice a znaménka ⇒ a …, ta jsou ve
   všech jazycích stejná. Překládá se u nich pouze popis pro odečítač
   obrazovky (<title> uvnitř <svg>, klíče dev.fig.*). Kresba proto smí
   ležet v HTML, které jazyk nepřepisuje: text změny sedí v .chg-body,
   obrázek stojí vedle něj a přepnutí jazyka se ho netýká. */
.dev-fig {
  margin: var(--sp-3) 0 var(--sp-1);
}

/* <svg> je řádkový prvek, bez tohohle by pod kresbou zůstal proužek
   na účaří. */
.dev-fig svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Strop se násobí --ui, aby kresba rostla s textem kolem sebe. Přes celý
   sloupec by z ní byl plakát, i když je to vektor a rozmazat se nemůže. */
.dev-fig--screens,
.dev-fig--flow {
  max-width: calc(420px * var(--ui));
}

.dev-fig--backup {
  max-width: calc(360px * var(--ui));
}

.dev-fig--rank {
  max-width: calc(300px * var(--ui));
}

/* Text změny je jediný překládaný celek (data-i18n-html přepisuje celý
   innerHTML), a kresba do něj proto nesmí. Obal ji drží stranou a sám
   z rozvržení mizí, takže položky zůstávají přímými poli mřížky .chg. */
.chg-body {
  display: contents;
}

/* ------------------------------------------------------ díly kreseb */
/* Plochy a rámy si berou tytéž barvy jako hrací pole v board.css, ať
   obrázek ukazuje tu hru, kterou čtenář uvidí. */
.dfig-screen {
  fill: var(--cell-empty);
  stroke: var(--grid-line);
  stroke-width: 1;
}

/* Rám bez výplně. Leží nad obsahem obrazovky, jinak by ho zevnitř
   přetřely dlaždice balíčku vytékající pod dolní okraj. */
.dfig-edge {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
}

/* Tělo zařízení: telefon, notebook, skříň serveru. */
.dfig-device {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.dfig-tile,
.dfig-deck {
  fill: var(--cell-fill);
  stroke: var(--border-strong);
  stroke-width: 1;
}

/* Zbytek balíčku. Vlásečnice mřížky stačí, dlaždice leží těsně vedle
   sebe a plný obrys by je slil do šachovnice. */
.dfig-deck {
  stroke: var(--grid-line);
}

.dfig-cell {
  fill: var(--cell-empty);
  stroke: var(--border-strong);
  stroke-width: 1;
}

/* Políčko s položeným číslem. Podbarvení je totéž, jakým pole hlásí
   horkou linii, takže se pozná, kde tah leží a kde chybí. */
.dfig-cell--set {
  fill: var(--score-hot-bg);
}

.dfig-chip {
  fill: var(--accent);
  opacity: 0.55;
}

/* Lišty ve skříni serveru. */
.dfig-bar {
  fill: var(--cell-empty);
  stroke: var(--border-strong);
  stroke-width: 1;
}

/* Zástupné řádky textu: jméno v žebříčku, řádky v souboru zálohy. */
.dfig-bar--sm {
  fill: var(--border-strong);
  stroke: none;
}

.dfig-bar--me {
  fill: var(--accent);
  opacity: 0.45;
  stroke: none;
}

.dfig-dot {
  fill: var(--accent);
  opacity: 0.7;
}

.dfig-file {
  fill: var(--cell-fill);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.dfig-fold {
  fill: var(--accent-soft);
  stroke: var(--border-strong);
  stroke-width: 1;
}

/* ------------------------------------------------------------ šipky */
/* Cesta tam je vždycky stejná, rozdíl nese cesta zpátky: přerušovaná
   a přeťatá křížkem, nebo plná s fajfkou. Barvy --bad a --good jsou
   tytéž, jakými mluví hlášky ve hře. */
.dfig-arrow {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-linecap: round;
}

.dfig-arrow--lost {
  stroke: var(--bad);
  stroke-dasharray: 5 5;
}

.dfig-arrow--ok {
  stroke: var(--good);
}

.dfig-head {
  fill: var(--text-faint);
  stroke: none;
}

.dfig-head--lost {
  fill: var(--bad);
}

.dfig-head--ok {
  fill: var(--good);
}

.dfig-mark {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dfig-mark--bad {
  stroke: var(--bad);
}

.dfig-mark--ok {
  stroke: var(--good);
}

/* ----------------------------------------------------------- číslice */
/* Číslo na dlaždici sází totéž písmo jako hrací pole, pořadí a skóre
   v žebříčku číslicové písmo tabulek. */
.dfig-num {
  fill: var(--cell-ink);
  font-family: var(--font-display);
  font-weight: var(--board-num-weight);
  font-size: 34px;
  font-variant-numeric: tabular-nums;
}

.dfig-num--sm {
  font-size: 16px;
}

.dfig-num--cell {
  font-size: 15px;
}

.dfig-num--tiny {
  font-size: 11px;
}

.dfig-row {
  fill: var(--cell-fill);
  stroke: var(--grid-line);
  stroke-width: 1;
}

/* Vlastní řádek: podbarvený a odsazený pod výpustkou, tedy přesně tak,
   jak ho na stránce žebříčku uvidí ten, kdo stojí za koncem padesátky. */
.dfig-row--me {
  fill: var(--score-hot-bg);
  stroke: var(--accent);
  stroke-width: 1;
}

.dfig-rank {
  fill: var(--text-muted);
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.dfig-rank--me {
  fill: var(--score-hot-ink);
}

/* Výpustka mezi výpisem a vlastním řádkem a šipka mezi obrazovkami. */
.dfig-sign {
  fill: var(--text-faint);
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-size: 20px;
}