/* ==========================================================================
   Registry page styles — ARM Index list_companies & view_company
   Token-driven (uses --iata-* from iata-tokens.css).
   ========================================================================== */

/* --- Filter box --- */

.iata-registry-page {
    padding-top: 56px;
}

/* Figma sits the tab strip and filter row on a white surface, not on the page's
   grey background. */
.iata-registry-filters {
    margin-top: 32px;
    padding: 24px;
    background: var(--iata-white);
    border-radius: var(--iata-radius-surface);
    box-shadow: var(--iata-shadow-card);
}

/* The pre-ARMIP-73 registry has one search, not two modes, so Figma 1112:11924
   gives it a single flat filter row straight on the page's grey background. The
   tab strip and the white surface under it belong to the rebuilt page alone. */
.iata-registry-filters--flat {
    padding: 0;
    background: none;
    box-shadow: none;
}

/* --- Filter tabs --- */

.iata-registry-tabs {
    display: flex;
    gap: 32px;
    border-bottom: var(--iata-border-rule);
    margin-bottom: 24px;
}

/* Three tabs (ARMIP-235) are wider than a 360px phone's content box and slid
   the whole page sideways. Below 520px they wrap instead. Not a scrolling
   strip: that clips the focus ring and can leave the chosen tab half out of
   view. */
@media (max-width: 520px) {
    .iata-registry-tabs {
        flex-wrap: wrap;
        row-gap: 0;
    }
}

.iata-registry-tab {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 0;
    margin-bottom: -1px;
    font-family: var(--iata-txt-font-family);
    font-size: var(--iata-txt-l-size);
    font-weight: var(--iata-txt-weight-medium);
    color: var(--iata-grey-50);
    border-bottom: 2px solid transparent;
}

.iata-registry-tab:hover {
    color: var(--iata-grey-40);
}

.iata-registry-tab.is-active {
    color: var(--iata-red-primary);
    border-bottom-color: var(--iata-red-primary);
}

.iata-registry-tabpanel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.iata-registry-tabpanel[hidden] {
    display: none;
}

.iata-registry-filters__name-field {
    margin: 0;
}

/* The company-name box sits beside an `md-outlined-select` and had no resting
   border at all -- `.iata-filter-search` reserves 2px and leaves it transparent
   -- so it read as loose placeholder text rather than a field (ARMIP-161).
   The select's own outline tokens, so the pair is one control row: grey-95 at
   rest, grey-80 on hover. Focus is already blue-40 on the shared rule. */
.iata-registry-search {
    border-color: var(--iata-grey-95);
}

.iata-registry-search:hover:not(:focus-within) {
    border-color: var(--iata-grey-80);
}

/* Grey02 fields on the white filter panel, as forms have them (WCAG ask,
   ARMIP-241). The select takes it through its container token. */
.iata-registry-search,
.iata-registry-select,
.iata-registry-filters .iata-multiselect__toggle {
    background: var(--iata-grey-99);
}

.iata-registry-material-select {
    --md-outlined-select-text-field-container-color: var(--iata-grey-99);
}

/* The legacy registry has no panel: its fields sit on the page's grey, so they
   are white there (ARMIP-241 QA). */
.iata-registry-filters--flat .iata-registry-search,
.iata-registry-filters--flat .iata-registry-select,
.iata-registry-filters--flat .iata-multiselect__toggle {
    background: var(--iata-white);
}

.iata-registry-filters--flat .iata-registry-material-select {
    --md-outlined-select-text-field-container-color: var(--iata-white);
}

/* Four 40px options and the 8px padding either side, then the menu scrolls; a
   long name wraps at the field's width (`clamp-menu-width`) rather than running
   past the screen (ARMIP-241). The select's internal surface inherits the
   part's max-height, as on the OORR partner row. */
.iata-registry-material-select::part(menu),
.iata-registry-filters .iata-multiselect__menu {
    max-height: 176px;
}

.iata-registry-material-select md-select-option div[slot="headline"] {
    white-space: normal;
}

.iata-registry-filters fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* A mode panel carries up to four controls. Without a floor they share the
   row equally and squeeze the selects until "Standard Schema Version" renders
   as "Sta…"; with one, the panel wraps instead. */
.iata-registry-filters fieldset,
.iata-registry-filters .iata-multiselect {
    flex: 1 1 220px;
    min-width: 220px;
}

.iata-registry-filters legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.iata-registry-filters__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.iata-registry-filters__name-field {
    flex: 1.1 1 260px;
}

.iata-registry-tabpanel {
    flex: 2 1 480px;
}

.iata-registry-filters__actions {
    flex: 0 0 auto;
    margin-left: auto;
}

/* --- Buttons --- */

.iata-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--iata-gap-l);
    border-radius: var(--iata-radius-button);
    font-family: var(--iata-txt-font-family);
    font-size: var(--iata-txt-l-size);
    font-weight: var(--iata-txt-weight-medium);
    text-decoration: none;
    background-color: var(--iata-primary);
    color: var(--iata-white);
    border: none;
    cursor: pointer;
}

.iata-btn:hover {
    color: var(--iata-white);
}

.iata-btn--outline {
    background-color: transparent;
    color: var(--iata-primary);
    border: 1px solid var(--iata-primary);
}

.iata-btn--outline:hover {
    background-color: var(--iata-blue-95);
    color: var(--iata-primary);
}

.iata-btn:disabled,
.iata-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Legacy action row --- */

.iata-registry-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--iata-gap-s);
    justify-content: flex-end;
    width: 100%;
}

.iata-registry-actions md-filled-button[disabled] {
    --md-filled-button-disabled-container-color: var(--iata-grey-95);
    --md-filled-button-disabled-label-text-color: var(--iata-grey-60);
    --md-filled-button-disabled-container-opacity: 1;
    --md-filled-button-disabled-label-text-opacity: 1;
}

/* --- Registry table --- */

.iata-registry-results {
    margin-top: 32px;
    padding: 0;
    gap: 0;
}

.iata-registry-table-card {
    box-shadow: none;
    border: var(--iata-border-rule);
    border-radius: var(--iata-radius-surface);
}

.iata-registry-table {
    min-width: 720px;
}

.iata-registry-table th,
.iata-profile-table th {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Identifiers like IATA_AirShoppingRQ have no break opportunity, so without this
   they overrun the next cell instead of wrapping. */
.iata-registry-table td {
    overflow-wrap: anywhere;
}

/* The 52px gutter + three equal thirds below describe the company registry list
   specifically. Nine other templates borrow .iata-registry-table with 4-7
   columns and must size their own, so the shape lives behind a modifier. */
.iata-registry-table--fixed th:first-child,
.iata-registry-table--fixed td:first-child {
    width: 52px;
    text-align: center;
}

.iata-registry-table--fixed th:nth-child(2),
.iata-registry-table--fixed td:nth-child(2),
.iata-registry-table--fixed th:nth-child(3),
.iata-registry-table--fixed td:nth-child(3),
.iata-registry-table--fixed th:nth-child(4),
.iata-registry-table--fixed td:nth-child(4) {
    width: calc((100% - 52px) / 3);
}

/* The pre-ARMIP-73 registry, served while BUSINESS_CAPABILITIES_REGISTRY_ENABLED
   is off, has no Capabilities Type column: the same gutter, two halves. Goes
   with the flag. */
.iata-registry-table--legacy th:nth-child(2),
.iata-registry-table--legacy td:nth-child(2),
.iata-registry-table--legacy th:nth-child(3),
.iata-registry-table--legacy td:nth-child(3) {
    width: calc((100% - 52px) / 2);
}

.iata-registry-table--fixed td:nth-child(2),
.iata-registry-table--fixed td:nth-child(3),
.iata-registry-table--fixed td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The list's last column is data, not Actions, so it scrolls with the rest
   rather than pinning over the company name (ARMIP-241). */
.iata-table-wrapper--scroll .iata-registry-table--fixed th:last-child,
.iata-table-wrapper--scroll .iata-registry-table--fixed td:last-child {
    position: static;
}

/* Below 768px the pager stacks into a column three rows tall; sticky, it sat
   on the table header as the table scrolled in. It follows the rows instead. */
@media (max-width: 768px) {
    .iata-registry-results .iata-pagination {
        position: static;
    }
}

.iata-registry-compare {
    vertical-align: middle;
}

.iata-registry-comparison-count {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* --- Two-column intro --- */

@media (min-width: 1200px) {
    .iata-registry-intro .iata-rich-text {
        display: block;
        column-count: 2; column-gap: 32px;
    }
    .iata-registry-intro .iata-rich-text p { break-inside: avoid; }
}

.iata-registry-intro {
    margin-top: 32px;
}

/* Figma M/Regular 14/18 at every width (ARMIP-220). */
.iata-registry-intro .iata-rich-text,
.iata-registry-intro .iata-rich-text p {
    font-size: var(--iata-txt-m-size);
    line-height: var(--iata-txt-m-line-height);
}

/* .iata-panel--intro zeroes the panel gap, so without this the paragraphs -
   which carry no margin of their own - run together as one block. */
.iata-registry-intro .iata-rich-text p + p {
    margin-top: 16px;
}

/* --- Results header --- */

.iata-registry-results__header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--iata-gap-m); margin-bottom: var(--iata-gap-m);
}

