/* =========================================================================
   RESOURCES LIBRARY (render/resources-library.ts, 2026-10-08).
   Shelves per stage on the shared shelf (stage-page.css, shelf.js) with the
   shared resource card (resource-gallery.css); the small stages share one row
   of the same four-column grid; Standards as a reading table; the full list
   as a filterable grid. House tokens only. Prefix rl-.
   ========================================================================= */

/* ---- the card, in a column: picture, name, maker, what it's for ---- */
.rl-list .rg-item { position: relative; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-content: start; }
.rl-list .rg-item[hidden] { display: none; }
.rl-list .rg-item__what { max-width: 40ch; }
/* names are the links: give each line a 24px target (WCAG 2.5.8) without moving the text */
.rl-list .rg-item__name a, .rl-std__name a { padding-block: .125rem; }

/* A provider mark sits whole on its plate. The shared rule sizes it by height: 100%, which a single-column card
   can't resolve, so the square mark overflowed and was cropped. Scoped fix; reported to the gallery's lane. */

/* ---- shelves: the shared shelf sizes itself (stage-page.css: four across where it has room) ---- */
/* Scroll targets for the "On this page" strip, which goes sticky on desktop (elements-areas.css .ce-jump,
   reused here: Savva's review, 2026-11-02). The desktop bump (clearing the sticky strip) lives with that rule. */
.rl-shelf, .rl-few__stage, .rl-stds, .rl-lib { scroll-margin-top: var(--s5); }
/* PHONES AND TABLETS (QA, 2026-11-04): the page is about 20,000px tall at 375 and the strip used to stay at the top,
   three wrapped rows deep. Below 60rem it is one row that scrolls sideways and stays pinned under the top bar
   (3.5rem + its 1px rule, rail.css), so a reader in the middle of Design can jump to Test without scrolling back.
   The sections then land below both bars. Desktop keeps the rule in elements-areas.css. */
