/*
 * Novo Nordisk Step Count — public pages.
 *
 * Loaded only by layouts/public.blade.php, which only the campaign materials page extends since the
 * v4 front page (2026-10-01) moved the landing onto layouts/gate.
 * The participant screens are what a phone opens twice a day for fourteen days and they do
 * not pay for this file.
 *
 * Every value comes from public/css/tokens.css. No brand value is written directly, so a
 * brand change stays a change to one file (docs/design/novo-nordisk-design-contract.md).
 *
 * Mobile-first, like app.css: every media query is min-width, so the phone layout is the base
 * case and wider viewports enhance it.
 *
 * WHY THIS IS A SEPARATE STYLESHEET RATHER THAN MORE OF app.css. The materials page has a
 * different job from every other screen in the product. app.css lays out one readable column
 * of 42rem for somebody entering a number; this is an editorial page with full-bleed bands and
 * a wider measure. Mixing the two would have meant overriding .page on the page that needs it
 * least.
 */

/* --- The public shell ---------------------------------------------------------------------
 * .page constrains the application to a reading measure and pads it. The public pages need
 * full-bleed sections — the True Blue band runs edge to edge — so the constraint moves from
 * the page to each section's own inner wrapper.
 */
.page--public {
    max-width: none;
    padding: 0;
}

/* The wide measure, used by every __inner in this file. Not a brand token: it is the width of
 * an editorial column, it exists only on this page, and tokens.css deliberately holds
 * one measure — the 42rem reading column — because that is the only one the product had. */
.page--public {
    --public-measure: var(--layout-measure-wide);
}

.publicfoot__inner,
.hero__inner,
.publicpanels__inner,
.matshead__inner,
.matover,
.matphases__inner {
    max-width: var(--public-measure);
    margin: 0 auto;
    padding-right: var(--layout-gutter);
    padding-left: var(--layout-gutter);
}

/* --- Header: none here any more -------------------------------------------------------------
 * This page's own bar — wordmark, materials link and a call to action that varied by page and
 * by roster state — was replaced by the one shared guest header (ACC-001). The bar's rules live
 * in public/css/app.css, which every layout loads; keeping a second copy here would mean the
 * gate family and this page could drift apart again, which is the whole defect being fixed.
 */

/* --- Hero ---------------------------------------------------------------------------------
 * The composition: eyebrow, display heading, lead, the entry field, a line of facts.
 */
.hero {
    /*
     * TRUE BLUE, NOT WHITE, and this is the change that carries the page.
     *
     * A white hero with dark text is what every SaaS sign-up looks like. The brand's primary
     * colour is the one thing that says Novo Nordisk before a word is read, and a campaign
     * front page is exactly where it should be spent. This is not decoration under principle
     * 9: the field IS the brand signal, and it does work no illustration would do better.
     *
     * The contrast pairs are the ones tokens.css already verifies rather than new ones:
     * white on True Blue is 15.83:1, and the light-blue accent on True Blue is 5.02:1.
     */
    background: var(--colour-primary);
    color: var(--colour-text-inverse);
}

.hero__inner {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

@media (min-width: 48em) {
    .hero__inner {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }
}

/*
 * TWO COLUMNS, AND THE RIGHT-HAND ONE HOLDS THE ACTION.
 *
 * The composition this page is measured against fills the right half with a photograph. There
 * is no photograph and none may be invented — no stock, no generated image, and any
 * identifiable colleague is an unanswered consent question — so the space is filled by the one
 * thing that genuinely belongs there: the form, as a Snow White panel on the True Blue field.
 * It makes the primary action the brightest and most enclosed object on the page, which is
 * what design principle 1 asks for, and it means the wide layout is finished rather than
 * half-empty.
 *
 * The DOM order does not change, so the keyboard still meets copy, then form, then facts.
 */
@media (min-width: 64em) {
    .hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-areas:
            'copy form'
            'facts form';
        column-gap: var(--space-xl);
        row-gap: var(--space-lg);
        align-items: center;
    }

    .hero__copy {
        grid-area: copy;
    }

    .hero__facts {
        grid-area: facts;
        align-self: start;
    }

    .heroform {
        grid-area: form;
        margin: 0;
    }
}

