/* ============================================================================
   Bombay 3D Studio — long-form policy pages (JPD-86)
   Loaded by the four /legal/* pages only, AFTER tokens.css and style.css.

   Why its own file rather than a block in style.css: this is the one document
   type on the site — 200 lines of statutory prose with numbered cross-
   references — and nothing in the buying flow needs a single byte of it.
   Keeping it out of style.css means the catalog, product and cart pages don't
   download it, and style.css keeps its ?v=9 cache entry warm (JPD-36).
   Defining it once here is what makes all four pages, and the next policy page
   we add, look the same for free.

   It adds no tokens. Every colour, space, radius and type step below comes
   from tokens.css, so the pages inherit the blueprint identity rather than
   re-inventing it.
   ========================================================================== */

/* ---- Page head ---------------------------------------------------------- */
/* The .sheet (contained blueprint grid + corner registration marks) is used
   here exactly as the product and contact heroes use it: as a bounded panel
   above the copy, never behind it. Rule 1 of tokens.css. */
.legal-head { padding: var(--s-6) var(--s-5); }
.legal-head h1 { max-width: 22em; margin-bottom: var(--s-3); }
/* "Last updated" is a document revision stamp — an ID, not prose. Mono is the
   right voice for it under rule 2, and it is the first thing a compliance
   reader or a corporate buyer's procurement team looks for. */
.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--blueprint);
}
.legal-head .lede {
  max-width: var(--measure);
  margin: var(--s-4) 0 0;
  font-size: 1.05rem;
  color: var(--ink-muted);
}

/* ---- Cross-policy nav --------------------------------------------------- */
/* A buyer who lands on Refund almost always wants Shipping next — the two
   policies split one question ("when does it arrive and what if it doesn't")
   across two URLs. Same pill row the admin section nav uses (JPD-68): put the
   nav in the page chrome, not at the bottom of the prose. */
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
}
.legal-nav a:hover { border-color: var(--blueprint); color: var(--ink); }
.legal-nav a[aria-current="page"] {
  background: var(--blueprint);
  border-color: var(--blueprint);
  color: var(--ink-invert);
}

/* ---- Contents ----------------------------------------------------------- */
/* A thirteen-section policy on a 390px screen is otherwise a scroll with no
   map. The numbers are load-bearing: the copy cross-refers to "§3.1" and
   "/legal/refund §4", so the reader needs to be able to jump. */
.legal-toc { padding: var(--s-4); }
.legal-toc h2 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--blueprint);
  margin-bottom: var(--s-3);
}
.legal-toc ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  min-height: var(--tap);
  padding: var(--s-2) 0;
  color: var(--ink);
  font-size: var(--t-sm);
  text-decoration: none;
}
.legal-toc a::before {
  content: counter(toc);
  flex: none;
  min-width: 1.5em;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--blueprint);
}
.legal-toc a:hover { color: var(--blueprint); text-decoration: underline; }
@media (min-width: 620px) { .legal-toc ol { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); } }
@media (min-width: 960px) { .legal-toc ol { grid-template-columns: repeat(3, 1fr); } }

/* ---- Prose body -------------------------------------------------------- */
/* Two widths, on purpose.
   --measure (34em) is the design system's body line length, and legal copy is
   where it matters most: this is the only page type on the site people read top
   to bottom rather than scan. But a THREE-column comparison table inside 34em
   is unreadable — the privacy page's retention schedule wrapped its own column
   headings onto four lines when the table inherited the prose measure.
   So the column is 62em wide and the prose elements inside it are individually
   pulled back to 34em. Tables and the section rules keep the full width. */
.legal-body { max-width: 62em; }
.legal-body > section + section { margin-top: var(--s-7); }
.legal-body :is(p, ul, ol, blockquote, .legal-callout) { max-width: var(--measure); }
/* Key/value facts sit between the two: wider than a reading measure because the
   registered address is one long line, narrower than a data table. */
.legal-body .legal-facts { max-width: 48em; }
/* A preamble paragraph that belongs to the whole document rather than to §1 —
   the statutory-standard note on the privacy page. It sits above the first
   numbered section and needs that section's own top gap. */
