/* ── Trust pages (/guidelines, /moderation, /copyright, /help/how-we-count) ──
   Same structure as the legal pages (terms, privacy): a 900px column, a centred hero, one card
   with sections. Inside the card there is one surface only: sections are grouped by spacing and
   1px dividers, and use the components.css primitives (.steps, .list-divided, .notice,
   .data-table, .badge) instead of nested boxes. Tokens only (tokens.css); dark and light themes
   come from the token values. Motion is 150ms opacity. */

.trust-page { padding: var(--space-12) 0; }
.trust-container { max-width: 900px; margin: 0 auto; }

/* Hero: one page eyebrow (.section-label), the title, the lead and a quiet meta line */
.trust-hero { text-align: center; margin-bottom: var(--space-6); }
.trust-hero .section-label { justify-content: center; }
.trust-hero h1 { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: 1.1; color: var(--on-surface); margin-bottom: var(--space-3); }
.trust-lead { color: var(--on-surface-variant); font-size: var(--text-body-lg); line-height: 1.6; max-width: 640px; margin: 0 auto; }
.trust-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); font-family: var(--font-sans); font-size: var(--text-label-lg); color: var(--on-surface-variant); }
.trust-meta-item,
.trust-updated { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--on-surface-variant); font-size: var(--text-label-lg); }
.trust-meta-item .material-icons-round,
.trust-updated .material-icons-round { font-size: 16px; }

/* Cross-links between the pages of the set */
.trust-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0 0 var(--space-8); }
.trust-nav .chip { text-decoration: none; }
.trust-nav .chip .material-icons-round { font-size: 16px; }

.trust-card { padding: var(--space-8); }
.trust-card > .notice { margin-bottom: var(--space-8); }

/* "On this page": a label and a row of links at the top of the card, closed by a divider (no inner box) */
.trust-toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-8); padding: 0 0 var(--space-5); border-bottom: 1px solid var(--outline-variant); }
.trust-toc-title { margin-right: var(--space-1); font-family: var(--font-sans); font-size: var(--text-label-lg); font-weight: 600; color: var(--on-surface-variant); }
.trust-toc a { border-radius: var(--radius-xs); color: var(--primary); font-size: var(--text-body); text-decoration: none; }
.trust-toc a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Sections: separated by spacing and one divider */
.trust-section { margin-bottom: var(--space-10); scroll-margin-top: calc(88px + var(--announcement-bar-visible-height)); }
.trust-section + .trust-section { padding-top: var(--space-10); border-top: 1px solid var(--outline-variant); }
.trust-section:last-child { margin-bottom: 0; }
.trust-section h2 { font-family: var(--font-display); font-size: var(--text-headline); font-weight: 700; line-height: 1.2; color: var(--on-surface); margin-bottom: var(--space-4); }
.trust-section h3 { font-family: var(--font-sans); font-size: var(--text-title); font-weight: 600; color: var(--on-surface); margin: var(--space-6) 0 var(--space-3); }
.trust-section p,
.trust-section li { color: var(--on-surface-variant); font-size: var(--text-body); line-height: 1.7; }
.trust-section p { margin-bottom: var(--space-3); }
.trust-section strong { color: var(--on-surface); }
.trust-section a:not(.btn):not(.chip):not(.badge) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.trust-list { list-style: disc; padding-left: var(--space-6); margin-bottom: var(--space-4); }
ol.trust-list { list-style: decimal; }
.trust-list li { margin-bottom: var(--space-2); padding-left: var(--space-1); }
.trust-list li::marker { color: var(--primary); }

/* Numbered steps: the shared .steps list; each step has a short title line */
.trust-section .steps { margin: var(--space-4) 0 var(--space-6); gap: var(--space-4); }
.trust-section .steps:last-child { margin-bottom: 0; }
.trust-step-title { display: block; margin-bottom: 2px; font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 600; line-height: 1.4; color: var(--on-surface); }

/* Tables (data-table from components.css inside data-table-wrap) */
.trust-table-wrap { margin: var(--space-4) 0 var(--space-6); }
.trust-table-wrap .data-table td { color: var(--on-surface-variant); line-height: 1.55; }
.trust-table-wrap caption { text-align: left; }

/* State definitions (moderation labels): badge column and text, divided rows */
.trust-states { margin: var(--space-3) 0 var(--space-6); }
.trust-state-term { flex: 0 0 168px; display: flex; align-items: center; min-height: 24px; }
.trust-states .list-body { display: flex; align-items: center; min-height: 24px; }
.trust-states .list-text { margin: 0; line-height: 1.55; }