/* .iata-page__header now lives in material-pages.css, which every material page
   loads — this file is opt-in, so pages that only pulled in their own stylesheet
   silently lost the layout. */

/* --- SSP Workflow Capabilities Verification page --- */

.ssp-capabilities-intro {
    align-items: start;
}

.ssp-capabilities-intro__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Figma sets this intro copy at M/Regular (14/18), not the 16px body scale —
   it is supporting text above the tables rather than the page's own prose. */
.ssp-capabilities-intro__col p {
    font-size: var(--iata-txt-m-size);
    line-height: var(--iata-txt-m-line-height);
}

/* Figma (node 1287:22100) pads this card at 24 and gutters its two columns at
   24, against `.iata-grid-2`'s 32. The padding matches `.iata-panel`'s own 24
   since ARMIP-194; it is kept so the card holds 24 at the ≤900px width too. */
.ssp-capabilities-intro-panel {
    padding: 24px;
}

.ssp-capabilities-intro-panel .ssp-capabilities-intro {
    gap: 24px;
}

/* Optional Remarks: the two notes and the field they are about stacked flush,
   because `.iata-note` zeroes its margins and nothing put them back. Figma
   (node 1461-78987) sets 16 between each, so the warning reads as its own line
   rather than as a second sentence of the note above it.

   Scoped under `.iata-page` to outweigh its `p { margin: 0 }` (0,1,1): a bare
   `> * + *` is only (0,1,0), because the universal selector counts for nothing —
   so it moved the `<form>` and left the two paragraphs flush. */
.iata-page .ssp-capability-remarks > * + * {
    margin-top: var(--iata-space-2);
}

/* Save Remarks sits 16 under the field, the fourth of the four gaps the review's
   Figma frames mark (node 1461-78987) — the prose named only two of them. It is
   inside the `<form>`, so the stack rule above does not reach it, and the
   `.iata-mt-s` utility it used to carry is 10. Not widened to `form > * + *`:
   the CSRF input is an element too, and a margin above it would land on the
   field and double the gap the warning already sets. */
.iata-page .ssp-capability-remarks__actions {
    margin-top: var(--iata-space-2);
}

/* Figma gives Recent News a tinted panel inside the white card so the release
   notes read as quoted material. Tertiary/Grey03 on Accent/Blue20 — the same
   pair already used for the VCC sub-sections. */
.ssp-capabilities-accordion .iata-scroll-panel {
    padding: 16px;
    border: var(--iata-border-width) solid var(--iata-border-accent);
    border-radius: var(--iata-radius-card);
    background: var(--iata-grey-100);
}

/* "Add Capability" is a tertiary action in Figma — label plus a leading-edge
   plus, set against the row rather than boxed. ARMIP-163: "could the
   'Requires …' text in the final column be left aligned or centered with the
   'Add Capability' button?" — one margin for both, so the eye has something to
   run down. */
.ssp-capabilities-add-col {
    text-align: left;
    white-space: nowrap;
    /* Figma (node 1287:61726) measures this table at 1728 as 86 / 95 / 1339 /
       208: Name absorbs every pixel of slack and the action column is exactly
       its content. `table-layout: fixed` gave all four an equal quarter, which
       is the "column sizes/spacing is all the same" the business reported --
       the real cause behind two failed alignment-only attempts (98c0d3bd,
       46f33501). With `iata-table--auto` on the table, `1%` on one cell and
       `100%` on another is how an auto table is told which column takes the
       remainder. The catalogue is the only table carrying this class, so it
       identifies itself without a new one. */
    width: 1%;
}

.iata-registry-table:has(.ssp-capabilities-add-col) th:nth-child(3),
.iata-registry-table:has(.ssp-capabilities-add-col) td:nth-child(3) {
    width: 100%;
}

/* `.iata-registry-table` cells are `overflow-wrap: anywhere`, so a cell's
   min-content is one character. Harmless under `fixed`, where no column was
   ever asked for its minimum; under `auto` with Name claiming the remainder,
   "Workflow Capability Group" collapsed to a 33px column of stacked letters and
   a UID like ORDOC2 broke across three lines. `break-word` keeps the same
   last-resort break for a genuinely unbreakable string but measures each column
   by its longest word -- which puts the group column at Figma's 86px exactly. */
.iata-registry-table:has(.ssp-capabilities-add-col) th,
.iata-registry-table:has(.ssp-capabilities-add-col) td {
    overflow-wrap: break-word;
}

.ssp-capabilities-accordion {
    border: 0;
    border-radius: var(--iata-radius-card);
    box-shadow: var(--iata-shadow-card);
}

/* Title size/weight come from the shared `.iata-accordion__header`; this one
   only needs the gap that keeps the hint block off the expand icon. */
.ssp-capabilities-accordion .iata-accordion__header {
    gap: var(--iata-gap-m);
}

/* `flex: 1 1 auto` + `text-align: right` were written when the hint was a flex
   *sibling* of the title inside `<summary>`. Commit 5280031a stacked the two in
   `.iata-accordion__header__ssp` (a column), so the hint became a stretched
   column item whose text ran to the right edge under a left-aligned title
   (ARMIP-192). In a column both declarations are wrong: it reads under the
   title, so it starts where the title starts. */
.ssp-capabilities-accordion__hint {
    color: var(--iata-grey-60);
    font-size: 14px;
    font-weight: var(--iata-txt-weight-regular);
    text-align: left;
}

/* --- SSP Partnerships Deployment page --- */

/* Bottom-aligned so field boxes line up under labels of differing height. */
/* Figma (node 1287-62574) sizes these to the card rather than to a fixed column
   count. The 300px floor is set by the labels, not the inputs — "Number of order
   management connections with settlement/clearance managers" needs that much to
   stay within two lines, and the ticket asks the minimum to always clear the
   label.

   The Partnerships cards carry no cap on the box. A 560px max-width on the field
   capped the *field*, not the track it sits in, so once the card was wider than
   ~1900px the leftover track width read as gap: measured 221px between the three
   Request a Partner Confirmation boxes at a 2560px viewport, against the 24px the
   grid asks for (ARMIP-193 sprint feedback). A field there now fills its track,
   so the distance between two boxes is the row gap at every width. */
.ssp-partners-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 16px;
    align-items: end;
}

