/* Zapasy — warsztat. Arkusz wspólny dla wszystkich stron (baza z aplikacji „Ocena zniekształceń”). */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,650&display=swap");

:root {
  --ink: #1c2b39;
  --ink-soft: #4a5a68;
  --paper: #f3f5f4;
  --surface: #ffffff;
  --rule: #cfd6d8;
  --rule-strong: #9aa7ad;
  --tick: #1f6f5c;          /* zielony ołówek — zgodność */
  --tick-bg: #e3f1ec;
  --ochre: #9a6412;         /* różnica, ostrzeżenie */
  --ochre-bg: #fbf0dc;
  --red: #a8261d;           /* zgodnie odmiennie */
  --red-bg: #fbe4e1;
  --blue: #1d4e89;          /* pasek sesji */
  --blue-bg: #e2ecf7;
  --focus: #2f6fd6;

  --serif: "Source Serif 4", "Georgia", "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --measure: 72ch;
  --radius-control: 4px;
  --radius-panel: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 17px; }
body {
  margin: 0;
  font-family: var(--sans);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 650; line-height: 1.2; margin: 0 0 var(--s3); }
h1 { font-size: 2rem; letter-spacing: -0.01em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 var(--s3); max-width: var(--measure); }
a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); }

/* ---------- nagłówek ---------- */
.masthead { background: var(--ink); color: #fff; }
.masthead .wrap { padding-top: var(--s5); padding-bottom: var(--s5); display: flex; gap: var(--s5); align-items: baseline; flex-wrap: wrap; justify-content: space-between; }
.masthead h1 { margin: 0; font-size: 1.6rem; color: #fff; }
.masthead .sub { margin: 0; color: #c9d3da; }
.masthead a { color: #fff; }

/* ---------- komunikaty ---------- */
.banner { padding: var(--s3) var(--s4); border-left: 4px solid; background: var(--surface); margin: 0 0 var(--s4); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.banner p { margin: 0; }
.banner--info { border-color: var(--blue); background: var(--blue-bg); }
.banner--warn { border-color: var(--ochre); background: var(--ochre-bg); }
.banner--error { border-color: var(--red); background: var(--red-bg); }
.banner--ok { border-color: var(--tick); background: var(--tick-bg); }

/* ---------- strona startowa: program dnia ---------- */
.start-links { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s6); }
.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s6); }
.day h2 { border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); }
.session { margin: 0 0 var(--s5); }
.session-time { font-weight: 700; color: var(--ink-soft); margin: 0 0 var(--s2); }
.agenda { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.agenda li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.agenda .min { color: var(--ink-soft); white-space: nowrap; }
.agenda li.is-team { font-weight: 600; }
.agenda li.is-team .min::after { content: " · zespoły"; font-weight: 400; }
.agenda a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.totals { margin-top: var(--s5); color: var(--ink-soft); }

/* ---------- przyciski ---------- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); border-radius: var(--radius-control);
  border: 1px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none;
}
.btn:hover { background: #2c4155; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--ghost { background: var(--surface); color: var(--ink); }
.btn--ghost:hover { background: var(--paper); }
.btn--quiet { background: transparent; color: var(--blue); border-color: transparent; padding-left: 0; }
.btn--quiet:hover { background: transparent; text-decoration: underline; }
.btn--icon { background: transparent; color: var(--ink-soft); border-color: transparent; padding: 0 var(--s2); font-size: 1.2rem; line-height: 1; }
.btn--icon:hover { background: var(--paper); color: var(--red); }

/* ---------- pola formularza ---------- */
.field { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s5); margin: 0 0 var(--s4); }
.field-label { font-weight: 600; margin: 0 0 var(--s2); max-width: var(--measure); }
.field-label p { margin: 0 0 var(--s2); }
.field-control { margin-top: var(--s3); }
.field.is-missing { border-color: var(--ochre); }

input[type="text"], select, textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-control);
  padding: 6px 10px; width: 100%;
}
textarea { resize: vertical; min-height: 3.2em; }
input[readonly], textarea[readonly] { background: var(--paper); }
.num { text-align: right; max-width: 12ch; }
.num-wrap { display: inline-flex; align-items: center; gap: var(--s2); }
.unit { color: var(--ink-soft); font-weight: 400; }

.choices { display: grid; gap: var(--s2); }
.choices--inline, .choices--scale { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.choice { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; }
.choice input { margin-top: .3em; width: 1.05em; height: 1.05em; accent-color: var(--tick); }
.scale { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.scale-end { color: var(--ink-soft); font-size: .9rem; }

.hint { margin: var(--s2) 0 0; max-width: var(--measure); }
.hint summary { cursor: pointer; color: var(--tick); font-weight: 600; width: max-content; }
.hint summary::marker { color: var(--tick); }
.hint-body { border-left: 3px solid var(--tick); padding: var(--s2) var(--s3); margin-top: var(--s2); background: var(--tick-bg); }
.hint-body p:last-child { margin: 0; }

.field-why { margin-top: var(--s4); }
.why-label { display: block; font-size: .9rem; color: var(--ink-soft); margin-bottom: var(--s1); }

.list-items { margin: 0 0 var(--s2); padding-left: 1.6em; }
.list-items li { margin-bottom: var(--s2); }
.list-items li > * { vertical-align: middle; }
.list-items input { width: calc(100% - 2.5em); }

/* ---------- tabele ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-control); }
/* Długa tabela przewija się we własnym oknie — dzięki temu nagłówek kolumn i wiersz sum zostają na widoku. */
.table-scroll--tall { max-height: min(68vh, 44em); overflow-y: auto; }
.table-scroll--tall .grid tfoot th, .table-scroll--tall .grid tfoot td { position: sticky; bottom: 0; z-index: 2; }
@media (max-width: 640px) { .table-scroll--tall { max-height: 60vh; } }
@media print { .table-scroll--tall { max-height: none; overflow: visible; } }
table.grid { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .95rem; }
.grid th, .grid td { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: var(--s2); vertical-align: top; text-align: left; }
.grid thead th { background: #e8edef; font-weight: 600; position: sticky; top: 0; z-index: 2;
  box-shadow: inset 0 -1px 0 var(--rule); }
.grid thead th.row-head { z-index: 3; }
.grid thead th .unit--head { display: block; font-size: .85rem; }
.grid th.row-head { font-weight: 400; min-width: 16ch; max-width: 42ch; }
.grid thead th.row-head { font-weight: 600; }
.grid td.col-number, .grid th.col-number { text-align: right; }
.grid td input, .grid td select, .grid td textarea { width: 100%; }
.grid td input[type="checkbox"], .grid td input[type="radio"] { width: 1.05em; flex: none; }
.grid th.row-head, .grid td .choice { text-align: left; }
.grid td.col-number input { max-width: none; }
.grid tr:last-child th, .grid tr:last-child td { border-bottom: 0; }
.grid th:last-child, .grid td:last-child { border-right: 0; }

/* ---------- pasek zespołu i zapis ---------- */
.teambar { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--rule); }
.teambar .wrap { padding-top: var(--s2); padding-bottom: var(--s2); display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.save-state { color: var(--ink-soft); font-size: .9rem; margin-left: auto; }
.save-state.is-queued { color: var(--ochre); font-weight: 600; }

/* ---------- panel założeń (przycisk zawsze widoczny) ---------- */
.dossier-toggle {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 20;
  box-shadow: 0 2px 0 var(--ink-soft);
}
.drawer { position: fixed; inset: 0 0 0 auto; width: min(1100px, 96vw); background: var(--surface); z-index: 30; border-left: 1px solid var(--rule-strong); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease; }
.drawer.is-open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--rule); }
.drawer-tabs { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s2) var(--s5); border-bottom: 1px solid var(--rule); }
.drawer-body { overflow-y: auto; overflow-x: hidden; padding: var(--s5); }
.drawer .data-block table { width: 100%; table-layout: fixed; }
.drawer .data-block td, .drawer .data-block th { word-break: break-word; hyphens: auto; }
.drawer .table-scroll { overflow-x: auto; }

