/* An md-menu is a popup: once the Material bundle defines it, it takes no room
   in the flow. Until then the browser treats it as an unknown inline element
   and lays its items out down the page — 96px under the Standard Version
   filter, 144px under the categories one — which the upgrade then reclaims,
   shoving the results table up 144px. That was the registry list's whole CLS
   (0.111, over the 0.1 budget). Hiding it until it is defined makes the two
   states agree. */
md-menu:not(:defined) {
    display: none;
}

/* An md-outlined-select already has its size from the page stylesheet before
   the bundle defines it, but until then its options paint as plain text inside
   that box -- the titles-inside-the-field frame on every Registry Mode switch
   (ARMIP-238). It keeps its room, so nothing shifts, and shows once drawn. */
md-outlined-select:not(:defined) {
    visibility: hidden;
}

/* Once defined, a registry filter select still draws empty, label inside the
   box, then floats the label up in a 150ms scripted animation (ARMIP-238). It
   stays hidden for 200ms after it is defined, so it shows already settled. */
.iata-filter-material-select:defined {
    animation: iata-select-settle 200ms;
}

@keyframes iata-select-settle {
    from,
    to {
        visibility: hidden;
    }
}

.iata-page {
    max-width: none;
    margin: 0;
    padding: 56px 96px 96px;
    background: var(--iata-background-01);
    height: 100%;
}

.iata-material-shell .iata-page > * + * {
    margin-top: var(--iata-space-4);
}

/* Figma (661-28543) sets the landing intro 16px under its heading. */
.iata-material-shell .iata-page--home > .iata-page__title + * {
    margin-top: var(--iata-space-2);
}

/* Three service cards in a row crush their titles to a word per line well
   before the grid's own 768px break -- at the agreed 960px minimum, "Airline
   Retailing on iata.org" ran four lines. They stack from 1040px (ARMIP-215). */
@media (max-width: 1040px) {
    .iata-page--home .iata-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Same rhythm for page content that sits one level down, inside a <form>. */
.iata-material-shell .iata-stack > * + * {
    margin-top: 40px;
}

.iata-page h1,
.iata-page__title {
    margin: 0;
    color: var(--iata-blue-40);
    font-size: 40px;
    line-height: 44px;
    font-weight: var(--iata-txt-weight-medium);
    letter-spacing: -1.5px;
}

.iata-page h2 {
    margin: 0;
    color: var(--iata-grey-40);
    font-size: 28px;
    line-height: 32px;
    font-weight: var(--iata-txt-weight-medium);
    letter-spacing: 0;
}

.iata-page h3 {
    margin: 0;
    color: var(--iata-grey-40);
    font-size: 20px;
    line-height: 24px;
    font-weight: var(--iata-txt-weight-medium);
    letter-spacing: 0;
}

.iata-page p,
.iata-page li {
    color: var(--iata-grey-50);
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    letter-spacing: 0;
}

.iata-page p {
    margin: 0;
}

.iata-rich-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--iata-grey-50);
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
}

.iata-rich-text p {
    margin: 0;
}

.iata-rich-text a {
    color: var(--iata-blue-40);
    text-decoration: underline;
    text-underline-position: from-font;
}

.iata-rich-text ul {
    margin: 0;
    padding-left: 24px;
}

.iata-surface {
    background: var(--iata-white);
    border: 0;
    border-radius: var(--iata-radius-surface);
    box-shadow: var(--iata-shadow-card);
    padding: 32px 24px;
}

.iata-surface > * + * {
    margin-top: 24px;
}

/* The inset is published as three custom properties so a full-bleed child can
 * cancel exactly the padding it touches — see the `.iata-table-wrapper` bleed
 * rule further down. Any rule that changes this padding must move the
 * properties, not the shorthand, or the bleed will not line up. */
.iata-panel {
    /* 24, not 32: Figma insets every card by Spacing/24 on all four sides, and
     * the taller top and bottom read as a card that had been stretched
     * (ARMIP-194 sprint feedback). This also makes the ≤900px block below a
     * no-op for the vertical inset — it still narrows the horizontal one. */
    --iata-card-pad-top: 24px;
    --iata-card-pad-bottom: 24px;
    --iata-card-pad-x: 24px;
    /* Published like the insets above so a full-bleed child can cancel it —
     * a bled table and its pagination are one block and must not be held
     * apart by the card's row gap. */
    --iata-card-gap: 24px;
    background: var(--iata-white);
    border: 0;
    border-radius: var(--iata-radius-surface);
    box-shadow: var(--iata-shadow-card);
    padding: var(--iata-card-pad-top) var(--iata-card-pad-x) var(--iata-card-pad-bottom);
    display: flex;
    flex-direction: column;
    gap: var(--iata-card-gap);
}

/* `.iata-panel--intro` lived here for the Resources & Documentation description.
   That description is no longer a card, and nothing else ever used the modifier
   (ARMIP-153 round 2), so the bold-in-a-panel treatment is gone with it. */

.iata-surface--compact {
    max-width: 560px;
}

.iata-surface--narrow {
    width: 100%;
    max-width: 600px;
}

.iata-surface--medium {
    width: 100%;
    max-width: 800px;
}

.iata-table--medium {
    max-width: 800px;
}

.iata-surface--flush {
    padding: 0;
}

.iata-surface-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iata-gap-m);
    padding: var(--iata-gap-m) var(--iata-gap-l);
    border-bottom: var(--iata-border-hairline);
}

.iata-surface-body {
    padding: var(--iata-gap-l);
}

/* .iata-page p is margin-free because panels space their children with gap; the
   wizard body is a plain block, so restore the paragraph rhythm here. */
.iata-surface-body p,
.iata-surface-body ul,
.iata-surface-body ol {
    margin-bottom: var(--iata-gap-m);
}

.iata-surface-body > :last-child {
    margin-bottom: 0;
}

/* Section rule: 1px Grey05, full width of whatever contains it. `<hr>` was left
   at the browser default (a 2px inset groove) until ARMIP-157. */
.iata-page hr {
    border: 0;
    border-top: var(--iata-border-hairline);
    margin: var(--iata-space-3) 0;
    width: 100%;
}

/* The h4 token is a 14px label size. Used as a sub-heading over 16px body copy
   it reads smaller than the text it introduces. */
.iata-surface-body h4 {
    font-size: var(--iata-txt-heading3-size);
    line-height: var(--iata-txt-heading3-line-height);
    font-weight: var(--iata-txt-weight-medium);
    letter-spacing: 0;
}

.iata-empty-state {
    padding: var(--iata-gap-2xl) var(--iata-gap-l);
    text-align: center;
}

.iata-empty-state md-icon {
    color: var(--iata-grey-60);
    font-size: 48px;
    margin-bottom: var(--iata-gap-m);
}

.iata-entity-logo {
    display: block;
    max-height: 80px;
    max-width: 240px;
    object-fit: contain;
}

/* Stand-in for an image that failed to load — see main/js/image-fallback.js. */
.iata-image-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: var(--iata-border-divider);
    border-radius: var(--iata-radius-surface);
    background: var(--iata-grey-99);
    color: var(--iata-grey-60);
    font-size: 24px;
    font-weight: var(--iata-txt-weight-medium);
    line-height: 1;
}

.iata-sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.iata-material-shell .iata-stack--s > * + * {
    margin-top: var(--iata-gap-s);
}

.iata-material-shell .iata-stack--m > * + * {
    margin-top: var(--iata-gap-m);
}

/* 32px, not the 40 of `--iata-gap-l`: Figma sets the page stack's own gap at
   Spacing/32 (ARMIP-201). The token keeps its 40 for the rules that want it. */
.iata-material-shell .iata-stack--l > * + * {
    margin-top: var(--iata-space-4);
}

/* 24px — the rhythm Figma uses between the parts of one card (a field, the
   checkbox that qualifies it, the button that submits it). It falls between the
   `--m` and `--l` steps of the gap scale, which is why the Comments card on the
   endorsement page read as 40px-loose (ARMIP-156). */
.iata-material-shell .iata-stack--section > * + * {
    margin-top: var(--iata-space-3);
}

.iata-mt-s {
    margin-top: var(--iata-gap-s);
}

.iata-mt-l {
    margin-top: var(--iata-gap-l);
}

.iata-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iata-gap-s);
    align-items: center;
}

.iata-actions--between {
    justify-content: space-between;
}

.iata-actions--end {
    justify-content: flex-end;
}

.iata-actions--center {
    justify-content: center;
}

.iata-actions--start {
    justify-content: flex-start;
}

.iata-actions--stack {
    flex-direction: column;
    align-items: flex-start;
}

.iata-centered {
    display: flex;
    justify-content: center;
}

.iata-centered--narrow {
    display: flex;
    justify-content: center;
}

.iata-centered--narrow > * {
    width: 100%;
    max-width: 800px;
}

/* The application wizard frames are 1520px: at 800px their three-column field
   rows collapse to two and the long labels have nowhere to go. */
.iata-centered--wide {
    display: flex;
    justify-content: center;
}

.iata-centered--wide > * {
    width: 100%;
    max-width: 1520px;
}

.iata-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iata-gap-s);
    align-items: center;
}

.iata-form-row {
    display: flex;
    gap: var(--iata-gap-s);
    align-items: flex-end;
}

.iata-form-row > * {
    flex: 1 1 auto;
}

.iata-form-field {
    width: 100%;
}

.iata-row--top {
    align-items: flex-start;
}

.iata-row__label {
    flex: 0 0 40%;
}

.iata-row__field {
    flex: 1 1 auto;
}

.iata-grid-span-2 {
    grid-column: span 2;
}

.iata-scroll-panel {
    max-height: 250px;
    overflow-y: auto;
}

.iata-divider {
    border: 0;
    border-top: var(--iata-border-hairline);
    margin: var(--iata-gap-l) 0;
}

.iata-field-help {
    margin-left: 0.25rem;
}

.iata-doc-link {
    font-size: 0.8em;
    text-decoration: none;
}

.iata-th--narrow {
    max-width: 300px;
}

/* A table whose cells hold one control each — the 1-5 satisfaction score on the
 * endorsement page. The header has to sit over the control, not at the cell's
 * left edge, or the numbers and the radios read as two separate rows
 * (ARMIP-156). The first column is the question, so it stays left. */
.iata-table--score thead th,
.iata-table--score td:has(> .iata-form__radio) {
    text-align: center;
}

.iata-table--score thead th:first-child,
.iata-table--score tbody td:first-child {
    text-align: left;
}

.iata-table--score .iata-form__radio {
    justify-content: center;
}