@media (max-width: 60rem) {
  .rl-jump { position: sticky; top: calc(3.5rem + 1px); z-index: 3; background: var(--paper); margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
  .rl-jump ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s5); }
  .rl-jump ol::-webkit-scrollbar { display: none; }
  .rl-jump li { flex: none; }
  .rl-shelf, .rl-few__stage, .rl-stds, .rl-lib { scroll-margin-top: calc(3.5rem + 1px + 2.25rem + var(--s4)); }
}
.rl-shelf { margin-bottom: var(--s7); }
.rl-shelf .stg-shelf__list { position: relative; } /* holds the cards' visually hidden text inside the scroller */
.rl-shelf .stg-shelf__head p { max-width: 52ch; }
.rl-all, .rl-shelf .stg-shelf__head a.rl-all { font: 600 var(--t-sm)/1 var(--ui); color: var(--ink); text-underline-offset: .25em; padding-block: var(--s2); white-space: nowrap; }
.rl-all::after { content: " →"; color: var(--brand); }
.rl-all:hover { color: var(--brand); }
.rl-all:focus-visible, .rl-few__note a:focus-visible, .rl-topics a:focus-visible, .rl-stds__nav a:focus-visible, .rl-std__name a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- the small stages: one row of the shelf's grid, each stage over its own cards ---- */
.rl-few { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--s4) var(--s4); margin: 0 0 var(--s7); }
.rl-few__stage { grid-column: span var(--n, 1); grid-row: span 2; display: grid; grid-template-rows: subgrid; gap: var(--s4); }
.rl-few__head .lc-h2 { margin: 0 0 var(--s2); }
.rl-few__head p { margin: 0; max-width: 40ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rl-few__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: var(--s4); }
.rl-few__note { grid-row: 2; grid-column: var(--from, 4) / -1; align-self: start; margin: 0; padding-top: var(--s3); border-top: 1px solid var(--rule); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rl-few__note a { color: var(--ink); text-underline-offset: .2em; }

/* ---- Standards: a reading table, grouped by what each one governs ---- */
.rl-stds { margin: var(--s9) 0 var(--s8); }
.rl-stds__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s5); margin-bottom: var(--s4); }
.rl-stds__head .lc-h2 { margin: 0; }
.rl-stds__head p { flex: 1 1 24rem; margin: 0; max-width: 60ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rl-stds__nav { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: var(--s2); }
.rl-stds__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin: 0; padding: 0; list-style: none; }
.rl-stds__nav a { display: inline-block; padding-block: var(--s2); font: var(--t-sm)/1.2 var(--ui); color: var(--ink-2); text-underline-offset: .25em; }
.rl-stds__nav a:hover { color: var(--ink); }
.rl-stds__nav a span { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.rl-stds__q { flex: 0 1 20rem; }
.rl-stds__g { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s4) var(--s7); padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.rl-stds__g[hidden] { display: none; }
.rl-stds__gh { align-self: start; position: sticky; top: var(--s5); }
.rl-stds__gh h3 { margin: 0 0 var(--s3); font: 700 var(--t-md)/1.15 var(--display); letter-spacing: -.015em; color: var(--ink); }
.rl-stds__gh p { margin: 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rl-stds__g > ul { margin: 0; padding: 0; list-style: none; }
.rl-std { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s5); padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--rule); }
.rl-std:first-child { padding-top: 0; }
.rl-std:last-child { border-bottom: 0; }
.rl-std[hidden] { display: none; }
.rl-std > p { margin: 0; }
.rl-std__name { grid-column: 1; font: 650 var(--t-base)/1.3 var(--ui); color: var(--ink); }
.rl-std__name a { color: var(--ink); text-decoration-color: var(--rule-firm); text-underline-offset: .2em; }
.rl-std__name a::after { content: " ↗"; color: var(--ink-3); font-weight: 400; }
.rl-std__name a:hover { color: var(--brand); text-decoration-color: currentColor; }
.rl-std__what { grid-column: 1; max-width: 64ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rl-std__meta { grid-column: 2; grid-row: 1 / span 2; justify-self: end; max-width: 14rem; text-align: right; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.rl-std__kind { display: block; color: var(--ink-2); }
.rl-stds__g--ours .rl-std__name { font-weight: 500; color: var(--ink-2); }

/* ---- the full list ---- */
.rl-lib { margin: var(--s9) 0 var(--s7); }
.rl-lib__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s5); margin-bottom: var(--s5); }
.rl-lib__head .lc-h2 { margin: 0; }
.rl-lib__head p { flex: 1 1 24rem; margin: 0; max-width: 58ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rl-find { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3) var(--s4); margin: 0 0 var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rl-filter { display: flex; flex-direction: column; gap: var(--s1); flex: 1 1 10rem; min-width: 0; }
.rl-filter--q { flex: 2 1 16rem; }
.rl-filter > span { font: var(--t-xs)/1.2 var(--ui); color: var(--ink-2); }
.rl-filter input, .rl-filter select { box-sizing: border-box; width: 100%; min-height: 2.75rem; padding: 0 var(--s3); border: 1px solid var(--rule-firm); border-radius: 0; background: var(--paper); color: var(--ink); font: var(--t-sm)/1.2 var(--ui); }
.rl-filter input::placeholder { color: var(--ink-3); }
.rl-filter input:focus-visible, .rl-filter select:focus-visible, .rl-reset:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rl-reset { min-height: 2.75rem; padding: 0 var(--s4); border: 1px solid var(--rule-firm); background: transparent; color: var(--ink); font: 600 var(--t-sm)/1 var(--ui); cursor: pointer; }
.rl-reset:hover { border-color: var(--ink-2); }
.rl-count { margin: 0 0 var(--s5); font: var(--t-xs)/1.2 var(--mono); color: var(--ink-3); }
.rl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
/* with the script, the list opens at three rows; any filter, search or "View all" shows everything that matches */
.rl-grid.is-collapsed > li:nth-child(n+13) { display: none; }
.rl-more { margin: var(--s6) 0 0; }
.rl-empty { margin: var(--s5) 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rl-topics { margin: var(--s7) 0 0; padding-top: var(--s4); border-top: 1px solid var(--rule); max-width: 80ch; font: var(--t-xs)/var(--lh-meta) var(--ui); color: var(--ink-3); }
.rl-topics a { color: var(--ink-2); }
.rl-fine { max-width: 80ch; }

/* ---- tablet ---- */
@media (max-width: 64rem) {
  .rl-few { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rl-few__note { grid-row: 3; grid-column: 1 / -1; max-width: 60ch; }
  .rl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rl-stds__g { grid-template-columns: 1fr; gap: var(--s2); }
  .rl-stds__gh { position: static; }
  .rl-stds__g > ul { margin-top: var(--s3); }
}
@media (max-width: 48rem) { .rl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- phone: the full list as rows ---- */
@media (max-width: 40rem) {
  .rl-few { display: block; }
  .rl-few__stage { display: block; margin-bottom: var(--s6); }
  .rl-few__head { margin-bottom: var(--s4); }
  .rl-few__list { grid-template-columns: minmax(0, 1fr); max-width: 82%; }
  .rl-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .rl-grid .rg-item { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--s3); }
  .rl-std { grid-template-columns: minmax(0, 1fr); }
  .rl-std__meta { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; max-width: none; }
  .rl-std__kind { display: inline; }
  .rl-reset { flex: 1 1 100%; }
}