/* Trust pages (vision §E18–§E22): Shipping and returns, FAQ, Privacy, Terms, Accessibility.
   One template: an H1 and a one-line summary, "On this page" anchors, Instrument Sans 17/1.65 at
   68ch, and "Last updated" (an owner placeholder). Owner placeholders ([data-owner]) render only
   where drafts show: an inline script in each page's head sets html[data-drafts] off production,
   so production (and a page without JavaScript) never shows them, and preview shows them at first
   paint (nothing shifts later). Section numbers are CSS counters, so a hidden section never leaves a
   gap in the numbering. */
@layer pages {
  .info {
    display: block;
    counter-reset: info-toc info-section;
  }

  /* Owner placeholders: only where drafts show (DECISIONS §13). */
  :root:not([data-drafts]) [data-owner] {
    display: none !important;
  }

  /* ------------------------------------------------------------------------------ head */
  .info-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-4);
    padding-block: clamp(var(--space-6), 5vw, var(--space-8)) clamp(var(--space-6), 4.5vw, var(--space-8));
  }
  .info-head > * {
    grid-column: 1 / -1;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .info-head > * {
      grid-column: 1 / span 8;
    }
  }
  .info-head__eyebrow {
    margin-block-end: var(--space-1);
  }
  .info-head__eyebrow a {
    color: inherit;
    text-decoration: none;
  }
  .info-head__eyebrow a:hover {
    color: var(--ink);
  }
  /* The width is in em, so the title breaks after the same words in the fallback face and in
     Fraunces ("Shipping and / returns"); a break that depended on the face would move everything
     below when the web font arrives. Small phones scale it so single words always fit. */
  .info-head__title {
    max-inline-size: 7em;
    font-size: min(var(--step-5), 11.5vw);
    font-weight: 360;
    line-height: 0.98;
    letter-spacing: -0.015em;
  }
  .info-head__lead {
    max-inline-size: 46ch;
    color: var(--ink-2);
  }
  .info-head__lead a {
    color: var(--ink);
  }
  .info-updated {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    margin-block-start: var(--space-1);
    color: var(--ink-2);
    font: 450 var(--step--2)/1.5 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* ------------------------------------------------------------------------------ body */
  .info-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
    padding-block-end: var(--space-6);
  }
  @media (min-width: 1024px) {
    .info-body {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gutter);
    }
    .info-toc {
      grid-column: 1 / span 3;
      position: sticky;
      inset-block-start: var(--space-6);
      max-block-size: calc(100svh - 2 * var(--space-6));
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    .info-content {
      grid-column: 5 / span 7;
    }
  }

  /* ---------------------------------------------------------------- On this page */
  .info-toc__title {
    margin: 0 0 var(--space-3);
  }
  .info-toc ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .info-toc li {
    counter-increment: info-toc;
  }
  .info-toc a {
    position: relative;
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    align-items: baseline;
    min-block-size: 40px;
    padding-block: 9px;
    color: var(--ink-2);
    font: 500 var(--step--1)/1.35 var(--font-ui);
    text-decoration: none;
    transition: color var(--dur-quick) var(--ease-set);
  }
  .info-toc a::before {
    content: counter(info-toc, decimal-leading-zero);
    color: var(--ink-2);
    font: 450 var(--step--2)/1 var(--font-mono);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }
  .info-toc a:hover,
  .info-toc a[aria-current] {
    color: var(--ink);
  }
  /* The section in view: ink, and a short dry-brush stroke under its name (never colour alone). */
  .info-toc a > span {
    position: relative;
    justify-self: start;
  }
  .info-toc a > span::after {
    content: "";
    position: absolute;
    inset-inline: -1px 0;
    inset-block-end: -4px;
    block-size: 3px;
    background: currentColor;
    mask: var(--brush-underline) 0 0 / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--dur-pour) var(--ease-pour);
  }
  .info-toc a[aria-current] > span::after {
    clip-path: inset(0);
  }
  /* Below 1024 px the anchors sit under the summary as two columns of links. */
  @media (max-width: 1023.98px) {
    .info-toc {
      padding-block: var(--space-4) var(--space-2);
      border-block: 1px solid var(--rule);
    }
    .info-toc ol {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
      column-gap: var(--gutter);
    }
    .info-toc a {
      min-block-size: 44px;
    }
  }

  /* ---------------------------------------------------------------- the text */
  .info-content {
    min-inline-size: 0;
    max-inline-size: var(--measure);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.65;
    color: var(--ink);
  }
  .info-section {
    counter-increment: info-section;
    scroll-margin-block-start: var(--space-5);
  }
  .info-section + .info-section {
    margin-block-start: clamp(var(--space-7), 6vw, 5.5rem);
  }
  .info-section > h2 {
    display: grid;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
    font-size: clamp(1.625rem, 1.42rem + 0.85vw, 2.125rem);
    line-height: 1.12;
  }
  .info-section > h2::before {
    content: counter(info-section, decimal-leading-zero);
    color: var(--ink-2);
    font: 450 var(--step--2)/1 var(--font-mono);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }
  .info-content h3 {
    margin-block: var(--space-6) var(--space-2);
    font-size: var(--step-0);
    font-stretch: 100%;
    line-height: 1.4;
    letter-spacing: 0;
  }
  .info-content :is(p, ul, ol, dl, .table-scroll, .info-owner, .info-note, .info-controls) + :is(p, ul, ol, dl, .table-scroll, .info-owner, .info-note, .info-controls) {
    margin-block-start: var(--space-4);
  }
  .info-content p,
  .info-content li,
  .info-content dd {
    text-wrap: pretty;
  }
  .info-content strong {
    font-weight: 600;
  }
  .info-content a:not(.button, .link-arrow) {
    color: var(--ink);
  }
  /* Prose lists: a short ink dash instead of a bullet. */
  .info-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .info-list > li {
    position: relative;
    padding-inline-start: 1.35em;
  }
  .info-list > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.1em;
    inset-block-start: 0.82em;
    inline-size: 0.6em;
    block-size: 1px;
    background: var(--ink-2);
  }
  /* Countries and other short items: columns. */
  .info-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.25rem), 1fr));
    gap: var(--space-1) var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .info-columns > li {
    padding-block: 5px;
    border-block-end: 1px solid var(--rule);
  }

  /* Facts: label in caps, value beside it (rates, retention). */
  .info-facts {
    display: grid;
    margin: 0;
    border-block-start: 1px solid var(--rule);
  }
  .info-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px var(--gutter);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--rule);
  }
  @media (min-width: 600px) {
    .info-facts > div {
      grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
    }
  }
  .info-facts dt {
    color: var(--ink);
    font-weight: 600;
  }
  .info-facts dd {
    margin: 0;
    color: var(--ink-2);
  }
  .info-facts dd strong {
    color: var(--ink);
  }
  .info-facts .mono {
    font-size: 0.94em;
  }

  /* A quiet note under a fact. */
  .info-note {
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.55;
  }

  /* Owner placeholder blocks (preview only): masking tape, never mistaken for content. */
  .info-owner {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px dashed var(--lamp);
    border-radius: var(--radius-1);
    background: color-mix(in oklab, var(--lamp) 6%, transparent);
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.55;
  }
  .info-owner > p {
    margin: 0;
  }
  .info-owner strong {
    color: var(--ink);
  }
  span[data-owner] {
    display: inline;
  }
  .info-inline-owner {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: var(--space-2);
    vertical-align: baseline;
    color: var(--ink-2);
    font-size: var(--step--1);
  }

  /* Tables in the text (storage keys, processors, rates). */
  .info-content .table {
    font-size: var(--step--1);
  }
  .info-content .table td,
  .info-content .table th {
    vertical-align: top;
  }
  .info-content .table code {
    color: var(--ink);
    font-size: 0.95em;
    white-space: nowrap;
  }
  .info-content .table th[scope="row"] {
    min-inline-size: 8.5rem;
  }

  code {
    padding: 0.08em 0.3em;
    border-radius: var(--radius-1);
    background: color-mix(in oklab, var(--ink) 7%, transparent);
  }

  /* Live controls inside the text (Accessibility: Lamp and Motion; Privacy: clear device data). */
  .info-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--raised);
    box-shadow: var(--e1);
  }
  .info-controls__label {
    color: var(--ink-2);
    font: 600 var(--step--2)/1.3 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .info-controls .info-note {
    flex: 1 1 18rem;
    margin: 0;
  }
  /* The result of a control: a status region that is present (and empty) from the start. */
  .info-content .info-result:empty {
    margin: 0;
  }
  .info-result {
    color: var(--ink);
  }

  /* FAQ: disclosure groups under each topic. */
  .info-faq {
    display: grid;
  }
  .info-faq .disclosure > summary {
    padding-block: var(--space-4);
    font-size: var(--step-0);
  }
  .info-faq .disclosure > :not(summary) {
    color: var(--ink-2);
  }
  .info-faq .disclosure > :not(summary) a,
  .info-faq .disclosure > :not(summary) strong {
    color: var(--ink);
  }
  .info-faq .disclosure[open] > summary {
    color: var(--ink);
  }
  .info-faq .info-owner {
    margin-block: var(--space-2) var(--space-5);
    margin-inline-start: calc(16px + var(--space-3));
  }

  .info-closing {
    margin-block-start: clamp(var(--space-7), 6vw, 5.5rem);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--rule);
    color: var(--ink-2);
  }
  .info-closing a {
    color: var(--ink);
  }

  @media (forced-colors: active) {
    .info-toc a > span::after {
      forced-color-adjust: none;
      background: CanvasText;
    }
    .info-owner {
      border-color: CanvasText;
    }
    .info-list > li::before {
      forced-color-adjust: none;
      background: CanvasText;
    }
  }

  @media print {
    .info-toc,
    .info-controls {
      display: none;
    }
    .info-content {
      max-inline-size: none;
    }
  }
}