/*
 * assets/iiu-components.css — IIU admin-hub canonical shared components (Direction A.1).
 *
 * Migration step 2 (IIU_CODEX_DESIGN_IMPLEMENTATION.md §6 step 2; component specs
 * IIU_DESIGN_SYSTEM.md §8-20B; visual reference docs/design/prototypes/direction-a1/_base.css).
 *
 * Loaded by iiu_ui_css_tag() after iiu-tokens.css. Canonical pages request only these
 * two sheets; un-migrated pages additionally request iiu-hub.css. This explicit asset
 * boundary prevents legacy global selectors from entering the canonical cascade.
 * no literal hex, logical properties throughout (RTL, §11 of the Codex doc), focus rings
 * on every interactive class, and a prefers-reduced-motion guard. No visual change ships
 * from this file alone: nothing in this step's five canonical/propagation pages yet
 * references an `iiu-*` class, so this sheet is inert until step 3.
 *
 * Class names use the `iiu-` prefix throughout to avoid colliding with the legacy
 * `.card`/`.chip`/`.btn`/`.table`/`.alert` selectors in iiu-hub.css during migration —
 * both may coexist per file until that file is propagated (§6 step 6) and cleaned (§7).
 */

/* ============================ reduced motion (global guard) ================= */
@media (prefers-reduced-motion: reduce) {
  .iiu-details > summary::before,
  .iiu-btn,
  .iiu-rail__item,
  .iiu-card--interactive {
    transition: none;
    animation-duration: .001ms;
  }
}

/* ============================ focus rings (shared) =========================== */
.iiu-btn:focus-visible,
.iiu-card--interactive:focus-visible,
.iiu-task-row:focus-visible,
.iiu-system-card__link:focus-visible,
.iiu-details > summary:focus-visible,
.iiu-role-chooser__option:focus-visible {
  outline: 2px solid var(--iiu-green-800);
  outline-offset: 2px;
}

/* =============================================================================
   PageHeader — iiu-page-header (§4 PageHeader, §14)
   ============================================================================= */
.iiu-page-header { margin-block-end: var(--iiu-s6); }
.iiu-page-header__breadcrumb {
  display: flex; align-items: center; gap: var(--iiu-s2);
  font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui);
  color: var(--iiu-ink-3); margin-block-end: var(--iiu-s2);
}
.iiu-page-header__breadcrumb a { color: var(--iiu-ink-3); text-decoration: none; }
.iiu-page-header__breadcrumb a:hover { text-decoration: underline; }
.iiu-page-header__breadcrumb .iiu-chev { color: var(--iiu-ink-4); }
.iiu-page-header__breadcrumb .iiu-chev::before { content: "\203A"; }
[dir="rtl"] .iiu-page-header__breadcrumb .iiu-chev::before { content: "\2039"; }

.iiu-page-header__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--iiu-s4); flex-wrap: wrap; }
.iiu-page-header__text { max-width: var(--iiu-width-reading); }
.iiu-page-header__title-row { display: flex; align-items: baseline; gap: var(--iiu-s3); flex-wrap: wrap; }
.iiu-page-header__title {
  margin: 0;
  font: var(--iiu-fw-page-title) var(--iiu-text-page-title)/var(--iiu-lh-page-title) var(--iiu-font-ui);
  color: var(--iiu-ink);
}
.iiu-page-header__title--editorial { font-family: var(--iiu-font-editorial); }
.iiu-page-header__purpose {
  margin: var(--iiu-s2) 0 0;
  font: var(--iiu-fw-body) var(--iiu-text-body)/var(--iiu-lh-body) var(--iiu-font-ui);
  color: var(--iiu-ink-2);
  max-width: 90ch;
}
.iiu-page-header__actions { display: flex; gap: var(--iiu-s2); flex-wrap: wrap; }

/* =============================================================================
   SectionHeader — iiu-section-header (§4 SectionHeader)
   ============================================================================= */
.iiu-section-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--iiu-s3);
  margin-block-end: var(--iiu-s4);
  padding-block-end: var(--iiu-s2);
  border-block-end: 1px solid var(--iiu-rule);
}
.iiu-section-header__title {
  margin: 0;
  font: var(--iiu-fw-section) var(--iiu-text-section)/var(--iiu-lh-section) var(--iiu-font-ui);
  color: var(--iiu-ink);
}
.iiu-section-header__count { color: var(--iiu-ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.iiu-section-header__action { font: var(--iiu-fw-button) var(--iiu-text-button)/var(--iiu-lh-button) var(--iiu-font-ui); }

/* =============================================================================
   Button — iiu-btn (§4 Button, §11)
   ============================================================================= */
.iiu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--iiu-s2);
  min-height: var(--iiu-button-height); padding: 0 var(--iiu-s4);
  border-radius: var(--iiu-radius-card);
  font: var(--iiu-fw-button) var(--iiu-text-button)/var(--iiu-lh-button) var(--iiu-font-ui);
  text-decoration: none; cursor: pointer; border: none; background: none;
}
@media (max-width: 767px) { .iiu-btn { min-height: var(--iiu-button-height-mobile); } }

.iiu-btn--primary { background: var(--iiu-green-800); color: var(--iiu-nav-text); border: 1.5px solid var(--iiu-green-800); }
.iiu-btn--primary:hover { background: var(--iiu-green-900); border-color: var(--iiu-green-900); }
.iiu-btn--primary:focus-visible { outline: 2px solid var(--iiu-nav-text); outline-offset: 2px; }

.iiu-btn--secondary { background: transparent; color: var(--iiu-green-800); border: 1.5px solid var(--iiu-green-800); }
.iiu-btn--secondary:hover { background: var(--iiu-green-100); }

.iiu-btn--tertiary { background: transparent; color: var(--iiu-green-800); border: none; padding-inline: 4px; }
.iiu-btn--tertiary:hover { text-decoration: underline; }

.iiu-btn--destructive { background: transparent; color: var(--iiu-error); border: 1.5px solid var(--iiu-error); }
.iiu-btn--destructive:hover { background: var(--iiu-error); color: var(--iiu-surface-raised); }

.iiu-btn[disabled], .iiu-btn[aria-disabled="true"] {
  color: var(--iiu-ink-4); background: var(--iiu-rule); border-color: var(--iiu-rule);
  cursor: not-allowed; pointer-events: none;
}

/* A.1 verdict hierarchy (G7, §11.3) — Test Center Pass/Fail/Blocked/Not sure/Skip.
   Equal 44px height for every verdict control, 12px gap between them (applied by the
   caller's row wrapper, not this file), Pass first in source order. */
.iiu-btn--verdict { min-height: var(--iiu-tap-target-min); gap: var(--iiu-s3); }
.iiu-btn--verdict.iiu-btn--secondary.iiu-btn--fail { color: var(--iiu-error-text); border-color: var(--iiu-error); }
.iiu-btn--verdict.iiu-btn--secondary.iiu-btn--fail:hover { background: var(--iiu-error-bg); }
.iiu-btn--verdict.iiu-btn--secondary.iiu-btn--neutral { color: var(--iiu-ink-2); border-color: var(--iiu-rule-strong); }
.iiu-btn--verdict.iiu-btn--secondary.iiu-btn--neutral:hover { background: var(--iiu-inset); }

/* =============================================================================
   Card — iiu-card (§4 Card, §8)
   ============================================================================= */
.iiu-card {
  background: var(--iiu-surface);
  border: 1px solid var(--iiu-rule);
  border-radius: var(--iiu-radius-card);
  padding: var(--iiu-s6);
  min-width: 0;
}
.iiu-card--compact { padding: var(--iiu-s4); font-size: var(--iiu-text-secondary); }
.iiu-card--interactive { cursor: pointer; transition: border-color .15s; }
.iiu-card--interactive:hover { border-color: var(--iiu-rule-strong); }
.iiu-card--selected { background: var(--iiu-green-100); border-inline-start: 3px solid var(--iiu-green-800); }
/* No nested cards, ever (§8.1) — a .iiu-card inside a .iiu-card is a modeling error,
   flag in review; this file does not (and cannot) enforce it in CSS. */

/* =============================================================================
   StatusChip / inline status — iiu-status (+ iiu-status--chip) (§4 StatusChip, §12)
   ============================================================================= */