/* Figma draws these questions in Grey/60 at M (14px), not the app's default
   field-label ink and L size (ARMIP-225). */
.ssp-partners-page .ssp-partners-field-grid .iata-form__field-label {
    color: var(--iata-grey-60);
    font-size: var(--iata-txt-m-size);
    line-height: var(--iata-txt-m-line-height);
}

/* Where the labels are uniform but one field carries supporting text, bottom
   alignment lifts that field's box above its neighbours instead. */
.ssp-partners-field-grid--top {
    align-items: start;
}

/* The cap survives on the `--top` grids only: those are the one- and two-field
   forms (the dashboard's report date, the user forms), where an uncapped field
   stretches to a quarter of a 2150px card with nothing beside it. */
.ssp-partners-field-grid--top .iata-form__field > md-outlined-text-field,
.ssp-partners-field-grid--top .iata-form__field > md-outlined-select {
    max-width: 560px;
}

.ssp-partners-field-grid__save {
    display: flex;
}

/* The grid's own row gap does not reach past its last row, so the confirmation
   checkbox sat flush against the field boxes above it (measured 0px). Figma
   (node 1287-62574) separates them by Spacing/16. */
.ssp-partners-field-grid + .iata-form__checkbox {
    margin-top: var(--iata-space-2);
}

/* The New User permissions table is the one table Figma (node 1373-23522) draws
   inside a box: the shared `.iata-table` is `border: 0` and marks its rows with
   a bottom rule alone, which left the four permission columns floating on the
   card with no left, right or top edge (ARMIP-194 sprint feedback). Scoped here
   rather than added to `.iata-table`, which every other table in the app reads. */
.ssp-users-perm-table {
    border: var(--iata-border-rule);
}

/* Current Users (Figma 1373-23522, ARMIP-229): the card's header is ruled off
   from the search bar the way the admin table cards' headers are
   (`.admin-pd__header`), and the bar runs straight into the table. The bar's
   own rule and the card's 24px gap above and below it are not in the frame. */
.ssp-users__header {
    margin-inline: calc(-1 * var(--iata-card-pad-x));
    padding: 0 var(--iata-card-pad-x) var(--iata-space-2);
    background: var(--iata-white);
    border-bottom: var(--iata-border-width-strong) solid var(--iata-border-subtle);
}

.ssp-users__header + .iata-table-toolbar--bleed {
    margin-top: calc(-1 * var(--iata-card-gap));
    border-bottom: 0;
}

.ssp-users__header + .iata-table-toolbar--bleed + .iata-table-wrapper--bleed {
    margin-top: calc(-1 * var(--iata-card-gap));
}

/* New User: the frame holds "Permissions this user should have" Spacing/16 from
   the fields above and the table below, not the form stack's 24 (ARMIP-229). */
.iata-stack--section > .iata-note:has(+ .ssp-users-perm-table),
.iata-stack--section > .iata-note + .ssp-users-perm-table {
    margin-top: var(--iata-space-2);
}

/* The last row's own bottom rule then lands 1px above the new outer border and
   the two paint as one 2px line along the foot (measured y=1054 and y=1055).
   The box draws that edge now, so the row gives it up. */
.ssp-users-perm-table tbody > tr:last-child > td {
    border-bottom: 0;
}

/* --- Partnerships Deployment card rhythm (ARMIP-163) ---
   The two cards are plain `<form>`s inside `.iata-panel`, so the panel's 24px
   flex gap reaches the form but nothing inside it: the intro paragraphs sat
   flush (measured 0px) and so did the Submit Request button under the consent
   checkbox. These give the form the card's own rhythm without turning it into
   a stack everything else on the page would inherit. */
.ssp-partners-page form > p.iata-note + p.iata-note {
    margin-top: var(--iata-space-2);
}

.ssp-partners-page form > .iata-form__checkbox + md-filled-button,
.ssp-partners-page form > .ssp-partners-field-grid + md-filled-button {
    margin-top: var(--iata-space-3);
}

/* --- Filled textareas on Partner Confirmation and VCC Open Questions ---
   Figma draws these on Tertiary/Grey02 inside a 1px IATA-Grey outline. The fill
   and the 4px radius already come from the shared filled-field rules; the
   outline was missing, so the boxes read as bare grey blocks (ARMIP-193 sprint
   feedback). */
.ssp-partner-page md-filled-text-field,
.ssp-vcc-freetext-grid md-filled-text-field {
    border: var(--iata-border-hairline);
    border-radius: var(--iata-radius-form);
}

/* That outline is the only border the frame draws: MD3 also paints a resting
   active indicator, a 1px #333 line along the bottom edge, which reads as a
   stray black border inside the grey one. */
.ssp-vcc-freetext-grid md-filled-text-field {
    --md-filled-text-field-active-indicator-height: 0px;
    --md-filled-text-field-hover-active-indicator-height: 0px;
}

/* The focus indicator was left in place here, because the question is a <label>
   outside the box and the blue underline was the only thing marking the focused
   field. The app's standard ring replaces it: an underline and a ring are two
   answers to one state. The 1px grey border above stays put -- the ring is an
   inset outline, so nothing moves.

   Only the VCC grid needs this. The partner page's textareas carry
   `.iata-field--flat`, which already brings both the zeroed indicator and the
   ring from material-forms.css. */
.ssp-vcc-freetext-grid md-filled-text-field:focus-within {
    --md-filled-text-field-focus-active-indicator-height: 0px;
    outline: var(--iata-focus-width) solid var(--iata-focus-color);
    outline-offset: calc(-1 * var(--iata-focus-width));
}

/* Figma (node 1287-62574) sets a list Spacing/16 under its heading, not the
   card's 24px gap. The shell's `ul` bottom margin also outranked the list's own
   `margin: 0`, doubling the gap above the next heading to 48px (ARMIP-225). */
.ssp-partners-page .iata-panel > .iata-switcher-list {
    margin: calc(var(--iata-space-2) - var(--iata-card-gap)) 0 0;
}

/* Partner names are data, not prose: at L they read as loud as the headings
   above them. M lines them up with the card copy around them. */
.ssp-partners-page .iata-switcher-list li {
    font-size: var(--iata-txt-m-size);
    line-height: var(--iata-txt-m-line-height);
}

/* --- SSP OORR questionnaire intro card ---
   Figma node 1368:203850. The shared `.ssp-capabilities-intro` rules above are
   sized for the Capabilities Verification page; this frame draws the same
   two-column card a step or two larger, so the overrides stay scoped here. */

/* Spacing/24 between the columns, not the grid's default 32. */
.ssp-oorr-intro .ssp-capabilities-intro {
    column-gap: 24px;
}

/* L/Regular (16/20) for all four blocks. Figma draws the Questionnaire Scope
   column one step up at XL/Regular and the other three at L, which reads as an
   accident inside a single card - the heading level already carries that
   block's weight. L is what three of the four use. */
.ssp-oorr-intro .ssp-capabilities-intro__col p,
.ssp-oorr-intro .ssp-capabilities-intro__col li {
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
}

/* Spacing/8 between the paragraphs of a block, Spacing/24 from its title down to
   the first of them. */
.ssp-oorr-intro .ssp-capabilities-intro__col {
    gap: 8px;
}

.ssp-oorr-intro .ssp-capabilities-intro__col > h3 {
    margin-bottom: 16px;
}

/* The panel already spaces its children by 24; the divider's own margin was
   stacking on top of that for 48 either side. */
.ssp-oorr-intro > .iata-divider {
    margin: 0;
}

/* --- SSP questionnaires (Value Capture Compass, OORR) --- */

/* Figma stacks the lettered sections as separate 24px-apart cards rather than
   as rows of one long panel. */
.ssp-questionnaire-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Compound selector so this outranks `.iata-accordion__item:last-child`, which
   strips the bottom border off the final card in a stack. */
