/* Long-form document pages (privacy, terms, delete-data, feedback).
   Loads after base.css. This sheet is only about reading a lot of text. */

/* Legal pages share the landing-page shell, with a compact title band and
   a comfortable reading measure for the full document. */
.notebook-page.legal-page main > section { min-height:0; }
.legal-page .page-head { padding:0; }
/* A legal document reads as a document, not as a landing section: its
   headings take the body's ink instead of the amber a .theme-cream heading gets. */
.notebook-page.legal-page .theme-cream { --heading:var(--ink); }
.legal-page .page-head h1 { color:var(--heading); }
.legal-page .page-head .meta { opacity:1; color:var(--body); font-size:1rem; }
.legal-page .doc-body { padding-block:clamp(48px,7vw,96px); }
.legal-page .prose { width:100%; }
.legal-page .prose a:hover { color:var(--amber-deep); }

/* These pages open on a .theme-dark section, so the canvas follows. Keep in
   step with the theme-color meta in each page's <head>. */
:root {
  --page-top:var(--pink);
  --danger:#b3261e;
  --danger-wash:rgba(211,47,47,.07);
  /* Ink hairlines, tinted so they sit on any section in either theme. */
  --rule:rgb(var(--ink-rgb) / .14);
  --field-border:rgb(var(--ink-rgb) / .22);
  /* Nothing in the palette is lighter than cream; this warm white is the one
     colour on the site from outside it. */
  --paper:#fffdfa;
}
:root[data-theme="dark"] {
  /* b3261e disappears into a dark card; this is the same red, lightened. */
  --danger:#ef5350;
  --danger-wash:rgb(239 83 80 / .12);
  /* A step above the flipped cream, as paper was a step above it on light. */
  --paper:#383734;
}

/* Title band ----------------------------------------------------------
   Sits under the header in the same section, so it needs less top padding
   than .section-pad would give it. */
.page-head {
  text-align:center;
  padding:clamp(30px,4.5vw,52px) max(24px, var(--safe-r)) clamp(52px,7vw,84px) max(24px, var(--safe-l));
}
.page-head h1 { color:var(--ink); }
.page-head .meta { margin-top:12px; font-size:.92rem; opacity:.7; }
.page-head .accent-rule {
  height:4px; width:64px; border-radius:4px;
  background:var(--gold); margin:26px auto 0;
}

/* The wave above already supplies breathing room. */
.doc-body { padding-top:clamp(34px,4.5vw,58px); }

/* Prose ---------------------------------------------------------------
   74ch keeps lines readable; the taller line-height suits dense legal copy. */
.prose { max-width:74ch; margin:0 auto; line-height:1.7; }
/* Clear the browser's margins first, then own the rhythm here. Both rules are
   single-class specificity, so the later one wins. */
.prose > * { margin:0; }
.prose > * + * { margin-top:1.1em; }

.prose .lead { max-width:none; }

/* Headings get a short gold rule underneath, doing the work of a divider
   without drawing a full line across the measure. The gaps above and below it
   are both 1.15rem, in rem so they don't drift with the differing font sizes;
   the +3px covers the rule's own height. */
.prose h2 {
  font-size:clamp(1.55rem,3vw,1.95rem);
  margin-top:2.4em; padding-bottom:calc(1.15rem + 3px); position:relative;
}
.prose h2::after {
  content:""; position:absolute; bottom:0; left:0;
  width:48px; height:3px; border-radius:3px;
  background:var(--gold);
}
.prose h2 + * { margin-top:1.15rem; }
/* An h3 straight after an h2 would otherwise use its own larger top margin. */
.prose h2 + h3 { margin-top:1.15rem; }

/* Sub-headings switch to the body face, so they read as labels rather than
   competing with the serif h2s. */
.prose h3 {
  font-family:var(--body-font); font-weight:700;
  font-size:1.05rem; letter-spacing:0; line-height:1.4;
  margin-top:1.9em;
}
.prose h3 + * { margin-top:.4em; }

/* No margin here: the flow rules above own it, and this selector is more
   specific and later, so setting it would override them. */
