/* T14 trust and legal pages (scripts/lib/templates/trust.mjs,
   ops/design/templates/trust/contract.md). A document, not a brochure: the page head with its
   dates, one lead Panel with the page's answer, then the body at 66ch beside the table of
   contents rail (from 64rem; a disclosure below that). Tables reflow to labeled rows under
   40rem, so nothing scrolls sideways. Brand v2.1 tokens only; tiers stay monochrome. */

.tr { padding-bottom: var(--s-7); }
.tr-head .wfg-page-head { padding-bottom: var(--s-3); }
.tr-draft { padding: 0 .4rem; border: 1px dashed var(--line-strong); color: var(--ink); }

.tr-grid > .article-column { max-width: 58rem; }
/* The rail waits for 72rem: at 1024 the privacy table needs the width more than the contents
   list does, so below that the list stays a disclosure above the body. */
@media (min-width: 64rem) and (max-width: 71.99rem) {
  .tr-grid.guide-grid:not(.guide-grid--no-toc) { display: block; }
  .tr-grid > .article-column { margin-inline: auto; }
  .tr-grid .guide-aside { display: none; }
  .tr-grid .contents-collapsible { display: block; }
}
.tr .contents-collapsible summary { min-height: 2.75rem; }
.tr-grid .article-column > * + * { margin-top: var(--s-section); }
.tr-grid .article-column > .contents-collapsible { margin-top: var(--s-4); }
.tr-grid .article-column > .contents-collapsible + * { margin-top: var(--s-5); }
@media (min-width: 64rem) {
  .tr-grid .guide-aside { padding-block: var(--s-2) var(--s-5); }
}

/* ---------- Lead block ---------- */