.iata-accordion__item.ssp-questionnaire-section {
    border: var(--iata-border-divider);
    border-radius: var(--iata-radius-card);
    background: var(--iata-white);
    box-shadow: var(--iata-shadow-card);
    overflow: hidden;
}

/* Figma draws the questionnaire section titles as blue H3s, not the shared
   header's 28px grey H2 — at 20/24 the header box lands on 72px, which is where
   Figma starts the first question. */
.ssp-questionnaire-section > .iata-accordion__header {
    padding: 24px;
    font-size: var(--iata-txt-heading3-size);
    line-height: var(--iata-txt-heading3-line-height);
    color: var(--iata-blue-40);
}

.ssp-questionnaire-section > .iata-accordion__body {
    padding: var(--iata-gap-s) 24px 24px;
}

/* Payment sub-sections (F1. Payment Strategy and friends) are nested one level
   down, so Figma tints them and gives them their own border — otherwise a
   nested card on a white card reads as the same level as its parent. */
.iata-accordion__item.ssp-questionnaire-subsection {
    border: var(--iata-border-width) solid var(--iata-border-accent);
    border-radius: var(--iata-radius-card);
    background: var(--iata-grey-100);
    overflow: hidden;
}

.ssp-questionnaire-subsection + .ssp-questionnaire-subsection {
    margin-top: 16px;
}

.ssp-questionnaire-subsection > .iata-accordion__header,
.ssp-questionnaire-subsection > .iata-accordion__body {
    background: transparent;
}

/* A sub-section title must stay below its parent section's, so pin it to 16/20 —
   the same blue-on-tint treatment `.iata-accordion--tinted` gives every other
   nested panel. */
.ssp-questionnaire-subsection > .iata-accordion__header {
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    color: var(--iata-blue-40);
}

.ssp-questionnaire-subsection > .iata-accordion__header:hover {
    background-color: var(--iata-blue-95);
}

/* The first sub-section follows the parent section's own questions, which end
   flush with the divider above them. */
.ssp-questionnaire-section > .iata-accordion__body > .ssp-questionnaire-subsection:first-of-type {
    margin-top: 24px;
}

.ssp-vcc-backtotop {
    margin-top: 8px;
}

.ssp-questionnaire-question {
    padding: 24px 0;
}

.ssp-questionnaire-section .iata-divider {
    margin: 0;
}

.ssp-questionnaire-question:first-child {
    padding-top: 0;
}

.ssp-questionnaire-question:last-child {
    padding-bottom: 0;
}

.ssp-questionnaire-question > p {
    margin: 0 0 24px;
}

/* OORR asks its questions with a `<label>` where the Compass uses a `<p>`. */
.ssp-questionnaire-question > .iata-field-label {
    display: block;
    margin: 0 0 24px;
}

/* OORR carries a third level — question areas — inside the topic panel. Figma
   has no card for it, only a title one step below the panel's own, so the areas
   sit flush in the panel body and are told apart by a divider between them. The
   questions inside one area are separated by their own 24px padding alone; a
   rule between every question turned a long area into a ledger. */
.iata-divider + .ssp-questionnaire-area {
    padding-top: 24px;
}

.ssp-questionnaire-area:last-child > .ssp-questionnaire-question:last-child {
    padding-bottom: 0;
}

