/* Orange County Indexed: the search page (template-parts/ocb-search-ui.php). Moved out of the template 2026-09-24. */
/* The heading and intro sit inside the same block as the console (2026-09-11:
   they were a separate .section, which stacked two paddings above the form). */
.obs-wrap { padding: 22px 0 56px; }
.obs-wrap .obs-intro__p { font-size: var(--fs-sm); color: var(--text-mid); margin: 0 0 14px; max-width: 70ch; }
#search-the-bibliography { scroll-margin-top: calc(var(--oci-sticky-top, 116px) + 14px); }
.obs-layout { display: block; max-width: 1000px; }
/* The original-headings lookup: a fold under the form since the 2026-09-24 search review (it was a 250px sticky column). */
.obs-side { margin: 2px 0 0; }
.obs-side__fold[open] { padding: 10px 12px; background: var(--white); border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); }
.obs-side h3 { font-size: var(--fs-sm); color: var(--ocpl-blue-dark); margin: 0; }
.obs-side input { width: 100%; max-width: 560px; padding: 8px 11px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.obs-side .hint { font-size: var(--fs-xs); color: var(--text-mid); margin: 8px 0 0; }
.obs-heads { list-style: none; margin: 10px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.obs-heads li[role=option] { margin: 0 0 5px; font-size: var(--fs-sm); line-height: 1.35; padding: 5px 9px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); background: var(--white); cursor: pointer; color: var(--text); }
.obs-heads li[role=option]:hover, .obs-heads li.is-active { border-color: var(--ocpl-blue); color: var(--ocpl-blue-dark); background: var(--ocpl-blue-pale); }
.obs-heads li.selall { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); font-weight: 700; }
.obs-heads li.selall:hover, .obs-heads li.selall.is-active { background: var(--ocpl-blue-dark); border-color: var(--ocpl-blue-dark); color: var(--white); }
.obs-heads .n { color: var(--text-mid); font-size: var(--fs-xs); }
.obs-active-subject { font-size: var(--fs-sm); margin-top: 10px; padding: 7px 10px; background: var(--white); border: 1px solid var(--ocpl-blue); border-radius: var(--radius-md); }
.obs-active-subject a { font-weight: 700; margin-left: 6px; }
.obs-context { margin-top: 12px; padding: 10px 12px; background: var(--ocpl-blue-pale); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.obs-context h4 { margin: 0 0 2px; font-size: var(--fs-sm); color: var(--ocpl-blue-dark); }
.obs-context > p { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--text-mid); }
.obs-context__role { margin: 8px 0 0; }
.obs-context__role > span { display: block; font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--text-mid); margin-bottom: 2px; }
.obs-context ul { list-style: none; margin: 0; padding: 0; }
.obs-context li { padding: 2px 0; line-height: 1.45; }
.obs-context li small { display: block; color: var(--text-mid); font-size: var(--fs-xs); }
.obs-context--top { display: block; margin: 0 0 10px; padding: 0; }
/* Flush with the rows around it (2026-09-25): the padding lives on the open body, not the summary line. */
.obs-context--top details { padding: 0; }
.obs-context--top details[open] { padding: 0 0 6px; }
.obs-context--top summary { padding: 4px 0; }
.obs-context--top .obs-context__role, .obs-context--top > details > p { padding-left: 0; }
.obs-context--top summary { cursor: pointer; font-weight: 700; color: var(--ocpl-blue-dark); font-size: var(--fs-sm); }
.obs-context--top summary span { font-weight: 400; color: var(--text-mid); font-size: var(--fs-xs); margin-left: 6px; }
.obs-context--top > details > p { margin: 6px 0; font-size: var(--fs-xs); color: var(--text-mid); }
.obs-context__more { margin-top: 2px; padding: 0; }
.obs-context__more summary { font-size: var(--fs-xs); font-weight: 700; color: var(--ocpl-blue-dark); cursor: pointer; margin: 0; }
.obs-context__more ul { margin-top: 2px; }
.obs-side__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: var(--fs-xs); }
/* Grid items default to min-width:auto and grow to their content's minimum width; on a 390px phone that pushed the page to 417px. */
.obs-side, .obs-main, .obs-console, .obs-controls > *, .obs-field select { min-width: 0; max-width: 100%; }
.obs-wrap { overflow-x: clip; }
.obs-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 14px; align-items: start; }
/* The box spans two columns and Where to find it takes the third (2026-09-25); on two columns or one the box is full width. */
.obs-controls__search { grid-column: 1 / 3; grid-row: 1; align-self: end; }
@media (max-width: 700px) { .obs-controls__search { grid-column: 1 / -1; } }
.obs-morebtn { grid-column: 1 / -1; }
@media (max-width: 700px) { .obs-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .obs-controls { grid-template-columns: minmax(0, 1fr); } }
.obs-controls input[type=search] { padding: 10px 14px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); font-size: .95rem; background: var(--white); }
.obs-controls select { padding: 9px 10px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); font-size: var(--fs-md); background: var(--white); }
.obs-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.obs-field__name { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ocpl-blue-dark); }
.obs-field__name label { cursor: pointer; }
/* Same idea for the rest of the console: the selects came out 42px and the
   more-filters button 30px, under the 44px the site uses everywhere else.
   Only on touch, so the desktop control row keeps its proportions. */