/* ---------- etapy ---------- */
.before-next { border: 2px solid var(--ochre); background: var(--ochre-bg); border-radius: var(--radius-panel); padding: var(--s4) var(--s5); margin: 0 0 var(--s5); }
.revealed { border-left: 4px solid var(--ochre); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  html { font-size: 16px; }
  .wrap { padding: var(--s4); }
  .field { padding: var(--s4); }
  .dossier-toggle { right: var(--s3); bottom: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}

@media print {
  .dossier-toggle, .teambar, .btn { display: none !important; }
  body { background: #fff; }
}

/* ---------- rozszerzenia tabel ćwiczeń ---------- */
.choices--cell { display: grid; gap: 2px; font-size: .92rem; }
.choices--cell .choice { gap: 6px; }
.grid tr.section-row th { background: #eef2f3; font-weight: 700; padding-top: var(--s3); border-top: 2px solid var(--rule-strong); }
.grid tfoot tr.sum-row th, .grid tfoot tr.sum-row td { font-weight: 700; border-top: 2px solid var(--ink); background: #f6f8f8; }
.grid tfoot tr.sum-row.is-unbalanced td { color: var(--red); }
.grid td[data-col] textarea { min-height: 2.6em; }

/* ---------- bloki założeń, dossier, ćwiczenie ---------- */
.lead { font-size: 1.1rem; max-width: var(--measure); }
.intro { max-width: var(--measure); margin-bottom: var(--s5); }
.data-block { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s4) var(--s5); margin: 0 0 var(--s4); }
.data-block h3 { margin-bottom: var(--s2); }
.data-block.revealed { border-left: 5px solid var(--ochre); background: #fffdf8; }
.data-block-body p { max-width: var(--measure); }
.used-in { font-size: .9rem; color: var(--ink-soft); }
.note { font-size: .9rem; color: var(--ink-soft); margin-top: var(--s2); }
table.fin { min-width: 480px; }
table.fin caption { text-align: left; font-weight: 600; padding: var(--s2); }
table.fin th[scope="row"] { font-weight: 400; }
table.fin tr.is-strong th, table.fin tr.is-strong td { font-weight: 700; }
table.fin tr.is-sub th { padding-left: var(--s5); color: var(--ink-soft); }
.dossier-toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
/* ---------- założenia: ekran ogólny z kafelkami kategorii ---------- */
.dossier-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); margin: var(--s5) 0 var(--s6); }
.dossier-tile { display: block; text-decoration: none; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-left: 5px solid var(--tick); border-radius: var(--radius-panel); padding: var(--s4); }
.dossier-tile:hover { border-color: var(--tick); background: var(--tick-bg); }
.dossier-tile h2 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 var(--s2); border: 0; padding: 0; }
.dossier-tile-lead { margin: 0 0 var(--s3); color: var(--ink-soft); }
.dossier-tile-count { margin: 0; font-size: .85rem; color: var(--rule-strong); }
.dossier-head { display: flex; gap: var(--s4); align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: var(--s3); }
.dossier-head h2 { margin: 0; border: 0; padding: 0; }
.dossier-head .sub { margin: var(--s1) 0 0; }
.dossier-switch { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.dossier-switch .drawer-tab.is-current { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.dossier-foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.dossier-toc ul { margin: 0; padding-left: 1.2em; }
.dossier-topic { margin-bottom: var(--s6); }
.dossier-topic > h2 { border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); }
.stage { margin: var(--s6) 0; }
.stage > h2 { border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); }
.reveal { max-width: var(--measure); }
.picker-list { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.btn--big { font-size: 1.1rem; padding: var(--s3) var(--s5); }
.progress { color: var(--ink-soft); font-size: .9rem; }
.actions { margin: var(--s6) 0; }
.drawer-tab { font-size: .88rem; padding: 2px var(--s2); border: 1px solid var(--rule); border-radius: var(--radius-control); text-decoration: none; color: var(--ink); background: var(--paper); }
.drawer-tab.is-new { border-color: var(--ochre); background: var(--ochre-bg); font-weight: 600; }
.drawer .data-block { padding: var(--s3) var(--s4); }

[id] { scroll-margin-top: 72px; }

/* ---------- panel prowadzącego ---------- */
.login { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s5); max-width: 32em; }
.login input { max-width: 18em; margin-bottom: var(--s3); }
.login-msg { color: var(--red); min-height: 1.4em; }

.session-bar { display: flex; gap: var(--s4); align-items: baseline; flex-wrap: wrap; padding: var(--s3) var(--s4); border-radius: var(--radius-control); margin-bottom: var(--s4); }
.session-bar.is-ready { background: var(--blue-bg); border-left: 4px solid var(--blue); }
.session-bar.is-stale { background: var(--ochre-bg); border-left: 4px solid var(--ochre); }
.session-mode { margin-left: auto; color: var(--ochre); font-weight: 600; }

.ex-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.ex-tabs .is-current { background: var(--ink); color: #fff; }
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
#pause-btn.is-paused { background: var(--ochre-bg); border-color: var(--ochre); }

.group-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.group-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s3) var(--s4); display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s2); align-items: center; }
.group-card strong { grid-column: 2; }
.group-card .dot { grid-row: span 3; width: 14px; height: 14px; border-radius: 50%; background: var(--rule-strong); }
.group-card .dot--none { background: var(--rule-strong); }
.group-card .dot--low { background: var(--red); }
.group-card .dot--mid { background: var(--ochre); }
.group-card .dot--full { background: var(--tick); }
.group-fill, .group-time { grid-column: 2; color: var(--ink-soft); font-size: .9rem; }
.group-ready { grid-column: 2; color: var(--tick); font-weight: 600; font-size: .9rem; }

