/*
 * INSPIRE WOMEN component layer
 *
 * Architecture contract:
 * - Consume semantic tokens from 01-tokens.css; never reference palette primitives here.
 * - Use CSS logical properties exclusively so the same components serve RTL and LTR.
 * - Use flex/grid gap for sibling spacing; component children do not create spacing with margins.
 * - Inline SVG icons use the --space-6 grid and a consistent SVG stroke width.
 */

/* Gallery scaffolding ----------------------------------------------------- */

.component-gallery {
  min-block-size: 100vh;
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

.component-gallery,
.component-gallery *,
.component-gallery *::before,
.component-gallery *::after {
  box-sizing: border-box;
}

.component-gallery :where(h1, h2, h3, h4, p, ul, ol, blockquote, figure) {
  margin-block: 0;
}

.component-gallery :where(ul, ol) {
  padding-inline-start: 0;
}

.gallery-shell {
  display: grid;
  gap: var(--space-8);
  inline-size: 100%;
  padding-block: var(--space-8);
  padding-inline: var(--space-8);
}

.gallery-header,
.gallery-section,
.direction-panel,
.state-sample,
.component-stack,
.card__body,
.story-card__content,
.modal-shell__content,
.modal-shell__header,
.modal-shell__footer {
  display: grid;
  gap: var(--space-4);
}

.gallery-header {
  gap: var(--space-2);
}

.gallery-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.gallery-nav a {
  color: var(--color-text-accent);
  font-weight: 700;
}

.gallery-footer {
  padding-block-start: var(--space-6);
  border-block-start: var(--border-width-hairline) solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.component-gallery a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--space-11);
}

.gallery-kicker,
.direction-label,
.state-label {
  color: var(--color-text-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

[lang="ar"] :where(.direction-label, .state-label) {
  text-transform: none;
}

.direction-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
  overflow: auto;
}

.direction-panel {
  min-inline-size: 0;
  padding-block: var(--space-6);
  padding-inline: var(--space-6);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--elevation-1);
}

.state-grid,
.component-grid,
.badge-row,
.button-row,
.modal-actions {
  display: grid;
  gap: var(--space-3);
}

.state-grid,
.component-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.badge-row,
.button-row,
.modal-actions {
  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
  align-items: center;
}

.state-sample {
  min-inline-size: 0;
  align-content: start;
  padding-block: var(--space-3);
  padding-inline: var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}

.state-sample--wide {
  grid-column: 1 / -1;
}

