/* ============================================================
 *  site-page.css: the documentation pages of shieldwave.io
 *  (/bot and its /pl/ twin), written by
 *  frontend/scripts/build-pages.mjs.
 *
 *  It sits on /site-chrome.css, which gives the tokens, the header,
 *  the footer and the .sc-doc reading column the legal pages use.
 *  This file adds only what a reference page needs on top: a line
 *  of links, a list of facts, a table that stacks on a phone, and a
 *  code block with a copy button (/site-page.js shows the button).
 *
 *  Body text is in the full ink colour, not the column's grey:
 *  these pages are read closely, often on a server console's
 *  second screen. Class names start with sd- and touch nothing else.
 * ============================================================ */

.sd-page { color: var(--color-ink); }
.sd-page h1 { margin-bottom: 1.25rem; }
.sd-page h2 { margin-top: 3rem; }

/* The link to the other language, above the heading. */
.sd-lang { margin: 0 0 1.25rem; font-size: 0.875rem; }

.sd-lead { margin: 0 0 2rem; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; }

.sd-page code {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--color-surface-3); border: 1px solid var(--color-line); border-radius: 0.25rem;
  padding: 0.0625rem 0.3125rem; overflow-wrap: anywhere;
}

/* Facts: a label and its answer per row, hairlines between rows. */
.sd-facts { margin: 0 0 1.5rem; border-top: 1px solid var(--color-line-strong); }
.sd-facts > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem 1.5rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--color-line);
}
.sd-facts dt { font-size: 0.9375rem; font-weight: var(--w-semibold); color: var(--color-ink-2); }
.sd-facts dd { margin: 0; }
@media (min-width: 40rem) {
  .sd-facts > div { grid-template-columns: 10rem minmax(0, 1fr); }
}

/* A table on wider screens. On a phone every row becomes a short list of
   label and value; the labels come from data-label on each cell, and the
   first cell names the row. */
.sd-table {
  width: 100%; margin: 1.25rem 0 1.75rem; border-collapse: collapse;
  font-size: 0.9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: normal;
}
.sd-table th {
  padding: 0 0.875rem 0.625rem 0; border-bottom: 1px solid var(--color-line-strong);
  text-align: start; vertical-align: bottom;
  font-size: 0.8125rem; font-weight: var(--w-semibold); line-height: 1.35; color: var(--color-ink-2);
}
.sd-table td { padding: 0.75rem 0.875rem 0.75rem 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.sd-table th:last-child, .sd-table td:last-child { padding-inline-end: 0; }
.sd-table td:first-child { font-weight: var(--w-semibold); white-space: nowrap; }
.sd-table .sd-num { text-align: end; white-space: nowrap; }
@media (max-width: 39.99rem) {
  .sd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sd-table, .sd-table tbody, .sd-table tr, .sd-table td { display: block; width: 100%; }
  .sd-table { border-top: 1px solid var(--color-line-strong); }
  .sd-table tr { padding: 0.75rem 0; border-bottom: 1px solid var(--color-line); }
  .sd-table td { position: relative; padding-block: 0.125rem; padding-inline: 9.5rem 0; border: 0; }
  .sd-table td::before {
    content: attr(data-label); position: absolute; inset-inline-start: 0; top: 0.125rem; width: 8.5rem;
    font-size: 0.875rem; font-weight: 400; color: var(--color-ink-2);
  }
  .sd-table td:first-child { margin-bottom: 0.25rem; padding-inline-start: 0; font-size: 1.0625rem; }
  .sd-table td:first-child::before { content: none; }
  .sd-table .sd-num { text-align: start; }
}

/* Code to copy: robots.txt examples. The button is hidden in the markup
   and shown by /site-page.js, so without script there is none. */
.sd-code {
  position: relative; margin: 0.75rem 0 1.5rem;
  background: var(--color-surface-2); border: 1px solid var(--color-line-strong); border-radius: 0.75rem;
}
.sd-code pre {
  margin: 0; padding: 1rem 6rem 1rem 1rem; overflow-x: auto;
  font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.7; color: var(--color-ink);
}
.sd-code pre code { padding: 0; background: none; border: 0; font-size: inherit; overflow-wrap: normal; }
.sd-copy {
  position: absolute; top: 0.625rem; inset-inline-end: 0.625rem;
  padding: 0.4375rem 0.625rem; border: 1px solid var(--color-line-strong); border-radius: 0.375rem;
  background: var(--color-bg); color: var(--color-ink);
  font: var(--w-medium) 0.8125rem/1 var(--font-sans); cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.sd-copy[hidden] { display: none; }
.sd-copy:hover { border-color: var(--color-ink-3); }
.sd-copy[data-copied] { color: var(--color-link); border-color: var(--color-ok-line); }

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