/* List pages (BR Stage 1, PR 3): filter panel, results bar, chips, Show more, states. Needs tokens and components. */
.ci-list { padding: var(--ci-s6) 0 var(--ci-s8); background: var(--ci-paper); color: var(--ci-ink); font: var(--ci-body); }
.ci-list h1 { margin: 0 0 var(--ci-s3); font: var(--ci-h1); }
.ci-list__intro { max-width: 760px; margin: 0 0 var(--ci-s4); font: var(--ci-body-l); color: var(--ci-muted); }
.ci-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s2); margin-bottom: var(--ci-s6); font: var(--ci-small); color: var(--ci-muted); }
.ci-presets .ci-pill { text-decoration: none; }
.ci-presets .ci-pill:hover { border-color: var(--ci-forest); color: var(--ci-forest); }

.ci-list__layout { display: grid; gap: var(--ci-s6); align-items: start; }
@media (min-width: 1024px) {
    .ci-list__layout { grid-template-columns: 330px minmax(0, 1fr); }
}

/* Filter panel: a sidebar on a desktop, a full-screen sheet on a phone */
.ci-filters form { display: flex; flex-direction: column; gap: var(--ci-s4); }
.ci-filters__top { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-s3); }
.ci-filters__top h2 { margin: 0; font: 600 18px/1.3 var(--ci-sans); }
.ci-filters__top .ci-link { margin-left: auto; font-size: 14px; }
.ci-filters__close { display: none; }
.ci-quick, .ci-group {
    padding: var(--ci-s4);
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-r-card);
    background: var(--ci-surface);
}
.ci-quick { display: flex; flex-direction: column; gap: var(--ci-s4); }
.ci-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    font: 600 15px/1.3 var(--ci-sans);
    list-style: none;
    cursor: pointer;
}
.ci-group summary::-webkit-details-marker { display: none; }
.ci-group summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--ci-muted); }
.ci-group[open] summary::after { content: "−"; }
.ci-group[open] > :not(summary) { margin-top: var(--ci-s3); }
.ci-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ci-fieldset legend { margin-bottom: var(--ci-s2); padding: 0; font: 600 14px/1.35 var(--ci-sans); }
.ci-hint { margin: var(--ci-s2) 0 0; font: var(--ci-small); font-size: 13px; color: var(--ci-muted); }
.ci-options { display: flex; flex-wrap: wrap; gap: var(--ci-s2); }
.ci-option { position: relative; margin: 0; cursor: pointer; }
.ci-option input, .ci-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ci-option span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ci-field-border);
    border-radius: var(--ci-r-pill);
    font: 500 14px/1.2 var(--ci-sans);
}
.ci-option input:checked + span { background: var(--ci-deep-forest); border-color: var(--ci-deep-forest); color: var(--ci-paper); }
.ci-option input:focus-visible + span, .ci-segment input:focus-visible + span { box-shadow: var(--ci-focus-ring); }
.ci-option.is-empty { cursor: not-allowed; }
.ci-option.is-empty span { border-style: dashed; color: var(--ci-disabled-text); }
.ci-segment { display: flex; padding: 3px; border-radius: var(--ci-r-pill); background: var(--ci-track); }
.ci-segment label { flex: 1; position: relative; margin: 0; cursor: pointer; }
.ci-segment span { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 10px; border-radius: var(--ci-r-pill); font: 500 13px/1.2 var(--ci-sans); text-align: center; }
.ci-segment input:checked + span { background: var(--ci-surface); box-shadow: 0 1px 3px rgba(18, 51, 38, .15); font-weight: 600; }
.ci-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-s3); min-height: var(--ci-tap); margin: 0; font: 500 14px/1.35 var(--ci-sans); cursor: pointer; }
.ci-select-label { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--ci-s3); font: 600 14px/1.3 var(--ci-sans); }
.ci-select-label .ci-field, .ci-sort .ci-field { min-height: var(--ci-tap); font-size: 14px; }
.ci-filters__apply { position: sticky; bottom: 0; padding: var(--ci-s3) 0; background: var(--ci-paper); }
.ci-filters__apply .ci-btn { width: 100%; }
.ci-js .ci-filters__apply { display: none; }