.component-divider {
  border: 0;
  border-block-start: var(--border-width-hairline) solid var(--color-border);
  inline-size: 100%;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  inline-size: var(--border-width-hairline);
  block-size: var(--border-width-hairline);
  padding-block: 0;
  padding-inline: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shared icon and interaction contracts --------------------------------- */

.icon {
  flex: none;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[dir="rtl"] .icon--directional {
  transform: scaleX(-1);
}

:where(
  .button,
  .control,
  .component-gallery a,
  .file-upload__trigger,
  .card[tabindex],
  .accordion__summary,
  .sortable-header,
  .modal-shell__close
):focus-visible,
:where(
  .button,
  .control,
  .component-gallery a,
  .file-upload__trigger,
  .card[tabindex],
  .accordion__summary,
  .sortable-header,
  .modal-shell__close
).is-focused {
  outline: calc(var(--space-1) / 2) solid var(--color-focus-ring);
  outline-offset: calc(var(--space-1) / 2);
}

/* Buttons ---------------------------------------------------------------- */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--space-11);
  min-inline-size: max-content;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.button--primary:is(:hover, .is-hovered) {
  background: var(--color-action-primary-hover);
}

.button--primary:is(:active, .is-active) {
  background: var(--color-action-primary-active);
}

.button--secondary {
  border-color: var(--color-action-primary);
  background: var(--color-surface);
  color: var(--color-action-primary);
}

.button--secondary:is(:hover, .is-hovered) {
  background: var(--color-surface-accent);
}

.button--secondary:is(:active, .is-active) {
  border-color: var(--color-action-primary-active);
  background: var(--color-surface-muted);
  color: var(--color-action-primary-active);
}

.button--tertiary {
  background: transparent;
  color: var(--color-action-primary);
}

.button--tertiary:is(:hover, .is-hovered) {
  background: var(--color-surface-accent);
  color: var(--color-action-primary-hover);
}

.button--tertiary:is(:active, .is-active) {
  background: var(--color-surface-muted);
  color: var(--color-action-primary-active);
}

.button--gold {
  border-color: var(--color-action-secondary-text);
  background: var(--color-action-secondary);
  color: var(--color-action-secondary-text);
}

.button--gold:is(:hover, .is-hovered) {
  background: var(--color-action-secondary-hover);
  box-shadow: inset 0 0 0 var(--border-width-hairline) rgb(0 0 0 / 0.28);
}

.button--gold:is(:active, .is-active) {
  background: var(--color-action-secondary-active);
  box-shadow: inset 0 0 0 calc(var(--border-width-hairline) * 2) rgb(0 0 0 / 0.36);
}

.button:is(:disabled, [aria-disabled="true"], .is-disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.button.is-error {
  border-color: var(--color-status-rejected);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-status-rejected);
}

.button__spinner {
  display: none;
}

.button.is-loading {
  cursor: wait;
}

.button.is-loading .button__label,
.button.is-loading .icon:not(.button__spinner) {
  visibility: hidden;
}

.button.is-loading .button__spinner {
  position: absolute;
  display: block;
}

/* Form fields ------------------------------------------------------------ */

.field,
.choice-field,
.rating-field,
.file-upload {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
}

.field__label,
.choice-field__legend,
.rating-field__legend,
.file-upload__label {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}

.field__helper,
.field__message,
.file-upload__filename {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.field__message {
  min-block-size: var(--space-5);
  color: var(--color-status-rejected);
}

.field__message[data-empty="true"] {
  visibility: hidden;
}

.control {
  inline-size: 100%;
  min-block-size: var(--space-11);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-base);
  text-align: start;
}

.control::placeholder {
  color: var(--color-text-muted);
}

.control:is(:hover, .is-hovered) {
  border-color: var(--color-action-primary);
}

.control:is(:active, .is-active) {
  border-color: var(--color-action-primary-active);
  background: var(--color-surface-accent);
}

.control:is(:disabled, .is-disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  -webkit-text-fill-color: var(--color-text-muted);
  opacity: 1;
  cursor: not-allowed;
}

.field.is-error .control,
.control.is-error,
.control[aria-invalid="true"] {
  border-color: var(--color-status-rejected);
}

.choice-field.is-error .choice,
.rating-field.is-error .rating__option,
.file-upload.is-error .file-upload__surface {
  border-color: var(--color-status-rejected);
}

.control.is-loading {
  color: var(--color-text-muted);
  cursor: wait;
  background: var(--color-surface-muted);
}

textarea.control {
  min-block-size: var(--space-16);
  resize: block;
}

.select-shell {
  display: grid;
  align-items: center;
}

.select-shell > * {
  grid-area: 1 / 1;
}

.select-shell .control {
  appearance: none;
  padding-inline-end: var(--space-10);
}

.select-shell .icon {
  z-index: 1;
  position: relative;
  inset-inline-end: var(--space-3);
  justify-self: end;
  color: var(--color-text-secondary);
  pointer-events: none;
}

.choice-field,
.rating-field {
  padding-block: 0;
  padding-inline: 0;
  border: 0;
}

.choice-group {
  display: grid;
  gap: var(--space-2);
}

.choice {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-block-size: var(--space-11);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
}

.choice:is(:hover, .is-hovered) {
  border-color: var(--color-action-primary);
  background: var(--color-surface-accent);
}

.choice:is(:active, .is-active),
.choice:has(.choice__input:checked) {
  border-color: var(--color-action-primary-active);
}

.choice:has(.choice__input:focus-visible),
.choice.is-focused {
  outline: calc(var(--space-1) / 2) solid var(--color-focus-ring);
  outline-offset: calc(var(--space-1) / 2);
}

.choice__input:focus-visible,
.rating__input:focus-visible,
.file-upload input:focus-visible {
  outline: 0;
}

.choice.is-error {
  border-color: var(--color-status-rejected);
}

.choice:has(.choice__input:disabled),
.choice.is-disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.choice.is-loading {
  color: var(--color-text-muted);
  cursor: wait;
}

.choice__input,
.rating__input {
  display: grid;
  place-content: center;
  appearance: none;
  flex: none;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  margin-block: 0;
  margin-inline: 0;
  border: calc(var(--space-1) / 2) solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-action-primary);
  cursor: pointer;
}

