/* The category panel is deliberately in the page flow: all choices reflow, including without JS. */
.site-nav--disclosure { background: var(--colour-bg); }
.site-nav--disclosure::after { content: none; }
.category-navigation {
    max-inline-size: calc(var(--page-width) + 2 * var(--gutter));
    margin-inline: auto;
}
.category-navigation__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--touch-target);
    padding: var(--space-2) max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-inline-end: max(var(--gutter), env(safe-area-inset-right, 0px));
    color: var(--colour-text);
    font-family: var(--font-body);
    font-weight: 650;
    line-height: var(--leading-snug);
    cursor: pointer;
    transition: none;
    list-style: none;
}
.category-navigation__summary::-webkit-details-marker { display: none; }
.category-navigation__summary::after {
    content: "";
    flex: none;
    inline-size: .5rem;
    block-size: .5rem;
    margin-inline-start: var(--space-1);
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
}
.category-navigation[open] > summary::after { transform: rotate(225deg); }
.category-navigation__summary:hover { background: var(--state-hover); }
.category-navigation__summary:focus-visible,
.site-nav--disclosure .site-nav__link:focus-visible {
    outline: var(--rule-heavy) solid var(--colour-focus);
    outline-offset: -3px;
}
.category-navigation__current {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
    padding-inline-start: var(--space-2);
    border-inline-start: var(--rule-light) solid var(--colour-control);
    font-weight: 400;
    overflow-wrap: anywhere;
}
.category-navigation__current > span:last-child { min-inline-size: 0; }
.category-navigation__current .subject-mark {
    inline-size: 1rem;
    block-size: 1rem;
    border: 0;
    background: none;
}
.category-navigation__count {
    flex: none;
    margin-inline-start: auto;
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
}
.site-nav--disclosure .site-nav__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    max-inline-size: 58rem;
    margin: 0;
    padding: var(--space-2) max(var(--gutter), env(safe-area-inset-left, 0px)) var(--space-3);
    padding-inline-end: max(var(--gutter), env(safe-area-inset-right, 0px));
    gap: var(--space-2);
    overflow: visible;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}
.site-nav--disclosure .site-nav__list > li { min-inline-size: 0; }
.site-nav--disclosure .site-nav__list > li:first-child {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0 0 var(--space-1);
    border: 0;
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}
.site-nav--disclosure .site-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--touch-target);
    padding: var(--space-2);
    font-size: 1rem;
    line-height: var(--leading-snug);
    white-space: normal;
    overflow-wrap: anywhere;
}
.site-nav--disclosure .site-nav__link .icon { flex: none; }

/* Rreze: a category's colour is a small tile beside its name, never a band (ADR-0151). */
.site-nav__tile {
    flex: none;
    inline-size: 9px;
    block-size: 9px;
    background: var(--hue);
}

/* An expanded panel must remain scrollable in short and enlarged layouts. */
@media screen {
    .app-header:has(.category-navigation[open]),
    .app-header:has(.header-customise[open]) { position: static; }
}