@media (pointer: coarse) {
  .obs-controls select, .obs-controls input[type=search] { min-height: 44px; }
  .obs-morebtn { min-height: 44px; }
  /* The browse fold is a tap target too, and measured 30px. */
  .obs-side__fold > summary { display: flex; align-items: center; min-height: 44px; }
  .obs-side__fold > summary h3 { margin: 0; }
}
.obs-key__intro { font-size: var(--fs-sm); color: var(--text-mid); margin: 6px 0 8px; }
.obs-side__fold summary { list-style: none; cursor: pointer; }
.obs-side__fold summary::-webkit-details-marker { display: none; }
.obs-side__fold summary h3 { display: inline-block; margin: 0; }
.obs-side__fold[open] summary h3 { margin-bottom: 8px; }
/* The fold's caret shows at every width: the marker is hidden above, so
   without it a desktop reader has no sign the heading toggles anything. */
.obs-side__fold summary h3::after { content: ' ▾'; font-weight: 400; }
.obs-side__fold[open] summary h3::after { content: ' ▴'; }
.obs-toggles { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: var(--fs-sm); color: var(--text-mid); margin-bottom: 12px; }
.obs-results-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 6px; }
.obs-results-line .obs-count { margin: 0; }
.obs-results-line .obs-fchips { margin: 0; flex-basis: 100%; }
/* Sort on the results line: a quiet inline control to the right of the count. */
.obs-results-line .obs-field--sort { flex-direction: row; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.obs-results-line .obs-field--sort .obs-field__name { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mid); }
.obs-results-line .obs-field--sort select { font-size: var(--fs-sm); padding: 5px 8px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); background: var(--white); color: var(--text); max-width: 100%; }
.obs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 4px 0 0; }
.obs-tools .obs-share { margin-left: 0; }
.obs-tools .obs-key { margin: 0 0 0 8px; }
.obs-tools .obs-key[open] { flex-basis: 100%; margin: 4px 0 0; }
.obs-toggles label { cursor: pointer; }
/* Compact sticky search/filters/sort for small screens, once the console has scrolled away. */
.obs-stickybar { display: none; }
@media (max-width: 900px) {
  .obs-stickybar { display: flex; gap: 6px; position: sticky; top: var(--oci-sticky-top, 64px); z-index: 30; padding: 8px 10px; margin: 0 0 10px; background: var(--ocpl-blue-pale); border-bottom: 1px solid var(--ocpl-blue-light); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
  .obs-stickybar[hidden] { display: none; }
  .obs-stickybar input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); font-size: var(--fs-sm); background: var(--white); }
  .obs-stickybar button, .obs-stickybar select { flex: none; padding: 7px 10px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); font-size: var(--fs-sm); background: var(--white); color: var(--ocpl-blue-dark); font-weight: 700; }
}
.obs-toggles__hint { flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-mid); }
.obs-toggles--add { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--ocpl-blue-light); }
.obs-adv { margin-bottom: 8px; }
.obs-adv summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); padding: 2px 0; }
.obs-adv[open] summary { margin-bottom: 6px; }
.obs-chart-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-mid); margin: 10px 0 2px; }
.obs-decades { display: flex; align-items: flex-end; gap: 3px; height: 74px; margin: 6px 0 2px; }
.obs-decades button { flex: 1; min-width: 6px; border: 0; background: var(--ocpl-blue-light); border-radius: 2px 2px 0 0; cursor: pointer; padding: 0; transition: background var(--transition-fast); }
.obs-decades button:hover { background: var(--ocpl-blue); }
.obs-decades button.active { background: var(--ocpl-blue-dark); }
.obs-decades-x { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-light); margin-bottom: 14px; }
.obs-console { background: var(--ocpl-blue-pale); border: 1px solid var(--ocpl-blue-light); border-radius: 14px; padding: 20px 22px; margin: 0 0 18px; }
@media (max-width: 600px) { .obs-console { padding: 16px 15px; } }
.obs-count { font-size: 1rem; font-weight: 700; color: var(--heading); margin: 10px 0 4px; }
.obs-count span { color: var(--ocpl-blue); }
.obs-years { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; }
.obs-years__label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-mid); }
.obs-years__slider { position: relative; flex: 1 1 240px; max-width: 420px; height: 22px; }
.obs-years__slider input[type=range] { position: absolute; left: 0; top: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; height: 22px; }
.obs-years__slider input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--ocpl-blue-light); border-radius: 2px; margin-top: 9px; }
/* Only the lower input draws the track; the upper one's would paint over
   the lower thumb. */
