/* ETH-301 — nástěnka: mřížka v3, režim úprav, tažení, velikost a skrývání částí dlaždice.
 * Chování je v `src/pins-board.js` a `src/pins-layout.js`. Oddělené od
 * `pins.css` kvůli limitu 400 řádků na soubor; barvy jen z `src/tokens.css`. */

/* ── Nástěnka: mřížka, tažení, velikost ───────────────────────────────── */

/* Mřížka v3: 12 sloupců, řádek 36 px, mezera 6 px — musí sedět s SLOUPCU (pins-layout.js)
   a RADEK_PX / MEZERA_PX (pins-board.js). Dlaždice mají pozici z JS (grid-column/row),
   `--rows` drží výšku nástěnky i s volnými řádky pod poslední dlaždicí. */
.pins-board {
  --rows: 4;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), 36px);
  gap: 6px;
}
/* V režimu úprav je mřížka vidět, ať je jasné, kam se dlaždice přichytí
   (11 mezer × 6 px = 66 px). */
.pins-board.pins-board-edit {
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc((100% - 66px) / 12),
      var(--chip) calc((100% - 66px) / 12),
      var(--chip) calc((100% - 66px) / 12 + 6px)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 36px,
      var(--chip) 36px,
      var(--chip) 42px
    );
}
/* Prohlížení: žádné úchyty, rohy ani přepínače — jen nadpis a data. */
.pins-board:not(.pins-board-edit)
  :is(
    .pin-grip,
    .pin-resize,
    .pin-menu,
    .graf-prepinac,
    [data-pin-act='menu'],
    [data-pin-act='sundat'],
    [data-pin-act='graf']
  ) {
  display: none !important;
}
.pins-board:not(.pins-board-edit) .pin-skryt-title .pin-card-head {
  display: none;
}
.pins-head-actions {
  display: flex;
  gap: 8px;
}
.pins-screen button[data-pin-act='upravy'][aria-pressed='true'] {
  background: var(--brand-solid);
  border-color: var(--brand-solid);
  color: var(--on-brand);
}
/* Víc vzduchu (Jakub 29. 9. 2026: „moc na sobě připlácnuté") — odsazení od okraje
   a mezery mezi nadpisem, textem a daty. */
.pin-board-card {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px 14px;
  gap: 10px;
}
.pin-board-card .pin-card-head h3 {
  line-height: 1.35;
}
.pin-board-card .pin-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pin-board-card .pin-popis {
  color: var(--text-2);
  line-height: 1.5;
}
.pin-board-card .pin-md .md-table {
  margin: 0;
}
.pin-board-card .pin-meta {
  display: none;
}

/* ── Skrývání částí dlaždice (nabídka ⋯) ──────────────────────────────── */

.pin-skryt-text .pin-popis,
.pin-skryt-data .pin-data {
  display: none;
}
/* Bez nadpisu zůstane jen ovládání, a to až při najetí myší — dlaždice pak
   ukazuje jen samotná data. Z klávesnice (focus-within) je vidět taky.
   Úchyt pro přesun zůstává vlevo nahoře jako u dlaždice s nadpisem
   (Jakub 29. 9. 2026), ostatní ovládání vpravo. Pruh hlavičky kliky
   propouští, chytají je jen tlačítka. */
.pin-skryt-title .pin-card-head {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.pin-skryt-title .pin-card-head > * {
  pointer-events: auto;
}
.pins-screen .pin-skryt-title .pin-card-head button:not(:hover):not(.active) {
  border-radius: var(--r-btn);
  background: var(--surface);
}
.pin-skryt-title .pin-card-head .pin-grip {
  margin-right: auto;
}
.pin-skryt-title .pin-card-head h3 {
  display: none;
}
.pin-skryt-title:hover .pin-card-head,
.pin-skryt-title:focus-within .pin-card-head,
.pin-skryt-title.pin-tazena .pin-card-head {
  opacity: 1;
}
.pin-menu {
  position: absolute;
  top: 34px;
  right: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-size: 12px;
}
.pin-menu[hidden] {
  display: none;
}
.pin-menu label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}
.pin-board-card .pin-body {
  flex: 1;
}
.pin-board-card .graf {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
.pin-board-card .graf-platno {
  flex: 1;
  min-height: 60px;
  height: auto !important; /* graf.js dává bublině pevných 260 px; dlaždice má vlastní výšku */
}
.pin-tazena {
  opacity: 0.6;
  outline: 2px dashed var(--brand);
  outline-offset: 2px;
}
.pins-screen button.pin-resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 0 0 var(--r-card) 0;
  background:
    linear-gradient(
      135deg,
      transparent 50%,
      var(--border-2) 50%,
      var(--border-2) 60%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      transparent 70%,
      var(--border-2) 70%,
      var(--border-2) 80%,
      transparent 80%
    );
  cursor: nwse-resize;
  touch-action: none;
}
.pins-screen button.pin-resize:focus-visible,
.pins-screen button.pin-grip:focus-visible {
  outline: 2px solid var(--brand);
}

/* ── ETH-392: písmo věty, řazení a top X ─────────────────────────────── */

/* Odpověď větou je vždy celá; přepínač v ⋯ jen zvětší písmo. */
.pin-board-card .pin-veta {
  font-size: 13px;
  line-height: 1.45;
}
/* Velké písmo: běžný text zůstane běžný, tučné zvýraznění (hodnoty) vynikne. */
.pin-board-card.pin-font-velke .pin-veta {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}
.pin-board-card.pin-font-velke .pin-veta strong {
  font-weight: 700;
}
/* Hlavička tabulky na nástěnce řadí — i v prohlížení (je to volba zobrazení, ne rozložení). */
.pins-board th.pin-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.pins-board th.pin-th:hover {
  color: var(--brand);
}
.pins-board th.pin-th[aria-sort='ascending']::after {
  content: ' ▲';
  font-size: 9px;
}
.pins-board th.pin-th[aria-sort='descending']::after {
  content: ' ▼';
  font-size: 9px;
}
.pin-varovani {
  margin: 4px 0 0;
  padding: 4px 8px;
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--chip);
  color: var(--warn);
  font-size: 11px;
}
.pin-menu select {
  font: inherit;
  font-size: 12px;
  margin-left: 4px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--field);
  color: var(--text-1);
}