/* Storytailor Support (storytailor.com/support): owner-picked Figma option A, "topics first"
   (6Ri3KOHJhByb488Sa0sXVt, page 1989:841). Every value is a Lamplight token from lamplight.css. Daylight by
   default; Lamplight ([data-light="night"]) swaps the same token names, so nothing here is mode-specific.
   Breakpoint: phone frames are 390 wide, desktop frames 1440; below 768 the phone composition applies. */

/* Type steps that change with the breakpoint. Values are the Figma text styles, as in lamplight.css
   (Display lg/md/sm, Title lg/md/xs, Text lg/md). Static text uses the t-* classes directly. */
.su-page {
  --su-display-lg: 500 40px/48px var(--font-display);  --su-display-lg-track: -1.1px;
  --su-display-md: 500 36px/42px var(--font-display);  --su-display-md-track: -1px;
  --su-display-sm: 500 32px/40px var(--font-display);  --su-display-sm-track: -0.8px;
  --su-title-lg: 500 28px/34px var(--font-display);    --su-title-lg-track: -0.6px;
  --su-title-md: 500 24px/30px var(--font-display);    --su-title-md-track: -0.4px;
  --su-title-xs: 500 20px/28px var(--font-display);    --su-title-xs-track: -0.2px;
  --su-text-lg-medium: 500 17px/24px var(--font-body); --su-text-lg-medium-track: -0.1px;
  --su-text-lg: 400 17px/24px var(--font-body);
  --su-text-md-medium: 500 15px/24px var(--font-body);
  --su-text-md: 400 15px/24px var(--font-body);
  --su-text-sm-medium: 500 14px/20px var(--font-body);
  --su-text-2xs: 400 12px/18px var(--font-body);
  --su-text-md-lh: 24px;
  --su-gutter: var(--container-margin-desktop);
}
@media (max-width: 767px) { .su-page { --su-gutter: var(--container-margin-mobile); } }

body.su-page { margin: 0; background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.su-page :where(h1, h2, h3) { text-wrap: balance; }
.su-page :is(.su-hero__title, .su-topic-head__title, .su-article__title, .su-section__title, .su-topic-group__title, .su-lead__title, .su-card__title, .su-empty__title, .su-error__title) { font-variation-settings: "opsz" 32; }
.su-page :where(p, li) { text-wrap: pretty; }
.su-page :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.su-page :where(ul, ol) { padding: 0; list-style: none; }
.su-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.su-icon { flex: none; display: block; color: inherit; }
.su-main { box-sizing: border-box; outline: none; overflow-wrap: break-word; }
.su-main a { color: inherit; }
.su-page { --su-focus: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--border-focus); }
.su-main :focus-visible { outline: none; box-shadow: var(--su-focus); }

/* ---------- shared components ---------- */
.su-plate { flex: none; display: grid; place-items: center; width: var(--size-control-md); height: var(--size-control-md); border-radius: var(--radius-full); background: var(--bg-quiet); color: var(--fg-primary); }
.su-plate--raised { background: var(--bg-raised); }

.su-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-md); height: var(--size-control-md); padding: 0 calc(var(--spacing-xl) + var(--spacing-xxs)) 0 var(--spacing-xl); border: 0; border-radius: var(--radius-full); font-family: var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); white-space: nowrap; }
.su-main .su-button { color: var(--text-primary); }
.su-button--control { background: var(--bg-control); }
.su-button--control:hover { background: var(--bg-sunk); }
.su-main .su-button--inverse { background: var(--bg-inverse); color: var(--text-on-inverse); }
.su-button--inverse:hover { background: var(--bg-inverse-hover); }

/* Settings row (1119:1334), Detail type, inside a row group card. */
.su-group { box-sizing: border-box; width: 100%; margin: 0; background: var(--bg-raised); border: 1px solid var(--border-hairline); border-radius: var(--radius-2xl); overflow: hidden; }
.su-group > li + li { box-shadow: inset 0 1px 0 var(--border-hairline); }
.su-row { box-sizing: border-box; display: flex; align-items: center; gap: var(--spacing-lg); min-height: calc(var(--size-control-lg) + var(--spacing-lg)); padding: var(--spacing-lg) var(--spacing-xl); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard); }
.su-row:hover { background: var(--bg-quiet); }
.su-row:focus-visible { box-shadow: inset 0 0 0 2px var(--border-focus); }
.su-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.su-row__title { color: var(--text-primary); text-wrap: balance; }
.su-row__note { color: var(--text-tertiary); text-wrap: balance; }
.su-row__chevron { flex: none; color: var(--fg-tertiary); }