.iiu-status {
  display: inline-flex; align-items: center; gap: var(--iiu-s2);
  font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui);
  color: var(--iiu-ink);
}
.iiu-status__symbol { flex: 0 0 auto; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; }
.iiu-status--ready .iiu-status__symbol,
.iiu-status--complete .iiu-status__symbol { color: var(--iiu-success); }
.iiu-status--progress .iiu-status__symbol { color: var(--iiu-info); }
.iiu-status--review .iiu-status__symbol { color: var(--iiu-warning); }
.iiu-status--blocked .iiu-status__symbol { color: var(--iiu-error); }
.iiu-status--notstarted .iiu-status__symbol,
.iiu-status--draft .iiu-status__symbol { color: var(--iiu-neutral); }
.iiu-status--stale .iiu-status__symbol { color: var(--iiu-warning); }

/* Chip/pill form — actionable table rows only, Blocked and Needs review (§12.2) */
.iiu-status--chip {
  padding: 4px 10px; border-radius: var(--iiu-radius-pill);
  font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui);
}
.iiu-status--chip.iiu-status--blocked { background: var(--iiu-error-bg); color: var(--iiu-error-text); }
.iiu-status--chip.iiu-status--review { background: var(--iiu-warning-bg); color: var(--iiu-warning-text); }
/* Neutral chip text uses ink-2, not the neutral role colour (§4.2 AA remedy) */
.iiu-status--chip.iiu-status--notstarted,
.iiu-status--chip.iiu-status--draft { background: var(--iiu-neutral-bg); color: var(--iiu-ink-2); }

/* Legend — once per page, top of the first status table (§12.2) */
.iiu-status-legend {
  display: flex; flex-wrap: wrap; gap: var(--iiu-s4) var(--iiu-s5);
  padding: var(--iiu-s3) 0; border-block-end: 1px solid var(--iiu-rule);
  margin-block-end: var(--iiu-s4);
}

/* =============================================================================
   Alert — iiu-alert (§4 Alert)
   ============================================================================= */
.iiu-alert {
  border-inline-start: 3px solid var(--iiu-neutral);
  background: var(--iiu-neutral-bg); color: var(--iiu-ink);
  border-radius: var(--iiu-radius-control);
  padding: var(--iiu-s3) var(--iiu-s4);
  font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui);
}
.iiu-alert--info { border-color: var(--iiu-info); background: var(--iiu-info-bg); color: var(--iiu-info-text); }
.iiu-alert--attention { border-color: var(--iiu-warning); background: var(--iiu-warning-bg); color: var(--iiu-warning-text); }
.iiu-alert--blocking { border-color: var(--iiu-error); background: var(--iiu-error-bg); color: var(--iiu-error-text); }
/* Destructive confirmation moves to Modal (iiu-modal), never an alert (§4 Alert row). */

/* =============================================================================
   FormField — iiu-field (§4 FormField, §16)
   ============================================================================= */
.iiu-field { display: flex; flex-direction: column; gap: var(--iiu-s1); margin-block-end: var(--iiu-s4); }
.iiu-field__label {
  font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui);
  color: var(--iiu-ink-2);
}
.iiu-field__required { color: var(--iiu-ink-3); font-weight: 400; } /* the word "(required)" — never colour-only */
.iiu-field__input,
.iiu-field select,
.iiu-field textarea {
  min-height: var(--iiu-input-height);
  background: var(--iiu-surface-raised);
  border: 1px solid var(--iiu-rule);
  border-radius: var(--iiu-radius-control);
  padding: 0 var(--iiu-s3);
  font: var(--iiu-fw-body) var(--iiu-text-body)/var(--iiu-lh-body) var(--iiu-font-ui);
  color: var(--iiu-ink);
}
@media (max-width: 767px) { .iiu-field__input, .iiu-field select, .iiu-field textarea { min-height: var(--iiu-input-height-mobile); } }
.iiu-field__help {
  font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui);
  color: var(--iiu-ink-3);
}
.iiu-field--error .iiu-field__input { border-color: var(--iiu-error); color: var(--iiu-error-text); }
.iiu-field__error { color: var(--iiu-error-text); font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); }
.iiu-field-group { display: flex; flex-direction: column; gap: var(--iiu-s6); }
/* Horizontal radio/checkbox choice row (e.g. severity picker) — wraps at narrow
   widths; gap is a logical property pair so it mirrors correctly under RTL. */
.iiu-field__choices { display: flex; flex-wrap: wrap; column-gap: var(--iiu-s5); row-gap: var(--iiu-s2); }

/* =============================================================================
   Table — iiu-table (+ iiu-table--stack) (§4 Table, §15)
   ============================================================================= */
.iiu-table { width: 100%; border-collapse: collapse; background: var(--iiu-surface); max-width: var(--iiu-width-table); }
.iiu-table thead th {
  position: sticky; inset-block-start: 0; background: var(--iiu-surface);
  text-align: start;
  font: var(--iiu-fw-table-head) var(--iiu-text-table-head)/var(--iiu-lh-table-head) var(--iiu-font-ui);
  color: var(--iiu-ink-2);
  border-block-end: 1px solid var(--iiu-rule-strong);
  padding: var(--iiu-s3);
}
.iiu-table tbody td {
  font: var(--iiu-fw-table-body) var(--iiu-text-table-body)/var(--iiu-lh-table-body) var(--iiu-font-ui);
  color: var(--iiu-ink);
  padding: var(--iiu-s3);
  border-block-end: 1px solid var(--iiu-rule);
  height: var(--iiu-table-row-height);
}
.iiu-table--compact tbody td { height: var(--iiu-table-row-height-compact); padding: var(--iiu-s2) var(--iiu-s3); }
.iiu-table tbody tr:hover td { background: var(--iiu-surface-raised); }
.iiu-table tbody tr[aria-selected="true"] td { background: var(--iiu-green-100); }
.iiu-table td[data-numeric], .iiu-table th[data-numeric] { text-align: end; font-variant-numeric: tabular-nums; }
.iiu-table td { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iiu-table td.iiu-table__cell--wrap { white-space: normal; max-width: none; }
/* No inner scroll box (A.1, §15) — the table renders full height in the page flow;
   the container may scroll horizontally only when content exceeds --iiu-width-table. */
.iiu-table__container { max-width: var(--iiu-width-table); overflow-x: visible; }
.iiu-table__container--wide { overflow-x: auto; }

/* data-label stack — the one default mobile table pattern below 768px (A.1, §15) */
@media (max-width: 767px) {
  .iiu-table--stack, .iiu-table--stack-auto { display: block; }
  .iiu-table--stack thead, .iiu-table--stack-auto thead { display: none; }
  .iiu-table--stack tbody, .iiu-table--stack tr,
  .iiu-table--stack-auto tbody, .iiu-table--stack-auto tr { display: block; width: 100%; }
  .iiu-table--stack tr, .iiu-table--stack-auto tr {
    border-block-end: 1px solid var(--iiu-rule); padding: var(--iiu-s2) 0; margin-block-end: var(--iiu-s1);
  }
  .iiu-table--stack tbody td, .iiu-table--stack-auto tbody td {
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--iiu-s3);
    border: none; min-height: auto; height: auto; padding: var(--iiu-s1) 0;
    max-width: none; white-space: normal; overflow: visible; word-break: normal;
  }
  .iiu-table--stack td::before, .iiu-table--stack-auto td::before {
    content: attr(data-label); font-weight: 500; color: var(--iiu-ink-2); flex: 0 0 auto;
  }
  /* Two-column key/value tables already carry their visible label in a row
     header; keep that semantic relationship instead of duplicating it through
     data-label. */
  body.iiu-a1 .iiu-table--key-value th,
  body.iiu-a1 .iiu-table--key-value td { display: block; width: 100%; padding: var(--iiu-s1) 0; }
  body.iiu-a1 .iiu-table--key-value td::before { content: none; }
}

/* =============================================================================
   EmptyState — iiu-empty (§4 EmptyState, §23)
   ============================================================================= */
.iiu-empty { padding: var(--iiu-s5) 0; text-align: start; }
.iiu-empty__title { font: var(--iiu-fw-subsection) var(--iiu-text-subsection)/var(--iiu-lh-subsection) var(--iiu-font-ui); margin: 0 0 var(--iiu-s1); color: var(--iiu-ink); }
.iiu-empty__body { color: var(--iiu-ink-2); margin: 0 0 var(--iiu-s3); font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui); }

/* =============================================================================
   Modal — iiu-modal (§4 Modal)
   ============================================================================= */