.iata-th--underlined {
    text-decoration: underline;
}

/* A column whose content is a control rather than text — the checkbox and its
   heading both centre on the cell (Figma 1461-30585). */
.iata-cell--center,
.iata-table th.iata-cell--center,
.iata-registry-table th.iata-cell--center {
    text-align: center;
}

/* The Actions column's heading, over cells that already sit at the table's
   right-hand edge (Figma 1452-40455, ARMIP-201). Its twin above is what this
   follows: the alignment is the column's, so the template names it. */
.iata-cell--right,
.iata-table th.iata-cell--right,
.iata-registry-table th.iata-cell--right {
    text-align: right;
}

.iata-field-label {
    display: block;
    margin-bottom: var(--iata-gap-xs);
    font-weight: var(--iata-txt-weight-medium);
}

.iata-filter-search,
.iata-filter-select,
.iata-multiselect__toggle {
    position: relative;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: var(--iata-radius-form);
    background: var(--iata-white);
    color: var(--iata-grey-40);
    font-family: var(--iata-txt-font-family);
    font-size: 14px;
    line-height: 18px;
}

.iata-filter-search {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 14px;
}

.iata-filter-search:focus-within {
    border-color: var(--iata-focus-color);
}

/* The search mark is a two-colour brand asset, not a font glyph, so it takes
   its size from the box rather than from `font-size`. 32px is the icon frame
   Figma declares around it. */
.iata-filter-search__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}

.iata-filter-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--iata-grey-40);
    font: inherit;
}

/* The wrapper draws this control's ring (`:focus-within` above), so the input
   must not draw a second one. Its own `:focus-visible` rule rather than leaning
   on the `outline: 0` in the block above: that one ties with the global native
   rule in material-base.css on specificity and wins only on <link> order, which
   is the cascade trap material-design.md warns about. */
.iata-filter-search input:focus-visible {
    outline: 0;
}

/* WebKit's own grey "X" gives way to Material's `close_small` (ARMIP-203). */
.iata-filter-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url("../img/icon_close_small.b6e89e7a293f.svg") center / 24px no-repeat;
    mask: url("../img/icon_close_small.b6e89e7a293f.svg") center / 24px no-repeat;
    cursor: pointer;
}

.iata-filter-search input::placeholder {
    color: var(--iata-grey-70);
    opacity: 1;
}

.iata-filter-select {
    display: block;
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.iata-filter-material-select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    --md-outlined-select-text-field-container-height: 48px;
    --md-outlined-select-text-field-container-shape: var(--iata-radius-form);
    --md-outlined-select-text-field-container-color: var(--iata-white);
    --md-outlined-select-text-field-outline-color: var(--iata-grey-95);
    --md-outlined-select-text-field-hover-outline-color: var(--iata-grey-80);
    --md-outlined-select-text-field-outline-width: 2px;
    --md-outlined-select-text-field-input-text-color: var(--iata-grey-40);
    --md-outlined-select-text-field-input-text-size: 14px;
    --md-outlined-select-text-field-input-text-line-height: 18px;
    --md-outlined-select-text-field-label-text-color: var(--iata-grey-60);
    --md-outlined-select-text-field-hover-label-text-color: var(--iata-grey-60);
    --md-outlined-select-text-field-focus-label-text-color: var(--iata-focus-color);
    --md-menu-container-color: var(--iata-white);
    --md-menu-container-shape: 2px;
    --md-menu-container-elevation: 2;
    --md-menu-top-space: 0;
    --md-menu-bottom-space: 0;
    --md-menu-item-one-line-container-height: 40px;
    --md-menu-item-top-space: 8px;
    --md-menu-item-bottom-space: 8px;
    --md-menu-item-leading-space: 16px;
    --md-menu-item-trailing-space: 16px;
    --md-menu-item-label-text-font: var(--iata-txt-font-family);
    --md-menu-item-label-text-size: 14px;
    --md-menu-item-label-text-line-height: 18px;
    --md-menu-item-label-text-color: var(--iata-grey-40);
    --md-menu-item-selected-container-color: var(--iata-blue-95);
    --md-menu-item-selected-label-text-color: var(--iata-grey-40);
    --md-menu-item-hover-state-layer-color: var(--iata-blue-40);
    --md-menu-item-hover-state-layer-opacity: 0.08;
    --md-menu-item-pressed-state-layer-color: var(--iata-blue-40);
    --md-menu-item-pressed-state-layer-opacity: 0.12;
}

.iata-filter-material-select::part(text-field) {
    height: 48px;
}

.iata-filter-material-select md-select-option div[slot="headline"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iata-filter-material-select md-select-option {
    --md-menu-item-one-line-container-height: 40px;
    --md-menu-item-top-space: 8px;
    --md-menu-item-bottom-space: 8px;
    --md-menu-item-leading-space: 16px;
    --md-menu-item-trailing-space: 16px;
    --md-menu-item-label-text-font: var(--iata-txt-font-family);
    --md-menu-item-label-text-size: 14px;
    --md-menu-item-label-text-line-height: 18px;
    --md-menu-item-label-text-color: var(--iata-grey-40);
    --md-menu-item-selected-container-color: var(--iata-blue-95);
    --md-menu-item-selected-label-text-color: var(--iata-grey-40);
    --md-menu-item-hover-state-layer-color: var(--iata-blue-40);
    --md-menu-item-hover-state-layer-opacity: 0.08;
}

.iata-filter-actions {
    display: contents;
}

.iata-filter-actions md-filled-button {
    width: 127px;
    --md-filled-button-container-height: 40px;
    --md-filled-button-container-color: var(--iata-blue-40);
    --md-filled-button-hover-container-color: var(--iata-blue-40);
    --md-filled-button-focus-container-color: var(--iata-blue-40);
    --md-filled-button-pressed-container-color: var(--iata-blue-40);
    --md-filled-button-label-text-color: var(--iata-white);
    --md-filled-button-label-text-size: 14px;
    --md-filled-button-label-text-line-height: 18px;
    --md-filled-button-label-text-weight: var(--iata-txt-weight-medium);
}

.iata-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    color: var(--iata-blue-40);
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
}

.iata-filter-clear:hover {
    text-decoration: underline;
}

/* Floating label for the hand-rolled multiselect. The background punches the
   notch in the control's outline that md-outlined-select draws natively —
   without it the top border runs straight through the label text. It is the
   field's white from the outline down only: above the outline the label shows
   whatever the field sits on, as md-outlined-select's does, so on a grey row it
   is not a white square (ARMIP-220). 6px is the label's overhang past the
   border box: `top` below, less the toggle's 2px border it is placed inside. */
.iata-control-label {
    position: absolute;
    top: -8px;
    left: 12px;
    z-index: 1;
    max-width: calc(100% - 16px);
    padding: 0 4px;
    background: linear-gradient(transparent 6px, var(--iata-white) 6px);
    color: var(--iata-grey-60);
    font-size: 12px;
    line-height: 14px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iata-multiselect {
    position: relative;
    min-width: 0;
}

.iata-multiselect__toggle {
    display: block;
    min-height: 48px;
    padding: 18px 38px 6px 14px;
    border-color: var(--iata-grey-95);
    font: inherit;
    cursor: pointer;
    text-align: left;
    overflow: visible;
}

/* Open is a state of the control, and it says so with its border. */
.iata-multiselect__toggle[aria-expanded="true"] {
    border-color: var(--iata-focus-color);
}

/* Focus is not that state, and it had been sharing the rule above -- which
   also said `outline: 0`, so the only mark of focus was a 1px border colour
   change on a resting 1px border, and once the menu was open even that went,
   because the open border is the same colour. There is nothing to put back:
   the toggle is a <button>, so dropping the `outline: 0` hands it the outline
   `button:focus-visible` in material-base.css gives every other control
   (b23d46af). The resting and open borders are untouched. */

.iata-multiselect__toggle md-icon {
    position: absolute;
    right: 12px;
    top: 12px;
    color: var(--iata-grey-50);
    font-size: 24px;
    pointer-events: none;
}

.iata-multiselect__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iata-multiselect__menu {
    width: 291px;
    min-width: 291px;
    max-height: 280px;
    --md-menu-container-color: var(--iata-white);
    --md-menu-container-shape: 4px;
    --md-menu-container-elevation: 2;
    --md-menu-item-one-line-container-height: 40px;
    --md-menu-item-top-space: 8px;
    --md-menu-item-bottom-space: 8px;
    --md-menu-item-leading-space: 12px;
    --md-menu-item-trailing-space: 16px;
    --md-menu-item-label-text-font: var(--iata-txt-font-family);
    --md-menu-item-label-text-size: 14px;
    --md-menu-item-label-text-line-height: 18px;
    --md-menu-item-label-text-color: var(--iata-grey-40);
    --md-menu-item-hover-state-layer-color: var(--iata-blue-40);
    --md-menu-item-hover-state-layer-opacity: 0.08;
    --md-menu-item-pressed-state-layer-color: var(--iata-blue-40);
    --md-menu-item-pressed-state-layer-opacity: 0.12;
}

.iata-multiselect__option {
    cursor: pointer;
}

.iata-multiselect__option md-checkbox {
    --md-checkbox-selected-container-color: var(--iata-blue-40);
    --md-checkbox-selected-focus-container-color: var(--iata-blue-40);
    --md-checkbox-selected-hover-container-color: var(--iata-blue-40);
    --md-checkbox-selected-pressed-container-color: var(--iata-blue-40);
}

/* Card links are grid/flex items in every card deck. The item itself already
 * stretches to its row height, but a `display: block` link does not pass that
 * height on, so the white `md-elevated-card` inside stopped at its own content
 * and the deck rendered ragged — 206 / 202 / 226 / 202px on the admin landing
 * at 1440px wide (ARMIP-149 review). Flex here, plus `flex: 1` on the content
 * below, makes the card and its padding fill the cell the row already sized. */
.iata-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
}

.iata-material-shell .iata-card-link:hover,
.iata-material-shell .iata-card-link:focus-visible {
    color: inherit;
    text-decoration: none;
}

.iata-card-link:hover md-elevated-card,
.iata-card-link:focus-visible md-elevated-card {
    --md-elevated-card-container-color: var(--iata-grey-100);
}

.iata-card-link md-elevated-card {
    width: 100%;
    min-height: 146px;
    border-radius: var(--iata-radius-surface);
    --md-elevated-card-container-color: var(--iata-white);
    --md-elevated-card-container-shape: var(--iata-radius-surface);
    --md-elevated-card-container-elevation: 0;
    box-shadow: var(--iata-shadow-card);
    transition: --md-elevated-card-container-color 250ms ease, background-color 250ms ease;
}