.prose ul { padding-left:22px; }
.prose li + li { margin-top:.5em; }
.prose a {
  font-weight:600; text-decoration:underline;
  text-decoration-color:var(--gold); text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.prose a:hover { color:var(--gold); }

/* Callouts: .tldr for "the short version", .callout for safety warnings. */
.tldr, .callout {
  border-radius:var(--radius);
  padding:24px 26px;
  margin-top:1.8em;
}
.tldr { background:rgb(var(--gold-rgb) / .13); }
.callout { background:var(--danger-wash); }
.tldr strong { display:block; margin-bottom:6px; }
.callout h2 {
  margin-top:0; padding-bottom:0; color:var(--danger);
  font-size:clamp(1.35rem,2.6vw,1.6rem);
}
.callout h2::after { display:none; }

/* Tables --------------------------------------------------------------
   Wrapped in .table-scroll so a wide table scrolls itself, not the page. */
.table-scroll { overflow-x:auto; margin-top:1.2em; }
.prose table {
  width:100%; border-collapse:collapse;
  font-size:.94rem; line-height:1.5;
  min-width:520px;
}
.prose th, .prose td {
  text-align:left; padding:12px 14px; vertical-align:top;
  border-bottom:1px solid var(--rule);
}
.prose th {
  font-weight:700; white-space:nowrap;
  border-bottom-color:rgb(var(--ink-rgb) / .3);
}
.prose tr:last-child td { border-bottom:0; }

/* Inline path hint, e.g. Settings → Delete account. Allowed to wrap, since a
   three-step path is wider than a phone and sections clip their overflow.
   box-decoration-break gives each fragment its own padding and rounded ends. */
.path {
  font-weight:600;
  background:rgb(var(--ink-rgb) / .08); border-radius:7px;
  padding:1px 7px; font-size:.95em;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

/* Contact block (support page) ----------------------------------------- */
.contact { text-align:center; }
.contact .email {
  display:inline-block; margin:2px 0 8px;
  font-family:var(--heading-font); font-size:1.35rem;
}

/* FAQ (support page) ---------------------------------------------------
   Hairline-separated rows rather than cards, to stay quiet on the page. */
.faq { margin-top:1.4em; }
.faq > div {
  border-top:1px solid rgb(var(--ink-rgb) / .16);
  padding:20px 0 4px;
}
.faq > div:last-child { border-bottom:1px solid rgb(var(--ink-rgb) / .16); }
.faq h3 { margin-top:0; }
.faq h3 + p { margin-top:.4em; }

/* Forms ----------------------------------------------------------------- */
.form-card {
  background:var(--paper);
  border:1px solid rgb(var(--ink-rgb) / .10);
  border-radius:var(--radius);
  padding:clamp(22px,3.5vw,30px);
  margin-top:1.6em;
}
.field { margin-top:20px; }
.field:first-child { margin-top:0; }
.field-label { display:block; font-weight:700; font-size:.95rem; margin-bottom:8px; }
.req { color:var(--danger); font-weight:700; }
.opt { font-weight:400; opacity:.65; }

input[type=text], input[type=email], select, textarea {
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--cream);
  border:1px solid var(--field-border); border-radius:12px;
  padding:11px 13px; line-height:1.5;
}
select { -webkit-appearance:none; appearance:none; background-image:none; }
textarea { min-height:88px; resize:vertical; }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgb(var(--gold-rgb) / .3);
}

.choice { display:flex; align-items:flex-start; gap:10px; margin-top:10px; font-size:1rem; }
.choice input { margin-top:5px; flex:none; accent-color:var(--gold); }

/* Irreversible-action acknowledgement, tinted like the warning callout. */
.ack {
  display:flex; align-items:flex-start; gap:10px; font-size:1rem;
  background:var(--danger-wash); border-radius:14px;
  padding:14px 16px;
}
.ack input { margin-top:4px; flex:none; accent-color:var(--gold); }

/* Charcoal on gold, not cream on gold: cream sits near 1.9:1, charcoal 4.8:1. */
button.submit {
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:block; width:100%; margin-top:22px;
  font-family:var(--body-font); font-size:1rem; font-weight:700;
  color:var(--on-accent); background:var(--gold);
  border:0; border-radius:100px; padding:15px 26px;
  transition:filter .15s ease, transform .15s ease;
}
button.submit:hover { filter:brightness(1.06); transform:translateY(-2px); }

.form-note { font-size:.86rem; opacity:.7; margin-top:14px; }
.form-error {
  display:none; color:var(--danger); font-weight:600; font-size:.9rem; margin-top:14px;
}
.form-error.show { display:block; }
.hidden { display:none; }

/* Rating scale (feedback page) -----------------------------------------
   Built by the script on that page, not written in the markup. */
.section-label {
  font-family:var(--heading-font); font-size:1.25rem;
  margin-top:28px;
}
.section-label:first-child { margin-top:0; }
.rule { height:1px; background:var(--rule); border:0; margin:28px 0; }

.rating { margin-top:24px; }
.rating-q { font-weight:700; font-size:.95rem; margin-bottom:10px; }
.scale { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:340px; }
.scale-opt { position:relative; }
.scale-opt input { position:absolute; opacity:0; width:0; height:0; }
.scale-opt span {
  display:flex; align-items:center; justify-content:center;
  height:46px; cursor:pointer; user-select:none;
  font-weight:700; font-size:1rem; color:var(--ink);
  background:var(--cream);
  border:1px solid var(--field-border); border-radius:12px;
  transition:background .12s ease, border-color .12s ease;
}
.scale-opt span:hover { border-color:rgb(var(--ink-rgb) / .45); }
.scale-opt input:checked + span {
  background:var(--gold); border-color:var(--gold);
}
.scale-opt input:focus-visible + span { box-shadow:0 0 0 3px rgb(var(--gold-rgb) / .45); }
.scale-ends {
  display:flex; justify-content:space-between; max-width:340px;
  font-size:.78rem; opacity:.65; margin-top:7px;
}
.rating-why { margin-top:12px; }
.rating-why textarea { min-height:56px; }
/* Highlights a question the tester skipped. */
.rating.missing .rating-q { color:var(--danger); }
.rating.missing .scale-opt span { border-color:var(--danger); }

@media (prefers-reduced-motion:reduce) {
  button.submit { transition:none; }
  button.submit:hover { transform:none; }
}