.iiu-modal__overlay {
  position: fixed; inset: 0; background: rgba(30, 26, 20, .4); display: flex;
  align-items: center; justify-content: center; padding: var(--iiu-s4); z-index: 100;
}
.iiu-modal {
  background: var(--iiu-surface-raised);
  border-radius: var(--iiu-radius-card);
  box-shadow: var(--iiu-shadow-popover);
  max-width: var(--iiu-modal-max-width); width: 100%;
  padding: var(--iiu-s6);
}
.iiu-modal__title { font: var(--iiu-fw-section) var(--iiu-text-section)/var(--iiu-lh-section) var(--iiu-font-ui); margin: 0 0 var(--iiu-s3); }
.iiu-modal__body { color: var(--iiu-ink-2); margin-block-end: var(--iiu-s5); }
.iiu-modal__actions { display: flex; justify-content: flex-end; gap: var(--iiu-s2); }

/* =============================================================================
   StepRail — iiu-steprail (§4 Progress/StepRail, §11.3, §19.2(B), G8)
   One component for both the gate stepper (28px nodes) and in-run steps (22px nodes).
   ============================================================================= */
.iiu-steprail { display: flex; align-items: flex-start; gap: 0; }
.iiu-steprail__step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.iiu-steprail__step:not(:first-child)::before {
  content: ""; position: absolute; inset-inline-end: 50%; inset-block-start: 11px;
  width: 100%; height: 2px; background: var(--iiu-rule-strong); z-index: 0;
}
.iiu-steprail__node {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--iiu-font-ui); background: var(--iiu-canvas); position: relative; z-index: 1;
}
.iiu-steprail--gates .iiu-steprail__node { width: 28px; height: 28px; font-size: 13px; }
.iiu-steprail__step--completed .iiu-steprail__node { background: var(--iiu-green-800); color: var(--iiu-nav-text); border: 2px solid var(--iiu-green-800); }
.iiu-steprail__step--current .iiu-steprail__node { border: 2px solid var(--iiu-green-800); background: var(--iiu-surface); }
.iiu-steprail__step--current .iiu-steprail__node::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--iiu-gold-500); }
.iiu-steprail__step--upcoming .iiu-steprail__node { border: 2px solid var(--iiu-ink-4); background: var(--iiu-surface); color: var(--iiu-ink-4); }
.iiu-steprail__label {
  font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui);
  color: var(--iiu-ink-2); margin-block-start: var(--iiu-s2); text-align: center;
}
.iiu-steprail__step--current .iiu-steprail__label { font-weight: 600; color: var(--iiu-ink); }
@media (max-width: 767px) {
  .iiu-steprail { flex-direction: column; align-items: flex-start; gap: var(--iiu-s4); }
  .iiu-steprail__step { flex-direction: row; align-items: center; gap: var(--iiu-s3); }
  .iiu-steprail__step:not(:first-child)::before { display: none; }
  .iiu-steprail__label { margin-block-start: 0; }
}

/* =============================================================================
   Gates — iiu-gates (§19.2(B) gate progression; shares the StepRail spec via
   .iiu-steprail--gates above — this block is the current-gate-name underline only)
   ============================================================================= */
.iiu-gates__name { font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui); color: var(--iiu-ink); display: inline-block; padding-block-end: var(--iiu-s2); }
.iiu-gates__gate--current .iiu-gates__name { border-block-end: 3px solid var(--iiu-gold-500); }
.iiu-gates__meta { font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); color: var(--iiu-ink-3); margin-block-start: 2px; }

/* =============================================================================
   RoleChooser — iiu-role-chooser (§4 RoleChooser)
   ============================================================================= */
.iiu-role-chooser { display: flex; flex-wrap: wrap; gap: var(--iiu-s3); }
body.iiu-a1 .iiu-role-chooser--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iiu-role-chooser__option {
  display: flex; align-items: center; gap: var(--iiu-s2);
  border: 1px solid var(--iiu-rule); border-radius: var(--iiu-radius-card);
  background: var(--iiu-surface); padding: var(--iiu-s3) var(--iiu-s4);
  cursor: pointer; min-height: var(--iiu-tap-target-min);
  font: var(--iiu-fw-body) var(--iiu-text-body)/var(--iiu-lh-body) var(--iiu-font-ui);
  text-decoration: none; color: inherit;
}
.iiu-role-chooser__option:hover { border-color: var(--iiu-rule-strong); }
.iiu-role-chooser__option input[type="radio"] { accent-color: var(--iiu-green-800); }
.iiu-role-chooser__option[aria-pressed="true"],
.iiu-role-chooser__option.is-selected {
  background: var(--iiu-green-100); border-color: var(--iiu-green-800); border-inline-start-width: 3px;
}

/* =============================================================================
   TaskRow/WorkflowStep — iiu-task-row (§4 TaskRow)
   ============================================================================= */
.iiu-task-row {
  display: flex; align-items: center; gap: var(--iiu-s4); flex-wrap: wrap;
  padding: var(--iiu-s3) var(--iiu-s4); text-decoration: none; color: inherit;
  min-height: var(--iiu-tap-target-min);
  border-block-end: 1px solid var(--iiu-rule);
}
.iiu-task-row:last-child { border-block-end: none; }
.iiu-task-row:hover { background: var(--iiu-inset); }
.iiu-task-row__title { font: var(--iiu-fw-subsection) var(--iiu-text-subsection)/var(--iiu-lh-subsection) var(--iiu-font-ui); color: var(--iiu-ink); flex: 1; min-width: 160px; }
.iiu-task-row__subtitle { font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); color: var(--iiu-ink-3); }
.iiu-task-row__owner { font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui); color: var(--iiu-ink-2); }
.iiu-task-row__action { flex: 0 0 auto; }
@media (max-width: 560px) { .iiu-task-row { flex-direction: column; align-items: flex-start; gap: var(--iiu-s2); } }

/* =============================================================================
   SystemCard — iiu-system-card (§4 SystemCard) — two-column definition list
   inside a base card, no ALL-CAPS, one "Open" tertiary link.
   ============================================================================= */
.iiu-system-card { display: flex; flex-direction: column; gap: var(--iiu-s4); }
.iiu-system-card__title { font: var(--iiu-fw-subsection) var(--iiu-text-subsection)/var(--iiu-lh-subsection) var(--iiu-font-ui); color: var(--iiu-ink); margin: 0; }
.iiu-system-card__link { align-self: flex-start; }
/* iiu-system-entry (A.1, §33.3) — rule-separated entry on canvas: no card box,
   1px --iiu-rule bottom border instead. Scoped modifier, not a .iiu-card change. */
.iiu-system-entry {
  background: none; border: none; border-radius: 0; padding: 0 0 var(--iiu-s5);
  border-block-end: 1px solid var(--iiu-rule); gap: var(--iiu-s2);
  text-align: start;
}
.iiu-system-entry .iiu-system-card__title { font: 600 16px/1.4 var(--iiu-font-ui); }

/* Definition list — iiu-dl (used by SystemCard and readiness/evidence detail) */
.iiu-dl { display: grid; grid-template-columns: 220px 1fr; row-gap: var(--iiu-s3); column-gap: var(--iiu-s4); margin: 0; }
.iiu-dl dt { font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui); color: var(--iiu-ink-2); }
.iiu-dl dd { font: var(--iiu-fw-body) var(--iiu-text-body)/var(--iiu-lh-body) var(--iiu-font-ui); margin: 0; color: var(--iiu-ink); }
@media (max-width: 767px) {
  .iiu-dl { grid-template-columns: 1fr; row-gap: var(--iiu-s2); }
  .iiu-dl dd { margin-block-end: var(--iiu-s2); }
}

/* =============================================================================
   ReadinessRow — iiu-readiness-row (§4 ReadinessRow, §19.1) — rows inside
   .iiu-table, not a card grid.
   ============================================================================= */
.iiu-readiness-row__name { font-weight: 500; color: var(--iiu-ink); }
.iiu-readiness-row__evidence { font-variant-numeric: tabular-nums; color: var(--iiu-ink-2); }
.iiu-readiness-row__checked { color: var(--iiu-ink-3); font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); }

/* =============================================================================
   EvidencePanel — iiu-evidence (§4 EvidencePanel) — chevron disclosure,
   monospace identifiers only, rendered on the inset surface (§6).
   ============================================================================= */