/* Search field (890:4338). Filled: control fill + Clear. Focused: no fill, focus edge. */
.su-search { position: relative; width: 100%; }
.su-search__field { box-sizing: border-box; display: flex; align-items: center; gap: var(--spacing-md); height: var(--size-control-lg); padding: 0 var(--spacing-xs) 0 calc(var(--spacing-lg) + var(--spacing-xxs)); border-radius: var(--radius-full); background: var(--bg-control); box-shadow: inset 0 0 0 1px transparent; transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.su-search__field:focus-within { background: transparent; box-shadow: inset 0 0 0 1px var(--border-focus); }
.su-search__icon { flex: none; color: var(--fg-tertiary); }
.su-search__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--text-primary); outline: none; appearance: none; -webkit-appearance: none; }
.su-main .su-search__input:focus-visible { box-shadow: none; }
.su-search__input::placeholder { color: var(--text-placeholder); opacity: 1; }
.su-search__input::-webkit-search-cancel-button { display: none; }
.su-search__clear { position: relative; flex: none; display: grid; place-items: center; width: calc(var(--size-control-md) - var(--spacing-xs)); height: calc(var(--size-control-md) - var(--spacing-xs)); padding: 0; border: 0; border-radius: var(--radius-full); background: none; color: var(--fg-secondary); cursor: pointer; }
.su-search__clear:hover { background: var(--bg-control); }
.su-search__clear::before { content: ""; position: absolute; inset: calc(-1 * var(--spacing-xs)); }
.su-search__clear[hidden] { display: none; }

/* Suggestions (2003:3895): a panel under the field that floats over the page while typing. */
.su-results { position: absolute; z-index: 5; top: calc(100% + var(--spacing-md)); left: 0; right: 0; }
.su-results[hidden] { display: none; }
.su-results .su-group { box-shadow: var(--shadow-menu); }
.su-row--all { min-height: 0; }
.su-row--all .su-row__title { color: var(--text-secondary); }
.su-row[aria-selected="true"] { background: var(--bg-quiet); }
.su-results__mark { color: var(--text-primary); }

/* Results mode (Enter or "See all"): the hero steps aside and results sit in the page (1998:2240). */
.su-page[data-results-mode] .su-results { position: static; margin-top: var(--spacing-3xl); }
.su-page[data-results-mode] .su-results .su-group { box-shadow: none; }

/* No results card (1998:2240): raised, no edge; the nested row group keeps its own edge. */
.su-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--spacing-xl); padding: var(--spacing-3xl); border-radius: var(--radius-2xl); background: var(--bg-raised); }
.su-results .su-card { box-shadow: var(--shadow-menu); }
.su-page[data-results-mode] .su-results .su-card { box-shadow: none; }
.su-card__title { font: var(--su-title-xs); letter-spacing: var(--su-title-xs-track); }
.su-card__hint { color: var(--text-secondary); }

/* Skeleton (1155:9): bg-skeleton with one synced shine band; still for reduced motion. */
.su-skeleton { display: block; height: var(--spacing-lg); border-radius: var(--radius-full); background: linear-gradient(90deg, var(--bg-skeleton) 0%, var(--bg-skeleton-shine) 50%, var(--bg-skeleton) 100%) 0 0 / 200% 100%; animation: su-shine 1.6s var(--ease-standard) infinite; }
.su-skeleton--short { width: 50%; }
@keyframes su-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .su-skeleton { animation: none; background: var(--bg-skeleton); } }
.su-row--skeleton { gap: var(--spacing-md); flex-direction: column; align-items: stretch; justify-content: center; }

