/* Tablica: układ, którego nie wyrażają klasy wspólne z halonik.css (prefiks tb-). Ładowany po halonik.css i po
   quickdraw.css (arkusz silnika, wbudowany bez zmian); tylko tokeny, bez kolorów na sztywno. */

/* Strona = nagłówek i tablica na całą resztę wysokości; bez stopki (decyzja autora: tablica ma całe okno). Tablica nie przewija strony. */
body.tb-app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.tb-app .site-header { position: relative; }
.tb-main { position: relative; min-height: 0; border-top: 1.5px solid var(--ink); background: var(--bg-subtle); }
#tb-board { position: absolute; inset: 0; }

.tb-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.4rem; }
.tb-actions .spacer { flex: 0 0 0.25rem; }
.tb-status { gap: 0.45rem; }
.tb-status:disabled { opacity: 1; cursor: default; }

/* Okno udostępniania. */
.tb-share-body, .tb-join-body { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }
.tb-share-body .hint, .tb-join-body .hint { margin: 0; }
.tb-pin { display: flex; justify-content: center; gap: 0.5rem; }
.tb-pin b {
  display: grid; place-items: center; width: 3.1rem; height: 3.6rem;
  font-family: var(--font-mono); font-size: 1.75rem; font-weight: 700; color: var(--ink);
  background: var(--tone-light);
  border: 1.5px solid var(--ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.tb-pin b[data-tone] { background: var(--tone-light); }
.tb-qr { padding: 0.5rem; background: var(--bg-card); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); line-height: 0; }
.tb-qr:empty { display: none; }
.tb-qr canvas, .tb-qr img { max-width: 100%; height: auto; }
.tb-share-status { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; font-size: var(--fs-body); color: var(--text-body); }
.tb-foot { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.tb-foot .btn { flex: 1 1 auto; }
.tb-confirm-text { margin: 0; line-height: 1.5; }
#tb-join-error { margin: 0; width: 100%; text-align: left; }

/* Nakładka przy przeciąganiu pliku: nie przechwytuje upuszczenia, plik trafia do strony. */
.tb-drop {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none;
  background: var(--tone-light);
  opacity: 0.94;
}
.tb-drop[hidden] { display: none; }
.tb-drop-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 24rem; text-align: center; border-style: dashed; }
.tb-drop-card h2 { margin: 0; }
.tb-drop-icon { color: var(--tone); }
.tb-drop-icon .ic { width: 2.5rem; height: 2.5rem; }

/* Pasek silnika: stoi na tablicy, nad nią jest stopka strony; znak Quickdraw nie może zasłaniać paska narzędzi. */
.tb-main .qd-watermark { z-index: 30; }

@media (max-width: 640px) {
  .tb-actions { gap: 0.35rem; }
  .tb-pin b { width: 2.7rem; height: 3.2rem; font-size: 1.5rem; }
  .tb-qr { padding: 0.35rem; }
  .tb-qr canvas, .tb-qr img { width: 7.5rem !important; height: 7.5rem !important; }
  .tb-share-body, .tb-join-body { gap: 0.7rem; }
}