.iiu-evidence { background: var(--iiu-inset); border-inline-start: 1px solid var(--iiu-rule-strong); padding: var(--iiu-s4) var(--iiu-s5); }
.iiu-evidence--callout { border-inline-start-width: 3px; }
.iiu-evidence__id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--iiu-text-caption); overflow-wrap: anywhere; }
/* Preformatted evidence text (e.g. a fetch()ed check's technical stdout/stderr) — wraps instead of
   overflowing, never a per-instance inline style="white-space:pre-wrap" in canonical markup. */
.iiu-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--iiu-text-caption); }

/* =============================================================================
   NextStep — iiu-ledger (§4 NextStep, §18) — a ledger row, not a banner.
   ============================================================================= */
.iiu-ledger {
  background: var(--iiu-surface); border: 1px solid var(--iiu-rule);
  border-inline-start: 4px solid var(--iiu-gold-500);
  display: flex; align-items: center; gap: var(--iiu-s4); padding: var(--iiu-s4) var(--iiu-s5);
  max-height: 120px;
}
.iiu-ledger__body { flex: 1; min-width: 0; }
.iiu-ledger__title { font: 600 20px/28px var(--iiu-font-ui); margin: 0 0 var(--iiu-s1); color: var(--iiu-ink); }
.iiu-ledger__context { font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui); color: var(--iiu-ink-2); margin: 0 0 var(--iiu-s1); }
.iiu-ledger__why { font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui); color: var(--iiu-ink-2); margin: 0 0 var(--iiu-s1); }
.iiu-ledger__owner { font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); color: var(--iiu-ink-3); }
.iiu-ledger__cta { flex: 0 0 auto; }
/* Visual-only clamp so the full title stays in the DOM/AT tree while the ledger keeps its 120px cap. */
@media (min-width: 768px) {
  .iiu-ledger__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}
@media (max-width: 767px) { .iiu-ledger { max-height: none; align-items: flex-start; flex-wrap: wrap; } }
/* NextStep detail (QD-57) — the guided-run step rail + scope disclosure + pause note, rendered as a
   sibling directly below .iiu-ledger (same <section>, iiu/home_a1.php) instead of inside it, so this
   content is never subject to the ledger's own max-height:120px/align-items:center clamp above. New
   class name only — .iiu-ledger* rules above are unchanged. */
.iiu-ledger-detail { margin-block-start: var(--iiu-s4); }
.iiu-ledger-detail .iiu-steprail { margin-block-end: var(--iiu-s3); }

/* =============================================================================
   Health tiles — iiu-tiles (§17 dashboard composition, health strip WITHOUT
   card containers)
   ============================================================================= */
.iiu-tiles { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--iiu-canvas); border: 1px solid var(--iiu-rule); }
.iiu-tiles__tile { padding: var(--iiu-s3) var(--iiu-s4); border-inline-start: 1px solid var(--iiu-rule); display: flex; flex-direction: column; gap: var(--iiu-s1); }
.iiu-tiles__tile:first-child { border-inline-start: none; }
.iiu-tiles__name { font: var(--iiu-fw-subsection) var(--iiu-text-subsection)/var(--iiu-lh-subsection) var(--iiu-font-ui); }
.iiu-tiles__meta { font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); color: var(--iiu-ink-3); }
@media (max-width: 767px) {
  .iiu-tiles { grid-template-columns: 1fr 1fr; }
  .iiu-tiles__tile:nth-child(2n+1) { border-inline-start: none; }
  .iiu-tiles__tile:nth-child(n+3) { border-block-start: 1px solid var(--iiu-rule); }
}
@media (max-width: 480px) {
  .iiu-tiles { grid-template-columns: 1fr; }
  .iiu-tiles__tile { border-inline-start: none; border-block-start: 1px solid var(--iiu-rule); }
  .iiu-tiles__tile:first-child { border-block-start: none; }
  body.iiu-a1 .iiu-tiles { grid-template-columns: 1fr 1fr; }
  body.iiu-a1 .iiu-tiles__tile:nth-child(2) { border-block-start: none; border-inline-start: 1px solid var(--iiu-rule); }
}

/* =============================================================================
   Details / progressive disclosure — iiu-details (G6, §0.3)
   ============================================================================= */
.iiu-details { border-block-start: 1px solid var(--iiu-rule); padding: var(--iiu-s3) 0; }
.iiu-details > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--iiu-s2);
  font: 600 var(--iiu-text-subsection)/var(--iiu-lh-subsection) var(--iiu-font-ui);
  color: var(--iiu-green-800); min-height: var(--iiu-tap-target-min);
}
.iiu-details > summary::-webkit-details-marker { display: none; }
.iiu-details > summary::before { content: "\25BE"; color: var(--iiu-gold-700); font-size: 13px; transition: transform .15s; }
.iiu-details[open] > summary::before { transform: rotate(-180deg); }
.iiu-details__count { color: var(--iiu-ink-3); font-weight: 500; }
.iiu-details__body { padding: var(--iiu-s3) 0 var(--iiu-s1); color: var(--iiu-ink-2); font: var(--iiu-fw-body) var(--iiu-text-body)/var(--iiu-lh-body) var(--iiu-font-ui); }

/* =============================================================================
   Shell/Nav — iiu-rail (§4 Shell/Nav, §13, G5)
   ============================================================================= */
.iiu-app-shell { display: flex; min-height: 100vh; }
.iiu-main { flex: 1; min-width: 0; }
.iiu-content-col { max-width: var(--iiu-width-operational); margin-inline: auto; padding: var(--iiu-s6) var(--iiu-gutter) var(--iiu-s8); }

.iiu-rail {
  inline-size: 232px; flex: 0 0 232px; block-size: 100vh; position: sticky; inset-block-start: 0;
  background: var(--iiu-green-800); color: var(--iiu-nav-text);
  display: flex; flex-direction: column; padding: var(--iiu-s6) var(--iiu-s5) var(--iiu-s6);
}
.iiu-rail__wordmark { font: 600 24px/1.2 var(--iiu-font-editorial); color: var(--iiu-nav-text); margin: 0; }
.iiu-rail__product { font: 500 13px/1.3 var(--iiu-font-ui); color: var(--iiu-nav-text); opacity: .8; margin: var(--iiu-s1) 0 var(--iiu-s5); }
.iiu-rail__group {
  font: 600 12px/1.4 var(--iiu-font-ui); color: var(--iiu-nav-text); opacity: .65;
  text-transform: none; /* sentence case, never tracked caps (§3.6) */
}
body.iiu-a1 .iiu-rail__group { margin-block: var(--iiu-s5) var(--iiu-s1); } /* two classes outrank the generic body.iiu-a1 p reset's one class + two elements, regardless of source order */
body.iiu-a1 .iiu-rail__product + .iiu-rail__group { margin-block-start: var(--iiu-s3); }
.iiu-rail__list { list-style: none; margin: 0; padding: 0; }
.iiu-rail__item {
  display: flex; align-items: center; font: 500 15px/1.4 var(--iiu-font-ui);
  color: var(--iiu-nav-text); block-size: 38px;
  padding-inline: var(--iiu-s3);
  border-inline-start: 3px solid transparent;
  text-decoration: none;
}
.iiu-rail__item:hover { background: rgba(255, 255, 255, .06); }
.iiu-rail__item[aria-current="page"], .iiu-rail__item.is-active {
  border-inline-start-color: var(--iiu-gold-500);
  background: rgba(255, 255, 255, .08);
  color: var(--iiu-nav-text); font-weight: 500;
}
.iiu-rail__item:focus-visible { outline: 2px solid var(--iiu-nav-text); outline-offset: -2px; } /* inset ring, G5 */
body.iiu-a1 a:focus-visible, body.iiu-a1 select:focus-visible, body.iiu-a1 input:focus-visible, body.iiu-a1 textarea:focus-visible, body.iiu-a1 summary:focus-visible {
  outline: 2px solid var(--iiu-green-800); outline-offset: 2px;
}
.iiu-rail__foot {
  margin-block-start: auto; padding-block-start: var(--iiu-s4);
  border-block-start: 1px solid rgba(255, 255, 255, .18);
  display: flex; gap: var(--iiu-s3); flex-wrap: wrap;
  font: 500 14px/1.4 var(--iiu-font-ui);
}
.iiu-rail__foot a { color: var(--iiu-nav-text); opacity: .85; text-decoration: none; }
.iiu-rail__foot a:hover { opacity: 1; text-decoration: underline; }

