/* A common text scale and reading rhythm for procedure cards.
 * Keep existing markup and selector priority: country rules still own their fonts,
 * sizes and spacing. Scope through :where so the host adds no specificity.
 * Pixel sizes deliberately avoid changing the legacy 10px rem scale site-wide. */
:where(app-procedure-resume, app-step-resume) .box {
    font-size: 15px;
    line-height: 1.5;
}

:where(app-procedure-resume, app-step-resume) .box .sumTitle h2 {
    color: var(--primary-link, #2471a8);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
    margin-block: 0 20px;
}

/* Cost amounts follow the body size; retain their existing emphasis and leading. */
:where(app-procedure-resume, app-step-resume) .summary-cost .costostable tr.cost td .costValue {
    font-size: inherit;
}

/* Requirement names and group labels follow the card body size. */
:where(app-procedure-resume, app-step-resume) :where(#section-requirements) div.reqName,
:where(app-procedure-resume, app-step-resume) :where(#section-requirements) .reqBloc {
    font-size: inherit;
}

/* The shared section inset aligns headings, copy and the contact images. */
:where(app-procedure-resume > *, app-step-resume > #stepDetailContent > *) > .box {
    padding-block: 28px 32px;
}

:where(app-procedure-resume, app-step-resume) .stepSummaryResume {
    font-size: 15px;
    line-height: 1.5;
}

/* Eyebrows stay distinct from the name, while long names have readable leading. */
:where(app-step-contact) h2.block-of-step-title {
    font-size: 12px;
    line-height: 1.4;
    margin-block: 24px 8px;
}
:where(app-step-contact) h1.block-of-step-title {
    font-size: 15px;
    line-height: 1.45;
    margin-block: 0 8px;
}
:where(app-step-contact) .value {
    font-size: 13.5px;
    line-height: 1.5;
}

/* Keep the staff/status column and timeline geometry supplied by each system. */
:where(.step-list-container) .panel-header .inner .losSummary {
    font-size: var(--steps-heading-size, 20px);
    line-height: 1.4;
}
:where(.step-list-container) .row-step .inner {
    padding-block: 10px 16px;
}
:where(.step-list-container) .row-step .inner a {
    font-size: var(--steps-link-size, 15px);
    line-height: 1.45;
}
:where(.step-list-container) .step-entity {
    font-size: var(--steps-entity-size, 13.5px);
    line-height: 1.45;
    margin-block-start: 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

@media (max-width: 767px) {
    :where(app-procedure-resume > *, app-step-resume > #stepDetailContent > *) > .box {
        padding-block: 24px 28px;
    }
}

/* Let the title wrap with the same leading as the card's section headings. */
:where(app-procedure-resume, app-step-resume) .panel-header .inner .resumeTitle,
:where(app-step-resume) .panel-header .inner .instep {
    font-size: 20px;
    line-height: 1.4;
}

:where(app-procedure-resume, app-step-resume) .box .thumb .thumbTitle,
:where(app-procedure-resume, app-step-resume) .box .thumb-wide .thumbTitle {
    font-size: 12.75px;
    line-height: 1.45;
    /* The old 48px overlay clips the larger second line. Reserve three full lines. */
    height: calc(3lh + 12px);
}

/* Align the smaller date to the title's font metrics, including country fonts. */
:where(app-step-resume) .panel-header .inner .instep .losSummary {
    vertical-align: middle;
    line-height: 1.4;
}

/* Keep collapsed groups distinct without widening an expanded group's heading gap. */
.step-list-container .row-block:where(.collapsed) {
    margin-block-end: 4px;
}