/* ==========================================================================
   tufte.css — zwarty wariant dla kursu „AI w rekrutacji"
   Estetyka Edwarda Tufte'a: tło #fffff8, tekst #151515, akcent #b0000f.
   Kontrakt markupu opisany w _template.html.
   ========================================================================== */

/* ---------- 1. Reset minimalny ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, pre { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; }

/* ---------- 2. Typografia i kolumna główna ---------- */
html { font-size: 20px; }

body {
  font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  line-height: 1.55;
  background-color: #fffff8;
  color: #151515;
  width: 87.5%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 0 4rem 12.5%;
  counter-reset: sidenote-counter;
}

/* Kolumna główna ~55%: bezpośrednie dzieci artykułu i jego sekcji.
   Prawy margines zostaje wolny dla przypisów bocznych. */
article > *,
article section > * { width: 55%; }
article > section { width: 100%; }

p { margin-top: 1.4rem; padding-right: 0; }
p, ul, ol { hyphens: auto; }
ul, ol { margin-top: 1.4rem; padding-left: 1.6rem; }
li { margin-top: 0.35rem; }

h1 {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.1;
  margin-top: 1.2rem;
}
h2 {
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 3.5rem;
}
h3 {
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  margin-top: 2.5rem;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #b0000f;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: #b0000f; }

strong { font-weight: 700; }
em { font-style: italic; }

code, pre {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78em;
}

blockquote {
  margin-top: 1.4rem;
  padding-left: 1.4rem;
  border-left: 2px solid #151515;
  font-style: italic;
}

hr {
  border: 0;
  border-top: 1px solid #151515;
  margin-top: 3rem;
}

/* Widoczny focus dla klawiatury (dostępność) */
:focus-visible {
  outline: 2px solid #b0000f;
  outline-offset: 2px;
}

::selection { background: #fde3e3; }

/* ---------- 3. Nagłówek modułu ---------- */
.module-header { margin-bottom: 3rem; }

.module-header .eyebrow {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #151515;
}

.module-header .module-number {
  display: block;
  font-size: 5rem;
  line-height: 1;
  font-weight: 400;
  color: #b0000f;
  margin-top: 1.2rem;
  font-variant-numeric: lining-nums;
}

.module-header .subtitle {
  display: block;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  margin-top: 0.8rem;
  color: #333;
}

/* ---------- 4. Przypisy boczne: sidenotes i marginnotes ----------
   Wzorzec (patrz _template.html):
   <label for="sn-x" class="margin-toggle sidenote-number"></label>
   <input type="checkbox" id="sn-x" class="margin-toggle">
   <span class="sidenote">…</span>
   Marginnote: label z „⊕" w treści, bez klasy .sidenote-number.      */

.sidenote, .marginnote {
  float: right;
  clear: right;
  margin-right: -60%;
  width: 50%;
  margin-top: 0.35rem;
  margin-bottom: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  position: relative;
}

/* Licznik: numer w tekście… */
label.sidenote-number { counter-increment: sidenote-counter; }
label.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 0.65rem;
  position: relative;
  top: -0.45em;
  left: 0.08em;
  color: #b0000f;
}
/* …i ten sam numer przy przypisie na marginesie */
.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-size: 0.65rem;
  position: relative;
  top: -0.45em;
  color: #b0000f;
}

input.margin-toggle { display: none; }
label.margin-toggle { cursor: pointer; }
label.sidenote-number { display: inline; }
label.margin-toggle:not(.sidenote-number) {
  display: none;             /* „⊕" widoczne tylko na wąskich ekranach */
  color: #b0000f;
}

/* ---------- 5. Karta promptu ---------- */
.prompt-card { margin-top: 1.8rem; }

.prompt-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.prompt-card .p-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #151515;
}