/* Rule catalogue: divided rows; a linked rule (#R-…) gets a soft tint that fades in (opacity only) */
.rule-group { margin-top: var(--space-8); scroll-margin-top: calc(88px + var(--announcement-bar-visible-height)); }
.rule-group-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.rule-group-head h3 { margin: 0; }
.rule-group-code { font-family: var(--font-sans); font-size: var(--text-label-lg); font-weight: 600; letter-spacing: .3px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.rule-item { position: relative; z-index: 0; scroll-margin-top: calc(96px + var(--announcement-bar-visible-height)); }
.rule-item::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--space-4)); right: calc(-1 * var(--space-4)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary) 9%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--duration-short) var(--easing-standard); }
.rule-item:first-child::before { top: calc(-1 * var(--space-3)); }
.rule-item:last-child::before { bottom: calc(-1 * var(--space-3)); }
.rule-item:target::before { opacity: 1; }
.rule-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-1); }
.rule-title { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 600; color: var(--on-surface); }
.rule-item .list-body p { margin: 0 0 var(--space-2); }
.rule-outcomes { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; font-size: var(--text-label-lg); color: var(--on-surface-variant); }
.rule-outcomes-label { margin-right: var(--space-1); }

/* Opt-out control (how-we-count): a flat row, copy left and the button right */
.trust-optout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.trust-optout-copy { flex: 1 1 320px; min-width: 0; }
.trust-optout-copy h3 { margin: 0 0 var(--space-1); }
.trust-optout-copy p { margin: 0; }
.trust-optout-state { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.trust-optout form { margin: 0; }

/* Install routes per device: flat sections (icon tile, heading, steps) separated by dividers */
.trust-platforms { margin: var(--space-4) 0 var(--space-6); }
.trust-platform { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--outline-variant); scroll-margin-top: calc(88px + var(--announcement-bar-visible-height)); }
.trust-platform:first-child { padding-top: 0; border-top: 0; }
.trust-platform:last-child { padding-bottom: 0; }
.trust-platform-icon { width: 40px; height: 40px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-platform-icon .material-icons-round { font-size: 22px; }
.trust-platform-body { flex: 1; min-width: 0; }
.trust-section .trust-platform h3 { margin: 6px 0 var(--space-3); }
.trust-platform-body > p { margin-bottom: var(--space-3); }
.trust-section .trust-platform .steps { margin: 0; gap: var(--space-3); }

.trust-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.trust-footer-card { text-align: center; background: var(--surface-container-high); border-radius: var(--radius-xl); padding: var(--space-8); margin-top: var(--space-8); }
.trust-footer-card h3 { font-family: var(--font-display); font-size: var(--text-title); font-weight: 600; color: var(--on-surface); margin: 0 0 var(--space-2); }
.trust-footer-card p { color: var(--on-surface-variant); margin: 0; }
.trust-footer-card .trust-actions { justify-content: center; }

code.trust-code { font-family: var(--font-sans); font-size: var(--text-label-lg); padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-container-high); color: var(--on-surface); border: 1px solid var(--outline-variant); white-space: normal; overflow-wrap: anywhere; }

/* A button that reads as a link inside running text (e.g. "Cookie settings") */
.trust-inline-link { display: inline; padding: 0; margin: 0; border: 0; background: transparent; font: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; border-radius: var(--radius-xs); }
.trust-inline-link:hover { color: color-mix(in srgb, var(--primary) 80%, var(--on-surface)); }

.trust-note-spaced { margin-top: var(--space-4); }

@media (max-width: 1024px) {
  .trust-page { padding: var(--space-8) 0; }
}

@media (max-width: 640px) {
  .trust-page { padding: var(--space-6) 0; }
  .trust-hero h1 { font-size: var(--text-headline-lg); }
  .trust-card { padding: var(--space-5); }
  .trust-section { margin-bottom: var(--space-8); }
  .trust-section + .trust-section { padding-top: var(--space-8); }
  .trust-section h2 { font-size: var(--text-title-lg); }
  .trust-nav { justify-content: flex-start; }
  .trust-toc { gap: var(--space-2) var(--space-4); }
  .trust-toc-title { width: 100%; }
  .trust-state-term { flex-basis: 100%; }
  .trust-platform { gap: var(--space-3); }
  .trust-optout .btn { width: 100%; justify-content: center; }

  /* Stacked rows for narrow tables: one surface, rows divided, each cell shows its column name. */
  .trust-table-wrap--stack { margin: var(--space-4) 0 var(--space-6); }
  .trust-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .trust-table--stack,
  .trust-table--stack tbody,
  .trust-table--stack tr,
  .trust-table--stack th,
  .trust-table--stack td { display: block; width: 100%; }
  .trust-table--stack tbody tr { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--outline-variant); }
  .trust-table--stack tbody tr:first-child { border-top: 0; }
  .trust-table--stack tbody tr:hover { background: transparent; }
  .trust-table-wrap .trust-table--stack th[scope="row"] { padding: 0 0 var(--space-2); border: 0; }
  .trust-table--stack td { padding: var(--space-1) 0; border: 0; }
  .trust-table--stack td::before { content: attr(data-label); display: block; color: var(--on-surface); font-family: var(--font-sans); font-size: var(--text-label-lg); font-weight: 600; margin-bottom: 2px; }
}