.legal-body > p { margin-bottom: var(--s-6); }

/* A numbered section heading. The blueprint rule above it is the same device
   the identity uses to separate a drawing from its notes, and it gives the eye
   a landing point when jumping in from the contents list. */
.legal-body h2 {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  padding-top: var(--s-4);
  border-top: 2px solid var(--blueprint);
  scroll-margin-top: var(--s-5);
}
.legal-body h2 .legal-num,
.legal-body h3 .legal-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--blueprint);
}
.legal-body h3 {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  margin-top: var(--s-6);
  scroll-margin-top: var(--s-5);
}
.legal-body p, .legal-body li { line-height: var(--lh-body); }
.legal-body ul, .legal-body ol { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
.legal-body li + li { margin-top: var(--s-2); }
.legal-body li > p { margin-bottom: var(--s-2); }
.legal-body strong { font-weight: 600; }
/* Links in prose get the studio treatment, not browser blue — same rule as
   /contact's .qa-list links. */
.legal-body a {
  color: var(--blueprint);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--ink); }
/* Tap targets, and a deliberate, documented deviation from tokens.css rule 4.
   Every link in here is INSIDE a sentence — a cross-reference ("see §4"), an
   address, a sibling policy — so growing one to 44px would open a hole in the
   line. The trust strip solves that with an invisible ::after overlay at
   inset -13px, but it can afford to: its links are isolated. In 200 lines of
   prose at 1.6 line-height, ±13px overlays on consecutive lines would overlap
   each other, and a tap landing on the WRONG link is worse than a small one.
   So: every prose link gets the same modest ±7px lift (≈34px effective, up
   from 20px) and none of them can steal a neighbour's tap. The 44px rule is
   kept where it belongs on this page — the .legal-nav pills and the contents
   list, which are the actual controls. */
.legal-body a { position: relative; }
.legal-body a::after { content: ""; position: absolute; inset: -7px -4px; }
.legal-body a.xref { white-space: nowrap; }

/* A callout for the one or two sentences per page that decide whether someone
   trusts us — "we never see your card number", "there is no cancellation fee".
   Same left rule as /contact's .grievance-officer, so it reads as one system. */
.legal-callout {
  margin: var(--s-4) 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: 2px solid var(--brass);
}
.legal-callout p:last-child { margin-bottom: 0; }

/* ---- Key/value facts (registered details, grievance officer) ------------ */
/* The source copy has these as two-column markdown tables. A <dl> is the
   honest markup for label/value pairs and it stacks on a phone without a
   horizontal scrollbar, which a <table> does not. */
.legal-facts {
  display: grid;
  gap: 1px;
  margin: var(--s-4) 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.legal-facts > div {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
}
.legal-facts dt {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--blueprint);
}
.legal-facts dd { margin: 0; }
@media (min-width: 620px) {
  .legal-facts > div { grid-template-columns: 15em 1fr; gap: var(--s-4); align-items: baseline; }
}

/* ---- Real data tables (privacy §1, §3, §6) ----------------------------- */
/* These are genuinely tabular — three columns of comparison — so they stay a
   <table>. They are allowed wider than --measure because squeezing three
   columns into 34em is worse than a slightly long line.
   Below 720px each row becomes its own card and each cell grows a label from
   data-label. A phone cannot show three columns of prose, and a horizontal
   scrollbar inside a policy page hides content people are entitled to read. */
.legal-table-wrap { margin: var(--s-4) 0; max-width: 62em; }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.legal-table th, .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  line-height: var(--lh-snug);
}
.legal-table thead th {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--blueprint);
  border-bottom: 2px solid var(--blueprint);
}
.legal-table tbody tr { background: var(--surface); }
.legal-table tbody tr:nth-child(even) { background: var(--surface-sunk); }

@media (max-width: 719px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tbody tr {
    margin-bottom: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .legal-table tbody tr:nth-child(even) { background: var(--surface); }
  .legal-table td { border-bottom: 1px solid var(--line); padding: var(--s-3); }
  .legal-table td:last-child { border-bottom: 0; }
  .legal-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--s-1);
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--blueprint);
  }
}