/* Page error (1161:158), "Help is resting" (1998:2332). */
.su-error { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3xl); padding: var(--spacing-6xl) 0; text-align: center; }
.su-error__art { width: calc(var(--size-avatar-xl) * 2 + var(--spacing-md)); height: calc(var(--size-avatar-xl) * 2 + var(--spacing-md)); border-radius: var(--radius-2xl); object-fit: cover; }
.su-error__text { display: flex; flex-direction: column; gap: var(--spacing-md); }
.su-error__title { font: var(--su-title-md); letter-spacing: var(--su-title-md-track); }
.su-error__body { color: var(--text-secondary); }
.su-error__ref { color: var(--text-tertiary); }

/* Status banner (1161:398), Kind=Offline. Sits inside the page margins, under the nav. */
.su-status { box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: var(--spacing-lg); min-height: calc(var(--size-control-lg) + var(--spacing-lg)); padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-xl); border-radius: var(--radius-3xl); background: var(--bg-control); color: var(--text-primary); text-align: left; }
.su-status[hidden] { display: none; }
.su-status__text { display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.su-status__body { color: var(--text-secondary); }

/* Breadcrumb (desktop) and back link (phone). */
.su-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md); }
.su-crumbs a, .su-back { color: var(--text-secondary); text-decoration: none; }
.su-crumbs a:hover, .su-back:hover { color: var(--text-primary); }
.su-crumbs__sep { display: block; color: var(--fg-secondary); }
.su-back { display: none; align-items: center; gap: var(--spacing-xs); width: fit-content; }
@media (max-width: 767px) { .su-crumbs { display: none; } .su-back { display: inline-flex; padding-block: var(--spacing-lg); margin-block: calc(-1 * var(--spacing-lg)); } }

/* ---------- home (1991:841 desktop, 1997:1862 phone) ---------- */
.su-hero { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2xl); padding: var(--spacing-11xl) var(--su-gutter) var(--spacing-7xl); text-align: center; }
.su-hero__eyebrow { color: var(--text-tertiary); }
.su-hero__title { font: var(--su-display-lg); letter-spacing: var(--su-display-lg-track); }
.su-hero__lede { color: var(--text-secondary); }
.su-hero__search { width: 100%; max-width: var(--container-composer-width); padding-top: var(--spacing-xl); text-align: left; }
.su-popular-searches { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-md); }
.su-popular-searches p { color: var(--text-tertiary); }
.su-popular-searches ul { display: contents; }
.su-chip { display: inline-flex; align-items: center; height: var(--size-control-sm); padding: 0 var(--spacing-lg); border-radius: var(--radius-full); background: var(--bg-control); color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.su-main .su-chip { color: var(--text-secondary); }
.su-chip:hover { background: var(--bg-sunk); }
.su-page[data-typing] .su-hero__lede, .su-page[data-typing] .su-popular-searches { display: none; }
.su-page[data-results-mode] :is(.su-hero__eyebrow, .su-hero__title, .su-hero__lede, .su-popular-searches) { display: none; }
.su-page[data-results-mode] .su-hero { padding-top: calc(var(--spacing-7xl) * 2); }
.su-page[data-results-mode] .su-hero__search { padding-top: 0; }
.su-page[data-help-error] .su-results .su-card { padding: 0; background: none; }
.su-page[data-help-error] .su-error { padding: var(--spacing-6xl) 0; }

.su-home__body { box-sizing: border-box; width: min(100% - 2 * var(--su-gutter), var(--container-content-max)); margin: 0 auto; padding-bottom: var(--spacing-8xl); display: flex; flex-direction: column; gap: var(--spacing-3xl); }
.su-page[data-results-mode] [data-home-body] { display: none; }
.su-section { display: flex; flex-direction: column; gap: var(--spacing-3xl); }
.su-section__title { font: var(--su-title-md); letter-spacing: var(--su-title-md-track); }
.su-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-3xl); }
.su-topic { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xl); padding: var(--spacing-3xl); border-radius: var(--radius-2xl); background: var(--bg-raised); text-decoration: none; transition: box-shadow var(--duration-base) var(--ease-standard); }
.su-topic:hover { box-shadow: var(--shadow-raised); }
.su-topic__text { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.su-topic__title { font: var(--su-text-lg-medium); letter-spacing: var(--su-text-lg-medium-track); color: var(--text-primary); }
.su-topic__desc { color: var(--text-secondary); }
.su-topic__short, .su-topic__chevron { display: none; }
.su-popular { gap: var(--spacing-lg); padding-top: var(--spacing-4xl); }
.su-popular__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3xl); align-items: start; }
.su-safety { display: flex; align-items: center; gap: var(--spacing-xl); padding: var(--spacing-3xl); border-radius: var(--radius-2xl); background: var(--bg-quiet); }
.su-safety__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.su-safety__text p { color: var(--text-secondary); }