/* Dashboard "View as…" field (index.php $hubViewAs) — the only iiu-rail__foot caller with a
   <select>. The select's intrinsic width (longest persona option) exceeds the 184px rail
   content box, so it must become a full-row flex item that shrinks to the rail, not the rail
   growing to it (View As rail overflow fix, S128). Additive only — does not touch .iiu-field/.iiu-rail
   base rules, which stay shared by every other rail-foot caller (cc.php, guides/*, launch.php).
   Scoped to `.iiu-rail > .iiu-rail__foot` (the DESKTOP rail's own foot — iiu_ui_rail() renders
   .iiu-rail__foot as a direct child of nav.iiu-rail) so the <=1024 drawer's separate
   .iiu-rail__foot copy (a child of .iiu-drawer nav, never .iiu-rail) is untouched: the drawer
   never had this defect (full viewport width already fit the intrinsic select), so it keeps its
   original intrinsic-width layout, unchanged from before this fix. */
.iiu-rail > .iiu-rail__foot .iiu-viewas { flex: 1 1 100%; inline-size: 100%; min-inline-size: 0; }
.iiu-rail > .iiu-rail__foot .iiu-viewas .iiu-field__input { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }

/* ≤1024 collapse: top bar + drawer; <768 drawer only (§13.3) */
.iiu-topbar, .iiu-drawer { display: none; }
@media (max-width: 1024px) {
  .iiu-rail { display: none; }
  .iiu-app-shell { display: block; }
  .iiu-topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--iiu-green-800); color: var(--iiu-nav-text);
    min-height: 56px; padding: 0 var(--iiu-s4); position: sticky; inset-block-start: 0; z-index: 20;
  }
  .iiu-topbar__word { font: 600 19px/1.2 var(--iiu-font-editorial); color: var(--iiu-nav-text); }
  .iiu-drawer { display: block; background: var(--iiu-green-800); color: var(--iiu-nav-text); }
  .iiu-drawer > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--iiu-s2);
    min-height: 56px; padding: 0 var(--iiu-s4); color: var(--iiu-nav-text); font: 600 15px/1.3 var(--iiu-font-ui);
  }
  .iiu-drawer > summary::-webkit-details-marker { display: none; }
  .iiu-drawer > summary::before { content: "\2630"; font-size: 16px; }
  .iiu-drawer[open] > summary::before { content: "\2715"; }
  .iiu-drawer nav { padding: var(--iiu-s2) var(--iiu-s5) var(--iiu-s5); }
}
@media (min-width: 1025px) { .iiu-topbar { display: none; } }

/* Content column top line (greeting, language switch) and title block */
.iiu-topline { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--iiu-s4); flex-wrap: wrap; gap: var(--iiu-s2); }
.iiu-greet { color: var(--iiu-ink-3); font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); }
.iiu-lang-toggle { font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui); text-decoration: none; color: var(--iiu-green-800); border-block-end: 1px solid var(--iiu-gold-500); padding-block-end: 1px; }
.iiu-zone { margin-block-end: var(--iiu-s7); }
.iiu-zone:last-child { margin-block-end: 0; }

/* =============================================================================
   Page-root scope — iiu-a1 (§6 background/surface hierarchy)
   ============================================================================= */
/*
 * No bare `body{}`/`html{}` rule exists anywhere in this file or in iiu-tokens.css
 * on purpose: this migration step must not change any of the 30 un-migrated
 * hub-chrome pages, and a blanket body selector would repaint every one of them the
 * instant this stylesheet loads (it already loads on every page via
 * iiu_ui_css_tag(), §3.2). §6 of IIU_DESIGN_SYSTEM.md is explicit that "every
 * page's <body>/root background is --iiu-canvas" — but that only takes effect once
 * a given page has actually migrated (§6 step 6 of the Codex doc), which is exactly
 * when it should add this ONE opt-in class to its own <body> tag. Until then,
 * iiu-hub.css's own `body{background:var(--bg)}` (assets/iiu-hub.css:45) is the
 * only body-background rule any un-migrated page loads, by design, not by an
 * unresolved cascade fight.
 *
 * A single specificity-0,1,0 class selector is enough here — no !important needed,
 * because no un-migrated page opts in, so there is nothing to out-rank yet.
 */
body.iiu-a1 {
  margin: 0;
  --iiu-table-row-height: 48px;
  --iiu-table-row-height-compact: 40px;
  background: var(--iiu-canvas);
  color: var(--iiu-ink);
  font-family: var(--iiu-font-ui);
  font-size: var(--iiu-text-body);
  line-height: var(--iiu-lh-body);
}
body.iiu-a1 .iiu-page-header__purpose { font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui); }
body.iiu-a1 .iiu-card { padding: var(--iiu-s5); }
body.iiu-a1 .iiu-card--compact { padding: var(--iiu-s4); }
body.iiu-a1 .iiu-status--chip { padding: var(--iiu-s1) var(--iiu-s3); }
body.iiu-a1 *, body.iiu-a1 *::before, body.iiu-a1 *::after { box-sizing: border-box; }
/* Plain content links inherit the canonical green. Component links keep their
   own foreground contract (notably cream-on-green rail and primary buttons). */
body.iiu-a1 .iiu-main :where(a:not([class])) { color: var(--iiu-green-800); }
body.iiu-a1 p { margin-block-start: 0; }
body.iiu-a1 button, body.iiu-a1 input, body.iiu-a1 select, body.iiu-a1 textarea { font: inherit; }
body.iiu-a1 input[type="text"], body.iiu-a1 input[type="date"], body.iiu-a1 input[type="number"], body.iiu-a1 select, body.iiu-a1 textarea {
  min-height: var(--iiu-input-height); background: var(--iiu-surface-raised); border: 1px solid var(--iiu-rule);
  border-radius: var(--iiu-radius-control); padding: var(--iiu-s2) var(--iiu-s3); color: var(--iiu-ink);
}
body.iiu-a1 textarea { min-height: 96px; }

/* Canonical View-As / QA safety presentation. The markup predates A.1, but
   canonical routes intentionally do not load iiu-hub.css. These selectors are
   confined to the preview state so legacy pages retain their existing rules. */
body.iiu-a1.preview .pv {
  position: sticky; inset-block-start: 0; z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--iiu-s3);
  padding: var(--iiu-s2) var(--iiu-gutter);
  border-block-end: 2px solid var(--iiu-warning);
  background: var(--iiu-warning-bg); color: var(--iiu-warning-text);
  font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui);
}
body.iiu-a1.preview .pv .sp { flex: 1 1 auto; }
body.iiu-a1.preview .pv a { color: var(--iiu-warning-text); }
body.iiu-a1.preview .pv .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--iiu-button-height); padding-inline: var(--iiu-s3);
  border: 1px solid var(--iiu-warning); border-radius: var(--iiu-radius-control);
  background: var(--iiu-surface-raised); text-decoration: none; font-weight: 600;
}
body.iiu-a1.preview .small { font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); }
body.iiu-a1.preview .muted { color: var(--iiu-ink-3); }
body.iiu-a1.preview .crit { color: var(--iiu-error-text); font-weight: 700; }
body.iiu-a1.preview .lc-viewas {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--iiu-s2);
  padding: var(--iiu-s3) var(--iiu-gutter);
  border-block-end: 1px solid var(--iiu-warning);
  background: var(--iiu-warning-bg); color: var(--iiu-warning-text);
  font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui);
}
body.iiu-a1.preview .lc-viewas a { color: var(--iiu-warning-text); font-weight: 700; }
body.iiu-a1.preview .qa {
  position: fixed; inset-inline-end: var(--iiu-s3); inset-block-end: var(--iiu-s3); z-index: 25;
  inline-size: min(340px, calc(100vw - var(--iiu-s5)));
  border: 2px solid var(--iiu-warning); border-radius: var(--iiu-radius-card);
  background: var(--iiu-surface-raised); color: var(--iiu-ink);
  box-shadow: var(--iiu-shadow-popover);
  font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui);
}
body.iiu-a1.preview .qa > summary {
  min-height: var(--iiu-tap-target-min); display: flex; align-items: center;
  padding: var(--iiu-s2) var(--iiu-s3); color: var(--iiu-warning-text); font-weight: 700; cursor: pointer;
}
body.iiu-a1.preview .qa .in { padding: 0 var(--iiu-s3) var(--iiu-s3); }
body.iiu-a1.preview .qa .kv { display: grid; grid-template-columns: auto 1fr; gap: var(--iiu-s1) var(--iiu-s3); margin-block-end: var(--iiu-s2); }
body.iiu-a1.preview .qa label { display: block; min-height: var(--iiu-tap-target-min); padding-block: var(--iiu-s2); }
body.iiu-a1.preview form button,
body.iiu-a1.preview form input,
body.iiu-a1.preview form select,
body.iiu-a1.preview form textarea { opacity: .55; cursor: not-allowed; }

