/* Hallmark · macrostructure: Long Document · tone: calm, factual · anchor hue: brand blue
 * Audience: current and prospective iOS users. Use: help and policy reading.
 * Theme: Editorial structure + inherited brand. Nav: N1a. Footer: Ft2.
 * Enrichment: none. Motion: none. Companion pages share one system.
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3
 * Verified: contrast 40–41; applicable chrome, tokens and responsive gates.
 */
@import url("./tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { background: var(--color-paper); color: var(--color-ink); }
body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.8; }
a { color: var(--color-accent); text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
a:active { background: var(--color-accent-soft); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-small); }
.skip-link { position: absolute; top: -120px; left: var(--space-md); background: var(--color-paper); padding: var(--space-sm) var(--space-md); z-index: 1; }
.skip-link:focus { top: var(--space-sm); }
.shell { max-width: 1088px; margin-inline: auto; padding-inline: var(--space-xl); }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding-block: var(--space-lg); border-bottom: var(--rule-thin) solid var(--color-rule); }
.wordmark { font-size: 1.25rem; font-weight: 650; color: var(--color-ink); text-decoration: none; }
.site-header a, .site-footer a, .contents a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; line-height: 1; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); align-items: center; }
.site-nav a { text-decoration: none; color: var(--color-muted); }
.site-nav a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.site-nav .language-link { color: var(--color-accent); }
main { padding-block: var(--space-2xl) var(--space-3xl); }
.intro { max-width: 70ch; margin-left: 240px; }
h1, h2 { overflow-wrap: anywhere; min-width: 0; font-style: normal; }
h1 { font-family: var(--font-display); font-size: var(--text-display); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 var(--space-lg); }
h2 { font-size: var(--text-heading); font-weight: 600; line-height: 1.5; margin: 0 0 var(--space-md); }
p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }
.lede { font-size: 1.125rem; color: var(--color-muted); }
.draft-notice { margin-block: var(--space-lg) var(--space-xl); padding: var(--space-md) var(--space-lg); border-left: 2px solid var(--color-accent); background: var(--color-accent-soft); font-size: var(--text-small); }
.draft-notice strong { display: block; font-weight: 600; }
.document-layout { display: grid; grid-template-columns: 192px minmax(0, 70ch); gap: var(--space-2xl); align-items: start; }
.contents { font-size: var(--text-small); padding-top: var(--space-lg); border-top: var(--rule-thin) solid var(--color-rule); }
.contents p { color: var(--color-muted); margin-bottom: var(--space-sm); }
.contents ul { list-style: none; margin: 0; padding: 0; }
.contents a { text-decoration: none; }
.document-body { min-width: 0; max-width: 70ch; }
.document-body a { white-space: nowrap; }
a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }
.document-body section { padding-block: var(--space-lg) var(--space-xl); border-top: var(--rule-thin) solid var(--color-rule); scroll-margin-top: var(--space-lg); }
.metadata { margin-block: var(--space-lg) var(--space-xl); font-size: var(--text-small); }
.metadata div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xs); }
.metadata dt { color: var(--color-muted); }
.metadata dd { margin: 0; }
.contact-note { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-thin) solid var(--color-rule); }
.checklist { padding-left: var(--space-lg); margin: var(--space-md) 0; }
.checklist li { padding-bottom: var(--space-xs); }
.site-footer { border-top: var(--rule-thin) solid var(--color-rule); padding-block: var(--space-lg); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm) var(--space-xl); color: var(--color-muted); font-size: var(--text-small); }
.site-footer p { margin: 0; }

@media (max-width: 767px) {
  .shell { padding-inline: var(--space-lg); }
  .site-header { gap: var(--space-sm); }
  .site-nav { gap: var(--space-xs) var(--space-md); }
  main { padding-top: var(--space-xl); }
  .intro { margin-left: 0; }
  .document-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .contents { padding-top: var(--space-md); }
  .contents ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
  .draft-notice { padding: var(--space-md); }
}
@media (max-width: 359px) {
  .site-nav { width: 100%; }
}
@media (max-width: 479px) {
  .metadata div { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: var(--space-sm); }
  .metadata dd { overflow-wrap: anywhere; }
}
@media print {
  .site-nav, .skip-link, .contents, .site-footer a { display: none; }
  .shell { max-width: none; padding: 0; }
  .intro { margin-left: 0; }
  .document-layout { display: block; }
  .document-body section { break-inside: avoid; }
}