.stage-list { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.stage-card { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong); border-radius: var(--radius-panel); padding: var(--s4); }
.stage-card.is-open { border-left-color: var(--tick); }
.stage-preview { background: var(--paper); border-radius: var(--radius-control); padding: var(--s3); margin-bottom: var(--s3); max-height: 22em; overflow-y: auto; }

.cmp-summary { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.pill { padding: 2px var(--s3); border-radius: 999px; font-size: .9rem; font-weight: 600; border: 1px solid; }
.pill--ok { background: var(--tick-bg); border-color: var(--tick); color: var(--tick); }
.pill--warn { background: var(--ochre-bg); border-color: var(--ochre); color: var(--ochre); }
.pill--alert { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.pill--talk, .pill--none { background: var(--paper); border-color: var(--rule-strong); color: var(--ink-soft); }

.cmp-rows, .cmp-head { --cmp-cols: 2fr 1fr 1fr 1.5fr 1fr; }
.cmp-row { display: grid; grid-template-columns: var(--cmp-cols); border-bottom: 1px solid var(--rule); background: var(--surface); }
.cmp-row--head { background: #e8edef; font-weight: 600; position: sticky; top: 0; z-index: 2; }
.cmp-cell { padding: var(--s2) var(--s3); border-right: 1px solid var(--rule); font-size: .95rem; }
.cmp-cell:last-child { border-right: 0; }
.cmp-label .cmp-sub { display: block; color: var(--ink-soft); font-size: .85rem; }
.cmp-row--alert { background: var(--red-bg); }
.cmp-row--warn { background: #fffaf0; }
.cmp-row--ok .cmp-status { color: var(--tick); }
.cmp-row--alert .cmp-status { color: var(--red); font-weight: 700; }
.cmp-note { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-soft); }
.cmp-sol.is-hidden { color: var(--ink-soft); }
.why { color: var(--ink-soft); font-size: .85rem; margin-top: 2px; }
#summary .summary { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s5); margin: var(--s5) 0; }
.col-next { background: var(--tick-bg); }

.links { margin: var(--s6) 0; }
.link-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.link-list { display: grid; gap: var(--s2); }
.link-row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-control); padding: var(--s2) var(--s3); }
.link-label { font-weight: 600; min-width: 16em; }
.link-url { color: var(--ink-soft); font-size: .85rem; overflow-wrap: anywhere; }
.qr { flex-basis: 100%; padding: var(--s3) 0; }
.qr svg { width: 220px; height: 220px; }
.copy-fallback { position: absolute; left: -9999px; }

.present { position: fixed; inset: 0; background: var(--surface); z-index: 40; overflow-y: auto; padding: var(--s5); }
.present-bar { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: 1rem; margin-bottom: var(--s5); }
.present-count { align-self: center; color: var(--ink-soft); }
.present-q { max-width: 40ch; }
.present-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: var(--s4); }
.present-card { border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s4); }
.present-card h3 { color: var(--ink-soft); font-size: .8em; }
.present-solution { margin-top: var(--s5); border-left: 5px solid var(--tick); background: var(--tick-bg); padding: var(--s4); }
.cmp-band { grid-column: 1 / -1; background: #e8edef; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); padding: var(--s2) var(--s3); font-weight: 600; font-size: .95rem; }
.cmp-label strong { font-weight: 600; }

/* ---------- quiz i test ---------- */
.exam fieldset.field { border: 1px solid var(--rule); }
.exam legend.field-label { padding: 0 var(--s2); }
.exam-count { color: var(--ink-soft); }
.exam-msg { color: var(--red); min-height: 1.4em; }
.exam-result { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s5); margin-top: var(--s5); }
.exam-review { padding-left: 1.4em; }
.exam-review li { margin-bottom: var(--s4); padding-left: var(--s3); border-left: 4px solid var(--rule); }
.exam-review li.is-ok { border-left-color: var(--tick); }
.exam-review li.is-bad { border-left-color: var(--red); }
.exam-q { font-weight: 600; }
.exam-correct { color: var(--tick); }
.exam-explain { color: var(--ink-soft); }
.dist-list { display: grid; gap: var(--s4); }
.dist-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s4); }
.dist-row { display: grid; grid-template-columns: 1fr 8em auto; gap: var(--s3); align-items: center; padding: 2px 0; }
.dist-row.is-correct { font-weight: 600; color: var(--tick); }
.dist-bar { height: 12px; background: linear-gradient(to right, var(--blue) var(--pct), var(--paper) var(--pct)); border: 1px solid var(--rule); border-radius: 6px; }
.dist-row.is-correct .dist-bar { background: linear-gradient(to right, var(--tick) var(--pct), var(--paper) var(--pct)); }
.dist-count { color: var(--ink-soft); font-size: .9rem; white-space: nowrap; }
.dist-explain { color: var(--ink-soft); margin-top: var(--s2); }
.exam-grid td.cell-ok { background: var(--tick-bg); }
.exam-grid td.cell-bad { background: var(--red-bg); }
.exam-grid td.cell-none { color: var(--ink-soft); }
details.used-in { margin: 0 0 var(--s3); }
details.used-in summary { cursor: pointer; color: var(--blue); font-size: .9rem; width: max-content; }
details.used-in p { margin: var(--s2) 0 0; font-size: .9rem; color: var(--ink-soft); }

