/* The catalogue, on a wide screen — the panel that drops from the bar's catalogue button.

   Split out of header-menus.css, which holds the panels that drop from the header. This one
   outgrew sitting beside them: it is a full-width dialog with three columns, a way out and an
   entrance of its own, where the others are short menus. The rules are unchanged by the move.

   Loads after header-menus.css, as it did when it was the end of it. */

/* ===== THE CATALOGUE, ON A WIDE SCREEN =====

   Three columns across the page: the ways in, the subjects, and the children of the chosen one.
   Every subject's children are in the markup; choosing shows one. */

.cil-cat2, .cil-cat2 * { box-sizing: border-box; }
.cil-cat2[hidden] { display: none; }
/* Begins under the bar, not over it: the design leaves the bar lit while the page beneath dims, and
   the bar's own catalogue button stays pressable to close what it opened. */
.cil-cat2 { position: fixed; inset: var(--cil-hdr-height, 64px) 0 0; z-index: 100009; }

/* The page steps back while the catalogue is open, as it does under the narrow drawer. */
.cil-cat2__scrim {
    position: absolute; inset: 0;
    background: var(--cil-black-dark-4);
    opacity: 0;
    transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.cil-cat2.is-open .cil-cat2__scrim { opacity: 0.55; }

/* Hung from the bar's underside, the full width of the page. */
/* The panel comes out from under the bar rather than appearing in front of it: it is revealed
   downward from its own top edge, so the bar looks like the thing it is hanging from. Sliding the
   whole panel would have it cross the page from somewhere it never was. */
.cil-cat2__panel {
    position: absolute; inset-inline: 0; top: 0;
    background: var(--cil-white);
    color: var(--cil-black);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.18);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    /* The panel can never run past the foot of the window. A subject with many children made it
       taller than the viewport, and the page is deliberately held still while the catalogue is open,
       so whatever fell below the fold could not be reached at all — the panel scrolls itself
       instead. dvh, not vh: on a phone the browser's own chrome is part of the viewport. */
    max-height: calc(100dvh - var(--cil-hdr-height, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cil-cat2.is-open .cil-cat2__panel { clip-path: inset(0 0 0 0); }

/* The columns follow a beat behind the edge that reveals them, so the panel reads as opening rather
   than as a block of finished page switching on. */
.cil-cat2__columns > *,
.cil-cat2__footer > * {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
                transform 0.26s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.cil-cat2.is-open .cil-cat2__columns > *,
.cil-cat2.is-open .cil-cat2__footer > * { opacity: 1; transform: translateY(0); }

/* The design is drawn at 1920, where 160 either side and three full columns fit exactly. Narrower
   desktops have less to give, so the margins close first and then the columns share what is left —
   rather than the last column walking off the edge, which is what fixed widths did at 1440. */
/* The way out. Against the panel's own corner rather than in the columns, so it belongs to the
   panel and not to any one of them, and absolute so it takes no room.

   At rest it is only the mark — a filled disc sitting in the corner of a white panel was louder
   than a way out needs to be. The ground arrives with the pointer instead: it grows out from under
   the mark, which is the same moment the mark turns. */
.cil-cat2__close {
    position: absolute; inset-inline-end: 24px; top: 20px;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--cil-black);
    cursor: pointer;
    /* Above the columns, which are painted after it in source order. */
    z-index: 1; isolation: isolate;
    transition: color 0.25s ease;
}
/* The ground, grown rather than switched on. Named through the panel so it outranks
   .cil-hdr button:hover, which unpaints every button in the header. */
.cil-cat2__close::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--cil-black);
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
}
.cil-cat2 .cil-cat2__close:hover::before,
.cil-cat2 .cil-cat2__close:focus-visible::before { transform: scale(1); }
.cil-cat2 .cil-cat2__close:hover,
.cil-cat2 .cil-cat2__close:focus-visible { background: none; color: var(--cil-white); }
.cil-cat2__close svg { display: block; }

/* The mark turns a quarter as the ground arrives under it. */
.cil-cat2__closeMark {
    display: grid; place-items: center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cil-cat2__close:hover .cil-cat2__closeMark,
.cil-cat2__close:focus-visible .cil-cat2__closeMark { transform: rotate(90deg); }

/* Arrives by turning over as the panel settles, once. Reduced motion is simply given the button. */
@media (prefers-reduced-motion: no-preference) {
    /* The button, not the mark: an animation with a fill holds whatever it set, and on the mark it
       held the transform the hover turn needed. The button carries no chrome at rest, so flipping
       it is seen as the mark flipping anyway. */
    .cil-cat2.is-open .cil-cat2__close {
        animation: cil-cat2-close-flip 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: 0.15s;
    }
}
@keyframes cil-cat2-close-flip {
    from { transform: perspective(320px) rotateY(-180deg) scale(0.6); opacity: 0; }
    to   { transform: perspective(320px) rotateY(0deg)    scale(1);   opacity: 1; }
}

.cil-cat2__columns {
    /* Subjects have different numbers of children, so choosing one changes the panel's height.
       The script hands this an explicit height to travel between; without it the panel snaps. */
    transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex; align-items: flex-start;
    padding: 36px clamp(24px, 8.33vw, 160px) 28px;
}
.cil-cat2__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cil-cat2__col--paths,
.cil-cat2__col--subjects { flex: 0 1 380px; }
.cil-cat2__col--children { flex: 0 1 420px; }
/* The rule stands between two columns, with its own room either side. */
.cil-cat2__rule {
    flex: 0 1 81px; min-width: 33px;
    height: 300px;
    background:
        linear-gradient(var(--cil-black-light-3), var(--cil-black-light-3)) center / 1px 100% no-repeat;
}

.cil-cat2__heading {
    margin: 0;
    color: var(--cil-black);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
}

.cil-cat2__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%;
    padding: 9px 12px;
    background: none; border: 0;
    border-radius: 10px;
    color: var(--cil-black);
    font-family: 'Assistant-Regular', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 400; line-height: 1.2;
    text-align: start; text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease;
}
.cil-cat2__mark { display: grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; }
.cil-cat2__mark svg { display: block; }
/* Stated rather than inherited: this sits inside the header, which wears white ink for the bar. */
.cil-cat2 a.cil-cat2__row:hover, .cil-cat2 a.cil-cat2__row:focus-visible,
.cil-cat2 button.cil-cat2__row:hover, .cil-cat2 button.cil-cat2__row:focus-visible {
    background: var(--cil-blue-light-1);
    color: var(--cil-black);
    text-decoration: none;
}
/* The subject whose children are showing. */
.cil-cat2__subject.is-current {
    background: var(--cil-blue-light-1);
    color: var(--cil-blue-dark-1);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-weight: 700;
}
/* The chosen subject, repeated at the head of its children as the pill it wears in the column
   before this one — the same declarations, so the two read as one object and the link is recognised
   rather than deduced. It is a link, not a caption: from inside the children, this is the way to the
   subject's own page, and the caret is the thing that goes there rather than a hint that something
   might. It sits apart from the list under a hairline, so the children read as its contents and not
   as its siblings. */
.cil-cat2__parent {
    /* Hugs its own name rather than filling the column: at full width it was a banner across the
       top, which is a heading's shape, and reading it as a heading is exactly the mistake the pill
       is here to stop. Inline, it is plainly the same object as the row it repeats. */
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    max-width: 100%;
    /* The ground grows, the layout does not. A pill is taller than the headings the other columns
       start with, and left to take that room it pushed the whole list down — the first child sat
       sixteen pixels below the first row beside it and the panel read ragged across. The padding is
       given back as negative margin, so the pill occupies a heading's band and paints larger. */
    margin-block: -8px -4px;
    /* The same inline padding the rows carry, so the name sits on their reading edge. */
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--cil-blue-light-2);
    color: var(--cil-blue-dark-1);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 15px; font-weight: 700; line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.18s ease;
}
/* Named through the panel, as the bar unpaints every link inside the header. */
.cil-cat2 a.cil-cat2__parent:hover,
.cil-cat2 a.cil-cat2__parent:focus-visible {
    background: var(--cil-blue-light-3);
    color: var(--cil-blue-dark-1);
    text-decoration: none;
}
/* The caret leads the name and leans back toward the column the subject came from, so the pill
   points at its own origin rather than sitting on the row like an ornament. */