body.iiu-a1 .iiu-skip { position: fixed; inset-inline-start: var(--iiu-s3); inset-block-start: -100px; z-index: 100; background: var(--iiu-surface-raised); padding: var(--iiu-s2) var(--iiu-s3); }
body.iiu-a1 .iiu-skip:focus { inset-block-start: var(--iiu-s3); }
body.iiu-a1 .iiu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--iiu-s4); }
body.iiu-a1 .iiu-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.iiu-a1 .iiu-stack { display: flex; flex-direction: column; gap: var(--iiu-s4); }
body.iiu-a1 .iiu-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--iiu-s3); }
body.iiu-a1 .iiu-actions--spaced { margin-block-start: var(--iiu-s3); }
body.iiu-a1 .iiu-actions--tight { margin-block-start: var(--iiu-s2); }
body.iiu-a1 .iiu-inline-form { display: inline; }
body.iiu-a1 .iiu-details--spaced { margin-block-start: var(--iiu-s3); }
body.iiu-a1 .iiu-details__body--inset { background: var(--iiu-inset); padding: var(--iiu-s4); }
body.iiu-a1 .iiu-surface-section { border-block: 1px solid var(--iiu-rule); padding-block: var(--iiu-s5); }
body.iiu-a1 .iiu-evidence--narrow { max-width: var(--iiu-width-reading); }
body.iiu-a1 .iiu-run-card { max-width: var(--iiu-width-reading); }
body.iiu-a1 .iiu-mobile-roadmap, body.iiu-a1 .iiu-run-mobile-secondary, body.iiu-a1 .iiu-run-progress-mobile { display: none; }
body.iiu-a1 .iiu-desktop-roadmap { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
body.iiu-a1 .iiu-run-expected { margin-block: var(--iiu-s4); }
body.iiu-a1 .iiu-run-expected p { margin-block-end: 0; }
body.iiu-a1 .iiu-run-instruction { margin-block-start: var(--iiu-s2); font: var(--iiu-fw-subsection) var(--iiu-text-subsection)/var(--iiu-lh-subsection) var(--iiu-font-ui); }
body.iiu-a1 .iiu-run-success { font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui); }
body.iiu-a1 .iiu-subheading { margin: 0 0 var(--iiu-s2); font: var(--iiu-fw-subsection) var(--iiu-text-subsection)/var(--iiu-lh-subsection) var(--iiu-font-ui); }
body.iiu-a1 .iiu-progress { margin-block-end: var(--iiu-s4); }
body.iiu-a1 .iiu-progress > span { inline-size: var(--iiu-progress-value, 0%); }
body.iiu-a1 .iiu-field--compact { margin-block-end: var(--iiu-s3); }
body.iiu-a1 .iiu-field--compact textarea { min-height: 56px; }
body.iiu-a1 .iiu-field--compact select,
body.iiu-a1 .iiu-field--compact input,
body.iiu-a1 .iiu-field--compact textarea { width: 100%; }
body.iiu-a1 .iiu-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--iiu-s2); padding: 0; margin: var(--iiu-s3) 0 0; list-style: none; }
body.iiu-a1 .iiu-flow__step { border: 1px solid var(--iiu-rule); background: var(--iiu-surface); border-radius: var(--iiu-radius-control); padding: var(--iiu-s2) var(--iiu-s3); font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui); }
body.iiu-a1 .iiu-flow__connector { inline-size: var(--iiu-s5); border-block-start: 1px solid var(--iiu-rule-strong); }
body.iiu-a1 .iiu-architecture__node.lc-active { border-color: var(--iiu-green-800); box-shadow: inset 0 0 0 2px var(--iiu-green-100); }

/* §20B.1 — "How IIU Works" university rail (SVG, direction-a1 prototype renderUniversitySvg()). */
body.iiu-a1 .iiu-arch-wrap { margin-block-end: var(--iiu-s3); }
body.iiu-a1 .iiu-arch-svg { display: block; }
body.iiu-a1 .iiu-arch-svg text { font-family: var(--iiu-font-ui); }
body.iiu-a1 .iiu-arch-edge { stroke: var(--iiu-ink-4); stroke-width: 2; }
body.iiu-a1 .iiu-arch-shape { fill: var(--iiu-surface); stroke: var(--iiu-ink-4); stroke-width: 1.5; }
body.iiu-a1 .iiu-arch-alert { fill: var(--iiu-warning); }
body.iiu-a1 .iiu-arch-alert__mark { font-size: 8px; font-weight: 700; fill: var(--iiu-surface-raised); }
body.iiu-a1 .iiu-arch-label { font-size: 10.5px; fill: var(--iiu-ink-3); }
body.iiu-a1 .iiu-arch-node { cursor: pointer; }
body.iiu-a1 .iiu-arch-node:focus-visible { outline: 2px solid var(--iiu-info); outline-offset: 2px; }
body.iiu-a1 .iiu-arch-node.is-filled .iiu-arch-shape,
body.iiu-a1 .iiu-arch-node[aria-pressed="true"] .iiu-arch-shape { fill: var(--iiu-green-800); stroke: var(--iiu-green-800); }
body.iiu-a1 .iiu-arch-node.is-filled .iiu-arch-label,
body.iiu-a1 .iiu-arch-node[aria-pressed="true"] .iiu-arch-label { fill: var(--iiu-green-800); font-weight: 700; }
body.iiu-a1 .iiu-arch-node.lc-active .iiu-arch-shape { stroke-width: 3; }
body.iiu-a1 .iiu-arch-arrowhead { fill: var(--iiu-ink-4); }
/* Follow-up B: legend glyphs are the same shapes/classes as the rail's own nodes, at 13px, so
   they read as filled/hollow identically — never a separate CSS-only swatch language. */