/* Keep the selected name readable when narrow screens or enlarged text need a second row. */
@media (max-width: 36rem) {
    .category-navigation__summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
    .category-navigation__label { grid-column: 1; grid-row: 1; }
    .category-navigation__count { grid-column: 2; grid-row: 1; }
    .category-navigation__summary::after { grid-column: 3; grid-row: 1; }
    .category-navigation__current {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

/* The desktop row follows the published order; its native panel holds the rest. On a phone the
   row's links, the index action and the "more" label give way to the one disclosure of everything. */
.category-navigation-bar {
    position: relative;
    max-inline-size: calc(var(--page-width) + 2 * var(--gutter));
    margin-inline: auto;
}
.site-nav__all,
.site-nav__primary,
.category-navigation__more-label { display: none; }
.app-header__bar { flex-wrap: wrap; gap: var(--space-1); }
/* Language and display belong together; neither can become an orphaned flex item. */
.app-header__tools {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-inline-size: 0;
    max-inline-size: 100%;
}
/* The brand precedes navigation and tools visually as well as in keyboard order. At tablet
   widths the labelled destinations and the tools share the second row; enlarged text can wrap. */
@media (min-width: 48rem) and (max-width: 63.999rem) {
    .app-header__bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0;
    }
    .app-header__bar > .brand { grid-column: 1 / -1; grid-row: 1; }
    .app-header__tools {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        justify-content: flex-end;
    }
    .app-header__bar > .header-nav {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
        margin-inline-start: 0;
    }
    .header-nav__install,
    .header-nav__link--mine {
        inline-size: var(--touch-target);
        padding-inline: 0;
        justify-content: center;
    }
    .header-nav__install .header-nav__label,
    .header-nav__link--mine .header-nav__label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.edition-nav--header {
    flex: 0 1 auto;
    inline-size: auto;
    max-inline-size: 100%;
    margin: 0;
    padding: 0;
}
.edition-nav--header[hidden] { display: none; }
.header-edition { min-inline-size: 0; max-inline-size: 100%; }
.header-edition__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-block-size: var(--touch-target);
    padding-inline: 0.5rem;
    border: var(--rule-light) solid var(--colour-hairline);
    border-radius: 999px;
    background: var(--colour-surface);
    color: var(--colour-text);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: var(--leading-snug);
    cursor: pointer;
    list-style: none;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.header-edition__summary[data-flag]::before {
    content: attr(data-flag);
    flex: none;
    font-size: 0.9375rem;
    line-height: 1;
}
.header-edition__summary::-webkit-details-marker { display: none; }
.header-edition__summary::after {
    content: "";
    flex: none;
    inline-size: 6px;
    block-size: 6px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--motion-fast) var(--ease);
}
.header-edition[open] > summary {
    border-color: var(--colour-control);
    background: var(--colour-wash);
}
.header-edition[open] > summary::after { transform: rotate(225deg); }
.header-edition__summary:focus-visible { outline: var(--rule-heavy) solid var(--colour-focus); outline-offset: -3px; }
.header-edition:not([open]) > .header-edition__choices { display: none; }
.header-edition[open] > .header-edition__choices { display: grid; gap: var(--space-1); padding-block: var(--space-1); }
.edition-nav--header a { margin: 0; max-inline-size: 100%; }
.app-header:has(.header-edition[open]) { position: static; }
@media (max-width: 39.999rem) {
    .app-header--mine-tab .header-nav__link--mine { display: none; }
    .app-header__bar { align-items: flex-start; }
}

/* «Përshtat» (Rreze): the reader's own on/off choices for categories and outlets. */
.header-customise { min-inline-size: 0; }
.header-customise__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border: var(--rule-light) solid var(--colour-control);
    border-radius: 999px;
    background: var(--colour-surface);
    color: var(--colour-text);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: var(--leading-snug);
    cursor: pointer;
    list-style: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.header-customise__summary::-webkit-details-marker { display: none; }
.header-customise__summary:focus-visible { outline: var(--rule-heavy) solid var(--colour-focus); outline-offset: -3px; }
.header-customise[open] > .header-customise__summary {
    border-color: var(--colour-action);
    background: var(--colour-action);
    color: var(--colour-action-text);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}
.header-customise__icon { display: inline-flex; }
.header-customise__icon .icon { inline-size: 1.125rem; block-size: 1.125rem; }
.header-customise__open,
.header-customise[open] > summary .header-customise__closed { display: none; }
.header-customise[open] > summary .header-customise__open { display: inline; }
.header-customise__panel {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3) max(var(--gutter), env(safe-area-inset-left, 0px)) var(--space-4);
    padding-inline-end: max(var(--gutter), env(safe-area-inset-right, 0px));
    border-block-start: var(--rule-light) solid var(--colour-control);
    border-block-end: 2px solid var(--colour-text);
    background: var(--colour-surface);
    box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.16), 0 2px 8px -2px rgba(15, 23, 42, 0.06);
}
.header-customise__choices { display: grid; gap: var(--space-3); min-inline-size: 0; }
.header-customise__group {
    display: grid;
    gap: var(--space-2);
    min-inline-size: 0;
}
@media (min-width: 36rem) {
    .header-customise__group {
        padding: var(--space-2) var(--space-3);
        border: var(--rule-light) solid var(--colour-hairline);
        border-radius: 0.625rem;
        background: var(--colour-bg);
    }
}
/* Until the outlets arrive (they are asked for when the panel opens), and without JavaScript, a link to their page. */
.header-customise__outlets,
.header-customise__none { margin: 0; color: var(--colour-muted); font-size: 0.875rem; }
.header-customise__outlets-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: var(--colour-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.header-customise__outlets-link:focus-visible { outline: var(--rule-heavy) solid var(--colour-focus); outline-offset: 2px; }
.header-customise__label {
    margin: 0;
    padding-block-end: 0.375rem;
    border-block-end: var(--rule-light) solid var(--colour-hairline);
    color: var(--colour-muted);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.header-customise__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-customise__chips > li { min-inline-size: 0; max-inline-size: 100%; }
.header-customise__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-block-start: var(--space-2);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}
.header-customise__hint {
    flex: 1 1 18rem;
    min-inline-size: 0;
    margin: 0;
    color: var(--colour-muted);
    font-size: 0.8125rem;
}
.header-customise__restore { margin: 0; }
.header-customise__restore-button,
.country-chip__button {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border: var(--rule-light) solid var(--colour-control);
    border-radius: 999px;
    background: var(--colour-bg);
    color: var(--colour-text);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.header-customise__restore-button {
    font-size: 0.8125rem;
    text-decoration: none;
}
.header-customise__restore-button:hover { background: var(--colour-wash); }
.header-customise__restore-button:focus-visible,
.country-chip__button:focus-visible { outline: var(--rule-heavy) solid var(--colour-focus); outline-offset: 2px; }

/* The panel's outlets as a page, where its link leads without JavaScript. */
.outlet-choices { display: grid; gap: var(--space-4); }
.outlet-choices__back { margin: 0; }
.header-customise__countries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-3);
}
.header-customise__country {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-inline-size: 0;
}
@media (min-width: 36rem) {
    .header-customise__country {
        padding: var(--space-2) var(--space-3);
        border: var(--rule-light) solid var(--colour-hairline);
        border-radius: 0.5rem;
        background: var(--colour-surface);
    }
}
.header-customise__country-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding-block-end: 0.375rem;
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}
.header-customise__country-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--colour-text);
}
.header-customise__country-name[data-flag]::before {
    content: attr(data-flag);
    margin-inline-end: 0.35rem;
    font-size: 1rem;
    line-height: 1;
}
.country-chip { margin: 0; }
.country-chip__button {
    gap: var(--space-2);
    font-size: 0.78125rem;
    line-height: var(--leading-snug);
}
.country-chip__button[aria-pressed="false"] {
    border-style: dashed;
    background: transparent;
    color: var(--colour-muted);
}

