/* Reading Room index: browser controls, results, pager. Borrower's Card tokens.
   Tokens sourced from theme gg-library-child (tokens.css) and plugin ggrr-reading-room.css.
   All text/background pairs verified >= 4.5:1 WCAG AA. */

/* --- Utility: JS visibility toggle + screen-reader-only --- */
.is-hidden { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Stats bar --- */
.ggrr-rr-stats {
  list-style: none;
  display: flex;
  gap: var(--space-m, 1.5rem);
  padding: 0;
  margin: var(--space-s, 1rem) 0;
  font-family: var(--font-mono, monospace);
  color: var(--ink);           /* oklch(25% 0.02 60) on paper(97%): ~10:1 ✓ */
}
.ggrr-rr-stat__fig { font-weight: 700; }

/* --- Controls row --- */
.ggrr-rr-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s, 1rem);
  align-items: end;
  margin-block: var(--space-m, 1.5rem);
}

/* --- Search wrap + input --- */
.ggrr-rr-searchwrap {
  position: relative;
  flex: 1 1 16rem;
}
.ggrr-search-input {
  width: 100%;
  font: inherit;
  color: var(--ink);           /* oklch(25% 0.02 60) on paper-1(#FBF7EB ~98%L): ~11:1 ✓ */
  background: var(--paper-1, #FBF7EB);
  border: 1px solid var(--ink-soft);
  padding: .5rem .6rem;
  min-height: 2.75rem;
}

/* --- Facet (select dropdowns) --- */
.ggrr-rr-facet {
  display: flex;
  flex-direction: column;
  font-size: var(--text-xs, .85rem);
  color: var(--ink);
  gap: .25rem;
}
.ggrr-rr-facet select {
  font: inherit;
  color: var(--ink);           /* oklch(25% 0.02 60) on paper(97%): ~10:1 ✓ */
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  padding: .4rem .5rem;
  min-height: 2.75rem;
}

/* --- Typeahead suggest listbox --- */
.ggrr-rr-suggest {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--ink-soft);
}
.ggrr-rr-suggest [role="option"] {
  padding: .4rem .6rem;
  color: var(--ink);           /* oklch(25% 0.02 60) on paper(97%): ~10:1 ✓ */
  cursor: pointer;
}
.ggrr-rr-suggest [role="option"]:hover {
  background: var(--paper-1, #FBF7EB);
}

/* --- Results count --- */
.ggrr-rr-count {
  font-family: var(--font-mono, monospace);
  color: var(--ink);           /* oklch(25% 0.02 60) on paper(97%): ~10:1 ✓ */
}

/* --- Results list --- */
.ggrr-rr-results {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ggrr-rr-row {
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,.12));
}
.ggrr-rr-row__link {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem 0;
  text-decoration: none;
}
.ggrr-rr-row__title {
  font-family: var(--font-display);
  color: var(--ink);           /* oklch(25% 0.02 60) on paper(97%): ~10:1 ✓ */
}
.ggrr-rr-row__meta {
  font-size: var(--text-xs, .85rem);
  /* ink-soft NOT ink-faint: ink-soft(43%L) on paper(97%L) ~4.95:1 ✓ AA
     ink-faint(45%L) would be ~4.35:1 ✗ — fails AA */
  color: var(--ink-soft);
}

/* --- Pager --- */
.ggrr-rr-pager {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-block: var(--space-m, 1.5rem);
}
.ggrr-rr-pager__btn {
  font: inherit;
  color: var(--ink);           /* oklch(25% 0.02 60) on paper(97%): ~10:1 ✓ */
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  padding: .35rem .6rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ggrr-rr-pager__btn[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);         /* paper(97%L) on ink(25%L): ~10:1 ✓ (reversed pair) */
  border-color: var(--ink);
}
.ggrr-rr-pager__btn[disabled] {
  opacity: .5;
  cursor: default;
}
.ggrr-filter-btn {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  padding: .35rem .6rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ggrr-filter-btn:hover {
  border-color: var(--ink);
}

/* --- Snippet container style --- */
.ggrr-rr-row__snippet {
  display: block;
  font-size: var(--text-sm, .9375rem);
  color: var(--ink-soft);
  margin-top: .4rem;
  padding-left: .75rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-body);
}

/* --- Document Text Match Label --- */
.ggrr-rr-row--body-hit .ggrr-rr-row__snippet::before {
  content: "Matched in document text";
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, .8125rem);
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* --- Title/Metadata Match Label --- */
.ggrr-rr-row--meta-hit::after {
  content: "Matched in title / metadata";
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, .8125rem);
  text-transform: uppercase;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.ggrr-highlight {
  background-color: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
  padding-inline: 2px;
  border-radius: 2px;
}

/* --- OCR status badge/marker --- */
.ggrr-rr-row__ocr-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, .8125rem);
  margin-top: .25rem;
}
.ggrr-rr-row__ocr-status--available {
  color: var(--ink-soft);
}
.ggrr-rr-row__ocr-status--available::before {
  content: "●";
  color: var(--ink-soft);
  font-size: 8px;
}
.ggrr-rr-row__ocr-status--pending {
  color: var(--ink-faint);
}
.ggrr-rr-row__ocr-status--pending::before {
  content: "○";
  color: var(--ink-faint);
  font-size: 8px;
}

