/* Prose pages: policies, terms, and the Ramz product page.
   Reuses every token from styles.css. Adds no colour of its own. */

.doc {
  max-width: 760px;
  margin-inline: auto;
  padding-top: 72px;
  padding-bottom: 120px;
}

.doc-head {
  padding-bottom: 34px;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--rule);
}

.doc-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.doc-eyebrow .tiny-square {
  width: 7px;
  height: 7px;
  background: var(--accent);
  flex: none;
}

.doc h1 {
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.12;
  font-weight: 450;
  letter-spacing: -0.04em;
  margin: 0;
}

.doc-meta {
  margin-top: 26px;
  display: grid;
  gap: 7px;
  font-size: 14px;
  color: var(--muted);
}

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

.doc h2 {
  font-size: 26px;
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 52px 0 16px;
}

.doc h3 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 34px 0 12px;
}

.doc p,
.doc li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  text-wrap: pretty;
  /* Package names and permission identifiers are longer than a phone is wide. */
  overflow-wrap: anywhere;
}

.doc p {
  margin: 0 0 17px;
}

.doc ul,
.doc ol {
  margin: 0 0 17px;
  padding-left: 22px;
}

.doc li {
  margin-bottom: 9px;
}

.doc li::marker {
  color: var(--muted);
}

/* Underlined, not merely coloured: a link inside a paragraph that is told
   apart by hue alone fails WCAG 1.4.1, and axe is right to say so. */
.doc a,
.doc-note a,
.doc-summary a,
.site-footer .footer-bottom a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.doc a:hover,
.doc-note a:hover,
.doc-summary a:hover,
.site-footer .footer-bottom a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

/* The back-link is a standalone control, not a link inside prose. */
.doc .text-link {
  text-decoration: none;
}

.doc strong {
  font-weight: 600;
}

.doc em {
  font-style: italic;
}

.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--soft);
  padding: 2px 5px;
  border-radius: 3px;
}

/* The plain-language summary that opens every policy. */
.doc-summary {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  padding: 26px 28px 10px;
  margin: 0 0 12px;
}

.doc-summary h2 {
  margin-top: 0;
  font-size: 20px;
}

.doc-summary p:last-child {
  margin-bottom: 17px;
}

/* A point a careful reader would otherwise have to discover. */
.doc-note {
  border: 1px solid var(--control-border);
  border-radius: 5px;
  padding: 20px 22px 4px;
  margin: 0 0 20px;
  background: var(--light);
}

.doc-note > *:first-child {
  margin-top: 0;
}

.doc-table-wrap {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid var(--rule);
  border-radius: 5px;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.65;
  border-bottom: 1px solid var(--rule);
}

.doc th {
  font-weight: 600;
  color: var(--ink);
  background: var(--soft);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.doc tbody tr:last-child td {
  border-bottom: 0;
}

.doc-back {
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}

/* ---- The Ramz product page ---- */

.ramz-hero {
  max-width: 760px;
  margin-inline: auto;
  padding-top: 72px;
  padding-bottom: 20px;
}

.ramz-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--control-border);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 24px;
}

.ramz-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.ramz-hero h1 {
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.1;
  font-weight: 450;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
}

.ramz-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 58ch;
}

.ramz-sub {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
}

.ramz-refusals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin: 42px 0 0;
  max-width: 760px;
  margin-inline: auto;
}

.ramz-refusals > div {
  background: var(--paper);
  padding: 24px 22px;
}

.ramz-refusals h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.ramz-refusals p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 680px) {
  .doc,
  .ramz-hero {
    padding-top: 52px;
  }

  .doc {
    padding-bottom: 84px;
  }

  .doc h2 {
    font-size: 23px;
    margin-top: 42px;
  }

  .doc-summary {
    padding: 22px 20px 8px;
  }
}

/* ---------- Capability brief (/brief) ---------- */

/* The row above the document that explains how to keep a copy. The instruction
   is plain text and always there; the button is revealed by script, so a reader
   without JavaScript is told what to do rather than shown a control that does
   nothing. */
.brief-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 34px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--soft);
}

.brief-save p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 54ch;
}

/* ---------- Print ---------- */

/* Printing a prose page is a real thing people do with a policy and the whole
   point of the capability brief, so the page is laid out for paper rather than
   left to the browser's guess. Chrome drops backgrounds by default, which is
   why nothing here relies on a fill to carry meaning. */
@page {
  size: A4;
  margin: 16mm;
}

@media print {
  /* Force the light palette: a reader who happened to be in dark mode would
     otherwise print an ivory page as a black rectangle. */
  html,
  html[data-theme="dark"] {
    background: #fff;
  }

  body,
  html[data-theme="dark"] body {
    background: #fff;
    color: #232622;
  }

  /* Screen furniture: navigation, the theme control, the save row and the back
     link are all things you cannot use on paper. */
  .site-header,
  .skip-link,
  .brief-save,
  .doc-back,
  #theme-toggle {
    display: none !important;
  }

  .doc {
    max-width: none;
    padding: 0;
    font-size: 10.5pt;
  }

  .doc-head {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1.5pt solid #232622;
  }

  .doc h1 {
    font-size: 22pt;
    margin: 0;
  }

  .doc h2 {
    font-size: 11pt;
    margin: 16px 0 6px;
    break-after: avoid;
  }

  .doc p,
  .doc li {
    font-size: 10pt;
    line-height: 1.5;
    color: #232622;
  }

  .doc p {
    margin-bottom: 8px;
  }

  .doc li {
    margin-bottom: 4px;
    break-inside: avoid;
  }

  .doc-summary,
  .doc-note {
    padding: 10px 12px;
    margin: 12px 0;
    border: 0.75pt solid #d6d8d0;
    border-left: 2pt solid #28734f;
    background: transparent;
    break-inside: avoid;
  }

  .doc-meta {
    gap: 4px;
  }

  .doc-meta span,
  .doc-eyebrow {
    font-size: 8.5pt;
  }

  /* A URL is useless as a hyperlink on paper, but the address itself matters —
     these are the two ways to reach us. Kept as text, in ink, not underlined
     into noise. */
  .doc a,
  .doc a:visited {
    color: #232622;
    text-decoration: none;
    font-weight: 600;
  }

  .site-footer {
    padding: 8px 0 0;
    margin-top: 14px;
    border-top: 0.75pt solid #d6d8d0;
  }

  .footer-bottom span {
    font-size: 8pt;
    color: #5b6058;
  }
}