.choice__input[type="radio"] {
  border-radius: 50%;
}

.choice__input[type="checkbox"] {
  border-radius: var(--radius-sm);
}

.choice__input::before,
.rating__input::before {
  content: "";
  inline-size: var(--space-2);
  block-size: var(--space-2);
  background: currentColor;
  opacity: 0;
}

.choice__input[type="radio"]::before,
.rating__input::before {
  border-radius: 50%;
}

.choice__input[type="checkbox"]::before {
  border-radius: var(--radius-sm);
}

.choice__input:checked::before,
.rating__input:checked::before {
  opacity: 1;
}

.choice__input:disabled,
.rating__input:disabled {
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.rating {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rating__option {
  display: grid;
  place-items: center;
  gap: var(--space-1);
  min-inline-size: var(--space-11);
  min-block-size: var(--space-11);
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.rating__option:is(:hover, .is-hovered) {
  border-color: var(--color-action-primary);
  background: var(--color-surface-accent);
}

.rating__option:has(.rating__input:checked),
.rating__option:is(:active, .is-active) {
  border-color: var(--color-action-primary-active);
  color: var(--color-action-primary-active);
}

.rating__option:has(.rating__input:focus-visible),
.rating__option.is-focused {
  outline: calc(var(--space-1) / 2) solid var(--color-focus-ring);
  outline-offset: calc(var(--space-1) / 2);
}

.rating__option.is-error {
  border-color: var(--color-status-rejected);
}

.rating__option:has(.rating__input:disabled),
.rating__option.is-disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.file-upload__surface {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  padding-inline: var(--space-4);
  border: var(--border-width-hairline) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.file-upload__trigger {
  justify-self: start;
}

.file-upload.is-hovered .file-upload__surface {
  border-color: var(--color-action-primary);
  background: var(--color-surface-accent);
}

.file-upload.is-focused .file-upload__surface {
  outline: calc(var(--space-1) / 2) solid var(--color-focus-ring);
  outline-offset: calc(var(--space-1) / 2);
}

.file-upload:has(input:focus-visible) .file-upload__surface {
  outline: calc(var(--space-1) / 2) solid var(--color-focus-ring);
  outline-offset: calc(var(--space-1) / 2);
}

.file-upload.is-active .file-upload__surface {
  border-color: var(--color-action-primary-active);
}

.file-upload.is-error .file-upload__surface {
  border-color: var(--color-status-rejected);
}

.file-upload.is-disabled .file-upload__surface {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.file-upload.is-loading .file-upload__surface {
  cursor: wait;
}

/* Cards ------------------------------------------------------------------ */

.card {
  display: grid;
  gap: var(--space-4);
  min-inline-size: 0;
  padding-block: var(--space-5);
  padding-inline: var(--space-5);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--elevation-1);
}

.card:is(:hover, .is-hovered) {
  border-color: var(--color-action-primary);
  box-shadow: var(--elevation-2);
}

.card:is(:active, .is-active) {
  border-color: var(--color-action-primary-active);
  background: var(--color-surface-accent);
}

.card.is-error {
  border-color: var(--color-status-rejected);
}

.card:is(.is-disabled, [aria-disabled="true"]) {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.card.is-loading {
  cursor: wait;
}

.card__eyebrow,
.stat-card__label,
.story-card__attribution {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.stat-card__value {
  color: var(--color-text-accent);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
}

.story-card {
  padding-block: 0;
  padding-inline: 0;
  overflow: hidden;
}

.story-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-accent);
  color: var(--color-text-accent);
}

.story-card__content {
  padding-block: var(--space-5);
  padding-inline: var(--space-5);
}

.story-card__quote {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.6;
}

/* Status badges ---------------------------------------------------------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--space-8);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: var(--border-width-hairline) solid currentColor;
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}

.status-badge::before {
  content: "";
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: 50%;
  background: currentColor;
}

.status-badge--pending {
  background: color-mix(in srgb, var(--color-status-pending) 12%, var(--color-surface));
  color: var(--color-status-pending);
}

.status-badge--review {
  border-color: var(--color-action-secondary-text);
  background: var(--color-status-review);
  color: var(--color-action-secondary-text);
}

.status-badge--eligible {
  background: color-mix(in srgb, var(--color-status-eligible) 12%, var(--color-surface));
  color: var(--color-status-eligible);
}

.status-badge--rejected {
  background: color-mix(in srgb, var(--color-status-rejected) 12%, var(--color-surface));
  color: var(--color-status-rejected);
}

.status-badge--selected {
  background: color-mix(in srgb, var(--color-status-selected) 12%, var(--color-surface));
  color: var(--color-status-selected);
}

/* Accordion -------------------------------------------------------------- */

.accordion {
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: clip;
}

.accordion:is(:hover, .is-hovered) {
  border-color: var(--color-action-primary);
}

.accordion.is-active,
.accordion[open] {
  border-color: var(--color-action-primary-active);
}

.accordion.is-error {
  border-color: var(--color-status-rejected);
}

.accordion.is-disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.accordion.is-loading {
  cursor: wait;
}

.accordion__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-4);
  align-items: center;
  min-block-size: var(--space-11);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  color: var(--color-text-primary);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary:is(:hover, .is-hovered) {
  background: var(--color-surface-accent);
}

.accordion__content {
  padding-block: var(--space-4);
  padding-inline: var(--space-4);
  border-block-start: var(--border-width-hairline) solid var(--color-border);
  color: var(--color-text-secondary);
}

.accordion[open] .accordion__icon {
  transform: rotate(180deg);
}

/* Modal and side-panel --------------------------------------------------- */

.modal-stage {
  display: grid;
  align-items: stretch;
  min-block-size: var(--space-16);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-text-primary) 62%, transparent);
  overflow: clip;
}

.modal-shell {
  display: grid;
  gap: var(--space-5);
  align-self: stretch;
  justify-self: end;
  inline-size: 75%;
  padding-block: var(--space-6);
  padding-inline: var(--space-6);
  border-inline-start: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--elevation-2);
}

