/* Layout only. Colour, type, spacing, radius, shadow and size come from the generated design tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-base); color: var(--ink); font-family: var(--font-text); font-size: var(--type-body-size); line-height: var(--type-body-line-height); }
.display-xl, .display-lg, .display-md, .title, .subtitle, .body-lg, .body, .body-sm, .meta, .meta-sm, .card-title, .card-prompt, .affirmation { margin: 0; }
.card-title { text-transform: uppercase; color: var(--brand-rose); }
.meta, .meta-sm { color: var(--ink-muted); text-transform: uppercase; }
.muted { color: var(--ink-muted); }
a { color: var(--brand-rose); text-underline-offset: 0.2em; }
:focus-visible { outline: var(--border-focus) solid var(--focus-ring); outline-offset: var(--space-1); border-radius: var(--radius-xs); }
.skip { position: absolute; left: var(--space-4); top: calc(-1 * var(--space-24)); background: var(--brand-rose); color: var(--on-brand); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); z-index: 2; }
.skip:focus { top: var(--space-4); }
.site-header, .site-footer { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); align-items: center; justify-content: space-between; padding: var(--space-6); max-width: 1120px; margin: 0 auto; }
.site-header nav, .site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.site-header nav a, .site-footer nav a { color: var(--ink); text-decoration: none; min-height: var(--touch-android); display: inline-flex; align-items: center; border-bottom: var(--border-thin) solid transparent; }
.site-header nav a:hover, .site-footer nav a:hover { border-color: var(--brand-gold); }
nav a[aria-current="page"] { color: var(--brand-rose); border-color: var(--brand-rose); }
.brand { color: var(--brand-rose); text-decoration: none; }
.site-footer { border-top: var(--border-thin) solid var(--line-hairline); margin-top: var(--space-16); }
.page { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); display: grid; gap: var(--space-6); }
.page:focus { outline: none; }
.page > h1, .page > p, .page > ol, .page > dl, .page > h2, .page > section, .page > aside { max-width: var(--measure); }
.page > h2 { margin-top: var(--space-6); }
.page ol { padding-left: var(--space-6); margin: 0; }
.page li + li { margin-top: var(--space-2); }
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-12) 0; }
.hero > div { display: grid; gap: var(--space-4); max-width: var(--measure); }
.card .affirmation { overflow-wrap: anywhere; }
.card { margin: 0; justify-self: center; width: 100%; max-width: var(--card-max); aspect-ratio: 2 / 3; display: grid; align-content: center; justify-items: center; gap: var(--space-6); padding: var(--space-12); text-align: center; background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: var(--border-thin) solid var(--line-hairline); }
.band { background: var(--surface-blush); border-radius: var(--radius-lg); padding: var(--space-10); display: grid; gap: var(--space-6); }
.band > p { max-width: var(--measure); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.button { display: inline-flex; align-items: center; min-height: var(--touch-android); padding: 0 var(--space-6); border-radius: var(--radius-md); background: var(--brand-rose); color: var(--on-brand); text-decoration: none; font-weight: 600; }
.button.secondary { background: transparent; color: var(--ink); border: var(--border-thin) solid var(--line-strong); }
.notice { background: var(--surface-sunken); border-left: var(--border-focus) solid var(--brand-gold); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-6); display: grid; gap: var(--space-2); }
.placeholder { background: transparent; color: var(--status-failed); border: var(--border-thin) dashed currentColor; border-radius: var(--radius-xs); padding: 0 var(--space-1); font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
.facts, .flows { margin: 0; display: grid; gap: var(--space-4); }
.facts > div, .flows > div { display: grid; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: var(--border-thin) solid var(--line-hairline); }
.facts dd, .flows dd { margin: 0; overflow-wrap: anywhere; }
details { border-bottom: var(--border-thin) solid var(--line-hairline); padding: var(--space-3) 0; max-width: var(--measure); }
summary { cursor: pointer; min-height: var(--touch-android); display: flex; align-items: center; }
details[open] > summary { color: var(--brand-rose); }
details > p, details > ol { margin: var(--space-2) 0 var(--space-3); }
section[aria-labelledby] { margin-top: var(--space-4); }
@media (width < 1024px) { .hero { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-8) 0; } .band { padding: var(--space-6); } }
@media (width < 640px) { .site-header, .site-footer, .page { padding-left: var(--space-6); padding-right: var(--space-6); } .display-xl { font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-line-height); } .card { padding: var(--space-8); } }
@media (prefers-reduced-motion: no-preference) { a, .button { transition: color var(--motion-feedback) var(--ease-enter), border-color var(--motion-feedback) var(--ease-enter); } }
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.badge { display: inline-flex; align-items: baseline; gap: var(--space-2); min-height: var(--touch-android); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: var(--border-thin) dashed var(--line-strong); color: var(--ink); }
.page > .hero { max-width: none; }
.page .badges li + li { margin-top: 0; }

.deletion-panel { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: var(--border-thin) solid var(--line-hairline); border-radius: var(--radius-lg); min-width: 0; }
.deletion-panel [hidden] { display: none; }
.deletion-panel > *, .deletion-panel .links { min-width: 0; max-width: 100%; }
.deletion-panel .button { min-width: 0; overflow-wrap: anywhere; font: inherit; white-space: normal; text-align: left; padding-block: var(--space-3); border: var(--border-thin) solid transparent; cursor: pointer; max-width: 100%; }
.deletion-panel .button.secondary { border-color: var(--line-strong); }
.deletion-panel .button:disabled { cursor: wait; color: var(--ink-muted); background: var(--surface-sunken); }
.deletion-panel p, .deletion-panel label { overflow-wrap: anywhere; }
.deletion-panel label { display: flex; gap: var(--space-3); align-items: flex-start; }
.deletion-panel input { flex: none; accent-color: var(--brand-rose); }

.deletion-page { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.deletion-page > *, .deletion-page .notice > * { min-width: 0; }

/* The support FAQ is one column; long translated words must not set its grid minimum. */
.page:has(#sound-haptics) { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.page:has(#sound-haptics) > *, .page:has(#sound-haptics) .notice > * { min-width: 0; }