/* ============================================================================================
   trust-overage.css — the Trust, Security & Compliance page (2026-09-22)

   Every page's linked CSS is held to 40 KB gzipped (scripts/verify.mjs, rule P2) and the shared
   sheet is at its line, so the one rule only /trust-security-compliance needs lives here, linked
   from its record's `stylesheets` with `data-overage`. This sheet loads before the shared one,
   so it outranks the shared logo-cell rule by specificity, not by order.
   ============================================================================================ */

/* backers `tone: color`: certification badges are read by their colour and their small print, so they keep both
   at rest and stand taller than a wordmark */
.logo-cells--color .cell--logo img { filter: none; opacity: 1; max-height: var(--logo-h, 88px); }

/* the badges' grid on the band (Robert, 2026-09-22): every joint a small light dot sitting on lines that meet it, no
   halo (the halo is painted in --bg, which on the band is the darkest stop, so it read as a black disc) and no gap:
   the dividers run the full row, and a rule between the two rows makes the middle joints real joints */
/* the halo-less light dots and the full-height dividers are shared since 2026-09-30 (base.css, every cells grid on a
   band); the two-row joints stay here */
@media (min-width: 901px) {
  [data-band="dark"] .logo-cells--color > li { position: relative; }
  [data-band="dark"] .logo-cells--color > li:nth-child(n + 4) { border-top: 1px solid var(--page-grid-ink); }
  [data-band="dark"] .logo-cells--color > li:nth-child(n + 4)::before,
  [data-band="dark"] .logo-cells--color > li:nth-child(6)::after { content: ''; position: absolute; top: -2px; left: -1px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .7); pointer-events: none; }
  [data-band="dark"] .logo-cells--color > li:nth-child(6)::after { left: auto; right: -1.5px; }
}

/* twoTone tabs (2026-09-22): the capsule strip and one panel at a time under the head, in the copy column beside the
   media; every panel shows before scripts and in print */
.tt-tabs-nav { justify-self: start; }
.tt-tab { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--tile-wash), var(--bg-2); }
.tt-tab h3 { margin: 0; font-size: var(--fs-card-sm); line-height: var(--lh-tight); }
.tt-tab .prose { color: var(--body); }
.tt-tab .prose p + p { margin-top: var(--s-3); }
.twotone .tt-tab[hidden] { display: none; }
@media (min-width: 900px) {
  .twotone .split:has(> .tt-tab) { align-items: start; row-gap: var(--s-5); }
  .twotone .split:has(> .tt-tab) > :is(.section-head, .tt-tabs-nav, .tt-tab) { grid-column: 1; }
  .twotone .split:has(> .tt-tab) > .media { grid-column: 2; grid-row: 1 / span 8; align-self: center; }
}
@media print { .twotone .tt-tab[hidden] { display: grid; } .tt-tabs-nav { display: none; } }

/* the ring on the band's close: the stage held to a comfortable size in its column */
.media--orbit { max-width: 560px; justify-self: center; width: 100%; }
/* the simplified dark orb stands on the band itself, with no panel behind it */
.twotone[data-band="dark"] .media--orbit { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.twotone[data-band="dark"] .media--orbit > * { overflow: visible; border-radius: 0; }