.cil-cat2__parent .cil-cat2__mark { color: var(--cil-blue-dark-1); }

/* Reading one level at a time: while the pointer is among the children, the two columns behind step
   back, so the panel reads as the path taken rather than three lists side by side. The subject those
   children belong to stays where it is — it is the one thing back there still being pointed at. */
.cil-cat2__columns:has(.cil-cat2__col--children:hover) .cil-cat2__col--paths,
.cil-cat2__columns:has(.cil-cat2__col--children:hover) .cil-cat2__col--subjects,
.cil-cat2__columns:has(.cil-cat2__col--children:hover) .cil-cat2__rule { opacity: 0.4; }
.cil-cat2__columns:has(.cil-cat2__col--children:hover) .cil-cat2__subject.is-current { opacity: 1; }
/* Pointing at the pill answers from the other end: the row it repeats lights up, so the two are
   shown to be the same subject rather than asserted to be. */
.cil-cat2__columns:has(.cil-cat2__parent:hover) .cil-cat2__subject.is-current {
    background: var(--cil-blue-light-3);
}
.cil-cat2__col--paths, .cil-cat2__col--subjects, .cil-cat2__rule,
.cil-cat2__subject.is-current { transition: opacity 0.25s ease, background-color 0.18s ease; }

.cil-cat2__childSet { display: flex; flex-direction: column; gap: 14px; }
.cil-cat2__childSet[hidden] { display: none; }