@media (max-width: 1023px) {
    .ci-filters { display: none; }
    .ci-filters.is-open {
        position: fixed;
        inset: 0;
        z-index: 1070;
        display: block;
        padding: var(--ci-s4) var(--ci-gutter) 0;
        overflow-y: auto;
        background: var(--ci-paper);
    }
    .ci-filters.is-open .ci-filters__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--ci-tap);
        height: var(--ci-tap);
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--ci-ink);
        cursor: pointer;
    }
    .ci-js .ci-filters.is-open .ci-filters__apply { display: block; }
}

/* Results */
.ci-results { min-width: 0; }
.ci-results__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s3); margin-bottom: var(--ci-s4); }
.ci-results__count { margin: 0 auto 0 0; font: 600 18px/1.3 var(--ci-sans); }
@media (min-width: 1024px) { .ci-results .ci-results__filters { display: none; } }
.ci-sort { display: flex; align-items: center; gap: var(--ci-s2); margin: 0; font: var(--ci-small); color: var(--ci-muted); }
.ci-sort .ci-field { width: auto; padding-right: var(--ci-s6); }
.ci-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s2); margin: 0 0 var(--ci-s5); padding: 0; list-style: none; }
.ci-chips .ci-chip { text-decoration: none; }
.ci-chips .ci-chip:hover { background: var(--ci-mint); color: var(--ci-deep-forest); }
.ci-chips .ci-link { font-size: 14px; }
.ci-more { display: flex; justify-content: center; margin-top: var(--ci-s6); }
.ci-results[aria-busy="true"] [data-ci-cards] { opacity: .45; pointer-events: none; }

/* States: empty and error (ListStates) */
.ci-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ci-s3);
    padding: var(--ci-s6);
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-r-card);
    background: var(--ci-surface);
}
.ci-state h2 { margin: 0; font: var(--ci-h3); font-size: 22px; }
.ci-state p { margin: 0; color: var(--ci-muted); }
.ci-state__suggestions { display: flex; flex-wrap: wrap; gap: var(--ci-s2); margin: 0; padding: 0; list-style: none; }
.ci-state__suggestions .ci-pill { text-decoration: none; }
.ci-state--error { border-color: var(--ci-error-tint); }
.ci-state[hidden] { display: none; }

/* Loading: skeleton cards while the next cards arrive */
.ci-skeleton { min-height: 280px; border-radius: var(--ci-r-card); background: linear-gradient(90deg, var(--ci-skeleton) 25%, var(--ci-surface) 50%, var(--ci-skeleton) 75%); background-size: 200% 100%; animation: ci-shimmer 1.2s infinite; }
@keyframes ci-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ci-skeleton { animation: none; } }

/* Family tabs on the project list (FiltV2Projects): the family comes first */
.ci-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ci-s2); margin: var(--ci-s4) 0 var(--ci-s6); border-bottom: 1px solid var(--ci-line); }
.ci-tab { display: flex; flex-direction: column; gap: 2px; padding: var(--ci-s3) var(--ci-s2) var(--ci-s3); border-bottom: 3px solid transparent; color: var(--ci-ink); text-decoration: none; }
.ci-tab:hover { color: var(--ci-forest); }
.ci-tab[aria-current="page"] { border-bottom-color: var(--ci-forest); }
.ci-tab__name { font: 600 18px/1.3 var(--ci-sans); }
.ci-tab__count { margin-left: 4px; font-weight: 500; color: var(--ci-muted); }
.ci-tab__note { font: var(--ci-small); color: var(--ci-muted); }
@media (min-width: 1024px) { .ci-tabs { max-width: 760px; } }
.ci-risk-line { margin: var(--ci-s5) 0 0; padding: var(--ci-s3) var(--ci-s4); border-left: 3px solid var(--ci-warn-text); border-radius: var(--ci-r-small); background: var(--ci-warn-tint); font: var(--ci-small); color: var(--ci-ink); }