.iata-card-link md-elevated-card > .iata-card-content {
    flex: 1 1 auto;
}

.iata-card-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    min-height: 146px;
    padding: 32px 24px;
    text-align: left;
}

.iata-card-content img {
    width: 64px;
    height: 64px;
    margin: 0;
    object-fit: contain;
    flex: 0 0 64px;
}

/* The Offers & Orders mark (Figma 1186:44516) is a 3:1 wordmark, not a square
   glyph -- `object-fit: contain` letterboxes it to 64x21 in the square slot, so
   it reads as a third of the size of every other card's icon. Figma draws it
   102px wide, which is what a 1920 card has room for; below that the cap has to
   follow the card, because a fixed 102px track leaves so little for a long
   title that the card grows a third taller than its neighbours (311px against
   233px at 1440). */
.iata-card-content img.iata-card-icon--wide {
    width: min(102px, 30%);
    height: auto;
    flex: 0 0 auto;
}

.iata-card-content h3 {
    font-size: 20px;
    line-height: 24px;
    font-weight: var(--iata-txt-weight-medium);
    margin: 0;
    color: var(--iata-grey-40);
    letter-spacing: 0;
}

.iata-card-content p {
    font-size: 16px;
    line-height: 20px;
    color: var(--iata-grey-50);
    margin: 0;
    letter-spacing: 0;
}

.iata-card-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

/* The arrow belongs to the title, not to a column beside it. As a flex sibling
   it took a fixed 24px track while the h3 next to it carried `min-width: 0`, so
   once a card narrowed past the title's min-content width the text kept its own
   width and ran under the icon -- the arrow printed on top of "Partnerships
   Deployment" at 1280px and below. Inline, the arrow is the last box on the
   title's last line and wraps with it, so nothing can overlap.

   `balance` is what keeps it on that line: greedy wrapping fills the last line
   with text and pushes the arrow alone onto one of its own, which it did on
   Offers & Orders at 1920. */
.iata-card-title-row {
    display: block;
    text-wrap: balance;
}

.iata-card-title-row h3 {
    display: inline;
}

.iata-card-title-row md-icon {
    width: 24px;
    height: 24px;
    color: var(--iata-blue-40);
    font-size: 24px;
    line-height: 24px;
    display: inline-flex;
    vertical-align: text-bottom;
    margin-left: 10px;
}

/* Element selectors only: a Material host paints its own container, so applying
   the solid red background here as well leaves an outlined/text danger button
   with a red label on a red ground (1:1 contrast). */
a.iata-btn-danger,
button.iata-btn-danger {
    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-error);
    color: var(--iata-white);
    border: none;
    cursor: pointer;
}

a.iata-btn-danger:hover,
button.iata-btn-danger:hover {
    background-color: var(--iata-error-hover);
    color: var(--iata-white);
}

md-filled-button.iata-btn-danger {
    --md-filled-button-container-color: var(--iata-error);
    --md-filled-button-label-text-color: var(--iata-white);
    --md-filled-button-icon-color: var(--iata-white);
}

md-outlined-button.iata-btn-danger {
    --md-outlined-button-label-text-color: var(--iata-error);
    --md-outlined-button-icon-color: var(--iata-error);
    --md-outlined-button-outline-color: var(--iata-error);
    --md-outlined-button-hover-label-text-color: var(--iata-error);
    --md-outlined-button-hover-icon-color: var(--iata-error);
    --md-outlined-button-focus-label-text-color: var(--iata-error);
    --md-outlined-button-pressed-label-text-color: var(--iata-error);
}

/* A kebab entry is labelled, so the colour is not carrying the warning alone
   the way it does on a bare icon -- but Delete XML and Delete Patch sit in a
   menu beside Edit, and the row's other delete is red two icons away. */
md-menu-item.iata-btn-danger {
    --md-menu-item-label-text-color: var(--iata-error);
    --md-menu-item-hover-label-text-color: var(--iata-error);
    --md-menu-item-focus-label-text-color: var(--iata-error);
    --md-menu-item-pressed-label-text-color: var(--iata-error);
}

md-menu-item.iata-btn-danger md-icon {
    color: var(--iata-error);
}

md-text-button.iata-btn-danger {
    --md-text-button-label-text-color: var(--iata-error);
    --md-text-button-icon-color: var(--iata-error);
    --md-text-button-hover-label-text-color: var(--iata-error);
    --md-text-button-focus-label-text-color: var(--iata-error);
    --md-text-button-pressed-label-text-color: var(--iata-error);
}

.iata-switcher-list {
    margin: 0;
    padding-left: 1.25rem;
}

/* Status chips follow one design-system blueprint: a tinted ground, a 1px rule
 * in the mid tone of the same hue, and the label in the strong tone. Every
 * colour it needs already exists as a token, which is the evidence they are the
 * intended values — Accent/Green10-20 + Secondary/Green, Accent/Yellow10 +
 * IATA/Yellow + Accent/Yellow90, Accent/Red10-20 + IATA/Red. (`--success` used
 * to carry a one-off #eaf7ed that is not the Figma green.)
 *
 * Geometry measured off the Figma render (node 1287-20870) at 1:1: the chip is
 * 28px tall including its rule, with a 12/18 label and a 16px inset. The label
 * is Medium (500) — spelled out in the round-3 review, which restated the whole
 * chip spec as "#FFF5D8 / #FAC832 / #B54708 / font-weight 500".
 *
 * The tint is painted on the host, not through a Material token: a flat assist
 * chip has no container-colour token at all (only `elevated-*` variants do — the
 * `--md-assist-chip-disabled-container-color` this used to set does not exist in
 * the bundle), so the fill silently stayed transparent and the chip rendered
 * white on white. That is why round 2 read as "not fully fixed": the label and
 * the rule were right, the ground was never painted. */
.iata-chip--success {
    background-color: var(--iata-green-90);
    --md-assist-chip-disabled-label-text-color: var(--iata-green-primary);
    --md-assist-chip-disabled-outline-color: var(--iata-green-80);
}

.iata-chip--warning {
    background-color: var(--iata-yellow-90);
    --md-assist-chip-disabled-label-text-color: var(--iata-warn-30);
    --md-assist-chip-disabled-outline-color: var(--iata-yellow-primary);
}

.iata-chip--danger {
    background-color: var(--iata-error-90);
    --md-assist-chip-disabled-label-text-color: var(--iata-error);
    --md-assist-chip-disabled-outline-color: var(--iata-error-80);
}

md-assist-chip.iata-chip--success,
md-assist-chip.iata-chip--warning,
md-assist-chip.iata-chip--danger {
    border-radius: var(--iata-radius-badge);
    --md-assist-chip-disabled-label-text-opacity: 1;
    --md-assist-chip-disabled-outline-opacity: 1;
    --md-assist-chip-container-shape: var(--iata-radius-badge);
    --md-assist-chip-container-height: 28px;
    --md-assist-chip-leading-space: 16px;
    --md-assist-chip-trailing-space: 16px;
    --md-assist-chip-label-text-size: 12px;
    --md-assist-chip-label-text-line-height: 18px;
    --md-assist-chip-label-text-weight: var(--iata-txt-weight-medium);
}

/* The Material default surface token resolves to --iata-grey-95 (#E6E6E6);
   the Figma dialogs sit on white. */
/* Material caps a dialog at 560px. A verification report is a three- or
 * four-column table of XPaths and prose, and at 560px the XPath column came out
 * 112px wide -- narrow enough that the path stacked a fragment per line however
 * it wrapped (ARMIP-161). 880px gives it 251px and the comment 466px, with the
 * viewport inset Material already applies kept intact. Keyed on the report
 * itself, so the same table reads the same in the admin console and the
 * Self-Service Platform, and no other dialog widens. */
md-dialog:has(.iata-table--verification) {
    max-width: min(880px, calc(100% - 48px));
}

/* The capability review's XML preview and its Confluence documentation were
 * Bootstrap `modal-xl` (1140px) until the restyle moved them to md-dialog and
 * its 560px cap, too small to read either (ARMIP-250). Back to PROD's width,
 * and as tall as the window allows, the same viewport inset kept; a long XML
 * line scrolls inside its `pre`. */
md-dialog:has(code.language-xml),
md-dialog:has(.capability_doc) {
    width: min(1140px, calc(100% - 48px));
    max-width: min(1140px, calc(100% - 48px));
    max-height: calc(100% - 48px);
}

md-dialog pre:has(code.language-xml) {
    overflow-x: auto;
}

md-dialog {
    --md-dialog-container-color: var(--iata-white);
    --md-dialog-container-shape: var(--iata-radius-surface);
    --md-dialog-headline-size: 20px;
    --md-dialog-headline-line-height: 26px;
}

/* Figma gives every dialog a 72px brand-blue title bar (ARMIP-157). The
   headline slot is handed a zero-padding, full-width `h2`, so the bar is the
   slotted element itself rather than anything inside the shadow root. */
md-dialog [slot="headline"] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: var(--iata-gap-m) var(--iata-space-3);
    background: var(--iata-blue-40);
    color: var(--iata-white);
    font-size: 20px;
    line-height: 26px;
    font-weight: var(--iata-txt-weight-medium);
}

.iata-dialog__content {
    padding: var(--iata-space-3);
    color: var(--iata-grey-40);
    font-size: var(--iata-txt-l-size);
    line-height: 1.4;
}

.iata-dialog__content p,
.iata-dialog__content li {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.iata-dialog__content > * + * {
    margin-top: var(--iata-gap-m);
}

.iata-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iata-gap-s);
    justify-content: flex-end;
}

/* 24px from the dialog's last line to its buttons — the dialog's own inset, and
 * nothing else. A trailing note carries `.iata-alert`'s 40px page rhythm, which
 * stacked on top of that inset and pushed the buttons 64px down (ARMIP-157
 * round 3, the Deployment pop-up). Spacing below the last child is the
 * container's business either way. */
.iata-dialog__content > :last-child {
    margin-bottom: 0;
}

/* Figma pushes a dismiss/confirm pair to opposite ends of the dialog. Opt-in,
   because a dialog whose actions are one button would then sit left. */
.iata-dialog__actions--between {
    justify-content: space-between;
    width: 100%;
}

/* Supporting text: Body/M, one step down from the L body copy. The
   `.iata-page p` rule above outranks a bare `.iata-note`, so a `<p class="iata-note">`
   used to render at 18px while the same class on a `<span>` rendered at 14px —
   the descriptions ARMIP-156 asks to shrink are all paragraphs.
   `.iata-form__checkbox label` (material-forms.css) is the same trap for the
   consent labels a checkbox row carries: it is (0,1,1) and set to L, so a bare
   `.iata-note` on the label lost and the text rendered at 16px. */
