/* ============================================================================
   Takeroom document pages — privacy, terms, delete-account (and the 404 shell).
   Layout: REMAKE-PLAN §4 "Shared layout"; classes: notes/wave1-contract.md.
   Loads after brand.css and uses only its tokens. The site is light only (the
   founder ruled out a dark mode, notes/BRAND-LIGHT.md). Red (--red-text) is used
   for status labels and the correction rule only.
   ========================================================================= */

/* --- page frame --------------------------------------------------------------
   Phones: one column — head, banner, contents, body.
   >= 1024px: a contents rail on the left, sticky, beside a 68ch column. */
.doc {
  --measure: 68ch;
  --rail: 232px;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 40px var(--gutter) 0;
  font: 400 17px/28px var(--font-sans);
  font-feature-settings: "kern", "liga";
}

.doc > * { max-width: var(--measure); }

@media (min-width: 1024px) {
  .doc {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    grid-template-areas:
      "toc head"
      "toc banner"
      "toc body";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(48px, 7vw, 112px);
    justify-content: start;
    padding-top: 72px;
  }
  .doc > * { grid-column: 2; }
  .doc-head { grid-area: head; }
  .doc-banner { grid-area: banner; }
  .doc-body { grid-area: body; }
  /* A .doc without contents (e.g. the 404) stays one centred column. */
  .doc:not(:has(> .doc-toc)) {
    grid-template-columns: minmax(0, var(--measure));
    grid-template-areas: "head" "banner" "body";
  }
  .doc:not(:has(> .doc-toc)) > * { grid-column: 1; }
}

/* --- head ---------------------------------------------------------------------- */
.doc-head { margin-bottom: 32px; }