h3.ssp-questionnaire-area__title {
    margin: 0 0 24px;
    font-size: var(--iata-txt-m-size);
    line-height: var(--iata-txt-m-line-height);
    font-weight: var(--iata-txt-weight-bold);
    color: var(--iata-grey-30);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Value Capture Compass questionnaire, Figma node 1300-21427 (ARMIP-227) ---
   Scoped like the OORR block below: the shared rules above also draw the OORR
   landing and glossary card stacks. A section's first question sits 24px under
   its title, not the shared body's 10px, and the question is XL/Medium. */
.ssp-questionnaire-stack--vcc .ssp-questionnaire-section > .iata-accordion__body {
    padding-top: 24px;
}

.ssp-questionnaire-stack--vcc .ssp-questionnaire-question > p {
    font-size: var(--iata-txt-xl-size);
    line-height: var(--iata-txt-xl-line-height);
    font-weight: var(--iata-txt-weight-medium);
}

/* --- OORR questionnaire, measured against Figma frame 1368:203850 ----------
   Scoped to this one stack rather than folded into the rules above, because
   those are shared with the Value Capture Compass questionnaire
   (`armi/vcc_questionnaire.html`) and with two plain card stacks on the OORR
   landing and glossary pages — none of which this review looked at. The
   business review found the page "only half updated to the new design"
   (ARMIP-194); every number below comes from that frame.

   Card rhythm: the frame's Content (1695:35145) sets its section panels 16px
   apart (4052→4068, 8961→8977, 9049→9065 …) and each section sets its topic
   panels 24px apart (900→924, 1832→1856, 3948→3972). The page had the pair
   the other way round — 24 between sections, 16 between topics. */
.ssp-questionnaire-stack--oorr {
    gap: 16px;
}

.ssp-questionnaire-stack--oorr .ssp-questionnaire-subsection + .ssp-questionnaire-subsection {
    margin-top: 24px;
}

/* The frame insets a topic panel 16px vertically and 24px horizontally
   (1695:36963), where the shared accordion gives it a flat 20px. */
.ssp-questionnaire-stack--oorr .ssp-questionnaire-subsection > .iata-accordion__header {
    padding: 16px 24px;
    font-size: var(--iata-txt-heading3-size);
    line-height: var(--iata-txt-heading3-line-height);
}

/* A section's first topic panel sits 24px under the section title (ARMIP-223),
   not the shared body's 10px. */
.ssp-questionnaire-stack--oorr .ssp-questionnaire-section > .iata-accordion__body {
    padding-top: 24px;
}

/* The frame opens a topic's content 24px below its title (1695:36963 — title
   ends y=40, first block starts y=64), and the header above pays 16 of that,
   so the body owed the other 8. The global header divider now sits between
   them, so the content starts 16px below that line instead (ARMIP-223).
   It closes 16px above the panel's bottom edge. */
.ssp-questionnaire-stack--oorr .ssp-questionnaire-subsection > .iata-accordion__body {
    padding: 16px 24px;
}

/* A question area's title is the frame's XL/Medium on Accent/Blue 80
   (1695:36968, 1695:36976) — a third blue heading below the section's and the
   topic's, both of which are H3 on IATA/Blue. It was rendering as 14/18 bold
   uppercase letter-spaced grey, which is not a heading style this design
   system uses anywhere. */
.ssp-questionnaire-stack--oorr h3.ssp-questionnaire-area__title {
    margin: 0 0 16px;
    font-size: var(--iata-txt-xl-size);
    line-height: var(--iata-txt-xl-line-height);
    font-weight: var(--iata-txt-weight-medium);
    color: var(--iata-blue-60);
    text-transform: none;
    letter-spacing: 0;
}

/* An area title that introduces its own instructions binds to them at 8px
   instead (1708:35634 — title y=0 h=22, its description line y=30), the same
   8px a question gives its supporting line below. The 16px then falls to the
   instructions' own bottom margin, so the block still ends 16px clear. */
.ssp-questionnaire-stack--oorr
    h3.ssp-questionnaire-area__title:has(+ .ssp-questionnaire-instructions) {
    margin-bottom: 8px;
}

/* The question itself is XL/Medium on Tertiary/Black 60 (1695:36971), 16px
   clear of the control it labels — the frame's Container gap, not 24. */
.ssp-questionnaire-stack--oorr .ssp-questionnaire-question > .iata-field-label {
    margin: 0 0 16px;
    font-size: var(--iata-txt-xl-size);
    line-height: var(--iata-txt-xl-line-height);
    color: var(--iata-grey-50);
}

/* …and its supporting line is L/Regular on Tertiary/Black 40 (1695:36995),
   8px under the question and 16px above the control, so it reads as part of
   the question rather than as a third thing between them. */
.ssp-questionnaire-stack--oorr .ssp-questionnaire-question > p {
    margin: 8px 0 16px;
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    color: var(--iata-grey-60);
}

/* Instructions on a topic or a question area. The frame draws them as the same
   L/Regular Tertiary/Black 40 copy, directly under the title they qualify —
   not in the yellow `.iata-alert--warning` box with a warning glyph the page
   was using, which the review called out by name. */
.ssp-questionnaire-stack--oorr .ssp-questionnaire-instructions,
.ssp-questionnaire-stack--oorr .ssp-questionnaire-instructions p {
    margin: 0 0 16px;
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    color: var(--iata-grey-60);
}

.ssp-questionnaire-stack--oorr .ssp-questionnaire-instructions p:last-child {
    margin-bottom: 0;
}

/* A topic's own description belongs to its title block in the frame
   (1708:35623 — title y=0 h=24, description y=32), so it sits 8px under the
   title, not 24. The header already pays 16 of that below its text and the
   body another 8; the instructions give the 16 back. It stays in the body
   rather than moving into the `<summary>`, because it is `|rich_text` and a
   link inside a summary toggles the panel instead of following. */
.ssp-questionnaire-stack--oorr
    .ssp-questionnaire-subsection
    > .iata-accordion__body
    > .ssp-questionnaire-instructions:first-child {
    margin-top: -16px;
}

/* Two question areas are held apart by a 2px Accent/Blue 20 rule with
   Spacing/40 either side (1695:36563 — area ends 251, divider y=291 h=2,
   next area 333), one weight up from the hairline the frame puts between
   two questions of one area. The shared rules give it 1px of --iata-grey-95
   with 24 either side; both are overridden here rather than edited, because
   the Value Capture Compass questionnaire reads them too. */
.ssp-questionnaire-stack--oorr .ssp-questionnaire-area + .iata-divider {
    border-top: var(--iata-border-width-strong) solid var(--iata-border-accent);
    border-radius: 2px;
    margin: 40px 0;
}

/* The 40 either side is paid by the divider's own margin. Without these two
   the last question above it adds its 24px bottom padding and the area below
   its 24px top padding, and the gap reads 64. */
.ssp-questionnaire-stack--oorr .iata-divider + .ssp-questionnaire-area {
    padding-top: 0;
}

.ssp-questionnaire-stack--oorr
    .ssp-questionnaire-area:has(+ .iata-divider)
    > .ssp-questionnaire-question:last-child {
    padding-bottom: 0;
}

/* --- ARMIP-194 Part 2 (review round 2, same Figma frame) -------------------
   Eleven further deltas the business review measured against the frame after
   Part 1 shipped. Everything here stays inside the `--oorr` scope for the same
   reason the block above does: the base `.ssp-questionnaire-*` rules are read
   by the Value Capture Compass questionnaire too. */

/* The 24px above the first topic panel paid for questions the section itself
   used to carry directly; it has none, so the panel opened 24 below the
   section's own body padding and the first card sat lower than every card
   under it (review #1). */
.ssp-questionnaire-stack--oorr
    .ssp-questionnaire-section
    > .iata-accordion__body
    > .ssp-questionnaire-subsection:first-of-type {
    margin-top: 0;
}

/* A question is a flat block now: the 24px it padded itself with is paid by
   the rule between two questions instead, so the first and last question in an
   area end flush with the panel's own inset (review #2). */
.ssp-questionnaire-stack--oorr .ssp-questionnaire-question {
    padding: 0;
}

/* Two questions of one area are held apart by a hairline — 1px Grey05 with
   Spacing/24 either side — one weight down from the 2px Accent/Blue 20 rule
   between two areas above. `.iata-divider` is already that hairline, so only
   the radius and the 24 are set here — the shared
   `.ssp-questionnaire-section .iata-divider` rule zeroes the margin.
   ARMIP-163 removed the per-question rule on a
   business review; this round asked for it back (review #4), so that decision
   is reversed here and in docs/design/figma-alignment.md row 4.3. */
.ssp-questionnaire-stack--oorr .ssp-questionnaire-question-divider {
    border-radius: 2px;
    margin: 24px 0;
}

/* The questionnaire's controls carry `.iata-form-field` — the bare
   `width: 100%` utility in material-pages.css — not `.iata-form__field`, which
   is what publishes the app's outlined-field surface. They are named in that
   rule (material-forms.css) rather than given a second copy of it; what is
   theirs alone is the frame's white fill, where the form pages use Grey02. */
.ssp-questionnaire-stack--oorr md-outlined-text-field.iata-form-field,
.ssp-questionnaire-stack--oorr md-outlined-select.iata-form-field {
    background: var(--iata-white);
}

/* The drag/keyboard instruction moved from under the list to above it
   (review #6) — a reader who has already dragged the rows does not need to be
   told how. It carried no margin of its own, which read as a caption glued to
   the first card once it sat on top, so it takes the same 8px a supporting
   line gives the control below it. */
.ssp-questionnaire-stack--oorr .ranking-container > .iata-note {
    margin: 0 0 8px;
}

/* An answer's optional comment box follows the control it qualifies with
   Spacing/16 between them (review #5 after a dropdown, review #9 after a
   checkbox group). Its wrapper asked for `.iata-mt-m`, which no stylesheet
   defines — the same dead class the consent notice hit in Part 1 — so the gap
   was whatever the element above happened to leave: 16 after a supporting
   line, 0 after a control. The wrapper carries its own class now rather than
   the utility being invented, because three templates name `.iata-mt-m`. */
.oorr-answer-comment {
    margin-top: 16px;
}

/* A topic's description sits Spacing/16 under the header it qualifies
   (review #8). Part 1 pulled it up by 16 to cancel the body's own 8px inset
   and land on 8; the review measured that as the header and the text touching
   — -8px between the header box and the first line — and asked for 16. */
.ssp-questionnaire-stack--oorr
    .ssp-questionnaire-subsection
    > .iata-accordion__body
    > .ssp-questionnaire-instructions:first-child,
.ssp-questionnaire-stack--oorr
    .ssp-questionnaire-section
    > .iata-accordion__body
    > .ssp-questionnaire-instructions:first-child {
    margin-top: 8px;
}


/* A section or topic holding an invalid answer is flagged on its title. The old
   bars repainted the whole header red, which a white card cannot do without
   losing the blue title Figma asks for. */
.ssp-questionnaire-section > .iata-accordion__header.has-errors,
.ssp-questionnaire-subsection > .iata-accordion__header.has-errors {
    color: var(--iata-error);
}

/* Open Questions run in one column, each question over its own box (ARMIP-193
   sprint feedback) — Figma's 2-up and 3-up rows are superseded. */
.ssp-vcc-freetext-grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 32px;
}

.ssp-vcc-freetext-grid .iata-form__field {
    gap: var(--iata-gap-s);
}

/* Prose questions, not field names: lighter than the app's default field label,
   and indented 4px so they line up with the text inside the box below. The size
   is the page's L, not the M Figma draws — ARMIP-163 asks for one size across
   the multiple-choice questions, their options and these, and L is the one of
   the two that is on the type scale (ADR 014). */
.ssp-vcc-freetext-grid .iata-form__field-label {
    padding-left: 4px;
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    font-weight: var(--iata-txt-weight-regular);
    color: var(--iata-grey-50);
}

/* --- OORR questionnaire body (shared by the customer's page and the admin's) ---
   These style `oorr/_questionnaire_body.html`, which both `pr_questionnaire.html`
   and `admin_pr_company.html` include, so they cannot live in either page's own
   <style> any more. Both templates already load this stylesheet. */