.hero__eyebrow {
    margin: 0 0 var(--space-xs);
    color: var(--colour-accent-on-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.hero__heading {
    /*
     * 18ch keeps the display heading to roughly two lines at every width. A display size that
     * runs to four lines reads as a paragraph in large type rather than as a title, which is
     * the usual way a big heading stops working.
     */
    margin: 0 0 var(--space-md);
    /* 16ch keeps it to two lines at every width. A display size that runs to four lines reads
     * as a paragraph in large type rather than as a title. */
    max-width: 16ch;
    color: var(--colour-text-inverse);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-display);
    text-wrap: balance;
}

.hero__lede {
    /*
     * Snow White at full strength rather than a muted tint. The muted text token is verified
     * against white surfaces; on True Blue the correct quieting device is size and measure,
     * not opacity, because a tinted white on blue is exactly how a hero loses AA.
     */
    margin: 0 0 var(--space-lg);
    /* 36ch, not 52: beside a display title this line is a subtitle, and a subtitle that runs
     * the full measure competes with the thing it is subordinate to. */
    max-width: 36ch;
    color: var(--colour-text-inverse);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-base);
}

/* --- The hero entry form ---------------------------------------------------------------
 *
 * A SNOW WHITE PANEL ON THE TRUE BLUE FIELD, and that single decision replaced most of what
 * used to live here.
 *
 * The form was previously an inverse skin of itself: a white-on-white input border, an
 * inverted button, a bespoke white focus ring, a bespoke white-and-rule error. Six components
 * reimplemented because the ground was blue. Putting the form on its own white ground means
 * every one of them goes back to being the ordinary product component — .field__input,
 * .button, the global focus ring, .field__error — which is both less code and one fewer place
 * for the two versions to drift apart.
 *
 * It also answers the composition. On a wide screen the panel is what fills the half the
 * reference design gives to a photograph, and it fills it with the primary action rather than
 * with decoration.
 *
 * (This block was once deleted by accident while removing the dead .hero__actions rules
 * around it. Every test still passed - they assert markup, not appearance - and a browser
 * screenshot is what found it. It is kept whole and adjacent to the hero rules for that
 * reason.)
 */
.heroform {
    box-sizing: border-box;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--colour-surface);
    color: var(--colour-text);
}

@media (min-width: 48em) {
    .heroform {
        /* One field does not need the full measure around it. */
        max-width: var(--layout-measure-narrow);
        padding: var(--space-lg);
    }
}