/* Bonuses, news and articles: filter rows above the results (Step 2 boards) */
.ci-list__layout--rows { grid-template-columns: minmax(0, 1fr) !important; gap: var(--ci-s5); }
.ci-rows { display: flex; flex-direction: column; gap: var(--ci-s3); padding: var(--ci-s4); border: 1px solid var(--ci-line); border-radius: var(--ci-r-card); background: var(--ci-surface); }
.ci-row { display: grid; gap: var(--ci-s2); align-items: start; }
.ci-row__label { padding-top: 8px; font: 600 14px/1.3 var(--ci-sans); }
.ci-row__options { display: flex; gap: var(--ci-s2); margin: 0; padding: 0 0 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.ci-row__options .ci-pill { white-space: nowrap; text-decoration: none; color: var(--ci-ink); }
.ci-row__options .ci-pill:hover { border-color: var(--ci-forest); color: var(--ci-forest); }
.ci-row__options .ci-pill.is-on { background: var(--ci-deep-forest); border-color: var(--ci-deep-forest); color: var(--ci-paper); }
@media (min-width: 600px) {
    .ci-row { grid-template-columns: 150px minmax(0, 1fr); }
    .ci-row__options { flex-wrap: wrap; overflow: visible; }
}
/* News: one column on phones and tablets, two on wide screens so the page is not half empty (3 Nov 2026) */
.ci-grid--news { grid-template-columns: minmax(0, 1fr) !important; align-items: start; }
@media (min-width: 1024px) { .ci-grid--news { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Two doors and "Help me find" (FlowD, ProjD) */
.ci-doors { display: grid; gap: var(--ci-s3); margin: 0 0 var(--ci-s6); }
@media (min-width: 600px) { .ci-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ci-door { display: flex; flex-direction: column; gap: var(--ci-s1); padding: var(--ci-s5); border: 1px solid var(--ci-line); border-radius: var(--ci-r-card); background: var(--ci-surface); color: var(--ci-ink); text-decoration: none; }
.ci-door strong { font: var(--ci-h3); }
.ci-door span { font: var(--ci-small); color: var(--ci-muted); }
.ci-door:hover { border-color: var(--ci-forest); color: var(--ci-ink); box-shadow: var(--ci-shadow-hover); }
.ci-door--guide { border-color: var(--ci-forest); background: var(--ci-moss); }
.ci-switch-doors { display: inline-flex; margin: 0 0 var(--ci-s5); padding: 3px; border-radius: var(--ci-r-pill); background: var(--ci-track); }
.ci-switch-doors a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--ci-s4); border-radius: var(--ci-r-pill); color: var(--ci-ink); font: 500 14px/1.2 var(--ci-sans); text-decoration: none; }
.ci-switch-doors a[aria-current="true"] { background: var(--ci-deep-forest); color: var(--ci-paper); font-weight: 600; }
.ci-list__layout--guided { grid-template-columns: minmax(0, 1fr) !important; }
.ci-list__layout--guided .ci-filters, .ci-list__layout--guided .ci-results__filters { display: none !important; }
.ci-guide { margin: 0 0 var(--ci-s6); padding: var(--ci-s5); border: 1px solid var(--ci-forest); border-radius: var(--ci-r-panel); background: var(--ci-surface); }
.ci-guide__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s3); margin-bottom: var(--ci-s3); }
.ci-guide__label { margin-right: auto; font: var(--ci-overline); letter-spacing: .08em; text-transform: uppercase; color: var(--ci-muted); }
.ci-guide__top .ci-link { font-size: 14px; }
.ci-guide__leave { color: var(--ci-ink); font: 500 14px/1 var(--ci-sans); text-decoration: none; }
.ci-guide h2 { margin: 0 0 var(--ci-s2); font: var(--ci-h2); }
.ci-guide__options { display: grid; gap: var(--ci-s2); margin-top: var(--ci-s4); }
@media (min-width: 600px) { .ci-guide__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ci-guide__options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ci-guide__option { position: relative; margin: 0; cursor: pointer; }
.ci-guide__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ci-guide__option span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--ci-s3) var(--ci-s4); border: 1px solid var(--ci-field-border); border-radius: var(--ci-r-field); background: var(--ci-white); }
.ci-guide__option strong { font: 600 15px/1.3 var(--ci-sans); }
.ci-guide__option small { font: var(--ci-small); color: var(--ci-muted); }
.ci-guide__option input:checked + span { border: 2px solid var(--ci-deep-forest); background: var(--ci-moss); }
.ci-guide__option input:focus-visible + span { box-shadow: var(--ci-focus-ring); }
.ci-guide__risk { margin: var(--ci-s4) 0 0; padding: var(--ci-s2) var(--ci-s3); border-left: 3px solid var(--ci-warn-text); background: var(--ci-warn-tint); font: var(--ci-small); }
.ci-guide__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ci-s3); margin-top: var(--ci-s4); }
.ci-guide__count { margin-right: auto; font: 600 15px/1.3 var(--ci-sans); }
.ci-guide__result h2 { font: var(--ci-h2); }
.ci-guide__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s4); margin: var(--ci-s3) 0 0; }