/* ==========================================================================
   Hrací plán k vytištění (school.html)
   ==========================================================================

   .sheet je ukázka hracího plánu: prázdné pole 5×5 s rámečky na body linií
   a pod ním bodovací tabulka. Kreslí se v barvách motivu, protože je to
   část stránky jako každá jiná.

   Ke stažení je plán hotové PDF (public/matematicky-poker-hraci-plan.pdf),
   ne tisk téhle stránky. Vyrábí ho `node tools/plan.mjs` z tohoto samého
   značkování, ale vždycky v motivu Academism a s vlastním stylopisem
   (tools/print-plan.css), aby byl list černý na bílém bez ohledu na to,
   jaký motiv má u sebe nasazený učitel. Tisk ze stránky proto tenhle
   soubor neřeší; v tmavém motivu by z něj byla plocha inkoustu. */

.sheet {
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-md);
  padding: clamp(14px, 2.6vw, calc(24px * var(--ui)));
  margin-bottom: var(--sp-5);
  background-color: var(--surface);
}

.sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

/* Nadpis plánu má sazbu hry, ne sazbu odstavce: na vytištěném listu je to
   jediné místo, kde je vidět, co za hru se hraje. */
.sheet-head h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  letter-spacing: var(--display-tracking);
  color: var(--text);
  margin: 0;
}

/* Linka na jméno. Na obrazovce jen popisek s podtržením, na papíře místo,
   kam se dá psát. */
.sheet-line {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0;
  min-width: 42%;
  border-bottom: var(--hairline) solid var(--border);
  padding-bottom: calc(3px * var(--ui));
}

/* ------------------------------------------------------------ hrací pole */

.sheet-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sheet-grid caption {
  caption-side: bottom;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: left;
  padding-top: var(--sp-3);
  text-wrap: pretty;
}

/* Políčka jsou čtvercová, o velikosti rozhoduje šířka sloupce. Sedm sloupců:
   pět hracích a po krajích rámečky na body řádku a sloupce.

   Čtverec drží prázdný ::before s `padding-top: 100%`, ne `aspect-ratio`:
   buňka tabulky si poměr stran neřekne, výšku jí určuje řádek. Procento
   u padding-top se přitom měří šířkou buňky, takže výška sedne na ni. */
.sheet-grid td {
  border: var(--hairline) solid var(--border-strong);
  padding: 0;
}

.sheet-grid td::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* Rámečky pro součty se od hracích políček musí poznat i na papíře. Nesmí
   je proto odlišovat jenom podklad: prohlížeč tiskne pozadí až po zaškrtnutí
   „Grafika na pozadí“ a bez ní by z listu byla mřížka 7×6 bez vysvětlení.
   Odděluje je tedy silnější linka, která obtáhne vnitřní pole 5×5, a podklad
   je navíc jen na obrazovce. */
.sheet-sum {
  background-color: var(--surface-2);
}

.sheet-grid tr:first-child td {
  border-bottom-width: 2px;
}

.sheet-grid tr:not(:first-child) td:first-child {
  border-right-width: 2px;
}

/* Ryska v rohu ukazuje, kterým směrem vede úhlopříčka. Kreslí ji okraj
   pootočeného ::after, ne podklad, ať zůstane i na vytištěném listu.
   Čtverec políčka drží ::before, proto tady druhý pseudoprvek. */
.sheet-diag {
  position: relative;
}

.sheet-diag::after {
  content: "";
  position: absolute;
  top: 8%;
  width: 22%;
  border-top: 1.2px solid var(--text-muted);
}

.sheet-diag:not(.sheet-diag--right)::after {
  left: 8%;
  transform: rotate(45deg);
  transform-origin: left top;
}

.sheet-diag--right::after {
  right: 8%;
  transform: rotate(-45deg);
  transform-origin: right top;
}

/* Pravý dolní roh mřížky nic nenese, drží jen sedmý sloupec na šířku
   ostatních, ať pole nesedí natlačené vlevo. */
/* Přebít musí i obecné pravidlo pro každou buňku, proto tady stojí i značka
   sloupce: `.sheet-grid td` má vyšší specifičnost než samotná třída. */
.sheet-grid td.sheet-blank {
  border: 0;
  background: none;
}

.sheet-score {
  margin-top: var(--sp-4);
}

.sheet-foot {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: var(--sp-3) 0 0;
}

.sheet-actions {
  margin-bottom: var(--sp-4);
}