/* Podstrony: tekst na kartce papieru z ząbkowanym dołem, na atramentowym tle. Zawsze jasna kartka,
   więc tokeny ze style.css nadpisujemy raz, bez wersji ciemnej. */

:root {
  --bg: #f6f5f1;
  --card: #eeede8;
  --text: #161615;
  --text-2: #64635e;
  --text-3: #a8a7a1;
  --border: #d9d7d0;
  --input: #e9e7e1;
  --primary: #161615;
  --on-primary: #f6f5f1;
  --soft: #e9e7e1;
  --success: #1d7348;
  --success-bg: #e3f0e7;
  --warning: #94570a;
  --warning-bg: #f5ecda;
}

body.doc {
  background: var(--ink);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.6;
}

.page {
  padding-block: var(--margin) calc(var(--margin) + 12px);
}

.sheet {
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  background: var(--paper);
  padding: clamp(20px, 3.4vw, 48px) clamp(20px, 6vw, 80px) clamp(48px, 6vw, 88px);
}

.sheet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  background: var(--teeth-down) 0 0 / 24px 12px repeat-x;
}

.sheet-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(40px, 6vw, 72px);
  font-size: var(--t-s);
}

.sheet-top nav {
  display: contents;
}

.sheet-top .brand {
  font-size: var(--t-body);
}

.sheet-top .links {
  display: flex;
  gap: 4px;
  margin-right: -10px;
}

.sheet-top .links a {
  padding: 10px;
  text-decoration: none;
  font-weight: 500;
}

.sheet-top .links a:hover,
.sheet-top .links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---------- Tekst ---------- */

.doc .prose {
  max-width: none;
  padding: 0;
}

.doc .prose > * {
  max-width: 42rem;
}

.doc .prose > .table-wrap,
.doc .prose > .guide-list {
  max-width: none;
}

.doc h1,
.doc h2 {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
}

.doc .prose h1 {
  font-size: var(--t-l);
  line-height: 1;
  letter-spacing: -0.045em;
  margin: 0 0 24px;
}

.doc .prose h2 {
  font-size: var(--t-m);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 56px 0 14px;
}

.doc .prose h3 {
  font-size: var(--t-body);
  margin: 32px 0 8px;
}

.doc .prose p,
.doc .prose ul,
.doc .prose ol {
  margin: 0 0 16px;
}

.doc .lead {
  font-size: var(--t-m);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 34em;
}

.doc a {
  text-underline-offset: 0.2em;
}

.doc .meta {
  font-size: var(--t-s);
  color: var(--muted);
}

.doc .meta strong {
  color: var(--ink);
  font-weight: 600;
}

.doc .crumbs {
  font-size: var(--t-s);
  color: var(--muted);
  margin: 0 0 20px;
}

/* Bloki to wypełnione pola o ton ciemniejsze od kartki, bez obramowań. */
.doc .callout,
.doc .app-note {
  background: var(--card);
  border: 0;
  border-radius: 0;
  padding: 20px 24px;
  margin: 28px 0;
}

.doc .callout.warn {
  background: var(--warning-bg);
}

.doc .callout {
  box-shadow: inset 6px 0 0 var(--ink); /* taste-skill-ignore: a filled 6px margin bar, not a shadow */
}

.doc .callout.warn {
  box-shadow: inset 6px 0 0 var(--warning); /* taste-skill-ignore: a filled 6px margin bar, not a shadow */
}

.doc .prose .app-note h2 {
  font-family: var(--display);
  font-size: var(--t-body);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

/* Prawdziwe tabele: linie wierszy zostają, ramka wokół znika. */
.doc .table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 8px 0 20px;
}

.doc table {
  font-size: 16px;
}

.doc th,
.doc td {
  padding: 14px 16px 14px 0;
  border-top: 1px solid var(--border);
}

.doc thead th {
  font-size: var(--t-s);
  font-weight: 400;
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
}

.doc thead th + th,
.doc tbody td {
  padding-left: 16px;
}

@media (max-width: 599px) {
  .doc .stack th,
  .doc .stack td {
    padding: 2px 0;
    border: 0;
  }

  .doc .stack tr {
    border-top: 1px solid var(--border);
  }
}

.doc .guide-list {
  gap: 4px;
}

.doc .guide-list .card {
  background: var(--card);
  border: 0;
  border-radius: 0;
  padding: 24px;
  transition: background-color 0.2s ease;
}

.doc .guide-list .card p {
  color: var(--ink);
}

.doc .guide-list .card:hover {
  background: var(--input);
}

.doc .todo {
  border-radius: 0;
}

.doc code {
  font-family: inherit;
  font-weight: 600;
  background: var(--input);
  border-radius: 0;
}

.doc .btn {
  margin-top: 8px;
}

/* Dane usługodawcy, jak w nagłówku faktury. */
.parties-doc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 32px;
  margin: 8px 0 24px;
  padding: 20px 24px;
  background: var(--card);
  font-size: 16px;
}

.parties-doc dt {
  font-size: var(--t-s);
  color: var(--muted);
}

.parties-doc dd {
  margin: 0;
  font-weight: 600;
}

/* Stopka na podstronach niższa: kartka i tak kończy się ząbkami. */
.doc .foot {
  padding-top: 72px;
}

.doc .mark {
  height: 22svh;
  min-height: 120px;
  margin-bottom: 40px;
}

@media (prefers-reduced-motion: no-preference) {
  .sheet {
    animation: print 0.9s var(--ease) both;
  }

  @supports (animation-timeline: view()) {
    .doc .prose h2,
    .doc .prose .table-wrap,
    .doc .prose .callout,
    .doc .prose .app-note,
    .doc .parties-doc,
    .doc .guide-list li {
      animation: rise linear forwards;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

.doc .prose > h1 {
  max-width: none;
}