.obs-years__slider input[type=range]:last-child::-webkit-slider-runnable-track { background: transparent; }
.obs-years__slider input[type=range]:last-child::-moz-range-track { background: transparent; }
.obs-years__slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--ocpl-blue); border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.25); margin-top: -6px; cursor: pointer; }
.obs-years__slider input[type=range]::-moz-range-track { height: 4px; background: var(--ocpl-blue-light); border-radius: 2px; }
.obs-years__slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--ocpl-blue); border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.obs-years__out { font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); min-width: 92px; }
.obs-years__clear { border: none; background: none; color: var(--text-light); font-size: 1rem; cursor: pointer; padding: 0 4px; }
.obs-years__clear:hover { color: var(--ocpl-blue-dark); }
.obs-key { font-size: var(--fs-xs); color: var(--text-mid); margin: 0 0 8px; }
.obs-key > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); padding: 2px 0; }
.obs-key[open] > summary { margin-bottom: 6px; }
.obs-actions { margin: 8px 0; }
.obs-key__list { list-style: none; margin: 0; padding: 0; }
.obs-key__list li { padding: 1px 0; }
.obs-key__ill { margin: 4px 0 0; }
.obs-key .held { color: var(--success, var(--success)); font-weight: 700; }
.obs-share { border: 1px solid var(--ocpl-blue-light); background: var(--white); color: var(--ocpl-blue-dark); font-size: var(--fs-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill); cursor: pointer; margin-left: 8px; }
.obs-share:hover { background: var(--ocpl-blue-pale); }
a.obs-share { text-decoration: none; display: inline-block; }
/* The by/about flip: a person filter is about someone; when the same name
   wrote things, offer the other side (and vice versa). */
.obs-xlink { font-size: var(--fs-sm); color: var(--text-mid); margin: 0 0 10px; }
.obs-xlink button { background: none; border: 0; padding: 0; font: inherit; color: var(--ocpl-blue); text-decoration: underline; cursor: pointer; }
.obs-xlink button:hover { color: var(--ocpl-blue-dark); }
.obs-rows .obs-creatorbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--text-mid); text-decoration: underline; text-decoration-color: var(--ocpl-blue-light); cursor: pointer; }
.obs-rows .obs-creatorbtn:hover { color: var(--ocpl-blue-dark); }
.obs-rows .obs-labadge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 0 7px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); color: var(--ocpl-blue-dark); text-decoration: none; margin-left: 8px; }
.obs-rows .obs-labadge:hover { background: var(--ocpl-blue-pale); }
/* Per-card utilities (Cite, Report an error). Not .obs-tools: that is the
   console's action row above the results. */
