/* Tools pages (ARMIP-155).
 *
 * Figma node 1437-28539 / 1437-28742 drops the wrapper card on both pages: the
 * intro sits straight on the page background, tight under the title, and each
 * schema version becomes its own bordered card.
 */

/* Title + description as one block. `.iata-page > * + *` keeps its 40px rhythm
 * between blocks; inside the block the description hugs the heading. */
.tools-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* One step darker than the app-wide body grey.
 *
 * Figma set these sentences on consecutive lines and this block zeroed
 * `.iata-rich-text`'s 16px gap to match; ARMIP-160 asked for the two XSD
 * Viewer paragraphs to be separated, so the gap is left at its default. */
.tools-intro .iata-rich-text p {
    color: var(--iata-grey-40);
}

/* XSD Viewer: the schema icon rides next to the heading. */
.tools-intro__heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.tools-intro__icon {
    flex: 0 0 auto;
    height: 56px;
    width: 56px;
}

/* Admin actions ride at the trailing edge of the header. `.iata-page__header`
 * centres its children; the intro here is a title plus two lines of copy, so
 * the buttons are pinned to its top edge instead — "top right", as on the other
 * admin screens. The intro keeps the remaining width so a long button row wraps
 * beneath it rather than squeezing the description. */
.tools-header {
    align-items: flex-start;
}

.tools-header .tools-intro {
    flex: 1 1 480px;
}

/* One card per version, rather than one box with hairline dividers. */
.tools-accordion {
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
}

.tools-accordion .iata-accordion__item {
    background: var(--iata-white);
    border: var(--iata-border-width) solid var(--iata-border-accent);
    border-radius: var(--iata-radius-surface);
    overflow: hidden;
}

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

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

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

.xsd-version-header {
    align-items: center;
    display: flex;
    gap: var(--iata-gap-xs);
}

/* Figma lays the message list out in four columns at 1920. `column-width`
 * rather than a fixed count so narrower viewports drop columns instead of
 * wrapping the longest message names. */
.xsd-list-columns {
    column-gap: 24px;
    column-width: 360px;
}

.xsd-list-columns li {
    break-inside: avoid;
}