/* The catalogue, inside the narrow drawer.

   Split from mobile-header.css, which dresses the bar, the sheet and the drawer itself. This is the
   panel that opens inside that drawer: two levels, one on screen at a time, both in the markup and
   swapped by hiding, so moving between them costs nothing and the second level is not a fetch away.

   The rules that stand the drawer's own list aside while this panel is open live here too — they
   describe what the catalogue does to the drawer, not what the drawer is. */

.cil-cat, .cil-cat * { box-sizing: border-box; }
.cil-cat[hidden] { display: none; }
.cil-cat { display: flex; flex-direction: column; }
.cil-cat__level[hidden] { display: none; }
.cil-cat__level { display: flex; flex-direction: column; }

/* Title at the reading edge, the way back on the far side of it. */
.cil-cat__head {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-width: 0; height: 52px;
    padding: 0 18px;
    background: none; border: 0;
    cursor: pointer;
}
/* A panel head says where you are; it does not announce itself as loudly as a section heading.
   One step down from the bold — Medium is the site's step between regular and bold — and the same
   on both levels, the catalogue's own name and a subject's alike. */
.cil-cat__title {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--cil-black-dark-4);
    font-family: 'Assistant-Medium', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 600; line-height: 1.2;
}
.cil-cat__backMark, .cil-cat__mark {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 16px; height: 16px;
    color: var(--cil-black-dark-4);
}
/* Optical, not geometric: the two boxes already share a centre line. Hebrew has no ascenders, so
   its letters sit low in the em box while the caret sits in the middle of its own — which reads as
   the mark floating above the word. A pixel down puts them on the same line to the eye. */
.cil-cat__backMark { transform: translateY(1px); }


.cil-cat__backMark svg, .cil-cat__mark svg { display: block; }

/* The rule belongs to the group below it, and the space above the rule is what separates the two
   parts — the design's own 37 is the label's line, not the distance between sections. */
.cil-cat__group {
    display: flex; align-items: center;
    height: 37px; margin: 14px 0 0;
    padding: 0 18px;
    border-top: 1px solid var(--cil-black-light-3);
    color: var(--cil-black-regular-7);
    font-family: 'Assistant-Medium', Assistant, Arial, sans-serif;
    font-size: 14px; font-weight: 600; line-height: 1.2;
}

.cil-cat__row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; height: 44px;
    padding: 0 18px;
    background: none; border: 0;
    color: var(--cil-black-dark-4);
    /* Named, because half these rows are buttons and the global button rule dresses them in the
       bold face — which with synthesis refused would still draw them bold, not merely heavy. */
    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.2s ease;
}
.cil-cat__row > span:first-child { flex: 1 1 auto; min-width: 0; }
/* Restated, not inherited: the drawer sits inside the header, which is dressed in white ink. */
.cil-cat a.cil-cat__row:hover, .cil-cat a.cil-cat__row:focus-visible,
.cil-cat button.cil-cat__row:hover, .cil-cat button.cil-cat__row:focus-visible {
    background: var(--cil-blue-light-1);
    color: var(--cil-black-dark-4);
    text-decoration: none;
}

.cil-cat__footer {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin-top: auto;
    padding: 26px 18px 24px;
    border-top: 1px solid var(--cil-black-light-3);
}
.cil-cat__all {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 44px;
    border-radius: 999px;
    /* The header screen's choice for the catalogue's pill. Black while nothing has been chosen,
       which is what this width has always worn. */
    background: var(--cil-cat-fill, var(--cil-black));
    color: var(--cil-cat-ink, var(--cil-white));
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 700; line-height: 1.2;
    text-decoration: none;
}
.cil-cat a.cil-cat__all:hover,
.cil-cat a.cil-cat__all:focus-visible { color: var(--cil-cat-ink, var(--cil-white)); }
.cil-cat__hint {
    margin: 0;
    color: var(--cil-black-regular-7);
    font-size: 14px; line-height: 1.2; text-align: center;
}
.cil-cat :focus-visible { outline: 2px solid var(--cil-blue); outline-offset: -3px; }

/* While the catalogue is open the drawer's own list stands aside. */
.cil-drawer.is-catalogue .cil-drawer__identity,
.cil-drawer.is-catalogue .cil-drawer__auth,
.cil-drawer.is-catalogue .cil-drawer__group,
.cil-drawer.is-catalogue .cil-drawer__row,
.cil-drawer.is-catalogue .cil-drawer__language { display: none; }