.obs-cardtools { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.obs-cardtools a, .obs-cardtools button { font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 1px 9px; border: 1px solid var(--border, #ddd); border-radius: var(--radius-pill); color: var(--text-mid); background: var(--white); text-decoration: none; cursor: pointer; line-height: 1.6; }
.obs-cardtools a:hover, .obs-cardtools button:hover { border-color: var(--ocpl-blue); color: var(--ocpl-blue-dark); }
.obs-clear { font-size: var(--fs-sm); }
/* Clearing the subject filter is an action, not a destination, so it is a
   button wearing the link styling rather than an href="#". */
#obs-subject-clear {
  display: inline-block; background: none; border: 0; padding: 0; margin-top: 8px;
  font: inherit; font-size: var(--fs-sm); color: var(--ocpl-blue);
  text-decoration: underline; cursor: pointer;
}
#obs-subject-clear:hover { color: var(--ocpl-blue-dark); }
#obs-subject-clear:focus-visible { outline: 2px solid var(--ocpl-blue); outline-offset: 2px; }
.obs-rows { list-style: none; margin: 12px 0 0; padding: 0; scroll-margin-top: calc(var(--oci-sticky-top, 116px) + 14px); }
.obs-rows li { padding: 14px 0; border-bottom: 1px solid var(--ocpl-blue-light); font-size: .95rem; line-height: 1.65; scroll-margin-top: calc(var(--oci-sticky-top, 116px) + 14px); }
.obs-rows .t { font-weight: 700; font-size: 1.02rem; color: var(--heading); text-decoration: none; }
.obs-rows a.t:hover { color: var(--ocpl-blue); }
/* ── Card tiers (2026-09-11) ──
   1: title · meta line · one access line with one filled pill · Local connection
   2: (digital objects) a quiet provenance line
   3: <details class="obs-more"> with labelled rows for everything else. */
.obs-meta { display: block; font-size: var(--fs-sm); color: var(--text-mid); margin-top: 1px; }
.obs-access { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: var(--fs-sm); color: var(--text-mid); min-width: 0; }
.obs-access .held { margin-left: 0; }
/* One marker per access kind, so a list of rows scans by colour before it is read (2026-09 polish). */
.obs-access__words::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--text-light); }
.obs-access[data-kind="ocpl"] .obs-access__words::before { background: var(--success, #2e7d32); }
.obs-access[data-kind="online"] .obs-access__words::before, .obs-access[data-kind="nclive"] .obs-access__words::before { background: var(--ocpl-blue); }
.obs-access[data-kind="nearby"] .obs-access__words::before { background: var(--ocpl-green-dark, #4f7a2c); }
.obs-access[data-kind="onsite"] .obs-access__words::before { background: var(--ocpl-orange); }
.obs-access[data-kind="ocpl"] .obs-access__words { display: inline-flex; align-items: center; }
.obs-access__also { font-size: var(--fs-xs); color: var(--text-mid); }
.obs-pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--ocpl-blue); color: var(--white); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; text-decoration: none; white-space: nowrap; }
.obs-pill:hover, .obs-pill:focus-visible { background: var(--ocpl-blue-dark); color: var(--white); }
.obs-more { margin-top: 8px; min-width: 0; }
.obs-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--ocpl-blue-dark); padding: 2px 0; }
.obs-more > summary::-webkit-details-marker { display: none; }
.obs-more > summary::after { content: '▾'; font-weight: 400; }
.obs-more[open] > summary::after { content: '▴'; }
@media (pointer: coarse) { .obs-more > summary { min-height: 44px; } }
.obs-more__body { display: grid; gap: 7px; margin-top: 6px; min-width: 0; }
.obs-drow { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 3px 10px; align-items: baseline; font-size: var(--fs-sm); min-width: 0; }
@media (max-width: 480px) { .obs-drow { grid-template-columns: minmax(0, 1fr); } }
.obs-drow__l { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mid); }
.obs-drow__v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; line-height: 1.5; }
.obs-rows .obs-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); color: var(--text-mid); line-height: 1.5; margin-top: 2px; }
.obs-rows .obs-desc--full { display: block; overflow: visible; }   /* the index's own description: no clamp */
.obs-rows .obs-reviews { display: block; font-size: var(--fs-sm); color: var(--text-mid); margin-top: 4px; }   /* journals that reviewed the book (OpenAlex, 2026-10-01) */
.obs-rows .obs-reviews a { font-weight: 600; }
/* Digital-object provenance line (tier 2): type · repository · contributor. */
.obs-digmeta { font-size: var(--fs-xs); color: var(--text-mid); margin-top: 4px; }
.obs-digmeta a { color: var(--ocpl-blue); font-weight: 600; text-decoration: none; }
.obs-digmeta a:hover { text-decoration: underline; }
.obs-digtype { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ocpl-blue-dark); background: var(--ocpl-blue-pale); border-radius: var(--radius-pill); padding: 1px 9px; }
/* Digital-object thumbnail: a small square the row text wraps beside. */
.obs-li-body { min-width: 0; flex: 1 1 auto; }
.obs-digrights { color: var(--text-mid); line-height: 1.45; }
/* Local connection: always visible, never truncated, a rule down its left. */
.obs-why { display: block; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; margin-top: 6px; padding-left: 12px; border-left: 3px solid var(--ocpl-blue); }
.obs-why b { font-weight: 700; color: var(--text); }
.obs-digsrc { font-style: italic; }
.obs-rows .held { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--success, var(--success)); margin-left: 8px; }
.obs-rows .research { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--text-mid); border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); padding: 0 7px; margin-left: 8px; }
.obs-scope strong { color: var(--ocpl-blue-dark); }
.obs-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: middle; }
.obs-chips a { font-size: var(--fs-xs); font-weight: 600; padding: 1px 7px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); color: var(--ocpl-blue-dark); text-decoration: none; }
.obs-chips a:hover { background: var(--ocpl-blue-pale); }
/* Parsed place/material tags carry the card's visible metadata; the raw
   catalog headings sit behind a quiet toggle at lower contrast, so the
   hierarchy reads concepts → controls → provenance. */