/* ---------- dodatkowe skutki w wierszu tabeli ---------- */
.grid tr.extra-row th.row-head { color: var(--ink-soft); font-size: .9rem; padding-left: var(--s4); }
.grid tr.extra-row td { background: #fbfcfc; }
.btn--addrow { display: block; font-size: .85rem; padding: 2px 0; margin-top: var(--s2); text-align: left; justify-content: flex-start; }
.grid th.row-head span { display: block; }
.extra-remove { margin-left: var(--s2); }

/* ---------- panel: układ tabel zespołów ---------- */
.cmp-rows--grouped { display: grid; gap: var(--s5); }
.group-answers { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s4); }
.group-answers h4 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 var(--s3); display: flex; gap: var(--s3); align-items: baseline; }
.group-answers.is-solution { border-left: 5px solid var(--tick); background: var(--tick-bg); }
.group-table th[scope="row"] { font-weight: 400; }
.plain-answers dt { font-weight: 600; margin-top: var(--s3); }
.plain-answers dd { margin: var(--s1) 0 0; }
.reveal-toggle { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 25; box-shadow: 0 2px 0 var(--ink-soft); }
.reveal-toggle.is-on { background: var(--tick); border-color: var(--tick); }
.present .reveal-toggle, body:has(.present:not([hidden])) .reveal-toggle,
body.has-sol-view .reveal-toggle, body.has-sol-view .dossier-toggle { display: none; }
@media (max-width: 640px) { .reveal-toggle { right: var(--s3); bottom: var(--s3); } }

/* ---------- okno z rozwiązaniem u dołu ekranu ---------- */
/* Okno trzyma standardową szerokość strony, żeby tabela rozwiązania układała się tak samo jak odpowiedzi zespołów. */
  width: min(1180px, 100vw); background: var(--surface);
  border: 1px solid var(--rule-strong); border-bottom: 0; border-top: 3px solid var(--tick);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--rule); background: var(--tick-bg); }
/* Przy otwartym oknie tabela zespołu skraca się do wolnej części ekranu — odpowiedzi
   i rozwiązanie mają być widoczne jednocześnie, bez przewijania jednego pod drugie. */
/* Nazwa zespołu zostaje na widoku, gdy tabela przewija się we własnym oknie. */
  padding: var(--s2) 0; margin-bottom: var(--s2); }
@media print {
}
.group-table td.cell-empty { color: var(--rule-strong); background: none; }

/* ---------- panel: zestawienie parami (odpowiedzi zespołów obok rozwiązania) ---------- */
.pair-legend { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.pair { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s4); }
.pair h4 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 var(--s3); display: flex; gap: var(--s3);
  align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.pair-status { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.pair-matrix th[scope="row"] { font-weight: 400; }
.pair-matrix td.col-pick, .pair-matrix th.col-pick { text-align: center; width: 1%; white-space: nowrap; }
.pair-matrix td.is-picked { font-weight: 700; color: var(--tick); }
.pair-matrix .col-sol { border-left: 3px solid var(--rule-strong); }
.pair-matrix th.col-sol { font-variant-caps: small-caps; }
.pair-matrix tr.row-quiet th[scope="row"] { color: var(--rule-strong); }
.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s3); align-items: start; }
.pair-col { min-width: 0; }
.pair-col h5 { margin: 0 0 var(--s2); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); display: flex; gap: var(--s3); align-items: baseline; justify-content: space-between; }
.pair-col--sol { border-left: 3px solid var(--rule-strong); padding-left: var(--s4); }
.pair-item { margin-bottom: var(--s3); }
.pair-item h6 { margin: 0 0 var(--s1); font-size: .9rem; }
.pair-item p, .pair-col > p { margin: 0 0 var(--s2); }
.pair-points { margin: 0; padding-left: 1.1em; }
.pair-points li { margin-bottom: var(--s1); }
.pair-empty { color: var(--rule-strong); }
.pair-variant, .pair-note { color: var(--ink-soft); font-size: .9rem; }
@media (max-width: 900px) {
  .pair-row { grid-template-columns: 1fr; }
  .pair-col--sol { border-left: 0; border-top: 3px solid var(--rule-strong); padding-left: 0; padding-top: var(--s3); }
}
.pair-after { margin-top: var(--s3); border-left: 3px solid var(--rule-strong); padding-left: var(--s4); }
.pair-after p:last-child { margin-bottom: 0; }
.sol-summary { margin: var(--s3) 0 0; }
/* W oknie u dołu długa tabela mieści się w jego wysokości — nagłówek kolumn zostaje wtedy na widoku. */

/* ---------- panel ustaleń przeniesionych z wcześniejszego ćwiczenia ---------- */
.carry-toggle {
  position: fixed; right: var(--s5); bottom: calc(var(--s5) + 3.4em); z-index: 20;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left;
  max-width: min(22em, calc(100vw - 2 * var(--s5))); box-shadow: 0 2px 0 var(--ink-soft);
  background: var(--ochre); border-color: var(--ochre);
}
.carry-toggle:hover { background: #82540f; }
.carry-toggle-title { font-weight: 700; }
.carry-toggle-sub { font-size: .8rem; font-weight: 400; opacity: .9; }
.carry-intro { margin: 0 0 var(--s4); color: var(--ink-soft); }
.carry-item { margin-bottom: var(--s5); }
.carry-item h4 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 var(--s2); }
.carry-group { font-family: var(--sans); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); margin: var(--s5) 0 var(--s3); padding-bottom: var(--s1); border-bottom: 2px solid var(--rule); }
.carry-group:first-of-type { margin-top: 0; }
.carry-group--off { color: var(--ochre); border-bottom-color: var(--ochre); }
.carry-item--off { border-left: 3px solid var(--ochre); padding-left: var(--s3); }
.drawer-tab--off { border-color: var(--ochre); color: var(--ochre); }
.carry-table th[scope="row"] { font-weight: 400; width: 38%; }
.carry-desc { margin-top: var(--s2); }
.carry-desc summary { cursor: pointer; color: var(--blue); font-size: .9rem; }
.carry-desc .data-block-body { margin-top: var(--s2); }
@media (max-width: 640px) { .carry-toggle { right: var(--s3); bottom: calc(var(--s3) + 3.4em); } }
@media print { .carry-toggle { display: none !important; } }