.iata-note,
.iata-page p.iata-note,
.iata-page li.iata-note,
.iata-form__checkbox label.iata-note {
    font-size: var(--iata-txt-m-size);
    line-height: var(--iata-txt-m-line-height);
    /* Tertiary/Black40 #666, as Figma draws supporting text (ARMIP-201) — a
       step lighter than the #333 copy it supports; 5.74:1 on white, AA. */
    color: var(--iata-grey-60);
}

/* ADR 014 makes page copy L and asks a block Figma really draws at XL to name
   the token. `.iata-text--xl` is that token's utility, but — same specificity
   trap as `.iata-note` above — `.iata-page p` outranks it, so on a page
   paragraph it did nothing. First caller: the OORR landing's opening card
   (Figma node 1300-23981), the one block on that page drawn at 18/22. */
.iata-page p.iata-text--xl {
    font-size: var(--iata-txt-xl-size);
    line-height: var(--iata-txt-xl-line-height);
}

.iata-note--danger {
    color: var(--iata-error);
}

/* A note that warns rather than reports an error — "Don't forget to save after
   updating this field!" on the capability page. Accent/Yellow90, the same
   #b54708 the Pending chip's label carries, per the ARMIP-192 review.

   Selector-doubled for the reason `.iata-note` above documents: `.iata-page p`
   (0,1,1) outranks a bare modifier (0,1,0), so on a page paragraph the colour
   would be dropped — which is exactly what happened to `.iata-note--danger`
   here, leaving the warning the default grey. */
.iata-note--warning,
.iata-page p.iata-note--warning {
    color: var(--iata-warn-30);
    /* M/Medium, per the ARMIP-201 review. */
    font-weight: var(--iata-txt-weight-medium);
}

/* An icon that opens a note sits on the text baseline, not above it. */
.iata-note md-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    vertical-align: -4px;
}

/* The spinner a queued Validation Run waits behind — icon-sized, on the same
   baseline as the note it sits in. */
.iata-note__spinner {
    --md-circular-progress-size: 20px;
    /* The indicator's width is a percentage of the size, so a spinner shrunk to
       note height needs a thicker one to read as a spinner at all. */
    --md-circular-progress-active-indicator-width: 14;
    vertical-align: -5px;
    margin-right: var(--iata-gap-xs, 4px);
}

/* Page header: inline title + trailing actions. Lives here rather than in
   registry.css so every material page gets it, not just the ones that happen to
   load the registry stylesheet. */
.iata-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--iata-gap-m);
}

/* The ligature carrier {% icon %} wraps the glyph in (main/templates/main/_icon.html).
   `md-icon` is `display: inline-flex; align-items: center`, so a child element is
   a flex item, gets blockified and stretches to the host's 24px box; the glyph
   then sits at the top of its own 16px line box and paints 4px higher than the
   bare text node it replaced -- measured, and it moved the /armi/docs/ baseline.
   `display: contents` makes the span generate no box at all, so the text is
   laid out exactly as before while `aria-hidden` still applies to it. */
.iata-icon__ligature {
    display: contents;
}

/* Boolean-column tick. A bare &check; entity renders in the body font at body
   weight; Figma uses the green Material check. */
md-icon.iata-icon--success {
    color: var(--iata-accent);
    vertical-align: middle;
}

/* The absent state -- the X and the dash a false cell draws. Figma paints it
   Tertiary/Black60, which is grey-50 here, not the lighter grey-60 it had
   (ARMIP-182, 1791-36243). */
md-icon.iata-icon--muted {
    color: var(--iata-grey-50);
    vertical-align: middle;
}

/* Actions columns place their controls at the trailing edge; align the header. */
.iata-table th.iata-table__actions-header {
    text-align: right;
}

/* Content-sized columns for wide tables whose fixed equal-width layout forces
   the action buttons onto a second line. .iata-table-wrapper scrolls instead.
   The modifier itself lives with the base `.iata-table` rule further down — it
   has to win the cascade against it, and both are single classes. */

.iata-table--auto .iata-table-actions {
    flex-wrap: nowrap;
    /* Material buttons report no min-content width through their shadow root, so
       the auto layout under-sizes the column and the first button hangs into the
       cell on its left. Asking for max-content makes the column claim its width. */
    min-width: max-content;
}

.iata-table--auto .iata-table-actions md-text-button,
.iata-table--auto .iata-table-actions md-outlined-button,
.iata-table--auto .iata-table-actions md-filled-button {
    white-space: nowrap;
}

/* A number input holding a position in a sequence — the Validation Run order
   column. Material text fields default to a width that dwarfs two digits. */
.iata-field--narrow {
    width: 88px;
}

/* Bulleted list at panel rhythm. */
.iata-list {
    margin: 0;
    padding-left: 24px;
}

.iata-list > li + li {
    margin-top: var(--iata-gap-xs);
}

/* Plain list of navigation links on a panel surface. */
.iata-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iata-link-list button {
    background: none;
    border: 0;
    width: 100%;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.iata-link-list a,
.iata-link-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iata-gap-s);
    padding: 14px 0;
    border-bottom: var(--iata-border-divider);
    color: var(--iata-primary);
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    text-decoration: none;
}

.iata-link-list li:last-child a,
.iata-link-list li:last-child button {
    border-bottom: 0;
}

.iata-link-list a:hover,
.iata-link-list button:hover {
    text-decoration: underline;
}

.iata-link-list md-icon {
    color: var(--iata-grey-60);
    flex: 0 0 auto;
}

.iata-table-wrapper {
    width: 100%;
}

/* Sideways scroll, on the wrappers whose table currently overflows and only
 * those. A wrapper with `overflow-x` is a scroll container on both axes (an
 * overflow-x value forces overflow-y off `visible`), and a sticky header only
 * sticks within its nearest scrolling ancestor — so a wrapper carrying
 * `overflow-x: auto` unconditionally costs its table the sticky header at
 * every width, including the widths where nothing overflows.
 *
 * CSS cannot ask whether a table is wider than its wrapper, so
 * `main/static/main/js/table-overflow.js` measures it and puts this class on
 * and takes it off again. Each table therefore keeps its header for as long as
 * it fits: the small Pending Applications table holds on to a much narrower
 * viewport than the wide Inactive Companies table beside it (ARMIP-182). */
.iata-table-wrapper--scroll {
    overflow-x: auto;
}

.iata-table-panel {
    background: var(--iata-white);
    border-radius: var(--iata-radius-surface);
    box-shadow: var(--iata-shadow-card);
    overflow: hidden;
}

.iata-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 52px;
    padding: 6px 10px;
    background: var(--iata-white);
    border-bottom: var(--iata-border-rule);
}

.iata-table-toolbar > md-icon {
    color: var(--iata-grey-60);
    font-size: 24px;
}

/* Table search lives in the toolbar the registry results panel already
   established as a table's top bar (ARMIP-182: pagination took CTRL+F away, so
   a long table needs a search of its own). */
.iata-table-toolbar--search {
    /* The narrow-width rule stacks this toolbar into a column; a fixed 52px
       clips the second row once a search field is one of them. */
    height: auto;
    min-height: 52px;
    gap: var(--iata-gap-s);
    /* Figma's table header bar (node 1039:17651): the controls sit at the
       bar's right edge, under a 2px rule matching the column headers'. */
    justify-content: flex-end;
    border-bottom-width: 2px;
}

.iata-table-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--iata-gap-s);
    margin: 0;
}

/* .iata-filter-search is full-width by default because the registry filter bar
   gives it a grid cell of its own. In a toolbar it is the Figma "Search bar"
   (node 1039:17651): a fixed 380px filled field -- Background/Bg01 ground, no
   border -- with the 16px placeholder in Tertiary/Black40.

   380px is Figma's number and stays the base. Measured, it stops fitting beside
   the Clear button at 532px of viewport, below which `flex-wrap` drops Clear
   onto its own line (ARMIP-192). The media query below steps it to 340 there,
   which buys the pair one line down to ~500px; `max-width: 100%` keeps the
   field inside the bar below that. A flex basis was tried instead and is wrong
   here: the search form is itself a shrinkable flex item sized from its
   children's max-content, so an `auto` width collapses the form and wraps
   Clear earlier, not later. */
.iata-table-search .iata-filter-search {
    width: 380px;
    max-width: 100%;
    padding: 8px 16px;
    background: var(--iata-background-01);
    font-size: 16px;
    line-height: 20px;
}

.iata-table-search .iata-filter-search input::placeholder {
    color: var(--iata-grey-60);
}

.iata-table-search .iata-filter-search__icon {
    width: 24px;
    height: 24px;
}

@media (max-width: 540px) {
    .iata-table-search .iata-filter-search {
        width: 340px;
    }
}

/* A search that matched nothing (main/_table_empty.html): Figma's Empty State,
   node 1968:39650 — a 48px glyph in a 96px box, heading 2 over XL body 8 apart,
   16 below the glyph, 24 around (ARMIP-201). */
.iata-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--iata-space-2);
    padding: var(--iata-space-3);
    background: var(--iata-white);
    text-align: center;
}

.iata-table-empty__icon {
    width: 48px;
    height: 48px;
    margin: var(--iata-space-3);
}

.iata-table-empty__copy {
    display: flex;
    flex-direction: column;
    gap: var(--iata-space-1);
}

.iata-page p.iata-table-empty__title,
.iata-table-empty__title {
    margin: 0;
    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-40);
}

.iata-page p.iata-table-empty__text,
.iata-table-empty__text {
    margin: 0;
    font-size: var(--iata-txt-xl-size);
    line-height: var(--iata-txt-xl-line-height);
    color: var(--iata-grey-60);
}

.iata-table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--iata-gap-s);
    /* When the buttons stack, the column must still be as wide as the widest of
       them; otherwise they hang left over the previous cell on a narrow screen. */
    min-width: min-content;
}

/* Actions that belong to a *labelled* column rather than a trailing "Actions"
 * column line up under their header, so it is clear which column they answer to
 * (ARMIP-149 review: "align buttons to the left on 'Questionnaire' column,
 * otherwise it's not clear where this button belongs" — and the VCC frame she
 * attached shows Questionnaire and Report the same way). The flex-end default
 * stays for the trailing Actions column, which Figma does right-align. */

.iata-table-actions a {
    text-decoration: none;
}