@media (max-width: 1023px) and (min-width: 768px) {
  .su-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .su-hero { align-items: stretch; gap: var(--spacing-lg); padding: calc(var(--spacing-8xl) + var(--spacing-3xl)) var(--su-gutter) 0; text-align: left; }
  .su-page[data-results-mode] .su-hero { padding: calc(var(--spacing-8xl) + var(--spacing-3xl)) var(--su-gutter) var(--spacing-7xl); }
  .su-safety .su-button { height: var(--size-control-lg); }
  .su-hero__title { font: var(--su-display-sm); letter-spacing: var(--su-display-sm-track); }
  .su-hero__lede, .su-popular-searches { display: none; }
  .su-hero__search { padding-top: var(--spacing-lg); }
  .su-page[data-typing] :is(.su-hero__eyebrow, .su-hero__title) { display: none; }
  .su-page[data-typing] [data-home-body] { visibility: hidden; }
  .su-home__body { padding: var(--spacing-3xl) 0 var(--spacing-7xl); }
  .su-section__title { font: var(--su-title-xs); letter-spacing: var(--su-title-xs-track); }
  .su-section { gap: var(--spacing-lg); }
  #su-topics-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* Topic tiles become one row group of Settings rows (no icons, short lines). */
  .su-topics { display: block; background: var(--bg-raised); border: 1px solid var(--border-hairline); border-radius: var(--radius-2xl); overflow: hidden; }
  .su-topics > li + li { box-shadow: inset 0 1px 0 var(--border-hairline); }
  .su-topic { flex-direction: row; align-items: center; gap: var(--spacing-lg); min-height: var(--size-hero-lg); padding: var(--spacing-lg) var(--spacing-xl); border-radius: 0; }
  .su-topic:hover { box-shadow: none; background: var(--bg-quiet); }
  .su-topic .su-plate, .su-topic__desc { display: none; }
  .su-topic__text { flex: 1; min-width: 0; gap: var(--spacing-xxs); }
  .su-topic__title { font: var(--su-text-sm-medium); letter-spacing: 0; }
  .su-topic__short { display: block; color: var(--text-tertiary); }
  .su-topic__chevron { display: block; color: var(--fg-tertiary); }
  .su-popular { padding-top: 0; }
  .su-popular__columns { display: block; }
  .su-popular__group--more { display: none; }
  .su-safety { flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); padding: var(--spacing-2xl); }
  .su-row { min-height: var(--size-hero-lg); }
}