.heroform__label {
    display: block;
    margin-bottom: var(--space-2xs);
    color: var(--colour-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.heroform__hint {
    margin: 0 0 var(--space-xs);
    color: var(--colour-text-muted);
    font-size: var(--font-size-sm);
}

/*
 * STACKED AT EVERY WIDTH, INSIDE THE PANEL.
 *
 * The side-by-side row is gone. It existed because a bare field on a coloured field needed to
 * look like one control; inside a white panel the panel is the enclosure, and a field with its
 * button beneath it is the shape every other form in this product already uses. It is also
 * what produced the worst defect this page has shipped: the row's media query sat above the
 * base rules it was meant to override, so from 544px up the button claimed the whole line and
 * the input collapsed to about 36 pixels — the front door, unusable on every laptop, correct
 * on every phone it was reviewed at.
 */
.heroform__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.heroform__submit {
    width: 100%;
}

/* Three facts, not a sentence, so they are a list. The bullets are removed and replaced with
 * a rule between items on wide screens. Removing the marker is why the markup carries an
 * explicit role="list": WebKit drops list semantics from a list styled list-style: none, so
 * without it VoiceOver announces neither the grouping nor the count. */
.hero__facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    padding-top: var(--space-md);
    border-top: var(--border-width) solid var(--colour-rule-on-primary);
    list-style: none;
}

.hero__fact {
    color: var(--colour-text-inverse);
    font-size: var(--font-size-base);
}

@media (min-width: 30em) {
    .hero__facts {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .hero__fact + .hero__fact {
        padding-left: var(--space-sm);
        border-left: var(--border-width) solid var(--colour-rule-on-primary);
    }
}

/*
 * THE ENTRANCE ANIMATION WAS REMOVED, AND THIS NOTE IS WHY IT MUST NOT COME BACK IN THAT FORM.
 *
 * It was a 300ms staged reveal: opacity 0 to 1, translateY 8px, with animation-fill-mode:
 * both. The comment that stood here claimed "not running it is the safe state", and that was
 * simply false. `both` applies the FROM state before the animation starts and after it ends,
 * so every element it touched was transparent until its delay elapsed - up to 460ms of a
 * campaign page rendering as an empty blue field with one eyebrow on it.
 *
 * That is what a headless screenshot at 390x844 and at 1280x900 showed: the heading, the lead,
 * the email field and the primary action all invisible. Reading the HTML could not have found
 * it, and neither could the test suite; the markup was correct the whole time.
 *
 * It also never earned its place. Design principle 9 removes anything that does not help
 * somebody complete the task, and a first paint that hides the task is the opposite. If a
 * reveal is ever wanted here, it animates transform only, never opacity, so the content is
 * legible in the first frame whatever happens afterwards.
 */

/*
 * THE PANELS SIT ON THE TINT, AND ARE WHITE THEMSELVES.
 *
 * They used to be white cards on a white band, held together by a 1px border — which is the
 * treatment every internal tool uses and the reason this section read as a settings page. The
 * tint moved down from "how it works" to here, so a panel is now defined by its own ground
 * rather than by an outline, and the border comes off. That is the whole treatment: no shadow
 * (the shadow tokens are True Blue-derived and all but invisible on a tint), no gradient
 * ([NOVO] forbids them outright), no second border.
 */
.publicpanels {
    background: var(--colour-surface-sunken);
}

.publicpanels__inner {
    display: grid;
    gap: var(--space-md);
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

@media (min-width: 48em) {
    .publicpanels__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg);
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }
}

.publicpanel {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--colour-surface);
}

@media (min-width: 48em) {
    .publicpanel {
        padding: var(--space-lg);
    }
}

/* The two panels are different lengths; their links still line up. */
.publicpanel .text-link {
    margin-top: auto;
}

.publicpanel__eyebrow {
    margin: 0 0 var(--space-2xs);
    color: var(--colour-accent-on-surface);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.publicpanel__heading {
    margin: 0 0 var(--space-2xs);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
}

.publicpanel__body {
    margin: 0 0 var(--space-md);
    color: var(--colour-text-muted);
    line-height: var(--line-height-base);
}

/* --- Materials page -----------------------------------------------------------------------
 */
.matshead__inner {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-md);
}

.matshead__heading {
    margin: 0 0 var(--space-2xs);
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
}

.matshead__lede {
    margin: 0 0 var(--space-sm);
    max-width: 60ch;
    color: var(--colour-text-muted);
    font-size: var(--font-size-lg);
}

/* The material cards themselves are drawn by the MATERIALS 2026 layer below. */

/* --- Footer: its layout is in app.css, which both layouts load (the gate family does not load
 * this sheet). What stays here is the public shell's ink colouring below. */

/* ==========================================================================================
 * THE PUBLIC SHELL — 2026
 *
 * The materials page and the staging QA switch share the participant product's frame: a True
 * Blue bar and footer running edge to edge, white type on them, and the page's own content on
 * white inside. Declared here rather than in app.css because this file is loaded after it and
 * would otherwise win with the older white bar — one definition, in the file that owns the
 * public shell.
 * ========================================================================================== */

/* The guest bar's own rules were here. They are gone: ACC-001 gave this page the shared guest
 * header, which is styled in app.css beside the rules that draw it. */

/* THE FOOTER IS WHITE SINCE DESIGN V4 (2026-10-01), on this page as on every other: the ink colours
 * that stood here outlasted the v4 layer in app.css on /materials, because this file loads after it,
 * and left the wordmark and the Lasting Blue novohealth file ink on ink. */
