/* Shared by both skins: the few pieces the page needs that the handoffs
   describe in words rather than CSS. Colours come from each skin's tokens
   (Events: --ink / --ink-2 / --line; Agency: --fg / --fg-muted / --border). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saved-note:empty { display: none; }
.saved-note { display: inline-flex; align-items: center; gap: 6px; }

/* Done cards collapse to title + Done + one line + "Change" (both handoffs). */
.collapse > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.collapse > summary::-webkit-details-marker { display: none; }
.collapse__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; }
.collapse__note { color: var(--ink-2, var(--fg-muted)); font-weight: 500; overflow-wrap: anywhere; }
.collapse__change { font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: var(--accent, var(--fg)); }
.collapse[open] .collapse__row { display: none; }
.collapse__body { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.collapse > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }

/* Events progress label carries a check icon when complete. */
.progress-line__label { display: flex; align-items: center; gap: 8px; }

/* Upload rows in flight, both skins. */
.file--uploading .bar { width: 100%; }
.upmsg:empty { display: none; }
.upmsg { display: flex; flex-direction: column; gap: 8px; }

/* Link ended / not found. */
.ended { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ended .page-title, .ended h1 { margin: 0; }

/* Agency: the README's spacing that its stylesheet doesn't carry ("Inside card
   gap 16. Field label gap 8. Link fields gap 16."). */
body[data-brand="agency"] .form { display: flex; flex-direction: column; gap: 16px; }
body[data-brand="agency"] .note-panel { margin: 0; }

/* The logo sits directly in the page's flex column (light pages only, no
   <picture> wrapper), which stretched it to full width. Keep its own shape. */
.logo { align-self: flex-start; }

/* The onboarding page (src/welcome.ts). */
.welcome-list { margin: 8px 0 4px; padding-left: 20px; line-height: 1.55; }
.welcome-list li { margin: 6px 0; }
.welcome-h { font-size: 1rem; margin: 18px 0 4px; }
.welcome-link { text-align: center; margin: 24px 0 8px; }
.next-step { border-width: 2px; }