/* ---------- topic (2003:3527 desktop, 2003:3718 phone) ---------- */
.su-column { width: min(100% - 2 * var(--su-gutter), var(--container-reading-max)); margin: 0 auto; padding: calc(var(--spacing-7xl) * 2) 0 var(--spacing-9xl); display: flex; flex-direction: column; gap: var(--spacing-3xl); }
.su-topic-head { display: flex; align-items: center; gap: var(--spacing-xl); }
.su-topic-head > div { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.su-topic-head__title { font: var(--su-display-sm); letter-spacing: var(--su-display-sm-track); }
.su-topic-head__desc { color: var(--text-secondary); }
.su-topic-body { display: flex; flex-direction: column; gap: var(--spacing-3xl); }
.su-topic-group { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.su-topic-group__title { font: var(--su-title-xs); letter-spacing: var(--su-title-xs-track); }
.su-empty { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--spacing-xl); padding: var(--spacing-3xl); border-radius: var(--radius-2xl); background: var(--bg-raised); }
.su-empty__title { font: var(--su-title-xs); letter-spacing: var(--su-title-xs-track); }
.su-empty p { color: var(--text-secondary); }
.su-page[data-results-mode] .su-topic-head { display: none; }
@media (max-width: 767px) {
  .su-column { padding: calc(var(--spacing-8xl) + var(--spacing-3xl)) 0 var(--spacing-7xl); }
  .su-topic-head .su-plate, .su-topic-head__desc { display: none; }
  .su-topic-head__title { font: var(--su-title-lg); letter-spacing: var(--su-title-lg-track); }
  .su-topic-group__title { font: var(--su-text-lg-medium); letter-spacing: var(--su-text-lg-medium-track); }
  .su-empty { padding: var(--spacing-2xl); }
}

/* ---------- article (1993:1038 desktop, 1997:2100 phone) ---------- */
.su-article-layout { width: min(100% - 2 * var(--su-gutter), var(--container-content-max)); margin: 0 auto; padding: calc(var(--spacing-7xl) * 2) 0 var(--spacing-9xl); display: grid; grid-template-columns: minmax(0, var(--container-reading-max)) minmax(0, 1fr); gap: var(--spacing-7xl); align-items: start; }
.su-article { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-3xl); }
.su-article > * { max-width: 100%; }
.su-article__head { display: flex; flex-direction: column; gap: var(--spacing-md); width: 100%; }
.su-article__title { font: var(--su-display-md); letter-spacing: var(--su-display-md-track); }
.su-article__meta { color: var(--text-tertiary); }
.su-callout { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-2xl) var(--spacing-3xl); border-radius: var(--radius-2xl); background: var(--bg-quiet); }
.su-callout__eyebrow { color: var(--text-tertiary); }
.su-callout__text { font: var(--su-text-lg-medium); letter-spacing: var(--su-text-lg-medium-track); }
.su-prose { display: flex; flex-direction: column; gap: var(--spacing-3xl); width: 100%; font: var(--su-text-lg); }
.su-prose strong { font-weight: 500; }
.su-prose a:not(.su-button) { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--fg-tertiary); text-underline-offset: var(--spacing-xs); }
.su-prose a:not(.su-button):hover { text-decoration-color: currentColor; }
.su-steps { display: flex; flex-direction: column; gap: var(--spacing-xl); }
.su-steps li { display: flex; align-items: flex-start; gap: var(--spacing-lg); }
.su-step__n { flex: none; display: grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm); border-radius: var(--radius-full); background: var(--bg-quiet); font: var(--su-text-sm-medium); }
.su-step__text { flex: 1; min-width: 0; padding-top: var(--spacing-xs); }
.su-list { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.su-list li { position: relative; padding-left: var(--spacing-3xl); }
.su-list li::before { content: ""; position: absolute; left: var(--spacing-md); top: calc(var(--spacing-lg) - var(--spacing-xxs)); width: var(--spacing-sm); height: var(--spacing-sm); border-radius: var(--radius-full); background: var(--fg-tertiary); }
.su-lead { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.su-lead__title { font: var(--su-title-xs); letter-spacing: var(--su-title-xs-track); }
.su-action { display: flex; gap: var(--spacing-md); }
.su-feedback { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: var(--spacing-xl); padding: var(--spacing-3xl); border-radius: var(--radius-2xl); background: var(--bg-raised); }
.su-feedback__title { font: var(--su-text-lg-medium); letter-spacing: var(--su-text-lg-medium-track); }
.su-feedback__answers { display: flex; gap: var(--spacing-md); }
.su-feedback__answers[hidden], .su-feedback__thanks[hidden], .su-feedback__still[hidden] { display: none; }
.su-feedback__thanks, .su-feedback__still { color: var(--text-secondary); outline: none; }
.su-feedback__still a { color: var(--text-primary); font-weight: 500; }
.su-aside { display: flex; flex-direction: column; gap: var(--spacing-lg); padding-top: var(--spacing-6xl); }
.su-aside__title { color: var(--text-secondary); }
@media (max-width: 1023px) {
  .su-article-layout { grid-template-columns: minmax(0, 1fr); }
  .su-article { max-width: var(--container-reading-max); }
  .su-aside { display: none; }
}
@media (max-width: 767px) {
  .su-article-layout { padding: calc(var(--spacing-8xl) + var(--spacing-3xl)) 0 var(--spacing-7xl); }
  .su-article__title { font: var(--su-title-lg); letter-spacing: var(--su-title-lg-track); }
  .su-article__meta { display: none; }
  .su-callout { padding: var(--spacing-xl) var(--spacing-2xl); }
  .su-callout__text { font: var(--su-text-md-medium); letter-spacing: 0; }
  .su-prose { font: var(--su-text-md); }
  /* Phone steps read as numbered paragraphs, no discs (1997:2100). */
  .su-steps { gap: var(--spacing-3xl); }
  .su-steps li { display: block; }
  .su-step__n { display: inline; width: auto; height: auto; background: none; font: inherit; }
  .su-step__n::after { content: ". "; }
  .su-step__text { padding-top: 0; }
  .su-action { width: 100%; }
  .su-action .su-button { flex: 1; height: var(--size-control-lg); padding: 0 var(--spacing-2xl) 0 calc(var(--spacing-xl) + var(--spacing-xxs)); }
  .su-feedback { gap: var(--spacing-lg); padding: var(--spacing-2xl); }
  .su-feedback__title { font: var(--su-text-md-medium); letter-spacing: 0; }
  .su-feedback__answers .su-button { flex: 1; height: var(--size-control-lg); }
}

/* ---------- safety report (owner picked A, 2012:3931 desktop, 2012:4078 phone) ---------- */
.su-report__form, .su-report-form { display: flex; flex-direction: column; gap: var(--spacing-3xl); }
.su-report__form[hidden] { display: none; }
.su-report__head { display: flex; flex-direction: column; gap: var(--spacing-3xl); }
.su-report__eyebrow { color: var(--text-tertiary); }
.su-report__title { font: var(--su-title-lg); letter-spacing: var(--su-title-lg-track); font-variation-settings: "opsz" 32; }
.su-report__lede { color: var(--text-secondary); }
.su-narrow { display: none; }
.su-report__leave { color: var(--text-tertiary); }
.su-report__actions { display: flex; justify-content: flex-end; gap: var(--spacing-md); }
.su-button:disabled, .su-button[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.su-main .su-button--tertiary { background: none; box-shadow: inset 0 0 0 1px var(--border-hairline); }
.su-button--tertiary:hover { background: var(--bg-quiet); }
.su-honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Emergency note and Inline error (1161:271, Kind=Row): tile 20 + inset 16 = radius-modal 36, concentric. */
.su-note, .su-inline-error { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-xl); border-radius: var(--radius-modal); background: var(--bg-quiet); }
.su-inline-error[hidden] { display: none; }
.su-note__tile, .su-inline-error__tile { flex: none; display: grid; place-items: center; width: var(--size-control-md); height: var(--size-control-md); border-radius: var(--radius-full); color: var(--fg-primary); }
.su-note__tile { background: var(--bg-raised); }
.su-inline-error__tile { background: var(--bg-control); }
.su-note__text, .su-inline-error__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.su-note__body { color: var(--text-secondary); }
.su-inline-error__body { color: var(--text-tertiary); }

/* Field (890:4207), Select (890:4270), Textarea (890:4291): the label rests inside, then rises above the value. */
.su-control { display: flex; flex-direction: column; gap: var(--spacing-sm); min-width: 0; }
.su-hint { color: var(--text-tertiary); }
.su-hint[hidden] { display: none; }
.su-control[data-invalid] .su-hint { color: var(--text-error); }
.su-field, .su-select { position: relative; box-sizing: border-box; height: var(--size-hero-md); border-radius: var(--radius-md); background: var(--bg-field); }
.su-control[data-invalid] :is(.su-field, .su-select) { box-shadow: inset 0 0 0 1px var(--border-error); }
.su-field:focus-within, .su-select:focus-within { box-shadow: inset 0 0 0 1px var(--border-focus); }
.su-field__input { box-sizing: border-box; display: block; width: 100%; height: 100%; margin: 0; padding: calc(var(--spacing-xl) + var(--spacing-xxs)) var(--spacing-xl) 0; border: 0; border-radius: inherit; background: none; color: var(--text-primary); outline: none; text-overflow: ellipsis; }
.su-field__label { position: absolute; left: var(--spacing-xl); right: var(--spacing-xl); top: 50%; transform: translateY(-50%); font: var(--su-text-md); color: var(--text-placeholder); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: top var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), font-size var(--duration-fast) var(--ease-standard); }
.su-field__input:focus + .su-field__label, .su-field__input:not(:placeholder-shown) + .su-field__label { top: var(--spacing-xs); transform: none; font: var(--su-text-2xs); color: var(--text-tertiary); }
.su-field__input:placeholder-shown:not(:focus) { padding-top: 0; color: transparent; }
.su-main .su-field__input:focus-visible, .su-main .su-select__input:focus-visible { box-shadow: none; }
.su-field--area { height: auto; min-height: calc(var(--spacing-11xl) - var(--spacing-3xl)); } /* Textarea box 136 */
.su-field--area .su-field__input { min-height: inherit; max-height: calc(var(--su-text-md-lh) * 8 + var(--spacing-4xl) + var(--spacing-xl)); padding: 0 var(--spacing-xl); border-style: solid; border-color: transparent; border-width: calc(var(--spacing-lg) + var(--spacing-xl) + var(--spacing-xxs) + var(--spacing-xs)) 0 var(--spacing-lg); resize: none; overflow-y: auto; }
.su-field--area .su-field__label { top: var(--spacing-lg); transform: none; }
.su-field--area .su-field__input:focus + .su-field__label, .su-field--area .su-field__input:not(:placeholder-shown) + .su-field__label { top: var(--spacing-lg); }
.su-field--area .su-field__input:placeholder-shown:not(:focus) { padding-top: 0; border-top-width: var(--spacing-lg); }
.su-meta { display: flex; justify-content: space-between; gap: var(--spacing-md); }
.su-count { flex: none; color: var(--text-tertiary); }
.su-count--over { color: var(--text-error); }
.su-select__label { position: absolute; left: var(--spacing-xl); top: var(--spacing-xs); color: var(--text-tertiary); pointer-events: none; }
.su-select__input { box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: calc(var(--spacing-xl) + var(--spacing-xxs)) calc(var(--spacing-xl) + var(--size-icon-md) + var(--spacing-md)) 0 var(--spacing-xl); border: 0; border-radius: inherit; background: none; color: var(--text-primary); outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.su-select__input:invalid { color: var(--text-placeholder); }
.su-select__input option { color: var(--text-primary); background: var(--bg-raised); }
.su-select__icon { position: absolute; right: var(--spacing-xl); top: 50%; transform: translateY(-50%); color: var(--fg-secondary); pointer-events: none; }
.su-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3xl); align-items: start; }