body.iiu-a1 .iiu-arch-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--iiu-s3); margin-block-start: var(--iiu-s2); font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); color: var(--iiu-ink-3); }
body.iiu-a1 .iiu-arch-legend__swatch { display: inline-block; vertical-align: middle; margin-inline-end: var(--iiu-s1); overflow: visible; }
body.iiu-a1 .iiu-arch-shape--legend.is-filled { fill: var(--iiu-green-800); stroke: var(--iiu-green-800); }
body.iiu-a1 .iiu-copy { max-width: var(--iiu-measure-reading); color: var(--iiu-ink-2); }
body.iiu-a1 .iiu-meta { color: var(--iiu-ink-3); font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); }
body.iiu-a1 .iiu-display { margin: 0; font: var(--iiu-fw-display) var(--iiu-text-display)/var(--iiu-lh-display) var(--iiu-font-editorial); }
body.iiu-a1 .iiu-list { margin: 0; padding-inline-start: var(--iiu-s5); }
body.iiu-a1 .iiu-list li + li { margin-block-start: var(--iiu-s2); }
body.iiu-a1 .iiu-promise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--iiu-s2) var(--iiu-s5); margin: 0; padding: 0; list-style: none; }
body.iiu-a1 .iiu-promise-grid li { display: grid; grid-template-columns: 28px 1fr; gap: var(--iiu-s2); align-items: start; }
body.iiu-a1 .iiu-promise-grid b { inline-size: 28px; block-size: 28px; display: grid; place-items: center; border: 1px solid var(--iiu-rule-strong); border-radius: 50%; font-size: var(--iiu-text-label); }
body.iiu-a1 .iiu-change-list { background: var(--iiu-inset); border-block: 1px solid var(--iiu-rule); }
body.iiu-a1 .iiu-change-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 2fr) auto; gap: var(--iiu-s3); padding: var(--iiu-s3) var(--iiu-s4); border-block-end: 1px solid var(--iiu-rule); align-items: baseline; }
body.iiu-a1 .iiu-change-row:last-child { border-block-end: 0; }
body.iiu-a1 .iiu-change-row__subject { font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui); }
body.iiu-a1 .iiu-change-row__value { color: var(--iiu-ink-2); overflow-wrap: anywhere; }
body.iiu-a1 .iiu-change-row__meta { color: var(--iiu-ink-3); font-size: var(--iiu-text-caption); }
body.iiu-a1 .iiu-metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--iiu-rule); }
body.iiu-a1 .iiu-metric { padding: var(--iiu-s3) var(--iiu-s4); border-inline-start: 1px solid var(--iiu-rule); }
body.iiu-a1 .iiu-metric:first-child { border-inline-start: none; }
body.iiu-a1 .iiu-metric__value { display: block; font: 600 24px/32px var(--iiu-font-ui); font-variant-numeric: tabular-nums; }
body.iiu-a1 .iiu-metric__label { color: var(--iiu-ink-3); font-size: var(--iiu-text-caption); }
body.iiu-a1 .iiu-journey { display: grid; grid-template-columns: repeat(9, minmax(76px, 1fr)); gap: var(--iiu-s2); list-style: none; margin: 0; padding: 0; }
body.iiu-a1 .iiu-journey__step { position: relative; }
body.iiu-a1 .iiu-journey__step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 20px; inset-inline-start: calc(50% + 20px); inline-size: calc(100% - 32px); border-block-start: 1px solid var(--iiu-rule-strong); z-index: 0; }
body.iiu-a1 .iiu-journey__node { position: relative; z-index: 1; inline-size: 100%; min-height: 92px; border: 0; background: transparent; padding: 0 var(--iiu-s1); text-align: center; color: var(--iiu-ink); }
body.iiu-a1 .iiu-journey__number { margin: 0 auto var(--iiu-s2); inline-size: 40px; block-size: 40px; display: grid; place-items: center; color: var(--iiu-nav-text); background: var(--iiu-green-800); border: 2px solid var(--iiu-surface); box-shadow: 0 0 0 1px var(--iiu-green-800); font-weight: 600; border-radius: 50%; }
body.iiu-a1 .iiu-journey__step--auto .iiu-journey__number { border-radius: var(--iiu-radius-control); background: var(--iiu-green-900); box-shadow: 0 0 0 1px var(--iiu-green-900); }
body.iiu-a1 .iiu-journey__step--alert .iiu-journey__number { border-radius: 0; transform: rotate(45deg); background: var(--iiu-gold-700); box-shadow: 0 0 0 1px var(--iiu-gold-700); }
body.iiu-a1 .iiu-journey__step--alert .iiu-journey__number::first-letter { transform: rotate(-45deg); }
body.iiu-a1 .iiu-journey__node[aria-pressed="true"] .iiu-journey__number { outline: 3px solid var(--iiu-gold-500); outline-offset: 2px; }
body.iiu-a1 .iiu-journey__label { display: block; font-size: var(--iiu-text-label); line-height: var(--iiu-lh-label); }
body.iiu-a1 .iiu-journey-legend { display: flex; flex-wrap: wrap; gap: var(--iiu-s4); margin-block: var(--iiu-s4); color: var(--iiu-ink-2); font-size: var(--iiu-text-caption); }
body.iiu-a1 .iiu-journey-legend span { display: inline-flex; align-items: center; gap: var(--iiu-s2); }
body.iiu-a1 .iiu-journey-legend__mark { inline-size: 14px; block-size: 14px; background: var(--iiu-green-800); border-radius: 50%; }
body.iiu-a1 .iiu-journey-legend__mark--auto { border-radius: 2px; background: var(--iiu-green-900); }
body.iiu-a1 .iiu-journey-legend__mark--alert { border-radius: 0; transform: rotate(45deg); background: var(--iiu-gold-700); }
body.iiu-a1 .iiu-journey-legend__mark--done { border-radius: 50%; background: var(--iiu-green-800); box-shadow: inset 0 0 0 2px var(--iiu-surface); }
body.iiu-a1 .iiu-architecture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--iiu-s3); }
body.iiu-a1 .iiu-architecture li { position: relative; list-style: none; }
body.iiu-a1 .iiu-architecture li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: calc(var(--iiu-s3) * -1); inline-size: var(--iiu-s3); border-block-start: 1px solid var(--iiu-rule-strong); }
body.iiu-a1 .iiu-architecture__node { inline-size: 100%; min-height: 76px; border: 1px solid var(--iiu-rule); background: var(--iiu-surface); padding: var(--iiu-s4); }
body.iiu-a1 .iiu-architecture__node h3 { margin: 0 0 var(--iiu-s1); font-size: var(--iiu-text-subsection); }
body.iiu-a1 .iiu-verdict-row { display: flex; flex-wrap: wrap; gap: var(--iiu-s3); }
body.iiu-a1 .iiu-scenario-list { border-block-start: 1px solid var(--iiu-rule); }
body.iiu-a1 .iiu-scenario-row { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(76px, .6fr) minmax(120px, 1fr) auto; gap: var(--iiu-s4); align-items: center; padding-block: var(--iiu-s4); border-block-end: 1px solid var(--iiu-rule); }
body.iiu-a1 .iiu-scenario-row__name { min-width: 0; }
body.iiu-a1 .iiu-scenario-row__progress, body.iiu-a1 .iiu-scenario-row__tester { display: flex; flex-direction: column; gap: var(--iiu-s1); }
body.iiu-a1 .iiu-scenario-row__action { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--iiu-s2); }
body.iiu-a1 .iiu-decision-hero { display: block; border-block: 1px solid var(--iiu-gold-500); padding-block: var(--iiu-s6); }
body.iiu-a1 .iiu-decision-hero__eyebrow { margin: 0 0 var(--iiu-s2); color: var(--iiu-ink-3); font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui); }
body.iiu-a1 .iiu-decision-hero__answer { margin: 0 0 var(--iiu-s3); font: 600 1.5rem/1.3 var(--iiu-font-ui); display: flex; align-items: center; gap: var(--iiu-s3); }
body.iiu-a1 .iiu-decision-hero__cta { margin-block-start: var(--iiu-s4); }
body.iiu-a1 .iiu-decision-hero > .iiu-alert { margin-block-start: var(--iiu-s4); }
body.iiu-a1 .iiu-steprail__label small { display: block; color: var(--iiu-ink-3); font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); }
body.iiu-a1 .iiu-attention-list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--iiu-rule); }
body.iiu-a1 .iiu-attention-row { display: grid; grid-template-columns: minmax(240px, 2fr) auto minmax(150px, 1fr) auto; gap: var(--iiu-s4); align-items: center; padding-block: var(--iiu-s4); border-block-end: 1px solid var(--iiu-rule); }
body.iiu-a1 .iiu-attention-row__what { font: var(--iiu-fw-subsection) var(--iiu-text-subsection)/var(--iiu-lh-subsection) var(--iiu-font-ui); }
body.iiu-a1 .iiu-attention-row__owner { color: var(--iiu-ink-2); }
body.iiu-a1 .iiu-progress { block-size: var(--iiu-s2); background: var(--iiu-rule); border-radius: var(--iiu-radius-pill); overflow: hidden; }
body.iiu-a1 .iiu-progress > span { display: block; block-size: 100%; background: var(--iiu-green-800); }
@media (max-width: 767px) {
  body.iiu-a1 input[type="text"], body.iiu-a1 input[type="date"], body.iiu-a1 input[type="number"], body.iiu-a1 select { min-height: var(--iiu-input-height-mobile); }
  body.iiu-a1 .iiu-content-col { padding-block-start: var(--iiu-s5); }
  body.iiu-a1 .iiu-zone { margin-block-end: var(--iiu-s6); }
  body.iiu-a1 .iiu-run-header { margin-block-end: var(--iiu-s4); }
  body.iiu-a1 .iiu-run-header .iiu-page-header__row { gap: var(--iiu-s2); }
  body.iiu-a1 .iiu-run-header .iiu-page-header__title { margin-block-end: 0; }
  body.iiu-a1 .iiu-run-progress-desktop { display: none; }
  body.iiu-a1 .iiu-run-progress-mobile { display: inline; }
  body.iiu-a1 .iiu-run-close--desktop, body.iiu-a1 .iiu-desktop-roadmap { display: none; }
  body.iiu-a1 .iiu-run-mobile-secondary { display: block; margin-block: var(--iiu-s4); }
  body.iiu-a1 .iiu-mobile-roadmap { display: block; margin-block-start: var(--iiu-s4); }
  body.iiu-a1 .iiu-mobile-roadmap > summary { min-height: var(--iiu-tap-target-min); display: flex; align-items: center; }
  body.iiu-a1 .iiu-grid, body.iiu-a1 .iiu-grid--three, body.iiu-a1 .iiu-promise-grid, body.iiu-a1 .iiu-architecture, body.iiu-a1 .iiu-role-chooser--grid { grid-template-columns: 1fr; }
  body.iiu-a1 .iiu-metric-strip { grid-template-columns: 1fr 1fr; }
  body.iiu-a1 .iiu-metric:nth-child(odd) { border-inline-start: none; }
  body.iiu-a1 .iiu-metric:nth-child(n+3) { border-block-start: 1px solid var(--iiu-rule); }
  body.iiu-a1 .iiu-journey { grid-template-columns: 1fr; }
  body.iiu-a1 .iiu-journey__step:not(:last-child)::after { inset-inline-start: 19px; inset-block-start: 40px; inline-size: 1px; block-size: calc(100% - 20px); border-block-start: 0; border-inline-start: 1px solid var(--iiu-rule-strong); }
  body.iiu-a1 .iiu-journey__node { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: var(--iiu-s3); min-height: 64px; text-align: start; }
  body.iiu-a1 .iiu-journey__number { margin: 0; }
  body.iiu-a1 .iiu-architecture li:not(:last-child)::after { inset-inline-start: 50%; inset-inline-end: auto; inset-block-start: auto; inset-block-end: calc(var(--iiu-s3) * -1); inline-size: 1px; block-size: var(--iiu-s3); border-block-start: 0; border-inline-start: 1px solid var(--iiu-rule-strong); }
  body.iiu-a1 .iiu-change-row { grid-template-columns: 1fr; gap: var(--iiu-s1); }
  body.iiu-a1 .iiu-scenario-row { grid-template-columns: 1fr 1fr; gap: var(--iiu-s3); }
  body.iiu-a1 .iiu-scenario-row__name, body.iiu-a1 .iiu-scenario-row__action { grid-column: 1 / -1; }
  body.iiu-a1 .iiu-scenario-row__action { justify-content: flex-start; }
  body.iiu-a1 .iiu-attention-row { grid-template-columns: 1fr; gap: var(--iiu-s2); }
  body.iiu-a1 .iiu-run-open-hint { display: block; margin-block-start: var(--iiu-s2); }
}