.publicfoot :focus-visible {
    outline-color: var(--colour-focus);
}

.publicfoot {
    border: 0;
    border-top: var(--border-width) solid var(--colour-rule-warm);
    background: var(--colour-surface);
    color: var(--colour-text);
}

.publicfoot__mark,
.publicfoot__brand {
    color: var(--colour-text);
}

.publicfoot p,
.publicfoot__operator,
.publicfoot .language__label {
    color: var(--colour-text-muted);
}

.publicfoot .language__current,
.publicfoot .language__choice {
    color: var(--colour-text);
}

/* --- The sections on a public page ------------------------------------------------------------
 * Same rhythm as the rest of the product: a title set large and tight, cards with a corner you
 * can see, and a warm ground where a band needs to separate itself from the one above.
 */
.matshead__title {
    letter-spacing: var(--tracking-tight);
}

/* The product's own name in the footer is ink on the white footer (design v4). */
.publicfoot__brand {
    color: var(--colour-text);
}

/* --- Measured against GuestMaterials.dc.html at 1440x1460 -------------------------------------
 * public.css loads after app.css, so the board's figures for this page are stated here or they
 * lose on cascade order.
 */
.matshead__heading {
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0;
    /* A long Danish compound breaks rather than widening the page (375, 2026-09-25). */
    overflow-wrap: break-word;
    hyphens: auto;
}

.matshead__lede {
    margin-top: 14px;
    margin-bottom: 0;
    max-width: 620px;
    font-size: 18px;
    line-height: 1.55;
}

/* ==========================================================================================
 * DESIGN 2026 — THE MATERIALS PAGE, as GuestMaterials.dc.html draws it
 *
 * The board's figures: a 96px gutter at 1440 like the bar above it; a page head with the
 * footprints at its right edge; three columns (a 240px index, the copy, a 340px ink card of
 * dates) 24 apart; each block a 20px card. The 2026 redesign (§5) is the MATERIALS 2026 layer
 * further down: the index card with its current entry, the text directly on the card, the date
 * chip, the questions accordion and the material cards. Stated in this sheet because the rules
 * they replace in app.css would otherwise win on source order.
 *
 * ONE THING THE BOARD DRAWS AND THIS PAGE DOES NOT: a "Copy text" button per block, because the
 * product runs no script outside the converter (ADR 017; the partial says so).
 * ========================================================================================== */
.matshead--page .matshead__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding-top: 24px;
    /* 16 to the index, the board's gap between the head and the grid (b2 guest pass). */
    padding-bottom: 16px;
}

.matshead--page .matshead__words {
    min-width: 0;
}

.matshead--page .matshead__eyebrow {
    margin-bottom: 8px;
    /* On its words' own height, as the board's eyebrow is: 17px of line put the heading 4 low. */
    line-height: 1.2;
}

.matshead--page .matshead__heading {
    font-size: 44px;
    line-height: 1.05;
}

.matshead--page .matshead__lede {
    max-width: 52rem;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
}

.matcopy {
    padding-bottom: 48px;
}

.matcopy__inner {
    gap: 16px 24px;
}

.matindex__items {
    margin: 0;
    gap: 4px;
}

.matindex__item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
}

.matcopy__blocks {
    gap: 16px;
}

.matblock {
    padding: 24px;
    border-color: var(--board-rule);
    border-radius: var(--radius-2xl);
}

.matblock__heading {
    font-size: 20px;
}

.matblock__line {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--colour-text);
}

.matblock__line + .matblock__line {
    margin-top: 10px;
}

/* From 80rem the page head, the top row, the phases and the footer take the bar's 96px gutter,
 * as GuestMaterials.dc.html draws 1440. */
@media (min-width: 80rem) {
    .matshead__inner,
    .matover,
    .matphases__inner,
    .publicfoot__inner {
        max-width: 90rem;
        padding-inline: 96px;
    }
}

/* A phone: the board's 32px page heading. */
@media (max-width: 47.9375rem) {
    .matshead--page .matshead__heading {
        font-size: 32px;
    }

    .matcopy {
        padding-bottom: 32px;
    }

    .matblock {
        padding: 20px;
    }
}