.obs-tagrow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.obs-tagrow button { font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 1px 9px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--ocpl-blue-pale); color: var(--ocpl-blue-dark); cursor: pointer; line-height: 1.6; }
.obs-tagrow button:hover { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
/* Find it (inside Details): every destination as a blue chip; the OCPL chip
   is filled. Cite and Report live in their own .obs-cardtools row. */
.obs-find { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.obs-find a { font-size: var(--fs-xs); font-weight: 600; padding: 1px 9px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--white); color: var(--ocpl-blue-dark); text-decoration: none; line-height: 1.6; white-space: nowrap; }
.obs-find a:hover { background: var(--ocpl-blue-pale); border-color: var(--ocpl-blue); }
.obs-find a.obs-find__home { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); font-weight: 700; }
.obs-find a.obs-find__home:hover { background: var(--ocpl-blue-dark); border-color: var(--ocpl-blue-dark); color: var(--white); }
.obs-subtoggle { flex-basis: 100%; margin-top: 2px; background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-xs); color: var(--text-mid); text-decoration: underline; text-align: left; cursor: pointer; }
.obs-subtoggle:hover { color: var(--ocpl-blue-dark); }
.obs-subchips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.obs-subchips[hidden] { display: none; }
.obs-subchips button { font: inherit; font-size: var(--fs-xs); padding: 1px 9px; border: 1px solid var(--border, #ddd); border-radius: var(--radius-pill); background: var(--white); color: var(--text-mid); cursor: pointer; line-height: 1.6; }
.obs-subchips button:hover { border-color: var(--ocpl-blue); color: var(--ocpl-blue-dark); }
/* Active-filter chips: what's on, at a glance, each removable. */
.obs-fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 10px; }
.obs-fchips[hidden] { display: none; }
.obs-fchips button.chip { border: none; background: var(--ocpl-blue); color: var(--white); border-radius: var(--radius-pill); padding: 4px 12px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.obs-fchips button.chip:hover { background: var(--ocpl-blue-dark); }
.obs-fchips .clearall { border: none; background: none; color: var(--ocpl-blue-dark); text-decoration: underline; font-size: var(--fs-sm); cursor: pointer; }
/* Secondary filters collapse behind one button on small screens. */
.obs-morebtn { padding: 9px 16px; border: 1px dashed var(--ocpl-blue-light); border-radius: var(--radius-md); background: var(--white); font-size: var(--fs-md); font-weight: 600; color: var(--ocpl-blue-dark); cursor: pointer; }
.obs-morewrap { display: contents; }
.obs-morewrap.collapsed { display: none; }
/* Inside the fold, the Wall scope and the record-kind toggles span the grid; the note closes the fold. */
.obs-morewrap > .obs-wallscope, .obs-morewrap > .obs-adv, .obs-morewrap > .obs-side { grid-column: 1 / -1; }
.obs-morewrap > .obs-wallscope { margin: 2px 0 0; }
.obs-morewrap > .obs-adv { margin: 0; }
/* The publication histogram lives after the results as an opt-in layer. */
.obs-timeline { margin: 22px 0 0; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); background: var(--white); }
.obs-timeline summary { padding: 11px 16px; font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); cursor: pointer; }
.obs-timeline__inner { padding: 0 16px 14px; }
/* Browse by Library of Congress class: the same fold as the timeline, pills like the card tag rows. */
.obs-lcc { margin-top: 12px; }
.obs-lcc__note { margin: 0 0 10px; font-size: var(--fs-xs); color: var(--text-mid); line-height: 1.55; max-width: 72ch; }
.obs-lcc__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.obs-lcc__list a, .obs-lcc__list button { display: inline-block; font-family: inherit; cursor: pointer; font-size: var(--fs-xs); font-weight: 600; padding: 3px 11px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--ocpl-blue-pale); color: var(--ocpl-blue-dark); text-decoration: none; line-height: 1.6; }
.obs-lcc__list a:hover, .obs-lcc__list a[aria-current="true"], .obs-lcc__list button:hover, .obs-lcc__list button[aria-pressed="true"] { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.obs-lcc__list .n { font-weight: 400; opacity: .85; }
.obs-lcc__list .r { font-weight: 400; opacity: .7; margin-left: 4px; }
.obs-wall__lcc { margin: 10px 0 12px; }
/* the room's bookshelves as rows of chips, the shelf's own chip first (2026-09-25) */
.obs-wall__shelfrow { margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--ocpl-blue-light); }
.obs-wall__shelfhead button { background: var(--white); border-color: var(--ocpl-blue); font-weight: 700; }
.obs-wall__lcc > b { display: block; font-size: var(--fs-sm); color: var(--heading); margin: 0 0 6px; }
/* Related headings under the active subject: broader / narrower / related roots the index also holds. */
.obs-related { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--fs-xs); }
.obs-related__h { margin: 0 0 2px; font-weight: 700; color: var(--heading); }
.obs-related__src { margin: 0 0 8px; color: var(--text-light); }
.obs-related dl { margin: 0; }
.obs-related dt { margin: 8px 0 3px; font-weight: 700; color: var(--text-mid); text-transform: uppercase; letter-spacing: .04em; font-size: 0.68rem; }
.obs-related dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.obs-related dd button { font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 1px 9px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--white); color: var(--ocpl-blue-dark); cursor: pointer; line-height: 1.6; text-align: left; }
.obs-related dd button:hover { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.obs-related .n { font-weight: 400; opacity: .8; }
.obs-free { font-size: var(--fs-xs); font-weight: 700; }
.obs-pager { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.obs-pager__nums { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.obs-pager__n, .obs-pager__cur { min-width: 34px; padding: 6px 8px; text-align: center; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); background: var(--white); color: var(--ocpl-blue-dark); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.obs-pager__n:hover { background: var(--ocpl-blue-pale); }
.obs-pager__cur { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); font-weight: 700; cursor: default; }
.obs-pager__gap { color: var(--text-light); padding: 0 2px; }
.obs-toindex { margin: 16px 0 0; text-align: center; font-size: var(--fs-sm); }
.obs-toindex a { color: var(--ocpl-blue-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ocpl-blue-light); }
.obs-toindex a:hover { border-bottom-color: var(--ocpl-blue); }
.obs-none { color: var(--text-mid); padding: 24px 0; }
.obs-none p { margin: 0 0 12px; }
.obs-none b { color: var(--heading); }
.obs-none__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.obs-none__acts .btn { font-size: var(--fs-sm); padding: 7px 14px; }
.obs-wallscope { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: var(--fs-sm); color: var(--text-mid); margin: -4px 0 12px; }
.obs-wallscope label { cursor: pointer; font-weight: 700; color: var(--heading); }
.obs-wallscope__hint { font-size: var(--fs-xs); color: var(--text-mid); }
.obs-wallscope__all { white-space: nowrap; }
.obs-topic-hint { margin: 4px 0 10px; padding: 8px 14px; border-left: 4px solid var(--ocpl-blue); background: var(--white); font-size: var(--fs-sm); }
.obs-topic-hint a { font-weight: 700; }
.obs-rows[aria-busy="true"] { opacity: .3; transition: opacity .15s; pointer-events: none; }
.obs-loading { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-mid); margin: 4px 0; }
.obs-loading[hidden] { display: none; }   /* an author display rule beats the UA [hidden] rule; restate it (2026-09-08) */
.obs-retry { font-size: var(--fs-sm); font-weight: 700; padding: 3px 10px; border: 1px solid var(--ocpl-blue); border-radius: var(--radius-pill); background: var(--white); color: var(--ocpl-blue-dark); cursor: pointer; }
.obs-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--text-mid); border-top-color: transparent; border-radius: 50%; animation: obs-spin .8s linear infinite; }
@keyframes obs-spin { to { transform: rotate(360deg); } }
/* Two scopes on one page (Wall scope on): a standing header above the index
   results, one row per scope with its count and a jump link. */