.modal-shell__header {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
}

.modal-shell__close {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--space-11);
  min-block-size: var(--space-11);
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
}

.modal-shell__close:is(:hover, .is-hovered) {
  background: var(--color-surface-accent);
}

.modal-shell__close:is(:active, .is-active) {
  background: var(--color-surface-muted);
}

.modal-shell__footer {
  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
  justify-content: end;
}

.modal-dialog {
  inline-size: 75%;
  max-inline-size: 100%;
  padding-block: 0;
  padding-inline: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-primary);
}

.modal-dialog::backdrop {
  background: color-mix(in srgb, var(--color-text-primary) 62%, transparent);
}

.modal-dialog .modal-shell {
  inline-size: 100%;
  border-inline-start: 0;
  border-radius: var(--radius-lg);
}

/* Data tables ------------------------------------------------------------ */

.table-shell {
  overflow: auto;
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

.data-table th,
.data-table td {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-block-end: var(--border-width-hairline) solid var(--color-border);
  text-align: start;
  vertical-align: middle;
}

.data-table th {
  background: var(--color-surface-muted);
  font-weight: 700;
}

.data-table tbody tr:nth-child(even) {
  background: var(--color-surface-subtle);
}

.data-table tbody tr:is(:hover, .is-hovered) {
  background: var(--color-surface-accent);
}

.data-table tbody tr.is-active {
  background: var(--color-surface-muted);
}

.data-table tbody tr.is-error td:first-child {
  border-inline-start: calc(var(--space-1) / 2) solid var(--color-status-rejected);
}

.data-table tbody tr.is-disabled {
  color: var(--color-text-muted);
}

.sortable-header {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--space-11);
  min-inline-size: var(--space-11);
  padding-block: 0;
  padding-inline: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.sortable-header:is(:hover, .is-hovered) {
  color: var(--color-action-primary-hover);
}

.sortable-header:is(:active, .is-active) {
  color: var(--color-action-primary-active);
}

.sortable-header:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Form wizard progress --------------------------------------------------- */

.progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  padding-block: 0;
  padding-inline: 0;
  list-style: none;
}