/* --- The index jump (Kenneth, 25 Sep 15:25) -------------------------------------------------
 * A jump lands with the block's card top in view: the target is the heading, 24px inside its card,
 * so it stops 48px under the window's edge. The heading takes focus on arrival (tabindex="-1" in
 * the view), so a keyboard continues from the block. The index and the dates card stay in view
 * while reading. */
.matblock__heading[id] {
    scroll-margin-top: 48px;
}


/* === MATERIALS 2026 (advisor 25 Sep 16:50 §5, Kenneth's mock; §2 for the anchors) ================
 * After the earlier materials layers here and in app.css, so it wins over them; only the phone
 * gutter rule, which must stay last (VisibleLayoutContractTest), follows it. */

/* --- The index: a small card; the entry for the block in view carries the left-edge bar on the
 * v4 band tint. CSS alone: `:has(:target)` reads the address, and with no target the first entry is
 * current. Arriving by "Back to top" (the index itself is the target) marks none: the page cannot
 * know which block the reader came from. Decoration, not state, so the markup carries no aria-current. */
.matindex {
    align-self: start;
    padding: 16px 12px;
    border: 1px solid var(--board-rule);
    border-radius: var(--radius-2xl);
    background: var(--colour-surface);
}

.matindex__item {
    border-radius: 12px;
    color: var(--colour-text-muted);
}

.matindex__item:hover,
.matindex__item:focus-visible {
    /* No warm neutral since design v4 ("no sand", advisor 2026-10-02 09:15): the band tint. */
    background: var(--colour-surface-band);
    color: var(--colour-primary);
}