/* A chip is pressed while the reader sees it; switched off it is struck through and muted, never only paler. */
.hide-chip { margin: 0; max-inline-size: 100%; }
.hide-chip__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-inline-size: 100%;
    min-block-size: var(--touch-target);
    padding: 0 var(--space-3) 0 var(--space-2);
    border: var(--rule-light) solid var(--colour-control);
    border-radius: 999px;
    background: var(--colour-surface);
    color: var(--colour-text);
    font: inherit;
    font-size: 0.84375rem;
    font-weight: 600;
    line-height: var(--leading-snug);
    text-align: start;
    overflow-wrap: anywhere;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.hide-chip__name { min-inline-size: 0; }
.hide-chip__tile {
    flex: none;
    inline-size: 9px;
    block-size: 9px;
    margin-inline: var(--space-1) 0;
    border-radius: 2px;
    background: var(--hue);
}
.hide-chip .subject-mark {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: var(--rule-light) solid var(--colour-control);
    border-radius: 999px;
    background: var(--colour-surface);
    font-family: var(--font-serif);
    font-size: 0.75rem;
}
.hide-chip .subject-mark--logo { inline-size: 4.5rem; border-radius: 4px; }
.hide-chip .subject-mark img { padding: 1px; }
.hide-chip__button[aria-pressed="false"] {
    border-style: dashed;
    background: transparent;
    color: var(--colour-muted);
    box-shadow: none;
}
.hide-chip__button[aria-pressed="false"] .hide-chip__name { text-decoration: line-through; }
.hide-chip__button[aria-pressed="false"] :is(.hide-chip__tile, .subject-mark) { opacity: 0.45; }
.hide-chip__button:focus-visible { outline: var(--rule-heavy) solid var(--colour-focus); outline-offset: 2px; }
.hide-chip__error { margin: var(--space-1) 0 0; font-size: var(--step--1); }
@media (hover: hover) {
    .hide-chip__button:hover,
    .country-chip__button:hover,
    .header-edition__summary:hover { background: var(--colour-wash); border-color: var(--colour-text); }
    .header-customise:not([open]) > .header-customise__summary:hover { background: var(--colour-wash); border-color: var(--colour-text); }
}

