/*
 * app/web/css/policy.css — the five policy documents on the 2026 marketing shell:
 * /privacy, /ferpa (Student data & FERPA), /subprocessors, /terms, /accessibility.
 *
 * Source: design/pages/policies/{default,privacy,terms,accessibility,subprocessors,phone}.html —
 * their <style> blocks made fluid and token-only. One sheet for all five, because they are one
 * document set and a reader moving between them must not feel a change of typeface. landing.css
 * (the shared shell; its contract is at its head) owns the masthead, the phone menu, the bands and
 * the footer; everything here is the policy template itself: the policy bar (the five documents as
 * a tab strip), the document grid (a white contents column beside the paper on the reading field),
 * the document's type, notes, lists, tables and action rows. Phone rules key on
 * [data-layout='mobile'] (device-boot.js), never on a width query. No colour literal lives here.
 * The legal text is the product's, verbatim; nothing in this file may change what it says.
 *
 * Template (one article per page):
 *   <main class="site__main">
 *     <div class="policy-bar">            .policy-bar__label ("Policies") + nav.tt-tabs.policy-tabs
 *                                          (.tt-tab, the current one .is-selected + aria-current="page")
 *     <article class="doc">
 *       <header class="doc__head tt-on-cream">   .doc__title (the one h1) · .doc__version · .doc__intro
 *       <aside class="doc__aside">               .doc__aside-inner (sticky under the masthead) >
 *                                                 nav.toc (.tt-kicker + ul.toc__list > li > a.toc__item)
 *                                               + section.aside-contact (.tt-kicker + dl.facts > .fact)
 *       <div class="doc__body tt-on-cream">      .doc-note (a kit .tt-banner) · section.doc-section#slug >
 *                                                 .tt-section-head > h2 · .doc-h3 · .prose · ul.doc-list ·
 *                                                 table.doc-table · .ref-list of .tt-link--action
 *   DOM order is reading order (title, intro, contents, the document). The desktop grid places the
 *   aside in the first column; the phone stacks it after the intro, as the design's phone frame does.
 */

/* ---------- 0. The frame ---------- */

.site--policy {
  /* The contents column: 400 of the 1440 frame (the 64 margin, three 80 columns and their gutters),
     growing with the frame's own margin on a wider screen, shrinking below 1440, never under 280.
     The policy bar and the document share it, so the tab strip and the paper's edge are one line. */
  --doc-aside: calc(max(0px, (100% - var(--layout-frame)) / 2) + clamp(280px, 27.78%, 400px));
  /* Paper edge → the measure: 224 of the 1040 paper at 1440 (the measure starts on grid column 6). */
  --doc-indent: clamp(32px, 21.54%, 224px);
  /* The measure: about 74 characters a line; people read these worried, often on a phone. */
  --doc-measure: 560px;
}

/* ---------- 1. The policy bar: "Policies" at the gutter, the five documents as a kit tab strip ---------- */

/* A white strip under the masthead. The selected document takes the kit's 2px navy bar — a document
   chosen within the Policies set (SYSTEM §3, the selection rule); the masthead's teal bar stays the
   one section-level "where you are", and no masthead item is current on these pages. */
.policy-bar {
  display: grid;
  grid-template-columns: var(--doc-aside) minmax(0, 1fr);
  align-items: end;
  min-height: 56px;
  background: var(--color-ground);
  border-bottom: var(--rule-hair);
}
.policy-bar__label {
  display: flex;
  align-items: center;
  height: 36px;
  padding-left: var(--layout-gutter);
  font: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  color: var(--color-ink);
}
.policy-tabs { border-bottom: 0; min-width: 0; }   /* the bar's own hairline is the strip's rule */

/* ---------- 2. The document: contents on white | the paper on the reading field ---------- */

.doc {
  flex: 1 0 auto;   /* a short document still carries the paper down to the footer */
  display: grid;
  grid-template-columns: var(--doc-aside) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  background: var(--color-field-reading);
}
.doc__aside { grid-column: 1; grid-row: 1 / 3; background: var(--color-ground); }
/* Sticky under the masthead, so the list and the contact facts stay beside every section; it must
   fit a 900px display, so it carries only the Contents and the three contact facts. The left padding
   is the gutter less 12: the rule and wash of a contents row hang 12px into the gutter so the text
   stays on the kicker's edge. */