.iata-table-actions md-filled-button {
    --md-filled-button-container-height: 40px;
    --md-filled-button-label-text-size: 14px;
}

.iata-table-actions md-text-button {
    --md-text-button-label-text-size: 14px;
}

.iata-table,
.iata-registry-table {
    border: 0;
    /* `separate` so the sticky header keeps its borders: a collapsed border
       belongs to the table, not the cell, and stays behind when the cell
       sticks. th/td only ever carry a border-bottom, so nothing else moves. */
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    font-size: 14px;
    line-height: 18px;
}

/* `--auto` has to be declared *after* the base rule: both are one class, so the
 * later one wins and the modifier was silently doing nothing — every `--auto`
 * table still laid out fixed at exactly the wrapper's width. Its action buttons
 * (which report no intrinsic width through their shadow root, hence the
 * `max-content` above) then overflowed their cell and ran past the table's right
 * edge, while the grey header band stopped at the table. That is the "header
 * does not extend as much as the buttons" on the Messages and the Partnerships
 * Deployment Requests tables (ARMIP-156).
 *
 * `table-layout: auto` lets the table size its columns to their content.
 * `max-width: 100%` holds it to its panel so the header cells **wrap** rather
 * than the table growing to its max-content width (Misha, 2026-09-02: header
 * titles word-wrap everywhere). A table whose columns' min-content still does
 * not fit outgrows the panel anyway -- a table's minimum content width beats a
 * `max-width` -- and `table-overflow.js` gives that one, and only that one, the
 * sideways scroll. */
.iata-table--auto,
/* Any table with an actions column has the same problem whether or not someone
 * remembered the modifier — the PD Requests table Sara flagged alongside
 * Messages never had it. The actions header is the marker for "this table ends
 * in a row of buttons", so it opts the table in on its own. The registry table
 * is deliberately `--fixed` and carries no actions header, so it is untouched. */
.iata-table:has(th.iata-table__actions-header) {
    table-layout: auto;
    max-width: 100%;
}

/* The verification remarks report -- Type, XPath, [Line,] Comment -- renders
 * inside a dialog. `table-layout: fixed` handed each column an equal share, so
 * an XPath like /IATA_OfferPriceRS/Response/PricedOffer/OfferItem/... had
 * nowhere to break: it overflowed its cell and painted over the Comment
 * beside it, while the comment wrapped at about two words a line. That is
 * ARMIP-161's "the remark text is not properly displayed" -- the same dialog
 * with a short XPath was the reporter's working counter-example.
 *
 * `auto` lets the columns take the width their content asks for -- the Type
 * pill and Line number shrink, the prose gets the rest -- and `anywhere` gives
 * the XPath a break opportunity so `auto` has a sane width to work from.
 * Declared after the base rule, like `--auto` above, or one class would not
 * beat one class. */
.iata-table--verification {
    table-layout: auto;
}

.iata-table--verification th,
.iata-table--verification td {
    vertical-align: top;
}

/* The XPath column, and only it. `anywhere` puts a break opportunity between
 * every character, which is also what `auto` measures min-content by -- on the
 * Type cell that collapsed the column to the width of one letter and stood the
 * "Exception" pill on end. */
.iata-table--verification td:nth-child(2) {
    overflow-wrap: anywhere;
}

/* Sticky table chrome (ARMIP-182): every table's header stays at the top of
 * the viewport and its pagination bar at the bottom while the page scrolls
 * past, so a long table keeps its column names and its pager in reach. The
 * page is the scroll container — the top app bar is `position: relative` and
 * scrolls away with it, so `top: 0` is the viewport's top. Any clipping
 * ancestor between the table and the page takes that role instead and pins the
 * header to a box that never scrolls; that is why the accordion and the profile
 * section clip with `clip` rather than `hidden`, and why a table wide enough to
 * need its wrapper's sideways scroll keeps the scroll and goes without — the
 * two are mutually exclusive per table. The header cells carry the header
 * band's own background, so the rows slide behind them. */
.iata-table thead th,
.iata-registry-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* The Actions column pinned to the right edge — but only while that table is
 * scrolling sideways (ARMIP-182, spec.md story 16). The two halves of the
 * sticky chrome cannot both be had: a pinned column needs the wrapper's
 * sideways scroll, and that wrapper is a scroll container on both axes, which
 * is where the sticky header above dies. So the pin is scoped to the state
 * where the header is already lost anyway — `--scroll`, which
 * table-overflow.js puts on per table, exactly while that table overflows. A
 * table that fits keeps its header and pins nothing; the moment it stops
 * fitting, the actions stop running off the edge with the columns.
 *
 * The cells need a background of their own: the one a row paints belongs to
 * the tbody, and it does not travel with a cell lifted out of the flow. */
.iata-table-wrapper--scroll .iata-table th:last-child,
.iata-table-wrapper--scroll .iata-table td:last-child,
.iata-table-wrapper--scroll .iata-registry-table th:last-child,
.iata-table-wrapper--scroll .iata-registry-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
}

.iata-table-wrapper--scroll .iata-table td:last-child,
.iata-table-wrapper--scroll .iata-registry-table td:last-child {
    background: var(--iata-white);
}

/* The corner cell sits in both bands, so it has to outrank both. */
.iata-table-wrapper--scroll .iata-table thead th:last-child,
.iata-table-wrapper--scroll .iata-registry-table thead th:last-child {
    z-index: 3;
}

/* A pinned cell is its own stacking context, so a menu or a tooltip that
 * reaches into the row below paints *underneath* that row's pinned cell — and
 * one opened on the first visible row paints underneath the sticky header.
 * The cell whose popover is showing therefore clears both bands, and stays
 * pinned while it does.
 *
 * Only a pinned cell needs this. An unpinned one is no stacking context, so
 * its tooltip (z-index 5) and its menu already paint over the sticky header
 * and pager (z-index 2) with the cell left where it is — and lifting the cell
 * lifted its icons over the header too, for as long as the pointer stayed on
 * them while the page scrolled (ARMIP-202). */
.iata-table-wrapper--scroll .iata-table td:last-child:has(md-menu[open]),
.iata-table-wrapper--scroll .iata-table td:last-child:has(.iata-tooltip:hover),
.iata-table-wrapper--scroll .iata-table td:last-child:has(.iata-tooltip :focus-visible),
.iata-table-wrapper--scroll .iata-registry-table td:last-child:has(md-menu[open]),
.iata-table-wrapper--scroll .iata-registry-table td:last-child:has(.iata-tooltip:hover),
.iata-table-wrapper--scroll .iata-registry-table td:last-child:has(.iata-tooltip :focus-visible) {
    z-index: 4;
}

/* The Actions cell: its icons sit flush right, against the column's edge, so
   they read as one column down the table however many a row has. */
.iata-table-kebab {
    display: flex;
    justify-content: flex-end;
}

/* Left-aligned cells: on the VCC and OORR lists the column is named after what
   the icons act on, so they line up under their heading rather than at the
   cell's right edge (ARMIP-149). It sits *after* the base rule, where source
   order decides it: equal specificity, so up there it lost to the flex-end
   above, silently. */
.iata-table-kebab--start {
    justify-content: flex-start;
}

/* Every button in the cell is the kit's 32px square around a 24px glyph
   (Figma 1634:37472 / 1639:38505) -- MD3's own 40px spaces the column wider
   than the design -- and lights onto a circular pale disc as the pointer
   crosses it: that disc is the button's own state layer, held at full opacity,
   because the kit paints a solid fill where MD3 paints a tint. */
.iata-table-kebab md-icon-button {
    --md-icon-button-icon-size: 24px;
    --md-icon-button-state-layer-width: 32px;
    --md-icon-button-state-layer-height: 32px;
    /* A disc, not the rounded square the theme's `corner-full` -> button
       radius remap would otherwise give this state layer. */
    --md-icon-button-state-layer-shape: 50%;
    --md-icon-button-icon-color: var(--iata-action-icon);
    --md-icon-button-hover-icon-color: var(--iata-action-icon-hover);
    --md-icon-button-focus-icon-color: var(--iata-action-icon-hover);
    --md-icon-button-pressed-icon-color: var(--iata-action-icon-hover);
    --md-icon-button-hover-state-layer-color: var(--iata-action-icon-hover-surface);
    --md-icon-button-hover-state-layer-opacity: 1;
    --md-icon-button-focus-state-layer-color: var(--iata-action-icon-hover-surface);
    --md-icon-button-focus-state-layer-opacity: 1;
    --md-icon-button-pressed-state-layer-color: var(--iata-action-icon-pressed-surface);
    --md-icon-button-pressed-state-layer-opacity: 1;
}

/* An icon button has no label to carry the warning, so the glyph itself is the
   warning -- and it needs its own rule: .iata-btn-danger is tokenised per
   Material host, and md-icon-button was the one host without one. The cell's
   own colour rule below is why this one names the cell too: at equal
   specificity the later rule wins, and it is the later rule. */
.iata-table-kebab md-icon-button.iata-btn-danger {
    --md-icon-button-icon-color: var(--iata-error);
    --md-icon-button-hover-icon-color: var(--iata-error);
    --md-icon-button-focus-icon-color: var(--iata-error);
    --md-icon-button-pressed-icon-color: var(--iata-error);
    /* The disc has to be overridden too, not just the glyph: the rule above
       sets a blue one for every button in the cell, so a red glyph without
       this lit onto blue (Sara, 2026-09-07). */
    --md-icon-button-hover-state-layer-color: var(--iata-action-icon-danger-hover-surface);
    --md-icon-button-focus-state-layer-color: var(--iata-action-icon-danger-hover-surface);
    --md-icon-button-pressed-state-layer-color: var(--iata-action-icon-danger-pressed-surface);
}

/* Edit User and Edit Company go to the Django back-end, not to a page of ours,
   so they rest black instead of blue (Kathryn, 2026-09-09) -- Figma draws them
   blue, and the ticket overrules Figma on exactly these four tables. Same
   shape as the danger rule above, and it names the cell for the same reason:
   equal specificity, later rule wins. */
.iata-table-kebab md-icon-button.iata-btn-backend {
    --md-icon-button-icon-color: var(--iata-action-icon-backend);
    --md-icon-button-hover-icon-color: var(--iata-action-icon-backend);
    --md-icon-button-focus-icon-color: var(--iata-action-icon-backend);
    --md-icon-button-pressed-icon-color: var(--iata-action-icon-backend);
    --md-icon-button-hover-state-layer-color: var(--iata-action-icon-backend-hover-surface);
    --md-icon-button-focus-state-layer-color: var(--iata-action-icon-backend-hover-surface);
    --md-icon-button-pressed-state-layer-color: var(--iata-action-icon-backend-pressed-surface);
}