/* The number belongs to the slot, not to the card in it (ARMIP-163): it
   sits in the row's own gutter, outside the card the reader drags, so a
   card travels past numbers that stand still. Figma node 1695:36904
   sets that numeral in H2 Tertiary/Black40 with no full stop — it is
   the landmark the moving card is read against — and fills the card
   IATA/White so it lifts off the #F7F8FC sub-section panel. */
/* 1fr tracks, so every card is as tall as the tallest one: a two-line label
   used to make one card grow while the rest stayed at 38px, and a ranked list
   of unequal blocks reads as a hierarchy that is not there (ARMIP-194 #6). */
.ranking-list {
    display: grid;
    grid-auto-rows: 1fr;
}

.oorr-ranking-item {
    display: flex;
    align-items: stretch;
    gap: var(--iata-space-2);
    margin-bottom: var(--iata-space-1);
}

.oorr-ranking-rank {
    flex: 0 0 var(--iata-space-4);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: var(--iata-txt-heading2-size);
    line-height: var(--iata-txt-heading2-line-height);
    font-weight: var(--iata-txt-weight-medium);
    color: var(--iata-grey-60);
}

/* A flex row, so the label is a block of its own and a wrapped second line
   starts under the first line's text instead of under the drag handle
   (ARMIP-194 #6). */
.oorr-ranking-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--iata-space-2);
    cursor: move;
    background-color: var(--iata-white);
    border: var(--iata-border-divider);
    padding: var(--iata-space-1) var(--iata-space-2);
    border-radius: var(--iata-radius-card);
}

.oorr-ranking-card:hover {
    background-color: var(--iata-grey-95);
}

/* A row picked up with the keyboard (Space) has to look picked up, or a sighted
   keyboard user cannot tell a move from a walk. Borrows the card's own hover
   fill and darkens its border rather than inventing a state the kit does not
   draw. It paints only while a row is in the air, so it cannot reach a baseline;
   the focus ring is the shared one in `material-base.css`
   (`[tabindex]:focus-visible`), which the rows now match. */
.oorr-ranking-item[aria-selected="true"] .oorr-ranking-card {
    background-color: var(--iata-grey-95);
    border-color: var(--iata-grey-60);
}

.oorr-ranking-card .drag-handle {
    flex: 0 0 auto;
    color: var(--iata-grey-60);
}

/* The admin's copy cannot be reordered, so Figma 1803:41522 draws its rows
   with no handle, no hover and Tertiary/Black40 text (ARMIP-223). The
   customer's rows, submitted ones included, keep all three. */
.oorr-admin-company .oorr-ranking-card {
    cursor: auto;
    color: var(--iata-grey-60);
}

.oorr-admin-company .oorr-ranking-card:hover {
    background-color: var(--iata-white);
}

.oorr-admin-company .oorr-ranking-card .drag-handle {
    display: none;
}

/* Figma 1368:203850 lists a question's options directly under it — one
   column, 22px rows on a Gap/XS pitch, with no disclosure to open and no
   rule down the side. The `.oorr-options-details` fold and the
   `.oorr-options-body` blue bar that used to wrap them are gone: an option
   list the reader has to go and find is not what the frame draws, and a
   question flagged invalid by the server could be sitting inside a closed
   one, which is why the error-summary scroll never reached it. */
.oorr-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* `touch-target="wrapper"` gives the 18px control a 15px block margin, so a
   row that Figma draws at 22 (1698:37324 and its four siblings, 30px apart)
   occupied 48 and a five-option question read as white space. 6px is the
   number `material-forms.css` already settled on for the radio group under
   the same finding (ARMIP-165): it keeps a 30px target — Material's densest —
   rather than taking the frame's 22 and leaving no target at all. The row
   lands on 30/38 against the frame's 22/30; that is the one deviation here. */
.ssp-questionnaire-stack--oorr .oorr-options md-checkbox {
    margin-block: 6px;
}

.ssp-questionnaire-stack--oorr .oorr-options > .iata-form__checkbox {
    gap: 8px;
}

/* Same control, same trap: the notice is 8px of padding around one checkbox
   row, so the 48px target made a 66px box of the frame's 40. */
.oorr-consent md-checkbox {
    margin-block: 6px;
}

/* M/Regular on Tertiary/Black 80, a step below the L/Regular supporting
   line above them so the question still leads its own block. Scoped,
   because `material-forms.css` sets every checkbox label in the app to
   L on --iata-grey-10. The capabilities page's own checkboxes went to M
   in the first ARMIP-194 pass; this is the questionnaire agreeing. */
.ssp-questionnaire-stack--oorr .oorr-options label {
    font-size: var(--iata-txt-m-size);
    line-height: var(--iata-txt-m-line-height);
    color: var(--iata-grey-40);
}

/* A locked questionnaire's checkbox labels go to Figma's Tertiary/Black20
   (ARMIP-223). */
.ssp-questionnaire-stack--oorr .iata-form__checkbox:has(> md-checkbox[disabled]) label,
.ssp-questionnaire-stack--oorr .iata-form__checkbox:has(> md-checkbox[disabled]) .oorr-consent-text {
    color: var(--iata-text-disabled);
}

/* The question blocks are flat now, so an invalid one needs its own
   padding for the error outline to sit off the text. */
.oorr-invalid-question {
    border: 2px solid var(--iata-error);
    border-radius: var(--iata-radius-card);
    padding: var(--iata-gap-m);
}

/* Figma node 1695:36904 draws the consent checkbox inside a "Consent
   notice" box — Accent/Green 10 on an Accent/Green 20 hairline, an info
   icon ahead of the control. Both greens are the pair .iata-pill--success
   already uses. The 8px padding and gap are Figma's Component/XS and
   Gap/XS; the --iata-gap-* scale has no 8, so they are written out the
   way .ssp-oorr-intro writes its 24/16/8 in registry.css. */
.oorr-consent {
    box-sizing: border-box;
    /* The notice sat flush against the control it qualifies — measured 0px
       under the dropdown. Its wrapper asks for `.iata-mt-m`, which no
       stylesheet defines: the scale only has `.iata-mt-s` and `.iata-mt-l`,
       so the class contributed nothing. Spacing/16 is the frame's gap after a
       dropdown (`1803:42900` — the dropdown ends 106, the notice starts 122),
       and the same 16 the Additional Comments box already reads, which it gets
       from its supporting line's bottom margin rather than from the dead
       class. The frame is not self-consistent here — it puts 10 after a
       free-text box (`1746:35255`) — and 10 is on no spacing scale, so the
       majority number wins. Set on the box, not by defining the missing
       utility: three templates name `.iata-mt-m` and inventing it now would
       move all three, including the whole questionnaire stack. */
    margin-top: 16px;
    /* The notice tracks the answer it qualifies rather than the question
       block: the frame draws it at the free-text box's own 830px
       (1746:35255), where it measured the block's full 1628. */
    max-width: 830px;
    min-height: 40px;
    align-items: center;
    background-color: var(--iata-green-90);
    border: 1px solid var(--iata-green-80);
    /* Corner Radius/8. No 8px radius token exists — --iata-radius-card is
       4 — so it is written out the way .ssp-oorr-intro writes its 24/16/8.
       ARMIP-163 shipped the card radius as a deliberate deviation; this
       review asked for the frame. */
    border-radius: 8px;
    padding: 8px;
    gap: 8px;
}

/* 8px of padding, a 24px glyph and an 8px gap put the icon at x=8 and the
   checkbox at x=40 — the frame's two numbers, out of the box model. */
.oorr-consent__icon {
    flex: 0 0 auto;
    color: var(--iata-green-primary);
    font-size: 24px;
    --md-icon-size: 24px;
}