.doc__aside-inner {
  position: sticky;
  top: var(--size-masthead);
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 48px var(--space-6) 64px calc(var(--layout-gutter) - 12px);
}
.doc__aside-inner .tt-kicker { margin-left: 12px; }
.doc__head { grid-column: 2; grid-row: 1; padding: 56px calc(var(--layout-gutter) + 80px) 0 var(--doc-indent); }
.doc__body { grid-column: 2; grid-row: 2; padding: 0 calc(var(--layout-gutter) + 80px) 88px var(--doc-indent); }
.doc__head,
.doc__body { display: flex; flex-direction: column; align-items: stretch; }
/* Everything on the paper shares the one measure: title, intro, prose, notes, lists, rules and tables. */
.doc__head > *,
.doc__body > * { width: 100%; max-width: var(--doc-measure); }

/* ---------- 3. Contents: ruled rows set like the rail (36px, 44 on a phone) ---------- */

.toc__list { display: flex; flex-direction: column; margin-top: 10px; }
.toc__item {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 9px 10px 8px 10px;   /* 37 with the row's hairline, as the design's rows measure */
  border-left: 2px solid transparent;   /* the rail's leading rule, kept for a reading-position marker */
  color: var(--color-ink);
  font: var(--text-ui);
  letter-spacing: var(--tracking-ui);
  text-decoration: none;
}
.toc__list li { position: relative; }
/* the hairline parts the rows and starts on the text's edge, not under the hanging rule */
.toc__list li::before { content: ''; position: absolute; top: 0; left: 12px; right: 0; border-top: var(--rule-hair); }
.toc__list li:last-child::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 0; border-bottom: var(--rule-hair); }
.toc__item:hover { color: var(--color-live-text); }
.toc__item.is-current { background: var(--color-selected); border-left-color: var(--color-live-text); font: var(--text-button); }

/* ---------- 4. The contact facts under the contents ---------- */

.aside-contact { display: flex; flex-direction: column; gap: 12px; }
.facts { margin: 0 0 0 12px; display: flex; flex-direction: column; }
.fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: var(--rule-hair); }
.fact__k { font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-2); }
.fact__v { margin: 0; font: var(--text-body); letter-spacing: var(--tracking-body); color: var(--color-ink); }

/* ---------- 5. The document head: title, the version line (must-keep), the intro in lead ---------- */

.doc__title { font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); color: var(--color-ink); }
.doc__version { margin-top: 12px; font: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--color-ink-2); }
.doc__intro { margin-top: 28px; font: var(--text-lead); letter-spacing: var(--tracking-lead); color: var(--color-ink); }
.doc__intro + .doc__intro { margin-top: 16px; }

/* ---------- 6. Sections: the kit's section head (1px navy rule, Lora title), then prose ---------- */

.doc-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 48px;
  scroll-margin-top: calc(var(--size-masthead) + 16px);   /* a contents link lands below the sticky masthead */
}
.doc-section--first { margin-top: 40px; }
.doc-section .tt-section-head { margin-bottom: 4px; }
.doc-h3 { margin-top: 8px; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink); }
.prose { font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink); }
/* Emphasis is a 600 run everywhere in the system (SYSTEM §5); Inter ships no italic face. */
.doc em { font-style: normal; font-weight: 600; }

/* lists: a 6px square mark on a 14px column, 10px before the text */
.doc-list { display: flex; flex-direction: column; gap: 12px; }
.doc-list__item { position: relative; padding-left: 24px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink); }
.doc-list__item::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: currentColor; }

/* action rows: the address under a section that gives it, the references; 40px ruled rows */
.ref-list { display: flex; flex-direction: column; border-top: var(--rule-hair); }
.ref-list .tt-link--action { border-bottom: var(--rule-hair); min-height: 40px; }

/* notes: the kit's ruled banner, its text in body and in ink because here the note is the thing to
   read, not a status line (the kit variant "Banner · Note") */
.doc__body > .doc-note { margin-top: 32px; }
.doc-section .doc-note { margin-top: 4px; }
.doc-note .tt-banner__text { font: var(--text-body); letter-spacing: var(--tracking-body); color: var(--color-ink); }

/* ---------- 7. Tables: the kit's grid rows and headers at the column's measure ---------- */