/* The kebab is the one that rests grey rather than blue: it opens a menu, it
   does not do anything itself. Hover pulls it into the blue with the rest. */
.iata-table-kebab .iata-table-kebab__trigger {
    --md-icon-button-icon-color: var(--iata-action-kebab-icon);
}

/* The label an action icon carries instead of a visible caption. Native
   `title` could not do this job: the browser draws it after ~1s, in its own
   colours, wherever the pointer is. This one is instant, centred under the
   icon, and painted in the kit's colours. `data-tooltip` rather than `title`
   so the two never double up; the accessible name stays on `aria-label`. */
.iata-tooltip {
    position: relative;
    display: inline-flex;
}

.iata-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    /* Below the icon, 6px clear of its 32px box, as the kit draws it. */
    top: calc(100% + 6px);
    /* Hanging left from the icon rather than centring on it: the Actions
       column sits at the table's right-hand edge, and once the table outgrows
       its panel the scroller clips whatever leaves it. A centred chip spends
       half its width on the far side of that edge, so at 960px the label came
       out cut in half (Sara, 2026-08-31). Anchored right, the chip only ever
       grows back across the table, where there is always room. */
    right: 0;
    z-index: 5;
    padding: 8px 16px;
    border-radius: var(--iata-radius-tooltip);
    background: var(--iata-tooltip-surface);
    color: var(--iata-tooltip-text);
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    white-space: nowrap;
    /* Hoverable, per SC 1.4.13: the chip opens *under* the icon that opened it,
       so a pointer travelling down the page crosses it, and `pointer-events:
       none` had the hover fall through to the row beneath -- the chip vanished
       from under the pointer. A pseudo-element's box counts as its originating
       element for `:hover`, so this alone keeps the chip up while it is pointed
       at. Dismissing it is main/js/tooltip.js's half. */
    pointer-events: auto;
    /* Instant, per Figma: no delay, no fade. */
    visibility: hidden;
}

/* A destructive action's chip is drawn in the danger pair, not the blue one
   (Figma 1634-37472, ARMIP-201) — `--iata-red-90` is that frame's #FEF3F2.
   `:has()` because the class that marks the action sits on the button *inside*
   the tooltip span, which is where `_row_action.html` puts it. */
.iata-tooltip:has(.iata-btn-danger)::after {
    background: var(--iata-red-90);
    color: var(--iata-red-primary);
}

/* `:focus-visible`, not `:focus-within`: a keyboard reader gets the label, but
   a mouse click does not leave the chip hanging under the button it just
   pressed (the component keeps focus after its menu closes). */

/* The same story on the other axis: the last row's chip would fall past the
   scroller's floor, so that one flips above its icon. */
tbody tr:last-child .iata-table-kebab .iata-tooltip::after {
    top: auto;
    bottom: calc(100% + 6px);
}

.iata-tooltip:hover::after,
.iata-tooltip:has(:focus-visible)::after,
/* The keyboard half of the same thing. The `:has()` above cannot see it: the
   button that holds focus keeps the focused node inside its shadow root, so
   main/js/tooltip.js does the asking and writes the answer out here. */
.iata-tooltip[data-tooltip-focus]::after {
    visibility: visible;
}

/* Until Escape says otherwise -- main/js/tooltip.js sets the attribute and
   takes it off again as soon as the pointer or focus leaves. After the rule
   above, and of the same weight, so source order is what decides it. */
.iata-tooltip[data-tooltip-dismissed]::after {
    visibility: hidden;
}

/* Except once the kebab's menu is open: the menu drops into the same space the
   tooltip would take, and the kit draws no tooltip on the Clicked state. */
.iata-table-kebab:has(md-menu[open]) .iata-tooltip::after {
    visibility: hidden;
}

/* The row's menu: the Figma card shadow rather than MD3's elevation ramp, so
   it separates from the table behind it. `part(elevation)` is the only hook
   Material Web exposes on the surface — it stretches to the menu's box, so the
   shadow lands where the ramp's would have. Level 0 silences the ramp itself. */
.iata-table-kebab md-menu {
    --md-menu-container-color: var(--iata-white);
    --md-menu-container-elevation: 0;
    --md-menu-container-shape: 3px;
    --md-menu-item-label-text-color: var(--iata-menu-item-text);
    --md-menu-item-label-text-line-height: var(--iata-txt-l-line-height);
    --md-menu-item-leading-icon-color: var(--iata-menu-item-icon);
    --md-menu-item-leading-space: 8px;
    --md-menu-item-trailing-space: 8px;
    /* 4 + 12 + 24 + 12 + 4: the kit's item, padding and glyph. */
    --md-menu-item-one-line-container-height: 56px;
    /* `min-width: inherit` on the surface passes this through the shadow. */
    min-width: 200px;
}

/* On the item, not the menu: top-app-bar.css sets 14px on every md-menu-item
   itself, which beats any size the item would inherit (ARMIP-202). */
.iata-table-kebab md-menu-item {
    --md-menu-item-label-text-size: var(--iata-txt-l-size);
}

.iata-table-kebab md-menu::part(elevation) {
    border-radius: inherit;
    border: 1px solid var(--iata-menu-border);
    box-shadow:
        0 8px 18px 0 rgba(0, 0, 0, 0.08),
        0 4px 4px 0 rgba(0, 0, 0, 0.04);
}

/* The placeholder standing in for an absent kebab trigger: one icon-button
   wide, so the always-visible action icons keep one column across the rows
   whose leftovers differ. */
.iata-table-kebab__slot {
    /* Unshrinkable: the auto table layout otherwise squeezes an empty flex
       item down to nothing and the icons drift back out of column. */
    flex: 0 0 32px;
}

/* A sortable header keeps the header's own colour, not the row-link red. */
.iata-table th a.iata-table__sort,
.iata-registry-table th a.iata-table__sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
}

.iata-table__sort md-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.iata-table thead,
.iata-registry-table thead {
    background: var(--iata-grey-99);
}

.iata-table tbody,
.iata-registry-table tbody {
    background: var(--iata-white);
}

/* Header cells follow Figma's table style: Tertiary/Black40 on Tertiary/Grey02 at
   M/Medium. The design system has no semibold — its ladder is Regular 400 /
   Medium 500 / Bold 700 — so the ticket's "Semibold" maps to weight-medium. */
.iata-table th,
.iata-registry-table th {
    height: 52px;
    padding: 8px 10px;
    /* 2px against the body rows' 1px -- the Figma table draws the header's
       rule (and the toolbar's above it) double weight. */
    border-bottom: var(--iata-border-rule-strong);
    color: var(--iata-grey-60);
    background: var(--iata-grey-99);
    text-align: left;
    font-weight: var(--iata-txt-weight-medium);
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle;
}

.iata-table td,
.iata-registry-table td {
    height: 52px;
    padding: 8px 10px;
    border-bottom: var(--iata-border-rule);
    color: var(--iata-grey-40);
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle;
}

.iata-table a,
.iata-registry-table a {
    color: var(--iata-primary);
    text-decoration: none;
}

.iata-table a:hover,
.iata-registry-table a:hover {
    text-decoration: underline;
}

.iata-table + .iata-table {
    margin-top: var(--iata-gap-m);
}

/* Dense admin company tables size columns to their content (wide name/action,
   narrow boolean columns) instead of the equal-width fixed layout, matching the
   ARM Index design. */
.iata-admin-companies .iata-table {
    table-layout: auto;
    /* The actions folded into a one-icon kebab (ARMIP-182), so the
       `max-content` growth above has nothing left to protect here. Held to the
       panel's width the auto layout wraps the two-word headers instead of
       growing — a header like "Review requested" was costing a whole column of
       blank space over one-glyph cells — and with no sideways overflow the
       wrapper opens and the page-scroll sticky header works. */
    max-width: 100%;
}

.iata-admin-companies .iata-table-actions {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.iata-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iata-gap-m);
    box-sizing: border-box;
    min-height: 56px;
    padding: 8px 16px;
    /* The de-facto sticky footer: the bar keeps its white background, so rows
     * slide beneath it; each row's own border-bottom draws the divider. */
    background: var(--iata-white);
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.iata-pagination__range,
.iata-pagination__size {
    color: var(--iata-grey-40);
    font-size: 12px;
    line-height: 16px;
}

.iata-pagination__navigation,
.iata-pagination__pages,
.iata-pagination__size {
    display: flex;
    align-items: center;
}

.iata-pagination__navigation {
    justify-content: flex-end;
    gap: 16px;
}

.iata-pagination__pages {
    gap: 8px;
}

.iata-pagination__size {
    gap: 16px;
}

.iata-pagination__size md-outlined-select {
    height: 40px;
    min-width: 64px;
    --md-outlined-select-text-field-container-height: 40px;
    --md-outlined-select-text-field-container-shape: 2px;
    --md-outlined-select-text-field-outline-color: transparent;
    --md-outlined-select-text-field-hover-outline-color: transparent;
    /* Borderless at rest and on hover by design -- it is a page-size stepper in
       a pagination bar, not a form field. Focus is deliberately not listed
       alongside them: with this transparent too the control was the one select
       in the app a keyboard user could land on and see nothing at all. It takes
       the app-wide `--md-outlined-select-text-field-focus-outline-*` from
       material-theme.css instead. */
    --md-outlined-select-text-field-input-text-size: 12px;
    --md-outlined-select-text-field-input-text-line-height: 16px;
    --md-menu-item-selected-container-color: var(--iata-blue-95);
    --md-menu-item-selected-label-text-color: var(--iata-grey-40);
    --md-menu-item-selected-focus-state-layer-color: var(--iata-blue-40);
    --md-menu-item-selected-hover-state-layer-color: var(--iata-blue-40);
    --md-menu-item-selected-pressed-state-layer-color: var(--iata-blue-40);
    --md-menu-item-selected-focus-state-layer-opacity: 0.08;
    --md-menu-item-selected-hover-state-layer-opacity: 0.08;
    --md-menu-item-selected-pressed-state-layer-opacity: 0.12;
    --md-menu-item-focus-state-layer-color: var(--iata-blue-40);
    --md-menu-item-hover-state-layer-color: var(--iata-blue-40);
    --md-menu-item-pressed-state-layer-color: var(--iata-blue-40);
    --md-menu-item-focus-state-layer-opacity: 0.08;
    --md-menu-item-hover-state-layer-opacity: 0.08;
    --md-menu-item-pressed-state-layer-opacity: 0.12;
}

