.iata-material-shell {
    background: var(--iata-background-01);
}

.iata-material-shell nav[aria-label="breadcrumb"] {
    background: var(--iata-background-01);
    border-bottom: 0;
    padding: 24px 96px 0;
}

.docs-page {
    max-width: none;
    margin: 0;
    padding: 56px 96px 96px;
}

.docs-page > * + * {
    margin-top: 32px;
}

.docs-page a {
    color: var(--iata-blue-50);
    font-weight: 700;
    text-decoration: underline;
    text-underline-position: from-font;
}

.docs-page md-filled-button {
    align-self: flex-start;
    --md-filled-button-container-color: var(--iata-blue-40);
    --md-filled-button-label-text-color: var(--iata-white);
    --md-filled-button-label-text-font: 'AktivGrotesk', Arial, Helvetica, sans-serif;
    --md-filled-button-label-text-size: 16px;
    --md-filled-button-label-text-weight: 500;
    --md-filled-button-label-text-line-height: 24px;
    --md-filled-button-container-height: 40px;
    box-shadow: var(--iata-shadow-button-primary);
}

/* The page description is prose belonging to the title, not a section of its own,
   so Figma (node 1418-59229) sets it loose on the page ground directly under the
   heading — not bold inside a white card (ARMIP-153 round 2).

   It carries no font-size of its own, deliberately. Figma sets it at M/Regular,
   which left it visibly smaller than the Videos sub-text one panel down; ARMIP-162
   item 2 asked for that difference to go, and inheriting `.iata-page p` is what
   keeps the two in step if either ever moves. Re-adding `--iata-txt-m-size` here
   would reopen that ticket. */
.docs-intro p + p {
    margin-top: var(--iata-space-1);
}

/* Beats `.docs-page > * + *`'s 32px: the description hugs its heading. */
.docs-page > .docs-intro {
    margin-top: 8px;
}

/* --- Capability detail: one collapsible card per Confluence heading --- */
/* Figma node 1418-63258. The sections come from armi/capabilities/presentation.py,
   which decides where the two-column bodies are; everything here is presentation. */

.docs-doc-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.docs-doc-section {
    padding: 0;
}

.docs-doc-section__header {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 24px 32px;
}

.docs-doc-section__header::-webkit-details-marker {
    display: none;
}

.docs-doc-section__header md-icon {
    color: var(--iata-grey-50);
    transition: transform 0.2s;
}

.docs-doc-section[open] > .docs-doc-section__header md-icon {
    transform: rotate(180deg);
}

/* Compound selector so this outranks `.docs-confluence-doc h2`, which styles the
   headings *inside* a section body and would otherwise also claim the card title. */
.docs-confluence-doc h2.docs-doc-section__title {
    color: var(--iata-grey-40);
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    margin: 0;
}

.docs-doc-section__body {
    padding: 0 32px 24px;
}

.docs-doc-section--untitled .docs-doc-section__body {
    padding: 24px 32px;
}

/* Airline beside Seller, rather than one under the other down a 1728px page. */
.docs-doc-section__cols {
    display: grid;
    gap: 24px 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .docs-doc-section__cols {
        grid-template-columns: 1fr;
    }
}

.docs-doc-section__cols > div > *:first-child,
.docs-doc-section__lede > *:first-child,
.docs-doc-section__notes > *:first-child {
    margin-top: 0;
}

.docs-doc-section__notes {
    margin-top: 16px;
}

/* Confluence marks these NOTE lines up as headings; they are asides, not titles. */
.docs-confluence-doc p.docs-doc-note {
    color: var(--iata-grey-50);
    font-size: 12px;
    line-height: 16px;
}

.docs-accordion {
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    width: 100%;
}

/* The tint has to sit on the panel, not just its header: with only the header
   filled, an expanded panel's contents read as loose page content rather than as
   part of the section (ARMIP-153). Figma pairs the fill with a blue-90 hairline —
   the ticket text names #F7F8FC for both, which would be an invisible border. */
.docs-accordion .iata-accordion__item {
    background: var(--iata-grey-100);
    border: var(--iata-border-width) solid var(--iata-border-accent);
    border-radius: var(--iata-radius-card);
    overflow: hidden;
}

.docs-accordion .iata-accordion__header,
.docs-accordion .iata-accordion__body {
    background: transparent;
}

.docs-accordion .iata-accordion__header {
    color: var(--iata-blue-40);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    padding: 16px 24px;
}

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

.docs-accordion .iata-accordion__header md-icon {
    color: var(--iata-blue-40);
    font-size: 24px;
}

.docs-accordion .iata-accordion__body {
    padding: var(--iata-gap-s) 24px 24px;
}

/* Three tracks, each at least a third of the row, and auto-fit drops the ones it
   cannot fill — so two videos sit half and half, three sit in thirds, and a
   fourth wraps beneath the first at a third rather than stretching across.
   The 280px floor is what collapses the row to two, then one, on narrow screens. */
.docs-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(280px, calc((100% - 48px) / 3)), 1fr));
    gap: 24px;
}