/* Sent (2016:4432) */
.su-sent { display: flex; flex-direction: column; gap: var(--spacing-3xl); outline: none; }
.su-sent[hidden] { display: none; }
.su-sent__card { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xl); padding: var(--spacing-3xl); border-radius: var(--radius-2xl); background: var(--bg-raised); text-align: center; }
.su-sent__title { font: var(--su-title-md); letter-spacing: var(--su-title-md-track); font-variation-settings: "opsz" 32; }
.su-sent__body { color: var(--text-secondary); }
.su-email { overflow-wrap: anywhere; }
.su-sent__ref { display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.su-sent__ref p:first-child { color: var(--text-tertiary); }
.su-sent__ref p:last-child { overflow-wrap: anywhere; }
.su-sent__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); }

@media (max-width: 767px) {
  .su-wide { display: none; }
  .su-narrow { display: inline; }
  .su-field, .su-select { height: var(--size-hero-lg); }
  .su-field--area { height: auto; }
  .su-pair { grid-template-columns: minmax(0, 1fr); }
  .su-report__actions .su-button { flex: 1; height: var(--size-control-lg); padding: 0 var(--spacing-2xl) 0 calc(var(--spacing-xl) + var(--spacing-xxs)); }
  .su-inline-error__tile { width: var(--size-control-lg); height: var(--size-control-lg); }
  .su-sent__actions .su-button { height: var(--size-control-lg); }
  .su-field--area .su-field__input { max-height: calc(var(--su-text-md-lh) * 10 + var(--spacing-4xl) + var(--spacing-xl)); }
}