.iata-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--iata-radius-button);
    color: var(--iata-grey-40);
    text-decoration: none;
}

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

.iata-pagination__link md-icon {
    font-size: 24px;
}

.iata-pagination__link--disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* The table-cell status chip. Same blueprint as `.iata-chip--*` above — the
 * Material chip is a control, this is a label, and the review asks for the two
 * to read identically. Geometry to match: 12/18 Medium, 4/16 inset and a 1px
 * rule make 28px. The rule is always declared so every variant is the same
 * height, including the two (`--info`, `--secondary`) the design system has no
 * entry for; those take the mid tone of their own palette. */
.iata-pill {
    display: inline-block;
    padding: 4px 16px;
    border: 1px solid transparent;
    border-radius: var(--iata-radius-badge);
    font-size: var(--iata-txt-s-size);
    font-weight: var(--iata-txt-weight-medium);
    line-height: 18px;
    vertical-align: middle;
    margin-left: var(--iata-gap-xs);
    /* A status is one word-run, never a paragraph. Without this, "Submitted for
     * Review" broke over two lines at 1280 and three below 900 as the column
     * narrowed, and the row grew instead of the chip shrinking (ARMIP-163). */
    white-space: nowrap;
}

/* The chip gives up its inset, not its type, as the table narrows: 12/18 is the
 * smallest step the scale has (`--iata-txt-s-*`), so shrinking the label would
 * take it off the scale. 153x28 -> 141x26 -> 137x24 for the widest label, on
 * one line throughout; past that the table's own sideways scroll takes over,
 * the same answer every other wide table here gives. */
@media (max-width: 1280px) {
    .iata-pill {
        padding: 3px 10px;
    }
}

@media (max-width: 900px) {
    .iata-pill {
        padding: 2px 8px;
    }
}

/* The clickable chip — the one with a report behind it (Figma 1746-35289).
 * A status a visitor can open has to look different from one they can only
 * read, which was the whole of the ARMIP-163 ask: "to distinguish the static
 * status from the ones that are clickable". Two things do it, and both are
 * scoped to `md-outlined-button` so the plain `<span>` chips are untouched:
 * the View eye the frame draws at 16px, and a hover.
 *
 * The Material button is asked to contribute nothing but layout: no outline of
 * its own (the pill's border is the outline), no state layer (the hover below
 * is the state), and the pill's own type and colour inherited straight
 * through, so the two variants stay the same object at every width. */
md-outlined-button.iata-pill {
    /* The base chip is `inline-block`; on a custom element that leaves the
       shadow button sitting in a line box, and its descender space made the
       clickable chip 0.9px taller than the static one beside it. */
    display: inline-flex;
    align-items: center;
    --md-outlined-button-container-height: 18px;
    --md-outlined-button-container-shape: var(--iata-radius-badge);
    --md-outlined-button-outline-width: 0;
    --md-outlined-button-leading-space: 0px;
    --md-outlined-button-trailing-space: 0px;
    --md-outlined-button-with-trailing-icon-leading-space: 0px;
    --md-outlined-button-with-trailing-icon-trailing-space: 0px;
    --md-outlined-button-label-text-size: var(--iata-txt-s-size);
    --md-outlined-button-label-text-line-height: 18px;
    --md-outlined-button-label-text-weight: var(--iata-txt-weight-medium);
    --md-outlined-button-label-text-color: currentColor;
    --md-outlined-button-hover-label-text-color: currentColor;
    --md-outlined-button-focus-label-text-color: currentColor;
    --md-outlined-button-pressed-label-text-color: currentColor;
    --md-outlined-button-icon-size: 16px;
    --md-outlined-button-icon-color: currentColor;
    --md-outlined-button-hover-icon-color: currentColor;
    --md-outlined-button-focus-icon-color: currentColor;
    --md-outlined-button-pressed-icon-color: currentColor;
    --md-outlined-button-hover-state-layer-opacity: 0;
    --md-outlined-button-pressed-state-layer-opacity: 0;
    cursor: pointer;
}

/* Figma sets Spacing/4 between the label and the eye; the Material button's own
 * gap is 8. The icon is slotted, so light-DOM CSS reaches it. */
md-outlined-button.iata-pill > md-icon {
    margin-left: -4px;
}

/* The "Focused" column of the frame: one step darker on all three of ground,
 * rule and label. No token exists for these — they are a hover shade of the
 * Accent pairs, not a new colour in the palette. */
md-outlined-button.iata-pill--success:hover {
    border-color: var(--iata-accent-hover-border);
    background-color: var(--iata-accent-hover-surface);
    color: var(--iata-accent-hover-text);
}

md-outlined-button.iata-pill--danger:hover {
    border-color: var(--iata-error-hover-border);
    background-color: var(--iata-error-hover-surface);
    color: var(--iata-error-hover-text);
}

.iata-pill--success {
    border-color: var(--iata-green-80);
    background-color: var(--iata-green-90);
    color: var(--iata-green-primary);
}

.iata-pill--danger {
    border-color: var(--iata-error-80);
    background-color: var(--iata-error-90);
    color: var(--iata-error);
}

.iata-pill--info {
    border-color: var(--iata-blue-90);
    background-color: var(--iata-blue-95);
    color: var(--iata-blue-10);
}

.iata-pill--warning {
    border-color: var(--iata-yellow-primary);
    background-color: var(--iata-warn-90);
    color: var(--iata-warn-30);
}

.iata-pill--secondary {
    border-color: var(--iata-grey-80);
    background-color: var(--iata-grey-95);
    color: var(--iata-grey-30);
}

/* White ground, IATA/Grey rule, Black 80 label — the admin "Empty" capability
 * (Figma 1188-47479, ARMIP-221): nothing submitted, so nothing to flag. */
.iata-pill--neutral {
    border-color: var(--iata-grey-95);
    background-color: var(--iata-white);
    color: var(--iata-grey-40);
}

/* The "Admin" badge in a page header. Outlined rather than filled: white ground,
 * a `--iata-blue-80` (#a5adfd) rule, a `--iata-blue-40` (#1e32fa) label — the
 * spec in the ARMIP-149 review ("make the Admin chip look the same in all
 * pages"). It had been shipping three ways at once: filled blue-95/navy from
 * `--info` on fourteen pages, borderless white on the landing (whose
 * `--iata-blue-200` lives in base.css and never resolved on a Material page),
 * and correct only under `.iata-admin-companies` — where the page-scoped
 * override also flattened that page's own status pills to blue-on-white.
 *
 * It sits in a flex title group that already supplies the gap, so the base
 * pill's `margin-left` is cleared here. Medium, as Figma's S chip draws it
 * (ARMIP-203, node 1216:14762: 12/16, weight 500). */
.iata-pill--admin {
    box-sizing: border-box;
    min-height: 26px;
    margin-left: 0;
    font-weight: var(--iata-txt-weight-medium);
    padding: 4px 12px;
    border: 1px solid var(--iata-blue-80);
    background-color: var(--iata-white);
    color: var(--iata-blue-40);
    font-size: 12px;
    line-height: 16px;
}

.iata-accordion {
    border: var(--iata-border-hairline);
    border-radius: var(--iata-radius-card);
    /* `clip` rounds the corners like `hidden` did without becoming a scroll
       container, which would capture the sticky table chrome inside it. */
    overflow: clip;
}

.iata-accordion__item {
    border-bottom: var(--iata-border-hairline);
}

.iata-accordion__item:last-child {
    border-bottom: none;
}

/* One title treatment for every expansion panel in the app: H2, 28/32/500, Grey
 * `#333` (ARMIP-149 round 3 — "all expansion panels on all pages"). It used to
 * live only under `.iata-admin-companies`, with the rest of the app running at
 * 16/500 here and 20/700 in the section-card override below, so the same
 * component read three different ways depending on the page.
 *
 * The nested, tinted panels keep their own smaller blue title — `--tinted`
 * (capability groups), `.docs-accordion`, `.tools-accordion` and
 * `.ssp-questionnaire-subsection` are drawn that way in Figma precisely so a panel inside
 * a panel does not read as the same level as its parent. */
.iata-accordion__header {
    list-style: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iata-gap-m);
    /* 16 above and below, 24 either side — Figma's Spacing/16 + Spacing/24 on
       the card header (ARMIP-201). The inset used to be one number on all four
       sides, which read 4px tall against the frame. */
    padding: var(--iata-space-2) var(--iata-gap-m);
    background: var(--iata-white);
    border: none;
    cursor: pointer;
    font-family: var(--iata-txt-font-family);
    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-40);
    text-align: left;
}

.iata-accordion__header::-webkit-details-marker {
    display: none;
}

.iata-accordion__header:hover {
    background-color: var(--iata-background-01);
}

/* IATA/Blue, not the header's Grey `#333`: Figma draws every expansion-panel
   chevron in the brand blue (ARMIP-201, node 1452:40355, "do this for all
   pages"). The title itself keeps its grey. The chevron only (`>`): a button in
   the heading carries an md-icon of its own (ARMIP-203). */
.iata-accordion__header > md-icon {
    transition: transform 0.2s;
    color: var(--iata-blue-40);
}

.iata-accordion__item[open] > .iata-accordion__header > md-icon {
    transform: rotate(180deg);
}

/* The rule Figma draws between an open panel's header and its body, IATA/Grey
   #E6E6E6 (ARMIP-201). Open only: a closed panel is all header, and the rule
   would sit on the card's bottom edge. `:where()` keeps it at the bare header's
   weight, so a page that draws its own rule (`.iata-admin-companies`) still wins.
   The SSP capabilities panels are named apart: the `__item` class would also
   bring the item's own hairline (ARMIP-217). */
:where(.iata-accordion__item[open], .ssp-capabilities-accordion[open]) > .iata-accordion__header {
    border-bottom: var(--iata-border-width-strong) solid var(--iata-border-subtle);
}

/* 24px clear of the header's rule and of the card's other edges, as Figma
   draws every section body (ARMIP-212). A table that leads the body cancels
   the top inset itself -- see the bleed rules below (ARMIP-210). */
.iata-accordion__body {
    --iata-card-pad-top: var(--iata-gap-m);
    --iata-card-pad-bottom: var(--iata-gap-m);
    --iata-card-pad-x: var(--iata-gap-m);
    padding: var(--iata-card-pad-top) var(--iata-card-pad-x) var(--iata-card-pad-bottom);
    background: var(--iata-white);
}

/* A body that is one rich-text editor sits 24px clear of the rule on every
   side, as Figma draws the admin capability's Remarks card (1461-32840,
   ARMIP-202). Every body does since ARMIP-212; this pins it for the editor. */