/* --- Status row, loading and offline styles --- */
.ggrr-rr-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s, 1rem);
  align-items: baseline;
  margin-bottom: var(--space-s, 1rem);
}
.ggrr-rr-loading, .ggrr-rr-offline-notice {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, .8125rem);
}
.ggrr-rr-loading {
  color: var(--accent);
}
.ggrr-rr-offline-notice {
  color: var(--ink-soft);
  border: 1px solid var(--hairline-strong);
  padding: .25rem .5rem;
  background: var(--paper-sunk);
}

/* --- Empty state styling --- */
.ggrr-rr__empty-state {
  padding: var(--space-lg) 0;
  color: var(--ink-soft);
}
.ggrr-rr__empty-state strong {
  color: var(--ink);
}
.ggrr-rr__empty-state ul {
  margin-top: .5rem;
  padding-left: 1.25rem;
}
.ggrr-rr__empty-state li {
  margin-top: .25rem;
}
.ggrr-suggest-link {
  color: var(--accent) !important;
  text-decoration: underline;
}

/* --- Focus rings (AA 3:1 UI component threshold) --- */
:where(
  .ggrr-rr-row__link,
  .ggrr-search-input,
  .ggrr-rr-facet select,
  .ggrr-rr-pager__btn
):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Collections grid (Borrower's Card table look), self-contained for /library/.
   gg-card__* are styled only in the front-page-only home.css (not loaded here),
   so style them natively with tokens that flip together (--ink/--paper) ->
   WCAG AA contrast in BOTH light and dark mode. */
.ggrr-rr-grid { margin-block: var(--space-l, 2rem); }
.ggrr-rr-grid__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-s, .75rem);
  margin-block-end: var(--space-xs, .5rem);
}
.ggrr-rr-coll-sort-wrap { min-width: 10rem; }
.ggrr-rr-grid .gg-card__grid { width: 100%; border-collapse: collapse; }
.ggrr-rr-grid .gg-card__grid th,
.ggrr-rr-grid .gg-card__grid td {
  border: 1px solid var(--hairline, rgba(0,0,0,.15));
  padding: var(--space-2xs, .4rem) var(--space-s, .75rem);
  text-align: left; vertical-align: middle;
}
.ggrr-rr-grid .gg-card__era th {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .12em; font-size: var(--text-xs, .85rem);
  color: var(--ink-soft); padding-top: var(--space-s, .75rem);
}
.ggrr-rr-grid .gg-card__group th {
  font-family: var(--font-display); font-size: var(--text-xs, .85rem);
  color: var(--ink-soft); font-weight: 600; letter-spacing: .04em;
  padding-top: var(--space-2xs, .4rem); padding-left: var(--space-m, 1.25rem);
  border-left: 3px solid var(--ink-soft);
}
.ggrr-rr-grid .gg-card__col-period { width: 12%; }
.ggrr-rr-grid .gg-card__coll,
.ggrr-rr-grid .gg-card__col-name { width: 24%; }
.ggrr-rr-grid .gg-card__col-sources { width: 20%; }
.ggrr-rr-grid .gg-card__col-blurb { width: 44%; }
/* Column headers. Deliberately not styled like .gg-card__era / .gg-card__group:
   those are soft-ink uppercase rowgroup labels, and a header row that looked the
   same would read as another era divider rather than as the top of the table. */
.ggrr-rr-grid .gg-card__grid thead th {
  font-family: var(--font-display);
  font-size: var(--text-xs, .85rem);
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--hairline-strong, rgba(0,0,0,.3));
}
.ggrr-rr-grid .gg-card__year {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.ggrr-rr-grid .gg-card__coll a { color: var(--ink); text-decoration: none; }
.ggrr-rr-grid .gg-card__coll a:hover,
.ggrr-rr-grid .gg-card__coll a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.ggrr-rr-grid .gg-card__col-blurb,
.ggrr-rr-grid td.gg-card__col-sources {
  font-family: var(--font-sans, system-ui);
  font-size: var(--text-xs, .8125rem);
  color: var(--ink-soft);
  line-height: 1.4;
}
/* Publisher names are long ("U.S. National Archives and Records
   Administration") and must wrap inside the column rather than widen it. */
.ggrr-rr-grid td.gg-card__col-sources { overflow-wrap: anywhere; }

/* The phone-only copy of the sources, folded under the collection title.
   Hidden here rather than in the media query so that at any given width exactly
   one of the two copies is in the accessibility tree. */
.ggrr-rr-grid .gg-card__coll-sources { display: none; }

/* Below 48rem four text columns do not fit: Sources compresses to ~49px, long
   publisher names break letter-by-letter, and the row grows from 68px to 287px.
   Drop the column and show the folded copy instead, and give the title column
   a bigger share than its pre-Sources 28% since it now carries that extra line
   (measured at 390px: 28% -> median row 136px, 36% -> 120px, and going further
   to 44% only starves the description). */
@media (max-width: 47.99rem) {
  .ggrr-rr-grid .gg-card__col-sources { display: none; }
  .ggrr-rr-grid .gg-card__col-period { width: 12%; }
  .ggrr-rr-grid .gg-card__coll,
  .ggrr-rr-grid .gg-card__col-name { width: 36%; }
  .ggrr-rr-grid .gg-card__col-blurb { width: 52%; }
  .ggrr-rr-grid .gg-card__coll-sources {
    display: block;
    font-family: var(--font-sans, system-ui);
    font-size: var(--text-xs, .8125rem);
    color: var(--ink-soft);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
}

/* --- Touch targets: 44px minimum (WCAG 2.5.5) --- */
.ggrr-rr-grid .gg-card__coll a { display: inline-flex; align-items: center; min-height: 44px; }
.ggrr-rr__back { display: inline-flex; align-items: center; min-height: 44px; }