/* Research sections: the menu panel content in the shared header and the sections hub page.
   Loaded after research.css (uses its tokens --ink, --muted, --line, --surface, --raised, --mint) and
   deliberately namespaced .site-research* / .rs-* so it never collides with existing rules. */

/* ---------- Resources menu panel (shared header; placement and size in site-header.css) ---------- */
.site-research-label {
    margin: 0;
    padding: 6px 16px 8px;
    font: 600 12px var(--mono);
    letter-spacing: .02em;
    color: var(--dim)
}

.site-research-panel a {
    padding: 11px 16px;
    min-height: 44px;
    font-size: 14px
}

.site-research-panel a[aria-current=page] {
    color: var(--ink);
    font-weight: 600;
    background: var(--raised);
    box-shadow: inset 3px 0 0 var(--mint)
}

.site-research-library {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line)
}

/* ---------- Sections hub page (/research/sections) ---------- */
.rs-hub {
    margin: 18px auto 40px
}

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

.rs-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 28px;
    align-items: start;
    padding: 16px 18px;
    background: var(--rl-surface, #ffffff);
    border: 1px solid var(--rl-line, #d5def0);
    border-left: 4px solid var(--rl-blue, #245bdb);
    border-radius: 4px
}

.rs-item h2 {
    margin: 0;
    font: 600 20px/1.3 var(--rl-cond, 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif)
}

.rs-item h2 a {
    color: var(--rl-ink, #172d49);
    text-decoration: none
}

.rs-item h2 a:hover {
    color: var(--rl-blue-dark, #1743ae);
    text-decoration: underline;
    text-underline-offset: 3px
}

.rs-item p {
    margin: 4px 0 0;
    max-width: 78ch;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--rl-muted, #4c5e73)
}

.rs-includes {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    font-size: 13px;
    color: var(--rl-muted, #4c5e73)
}

.rs-includes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.rs-includes a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--rl-line, #d5def0);
    border-radius: 3px;
    background: var(--rl-bg, #f5f7fc);
    color: var(--rl-ink, #172d49);
    text-decoration: none
}

.rs-includes a:hover {
    border-color: var(--rl-blue, #245bdb);
    color: var(--rl-blue-dark, #1743ae)
}

.rs-includes a span {
    font: 500 12px var(--rl-mono, ui-monospace, Menlo, monospace);
    color: var(--rl-muted, #4c5e73)
}

.rs-count {
    display: grid;
    justify-items: end;
    padding: 6px 0;
    text-decoration: none;
    color: var(--rl-muted, #4c5e73);
    font-size: 13px;
    text-align: right
}

.rs-count strong {
    font: 600 28px/1.1 var(--rl-cond, 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif);
    color: var(--rl-ink, #172d49)
}

.rs-count:hover strong {
    color: var(--rl-blue-dark, #1743ae)
}

.rs-hub a:focus-visible {
    outline: 2px solid var(--rl-blue, #245bdb);
    outline-offset: 2px
}

@media (max-width: 720px) {
    .rs-item {
        grid-template-columns: minmax(0, 1fr)
    }

    .rs-count {
        justify-items: start;
        text-align: left;
        grid-auto-flow: column;
        gap: 8px;
        align-items: baseline;
        justify-content: start;
        padding: 0
    }
}

/* Section names in the breadcrumb are text, not codes. */
.rl-crumbs .rs-crumb-current {
    font-family: inherit
}

/* ---------- Section links on the homepage (under the latest-research heading) ---------- */
.hp-sections {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--muted)
}

.hp-sections span {
    font-weight: 600;
    color: var(--ink)
}

.hp-sections ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px
}

.hp-sections a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none
}

.hp-sections a:hover {
    border-color: var(--mint);
    color: var(--mint-dark)
}

.hp-sections a:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 2px
}