button.copy {
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: #151515;
  border: 1px solid #151515;
  padding: 0.18rem 0.7rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
button.copy:hover {
  background: #151515;
  color: #fffff8;
}
button.copy.copied {
  border-color: #b0000f;
  color: #b0000f;
  background: transparent;
}

.prompt-card pre {
  background: #f4f4ec;
  padding: 1rem 1.2rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.6;
  border: 1px solid #e6e6d8;
}

/* Pole edytowalne w prompcie */
.ph {
  background: #fff8d8;
  border-bottom: 1px dotted #b0000f;
  padding: 0 0.2em;
  cursor: text;
  white-space: pre-wrap;
}
.ph:focus {
  outline: none;                 /* wyjątek: zamiast ramki — pełna linia */
  border-bottom-style: solid;
  background: #fff3c0;
}

/* ---------- 6. Checklista wdrożeniowa ---------- */
.checklist {
  list-style: none;
  padding-left: 0;
  margin-top: 1.4rem;
}
.checklist li { margin-top: 0.55rem; }
.checklist label {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  cursor: pointer;
}
.checklist input[type="checkbox"] {
  accent-color: #b0000f;
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  position: relative;
  top: 0.1em;
  cursor: pointer;
}
.checklist label:has(input:checked) {
  text-decoration: line-through;
  text-decoration-color: #999;
  color: #888;
}
.checklist-count {
  font-size: 0.8rem;
  color: #b0000f;
  font-variant-numeric: tabular-nums;
}
.module-progress {
  font-size: 0.8rem;
  color: #b0000f;
  font-variant-numeric: tabular-nums;
}

/* ---------- 7. Tabele w stylu Tufte ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.8rem;
  font-size: 0.85rem;
  line-height: 1.45;
}
th {
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-align: left;
  border-bottom: 1px solid #151515;
  padding: 0.3rem 1rem 0.3rem 0;
}
td {
  border-bottom: 1px solid #ddd8c4;   /* cienkie linie poziome, zero pionowych */
  padding: 0.45rem 1rem 0.45rem 0;
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 1px solid #151515; }
caption {
  caption-side: bottom;
  text-align: left;
  font-size: 0.75rem;
  font-style: italic;
  padding-top: 0.5rem;
  color: #555;
}

/* ---------- 8. Diagramy SVG ---------- */
figure.diagram { margin-top: 1.8rem; }
figure.diagram svg { width: 100%; height: auto; }
figure.diagram figcaption {
  font-size: 0.75rem;
  font-style: italic;
  color: #555;
  margin-top: 0.5rem;
}

/* ---------- 9. Ramka ćwiczenia ---------- */
.exercise {
  border: 1px solid #151515;
  padding: 1.2rem 1.4rem 1.4rem;
  margin-top: 2.2rem;
}
.exercise::before {
  content: "Ćwiczenie warsztatowe";
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
  color: #b0000f;
  margin-bottom: 0.6rem;
}
.exercise > *:first-child { margin-top: 0; }
.exercise p, .exercise ul, .exercise ol { width: 100%; }

/* ---------- 10. Stopka: nawigacja między modułami ---------- */
.module-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4.5rem;
  padding-top: 1rem;
  border-top: 1px solid #151515;
  font-size: 0.85rem;
}
.module-nav a { flex: 1; }
.module-nav a:first-child { text-align: left; }
.module-nav a:nth-child(2) { text-align: center; }
.module-nav a:last-child { text-align: right; }

/* ---------- 11. Pasek postępu czytania (tworzy course.js) ---------- */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: #b0000f;
  z-index: 10;
}

/* ---------- 12. Wąskie ekrany (<760px) ---------- */
@media (max-width: 760px) {
  body {
    width: 92%;
    padding: 2rem 0 3rem;
    padding-left: 4%;
  }
  article > *,
  article section > * { width: 100%; }

  h1 { font-size: 2.2rem; }
  .module-header .module-number { font-size: 3.5rem; }

  /* Sidenotes chowają się; „⊕" lub numer rozwija je po tapnięciu */
  label.margin-toggle:not(.sidenote-number) { display: inline; }
  .sidenote, .marginnote { display: none; }
  .margin-toggle:checked + .sidenote,
  .margin-toggle:checked + .marginnote {
    display: block;
    float: left;
    clear: both;
    width: 95%;
    margin: 1rem 2.5%;
    position: relative;
  }
}

/* ---------- 13. Druk ---------- */
@media print {
  body { width: 100%; padding: 0; background: #fff; color: #000; }
  #progress, button.copy, label.margin-toggle, input.margin-toggle { display: none !important; }
  .module-nav { display: none; }
  /* Przypisy wchodzą w tekst zamiast na margines */
  .sidenote, .marginnote {
    display: inline;
    float: none;
    width: auto;
    margin: 0 0 0 0.3em;
    font-size: 0.75rem;
  }
  article > *, article section > * { width: 100%; }
  .prompt-card pre { border: 1px solid #999; }
}

/* ---------- 14. Ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}