.docs-video-card {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Fill the grid cell: at the old 400px the player left ~26% of the cell empty. */
.docs-video-card iframe {
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    height: auto;
    width: 100%;
}

/* Figma gives the title and its link a white bar of their own under the player. */
.docs-video-card__bar {
    align-items: center;
    background: var(--iata-white);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    padding: 24px;
}

.docs-video-card__title {
    color: var(--iata-grey-40);
    font-size: 16px;
    font-weight: var(--iata-txt-weight-medium);
    line-height: 22px;
}

.docs-page a.docs-video-card__link {
    align-items: center;
    color: var(--iata-blue-40);
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}

.docs-video-card__link md-icon {
    font-size: 18px;
}

.docs-table-shell {
    border: var(--iata-border-divider);
}

.docs-audience-table {
    min-width: 980px;
}

/* A tick means "watch this", so Figma colours it rather than leaving it the same
   grey as the dash that means the opposite. */
.docs-audience-table td md-icon {
    color: var(--iata-green-primary);
    font-size: 16px;
    vertical-align: middle;
}

.docs-audience-table td:not(:first-child) {
    text-align: center;
}

/* Centre the header over the ticks it labels. Audience stays left because its own
   column is left-aligned — centring it would part it from its cells. */
.docs-audience-table th:not(:first-child) {
    text-align: center;
}

/* The audience names are links, and the page's bold-underlined link style made
   them shout inside the table. Figma sets them as plain blue text. */
.docs-page .docs-audience-table td:first-child a {
    color: var(--iata-blue-40);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

.docs-link-list,
.docs-capability-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-link-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.docs-link-list li,
.docs-capability-list li {
    margin: 0;
}

.docs-link-list a {
    font-size: 18px;
    line-height: 24px;
}

.docs-guidance-copy {
    gap: 24px;
}

/* `min-width: 480px` here forced two 480px columns plus a 32px gap into whatever
   space there was, and `.iata-grid-2` only drops to one column below 768px — so
   every viewport from ~769px to ~1030px scrolled sideways (measured: 124px over at
   900px wide, on develop as well as here). The tracks are `1fr` each, so the floor
   was doing nothing above 1030px anyway. */
.docs-guidance-copy > div {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Figma sets this intro at 14px; the page default of 18px made three short
   paragraphs taller than the accordion they introduce. */
.docs-guidance-copy p {
    font-size: 14px;
    line-height: 18px;
}

.docs-accordion--capabilities .iata-accordion__header {
    font-size: 20px;
}

/* The first capability line sat flush against the card top with no visual
   breathing room (ARMIP-162, business review round 2). */
.docs-accordion--capabilities .iata-accordion__body {
    padding-top: 24px;
}

/* 24px between groups, 8px within one, as agreed on ARMIP-162. A flat 6px
   everywhere read as one undifferentiated list.
   The gap supplies the 8px; a core capability opens a group, so it adds the
   remaining 16px above itself. */
.docs-capability-list,
.docs-capability-list ul {
    display: flex;
    flex-direction: column;
    gap: var(--iata-space-1);
}

.docs-capability-list ul {
    list-style: none;
    margin: 0 0 0 24px;
    padding: 0;
}

/* Code and name are two colours, and the codes line up in a column of their own
   so the names start at the same x down the whole list (Figma node 379-21767). */
.docs-capability > a,
.docs-capability {
    align-items: baseline;
    display: flex;
    gap: 8px;
}

/* `.docs-page a` makes every link bold and underlined, which is right for the
   program-document lists but turns this one into a wall of heavy blue. Figma
   distinguishes core from variant by weight, so the link takes the row's. */
.docs-page .docs-capability a {
    font-weight: inherit;
    text-decoration: none;
}

.docs-capability .uid {
    flex: 0 0 auto;
    font-weight: 400;
    margin-left: 0;
    min-width: 78px;
}

/* Underlining the whole row was too busy, and no underline left it unclear these
   lines are links; the code only marks it clickable without the noise (ARMIP-162,
   business review round 2). */
.docs-capability a .uid {
    text-decoration: underline;
}

.docs-capability__name {
    color: var(--iata-blue-50);
}

/* Scoped to the list so these outrank `.iata-page li`, which sets every list item
   on the page to 18px. Figma sets a core capability above its variants in size as
   well as weight, and without the extra class that 18px wins on both. */
.docs-capability-list .docs-capability--core {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
}

/* A core capability opens a group; the space marks where the previous one ended.
   Not `ul + …`, because a core with no variants of its own still ends a group. */
.docs-capability-list > .docs-capability--core:not(:first-child) {
    margin-top: var(--iata-space-2);
}

.docs-capability-list .docs-capability--variant {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

/* Figma sets the uid at the title's own size, not as a subscript, and in Blue70 —
   the capability code is a dimmed sibling of the blue name, not grey text. */
.uid {
    color: var(--iata-blue-70);
    font-size: inherit;
    font-weight: inherit;
    margin-left: 0.25em;
}

@media (max-width: 900px) {
    .iata-material-shell nav[aria-label="breadcrumb"] {
        padding: 24px 24px 0;
    }

    .docs-page {
        padding: 32px 24px 64px;
    }

    .docs-page p,
    .docs-link-list a {
        font-size: 16px;
        line-height: 22px;
    }

    .docs-accordion .iata-accordion__header {
        font-size: 18px;
        padding: 16px;
    }
}