/* ============================================================
   TAARA — legal.css · Privacy, Terms, Refunds and Contact pages
   (D11, legal round 1). Rendered on the server from legal.json; only
   /contact loads a script (legal.js, the complaint form). The app's
   tokens, fonts and base come from style.css; this file only adds a
   readable long-form column.
   Logical properties only (RTL-ready), like style.css.
   ============================================================ */

body.legal-body {
  background: var(--grad-cosmic) no-repeat, var(--bg-base);
  background-size: 100% 520px, auto;
  min-height: 100vh;
}

.legal {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--sp-6) var(--sp-16);
}

/* ---------- header ---------- */
.legal-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
}
.legal-head .wordmark { font-size: 32px; line-height: 40px; text-decoration: none; }
.legal-head .wordmark svg { width: 13px; height: 13px; color: var(--gold); margin-inline-start: 3px; align-self: flex-start; margin-block-start: 5px; }
.legal-back {
  display: inline-flex; align-items: center; min-height: var(--touch);
  color: var(--gold); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.legal-back:hover { text-decoration: underline; }
.legal-tagline { color: var(--text-mid); font-size: var(--fs-sm); margin-block: var(--sp-1) 0; }

/* ---------- the DRAFT banner: always visible at the top ---------- */
.draft-banner {
  margin-block: var(--sp-5);
  padding-block: var(--sp-3); padding-inline: var(--sp-4);
  background: var(--gold-muted); border: 1px solid var(--gold-hairline);
  border-radius: var(--r-md);
  color: var(--text-hi); font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-sm);
}

/* ---------- type ---------- */
.legal h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-display-1); line-height: var(--lh-display-1);
  margin-block: var(--sp-2) var(--sp-1);
}
.legal .meta { color: var(--text-low); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.legal h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-title); line-height: var(--lh-title);
  margin-block: var(--sp-10) var(--sp-3);
  scroll-margin-block-start: var(--sp-4);
}
.legal h3 {
  font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 600;
  color: var(--text-hi); margin-block: var(--sp-6) var(--sp-2);
}
.legal p, .legal li, .legal dd {
  color: var(--text-mid); font-size: var(--fs-body); line-height: 26px;
}
.legal p { margin-block: 0 var(--sp-3); }
.legal strong { color: var(--text-hi); font-weight: 600; }
.legal a { color: var(--gold); text-underline-offset: 2px; }
.legal ul, .legal ol { margin-block: 0 var(--sp-3); padding-inline-start: var(--sp-5); }
.legal li { margin-block-end: var(--sp-2); }
.legal code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.88em; color: var(--text-hi);
  background: var(--bg-input); border-radius: 4px; padding-inline: 4px;
  overflow-wrap: anywhere;
}
.legal p, .legal li, .legal td, .legal th { overflow-wrap: break-word; }

/* the short summary up front */
.legal-summary {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5); margin-block: var(--sp-6) 0;
}
.legal-summary h2 { margin-block-start: 0; font-size: var(--fs-heading); line-height: var(--lh-heading); }
.legal-summary ul { margin-block-end: 0; }

/* contents list */
.legal-toc { margin-block: var(--sp-6) 0; }
.legal-toc ol { columns: 2 220px; column-gap: var(--sp-6); }
.legal-toc li { margin-block-end: var(--sp-1); break-inside: avoid; font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* operator / counsel notes: visibly not part of the final text */
.op-note {
  border: 1px dashed var(--gold-hairline); border-radius: var(--r-sm);
  padding-block: var(--sp-2); padding-inline: var(--sp-3);
  color: var(--text-low) !important; font-size: var(--fs-sm) !important; line-height: var(--lh-sm) !important;
}

/* ---------- tables (retention, device storage) ---------- */
.legal-table-wrap { margin-block: var(--sp-2) var(--sp-4); }
.legal table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.legal th, .legal td {
  text-align: start; vertical-align: top;
  padding-block: var(--sp-2); padding-inline: 0 var(--sp-3);
  border-block-end: 1px solid var(--divider);
}
.legal th { color: var(--text-low); font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; }
.legal td { color: var(--text-mid); }
.legal td:first-child { color: var(--text-hi); }
.legal td:last-child, .legal th:last-child { padding-inline-end: 0; }
.legal .col-wide { width: 62%; }

/* ---------- legal round 1 (C3-C5): placeholders, contact, the form ---------- */
/* a value still to be filled in legal.json: visibly a placeholder */
.ph {
  background: var(--gold-muted); border-block-end: 1px dashed var(--gold);
  color: var(--gold); font-weight: 600; padding-inline: 2px; border-radius: 2px;
}
.contact-block {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md);
  padding-block: var(--sp-3); padding-inline: var(--sp-4); margin-block: var(--sp-2) var(--sp-4);
}
.contact-block h3 { margin-block-start: 0; }
.contact-block p { margin-block-end: 0; }
.legal .short-notice td:first-child { color: var(--text-hi); }
.legal .distress {
  border-inline-start: 3px solid var(--gold); padding-inline-start: var(--sp-3);
  color: var(--text-hi);
}
.legal-form {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); margin-block: var(--sp-3) var(--sp-6);
}
.legal-form .btn { margin-block-start: var(--sp-2); }
.legal .form-status {
  color: var(--error); font-size: var(--fs-sm); line-height: var(--lh-sm);
  margin-block: 0 var(--sp-2);
}
.ack-block {
  background: var(--bg-raised); border: 1px solid var(--gold-hairline); border-radius: var(--r-lg);
  padding: var(--sp-5); margin-block: var(--sp-3) var(--sp-6);
}
.ack-block h2 { margin-block-start: 0; }
.legal .ack-ticket {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--fs-title); line-height: var(--lh-title); color: var(--gold); letter-spacing: 0.04em;
}
.ack-copy { margin-block: var(--sp-2) var(--sp-4); }
.ack-copy dt {
  color: var(--text-low); font-size: var(--fs-caption); line-height: var(--lh-caption);
  letter-spacing: 0.06em; text-transform: uppercase; margin-block-start: var(--sp-3);
}
.ack-copy dd {
  margin-inline-start: 0; margin-block: 2px 0; color: var(--text-hi);
  white-space: pre-line; overflow-wrap: anywhere;
}
.status-result {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md);
  padding-block: var(--sp-1) var(--sp-3); padding-inline: var(--sp-4);
}
.legal .hindi-summary p { font-size: var(--fs-body); line-height: 28px; }
.legal-foot a { display: inline-block; margin-block-end: var(--sp-2); }

/* ---------- footer ---------- */
.legal-foot {
  margin-block-start: var(--sp-12); padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--divider);
  color: var(--text-low); font-size: var(--fs-caption); line-height: var(--lh-caption);
}
.legal-foot a { margin-inline-end: var(--sp-4); }