/* ===================================================================
   Twój Cień — aplikacja
   Motyw wspólny ze stroną: atrament, kość, mosiądz.
   Kroje pisma pobierane z /fonts.css w katalogu głównym serwisu.
   =================================================================== */

:root{
  --ink:      #14121B;
  --ink-2:    #1C1926;
  --ink-3:    #241F31;
  --ink-4:    #0F0D15;
  --hair:     #322C42;

  --bone:     #EDE8E0;
  --bone-2:   #B6AFAA;
  --bone-3:   #877F7C;

  --brass:    #C89A4A;
  --brass-lo: #8A6A31;
  --ember:    #B4553C;
  --amber:    #C9903F;
  --sage:     #6E8F6B;

  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  --wrap: 42rem;
  --pad:  1.25rem;
}

*{ box-sizing: border-box; }

/* Atrybut `hidden` musi wygrywać z regułami układu. Bez tego `.gate{display:grid}`
   przebija domyślne `[hidden]{display:none}` przeglądarki i bramka zostaje
   widoczna nad działającą aplikacją. */
[hidden]{ display:none !important; }

html{
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  /* bez gumowego odbicia na iOS, żeby aplikacja nie zdradzała przeglądarki */
  overscroll-behavior-y: none;
}
body{
  margin:0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

h1,h2,h3{
  font-family: var(--serif); font-weight:600; line-height:1.15;
  letter-spacing:-.015em; margin:0; text-wrap: balance;
}
h1{ font-size: clamp(1.6rem, 5vw, 2.1rem); }
h2{ font-size: 1.3rem; }
h3{ font-size: 1.05rem; }
p{ margin:0; }
a{ color: var(--brass); }
button{ font: inherit; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:3px; }

.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }
.stack{ display:flex; flex-direction:column; }
.gap-s{ gap:.6rem } .gap-m{ gap:1.1rem } .gap-l{ gap:1.8rem }
.eyebrow{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--brass); margin:0;
}
.muted{ color: var(--bone-2); }
.note{ font-size:.85rem; color: var(--bone-3); line-height:1.55; }
.center{ text-align:center; }