.progress-step {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding-block: var(--space-3);
  padding-inline: var(--space-3);
  border-block-start: calc(var(--space-1) / 2) solid var(--color-border);
  color: var(--color-text-muted);
}

.progress-step__marker {
  display: grid;
  place-items: center;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
}

.progress-step.is-complete {
  border-color: var(--color-status-eligible);
  color: var(--color-status-eligible);
}

.progress-step.is-current {
  border-color: var(--color-action-primary);
  color: var(--color-action-primary);
}

.progress-step.is-current .progress-step__marker {
  border-color: var(--color-action-primary);
  background: var(--color-action-primary);
  color: var(--color-surface);
}

.progress-step.is-complete .progress-step__marker {
  border-color: var(--color-status-eligible);
  background: var(--color-status-eligible);
  color: var(--color-surface);
}

.progress-step.is-error {
  border-color: var(--color-status-rejected);
  color: var(--color-status-rejected);
}

.progress-step.is-disabled {
  color: var(--color-text-muted);
}

.progress-step.is-loading {
  cursor: wait;
}

/* Application wizard ---------------------------------------------------- */

.application-page,
.application-page *,
.application-page *::before,
.application-page *::after {
  box-sizing: border-box;
}

.application-page {
  min-block-size: 100vh;
  margin-block: 0;
  margin-inline: 0;
  background: var(--color-surface-subtle);
}

.application-main {
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
}

.application-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  inline-size: min(calc(100% - (2 * var(--space-5))), 75rem);
  margin-inline: auto;
}

.application-heading {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 65ch;
}

.application-heading h1 bdi {
  white-space: nowrap;
}

.programme-details .accordion__content {
  display: grid;
  gap: var(--space-5);
}

.programme-details__facts,
.programme-details__eligibility {
  display: grid;
  gap: var(--space-3);
}

.programme-details__eligibility {
  padding-inline-start: var(--space-6);
}

.progress-shell {
  overflow-x: auto;
  padding-block-end: var(--space-2);
}

.progress-steps--wizard {
  grid-template-columns: repeat(9, minmax(8rem, 1fr));
  min-inline-size: 72rem;
}

.progress-compact {
  display: none;
  margin-block: 0;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  border-block-start: calc(var(--space-1) / 2) solid var(--color-action-primary);
  color: var(--color-action-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}

.form-wizard {
  display: grid;
  gap: var(--space-8);
}

.form-step {
  scroll-margin-block-start: calc(var(--space-16) + var(--space-5));
  display: grid;
  gap: var(--space-6);
  padding-block: clamp(var(--space-6), 4vw, var(--space-10));
  padding-inline: clamp(var(--space-5), 4vw, var(--space-10));
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--elevation-1);
}