/* ---------- panel: zestawienie zbiorcze (wiersz na dyspozycję) ---------- */
.sheet-table th[scope="row"] { font-weight: 600; min-width: 18ch; max-width: 34ch; }
.sheet-table th[scope="row"] span { display: block; }
.sheet-table th[scope="row"] .row-status { font-weight: 400; font-size: .8rem; color: var(--ink-soft); margin-top: var(--s1); }
.sheet-table .col-sol { border-left: 3px solid var(--rule-strong); }
.sheet-table th.col-sol { font-variant-caps: small-caps; }
.sheet-table td.is-off { font-weight: 600; }
.sheet-table .dev { font-weight: 400; font-size: .82rem; color: var(--ochre); margin-top: 2px; }
.sheet-table td.col-number .dev { white-space: nowrap; }
.carry-table-head { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 var(--s2); }
.carry-switch { padding: 2px var(--s2); }

/* ---------- panel: kafelek wywołujący okno z rozwiązaniem ---------- */
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 31;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  max-width: min(22em, calc(100vw - 2 * var(--s5)));
  background: var(--tick); border-color: var(--tick); box-shadow: 0 2px 0 var(--ink-soft);
}
/* Rozbieżna kwota zespołu — kolor tylko tam, gdzie porównanie dotyczy pojedynczej komórki (ćw. 3). */
.group-table td.cell-off { background: var(--ochre-bg); color: var(--ochre); font-weight: 700; }
.group-table td.cell-variant { background: var(--tick-bg); }
/* Zwijanie bloków odpowiedzi — przycisk po prawej stronie nagłówka bloku. */
.group-answers h4 .group-toggle { margin-left: auto; padding: 0 var(--s2); }
.group-answers.is-collapsed .group-body { display: none; }
.group-answers.is-collapsed { padding-bottom: var(--s3); }
.group-answers.is-collapsed h4 { margin-bottom: 0; }