/* ---------- pasek górny ---------- */
.topbar{
  position: sticky; top:0; z-index:30;
  background: rgba(20,18,27,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--hair);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner{
  display:flex; align-items:center; gap:.75rem;
  max-width: var(--wrap); margin-inline:auto; padding:.7rem var(--pad);
}
.topbar .back{
  background:none; border:1px solid var(--hair); color: var(--bone-2);
  width:2rem; height:2rem; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; flex-shrink:0; line-height:1;
}
.topbar .back:hover{ border-color: var(--bone-3); color: var(--bone); }
.topbar .title{
  font-family: var(--serif); font-size:1rem; font-weight:600;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar .saved{
  font-family: var(--mono); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--sage); opacity:0; transition: opacity .2s;
}
.topbar .saved.on{ opacity:1; }

main{ padding-block: 1.5rem 2rem; }

/* ---------- kafelki na ekranie głównym ---------- */
.sheet-list{ display:flex; flex-direction:column; gap:.6rem; }
.sheet-row{
  display:flex; align-items:center; gap:.9rem; width:100%; text-align:left;
  background: var(--ink-2); border:1px solid var(--hair); border-radius:5px;
  padding:.9rem 1rem; color:inherit; cursor:pointer;
  transition: border-color .15s, transform .15s;
}
.sheet-row:hover{ border-color: var(--brass-lo); transform: translateY(-1px); }
.sheet-row[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.sheet-row .idx{
  font-family: var(--mono); font-size:.7rem; color: var(--bone-3);
  width:1.5rem; flex-shrink:0;
}
.sheet-row .txt{ flex:1; min-width:0; }
.sheet-row .txt b{ display:block; font-size:.98rem; font-weight:600; }
.sheet-row .txt span{ display:block; font-size:.82rem; color: var(--bone-3); margin-top:.1rem; }
.state{
  font-family: var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .45rem; border-radius:3px; white-space:nowrap; flex-shrink:0;
}
.state.todo{ color: var(--bone-3); border:1px solid var(--hair); }
.state.part{ color: var(--amber); border:1px solid var(--amber); }
.state.done{ color: var(--sage); border:1px solid var(--sage); }

/* checklisty filarów — pasek postępu i wiersze odhaczone przez samą aplikację */
.pasek{
  height:4px; background: var(--hair); border-radius:2px; overflow:hidden; margin-top:.5rem;
}
.pasek > i{ display:block; height:100%; background: var(--brass); transition: width .2s; }
.pasek.pelny > i{ background: var(--sage); }
.licznik{
  font-family: var(--mono); font-size:.72rem; letter-spacing:.06em;
  color: var(--bone-3); text-transform:uppercase;
}
/* Pozycja potwierdzona danymi z arkuszy — nie jest polem do kliknięcia,
   bo aplikacja już zna odpowiedź. Prowadzi do arkusza, który ją spełnił. */
.check-row.auto .box{ background: var(--sage); border-color: var(--sage); color:#0E1410; }
.check-row.auto .lbl{ color: var(--bone); }
.check-row .skad{
  display:block; font-family: var(--mono); font-size:.68rem; letter-spacing:.05em;
  color: var(--sage); text-transform:uppercase; margin-top:.2rem;
}
.check-row .brak{
  display:block; font-size:.78rem; color: var(--bone-3); margin-top:.2rem;
}

.group-label{
  font-family: var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--bone-3);
  margin:1.6rem 0 .6rem; padding-bottom:.4rem; border-bottom:1px solid var(--hair);
}
.group-label:first-of-type{ margin-top:0; }

/* ---------- formularze ---------- */
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field > label, .field-label{
  font-size:.88rem; color: var(--bone-2); line-height:1.45;
}
input[type=text], input[type=date], input[type=number], textarea, select{
  width:100%; background: var(--ink-4); color: var(--bone);
  border:1px solid var(--hair); border-radius:4px;
  padding:.65rem .7rem; font-family: var(--sans); font-size:1rem;
}
textarea{ min-height:7rem; resize:vertical; line-height:1.55; }
input:focus, textarea:focus, select:focus{ border-color: var(--brass-lo); }
::placeholder{ color:#5C5566; }

/* przyciski TAK/NIE */
.yesno{ display:flex; gap:.45rem; flex-shrink:0; }
.yesno button{
  font-family: var(--mono); font-size:.75rem; letter-spacing:.06em;
  background:transparent; color: var(--bone-2);
  border:1px solid var(--hair); border-radius:3px;
  padding:.45rem .75rem; cursor:pointer; min-width:3.1rem;
  transition: all .12s;
}
.yesno button:hover{ border-color: var(--bone-3); color: var(--bone); }
.yesno button[aria-pressed="true"]{
  background: var(--brass); border-color: var(--brass); color:#17130B; font-weight:600;
}

.q-row{
  display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  padding:1rem 0; border-top:1px solid var(--hair);
}
.q-row:first-of-type{ border-top:0; }
.q-row .q-num{
  font-family: var(--mono); font-size:.7rem; color: var(--bone-3);
  flex-shrink:0; width:1.3rem; padding-top:.15rem;
}
.q-row p{ font-size:.95rem; color: var(--bone-2); flex:1; }

/* ---------- pola wyboru i zobowiązania ---------- */
.check-row{
  display:flex; align-items:flex-start; gap:.75rem; width:100%; text-align:left;
  background:transparent; border:none; color:inherit; cursor:pointer;
  padding:.6rem 0; border-top:1px solid var(--hair); font-size:.93rem; line-height:1.5;
}
.check-row:first-of-type{ border-top:0; }
.check-row .box{
  width:1.15rem; height:1.15rem; flex-shrink:0; margin-top:.15rem;
  border:1px solid var(--bone-3); border-radius:3px;
  display:grid; place-items:center; font-size:.8rem; line-height:1;
  color:transparent; transition: all .12s;
}
.check-row[aria-pressed="true"] .box{
  background: var(--brass); border-color: var(--brass); color:#17130B;
}
.check-row[aria-pressed="true"] .lbl{ color: var(--bone); }
.check-row .lbl{ color: var(--bone-2); }
.check-row:hover .box{ border-color: var(--brass); }
/* Wyczerpany limit wyboru — wiersz zostaje widoczny, ale wyraźnie nieaktywny.
   Ukrycie go rozsypałoby listę siedmiu błędów, która ma być czytana w całości. */
.check-row[disabled]{ opacity:.4; cursor:not-allowed; }
.check-row[disabled]:hover .box{ border-color: var(--bone-3); }

/* sekcje arkusza */
.sec{ margin-top:2.2rem; }
.sec > h2{
  font-size:1.1rem; padding-bottom:.5rem; margin-bottom:1rem;
  border-bottom:1px solid var(--hair);
}
.sec > h2 .sec-id{
  font-family: var(--mono); font-size:.72rem; color: var(--brass);
  letter-spacing:.1em; margin-right:.5rem;
}
.prefill{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background: var(--ink-2); border:1px solid var(--hair); border-radius:4px;
  padding:.8rem 1rem;
}
.prefill .lbl{ font-size:.85rem; color: var(--bone-3); }
.prefill .val{ font-family: var(--mono); font-size:1rem; color: var(--bone); }

/* ---------- strefy ---------- */
.zone{
  border:1px solid var(--hair); border-left:3px solid var(--hair);
  border-radius:0 5px 5px 0; padding:1.1rem 1.1rem 1rem; margin-bottom:1.1rem;
}
.zone.z-green{ border-left-color: var(--sage); }
.zone.z-amber{ border-left-color: var(--amber); }
.zone.z-red{   border-left-color: var(--ember); }
.zone-head{ margin-bottom:.9rem; }
.zone-head .z-tag{
  font-family: var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
}
.z-green .z-tag{ color: var(--sage); }
.z-amber .z-tag{ color: var(--amber); }
.z-red   .z-tag{ color: var(--ember); }
.zone-head h3{ font-family: var(--sans); font-size:1rem; font-weight:600; letter-spacing:0; margin:.2rem 0 .35rem; }
.zone-head .z-rules{ font-size:.84rem; color: var(--bone-3); line-height:1.5; }

.topic{
  background: var(--ink-4); border:1px solid var(--hair); border-radius:4px;
  padding:.85rem .9rem; margin-bottom:.7rem;
}
.topic-bar{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin-bottom:.55rem;
}
.topic-bar .t-no{
  font-family: var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--bone-3);
}
.topic-acts{ display:flex; gap:.35rem; align-items:center; }
.mini{
  font-family: var(--mono); font-size:.66rem; letter-spacing:.05em;
  background:transparent; color: var(--bone-3);
  border:1px solid var(--hair); border-radius:3px;
  padding:.25rem .45rem; cursor:pointer;
}
.mini:hover{ color: var(--bone); border-color: var(--bone-3); }
.mini.danger:hover{ color: var(--ember); border-color: var(--ember); }
.topic textarea{ min-height:3.2rem; }
.topic .sub-label{ font-size:.78rem; color: var(--bone-3); margin:.5rem 0 .25rem; display:block; }

.zone-add{
  width:100%; background:transparent; color: var(--bone-3);
  border:1px dashed var(--hair); border-radius:4px;
  padding:.6rem; cursor:pointer; font-size:.85rem;
}
.zone-add:hover{ color: var(--bone); border-color: var(--bone-3); }

/* wybór jednej z kilku opcji */
.choice{ display:flex; flex-direction:column; }
.choice .check-row[aria-pressed="true"] .box{ border-radius:50%; }
.choice .check-row .box{ border-radius:50%; }

/* ---------- skala 1–10 ---------- */
.scale{ display:flex; gap:.25rem; }
.scale button{
  flex:1; min-width:0; aspect-ratio:1; max-width:2.4rem;
  font-family: var(--mono); font-size:.78rem;
  background:transparent; color: var(--bone-3);
  border:1px solid var(--hair); border-radius:3px; cursor:pointer;
  padding:0; display:grid; place-items:center;
}
.scale button:hover{ border-color: var(--bone-3); color: var(--bone); }
.scale button[aria-pressed="true"]{
  background: var(--brass); border-color: var(--brass); color:#17130B; font-weight:600;
}
.scale-ends{
  display:flex; justify-content:space-between;
  font-size:.72rem; color: var(--bone-3); margin-top:.3rem;
}

/* ---------- lista sesji ---------- */
.sess-row{
  display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  background: var(--ink-2); border:1px solid var(--hair); border-radius:5px;
  padding:.8rem .9rem; color:inherit; cursor:pointer; margin-bottom:.6rem;
}
.sess-row:hover{ border-color: var(--brass-lo); }
.sess-row .nr{
  font-family: var(--mono); font-size:.75rem; color:#17130B; background: var(--brass);
  width:1.8rem; height:1.8rem; border-radius:50%; display:grid; place-items:center;
  flex-shrink:0; font-weight:600;
}
.sess-row .nr.open{ background: var(--hair); color: var(--bone-2); }
.sess-row .info{ flex:1; min-width:0; }
.sess-row .info b{ display:block; font-size:.93rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sess-row .info span{ display:block; font-size:.78rem; color: var(--bone-3); }
.sess-row .delta{ font-family: var(--mono); font-size:.8rem; white-space:nowrap; }
.delta.up{ color: var(--sage); } .delta.down{ color: var(--ember); } .delta.flat{ color: var(--bone-3); }

/* ---------- krok sesji ---------- */
.step-head{
  display:flex; align-items:baseline; gap:.6rem;
  padding-bottom:.5rem; margin-bottom:.9rem; border-bottom:1px solid var(--hair);
}
.step-head .n{
  font-family: var(--mono); font-size:.72rem; color:#17130B; background: var(--brass);
  min-width:1.4rem; height:1.4rem; border-radius:3px; display:grid; place-items:center; font-weight:600;
}
.step-head h3{ font-family: var(--sans); font-size:1rem; font-weight:600; letter-spacing:0; flex:1; }
.czas, .step-head .czas{ font-family: var(--mono); font-size:.7rem; color: var(--bone-3); }
.step{ margin-bottom:2rem; }

/* minutnik */
.timer{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background: var(--ink-4); border:1px solid var(--hair); border-radius:4px;
  padding:.7rem .9rem; margin-bottom:.7rem;
}
.timer .t{ font-family: var(--mono); font-size:1.5rem; font-variant-numeric: tabular-nums; }
.timer .t.koniec{ color: var(--sage); }
.timer .lim{ font-size:.78rem; color: var(--bone-3); }

/* ---------- dni planu ---------- */
.day{
  border:1px solid var(--hair); border-left:3px solid var(--hair);
  border-radius:0 5px 5px 0; padding:1rem 1rem .9rem; margin-bottom:.9rem;
}
.day.sesja{ border-left-color: var(--brass); }
.day.przerwa{ border-left-color: var(--slate, #4E5666); background: var(--ink-4); }
.day.zrobiony{ border-left-color: var(--sage); }
.day-head{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.55rem; }
.day-head .d-nr{
  font-family: var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--bone-3); white-space:nowrap;
}
.day-head .d-typ{
  font-family: var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.15rem .4rem; border-radius:3px; border:1px solid; white-space:nowrap;
}
.d-typ.s{ color: var(--brass); border-color: var(--brass-lo); }
.d-typ.p{ color: var(--bone-3); border-color: var(--hair); }
.day-head h3{ font-family: var(--sans); font-size:.98rem; font-weight:600; letter-spacing:0; flex:1; }
.day .pytanie{
  font-size:.9rem; color: var(--bone-2); font-style:italic;
  border-left:2px solid var(--hair); padding-left:.7rem; margin:.5rem 0 .6rem;
}
.day .wskazowka{ font-size:.82rem; color: var(--bone-3); margin-bottom:.7rem; }
.day-pola{ display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:flex-end; margin-bottom:.7rem; }
.day-pola .mini-field{ flex:1; min-width:7rem; }
.day-pola .mini-field label{ display:block; font-size:.75rem; color: var(--bone-3); margin-bottom:.25rem; }
.day-pola input{ padding:.45rem .55rem; font-size:.9rem; }

.pasek{ display:flex; gap:.25rem; margin:1rem 0 1.4rem; }
.pasek span{ flex:1; height:5px; border-radius:3px; background: var(--hair); }
.pasek span.ok{ background: var(--sage); }
.pasek span.sesja{ background: var(--brass-lo); }

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: var(--brass); color:#17130B; font-weight:600; font-size:1rem;
  border:1px solid var(--brass); border-radius:4px;
  padding:.8rem 1.1rem; cursor:pointer; text-decoration:none;
}
.btn:hover{ background:#D9AC5E; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn.ghost{ background:transparent; color: var(--bone-2); border-color: var(--hair); }
.btn.ghost:hover{ background: var(--ink-2); color: var(--bone); }
.btn.wide{ width:100%; }

/* ---------- komunikaty ---------- */
.callout{
  background: var(--ink-2); border:1px solid var(--hair);
  border-left:3px solid var(--brass); border-radius:0 4px 4px 0;
  padding:1rem 1.1rem;
}
.callout.danger{ border-left-color: var(--ember); background: rgba(180,85,60,.07); }
.callout.good{ border-left-color: var(--sage); background: rgba(110,143,107,.06); }
.callout .ch{
  font-family: var(--mono); font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--brass); display:block; margin-bottom:.45rem;
}
.callout.danger .ch{ color: var(--ember); }
.callout.good .ch{ color: var(--sage); }
.callout p{ font-size:.92rem; color: var(--bone-2); }
.callout p + p{ margin-top:.6rem; }

/* ---------- wynik testu ---------- */
.score{
  display:flex; align-items:baseline; justify-content:center; gap:.5rem;
  padding:1.5rem 0 .5rem;
}
.score .big{ font-family: var(--serif); font-size:3.4rem; font-weight:600; line-height:1; }
.score .max{ font-family: var(--serif); font-size:1.3rem; color: var(--bone-3); }
.path-badge{
  display:inline-block; font-family: var(--mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:3px; border:1px solid;
}
.path-a{ color: var(--sage);  border-color: var(--sage); }
.path-b{ color: var(--amber); border-color: var(--amber); }
.path-c{ color: var(--ember); border-color: var(--ember); }

/* ---------- przycisk awaryjny ---------- */
.sos{
  position:fixed; right:1rem; z-index:40;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  background: var(--ember); color:#fff; border:none;
  border-radius:2rem; padding:.7rem 1.1rem; cursor:pointer;
  font-family: var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.sos:hover{ background:#C66049; }

/* ---------- bramka ---------- */
.gate{
  min-height:100dvh; display:grid; place-items:center; padding: var(--pad);
}
.gate-box{ width:100%; max-width:22rem; text-align:center; }
.gate-box .mark{
  font-family: var(--serif); font-size:1.8rem; font-weight:600; margin-bottom:.4rem;
}
.gate-err{ color: var(--ember); font-size:.85rem; min-height:1.2rem; }

/* ---------- kontakty kryzysowe ---------- */
.crisis-list{ display:flex; flex-direction:column; gap:.6rem; }
.crisis-call{
  display:flex; align-items:center; gap:.9rem; text-decoration:none;
  background: var(--ink-2); border:1px solid var(--hair);
  border-left:3px solid var(--ember); border-radius:0 4px 4px 0;
  padding:.9rem 1rem; color:inherit;
}
.crisis-call:hover{ background: var(--ink-3); }
.crisis-call .num{
  font-family: var(--mono); font-size:1.15rem; font-weight:600; color: var(--bone);
  white-space:nowrap;
}
.crisis-call .desc{ font-size:.82rem; color: var(--bone-3); line-height:1.4; }

ol.steps{ padding-left:1.2rem; margin:0; }
ol.steps li{ margin-bottom:.7rem; font-size:.93rem; color: var(--bone-2); }
ol.steps li b{ color: var(--bone); }

@media print{
  .topbar, .sos, .btn, .no-print{ display:none !important; }
  html, body{ background:#fff; color:#000; }
  .callout, .sheet-row, input, textarea{ background:#fff; color:#000; border-color:#999; }
  @page{ size:A4; margin:16mm; }
}

/* ===================================================================
   Mapa Cienia
   =================================================================== */

/* instrukcje i listy zwijane */
details.instr{
  background: var(--ink-2); border:1px solid var(--hair); border-radius:4px;
  padding:.75rem 1rem;
}
details.instr > summary{
  cursor:pointer; font-size:.9rem; color: var(--bone-2); list-style:none;
}
details.instr > summary::-webkit-details-marker{ display:none; }
details.instr > summary::before{ content:'+ '; font-family: var(--mono); color: var(--brass); }
details.instr[open] > summary::before{ content:'– '; }
details.instr[open] > summary{ margin-bottom:.7rem; }
details.instr p{ font-size:.9rem; color: var(--bone-2); }
details.instr p + p{ margin-top:.55rem; }
ul.lista{ margin:.2rem 0 .7rem; padding-left:1.2rem; font-size:.9rem; color: var(--bone-2); }
ul.lista li{ margin-bottom:.35rem; }

/* profil — paski sześciu obszarów, jak na stronie Mapy Cienia */
.profil{
  background: var(--ink-2); border:1px solid var(--hair); border-radius:5px;
  padding:1rem 1.1rem; margin-bottom:.9rem;
}
.prof-row{
  display:block; width:100%; text-align:left; background:transparent; border:0; color:inherit;
  padding:.35rem 0 .5rem; cursor:pointer;
}
.prof-top{ display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; }
.prof-name{ font-size:.88rem; color: var(--bone-2); }
.prof-name b{ font-family: var(--mono); font-size:.7rem; color: var(--bone-3); margin-right:.45rem; font-weight:400; }
.prof-score{ font-family: var(--mono); font-size:.8rem; color: var(--bone); white-space:nowrap; font-variant-numeric: tabular-nums; }
.prof-track{
  display:block; height:7px; margin-top:.3rem; background: var(--ink-4);
  border:1px solid var(--hair); border-radius:4px; overflow:hidden;
}
.prof-fill{ display:block; height:100%; border-radius:3px; transition: width .25s; }
.spiacy{ background: var(--sage); }
.aktywny{ background: var(--amber); }
.goracy{ background: var(--ember); }
.prof-legend{
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.7rem; padding-top:.7rem;
  border-top:1px solid var(--hair); font-family: var(--mono); font-size:.66rem; color: var(--bone-3);
}
.prof-legend span{ display:inline-flex; align-items:center; gap:.35rem; }
.prof-legend i{ width:9px; height:9px; border-radius:2px; display:block; }

.z-badge{
  font-family: var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .45rem; border-radius:3px; white-space:nowrap; flex-shrink:0; color:#14121B;
}

.prof-card{
  border:1px solid var(--hair); border-radius:5px; padding:.85rem 1rem; margin-bottom:.7rem;
}
.prof-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.prof-card-head b{ font-size:.95rem; }
.prof-wynik{ font-family: var(--mono); font-size:.8rem; color: var(--bone-2); white-space:nowrap; }
.prof-card-pola{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.7rem; }
.mini-field{ display:flex; flex-direction:column; gap:.25rem; flex:1 1 9rem; min-width:0; }
.mini-field > span{ font-size:.75rem; color: var(--bone-3); }
.mini-field select, .mini-field input{ padding:.45rem .55rem; font-size:.92rem; }
.data-wyl{ font-family: var(--mono); font-size:.9rem; font-weight:400; padding:.5rem 0; }

/* historia wyników i sygnałów */
.hist-row{
  display:flex; align-items:center; gap:.8rem; padding:.45rem 0;
  border-top:1px solid var(--hair); font-size:.88rem; color: var(--bone-2);
}
.hist-row:first-of-type{ border-top:0; }
.hist-row b{ font-family: var(--mono); font-weight:400; color: var(--bone); white-space:nowrap; }
.hist-row > span:first-child{ flex:1; }
.hist-pasek{ display:block; width:5rem; height:5px; background: var(--hair); border-radius:3px; overflow:hidden; }
.hist-pasek i{ display:block; height:100%; background: var(--sage); }
.mies-nav{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.mies-nav b{ font-size:.95rem; text-align:center; }
.mies-nav .mini[disabled]{ opacity:.35; cursor:not-allowed; }

/* mapa obszaru — diagram czterostronny */
.diagram{
  display:grid; gap:.5rem; margin-top:1.4rem;
  grid-template-columns: 1fr 5.5rem 1fr;
  grid-template-areas: "g g g" "l s p" "d d d";
}
.diag-pole{
  border:1px solid var(--hair); border-radius:4px; padding:.7rem .75rem; background: var(--ink-2);
  font-size:.85rem; color: var(--bone-2); min-width:0; overflow-wrap:anywhere;
}
.diag-pole ul{ margin:0; padding-left:1rem; }
.diag-pole li{ margin-bottom:.25rem; }
.diag-tyt{
  display:block; font-family: var(--mono); font-size:.6rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--brass); margin-bottom:.4rem;
}
.diag-gora{ grid-area:g; } .diag-lewa{ grid-area:l; } .diag-prawa{ grid-area:p; } .diag-dol{ grid-area:d; }
.diag-srodek{
  grid-area:s; display:grid; place-items:center; text-align:center;
  border:1px solid var(--brass-lo); border-radius:50%; aspect-ratio:1; align-self:center;
  font-family: var(--serif); font-size:.72rem; line-height:1.2; padding:.4rem; color: var(--bone);
}
@media (max-width: 30rem){
  .diagram{ grid-template-columns: 1fr 1fr; grid-template-areas: "g g" "s s" "l p" "d d"; }
  .diag-srodek{ border-radius:4px; aspect-ratio:auto; padding:.5rem; }
}

/* dialog z cieniem */
.dialog{ display:flex; flex-direction:column; gap:.6rem; }
.dlg-wpis{ border-left:3px solid var(--hair); padding-left:.75rem; }
.dlg-wpis.ja{ border-left-color: var(--brass); }
.dlg-wpis.on{ border-left-color: var(--bone-3); margin-left:1.2rem; }
.dlg-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.3rem; }
.dlg-kto{ font-family: var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--bone-2); }
.dlg-wpis textarea{ min-height:4.5rem; }
.dlg-dodaj{ display:flex; gap:.6rem; flex-wrap:wrap; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{
  background:transparent; color: var(--bone-2); border:1px solid var(--hair); border-radius:999px;
  padding:.4rem .75rem; font-size:.82rem; text-align:left; cursor:pointer;
}
.chip:hover{ border-color: var(--brass-lo); color: var(--bone); }

/* inwentaryzacja */
.inw{ display:flex; flex-direction:column; gap:.6rem; }
.inw-poz{
  display:flex; flex-direction:column; gap:.45rem;
  border:1px solid var(--hair); border-radius:4px; padding:.65rem .7rem;
}
.inw-poz > .mini{ align-self:flex-end; }
.inw-tagi{ display:flex; flex-wrap:wrap; gap:.35rem; }
.tag{
  font-family: var(--mono); font-size:.75rem; background:transparent; color: var(--bone-2);
  border:1px solid var(--hair); border-radius:3px; padding:.3rem .55rem; cursor:pointer;
}
.tag[aria-pressed="true"]{ background: var(--brass); border-color: var(--brass); color:#17130B; }
.tag.flaga{ align-self:flex-start; }
.tag.flaga[aria-pressed="true"]{ background: var(--ember); border-color: var(--ember); color:#fff; }
.inw-licz{ margin:.2rem 0 0; }

/* mikro-cel */
.mikro-tresc{ font-family: var(--serif); font-size:1.05rem; line-height:1.45; margin-bottom:.7rem; }
.mikro-dzien{
  display:grid; grid-template-columns: auto 1fr; gap:.3rem .7rem; align-items:center;
  padding:.5rem 0; border-top:1px solid var(--hair);
}
.mikro-dzien input{ grid-column: 1 / -1; padding:.45rem .55rem; font-size:.9rem; }
.mikro-dzien.dzis .mikro-nr{ color: var(--brass); }
.mikro-nr{ font-family: var(--mono); font-size:.72rem; color: var(--bone-3); }
.mikro-dzien-box{
  width:1.6rem; height:1.6rem; border:1px solid var(--bone-3); border-radius:4px;
  background:transparent; color:transparent; cursor:pointer; font-size:.9rem;
}
.mikro-dzien-box[aria-pressed="true"]{ background: var(--sage); border-color: var(--sage); color:#0E1410; }

/* sesje audio */
.player audio{ width:100%; margin-bottom:.3rem; }
.pytanie-po{ font-family: var(--serif); font-size:1.05rem; line-height:1.45; }
p.zapis{ white-space:pre-wrap; }

@media print{
  details.instr{ display:none; }
  .diag-pole, .diag-srodek, .prof-card, .profil{ background:#fff; color:#000; border-color:#999; }
  .diag-tyt{ color:#000; }
  .mini, .chip, .tag:not([aria-pressed="true"]), .mies-nav .mini{ display:none; }
}