.form-step__header {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.form-step__number {
  display: grid;
  place-items: center;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: 50%;
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  font-size: var(--text-sm);
  font-weight: 700;
}

.form-step__title {
  margin-block: 0;
  color: var(--color-text-accent);
  font-size: var(--text-xl);
}

.form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.form-fields > :is(
  .form-field--full,
  .choice-field,
  .rating-field,
  .file-upload
) {
  grid-column: 1 / -1;
}

.required-marker,
.optional-marker {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.conditional-field {
  overflow: hidden;
  max-block-size: 100rem;
  padding-block: var(--space-5);
  padding-inline: var(--space-5);
  border-inline-start: calc(var(--space-1) / 2) solid var(--color-accent);
  background: var(--color-surface-accent);
  opacity: 1;
}

.conditional-field.is-concealed {
  max-block-size: 0;
  min-block-size: 0;
  padding-block: 0;
  border-inline-start-width: 0;
  opacity: 0;
  pointer-events: none;
}

.rating-scale-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.selection-counter {
  min-block-size: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  border: var(--border-width-hairline) solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface-accent);
  color: var(--color-text-primary);
}

.resume-banner p {
  margin-block: 0;
}

.resume-banner__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.file-reattach-note {
  color: var(--color-status-rejected);
}

.review-sections {
  display: grid;
  gap: var(--space-5);
}

.review-section {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-5);
  padding-inline: var(--space-5);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.review-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.review-section__header h3 {
  margin-block: 0;
  font-size: var(--text-lg);
}

.review-section__edit {
  flex: none;
  font-weight: 700;
}

.review-list {
  display: grid;
  gap: var(--space-3);
  margin-block: 0;
}

.review-list > div {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-width-hairline) solid var(--color-border);
}

.review-list > div:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.review-list dt {
  font-weight: 700;
}

.review-list dd {
  margin-block: 0;
  margin-inline: 0;
  color: var(--color-text-secondary);
}

.wizard-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: flex-end;
}

.wizard-actions:has(.wizard-back) {
  justify-content: space-between;
}

.form-success {
  display: grid;
  gap: var(--space-4);
  padding-block: clamp(var(--space-8), 7vw, var(--space-16));
  padding-inline: clamp(var(--space-5), 6vw, var(--space-12));
  border-radius: var(--radius-lg);
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  box-shadow: var(--elevation-2);
}

.form-success h2,
.form-success p {
  margin-block: 0;
  color: inherit;
}

.form-step[hidden],
.form-wizard[hidden],
.resume-banner[hidden],
.form-success[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .conditional-field {
    transition:
      max-block-size 180ms ease,
      padding-block 180ms ease,
      border-inline-start-width 180ms ease,
      opacity 140ms ease;
  }
}

@media (max-width: 47.999rem) {
  .gallery-shell {
    padding-inline: var(--space-5);
  }

  .direction-comparison {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .form-fields,
  .review-list > div {
    grid-template-columns: 1fr;
  }

  .form-step {
    padding-inline: var(--space-5);
  }

  .resume-banner {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 39.999rem) {
  .progress-steps--wizard {
    display: none;
  }

  .progress-compact {
    display: block;
  }
}

/* Skeletons -------------------------------------------------------------- */

.skeleton {
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: transparent;
}

.skeleton--text {
  inline-size: 75%;
  min-block-size: var(--space-4);
}

.skeleton--short {
  inline-size: 50%;
}

.skeleton-card {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-5);
  padding-inline: var(--space-5);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.skeleton-card__media {
  aspect-ratio: 16 / 9;
}

.skeleton-row td {
  background: var(--color-surface);
}

/* Motion exists only when the user has not requested reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :where(
    .button,
    .control,
    .choice,
    .rating__option,
    .file-upload__surface,
    .card,
    .accordion,
    .accordion__summary,
    .accordion__icon,
    .modal-shell__close,
    .sortable-header,
    .data-table tbody tr
  ) {
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      box-shadow 160ms ease,
      opacity 160ms ease,
      transform 160ms ease;
  }

  .button__spinner {
    animation: component-spin 900ms linear infinite;
  }

  .skeleton {
    animation: component-pulse 1400ms ease-in-out infinite alternate;
  }

  @keyframes component-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes component-pulse {
    to {
      opacity: 0.55;
    }
  }
}

/* Public landing page ---------------------------------------------------- */

.landing-page,
.landing-page *,
.landing-page *::before,
.landing-page *::after {
  box-sizing: border-box;
}

.landing-page {
  min-block-size: 100vh;
  margin-block: 0;
  margin-inline: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.landing-page :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) {
  margin-block: 0;
}

.landing-page :where(ul, ol) {
  padding-inline-start: 0;
}

.landing-page :where(a, button, summary):focus-visible {
  outline: calc(var(--space-1) / 2) solid var(--color-focus-ring);
  outline-offset: calc(var(--space-1) / 2);
}

.landing-hero :where(a, button, summary):focus-visible,
.stat-band :where(a, button, summary):focus-visible,
.closing-cta :where(a, button, summary):focus-visible {
  outline-color: var(--color-text-inverse);
}

.page-section {
  padding-block: clamp(var(--space-12), 8vw, calc(var(--space-16) * 2));
}

.page-section--subtle {
  background: var(--color-surface-subtle);
}

.section-shell {
  display: grid;
  gap: var(--space-8);
  inline-size: min(calc(100% - (2 * var(--space-5))), 75rem);
  margin-inline: auto;
}

.section-heading {
  max-inline-size: 18ch;
  color: var(--color-text-accent);
}


.landing-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--space-16), 10vw, calc(var(--space-16) * 2.5));
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.landing-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: var(--space-6);
  inline-size: min(calc(100% - (2 * var(--space-5))), 75rem);
  margin-inline: auto;
}