/* RTL: every rule above uses logical properties (inline-start/end, block-start/end);
   [dir=rtl] on <html> mirrors the whole layout automatically, no override needed here.
   Only content-direction icons (breadcrumb/details chevrons) get an explicit rule,
   already present above. */

/* -----------------------------------------------------------------------------------
   Guides family — canonical step sequence + completion footer (A.1, iiu/guides_ui.php)
   Content-bearing sibling of .iiu-steprail (which has no room for body/result/tip
   text). Logical properties throughout, per the RTL note above — no [dir=rtl]
   override needed.
   ----------------------------------------------------------------------------------- */
.iiu-guide-steps { list-style: none; margin: 0; padding: 0; max-width: var(--iiu-width-reading); }

.iiu-guide-step {
  background: var(--iiu-surface);
  border: 1px solid var(--iiu-rule);
  border-inline-start: 4px solid var(--iiu-green-800);
  border-radius: var(--iiu-radius-card);
  padding: var(--iiu-s5);
  margin-block-end: var(--iiu-s4);
}
.iiu-guide-step--auto   { border-inline-start-color: var(--iiu-success); }
.iiu-guide-step--verify { border-inline-start-color: var(--iiu-warning); }
.iiu-guide-step.is-done { border-inline-start-color: var(--iiu-success); background: var(--iiu-canvas); }
.iiu-guide-step.is-done .iiu-guide-step__title { text-decoration: line-through; color: var(--iiu-ink-3); }

.iiu-guide-step__top { display: flex; align-items: flex-start; gap: var(--iiu-s3); margin-block-end: var(--iiu-s3); }
.iiu-guide-step__icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.iiu-guide-step__meta { flex: 1; min-width: 0; }
.iiu-guide-step__badges { display: flex; flex-wrap: wrap; gap: var(--iiu-s2); margin-block-end: var(--iiu-s1); }
.iiu-guide-step__badge {
  font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui);
  padding: 2px var(--iiu-s2); border-radius: var(--iiu-radius-pill);
  background: var(--iiu-neutral-bg); color: var(--iiu-neutral-text);
}
.iiu-guide-step__badge--auto   { background: var(--iiu-success-bg); color: var(--iiu-success-text); }
.iiu-guide-step__badge--manual { background: var(--iiu-info-bg); color: var(--iiu-info-text); }
.iiu-guide-step__badge--verify { background: var(--iiu-warning-bg); color: var(--iiu-warning-text); }
.iiu-guide-step__title {
  font: var(--iiu-fw-subsection) var(--iiu-text-subsection)/var(--iiu-lh-subsection) var(--iiu-font-ui);
  color: var(--iiu-ink); margin: 0;
}
.iiu-guide-step__num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--iiu-green-800); color: var(--iiu-nav-text);
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--iiu-font-ui);
}
.iiu-guide-step.is-done .iiu-guide-step__num { background: var(--iiu-success); }

.iiu-guide-step__body {
  font: var(--iiu-fw-body) var(--iiu-text-body)/var(--iiu-lh-body) var(--iiu-font-ui);
  color: var(--iiu-ink-2); margin-block-end: var(--iiu-s3);
}
.iiu-guide-step__result {
  background: var(--iiu-success-bg); color: var(--iiu-success-text);
  border: 1px solid var(--iiu-success); border-radius: var(--iiu-radius-control);
  padding: var(--iiu-s2) var(--iiu-s3); margin: 0 0 var(--iiu-s3);
  font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui);
}
.iiu-guide-step__tip {
  background: var(--iiu-warning-bg); color: var(--iiu-warning-text);
  border: 1px solid var(--iiu-warning); border-radius: var(--iiu-radius-control);
  padding: var(--iiu-s2) var(--iiu-s3); margin: 0 0 var(--iiu-s3);
  font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui);
}
.iiu-guide-step__tip strong { display: block; margin-block-end: 2px; }
.iiu-guide-step__actions { display: flex; align-items: center; gap: var(--iiu-s3); flex-wrap: wrap; }

.iiu-guide-complete {
  max-width: var(--iiu-width-reading);
  background: var(--iiu-success-bg); border: 2px solid var(--iiu-success);
  border-radius: var(--iiu-radius-editorial); padding: var(--iiu-s5) var(--iiu-s6);
  text-align: center; margin-block: var(--iiu-s6);
}
.iiu-guide-complete__title {
  font: var(--iiu-fw-section) var(--iiu-text-section)/var(--iiu-lh-section) var(--iiu-font-editorial);
  color: var(--iiu-success-text); margin: 0 0 var(--iiu-s2);
}
.iiu-guide-complete__body {
  color: var(--iiu-success-text);
  font: var(--iiu-fw-secondary) var(--iiu-text-secondary)/var(--iiu-lh-secondary) var(--iiu-font-ui);
  margin: 0;
}

/* Guides — prerequisite checklist (page-local flow: gates the "start guide" button).
   Kept as plain markup in the page (no PHP helper — restraint gate, IIU guides A.1
   pilot) but the CSS lives here per the canonical-branch "no page-local <style>" rule. */
.iiu-guide-prereq { display: flex; flex-direction: column; }
.iiu-guide-prereq__item {
  display: flex; align-items: flex-start; gap: var(--iiu-s3);
  padding: var(--iiu-s3) 0; border-block-end: 1px solid var(--iiu-rule);
}
.iiu-guide-prereq__item:last-child { border-block-end: none; }
.iiu-guide-prereq__item input[type="checkbox"] {
  margin-block-start: 3px; width: 16px; height: 16px; flex: 0 0 auto;
  accent-color: var(--iiu-green-800); cursor: pointer;
}
.iiu-guide-prereq__item label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.iiu-guide-prereq__item strong {
  font: var(--iiu-fw-label) var(--iiu-text-label)/var(--iiu-lh-label) var(--iiu-font-ui); color: var(--iiu-ink);
}
.iiu-guide-prereq__item span {
  font: var(--iiu-fw-caption) var(--iiu-text-caption)/var(--iiu-lh-caption) var(--iiu-font-ui); color: var(--iiu-ink-3);
}