:root:has(#block-announcement:target) .matindex__item[href="#block-announcement"],
:root:has(#block-invitation:target) .matindex__item[href="#block-invitation"],
:root:has(#block-questions:target) .matindex__item[href="#block-questions"],
:root:has(#block-dates:target) .matindex__item[href="#block-dates"],
:root:has(#materials-overview-heading:target) .matindex__item[href="#materials-overview-heading"],
:root:not(:has([id^="block-"]:target, #materials-index:target, #materials-overview-heading:target)) .matindex__items > li:first-child .matindex__item {
    background: var(--colour-surface-band);
    box-shadow: inset 3px 0 0 var(--colour-primary);
    color: var(--colour-primary);
    /* The board sets the entry in view in bold (GuestMaterials, .gm-nav a[aria-current]). */
    font-weight: var(--font-weight-bold);
}


/* --- A copy block: one white card, the words directly on it (no inset). */
.matblock__body {
    margin-top: 12px;
}

.matblock__line {
    font-size: 16px;
    line-height: 1.6;
}

/* The block's date line: a chip on the v4 band tint with a calendar mark at the foot of the card. A 14px
 * corner, as the board draws it wrapped: on a phone the line takes two or three rows, and a pill's
 * ends would eat into its text. */
.matblock__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 8px 14px;
    border-radius: 14px;
    background: var(--colour-surface-band);
    color: var(--colour-primary);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
}

.matblock__date .lineicon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- The questions: one row each, hairlines between, the chevron on the right turning when open. */
.matfaq {
    border-top: 1px solid var(--board-rule-inner);
}

.matfaq__item {
    border-bottom: 1px solid var(--board-rule-inner);
}

.matfaq__item:last-child {
    border-bottom: 0;
}

.matfaq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 12px 0;
    color: var(--colour-primary);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    list-style: none;
}

.matfaq__question::-webkit-details-marker {
    display: none;
}

.matfaq__question .lineicon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.matfaq__item[open] > .matfaq__question .lineicon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .matfaq__question .lineicon {
        transition: none;
    }
}

.matfaq__answer {
    margin: 0 0 14px;
    padding-right: 36px;
    color: var(--colour-text-muted);
    font-size: 15px;
    line-height: 1.55;
}

/* --- Back to top: the way back to the index at the end of each full text (§2; since v5 on every
 * screen, the index being in the top row). */
.matblock__top {
    margin: 16px 0 0;
}

.matblock__top .text-link {
    gap: 6px;
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
}

.matblock__top .lineicon {
    width: 18px;
    height: 18px;
}

/* The index is the target of "Back to top": its top edge lands in view, not under the window's. */
#materials-index {
    scroll-margin-top: 24px;
}

/* === MATERIALS v5 (advisor 2026-10-04 17:00, after materials-inspiration-2026-10-04) ============
 * Kenneth: "more scannable, less document". A top row (the index, the two texts as light cards,
 * the deadlines in one ink card, the questions as one card), the materials in numbered phases,
 * and the full texts below. After every earlier materials layer, so it wins over them. */

/* --- The top row ----------------------------------------------------------------------------- */
.matover {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 40px;
}

/* Below 64rem the index's entries run along one wrapping line. */
@media (max-width: 63.9375rem) {
    .matover .matindex__items {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (min-width: 48rem) {
    .matover {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .matover .matindex {
        grid-column: 1 / -1;
    }
}

@media (min-width: 64rem) {
    .matover {
        grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr);
    }

    .matover .matindex {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .matsum--announcement { grid-column: 2; grid-row: 1; }
    .matsum--invitation { grid-column: 2; grid-row: 2; }
    .matink { grid-column: 3; grid-row: 1; }
    .matsum--questions { grid-column: 3; grid-row: 2; }
}

/* A light card: an Ice Blue tile, the heading, one line and the way to the full text. */
.matsum {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--board-rule);
    border-radius: var(--radius-2xl);
    background: var(--colour-surface);
    box-shadow: var(--shadow-md);
}

.matsum__icon,
.matcard__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--colour-surface-tile);
    color: var(--colour-primary);
}

.matsum__icon .lineicon,
.matcard__icon .lineicon {
    width: 24px;
    height: 24px;
}

.matsum__words {
    min-width: 0;
}

.matsum__heading {
    margin: 0;
    font-size: 20px;
    line-height: var(--line-height-tight);
}

.matsum__line {
    margin: 8px 0 0;
    color: var(--colour-text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.matsum__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 6px 12px;
    border-radius: 14px;
    background: var(--colour-surface-band);
    color: var(--colour-primary);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
}

.matsum__chip .lineicon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.matsum__more {
    margin: 14px 0 0;
}

.matsum__more .text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
}

.matsum__more .lineicon {
    width: 18px;
    height: 18px;
}

/* The deadlines: the one ink card, as on every v4 page that gathers dates. */
.matink {
    padding: 24px;
    border-radius: var(--radius-2xl);
    background: var(--colour-surface-ink);
    color: var(--colour-text-on-primary);
}

.matink__heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    color: var(--colour-text-inverse);
    font-size: 18px;
    scroll-margin-top: 48px;
}

.matink__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--colour-surface-ink-raised);
}

.matink__icon .lineicon {
    width: 22px;
    height: 22px;
}

.matink__rows {
    margin: 0;
}

.matink__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--colour-surface-ink-raised);
    font-size: 15px;
}

.matink__row dt {
    color: var(--colour-text-on-primary-muted);
}

.matink__row dd {
    margin: 0;
    font-weight: var(--font-weight-bold);
}

.matink__none {
    margin: 0;
    color: var(--colour-text-on-primary-muted);
}

/* On ink the ring is white, as on every ink surface: the Lasting Blue one vanishes. */
.matink :focus-visible {
    outline-color: var(--colour-text-inverse);
}

/* --- The materials, in numbered phases --------------------------------------------------------- */
.matphases {
    padding-bottom: 48px;
}

.matphases__heading {
    margin: 0;
    font-size: var(--font-size-2xl);
    /* "Kampagnematerialer" is one word: it breaks rather than widening a 320px page. */
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 29.9375rem) {
    .matphases__heading {
        font-size: var(--font-size-xl);
    }
}

.matphases__lede {
    margin: 6px 0 24px;
    max-width: 60ch;
    color: var(--colour-text-muted);
}

