/* PDA Compass — library page (A02; fewer-clicks rework X3, 2026-10-21). Page-specific layout only; components come
   from css/site.css and the kit. The kit's stylesheets read generic tokens (--bg-surface, --text-primary,
   --accent-primary …) before their own fallbacks, so they are mapped here onto the site's tokens from BRIEF §6. */
:root {
  --bg-surface: var(--surface);
  --bg-subtle: var(--surface-2);
  --bg-elevated: var(--surface);
  --text-primary: var(--ink);
  --text-muted: var(--ink-muted);
  --text-inverted: var(--accent-ink);
  --border-subtle: var(--line);
  --border-strong: var(--line);
  --accent-primary: var(--accent);
  --accent-primary-soft: var(--accent-soft);
  --focus-ring: var(--focus);
  --warning: var(--caution);
  --error: var(--danger);
  --link: var(--accent);
}

/* A shorter hero on this page, so the chips and the first results are closer to the top. */
.lib-hero { padding-block: var(--space-5, 24px) var(--space-3, 12px); }
.lib-hero .lede { margin-bottom: 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }

.lib { display: grid; gap: var(--space-4, 16px); padding-block: var(--space-4, 16px) var(--space-7, 48px); min-width: 0; }

/* ---------- the main choices: one tap each ---------- */
.lib-quick { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 100%; gap: var(--space-3, 12px); padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px solid var(--line, #cfd4dc); border-radius: var(--radius-m, 12px); background: var(--surface-2, #f6f7f9); min-width: 0; }
.lib-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 6px 12px; align-items: start; min-width: 0; max-width: 100%; }
.lib-row__title { display: flex; align-items: center; gap: 6px; margin: 0; min-height: 44px; font-weight: 600; }
.lib-row__short { display: none; }
.lib-row__strip { min-width: 0; max-width: 100%; }
.lib-row__chips { display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.lib-row--age .lib-age__exact { grid-column: 2; min-width: 0; display: grid; gap: 6px; }

/* position: relative — the chip's visually-hidden count span is absolutely positioned; without a positioned ancestor
   inside the sideways-scrolling strip it lands on <main> and widened the page to 1,330px at 375 (lead/X1, 2026-10-21;
   regression: 2026-10-21-strip-sr-overflow). */
.lib-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px;
  border: 2px solid var(--line, #cfd4dc); border-radius: 999px; background: var(--surface, #fff); color: var(--ink, #1d2430);
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: left; white-space: nowrap;
  transition: background 160ms, border-color 160ms, transform 160ms;
}
.lib-chip:hover { background: var(--surface-2, #f3f5f8); }
.lib-chip:active { transform: scale(0.98); }
.lib-chip:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.lib-chip:focus-visible { outline: 3px solid var(--focus, #2a6df4); outline-offset: 2px; }
.lib-chip[aria-pressed="true"] { border-color: var(--accent, #2a6df4); background: var(--accent-soft, #e6eefc); }
.lib-chip .icon { flex: none; color: var(--ink-muted, #566072); }
.lib-chip[aria-pressed="true"] .icon { color: var(--accent-deep, var(--accent)); }
.lib-chip__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 0 5px; border-radius: 999px; background: var(--surface-2, #eef1f5); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-muted, #566072); }
.lib-chip[aria-pressed="true"] .lib-chip__count { background: var(--accent, #2a6df4); color: var(--accent-ink, #fff); }
/* audience colour as a bonus, never the only signal */
.lib-aud--parent[aria-pressed="true"] { border-color: var(--aud-parent, var(--accent)); }
.lib-aud--family[aria-pressed="true"] { border-color: var(--aud-family, var(--accent)); }
.lib-aud--child[aria-pressed="true"] { border-color: var(--aud-child, var(--accent)); }
.lib-aud--teen[aria-pressed="true"] { border-color: var(--aud-teen, var(--accent)); }
.lib-aud--adult[aria-pressed="true"] { border-color: var(--aud-adult, var(--accent)); }
.lib-aud--educator[aria-pressed="true"] { border-color: var(--aud-educator, var(--accent)); }
.lib-aud--clinician[aria-pressed="true"] { border-color: var(--aud-clinician, var(--accent)); }

/* "Exact ages": one small toggle (44px target) in front of the kit's slider; the bands cover most needs. */
.lib-age__toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; margin: -4px 0 0 -6px; border: 0; border-radius: var(--radius-s, 8px);
  background: none; color: var(--accent, #2a6df4); font: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start;
}
.lib-age__toggle:hover { background: var(--surface, #fff); }
.lib-age__toggle:focus-visible { outline: 3px solid var(--focus, #2a6df4); outline-offset: 2px; }
.lib-age__toggle[data-active] { color: var(--accent-deep, var(--accent)); }
.lib-age__chev { font-size: 0.75rem; opacity: 0.8; transition: transform 160ms; }
.lib-age__toggle[aria-expanded="true"] .lib-age__chev { transform: rotate(180deg); }
.lib-age__wrap { min-width: 0; padding: 4px 10px 8px; border: 1px solid var(--line, #cfd4dc); border-radius: var(--radius-m, 12px); background: var(--surface, #fff); }
.lib-age__wrap[hidden] { display: none; }
.lib-age__slider { min-width: 0; }
.lib-age__slider .rs-note:empty { display: none; } /* the slider's own "no values" note is for the whole dataset; the page says the gap under the count */

.lib-age-note { margin: 0; }
.lib-age-note[hidden] { display: none; }
.lib-link { padding: 0; border: 0; background: none; color: var(--accent, #2a6df4); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }
.lib-link:focus-visible { outline: 3px solid var(--focus, #2a6df4); outline-offset: 2px; }

/* ---------- the explorer (kit): search + "More filters" in the bar; the chip rows above replace three dropdowns ---------- */
#explorer { min-width: 0; display: grid; gap: var(--space-3, 12px); }
#explorer .de-facet[data-facet="age"], #explorer .de-facet[data-facet="audience"], #explorer .de-facet[data-facet="type"] { display: none; }
#explorer .de-facet .msf-trigger { min-height: 44px; }
/* site.css styles input[type="search"] (0,1,1), which beats the kit's .ks-input (0,1,0) and drops the room for its
   magnifier and clear button; restore the kit's padding (regression: 2026-10-21-search-icon-overlap). */
#explorer input.ks-input { padding: 0 calc(var(--ks-touch, 44px) + 4px) 0 40px; border-radius: var(--ks-radius, 999px); }
#explorer .de-bar { align-items: center; }
#explorer .de-rpanels:empty { display: none; }

.lib-more-wrap { display: inline-flex; align-items: center; gap: 4px; }
.lib-more-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line, #cfd4dc); border-radius: 999px; background: var(--surface, #fff); color: var(--ink, #1d2430);
  font: inherit; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 160ms, border-color 160ms;
}
.lib-more-btn:hover { background: var(--surface-2, #f3f5f8); }
.lib-more-btn:focus-visible { outline: 3px solid var(--focus, #2a6df4); outline-offset: 2px; }
.lib-more-btn[aria-expanded="true"], .lib-more-btn[data-active] { border-color: var(--accent, #2a6df4); }
.lib-more-btn[data-active] { background: var(--accent-soft, #e6eefc); }
.lib-more-btn__n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 0 5px; border-radius: 999px; background: var(--accent, #2a6df4); color: var(--accent-ink, #fff); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.lib-more-btn__n[hidden] { display: none; }
.lib-more-btn__chev { font-size: 0.75rem; opacity: 0.7; transition: transform 160ms; }
.lib-more-btn[aria-expanded="true"] .lib-more-btn__chev { transform: rotate(180deg); }
.lib-more-panel { padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px solid var(--line, #cfd4dc); border-radius: var(--radius-m, 12px); background: var(--surface, #fff); min-width: 0; }
.lib-more-panel[hidden] { display: none; }
.lib-more-panel .de-filters { gap: 8px; }

.lib-gaps:empty { display: none; }
.lib-gaps .de-gap { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--caution, #7a5a00); }

.lib-missing[hidden] { display: none; }
.lib-missing p { margin: 0; }

/* ---------- toolbar ---------- */
.lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.lib-toolbar__sort { display: inline-flex; align-items: center; gap: 8px; }
.lib-toolbar__sort label, .lib-toolbar__about { flex: none; white-space: nowrap; overflow-wrap: normal; } /* "Sort" wrapped to "So / rt" under the page-wide overflow-wrap: anywhere */
.lib-sort { min-height: 44px; padding: 6px 12px; border: 1px solid var(--line, #cfd4dc); border-radius: var(--radius-s, 8px); background: var(--surface, #fff); color: var(--ink, #1d2430); font: inherit; font-size: 1rem; }
.lib-sort:focus-visible { outline: 3px solid var(--focus, #2a6df4); outline-offset: 2px; }
.lib-toolbar__about { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.875rem; }

.lib-status { margin: 0; font-size: 0.875rem; }
.lib-status:empty { display: none; }

/* ---------- results ---------- */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-4, 16px); align-items: stretch; min-width: 0; }
.lib-grid > * { min-width: 0; }
.lib-grid:empty { display: none; }
.lib-sentinel { height: 1px; }
.lib-sentinel[hidden] { display: none; }
.lib-more-row { display: flex; justify-content: center; }
.lib-more-row:empty { display: none; }
.lib-more { min-height: 48px; }

/* keep everything inside 375px: long words in titles and chips may wrap */
.lib, .lib * { overflow-wrap: anywhere; }
.lib .de-chip-text, .lib .msf-summary, .lib .de-count, .lib-chip__label { overflow-wrap: normal; }

/* ---------- phones: compact (lead, 2026-10-21: "first card visible within the first ~700px at 375×812") ----------
   Each chip group is ONE row that scrolls sideways on its own; the page never scrolls sideways. The exact-age
   slider stays behind its toggle; count + Reset share a line; search + More filters share a line. */
@media (max-width: 720px) {
  .lib-hero { padding-block: var(--space-3, 12px) var(--space-2, 8px); }
  .lib-hero h1 { font-size: 1.85rem; margin-bottom: 6px; }
  .lib-hero .lede { font-size: 0.95rem; line-height: 1.45; }
  .lib { gap: 10px; padding-block: 8px var(--space-7, 48px); }
  .lib-quick { gap: 6px; padding: 8px 0 8px 12px; margin-inline: calc(-1 * var(--space-4, 16px)); max-width: calc(100% + 2 * var(--space-4, 16px)); border-inline: 0; border-radius: 0; }
  .lib-row, .lib-row--age { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
  .lib-row__title { flex: 0 0 auto; min-height: 44px; font-size: 0.875rem; }
  .lib-row__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the group keeps its full name for screen readers */
  .lib-row__short { display: inline; }
  .lib-row__title .it-btn { margin-right: 2px; }
  .lib-row__strip { flex: 1 1 0; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 2px 12px 2px 2px; scrollbar-width: thin; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .lib-row__chips { flex-wrap: nowrap; width: max-content; gap: 6px; }
  .lib-chip { flex: none; scroll-snap-align: start; font-size: 0.875rem; padding-inline: 10px; }
  .lib-chip .icon { display: none; } /* more chips in view; the label carries the meaning */
  .lib-row--age .lib-age__exact { flex: 1 1 100%; gap: 4px; padding-right: 12px; }
  .lib-age__toggle { margin: -8px 0 -4px -6px; min-height: 44px; } /* 44px target; the negative margins keep the row tight */
  .lib-age__wrap { padding: 2px 8px 6px; }
  .lib-age__slider .rs-inputs { display: flex; flex-wrap: nowrap; align-items: end; gap: 6px; }
  .lib-age__slider .rs-inputs > * { min-width: 0; flex: 1 1 0; }
  #explorer { gap: 8px; }
  #explorer .de-bar { flex-wrap: nowrap; gap: 6px; }
  #explorer .de-search { flex: 1 1 6rem; min-width: 0; }
  .lib-more-wrap { flex: none; width: auto; }
  .lib-more-btn { padding: 0 10px; font-size: 0.875rem; }
  #explorer .de-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
  #explorer .de-countwrap { grid-column: 1; grid-row: 1; min-width: 0; }
  #explorer .de-count { white-space: normal; }
  #explorer .de-reset { grid-column: 2; grid-row: 1; margin-left: 0; }
  #explorer .de-chips { grid-column: 1 / -1; grid-row: 2; }
  .lib-toolbar { flex-wrap: nowrap; gap: 8px; }
  .lib-toolbar__sort { flex: 1 1 auto; min-width: 0; }
  .lib-sort { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 480px) {
  .lib-toolbar__about-text { display: none; } /* the "i" keeps its "About this library" name */
}

@media (prefers-reduced-motion: reduce) {
  .lib-chip, .lib-more-btn, .lib-more-btn__chev, .lib-age__chev { transition: none; }
  .lib-chip:active { transform: none; }
  .lib-row__strip { scroll-behavior: auto; }
}
:root[data-reduce-motion="true"] .lib-chip, :root[data-reduce-motion="true"] .lib-more-btn, :root[data-reduce-motion="true"] .lib-more-btn__chev, :root[data-reduce-motion="true"] .lib-age__chev { transition: none; }

@media print {
  .lib-quick, #explorer, .lib-more-panel, .lib-toolbar, .lib-more-row, .lib-sentinel { display: none !important; }
}