.cil-cat2__footer {
    display: flex; align-items: center; justify-content: flex-start; gap: 16px;
    padding: 20px clamp(24px, 8.33vw, 160px) 28px;
    border-top: 1px solid var(--cil-black-light-2);
}
.cil-cat2__hint { margin: 0; color: var(--cil-black-regular-5); font-size: 14px; line-height: 1.2; }
.cil-cat2__all {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 26px;
    border-radius: 24px;
    /* The header screen's choice for the pill's ground; blue while nothing has been chosen, which
       is what the stylesheet used to hardcode. The line around it is that same ground taken towards
       black rather than a fixed dark blue, which only suited a blue pill. */
    background: var(--cil-cat2-base, var(--cil-blue));
    border: 1px solid color-mix(in srgb, var(--cil-cat2-base, var(--cil-blue)) 62%, var(--cil-black));
    color: var(--cil-cat2-ink, var(--cil-black));
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 700; line-height: 1.2;
    text-decoration: none;
}
/* The risers fill the middle, and they are circles: they never reach the pill's rounded ends, and
   the line around it was left painted in the colour underneath. The ground and the line follow them
   to the fill so nothing of the base is left showing — delayed, so the risers do the work and the
   ground only catches up behind them. Leaving is undelayed, so the pill comes back at once. */
.cil-cat2__all { transition: background-color 0.2s ease, border-color 0.2s ease; }
.cil-cat2 a.cil-cat2__all:hover,
.cil-cat2 a.cil-cat2__all:focus-visible {
    color: var(--cil-cat2-ink, var(--cil-black));
    background: var(--cil-cat2-fill, var(--cil-blue));
    border-color: color-mix(in srgb, var(--cil-cat2-fill, var(--cil-blue)) 62%, var(--cil-black));
    transition: background-color 0.25s ease 0.5s, border-color 0.25s ease 0.5s;
}

/* The fill, ends first and middle last, as on the catalogue button. */
.cil-cat2__all { position: relative; overflow: hidden; isolation: isolate; }
.cil-cat2__allLabel { position: relative; z-index: 1; }
.cil-cat2__all > span[aria-hidden] {
    position: absolute; bottom: -50%;
    width: 25%; height: 100%;
    background: var(--cil-cat2-fill, var(--cil-blue));
    border-radius: 50%;
    transform: translateY(150%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1; pointer-events: none;
}
/* The same attribute on every one, or the shorthand above outranks the delays and they arrive
   together — which is no direction at all. */
.cil-cat2__all > span[aria-hidden]:nth-of-type(2) { left:  0%; transition-delay: 0s; }
.cil-cat2__all > span[aria-hidden]:nth-of-type(3) { left: 25%; transition-delay: 0.20s; }
.cil-cat2__all > span[aria-hidden]:nth-of-type(4) { left: 50%; transition-delay: 0.20s; }
.cil-cat2__all > span[aria-hidden]:nth-of-type(5) { left: 75%; transition-delay: 0s; }
.cil-cat2__all:hover > span[aria-hidden],
.cil-cat2__all:focus-visible > span[aria-hidden] { transform: translateY(-50%) scale(1.6); }
.cil-cat2 :focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; }

/* The button says the panel is open by wearing the panel's own colour. */
/* Also named with its element, and after the hover rule, so the open colour holds while the
   pointer is on it — an open button that goes white under the cursor has stopped saying it is open. */
.cil-hdr button.cil-hdr__catalogue[aria-expanded="true"],
.cil-hdr button.cil-hdr__catalogue[aria-expanded="true"]:hover {
    background: var(--cil-blue);
    border-color: var(--cil-blue-dark-1);
}

@media (prefers-reduced-motion: reduce) {
    .cil-cat2__scrim, .cil-cat2__panel, .cil-cat2__columns,
    .cil-cat2__all > span[aria-hidden],
    .cil-cat2__columns > *, .cil-cat2__footer > * { transition: none; }
}