.matphases__list {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.matphase {
    padding: 24px;
    border: 1px solid var(--board-rule);
    border-radius: var(--radius-2xl);
    background: var(--colour-surface);
    box-shadow: var(--shadow-md);
}

.matphase__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

/* The phase number: an Ice Blue tile, every phase the same (not mint or peach, as the inspiration). */
.matphase__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--colour-surface-tile);
    color: var(--colour-primary);
    font-size: 24px;
    font-weight: var(--font-weight-heavy);
}

.matphase__words {
    flex: 1 1 14rem;
    min-width: 0;
}

.matphase__heading {
    margin: 0;
    font-size: 22px;
}

.matphase__lede {
    margin: 2px 0 0;
    color: var(--colour-text-muted);
    font-size: 15px;
}

.matphase__use {
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--colour-surface-band);
    color: var(--colour-primary);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
}

.matphase__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 16px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

/* A material: the icon tile, its title, one line, its format, and one action across the foot. */
.matcard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: 16px 14px;
    padding: 20px;
    border: 1px solid var(--board-rule);
    border-radius: 18px;
    background: var(--colour-surface);
}

.matcard__heading {
    margin: 0;
    font-size: 17px;
}

.matcard__body {
    margin: 4px 0 0;
    color: var(--colour-text-muted);
    font-size: 15px;
    line-height: 1.5;
}

.matcard__format {
    margin: 8px 0 0;
    color: var(--colour-text-muted);
    font-size: 13px;
}

.matcard__action {
    grid-column: 1 / -1;
    gap: 8px;
    width: 100%;
}

.matcard__action .lineicon {
    width: 18px;
    height: 18px;
}

/* ONE OR TWO MATERIALS ARE FULL-WIDTH ROWS (advisor 2026-10-04 18:00): the icon tile, the title
 * and its line with the format, and the action on the right. On a phone the action goes under. */
.matphase__items--rows {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
    .matphase__items--rows .matcard {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .matphase__items--rows .matcard__action {
        grid-column: auto;
        width: auto;
    }
}

/* What is not ready yet: one quiet line in its phase, never a control. */
.matphase__coming {
    margin: 16px 0 0;
    color: var(--colour-text-muted);
    font-size: 15px;
}

/* --- The full texts, on their own now (the index and the dates moved to the top row): the page's
 * width, and the three texts side by side where they fit. */
.matcopy {
    padding-inline: 0;
}

.matcopy__inner {
    display: block;
    max-width: 90rem;
    margin: 0 auto;
    padding-inline: 18px;
}

.matcopy__blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    align-items: start;
    gap: 16px;
}

@media (min-width: 80rem) {
    .matcopy__inner {
        padding-inline: 96px;
    }
}

/* --- The full texts: the index has scrolled away on every screen now, so each keeps its way back. */
/* A phone: the top row's cards and the phases at the phone padding. */
@media (max-width: 47.9375rem) {
    .matsum,
    .matink,
    .matphase {
        padding: 20px;
    }

    .matsum {
        gap: 14px;
    }
}

/* === MATERIALS TO THE COMPONENT SHEET (advisor 2026-10-05 08:40: "v5 is recent, so only sheet deviations")
 * Measured at 1440 and 390 against design-v4-2026-10-01/components.html; v5's layout, its ink
 * deadlines card and its chips stay as they are. What moved to the sheet:
 *   - cards at the sheet's 20px corners (they were 24);
 *   - a card's heading at the sheet's h2, 22px (the summaries and the full texts were 20, the
 *     deadlines 18), 12px from its tile (14 to 18);
 *   - every round tile at the sheet's 40 with a 20px drawing (44, 48 and 52);
 *   - the head's eyebrow at 12px heavy, tracked .14em (11 bold), and its lede at 17px, 6px under
 *     the heading (16 at 10); the phone heading 34 (32), the phone lede kept at 16;
 *   - the space between sections and between cards 24, 16 on a phone (16, 20, 40 and 48).
 * After every earlier materials layer; the phone gutter rule stays last in the file. */
.matindex,
.matsum,
.matink,
.matphase,
.matblock {
    border-radius: 20px;
}