.oorr-consent-text {
    /* Tertiary/Black 60, not the box's green: the frame tints the box and
       the glyph, and leaves the sentence the colour of ordinary copy.
       ARMIP-163 kept the green because the ask had not raised it. */
    color: var(--iata-grey-50);
    /* Figma names this L/Bold, 16/22/700 — the notice has to out-weigh
       the answer it qualifies, which Medium did not do. */
    font-weight: var(--iata-txt-weight-bold);
    font-size: var(--iata-txt-l-size);
    line-height: 22px;
}

/* .iata-form-field stretches a control to its container, which for a
   select meant the full 1636px of the question block. Figma draws every
   questionnaire dropdown at one of two widths — 320px for the short
   option lists, 640px for the long ones (nodes 1696:37029, 1695:36973).

   `width: auto` was meant to shrink each box to its own content, but an
   `md-outlined-select` renders its options in a fixed-position menu, so it
   has no intrinsic width to shrink to and every box on the page landed on
   the 320px `min-width` — one size, which is what the review reported
   (ARMIP-194). The choice is data, not layout: `wide_select` in
   `questionnaire_tree.py` reads the question's own options and the
   template names the box it needs. Both stay fluid below their width so a
   narrow viewport still fits them. */
.oorr-select.iata-form-field {
    width: 320px;
    max-width: 100%;
}

.oorr-select--wide.iata-form-field {
    width: 640px;
}

/* Same trap for the typed answers: Figma measures the free-text box at
   830px and the number box at 160px inside the same 1630px question
   block, so neither is drawn at the block's width. Both stay fluid
   below those widths for the narrow viewports. */
.oorr-answer--text.iata-form-field {
    max-width: 830px;
}

.oorr-answer--number.iata-form-field {
    max-width: 160px;
}

/* Figma nodes 1695:35144 and 1695:35574 both float Spacing/40 clear of
   the block above, and space the row's own buttons at Gap/M (24px) —
   one step past --iata-gap-s, which is what .iata-actions gives them. */
.oorr-page-actions {
    margin-top: var(--iata-gap-l);
    margin-bottom: var(--iata-gap-l);
    gap: 24px;
}

.oorr-page-actions .iata-actions {
    gap: 24px;
}

/* --- Horizontal legend (Company Profile) --- */

.iata-legend {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--iata-gap-m) var(--iata-gap-l); margin: 0;
}
/* min-width:0 lets a long unbroken value (an email address) wrap inside its
   grid track instead of overhanging the next column. */
.iata-legend__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iata-legend__item--full { grid-column: 1 / -1; }
.iata-legend dt {
    color: var(--iata-grey-60); font-size: var(--iata-txt-s-size);
    font-weight: var(--iata-txt-weight-medium); text-transform: none; letter-spacing: 0;
}

/* Bold and grey-40 rather than medium grey-60: at S the labels read as a
   watermark over the values they name, which is what ARMIP-161 asks to fix.
   grey-40 is `--iata-grey-primary`, the design system's black for text.

   Scoped to the company-profile card, not `.iata-legend` at large. Six admin
   and application templates share the component and were reviewed separately
   (ARMIP-164, ARMIP-165) without this being raised, so widening it here would
   restyle pages nobody asked about. */
.iata-profile-summary .iata-legend dt {
    color: var(--iata-grey-40);
    font-weight: var(--iata-txt-weight-bold);
}
.iata-legend dd {
    margin: 0;
    color: var(--iata-grey-40);
    font-size: var(--iata-txt-l-size);
    overflow-wrap: anywhere;
}

/* --- Profile sections --- */

.iata-profile-summary {
    gap: 24px;
}

.iata-profile-summary .iata-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iata-profile-table-section {
    /* `clip` keeps the rounded corners without becoming the scroll container
       the sticky header would then stick inside. */
    overflow: clip;
    background: var(--iata-white);
    border: var(--iata-border-rule);
    border-radius: var(--iata-radius-surface);
    box-shadow: var(--iata-shadow-card);
}

.iata-profile-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 52px;
    padding: 10px 24px;
    border-bottom: var(--iata-border-rule);
    background: var(--iata-white);
}

.iata-profile-section__header h3 {
    flex: 0 0 auto;
}

.iata-profile-section__header p {
    margin: 0;
    color: var(--iata-grey-50);
    font-size: 14px;
    line-height: 18px;
    text-align: right;
}

/* Underlined, like every other in-prose link on the registry pages. The only
   link this rule covers is the "available here" one, and colour alone did not
   read as a link against the grey supporting text (ARMIP-161). */
.iata-profile-section__header a {
    color: var(--iata-blue-40);
    text-decoration: underline;
}

/* ARMIP-256: a Setup capability with no messages is its header alone. */
.iata-profile-detailed .iata-accordion__body:empty {
    display: none;
}

.iata-profile-empty {
    padding: 24px;
    color: var(--iata-grey-50);
    font-size: 16px;
    line-height: 20px;
    font-weight: var(--iata-txt-weight-medium);
}

.iata-profile-table-section .iata-registry-table-card {
    border: 0;
    border-radius: 0;
}

.iata-profile-table-section .iata-registry-table-card + .iata-registry-table-card {
    border-top: var(--iata-border-rule);
}

.iata-profile-table {
    min-width: 0;
}

.iata-profile-table th,
.iata-profile-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* --- Export spinner --- */

.iata-export-spinner {
    --md-circular-progress-size: 18px;
    margin-left: var(--iata-gap-xs);
    display: none;
}

/* --- Responsive --- */

@media (max-width: 992px) {
    .iata-registry-filters__bar {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    /* The row's flex-basis widths become heights in a column: a 48px field
       sat in a 220-260px box, the panel in 480px (ARMIP-241). */
    .iata-registry-filters .iata-registry-filters__bar > * {
        flex-basis: auto;
    }

    .iata-registry-filters__actions {
        margin-left: 0;
    }

    .iata-registry-filters__actions md-filled-button {
        width: 100%;
    }

    .iata-registry-results {
        overflow: visible;
    }

    .iata-multiselect__menu {
        width: calc(100vw - 32px);
        min-width: 0;
    }

    .iata-registry-actions {
        justify-content: center;
        padding: 0 8px 16px;
    }

    .iata-registry-table-toolbar {
        height: auto;
        min-height: 52px;
        padding: 12px 10px;
    }

    .iata-export-link {
        width: 100%;
    }

    .iata-registry-actions md-filled-button {
        width: 100%;
    }

    .iata-registry-table-card {
        border-top: var(--iata-border-rule);
    }

    .iata-profile-summary .iata-legend {
        grid-template-columns: 1fr;
    }
}

/* --- OORR business capability selection (Figma node 1307-24259) ------------
   Absorbed from an inline <style> in pr_capabilities_selection.html so the
   page's rules live with the rest of the SSP styles. */

/* Figma tints the capability sections rather than leaving them white, so they
   read as a group distinct from the Instructions and Partners cards above.
   They are now the inner half of a nested pair: the white `.iata-panel` around
   them carries the card shadow and the 24px gap that used to be this rule's
   margin, and these read as cards by their Accent/Blue20 outline instead. */
.oorr-domain {
    background-color: var(--iata-grey-100);
    border: var(--iata-border-width) solid var(--iata-border-accent);
    border-radius: var(--iata-radius-card);
    overflow: hidden;
}

/* A <summary> is display:list-item, so without this the chevron drops to its
   own line beneath the domain name and the header runs to 120px. */
/* Figma (node 1316-22845) insets these panels by Spacing/24 on all four sides
   and separates the title row from the checkboxes with a 24px gap and nothing
   else. The 20px/40px pair they carried came from the legacy --iata-gap-*
   scale and left the capability checkboxes floating well inside the section.
   The header's own bottom padding is that gap, so the body adds none
   (ARMIP-194). It rides the inset below, so the gap is 16 now too.

   16, not the frame's 24: Figma draws a 34x34 checkbox where Material's
   `touch-target="wrapper"` is 48x48, so the control eats 14px of the inset the
   frame pays in whitespace and 24 measured as too much beside it. Business
   asked for 16 explicitly and owns the deviation from the token
   (ARMIP-194 sprint feedback). */
.oorr-domain-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iata-gap-m);
    background-color: var(--iata-grey-100);
    padding: var(--iata-space-2);
}