.iata-accordion__body--editor {
    --iata-card-pad-top: var(--iata-gap-m);
}

/* --- Section cards ---------------------------------------------------------
 * "Each section of the page is its own expandable card" was first drawn for the
 * admin capability pages. ARMIP-156 asks for it on five more pages, three of
 * them outside /admin/, so `.iata-card-sections` is the page-level opt-in for
 * anything that is not an admin screen. The admin selector stays alongside it so
 * those templates need no edit. */

/* The company card's rule under its buttons (Figma 1189:49344, ARMIP-221).
   The panel already spaces its children by 24, which is the frame's gap on
   both sides; the divider's own 40 would stack on top of it. */
.iata-admin-capabilities .iata-panel > .iata-divider {
    margin: 0;
}

.iata-admin-capabilities__title-group {
    display: flex;
    align-items: center;
    gap: var(--iata-gap-s);
}

/* Elevated white cards instead of the thin-bordered accordion. The title itself
   is the shared one above — this used to override it to 20/700, which is what
   made the section cards read differently from the Companies panels. */
.iata-admin-capabilities .iata-accordion,
.iata-card-sections .iata-accordion {
    border: 0;
    box-shadow: var(--iata-shadow-card);
}

/* Capability groups nested inside a section card read as one tinted control
 * rather than as more cards: Grey03 ground, blue stroke, IATA Blue title and
 * options (Figma 1461-79748). This has to sit after the rules above, which
 * strip the border and add the card shadow at the same specificity. */
.iata-accordion--tinted,
.iata-card-sections .iata-accordion--tinted {
    border: var(--iata-border-width) solid var(--iata-border-accent);
    box-shadow: none;
}

.iata-accordion--tinted .iata-accordion__header,
.iata-card-sections .iata-accordion--tinted .iata-accordion__header {
    background: var(--iata-grey-100);
    color: var(--iata-blue-40);
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
    font-weight: var(--iata-txt-weight-medium);
}

.iata-accordion--tinted .iata-accordion__header:hover {
    background: var(--iata-blue-95);
}

.iata-accordion--tinted .iata-accordion__body {
    background: var(--iata-grey-100);
}

.iata-accordion--tinted .iata-accordion__body label,
.iata-accordion--tinted .iata-accordion__body a {
    color: var(--iata-blue-40);
}

/* A summary that carries a description as well as a title. The description is
 * Body/M so it reads as supporting text next to a Title/L heading; `--stacked`
 * drops it under the title where Figma puts it there instead of on the right. */
.iata-accordion__heading {
    display: flex;
    align-items: baseline;
    gap: var(--iata-gap-m);
    flex: 1 1 auto;
    min-width: 0;
}

.iata-accordion__heading--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.iata-accordion__note {
    flex: 1 1 auto;
    text-align: right;
    font-size: var(--iata-txt-m-size);
    line-height: 18px;
    font-weight: var(--iata-txt-weight-regular);
    letter-spacing: var(--iata-txt-m-tracking);
    color: var(--iata-grey-50);
}

.iata-accordion__heading--stacked .iata-accordion__note {
    text-align: left;
    flex: 0 0 auto;
}

/* A table that fills its card runs to the card's edges: the grey header band is
 * the card's top edge and the last row rule is its bottom. Keeping the card's
 * inset outside the table leaves a stray white band instead — the one Sara
 * marked above the XSD versions header ("please remove this white space") and
 * the strip under the last row of the Logos / Requested Users / Supporting
 * Documents cards on Company Application Details (ARMIP-149 review). The
 * ARMIP-150 round-2 review asks for the same thing on three SSP cards, so the
 * behaviour is a modifier now rather than a page-scoped rule; the admin
 * selector stays so those templates need no edit.
 *
 * Each side is cancelled from the container's published inset, so the same rule
 * serves the 24px `.iata-panel` and the 24px `.iata-accordion__body`
 * without either hard-coding the other's numbers. Only the sides the table
 * actually touches move: a wrapper with a toolbar above it keeps the padding
 * above, and one followed by pagination or an empty state (the capabilities
 * accordions, XSD versions) keeps the padding below. */
.iata-admin-capabilities .iata-table-wrapper,
.iata-table-wrapper--bleed {
    margin-inline: calc(-1 * var(--iata-card-pad-x, 0px));
    width: auto;
}

.iata-admin-capabilities .iata-table-wrapper:first-child,
.iata-table-wrapper--bleed:first-child {
    margin-top: calc(-1 * var(--iata-card-pad-top, 0px));
}

.iata-admin-capabilities .iata-table-wrapper:last-child,
.iata-table-wrapper--bleed:last-child {
    margin-bottom: calc(-1 * var(--iata-card-pad-bottom, 0px));
}

/* The toolbar's bottom rule belongs to the table block too: a bleeding table
 * under a toolbar still inset by the card leaves the rule stopping short of
 * the table's own edges. The padding grows by what the margin gave away, so
 * the toolbar's content stays on the card's grid. */
.iata-admin-capabilities .iata-table-toolbar,
.iata-table-toolbar--bleed {
    margin-inline: calc(-1 * var(--iata-card-pad-x, 0px));
    padding-inline: calc(10px + var(--iata-card-pad-x, 0px));
}

/* A search bar that opens its card sits flush under the card's top edge, as a
 * leading table does: the bar's own 6px is the only air above the field
 * (ARMIP-210 -- "remove this padding-top above the search input"). */
.iata-table-toolbar--bleed:first-child {
    margin-top: calc(-1 * var(--iata-card-pad-top, 0px));
}

/* Pagination that closes a full-bleed table belongs to the table block, not to
 * the card's inset: Figma draws its top rule across the whole card and ends the
 * card on it (nodes 1287-20870, 1373-23522). */
.iata-pagination--bleed {
    margin-inline: calc(-1 * var(--iata-card-pad-x, 0px));
}

.iata-table-wrapper--bleed + .iata-pagination--bleed {
    margin-top: calc(-1 * var(--iata-card-gap, 0px));
}

.iata-pagination--bleed:last-child {
    margin-bottom: calc(-1 * var(--iata-card-pad-bottom, 0px));
}

@media (max-width: 900px) {
    /* Move the properties, not the shorthand — the full-bleed table above
     * cancels its inset from these. */
    .iata-panel {
        --iata-card-pad-top: 24px;
        --iata-card-pad-bottom: 24px;
        --iata-card-pad-x: 16px;
    }
}

@media (max-width: 768px) {
    .iata-page {
        padding: 48px 32px 64px;
    }

    .iata-material-shell .iata-page > * + * {
        margin-top: 32px;
    }

    .iata-page h1 {
        font-size: 34px;
        line-height: 38px;
    }

    .iata-table th,
    .iata-table td,
    .iata-registry-table th,
    .iata-registry-table td {
        padding: var(--iata-gap-xs) var(--iata-gap-s);
    }

    .iata-table-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .iata-table-actions,
    .iata-pagination,
    .iata-pagination__navigation {
        align-items: flex-start;
        flex-direction: column;
    }

    .iata-pagination {
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .iata-page {
        padding: 32px 16px 48px;
    }

    .iata-card-content {
        align-items: flex-start;
    }
}

/* --- Popup alerts (replaces Bootstrap .alert) --- */

.iata-alert {
    display: flex;
    align-items: center;
    gap: var(--iata-gap-s);
    padding: var(--iata-gap-m);
    border-radius: var(--iata-radius-card);
    margin-bottom: var(--iata-gap-l);
    position: relative;
    font-size: var(--iata-txt-l-size);
    line-height: var(--iata-txt-l-line-height);
}

.iata-alert--success-large {
    background-color: var(--iata-accent-90);
    color: var(--iata-grey-10);
    padding: var(--iata-gap-l);
}

.iata-alert--success {
    background-color: var(--iata-accent-90);
    color: var(--iata-grey-10);
}

.iata-alert--danger {
    background-color: var(--iata-error-90);
    color: var(--iata-grey-10);
}

.iata-alert--warning {
    background-color: var(--iata-warn-surface);
    color: var(--iata-warn-on-surface);
}

/* Figma's note block (ARMIP-157): Blue06 ground, Blue03 hairline, Blue01 text —
   the note reads as one blue object instead of near-black copy on a blue wash. */
.iata-alert--info {
    background-color: var(--iata-blue-95);
    border: 1px solid var(--iata-blue-80);
    color: var(--iata-blue-40);
}

.iata-alert--info p,
.iata-alert--info li,
.iata-alert--info h3,
.iata-alert--info h4,
.iata-alert--info strong {
    color: inherit;
}

.iata-alert__icon {
    flex-shrink: 0;
}

.iata-alert__icon--hero {
    font-size: 48px;
}

.iata-alert__icon--success {
    color: var(--iata-accent);
}

.iata-alert__icon--danger {
    color: var(--iata-error);
}

.iata-alert__icon--warning {
    color: var(--iata-warn-icon);
}

.iata-alert__icon--info {
    color: var(--iata-blue-40);
}

.iata-alert__body {
    flex: 1;
}

/* The body's last paragraph kept its 20px bottom margin, so the box carried
   20px of dead space under the text and `align-items: center` pushed the icon
   half of that below the line it introduces (ARMIP-165 Step 1). Same idiom as
   `.iata-surface-body` and `.iata-dialog__content`: spacing below the last
   child is the container's business. */
.iata-alert__body > :last-child {
    margin-bottom: 0;
}

.iata-alert__heading {
    font-size: var(--iata-txt-heading3-size);
    font-weight: var(--iata-txt-weight-medium);
    margin: 0 0 var(--iata-gap-xs) 0;
}

.iata-alert__close {
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-start;
}

/* --- Flash snackbar (ARMIP-191) ---
   Django messages render once, from the base layout, into this fixed strip.
   The page keeps its scroll offset across an action now, so a banner at the
   top of the content would land off-screen for anyone working down a long
   list. Sits above the top app bar (z-index 100) and the mobile drawer
   (1100) — a confirmation that a drawer can hide is one nobody reads. */

.iata-snackbar {
    position: fixed;
    bottom: var(--iata-gap-m);
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - var(--iata-gap-l)));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: var(--iata-gap-s);
}

.iata-snackbar .iata-alert {
    margin-bottom: 0;
    box-shadow: var(--iata-shadow-card);
    pointer-events: auto;
}

.iata-alert--leaving {
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .iata-alert--leaving {
        transition: none;
    }
}

@media (max-width: 640px) {
    .iata-snackbar {
        bottom: var(--iata-gap-s);
        width: calc(100vw - var(--iata-gap-m));
    }
}