.matsum__heading,
.matink__heading,
.matblock__heading {
    font-size: 22px;
    line-height: 1.2;
}

/* A section heading is 28/800 at every width, as the front's "Sådan fungerer det" (sweep 2, item 2):
 * this one was 28/700 on a laptop and 22 on a phone. */
.matphases__heading {
    font-size: 28px;
    font-weight: var(--font-weight-heavy);
}

.matsum,
.matink__heading,
.matphase__head {
    gap: 12px;
}

.matsum__icon,
.matink__icon,
.matcard__icon,
.matphase__number {
    width: 40px;
    height: 40px;
}

.matsum__icon .lineicon,
.matink__icon .lineicon,
.matcard__icon .lineicon {
    width: 20px;
    height: 20px;
}

.matphase__number {
    font-size: 20px;
}

.matshead__eyebrow {
    font-size: 12px;
    font-weight: var(--font-weight-heavy);
    letter-spacing: 0.14em;
}

.matshead--page .matshead__lede {
    margin-top: 6px;
    font-size: 17px;
}

.matover {
    gap: 24px;
    padding-bottom: 24px;
}

.matphases {
    padding-bottom: 24px;
}

.matphases__list,
.matcopy__blocks {
    gap: 24px;
}

@media (max-width: 47.9375rem) {
    .matshead--page .matshead__heading {
        font-size: 34px;
    }

    /* The density rules win over the sheet's 17px here: at 17 the lede ran to three lines. */
    .matshead--page .matshead__lede {
        font-size: 16px;
    }

    .matover {
        gap: 16px;
        padding-bottom: 16px;
    }

    .matphases {
        padding-bottom: 16px;
    }

    .matphases__list,
    .matcopy__blocks {
        gap: 16px;
    }
}

/* === MATERIALS, THE AUDIT'S CONTENT POLISH (audit 1006, items 15 and 16) ============================
 * The top row is the index and the deadlines: the summary cards that repeated the full texts went.
 * The deadlines card is quiet - the band tint, ink text - since ink is for one thing per screen (D2).
 * On a phone a date row is its label over its value, always (they broke at different points).
 * Between 48rem and 64rem the grid is two columns and the deadlines card is alone on its row, so it
 * takes both. A date's value is plain, as on Support (D1: key/value values are 400). */
@media (min-width: 48rem) {
    .matover .matink {
        grid-column: 1 / -1;
    }
}

@media (min-width: 64rem) {
    .matover {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .matover .matindex {
        grid-row: 1;
    }

    .matover .matink {
        grid-column: 2;
        grid-row: 1;
    }
}

.matink {
    background: var(--colour-surface-band);
    color: var(--colour-text);
}

.matink__heading {
    color: var(--colour-text);
}

.matink__icon {
    background: var(--colour-surface-tile);
    color: var(--colour-text);
}

.matink__row {
    border-top-color: var(--colour-rule-on-tint);
}

.matink__row dt,
.matink__none {
    color: var(--colour-text-muted);
}

.matink__row dd {
    font-weight: var(--font-weight-regular);
}

.matink :focus-visible {
    outline-color: var(--colour-focus);
}

@media (max-width: 47.9375rem) {
    .matink__row {
        flex-direction: column;
        gap: 2px;
    }
}

/* THE PHONE GUTTER IS THE BAR'S 18px, as on every gate page (app.css, "GUTTERS BELOW 80rem"). The
 * shared rule above gives this page's columns --layout-gutter (16px), and because this file loads
 * after app.css it won over app.css's 18px for the footer too, so on /materials the footer and the
 * content sat 2px inside the wordmark (Copilot on #155, V6). Last in the file, so it wins the tie.
 * From 80rem the page takes the bar's 96px gutter, as GuestMaterials.dc.html draws it (the
 * 2026 layer above), and the footer stays aligned with the content there too. */
@media (max-width: 79.99rem) {
    .matshead__inner,
    .matover,
    .matphases__inner,
    .matcopy__inner,
    .publicfoot__inner {
        padding-inline: 18px;
    }
}