.tr .wfg-panel-title { font-size: 1.15rem; }
.tr-action { margin: var(--s-3) 0 0; }
.tr-action .wfg-btn { width: 100%; }
@media (min-width: 40.01rem) {
  .tr-action .wfg-btn { width: auto; }
}
#write .tr-action { margin: 0 0 var(--s-3); }
.tr-note { margin: var(--s-3) 0 0; max-width: var(--measure); font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.tr-note a, .tr-rows a, .tr-paths a { color: var(--accent-text); }
.tr-statement { margin: 0; max-width: var(--measure); font: 400 1.35rem/1.2 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.tr-address { margin: 0 0 var(--s-2); color: var(--ink-2); }
.tr-select { font: 400 1.05rem/1.4 var(--font-ui); color: var(--ink); user-select: all; overflow-wrap: anywhere; }
.tr-list { margin: 0; padding-left: 1.2em; max-width: var(--measure); }
.tr-list li + li { margin-top: .3rem; }
.tr-list li::marker { color: var(--ink-3); }

/* The status legend (scripts/lib/components/evidence.mjs, statusLegend) and the two-column
   rows share one look: the label in the UI face, hairlines between rows. */
.wfg-legend, .tr-rows { width: 100%; margin: 0; border-collapse: collapse; }
.wfg-legend th, .wfg-legend td, .tr-rows th, .tr-rows td { padding: 7px 0; border-top: 1px solid var(--hairline); text-align: left; vertical-align: baseline; }
.wfg-legend tr:first-child > *, .tr-rows tr:first-child > * { border-top: 0; }
.wfg-legend th { width: 7.5rem; padding-right: 14px; font-weight: 400; }
.wfg-legend td { color: var(--ink-2); }
.tr-rows { margin-top: var(--s-3); border-top: 1px solid var(--line); }
.tr-rows tr:first-child > * { border-top: 0; }
.tr-rows th { width: 7.5rem; padding-right: 14px; font: 400 .76rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tr-rows td { color: var(--ink); }

/* Phones: each legend row stacks, the tag over its definition at full width. */
@media (max-width: 40rem) {
  .wfg-legend tr, .wfg-legend th, .wfg-legend td { display: block; width: auto; }
  .wfg-legend tr { padding: 7px 0; border-top: 1px solid var(--hairline); }
  .wfg-legend tr:first-child { border-top: 0; }
  .wfg-legend th, .wfg-legend td { padding: 0; border: 0; }
  .wfg-legend td { margin-top: 3px; }
}

/* ---------- Privacy data paths ---------- */

.tr-paths { width: 100%; }
.tr-paths tbody th { width: 9rem; }
.tr-paths tbody th .wfg-evidence { margin-top: 4px; }
.tr-paths time { white-space: nowrap; }
@media (max-width: 40rem) {
  .tr-paths thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tr-paths, .tr-paths tbody, .tr-paths tr, .tr-paths th, .tr-paths td { display: block; width: auto; }
  .tr-paths tr { padding: 8px 14px; border-top: 1px solid var(--line); }
  .tr-paths tr:first-child { border-top: 0; }
  .tr-paths th, .tr-paths td { padding: 2px 0; border: 0; }
  .tr-paths td::before { content: attr(data-label) ": "; font: 400 .74rem/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
}
/* Reflow (styles.css, main): the same labeled rows under 39rem of page (768 at 200% text),
   and under 20rem (390 at 200% text) the two-column rows stack too. */
@container page (width < 39rem) {
  .wfg-legend tr, .wfg-legend th, .wfg-legend td { display: block; width: auto; }
  .wfg-legend tr { padding: 7px 0; border-top: 1px solid var(--hairline); }
  .wfg-legend tr:first-child { border-top: 0; }
  .wfg-legend th, .wfg-legend td { padding: 0; border: 0; }
  .wfg-legend td { margin-top: 3px; }
  .tr-paths thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tr-paths, .tr-paths tbody, .tr-paths tr, .tr-paths th, .tr-paths td { display: block; width: auto; }
  .tr-paths tr { padding: 8px 14px; border-top: 1px solid var(--line); }
  .tr-paths tr:first-child { border-top: 0; }
  .tr-paths th, .tr-paths td { padding: 2px 0; border: 0; }
  .tr-paths td::before { content: attr(data-label) ": "; font: 400 .74rem/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
}
@container page (width < 20rem) {
  /* The email button may break its address, so it never runs past a phone at 200% text. */
  .tr-action .wfg-btn { overflow-wrap: anywhere; }
  .tr-rows tr, .tr-rows th, .tr-rows td { display: block; width: auto; }
  .tr-rows tr { padding: 7px 0; border-top: 1px solid var(--hairline); }
  .tr-rows tr:first-child { border-top: 0; }
  .tr-rows th, .tr-rows td { padding: 0; border: 0; }
  .tr-rows td { margin-top: 3px; }
}

/* ---------- Not stated, changes ---------- */

.tr-block > h2 { margin: 0 0 var(--s-3); }
.tr-open-list { margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.tr-open-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 7px 0; border-top: 1px solid var(--hairline); color: var(--ink); }
.tr-open-list li:first-child { border-top: 0; }
.tr-changes { max-width: var(--measure); }
.tr-change-list { margin: 0; padding: 0 0 12px; list-style: none; }
.tr-change-list li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--hairline); color: var(--ink-2); }
.tr-change-list time { font: 400 .8rem/1.5 var(--font-ui); color: var(--ink-3); }
@media (max-width: 40rem) {
  .tr-change-list li { grid-template-columns: minmax(0, 1fr); }
}
@container page (width < 39rem) {
  .tr-change-list li { grid-template-columns: minmax(0, 1fr); }
}

.tr-body.prose { max-width: none; }
.tr-body.prose > :is(p, ul, ol, blockquote, h2, h3, .table-scroll) { max-width: var(--measure); }
.tr-body.prose > h2:first-child { margin-top: 0; }
.tr .source-block { margin-top: var(--s-section); }

/* ---------- /about authors (trust.mjs, authorsPanel) ---------- */

/* One card per author at #<key>, the target of every byline: the YouTube picture in a circle
   beside the name, the role, the third-person bio and the profile links. Two columns from
   48rem, one below. */
.tr-authors { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 48rem) {
  .tr-authors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tr-author { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); align-items: start; scroll-margin-top: 5rem; }
.tr-author:target .tr-author-name { color: var(--accent-text); }
.tr-author-avatar { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; }
.tr-author-name { margin: 0; font: 400 1.35rem/1.1 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.tr-author-role { margin: .2rem 0 0; font: 400 .76rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tr-author-bio { margin: var(--s-2) 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.tr-author-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: var(--s-2) 0 0; padding: 0; list-style: none; font: 400 .9rem/1.4 var(--font-ui); }
.tr-author-links a { display: inline-block; padding-block: .35rem; color: var(--accent-text); }
.tr-author-name a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: .12em; }
.tr-author-name a:hover { color: var(--accent-text); }