/* Figma sets the domain name a step above the capability labels under it, at
   20/24 rather than the L pair the shared checkbox rule gives every label
   (ARMIP-194 sprint feedback). That is the heading3 pair exactly, so it is
   taken from the token rather than written out. Scoped to the header so the
   rest of the app's checkboxes keep the shared size. */
.oorr-domain-header .iata-form__checkbox label {
    color: var(--iata-blue-40);
    font-weight: var(--iata-txt-weight-bold);
    font-size: var(--iata-txt-heading3-size);
    line-height: var(--iata-txt-heading3-line-height);
}

.oorr-domain-body {
    padding: 0 var(--iata-space-2) var(--iata-space-2);
}

/* Only the domain name is emphasised in Figma; the capability and
   sub-capability labels below it are Tertiary/Black60 at regular weight.
   Figma draws them at M/Regular (the `size="S"` Checkbox variant, 14/18), the
   size the Instructions card above already renders at — the two read as one
   scale again (ARMIP-194). */
.oorr-domain-body .iata-form__checkbox label {
    color: var(--iata-grey-50);
    font-weight: var(--iata-txt-weight-regular);
    font-size: var(--iata-txt-m-size);
    line-height: var(--iata-txt-m-line-height);
}

.oorr-capability-item {
    height: 100%;
}

/* The Instructions copy is `.iata-rich-text`, which sets L. The Scope of
   solutions and Public visibility columns in the same card are M, so the
   instructions read a size larger than everything beside them (ARMIP-163). */
#capability-selection-instructions-title + .iata-rich-text p {
    font-size: var(--iata-txt-m-size);
    line-height: var(--iata-txt-m-line-height);
}

/* `.iata-rich-text a` underlines; QA asked for this one link to match the
   page's other links, underlined on hover only (ARMIP-247). A deliberate
   exception to WCAG 1.4.1 on this page — see docs/design/figma-alignment.md
   row 4.2. */
#capability-selection-instructions-title + .iata-rich-text a {
    text-decoration: none;
}

#capability-selection-instructions-title + .iata-rich-text a:hover {
    text-decoration: underline;
}

/* --- ARMIP-194 Part 2, capabilities page ----------------------------------
   The publication status chip reads as a filled grey badge, where the frame
   draws it as a white outlined one on Accent/Blue 80 (review #5). Scoped to a
   domain body rather than changed on `.iata-pill--secondary`, which fourteen
   other templates use.

   48px, not `--iata-radius-badge` (50): the review named the number, the same
   way the consent box took the frame's 8px radius in Part 1. The label goes to
   Accent/Blue (`--iata-blue-40`, #1E32FA) with it — the first round listed only
   the box's three properties and the round after it asked for the text colour
   too. */
.oorr-domain-body .iata-pill--secondary {
    border-radius: 48px;
    border-color: var(--iata-blue-80);
    background-color: var(--iata-white);
    color: var(--iata-blue-40);
}

/* The capability grid is a 16/40 pitch — the columns stand further apart than
   the rows — against the shared `.iata-grid-4`'s flat 32 (review #6). Scoped
   here for the same reason the column counts below are: `.iata-grid-4` is an
   app-wide utility in iata-tokens.css.

   The first round's text asked for "vertical gap 40, horizontal gap 24" while
   the annotation on its own screenshot read 16/40; the round after it settled
   on the screenshot and wrote the rule out. */
.oorr-domain-body .iata-grid-4 {
    row-gap: 16px;
    column-gap: 40px;
}

/* Below the frame's 1920 the four 390px capability columns stop holding a
   two-line label. Three is the floor the review asked for — not the shared
   `.iata-grid-4` reflow to one, which turns 40 capabilities into a column the
   height of the page. Compound selector so it outranks that 768px rule. */
@media (max-width: 1280px) {
    .oorr-domain-body .iata-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ...and three columns is the floor for a laptop, not for a phone. The rule
   above is (0,2,0) and beats the shared 768px reflow, so below that width the
   grid stayed at three: measured 122px, 161px and 0px at 375px, i.e. two
   clipped columns and one that had nowhere left to go (ARMIP-163). */
@media (max-width: 768px) {
    .oorr-domain-body .iata-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .oorr-domain-body .iata-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Figma draws the capability checkboxes straight onto the tinted section. The
   sub-capability rows previously carried a white fill of their own, which read
   as a second card nested inside the first. */
.oorr-sub-capability-item {
    padding: var(--iata-gap-xs) var(--iata-gap-s);
    margin-left: var(--iata-gap-m);
    margin-bottom: var(--iata-gap-xs);
    border-left: 3px solid var(--iata-blue-40);
    background-color: transparent;
}

.oorr-domain-details > summary {
    list-style: none;
    cursor: pointer;
}

.oorr-domain-details > summary::-webkit-details-marker {
    display: none;
}

.oorr-domain-details > summary .oorr-chevron {
    /* Figma tints the expander to match the domain name beside it rather than
       leaving it the default icon ink (ARMIP-194 sprint feedback). */
    color: var(--iata-blue-40);
    transition: transform 0.2s ease;
}

.oorr-domain-details[open] > summary .oorr-chevron {
    transform: rotate(180deg);
}

/* --- OORR partners rows --- */

/* Same stacking the OORR intro card hit above: the panel already spaces its
   children by its own 24px gap, and `.iata-divider` adds 40px of its own margin
   either side on top of that, so the rule sat in 64px of air (ARMIP-194 sprint
   feedback). The gap is the card's to give. */
.ssp-oorr-partners > .iata-divider {
    margin: 0;
}

/* Spacing/16 between the fields and between the rows (Figma 1307-24259,
   ARMIP-228), not the 10px `--iata-gap-s`. */
.oorr-partner-row {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 3fr auto;
    gap: var(--iata-space-2);
    margin-bottom: var(--iata-space-2);
    align-items: center;
}

/* Figma replaces the red "Remove" block with a quiet trash affordance, so
   deleting a partner stops competing with Save for attention. */
.oorr-partner-remove {
    --md-icon-button-icon-color: var(--iata-blue-80);
    --md-icon-button-hover-icon-color: var(--iata-blue-70);
    justify-self: center;
}

/* A ten-option menu is 576px tall. With the field mid-page it fits neither
   above nor below a 1080px viewport, and md-menu sets no max-height of its own,
   so the last options were unreachable. The internal surface inherits this. */
.oorr-partner-row md-filled-select::part(menu),
.oorr-partner-row md-outlined-select::part(menu) {
    max-height: 320px;
}

/* Once the row wraps, the trash button is no longer the fifth cell of a line:
   centred in whatever cell it lands in, it read as belonging to the field
   beside it (ARMIP-163). Its own full-width line, hard right, keeps it the
   row's action. */
@media (max-width: 1024px) {
    .oorr-partner-row {
        grid-template-columns: 1fr 1fr;
    }

    .oorr-partner-remove {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 640px) {
    .oorr-partner-row {
        grid-template-columns: 1fr;
    }
}

/* --- OORR definitions (Figma node 1368-205036) --- */

/* The page is one card per term, one column, so it needs no rules of its own:
   `.ssp-questionnaire-stack` stacks the cards and `.iata-rich-text` sizes the
   authored `p`/`ul` together. The two-column grid this page used to draw is
   gone with the classes that carried it — `.ssp-definition--wide` for the odd
   final term, and the divider that spanned both columns. */