/* ---------- tryb prezentacyjny: rozwiązanie obok odpowiedzi zespołów ---------- */
.present-card--sol { border-left: 5px solid var(--tick); background: var(--tick-bg); }
.present-card--hidden { border-style: dashed; color: var(--ink-soft); }
.present-card--hit { border-color: var(--tick); }
.present-card--off { border-color: var(--ochre); }
.present-verdict { margin: var(--s2) 0 0; font-size: .7em; color: var(--ink-soft); }
.present-card--off .present-verdict { color: var(--ochre); font-weight: 600; }
.present-card--hit .present-verdict { color: var(--tick); font-weight: 600; }
.present-status { align-self: center; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.present-solution h3 { margin-top: 0; }

/* ---------- agenda omówienia ---------- */
.agenda { margin-top: var(--s3); }
.agenda-empty { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.agenda-list { list-style: none; margin: var(--s3) 0 0; padding: 0; border: 1px solid var(--rule);
  border-radius: var(--radius-panel); overflow: hidden; }
.agenda .agenda-item { display: flex; grid-template-columns: none; border: 0; align-items: stretch; border-top: 1px solid var(--rule); }
.agenda-item:first-child { border-top: 0; }
.agenda-item.is-done .agenda-label { text-decoration: line-through; color: var(--rule-strong); }
.agenda-tick { width: 2.4em; flex: none; border: 0; border-right: 1px solid var(--rule); background: var(--surface);
  cursor: pointer; font-size: 1rem; color: var(--tick); }
.agenda-tick:hover { background: var(--tick-bg); }
.agenda-go { flex: 1; display: flex; gap: var(--s3); align-items: baseline; text-align: left; border: 0;
  background: var(--surface); cursor: pointer; padding: var(--s2) var(--s3); font: inherit; color: var(--ink); }
.agenda-go:hover { background: #eef2f3; }
.agenda-status { flex: none; min-width: 13em; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.agenda-item[data-status="odmiennie"] .agenda-status { color: var(--alert); }
.agenda-item[data-status="roznica"] .agenda-status { color: var(--ochre); }
.cmp-row.is-target { outline: 3px solid var(--ochre); outline-offset: -3px; }

/* ---------- pasek tempa i minutnik ---------- */
#pace { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); }
.tempo, .timer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s2) var(--s3); background: var(--surface); }
.tempo-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.tempo-plan { color: var(--ink-soft); }
.tempo-diff { font-weight: 700; }
.tempo-diff--ok { color: var(--tick); }
.tempo-diff--styk { color: var(--ochre); }
.tempo-diff--za { color: var(--alert); }
.tempo-offset { display: flex; align-items: center; gap: var(--s2); font-size: .85rem; color: var(--ink-soft); }
.tempo-offset input { width: 5em; }
.timer-left { font-weight: 700; color: var(--tick); }
.timer-left.is-soon { color: var(--alert); }
.team-timer { font-weight: 700; color: var(--tick); }
.team-timer.is-soon { color: var(--ochre); }
.team-timer.is-over { color: var(--alert); }
.stage-error { margin: var(--s3) 0 0; padding: var(--s3); border-left: 4px solid var(--alert);
  background: var(--alert-bg, #fbeceb); color: var(--alert); font-size: .9rem; }

.btn--done { background: var(--tick); }
.btn--done:hover { background: var(--tick); }
.ready-msg { margin: var(--s2) 0 0; font-size: .9rem; color: var(--tick); font-weight: 600; }
.ready-msg.is-error { color: var(--alert); }
.group-tools { margin-bottom: var(--s3); }
.group-lock { padding: 0; font-size: .85rem; }
.group-locked { font-size: .8rem; font-weight: 600; color: var(--alert); }

/* ---------- widok rozwiązań ---------- */
.sol-view { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: flex; flex-direction: column; }
.sol-view[hidden] { display: none; }
body.has-sol-view { overflow: hidden; }
.sv-head { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s5); background: var(--ink); color: #fff; }
.sv-head h2 { margin: 0; font-size: 1.05rem; color: #fff; }
.sv-actions { display: flex; gap: var(--s2); }
.sv-head .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.sv-head .btn--ghost:hover { background: rgba(255,255,255,.12); }
.sv-body { flex: 1; overflow: auto; padding: var(--s5); }
.sv-scroll { overflow-x: auto; }
.sv-table { width: 100%; }
.sv-table th[scope="row"] { text-align: left; font-weight: 500; }
.sv-table .sv-section th { background: var(--ink); color: #fff; text-align: left; }
.sv-sol { background: var(--tick-bg); }
.sv-hit { border-left: 3px solid var(--tick); }
.sv-off { border-left: 3px solid var(--ochre); background: var(--ochre-bg); }
.sv-empty { color: var(--rule-strong); }
.sv-status { font-size: .85em; font-weight: 600; white-space: nowrap; }
.sv-group { margin-bottom: var(--s6); }
.sv-group h3 { margin: 0 0 var(--s3); }
.sv-body .summary { margin-top: var(--s6); }

/* Widok zbiorczy przy większej liczbie zespołów: przewijanie w poziomie
   z przyklejoną kolumną dyspozycji i wierszem nagłówka. */
.sv-scroll { max-height: calc(100vh - 12rem); overflow: auto; }
.sv-table { min-width: 100%; }
.sv-table th[scope="row"] { position: sticky; left: 0; z-index: 2; background: var(--surface, #fff);
  min-width: 18ch; max-width: 34ch; border-right: 2px solid var(--rule-strong); }
.sv-table .sv-section th { z-index: 3; }
.sv-table .sv-section th span { position: sticky; left: var(--s2); display: inline-block; }
.sv-table thead th { position: sticky; top: 0; z-index: 4; background: #e8edef; }
.sv-table thead th:first-child { left: 0; z-index: 5; }
.sv-table td { min-width: 12ch; }
.sv-table th[scope="col"] { min-width: 12ch; white-space: normal; }
.sv-table .sv-status { min-width: 14ch; }
.sv-group .sv-table th[scope="row"] { min-width: 20ch; }

/* =====================================================================
   DODATKI — szkolenie „Zapasy” (MS Teams, ekran dzielony, 2–6 zespołów)
   ===================================================================== */
.wrap--wide { max-width: 1600px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- strona zespołu --- */
.teambar-in { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; padding-top: var(--s2); padding-bottom: var(--s2); }
.team-name { font-size: 1.1rem; }
.save-state.is-ok { color: var(--tick); font-weight: 600; }
.save-state.is-queued { color: var(--red); font-weight: 600; }
.team-timer { font-weight: 700; font-size: 1.15rem; padding: 2px var(--s3); border: 2px solid var(--ink); border-radius: var(--radius-control); font-variant-numeric: tabular-nums; }
.team-timer.is-soon { border-color: var(--ochre); background: var(--ochre-bg); }
.team-timer.is-over { border-color: var(--red); background: var(--red-bg); }
.block-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.block-tab { font: inherit; padding: var(--s2) var(--s3); border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--radius-control); cursor: pointer; color: var(--ink); }
.block-tab.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.block-title { margin-top: var(--s3); }
.block-sub { color: var(--ink-soft); }
.task { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s4) var(--s5); margin: 0 0 var(--s5); }
.task-intro { border-left: 4px solid var(--rule-strong); padding-left: var(--s4); margin-bottom: var(--s4); }
.sample { background: var(--blue-bg); border: 2px dashed var(--blue); border-radius: var(--radius-panel); padding: var(--s4) var(--s5); margin: 0 0 var(--s5); }
.sample h3 { color: var(--blue); }
.sample-list { margin: 0 0 var(--s3); }
.field-label { font-weight: 600; margin-bottom: var(--s2); max-width: 90ch; }
.choices--pool .choice { padding: var(--s1) 0; }
.cat-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: .9rem; color: var(--ink-soft); margin: 0 0 var(--s2); max-width: none; }
/* Przypisania mają się mieścić w oknie bez przewijania w bok: kolumna treści elastyczna,
   kolumny wyboru wąskie, nagłówki łamane i mniejszą czcionką (27.10 — blok C wychodził poza okno). */
table.grid--assign { width: 100%; min-width: 0; table-layout: auto; }
.grid--assign th.row-head { font-weight: 400; min-width: 12em; text-align: left; }
.grid--assign td.col-cat, .grid--assign th.col-cat { text-align: center; width: 1%; min-width: 4.5em; padding-left: var(--s1); padding-right: var(--s1); }
.grid--assign th.col-cat { font-size: .82em; line-height: 1.2; hyphens: manual; overflow-wrap: normal; word-break: normal; vertical-align: bottom; min-width: 5.8em; }
@media (max-width: 760px) { table.grid--assign { min-width: 640px; } }
.cat-hit { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: var(--s1); }
.cat-hit input { width: 1.25rem; height: 1.25rem; }
.cat-name { font-size: .78rem; color: var(--ink-soft); }
.grid--assign tr.is-filled th.row-head { background: #f6faf8; }
.grid--assign .section-row th { background: #e8edef; text-align: left; font-weight: 700; }
.concl textarea { width: 100%; font: inherit; padding: var(--s2); border: 1px solid var(--rule-strong); border-radius: var(--radius-control); }
.concl-prompts { margin: 0 0 var(--s2); }
.concl-lead { margin-bottom: var(--s1); }
.char-count { display: block; text-align: right; font-size: .9rem; color: var(--ink-soft); }
.char-count.is-full { color: var(--red); font-weight: 600; }
.concl-warn { color: var(--red); font-weight: 700; margin-top: var(--s2); }
.task--concl { border: 2px solid var(--ink); }
.ready-confirm { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s2); padding: var(--s3); background: var(--ochre-bg); border-radius: var(--radius-control); }
.ready-msg.is-error { color: var(--red); font-weight: 600; }
/* Kafelki w prawym dolnym rogu; dolny margines strony > wysokość kafelków, żeby nic nie było zasłonięte. */
body.team main.wrap { padding-bottom: 12rem; }
/* Prawy pas na kafelki: treść nigdy nie wchodzi pod kafelki, także na laptopie 1366 px (decyzja z 25.10). */
body.team .wrap { padding-right: calc(14rem + var(--s5)); }
body.team .float-tiles { width: 13rem; }
@media (max-width: 1100px) and (min-width: 761px) { body.team .wrap { padding-right: calc(9.5rem + var(--s4)); } body.team .float-tiles { width: 9rem; } body.team .float-tiles .tile { font-size: .85em; } }
@media (max-width: 760px) { body.team .wrap { padding-right: var(--s4); } }
.float-tiles { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 25; display: flex; flex-direction: column; gap: var(--s2); align-items: stretch; width: 12rem; }
.tile { font: inherit; text-align: left; cursor: pointer; background: var(--ink); color: #fff; border: 0; border-radius: var(--radius-panel); padding: var(--s2) var(--s4); box-shadow: 0 2px 8px rgba(0,0,0,.25); display: flex; flex-direction: column; }
.tile--case { background: var(--blue); }
.tile-title { font-weight: 700; }
.tile-sub { font-size: .8rem; color: #dfe6ec; }
.drawer-tab { cursor: pointer; font: inherit; }
.drawer-tab.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.mat .facts { list-style: none; padding-left: 0; }
.mat .facts li { padding: 2px 0; }
.mat-src { color: var(--ink-soft); font-size: .9rem; margin-top: var(--s4); }
.sysmap { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-weight: 700; max-width: none; }
.sysmap span { border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 2px var(--s3); background: var(--surface); }

/* --- panel prowadzącego --- */
.admin-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.admin-tab { font: inherit; padding: var(--s2) var(--s3); border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--radius-control); cursor: pointer; display: flex; flex-direction: column; color: var(--ink); }
.admin-tab .tab-state { font-size: .8rem; color: var(--ink-soft); }
.admin-tab.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.admin-tab.is-current .tab-state { color: #dfe6ec; }
.controls { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: 0 0 var(--s3); }
.btn--primary { background: var(--tick); border-color: var(--tick); color: #fff; }
.controls-state { font-weight: 600; color: var(--ink-soft); }
.op-error { flex-basis: 100%; }
.stage-error { color: var(--red); font-weight: 600; max-width: none; }
pre.sql { background: #1c2b39; color: #fff; padding: var(--s3); border-radius: var(--radius-control); white-space: pre-wrap; }
.pace { display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0 0 var(--s4); }
.tempo, .timer { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-control); padding: var(--s2) var(--s3); }
.tempo-label { font-weight: 700; }
.tempo-diff--za { color: var(--red); font-weight: 700; }
.tempo-diff--styk { color: var(--ochre); font-weight: 700; }
.tempo-offset input { width: 4.5em; }
.timer-left { font-weight: 700; font-size: 1.1rem; }
.timer-left.is-soon { color: var(--ochre); }
.group-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s3); }
.group-card { background: var(--surface); border: 2px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s3); display: flex; flex-direction: column; gap: 4px; }
.group-card.is-idle { border-color: var(--red); background: var(--red-bg); }
.group-idle { color: var(--red); font-weight: 700; }
.group-bar { height: 10px; background: #e8edef; border-radius: 5px; overflow: hidden; }
.group-bar span { display: block; height: 100%; background: var(--tick); }
.group-locked { color: var(--blue); font-weight: 600; }
.cmp-tools { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; background: var(--paper); padding: var(--s2) 0; border-bottom: 2px solid var(--ink); margin: var(--s4) 0; font-size: 16px; }
.cmp-tools .btn { font-size: 16px; }
.seg { display: inline-flex; gap: 0; }
.btn--seg { border-radius: 0; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); }
.btn--seg.is-current { background: var(--ink); color: #fff; }
.btn--seg + .btn--seg { border-left-width: 0; }
/* Przyciski o zmiennym napisie mają stałą szerokość — sąsiednie nie przesuwają się po kliknięciu (zakaz 2). */
#reveal-btn { min-width: 12em; } #pause-btn { min-width: 15em; } #full-btn { min-width: 12em; }
.btn--fs { min-width: 3em; }
#pause-btn.is-paused { background: var(--ochre-bg); border-color: var(--ochre); }
/* Treść omówienia: co najmniej 16 px, skalowana przyciskami A−/A+ (zmienna --fs ≥ 1). */
.cmp, #summary, .cmp-summary, .agenda { font-size: calc(16px * var(--fs, 1.15)); }
.cmp-q { margin: 0 0 var(--s6); }
.cmp-q-title { font-family: var(--sans); font-size: 1.05em; font-weight: 700; }
/* Przy 6 zespołach: przewijanie poziome, przyklejona pierwsza kolumna i nagłówek (zakaz 9). */
.table-scroll--cmp { overflow: auto; max-height: 78vh; }
table.grid--cmp { font-size: 1em; min-width: max-content; }
.grid--cmp th, .grid--cmp td { padding: .45em .6em; border: 1px solid var(--rule-strong); vertical-align: top; min-width: 9em; max-width: 22em; }
.grid--cmp thead th { position: sticky; top: 0; z-index: 3; background: #dfe6ea; }
.grid--cmp .row-head { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 16em; max-width: 26em; text-align: left; font-weight: 600; }
.grid--cmp thead th.row-head { z-index: 4; background: #dfe6ea; }
.grid--cmp .section-row th { position: sticky; left: 0; z-index: 2; background: #e8edef; text-align: left; }
.grid--cmp .col-sol { background: #f2f6f9; min-width: 14em; }
.grid--cmp .cell-empty { color: var(--ink-soft); font-style: italic; }
.grid--cmp tr.st-alert td, .grid--cmp tr.st-alert th.row-head { background: var(--red-bg); }
.grid--cmp tr.st-warn td.col-status { color: var(--ochre); font-weight: 700; }
.grid--cmp tr.st-alert td.col-status { color: var(--red); font-weight: 700; }
.grid--cmp tr.is-target { outline: 3px solid var(--focus); outline-offset: -3px; }
.verdict { font-weight: 700; }
.v-ok .verdict, .v-wariant .verdict { color: var(--tick); }
.v-bad .verdict { color: var(--red); }
.v-niepelne .verdict { color: var(--ochre); }
.hidden-sol { color: var(--ink-soft); }
.own { font-size: .85em; color: var(--ochre); font-weight: 600; }
.why-list, .q-note, .q-hint { max-width: 100ch; }
.concl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18em, 1fr)); gap: var(--s4); }
.concl-card { background: var(--surface); border: 2px solid var(--rule-strong); border-radius: var(--radius-panel); padding: var(--s3) var(--s4); }
.concl-card h4 { margin: 0 0 var(--s2); font-size: 1em; }
.concl-card p { font-size: 1.1em; margin: 0; }
.concl-card--sol { border-color: var(--tick); background: var(--tick-bg); }
.summary { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-panel); padding: var(--s4) var(--s5); margin: var(--s5) 0; }
.summary h3 { font-family: var(--sans); font-size: 1em; margin-top: var(--s4); }
.summary .src { color: var(--ink-soft); font-size: .85em; }
.agenda-list { list-style: none; padding: 0; margin: var(--s2) 0 0; }
.agenda .agenda-item { display: flex; grid-template-columns: none; border: 0; gap: var(--s2); align-items: flex-start; padding: 2px 0; }
.agenda-tick { width: 1.8em; height: 1.8em; border: 2px solid var(--ink); background: var(--surface); cursor: pointer; font-weight: 700; }
.agenda-go { font: inherit; text-align: left; background: none; border: 0; cursor: pointer; color: var(--ink); }
.agenda-item.is-done .agenda-go { text-decoration: line-through; color: var(--ink-soft); }
.agenda-item[data-status="odmiennie"] .agenda-status { color: var(--red); font-weight: 700; }
.exports { display: flex; gap: var(--s3); margin: var(--s5) 0; }
.link-row { display: grid; grid-template-columns: 8em 1fr auto auto; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.link-row .qr { grid-column: 1 / -1; max-width: 12rem; }
/* Pełny ekran omówienia: znika wszystko poza paskiem omówienia, porównaniem i podsumowaniem. */
body.is-full .masthead, body.is-full #session, body.is-full .admin-tabs, body.is-full #controls-box,
body.is-full .pace, body.is-full .progress-board, body.is-full .exports, body.is-full #block-title { display: none; }
body.is-full .wrap--wide { max-width: none; padding-top: var(--s2); }
@media (max-width: 900px) { .link-row { grid-template-columns: 1fr; } }
.tile--carry { background: var(--tick); }
/* --- test --- */
.tq { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.tq legend { font-weight: 700; padding: 0 var(--s2); }
.tq-text { font-weight: 600; max-width: 90ch; }
.tq-opt { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s1) 0; }
.tq-letter { font-weight: 700; min-width: 1.5em; }
.tq--res.is-ok { border-left: 6px solid var(--tick); }
.tq--res.is-bad { border-left: 6px solid var(--red); }
#ini { font-size: 1.4rem; width: 8em; text-transform: uppercase; margin-right: var(--s2); }
.test-summary { font-size: calc(16px * var(--fs, 1.15)); margin: var(--s3) 0; }
.dist { display: grid; gap: var(--s2); max-width: 70em; }
.dist-row { display: grid; grid-template-columns: minmax(12em, 2fr) minmax(6em, 1fr) 7em; gap: var(--s3); align-items: center; }
.dist-bar { height: 1em; background: #e8edef; border-radius: 3px; overflow: hidden; }
.dist-bar span { display: block; height: 100%; background: var(--ink-soft); }
.dist-row.is-key .dist-bar span { background: var(--tick); }
.dist-row.is-key .dist-label { color: var(--tick); }
.dist--big { font-size: 1.15em; }
.one-q-text { font-size: 1.2em; font-weight: 600; max-width: 70ch; }
.one-q-nav { display: flex; gap: var(--s3); align-items: center; }
/* --- quiz na start: strona uczestnika (duże przyciski — klika się jednym ruchem, także na telefonie) --- */
.qz-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s4) var(--s5); margin: 0 0 var(--s4); }
.qz-card h2 { font-family: var(--sans); font-size: 1.15rem; }
.qz-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s2); }
.qz-opt { font: inherit; text-align: left; padding: var(--s3) var(--s4); border: 2px solid var(--rule-strong); background: var(--surface); border-radius: var(--radius-panel); cursor: pointer; color: var(--ink); }
.qz-opt.is-on { border-color: var(--blue); background: var(--blue-bg); font-weight: 700; }
.qz-opt.is-on::before { content: "✓ "; }
.qz-msg { display: block; color: var(--tick); font-size: .9rem; min-height: 1.2em; margin-top: var(--s1); }
.qz-done { font-size: 1.2rem; font-weight: 700; color: var(--tick); }
/* --- quiz na start: wykresy w panelu (na ekran dzielony Teams: duże, kontrastowe, z liczbami i słowami) --- */
.qz-board { display: grid; gap: var(--s5); font-size: calc(16px * var(--fs, 1.15)); }
.qz-count { font-size: 2.2em; font-weight: 700; }
.qz-count small { font-size: .45em; font-weight: 400; color: var(--ink-soft); }
.qz-q { background: var(--surface); border: 2px solid var(--rule); border-radius: var(--radius-panel); padding: var(--s4) var(--s5); }
.qz-q h3 { font-family: var(--sans); font-size: 1.15em; margin-bottom: var(--s3); }
.qz-bar { display: grid; grid-template-columns: minmax(10em, 16em) 1fr 5.5em; gap: var(--s3); align-items: center; margin: 0 0 var(--s2); }
.qz-track { height: 1.6em; background: #e8edef; border-radius: 4px; overflow: hidden; }
.qz-fill { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .8s ease; }
.qz-pct { font-weight: 700; font-size: 1.1em; text-align: right; }
.qz-top .qz-label { font-weight: 700; }
.qz-teaser { margin-top: var(--s3); font-weight: 600; color: var(--blue); max-width: none; }
.qz-c0 { background: #1d4e89; } .qz-c1 { background: #1f6f5c; } .qz-c2 { background: #9a6412; } .qz-c3 { background: #6b3f87; } .qz-c4 { background: #a8261d; }

/* Rozwiązanie ilustracyjne: odpowiedź → uzasadnienie → źródło */
.sol-v { display: block; font-weight: 700; }
.sol-v--yes { color: #1d5e45; }
.sol-v--no { color: #9b2c1f; }
.sol-why { display: block; margin-top: .25em; }
.sol-src { display: block; margin-top: .25em; font-size: .85em; color: var(--ink-soft); }

/* Wyczyść odpowiedzi — dyskretnie, pod akcjami; potwierdzenie w samej stronie */
.clear-box { margin: var(--s4) 0 var(--s6); }
.clear-btn { color: var(--ink-soft); }
.clear-confirm { background: #fbe4e1; }
.btn--danger { background: #9b2c1f; border-color: #9b2c1f; color: #fff; }
.clear-msg:empty { display: none; }
.ready-confirm[hidden], .clear-confirm[hidden] { display: none; }
@media (max-width: 1100px) { .grid--assign th.row-head { min-width: 9em; } .grid--assign td.col-cat, .grid--assign th.col-cat { min-width: 4em; } }
.row-hint { display: block; margin-top: .2em; font-size: .88em; color: var(--ink-soft); }