/*
 * equesty.app — the legal pages (legal-docs-web, prototype §8; ADR-111).
 * Loaded by the built pages under /pl/… and /en/… only, after styles.css, whose
 * header, buttons and footer they reuse. Every value comes from tokens.css; no
 * colour literal here (ADR-071).
 *
 * Craft review items 12–14: a 44px language switch with a bordered current
 * state, 44px link buttons, banners that carry a word and a ≥3:1 border, 16px
 * body text, one readable column (max 760px) at desktop width.
 */

/* ── Header: the language switch (44px targets, current state bordered) ─── */

.lang-switch {
  display: flex;
  gap: 4px;
  font-size: 14px;
  color: var(--color-ink-muted-text);
}

.lang-switch a {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  text-decoration: none;
}

.lang-switch a[aria-current='page'] {
  color: var(--color-ink);
  font-family: var(--sans-strong);
  font-weight: 600;
  background: var(--color-bg-surface);
  border-color: var(--color-ink-border);
}

/* ── Banners (8B, 8C, 8D, 8F, 8I): a word, then the text; ≥3:1 border ──── */

.legal-banner {
  display: block;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--color-linen);
  border-left: 4px solid var(--color-ink-border);
  border-radius: var(--radius-m);
  background: var(--color-bg-surface);
  font-size: 15px;
  line-height: 1.5;
}

.legal-banner-word {
  display: block;
  margin-bottom: 4px;
  font-family: var(--sans-strong);
  font-weight: 600;
}

.legal-banner a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Announcement and draft: the warning tint; the border-left stays ≥3:1 on it. */
.legal-banner-announcement,
.legal-banner-draft {
  border-left-color: var(--color-warning-text);
  background: var(--color-warning-light);
}

.legal-banner-announcement .legal-banner-word,
.legal-banner-draft .legal-banner-word {
  color: var(--color-warning-text);
}

/* Archived: neutral, recessed. */
.legal-banner-archived {
  border-left-color: var(--color-ink-border);
  background: var(--color-bg-recessed);
}

/* Translation (EN pages): informational. */
.legal-banner-translation {
  border-left-color: var(--color-info);
  background: var(--color-info-light);
}

/* ── The document head: eyebrow, title, meta line, link buttons ─────────── */

.legal-page {
  padding-block: 28px 40px;
  max-width: 760px;
}

.legal-head {
  display: grid;
  gap: 10px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-linen);
}

.legal-title {
  font-size: 32px;
  line-height: 1.15;
}

.legal-meta {
  font-size: 14px;
  color: var(--color-ink-muted-text);
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}

.legal-links .button {
  min-height: 44px;
  flex: 0 1 auto;
}

/* ── The change summary (8C): „Co się zmienia względem wersji N” ────────── */

.legal-summary {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--color-linen);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-m);
  background: var(--color-bg-surface);
}

.legal-summary h2 {
  font-family: var(--sans-strong);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 8px;
}

.legal-summary-kind {
  font-size: 14px;
  color: var(--color-ink-muted-text);
  margin-bottom: 8px;
}

.legal-summary ul {
  margin: 0;
  padding-left: 22px;
}

.legal-summary li {
  margin-bottom: 6px;
}

/* ── The text: 16px body (Craft #14), one readable column ───────────────── */

.legal-body {
  padding-top: 26px;
  font-size: 16px;
  line-height: 1.6;
}

.legal-body h2,
.legal-body h3,
.legal-body h4 {
  font-family: var(--sans-strong);
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 8px;
}

.legal-body h2 {
  font-size: 20px;
}

.legal-body h3 {
  font-size: 18px;
}

.legal-body h4 {
  font-size: 16px;
}

/*
 * The document's own full title. It is an `<h1>` in the frozen body and an
 * `<h2>` on the page, which has one h1 — the `legal-title` above
 * (`scripts/site/lib/pages.mjs` `bodyForPage`; headings in order). The rule
 * restates what `h1` gave it, over the `h2` rules above, so the title looks
 * as it did (measured: the same pixels at 390 and 1280).
 */
.legal-body h2.legal-body-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  text-wrap: balance;
  margin-top: 0;
  margin-bottom: 18px;
}

.legal-body p,
.legal-body ul,
.legal-body ol,
.legal-body blockquote,
.legal-body table {
  margin-bottom: 12px;
}

.legal-body ul,
.legal-body ol {
  padding-left: 24px;
}

.legal-body li {
  margin-bottom: 6px;
}

.legal-body blockquote {
  margin-inline: 0;
  padding-left: 14px;
  border-left: 3px solid var(--color-linen);
  color: var(--color-ink-muted-text);
}

/*
 * A table wider than the column (the Polityka's three-column processing table
 * is ~410px in DM Sans) scrolls inside itself, never the page: `display: block`
 * lets the table box shrink to the column and `overflow-x: auto` puts the
 * scrollbar on it, so the table element is the scroll container (review #14;
 * measured 430px → the viewport at 320/375/393). The frozen body is
 * hash-locked, but the build adds to the tag as it renders the page:
 * `scripts/site/lib/pages.mjs` `bodyForPage` gives each table
 * `tabindex="0"` and the name of its section heading, because WebKit does not
 * put a scroll box in the tab order by itself (DELTA #7, WCAG 2.1.1). Focused,
 * the arrow keys scroll it; the outline below is the links' one, drawn inside
 * the box so the column's edge does not clip it.
 */
.legal-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14px;
}

.legal-body table:focus-visible {
  outline: 3px solid var(--color-info);
  outline-offset: -3px;
}

.legal-body th,
.legal-body td {
  padding: 8px 10px;
  border: 1px solid var(--color-linen);
  text-align: left;
  vertical-align: top;
}

.legal-body th {
  font-family: var(--sans-strong);
  font-weight: 600;
  background: var(--color-bg-recessed);
}

.legal-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-body :target {
  scroll-margin-top: 16px;
}

/* ── History (8E): newest first, a pill for the state, 44px links ───────── */

.legal-history {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-history-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--color-linen);
}

.legal-history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.legal-history-head h2 {
  font-family: var(--sans-strong);
  font-weight: 600;
  font-size: 18px;
}

.legal-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--color-linen);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-ink-muted-text);
  background: var(--color-bg-surface);
}

.legal-pill-in-force {
  color: var(--color-success-text);
  border-color: var(--color-success-text);
  background: var(--color-success-light);
}

.legal-pill-announced {
  color: var(--color-warning-text);
  border-color: var(--color-warning-text);
  background: var(--color-warning-light);
}

.legal-history-meta,
.legal-history-kind {
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-ink-muted-text);
}

.legal-history-summary {
  margin: 10px 0 0;
  padding-left: 22px;
}

.legal-history-summary li {
  margin-bottom: 4px;
}

.legal-history-links {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}

.legal-history-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Not found (8H) ─────────────────────────────────────────────────────── */

.legal-not-found-links {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.legal-not-found-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}