.doc-head h1,
.doc h1 {
  color: var(--text);
  font: 900 clamp(40px, 4.2vw + 22px, 68px)/1.0 var(--font-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.doc-updated {
  margin-top: 20px;
  color: var(--text-2);
  font: 500 13px/20px var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.doc-updated time { color: var(--text); }

/* --- banner: the verbatim draft / placeholder / not-live note ------------------ */
.doc-banner {
  margin-bottom: 40px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  line-height: 24px;
}
.doc-banner p + p { margin-top: 8px; }
/* The first <strong> is the status label. */
.doc-banner > strong:first-child,
.doc-banner > :first-child > strong:first-child {
  color: var(--red-text);
  font-weight: 600;
}

/* --- contents ------------------------------------------------------------------ */
.doc-toc {
  margin-bottom: 48px;
  border-block: 1px solid var(--line);
}
.doc-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.doc-toc summary::-webkit-details-marker { display: none; }
/* A drawn plus (two 1.5px bars) that becomes a minus when open. */
.doc-toc summary { position: relative; padding-right: 24px; }
.doc-toc summary::before,
.doc-toc summary::after {
  content: "";
  position: absolute;
  top: 50%;
  background: currentColor;
}
.doc-toc summary::after { right: 0; width: 12px; height: 1.5px; margin-top: -0.75px; }
.doc-toc summary::before { right: 5.25px; width: 1.5px; height: 12px; margin-top: -6px; }
.doc-toc details[open] > summary::before { content: none; }

.doc-toc ol {
  list-style: none;
  padding: 0 0 16px;
}
.doc-toc li + li { margin-top: 2px; }
.doc-toc a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 8px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 22px;
  text-decoration: none;
}
.doc-toc a:hover { color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .doc-toc a { transition: color var(--dur-micro) var(--ease-decel); }
}

@media (min-width: 1024px) {
  .doc-toc {
    grid-area: toc;
    grid-column: 1;
    align-self: start;
    position: sticky;
    top: 32px;
    max-width: none;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    margin: 6px 0 0;
    padding-top: 16px;
    border-block: 0;
    border-top: 1px solid var(--text);
    scrollbar-width: thin;
  }
  /* Rail: always open, no toggle. */
  .doc-toc summary {
    min-height: 0;
    margin-bottom: 12px;
    pointer-events: none;
    color: var(--text-2);
  }
  .doc-toc summary::before,
  .doc-toc summary::after { content: none; }
  .doc-toc details::details-content {
    content-visibility: visible;
    display: contents;
  }
  .doc-toc ol { padding-bottom: 0; }
  .doc-toc li + li { margin-top: 0; }
  .doc-toc a {
    min-height: 36px;
    padding-block: 7px;
    font-size: 14px;
    line-height: 20px;
  }
}

/* --- body ---------------------------------------------------------------------- */
.doc-body {
  max-width: var(--measure);
  color: var(--text);
}

.doc-body section {
  scroll-margin-top: 24px;
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.doc-body > section:first-child,
.doc-body > :first-child { margin-top: 0; }
.doc-body > section:first-child { border-top: 0; padding-top: 0; }

.doc-body h2 {
  margin-bottom: 20px;
  color: var(--text);
  font: 900 clamp(24px, 1.1vw + 19px, 30px)/1.15 var(--font-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.doc-body h3 {
  margin: 32px 0 12px;
  color: var(--text);
  font: 700 19px/26px var(--font-display);
  letter-spacing: -0.02em;
}
.doc-body h4 {
  margin: 24px 0 8px;
  font: 600 17px/28px var(--font-sans);
}

/* Self-links: the heading is the link; a quiet # shows on hover and focus. */
.doc h2 > a.self-link {
  color: inherit;
  text-decoration: none;
}
.doc h2 > a.self-link::after {
  content: "#";
  content: "#" / "";
  margin-left: 0.3em;
  color: var(--text-2);
  font-weight: 700;
  opacity: 0;
}
.doc h2 > a.self-link:hover::after,
.doc h2 > a.self-link:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .doc h2 > a.self-link::after { transition: opacity var(--dur-micro) var(--ease-decel); }
}

.doc-body p,
.doc-body ul,
.doc-body ol,
.doc-body dl,
.doc-body table,
.doc-body blockquote { margin-bottom: 18px; }
.doc-body > :last-child,
.doc-body section > :last-child,
.doc-body li > :last-child { margin-bottom: 0; }

.doc-body ul,
.doc-body ol { padding-left: 1.35em; }
.doc-body li + li { margin-top: 8px; }
.doc-body li::marker { color: var(--text-2); }
.doc-body ol > li::marker { font: 500 14px var(--font-mono); font-variant-numeric: tabular-nums; }
.doc-body li > ul,
.doc-body li > ol { margin-top: 8px; margin-bottom: 0; }

.doc-body strong, .doc-body b { font-weight: 600; }
.doc-body dt { font-weight: 600; }
.doc-body dd { margin: 2px 0 14px; color: var(--text); }

.doc-body a:not(.self-link):not(.pill) {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-2);
  text-underline-offset: 3px;
}
.doc-body a:not(.self-link):not(.pill):hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

.doc-body code,
.doc-body kbd,
.doc-body samp {
  font: 500 0.88em/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.doc-body blockquote {
  padding-left: 18px;
  border-left: 2px solid var(--line);
  color: var(--text-2);
}

.doc-body hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* --- status label ------------------------------------------------------------- */
.doc-label {
  display: inline-block;
  margin-right: 10px;
  color: var(--red-text);
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.12em;
  white-space: nowrap;
}

/* --- open item ---------------------------------------------------------------- */
.doc-open {
  margin: 20px 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: var(--surface);
  font-size: 15px;
  line-height: 24px;
}
.doc-open > :last-child { margin-bottom: 0; }
div.doc-open > .doc-label:first-child,
div.doc-open > p:first-child > .doc-label:first-child { margin-bottom: 2px; }

/* --- correction: a thin red rule plus a "Correction" label ---------------------
   The label is drawn here unless the markup already carries a .doc-label. */
.doc-correction {
  display: block;
  margin: 20px 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--red-text);
}
.doc-correction:not(:has(.doc-label))::before {
  content: "Correction";
  display: block;
  margin-bottom: 6px;
  color: var(--red-text);
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.doc-correction > :last-child { margin-bottom: 0; }
/* Inline form, when a correction wraps words inside a sentence. */
span.doc-correction,
em.doc-correction,
strong.doc-correction,
a.doc-correction {
  display: inline;
  margin: 0;
  padding: 0 0 0 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
span.doc-correction:not(:has(.doc-label))::before,
em.doc-correction:not(:has(.doc-label))::before,
strong.doc-correction:not(:has(.doc-label))::before,
a.doc-correction:not(:has(.doc-label))::before {
  display: inline;
  margin: 0 8px 0 0;
  vertical-align: 0.12em;
}
/* Inside a table cell or list item, keep the rule but drop the outer margin. */
li > .doc-correction:only-child,
td > .doc-correction:only-child { margin: 0; }

/* --- closing boxes ------------------------------------------------------------- */
.doc-box {
  margin-top: 56px;
  padding: 28px 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: var(--surface);
  font-size: 15px;
  line-height: 24px;
}
section.doc-box { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc-body > .doc-box + .doc-box,
.doc-body > section + .doc-box { margin-top: 56px; }
.doc-box h2 {
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 28px;
}
.doc-box h3 { margin-top: 24px; font-size: 17px; line-height: 24px; }
.doc-box > :last-child { margin-bottom: 0; }
.doc-box .doc-correction { margin: 14px 0; }
.doc-box ol > li + li,
.doc-box ul > li + li { margin-top: 12px; }

@media (max-width: 479px) {
  .doc-box { padding: 22px 18px 24px; }
}

/* --- tables -------------------------------------------------------------------- */
.doc-table {
  width: 100%;
  margin: 8px 0 24px;
  border-top: 1px solid var(--text);
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}
.doc-table caption {
  padding-bottom: 10px;
  caption-side: top;
  color: var(--text-2);
  font: 500 12px/18px var(--font-mono);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.doc-table th,
.doc-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.doc-table th:last-child,
.doc-table td:last-child { padding-right: 0; }
.doc-table thead th {
  color: var(--text-2);
  font: 500 12px/18px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.doc-table tbody th { font-weight: 600; color: var(--text); }

@media (max-width: 479px) {
  .doc-table { font-size: 14px; line-height: 21px; }
  .doc-table th, .doc-table td { padding-right: 10px; }
}

/* --- print ----------------------------------------------------------------------
   Always paper, one column, no chrome but the wordmark and the legal lines. */
@media print {
  :root,
  [data-ground="studio"] {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --text: #0A0A0A;
    --text-2: #6E6E73;
    --line: #E5E5E8;
    --red-text: #D40F28;
    color-scheme: light;
  }
  @page { margin: 18mm 16mm; }
  html, body { background: #FFFFFF; }
  body { display: block; min-height: 0; }
  .skip-link, .doc-toc, .site-foot__links { display: none !important; }
  .site-head { min-height: 0; padding: 0 0 12px; }
  .doc {
    display: block;
    max-width: none;
    padding: 0;
    font-size: 10.5pt;
    line-height: 1.5;
  }
  .doc > *, .doc-body { max-width: none; }
  .doc-head h1 { font-size: 26pt; }
  .doc-body h2 { font-size: 15pt; break-after: avoid; }
  .doc-body h3 { break-after: avoid; }
  .doc-body section { padding-top: 14pt; margin-top: 14pt; }
  .doc-body p, .doc-body li { orphans: 3; widows: 3; }
  .doc-banner, .doc-open, .doc-correction, .doc-box, .doc-table tr { break-inside: avoid; }
  .doc h2 > a.self-link::after { content: none; }
  .doc-body a[href^="http"]::after,
  .doc-body a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    color: #6E6E73;
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  .site-foot { margin-top: 24pt; padding: 12pt 0 0; }
}

/* subtitle under the title (delete page: app + developer name) */
.doc-head h1 + p:not(.doc-updated) { margin-top: 12px; color: var(--text-2); }