.landing-hero__headline {
  max-inline-size: 13ch;
  color: inherit;
}

.landing-hero__description {
  max-inline-size: 65ch;
  font-size: var(--text-lg);
}

.landing-hero__note {
  max-inline-size: 65ch;
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
}

.brand-motif {
  position: absolute;
  color: var(--color-text-inverse);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  pointer-events: none;
}

.brand-motif--hero {
  inset-block-start: 50%;
  inset-inline-end: max(-4rem, -4vw);
  inline-size: min(46vw, 34rem);
  opacity: 0.09;
  transform: translateY(-50%);
}

.brand-motif--footer {
  inset-block-end: -5rem;
  inset-inline-end: -4rem;
  inline-size: min(24rem, 48vw);
  opacity: 0.06;
}

.objective-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
}

.objective-list__item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  min-inline-size: 0;
}

.objective-list__icon {
  display: grid;
  place-items: center;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-accent);
  color: var(--color-action-primary);
}

.objective-list__icon .icon {
  inline-size: var(--space-5);
  block-size: var(--space-5);
}

.stat-band {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.stat-band .section-heading {
  color: inherit;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.stat-card--inverse {
  border-color: color-mix(in srgb, var(--color-text-inverse) 24%, transparent);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: none;
}

.stat-card--inverse .stat-card__value {
  color: var(--color-accent);
}

.stat-card--inverse .stat-card__label {
  color: inherit;
}

.stat-card__label .stat-card__value {
  display: block;
  margin-block-end: var(--space-3);
}

.activity-accordion-list {
  display: grid;
  gap: var(--space-3);
}

.activity-accordion-list .accordion__content {
  display: grid;
  gap: var(--space-4);
}

.activity-accordion-list .accordion__content ul {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-6);
}

.activity-subheading {
  font-size: var(--text-base);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.story-card--placeholder .story-card__media {
  min-block-size: 12rem;
}

.story-card--placeholder .story-card__quote {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

.closing-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.closing-cta__inner {
  position: relative;
  z-index: 1;
  justify-items: start;
}

.closing-cta .section-heading {
  color: inherit;
}

.closing-cta__copy {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 65ch;
}

.placeholder-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
}

.placeholder-marker {
  display: inline-flex;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: var(--border-width-hairline) dashed currentColor;
  border-radius: var(--radius-sm);
  font-family: var(--font-latin);
  font-size: var(--text-sm);
}

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 64rem) {
  .objective-list,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.999rem) {
  .objective-list,
  .stat-grid,
  .story-grid {
    grid-template-columns: 1fr;
  }

  .brand-motif--hero {
    inline-size: 24rem;
    opacity: 0.06;
  }
}

/* Keep prose near a 65-character rendered measure in each script. */
:where(p, li, dd):lang(ar) {
  max-inline-size: 46ch;
}

:where(p, li, dd):lang(en) {
  max-inline-size: 46ch;
}

@media (max-width: 30rem) {
  .application-heading h1 {
    font-size: var(--text-2xl);
  }

  #stories-heading {
    font-size: var(--text-2xl);
  }
}