.hide-chip__button:active,
.country-chip__button:active,
.header-edition__summary:active,
.header-customise__summary:active {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .hide-chip__button:active,
    .country-chip__button:active,
    .header-edition__summary:active,
    .header-customise__summary:active {
        transform: none;
    }
}

/* On a phone «Përshtat» is its icon at the end of the categories' line, its name staying its name;
   its panel opens under that line in the page flow. */
@media (max-width: 63.999rem) {
    .category-navigation-bar:has(> .category-navigation) > .header-customise > .header-customise__summary {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: max(calc(var(--gutter) - var(--space-2)), env(safe-area-inset-right, 0px));
        justify-content: center;
        inline-size: var(--touch-target);
        padding: 0;
    }
    .category-navigation-bar:has(> .category-navigation) > .header-customise :is(.header-customise__closed, .header-customise__open) {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .category-navigation-bar:has(> .header-customise) .category-navigation__summary {
        padding-inline-end: calc(max(var(--gutter), env(safe-area-inset-right, 0px)) + var(--touch-target));
    }
    .header-customise[open] > .header-customise__summary { background: var(--colour-action); color: var(--colour-action-text); }
}

@media (min-width: 64rem) {
    .category-navigation-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1);
        padding-inline: var(--gutter);
    }
    /* «Të gjitha kategoritë», the row's one action, in the action fill. */
    .site-nav__all {
        display: inline-flex;
        align-items: center;
        gap: 0.4375rem;
        flex: none;
        min-block-size: var(--touch-target);
        padding-inline: var(--space-3);
        border: var(--rule-light) solid transparent;
        border-radius: var(--radius);
        background: var(--colour-action);
        color: var(--colour-action-text);
        font-size: 0.875rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }
    .site-nav__all::before {
        content: "";
        flex: none;
        inline-size: 13px;
        block-size: 13px;
        background:
            linear-gradient(currentColor 0 0) 0 0 / 6px 6px no-repeat,
            linear-gradient(currentColor 0 0) 100% 0 / 6px 6px no-repeat,
            linear-gradient(currentColor 0 0) 0 100% / 6px 6px no-repeat,
            linear-gradient(currentColor 0 0) 100% 100% / 6px 6px no-repeat;
    }
    .site-nav__all:focus-visible { outline: var(--rule-heavy) solid var(--colour-focus); outline-offset: 2px; }
    .site-nav__primary { display: flex; flex-wrap: wrap; gap: 0; min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
    .site-nav__primary > li { min-inline-size: 0; }
    .site-nav__primary a {
        display: flex; align-items: center; gap: 0.4375rem; min-block-size: var(--touch-target); max-inline-size: 100%;
        padding-inline: 0.5625rem; border-radius: var(--radius); color: var(--colour-text); font-size: 0.875rem; font-weight: 600;
        text-decoration: none; overflow-wrap: anywhere; transition: background var(--motion-fast) var(--ease);
    }
    /* The current category takes the action fill and is bold, as the masthead's links do. */
    .site-nav__primary a[aria-current] { background: var(--colour-action); color: var(--colour-action-text); font-weight: 700; }
    .site-nav__primary a:focus-visible { outline: var(--rule-heavy) solid var(--colour-focus); outline-offset: -3px; }

    /* «Më shumë»: the categories after the row (seven sections and the reading modes, ADR-0163), in a panel under it. */
    .category-navigation { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; margin: 0; }
    .category-navigation--no-overflow { display: none; }
    .category-navigation__summary { padding-inline: var(--space-2); padding-block: 0; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; }
    .category-navigation__label, .category-navigation__count { display: none; }
    .category-navigation__more-label { display: inline; }
    .category-navigation:not(.category-navigation--current-inside) .category-navigation__current { display: none; }
    .category-navigation--current-inside > summary .category-navigation__current { font-weight: 700; }
    .category-navigation[open] > summary,
    .category-navigation--current-inside > summary { background: var(--colour-action); color: var(--colour-action-text); }
    .site-nav--disclosure .site-nav__list > li:first-child,
    .site-nav--disclosure .site-nav__list > .site-nav__item--inline { display: none; }
    .category-navigation[open] > .site-nav__list,
    .header-customise[open] > .header-customise__panel {
        position: absolute;
        inset-inline: var(--gutter);
        inset-block-start: 100%;
        z-index: 30;
        /* The list's own full width (editorial.css) would override the end inset. */
        inline-size: auto;
        max-inline-size: none;
        margin: 0;
        padding-inline: var(--space-3);
        background: var(--colour-bg);
        border: var(--rule-light) solid var(--colour-hairline);
        border-block-start: var(--rule-light) dashed var(--colour-hairline);
        box-shadow: var(--shadow-2);
    }
    /* A long directory scrolls inside the panel instead of covering the page; the hint and «Rikthe
       të gjitha» stay in view under it. The chips are the scroll region's focusable content, so the
       keyboard reaches and scrolls to every one. */
    .header-customise[open] > .header-customise__panel {
        inset-inline-start: auto;
        inset-inline-end: var(--gutter);
        inset-block-start: calc(100% + 0.25rem);
        inline-size: min(50rem, calc(100vw - 2 * var(--gutter)));
        max-inline-size: calc(100vw - 2 * var(--gutter));
        max-block-size: calc(100dvh - 9.25rem);
        grid-template-rows: minmax(0, 1fr) auto;
        padding: var(--space-3) var(--space-4);
        border: var(--rule-light) solid var(--colour-control);
        border-radius: 0.875rem;
        background: var(--colour-surface);
        box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.24), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    }
    .header-customise__choices { max-block-size: min(32rem, 58dvh); overflow-y: auto; overscroll-behavior: contain; padding-block-end: var(--space-1); }
    /* Like the row: names on one line each, wrapping as whole items rather than inside narrow cells. */
    .category-navigation[open] > .site-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); padding-block: var(--space-2); }
    .site-nav--disclosure .site-nav__list > li { flex: 0 1 auto; }
    .site-nav--disclosure .site-nav__link { inline-size: auto; padding-inline: 0.5625rem; font-size: 0.875rem; font-weight: 600; }
    .header-customise { flex: none; margin-inline-start: auto; }
    .header-customise__summary {
        border: var(--rule-light) solid var(--colour-control);
        border-radius: 999px;
        background: var(--colour-surface);
        white-space: nowrap;
    }
    .header-edition { position: relative; }
    .header-edition[open] > .header-edition__choices { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: 40; min-inline-size: 12rem; max-inline-size: calc(100vw - 2 * var(--gutter)); padding: var(--space-2); background: var(--colour-surface); border: var(--rule-light) solid var(--colour-hairline); border-radius: var(--radius-small); box-shadow: var(--shadow-2); }
}