/* Pages that match the search words (a person, an event, a theme, a place), as cards above the results. */
/* Topic pages: one row of links (2026-09-24 search review; the cards are gone, the pages carry the detail). */
.obs-entities { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 6px; min-width: 0; }
.obs-topics__lab { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mid); margin-right: 4px; }
.obs-topics__chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px 5px 10px; border: 1px solid var(--border); border-left: 4px solid var(--ocpl-blue); border-radius: var(--radius-md); background: var(--white); color: var(--heading); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; min-width: 0; }
.obs-topics__chip:hover { border-color: var(--ocpl-blue); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.obs-topics__chip--event { border-left-color: var(--ocpl-orange); }
.obs-topics__chip--theme { border-left-color: var(--ocpl-blue-mid); }
.obs-topics__chip--place { border-left-color: var(--ocpl-green-dark); }
.obs-topics__chip--chron { border-left-color: var(--ocpl-blue-dark); color: var(--ocpl-blue-dark); }
.obs-topics__chip--rec { border-left-color: var(--text-mid); }   /* the historical records' counts (2026-10-14) */
.obs-topics__break { flex-basis: 100%; height: 0; }
.obs-topics__kind { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mid); }
.obs-topics__n { font-size: var(--fs-xs); font-weight: 400; color: var(--text-mid); }
/* Narrowing bars: the entity pages' rules (ocb-entity.php); the bar itself is styled in oci-round4.css. */
.obs-narrow { margin: 14px 0 0; }
.obs-narrow[hidden] { display: none; }
.oce-narrow { margin: 0 0 20px; padding: 12px 16px 6px; background: var(--ocpl-blue-pale); border-radius: var(--radius-md); }
.oce-narrow__lead { font-size: var(--fs-sm); color: var(--text-mid); margin: 0 0 10px; max-width: 70ch; }
.oce-narrow__lead b { color: var(--heading); }
.oce-narrow__row { display: flex; align-items: flex-start; gap: 6px 12px; margin: 0 0 10px; }
.oce-narrow__lab { flex: 0 0 64px; padding-top: 1px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mid); }
.oce-narrow__body { flex: 1 1 0; min-width: 0; }
.oce-narrow .oce-formbar__bar { height: 12px; border-radius: 6px; overflow: hidden; display: flex; background: var(--ocpl-blue-light); }
.oce-narrow .oce-formbar__key { margin-top: 5px; }
.oce-narrow .oce-formbar__key a { display: inline-block; padding: 2px 0; color: var(--ocpl-blue-dark); font-weight: 700; text-decoration: none; }
.oce-narrow .oce-formbar__key a:hover, .oce-narrow .oce-formbar__key a:focus-visible { text-decoration: underline; }
.oce-narrow .oce-formbar__key .n, .oce-formbar__rest { font-weight: 400; color: var(--text-mid); }
@media (max-width: 560px) { .oce-narrow__row { flex-wrap: wrap; } .oce-narrow__lab { flex-basis: 100%; } }
/* A phone folds the block behind its own line (553px of bars before the first record otherwise); three columns on a wide screen, so the block costs one row of height above the results. */
@media (max-width: 899px) { .obs-narrow:not(.is-open) .oce-narrow__row, .obs-narrow:not(.is-open) .oce-narrow__lead { display: none; } .obs-narrow__toggle { display: block; width: 100%; text-align: left; padding: 4px 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); cursor: pointer; } .obs-narrow__toggle::after { content: ' ▾'; font-weight: 400; } .obs-narrow.is-open .obs-narrow__toggle::after { content: ' ▴'; } .obs-narrow.is-open .obs-narrow__toggle { margin-bottom: 6px; } }
@media (min-width: 900px) { .obs-narrow__toggle { display: none; } }
@media (max-width: 600px) { .obs-topics__chip { font-size: var(--fs-xs); padding: 4px 9px 4px 8px; gap: 5px; } .obs-topics__n { display: none; } }
@media (min-width: 900px) { .obs-narrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; } .obs-narrow[hidden] { display: none; } .obs-narrow .oce-narrow__lead { grid-column: 1 / -1; } .obs-narrow .oce-narrow__row { flex-wrap: wrap; } .obs-narrow .oce-narrow__lab { flex-basis: 100%; } }
/* What the filters mean: one fold in the form (2026-09-24 search review). */
.obs-hints { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); color: var(--text-mid); }
.obs-hints summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); padding: 2px 0; }
.obs-hints dl { margin: 8px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; }
.obs-hints dt { font-weight: 700; color: var(--heading); }
.obs-hints dd { margin: 0; line-height: 1.45; }
@media (max-width: 560px) { .obs-hints dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .obs-hints dd { margin-bottom: 6px; } }
.obs-entities[hidden] { display: none; }
.obs-scopes { margin: 12px 0 0; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); overflow: hidden; min-width: 0; }
.obs-scopes[hidden] { display: none; }
.obs-scopes__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 8px 14px; font-size: var(--fs-sm); color: var(--text-mid); min-width: 0; }
.obs-scopes__row + .obs-scopes__row { border-top: 1px solid var(--ocpl-blue-light); background: var(--ocpl-blue-pale); }
.obs-scopes__row b { color: var(--heading); }
.obs-scopes__jump { font-weight: 700; white-space: nowrap; margin-left: auto; }
.obs-wall__pg { display: flex; gap: 14px; align-items: center; font-size: var(--fs-sm); margin: 10px 0 4px; }
.obs-wall__pg button { background: none; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); padding: 3px 12px; font: inherit; color: var(--ocpl-blue-dark); cursor: pointer; }
.obs-wall__pg button[disabled] { opacity: .4; cursor: default; }
.obs-wall__inv { font-size: var(--fs-xs); color: var(--text-mid); margin: 6px 0 0; }
.obs-wall { margin: 28px 0 8px; padding: 18px 20px 6px; border: 1px solid var(--ocpl-blue-light); border-top: 4px solid var(--ocpl-blue); border-radius: var(--radius-md); background: var(--ocpl-blue-pale); }
.obs-wall__search { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--heading); margin: 4px 0 12px; }
.obs-wall__search input { display: block; width: 100%; max-width: 480px; margin-top: 4px; padding: 8px 12px; font: inherit; font-weight: 400; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); background: var(--white); }
.obs-wall h3 { margin: 0 0 4px; font-size: 1.15rem; }
.obs-wall h3 span { font-weight: 400; color: var(--text-mid); font-size: var(--fs-sm); margin-left: 8px; }
.obs-wall__frame { font-size: var(--fs-sm); color: var(--text-mid); line-height: 1.55; margin: 0 0 6px; }
.obs-wall__more { font-size: var(--fs-sm); margin: 10px 0 8px; }
.obs-wall__site { font-size: var(--fs-sm); color: var(--text-mid); line-height: 1.55; margin: 12px 0 10px; padding-top: 10px; border-top: 1px dashed var(--ocpl-blue-light); }
.obs-wall ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 900px) { .obs-wall ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obs-wallcard { padding: 12px 0 12px 14px; border-bottom: 1px solid var(--ocpl-blue-light); border-left: 4px solid var(--ocpl-blue); margin: 8px 0; line-height: 1.55; font-size: .95rem; }
.obs-wallcard__label { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 2px; }
.obs-wallcard__also { margin-top: 4px; margin-bottom: 0; color: var(--ocpl-blue-dark); text-decoration: none; }
.obs-wallcard__also:hover { text-decoration: underline; }
.obs-wallcard__found { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--white); background: var(--ocpl-blue); border-radius: var(--radius-pill); padding: 1px 9px; margin-left: 8px; vertical-align: middle; }
.obs-wall__found { margin: 8px 0 18px; padding: 12px 16px 4px; background: var(--ocpl-blue-pale); border-radius: var(--radius-md); }
.obs-wall__found h4 { margin: 0 0 2px; font-size: 1.05rem; color: var(--heading); }
.obs-wall__found h5 { margin: 12px 0 2px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--text-mid); }
.obs-wall__found p { font-size: var(--fs-sm); color: var(--text-mid); line-height: 1.5; margin: 0 0 6px; }
.obs-wall__found .obs-wallcard { background: var(--white); }
.obs-wallcard .t { font-weight: 700; color: var(--heading); text-decoration: none; }
.obs-wallcard a.t:hover { color: var(--ocpl-blue); }
.obs-wallcard .obs-wallcard__meta { font-size: var(--fs-sm); color: var(--text-mid); }
.obs-wallcard .obs-wallcard__use { display: block; font-size: var(--fs-sm); color: var(--text-mid); }
.obs-wallcard .obs-wallcard__subj { display: block; font-size: var(--fs-xs); color: var(--text-mid); line-height: 1.5; }
.obs-wallcard .obs-wallcard__lc { font-size: var(--fs-xs); color: var(--text-mid); margin-left: 10px; }
.obs-wallcard .obs-wallcard__go { display: inline-block; font-size: var(--fs-sm); font-weight: 700; margin-top: 2px; }
/* the pointer card sits among the result rows, whose own padding rule (.obs-rows li) outranks a bare class: name both so the text clears the accent */
.obs-wallcard--discover, .obs-rows li.obs-wallcard--discover { background: var(--ocpl-blue-pale); border-radius: 0 var(--radius-md) var(--radius-md) 0; border-bottom: 0; padding: 12px 18px 12px 20px; }
/* Wall cards (2026-09-25): head, description, subject chips, labelled facts, actions; two across on a wide screen. */
.obs-wall .obs-wallcard { display: flex; flex-direction: column; gap: 3px; margin: 0; background: var(--white); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 12px 14px; border-bottom: 0; min-width: 0; }
.obs-wallcard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.obs-wallcard__desc { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.obs-wallcard__subjs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; }
.obs-wallcard__lab { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mid); }
.obs-wallcard__chip { font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 1px 9px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--white); color: var(--ocpl-blue-dark); cursor: pointer; line-height: 1.6; text-align: left; }
.obs-wallcard__chip:hover, .obs-wallcard__chip:focus-visible { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.obs-wallcard__n { font-size: var(--fs-xs); color: var(--text-light); }
.obs-wallcard__facts { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--fs-xs); color: var(--text-mid); margin-top: 2px; }
.obs-wallcard__facts b { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-right: 5px; }
.obs-wallcard__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 6px; }
.obs-wallcard__acts .obs-wallcard__also { margin: 0; font-size: var(--fs-xs); font-weight: 700; }
.obs-wallcard__acts .obs-wallcard__lc { margin: 0; }
@media (pointer: coarse) { .obs-wallcard__chip { min-height: 44px; } }
.obs-wallcard--discover b { color: var(--heading); }
.obs-wallcard--discover button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ocpl-blue-dark); text-decoration: underline; cursor: pointer; }
.obs-rows li.obs-wallcard { border-bottom: 0; }
.obs-foot { font-size: var(--fs-sm); color: var(--text-light); margin-top: 26px; }
.obs-wrap .obs-intro__eg { margin-top: -8px; }
.obs-wrap .obs-intro__eg a { font-weight: 700; }
.obs-wrap .obs-recordslink { margin-top: -4px; font-size: var(--fs-sm); color: var(--text-mid); }
.obs-wrap .obs-recordslink a { font-weight: 700; }
@media print {
  .obs-console, .obs-side, .obs-stickybar, .obs-pager, .obs-intro__eg, .obs-more, .obs-share, .obs-timeline, .obs-creatorbtn { display: none !important; }
  .obs-layout { display: block; }
  .obs-rows li { break-inside: avoid; }
  .obs-pill { background: none; color: #000; border: 1px solid #000; }
}