/* Cells in body (14/20) because these rows carry whole sentences read by worried people, not a
   roster; no hover wash and no leading selection rule (a policy table never has a selected row).
   Column widths come from the design as <col> percentages; the row head (first column) is a <th>. */
.doc-table { width: 100%; margin-top: 8px; border-collapse: collapse; table-layout: fixed; }
/* the two provider rosters run 80px past the measure, into the paper's right margin, so Region and
   "Trains on it?" hold their values without a word per line */
.doc-table--wide { width: calc(100% + 80px); max-width: 640px; }
.doc-table th,
.doc-table td { text-align: left; vertical-align: top; }
.doc-table thead th {
  padding: 0 8px 8px;
  border-bottom: var(--rule-strong);
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
}
.doc-table tbody th,
.doc-table td {
  padding: 12px 8px;
  border-bottom: var(--rule-hair);
  font: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink);
}
.doc-table tbody tr { height: 48px; }   /* the kit row's minimum; a one-line row does not sit tighter than the rest */
.doc-table tbody th { font: var(--text-button); letter-spacing: var(--tracking-button); }
.doc-table th:first-child,
.doc-table td:first-child { padding-left: 0; }
.doc-table em { font-weight: inherit; }   /* "(optional)" beside a provider's name keeps the name's weight */

/* ---------- 8. Phone: [data-layout='mobile'] only ---------- */

/* the policy bar stacks: the kicker, then the tabs wrapping as 44px targets */
[data-layout='mobile'] .policy-bar { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 0; padding: 10px var(--layout-gutter) 0; }
[data-layout='mobile'] .policy-bar__label { height: 32px; padding-left: 0; }
[data-layout='mobile'] .policy-tabs { height: auto; flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
[data-layout='mobile'] .policy-tabs .tt-tab { height: var(--size-control-phone); }

/* the document stacks in reading order: head, contents, body — all on the reading field */
[data-layout='mobile'] .doc { display: flex; flex-direction: column; }
[data-layout='mobile'] .doc__head { padding: 32px var(--layout-gutter) 0; }
[data-layout='mobile'] .doc__body { padding: 0 var(--layout-gutter) 56px; }
[data-layout='mobile'] .doc__head > *,
[data-layout='mobile'] .doc__body > * { max-width: none; }
[data-layout='mobile'] .doc__title { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); }
[data-layout='mobile'] .doc__aside {
  --color-ground: var(--color-field-reading);   /* the contents sit on the paper here, as in the design's phone frame */
  background: var(--color-field-reading);
  padding: 0 var(--layout-gutter);
}
[data-layout='mobile'] .doc__aside-inner { position: static; gap: 0; padding: 28px 0 0; }
[data-layout='mobile'] .doc__aside-inner .tt-kicker { margin-left: 0; }
[data-layout='mobile'] .toc__list li { margin-left: -12px; }   /* the hanging rule stays in the gutter; the text on it */
[data-layout='mobile'] .toc__item { min-height: var(--size-control-phone); }
[data-layout='mobile'] .aside-contact { display: none; }   /* the Contact section carries it on a phone */

/* tables stack as definition pairs under the row's name (the header words become the labels), so no
   table scrolls sideways and nothing sits past the frame; a 1px navy rule opens the register and
   hairlines part the rows, as the kit table does */
[data-layout='mobile'] .doc-table,
[data-layout='mobile'] .doc-table--wide { display: block; width: 100%; max-width: none; margin-top: 8px; border-top: var(--rule-strong); }
[data-layout='mobile'] .doc-table colgroup,
[data-layout='mobile'] .doc-table thead { display: none; }
[data-layout='mobile'] .doc-table tbody { display: flex; flex-direction: column; }
[data-layout='mobile'] .doc-table tr { display: flex; flex-direction: column; gap: 6px; height: auto; padding: 12px 0 14px; border-bottom: var(--rule-hair); }   /* height: auto — the desktop minimum would be a fixed height on a flex row */
[data-layout='mobile'] .doc-table tbody th { display: block; padding: 0 0 2px; border: 0; }
[data-layout='mobile'] .doc-table td {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 0;
  border: 0;
}
[data-layout='mobile'] .doc-table td::before {
  content: attr(data-label);
  padding-top: 2px;
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
}