@media (min-width: 110rem) {
    .header-customise[open] > .header-customise__panel {
        inline-size: min(62rem, calc(100vw - 2 * var(--gutter)));
    }
}

/* Rreze: a link under the pointer takes the action fill, as in the masthead. */
@media (min-width: 64rem) and (hover: hover) {
    .site-nav__all:hover { background: var(--colour-action-hover); text-decoration: none; }
    .site-nav__primary a:hover,
    .category-navigation__summary:hover { background: var(--colour-action); color: var(--colour-action-text); text-decoration: none; }
}

.site-nav__primary a[aria-current]:active {
    background: var(--colour-action-hover);
    color: var(--colour-action-text);
    text-decoration: none;
}

/* Fills vanish where colours are forced: the action, the current category and the tiles keep an outline or ink. */
@media (forced-colors: active) {
    .site-nav__all { border-color: ButtonText; }
    .site-nav__all[aria-current="page"],
    .site-nav__primary a[aria-current],
    .category-navigation--current-inside > summary { outline: 2px solid CanvasText; outline-offset: -2px; }
    .site-nav__tile, .hide-chip__tile { background: CanvasText; }
    .site-nav__all::before { forced-color-adjust: none; color: CanvasText; }
}

/* Intermediate desktop widths need room for reader tools before the dated masthead.
   Keep destinations and native disclosures intact; only the optional dateline yields. */
@media (min-width: 64rem) and (max-width: 79.999rem) {
    .app-header__bar > .app-header__dateline { display: none; }
    .category-navigation-bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: start;
    }
    .category-navigation-bar > .header-customise { margin-inline-start: 0; }
}