/* ==========================================================================
   SABHA — public document pages (privacy.html, terms.html, delete-account.html)
   ==========================================================================
   Standalone, readable pages for the store listing. Same colour roles and
   type as the app (style.css): yellow page header, blue headings and links,
   green primary action. Flat: no gradients, no looping animation.
   ========================================================================== */

/* ---- Tokens (copied from style.css, the subset these pages use) ---------- */
:root {
  --yellow: #F4C016; --yellow-ink: #5A4200; --yellow-tint: #FFF6D9;
  --blue: #203080; --blue-tint: #DDE3F6; --blue-wash: #F2F4FB;
  --green: #1A7A3A; --green-hover: #146A32; --green-tint: #E6F2E9;
  --red-deep: #C62828; --red-tint: #FDECEC;
  --bg: #FBFAF4; --surface: #FFFFFF; --border: #E8E3D3; --line: #EEEADD;
  --ink: #1D1D18; --ink-2: #45453B; --muted: #6B6B5E;
  --font-body: 'Outfit', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Outfit', sans-serif;
  --gutter: 16px; --r-md: 12px; --r-card: 16px; --r-header: 24px;
  --e1: 0 1px 2px rgba(60, 45, 0, .05), 0 4px 12px rgba(60, 45, 0, .04);
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-wrap: anywhere;
}
a { color: var(--blue); font-weight: 600; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

/* ---- Page header (yellow) ------------------------------------------------- */
.doc-head { background: var(--yellow); border-radius: 0 0 var(--r-header) var(--r-header); }
.doc-head-inner { max-width: 760px; margin: 0 auto; padding: 20px var(--gutter) 24px; }
.doc-brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blue);
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
}
.doc-brand i {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--blue); font-size: 16px;
}
.doc-head h1 {
  margin: 24px 0 4px; font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1.15; color: var(--blue);
}
.doc-updated { margin: 0; font-size: 14px; font-weight: 500; color: var(--yellow-ink); }

/* ---- Body ------------------------------------------------------------------ */
.doc-main { max-width: 760px; margin: 0 auto; padding: 24px var(--gutter) 40px; }
.doc-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--e1);
  padding: 0 20px 20px;
}
.doc-card > :first-child { margin-top: 20px; }
.doc-card > :last-child { margin-bottom: 0; }
.doc-card + .doc-card { margin-top: 16px; }
.doc-main h2 {
  display: flex; align-items: center; gap: 10px; margin: 24px 0 8px;
  font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--blue);
}
.doc-main h2::before { content: ''; flex: none; width: 5px; height: 20px; border-radius: 3px; background: var(--yellow); }
.doc-main h3 { margin: 16px 0 4px; font-size: 16px; font-weight: 700; color: var(--ink); }
.doc-main p, .doc-main li { color: var(--ink-2); }
.doc-main p { margin: 0 0 12px; }
.doc-main ul, .doc-main ol { margin: 0 0 12px; padding-left: 24px; }
.doc-main li { margin: 0 0 8px; }
.doc-main li b, .doc-main p b { color: var(--ink); }
.doc-lead { font-size: 17px; }

/* placeholder the party fills in before publishing */
.ph { padding: 0 4px; border-radius: 4px; background: var(--yellow-tint); color: var(--yellow-ink); font-weight: 600; }

/* numbered in-app steps */
.doc-steps { list-style: none; padding: 0; counter-reset: step; }
.doc-steps li { position: relative; padding-left: 40px; min-height: 28px; margin-bottom: 12px; counter-increment: step; }
.doc-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700;
}

/* note boxes */
.doc-note { margin: 12px 0; padding: 12px 16px; border-radius: var(--r-md); background: var(--blue-wash); color: var(--ink-2); }
.doc-note.is-warn { background: var(--red-tint); }
.doc-note.is-warn b { color: var(--red-deep); }

/* data table */
.doc-table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 15px; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.doc-table th { font-size: 13px; font-weight: 600; color: var(--muted); }
.doc-table td:first-child { font-weight: 600; color: var(--ink); width: 34%; }
@media (max-width: 520px) {
  .doc-table thead { display: none; }
  .doc-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .doc-table td { display: block; width: auto; padding: 2px 0; border: 0; }
  .doc-table td:first-child { width: auto; }
}

/* ---- Footer: back to the app + other documents --------------------------- */
.doc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.doc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: var(--r-md); border: 1px solid transparent; font-size: 15px; font-weight: 600; text-decoration: none;
}
.doc-btn-primary { background: var(--green); color: #fff; }
.doc-btn-secondary { background: var(--surface); color: var(--blue); border-color: var(--blue-tint); }
@media (hover: hover) {
  .doc-btn-primary:hover { background: var(--green-hover); }
  .doc-btn-secondary:hover { background: var(--blue-wash); }
}
.doc-foot { margin-top: 24px; font-size: 14px; color: var(--muted); }
.doc-foot a { margin-right: 16px; }

@media (min-width: 900px) {
  .doc-head h1 { font-size: 40px; }
  .doc-card { padding: 0 32px 32px; }
  .doc-card > :first-child { margin-top: 32px; }
}
@media print {
  .doc-head { border-radius: 0; }
  .doc-actions { display: none; }
}