/* Orange County Indexed: the At OCPL page (page-oci-at-ocpl.php, 2026-09-25).
   The lead, the room plan and its key, the two browsers (their rules moved from the Explore page's inline
   block, class names kept so the row markup and scripts are shared), and the routes beyond the shelves.
   Layout rules sit inside breakpoints or on the page's own classes; touch sizing under (pointer: coarse). */

/* the hero carries the same 1768 Sauthier plan of Hillsborough as Explore, under the navy (credit in the image-credits fold on Explore) */
body.page-template-page-oci-at-ocpl .page-hero {
  background: linear-gradient(rgba(10, 35, 66, .88), rgba(0, 63, 99, .90)), url('../img/subjects/colonial-oc.jpg') center 40% / cover no-repeat var(--ocpl-blue);
}
.oco .oco-kicker { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ocpl-blue); }
.oco h2 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; color: var(--heading); margin: 0 0 6px; }
.oco-sub { font-size: var(--fs-md); color: var(--text-mid); line-height: 1.55; margin: 0; max-width: 72ch; }
.oco-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 28px; margin: 0 0 22px; }
.oco-head__text { min-width: 0; }
.oco-head__all { flex: none; font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); text-decoration: none; white-space: nowrap; padding: 6px 14px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--white); }
.oco-head__all:hover { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
@media (max-width: 640px) { .oco-head { flex-wrap: wrap; align-items: flex-start; } .oco-head__all { white-space: normal; } }

/* The lead: one paragraph and the page's four numbers, then the way down the page. */
.oco-lead { padding: 30px 0 28px; background: var(--white); border-bottom: 1px solid var(--border); }
.oco-lead__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 40px; align-items: center; }
.oco-intro { font-size: 1.05rem; line-height: 1.6; color: var(--text); margin: 0; max-width: 62ch; }
.oco-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.oco-nav a { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--white); font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); text-decoration: none; }
.oco-nav a:hover { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.oco-counts { margin-top: 14px; max-width: 62ch; font-size: var(--fs-sm); color: var(--text-mid); }
.oco-counts summary { cursor: pointer; font-weight: 700; color: var(--ocpl-blue-dark); }
.oco-counts p { margin: 6px 0 0; line-height: 1.5; }
.oco-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oco-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--ocpl-blue); border-radius: var(--radius-md); background: var(--white); text-decoration: none; color: inherit; transition: box-shadow var(--transition-fast), transform var(--transition-fast); }
.oco-stat:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 63, 99, .10); text-decoration: none; }
.oco-stat b { font-family: var(--font-display); font-size: 2rem; line-height: 1.05; color: var(--heading); font-variant-numeric: tabular-nums; }
.oco-stat span { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mid); line-height: 1.35; }
.oco-stat--card { border-left-color: var(--ocpl-green-dark); }
@media (max-width: 900px) { .oco-lead__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .oco-stats { grid-template-columns: minmax(0, 1fr); } }

/* The room: the plan stays put while the key scrolls beside it. */
.oco-room { padding: 44px 0; background: var(--ocpl-blue-pale); border-bottom: 1px solid var(--border); }
.oco-room__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.oco-plan { position: sticky; top: calc(var(--oci-sticky-top, 103px) + 14px); margin: 0; padding: 14px 14px 10px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.oco-plan svg { display: block; width: 100%; height: auto; }
.oco-plan figcaption { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-mid); line-height: 1.45; }
.oco-plan__room { fill: #f7f9fb; stroke: var(--heading); stroke-width: 2; }
.oco-plan__furn rect { fill: #e6ebf0; stroke: #c9d2dc; stroke-width: 1; }
.oco-plan__label { font-family: var(--font-heading); font-size: 12px; font-weight: 700; fill: var(--text-mid); }
.oco-plan__side { font-family: var(--font-display); font-size: 20px; font-weight: 700; fill: var(--heading); }
.oco-unit { cursor: pointer; }
.oco-unit rect { stroke: var(--white); stroke-width: 1.5; transition: stroke .15s, filter .15s; }
.oco-unit text { font-family: var(--font-heading); font-size: 11px; font-weight: 800; fill: var(--white); pointer-events: none; }
.oco-unit--bookshelf rect { fill: var(--ocpl-blue); }
.oco-unit--cabinet rect { fill: #7d8a99; }
.oco-unit--computer rect { fill: var(--ocpl-green-dark); }
.oco-unit--print rect { fill: var(--ocpl-orange-light, #f4e1cf); }
.oco-unit--print text { fill: var(--ocpl-orange-dark, #7a3e0a); }
.oco-unit--maps rect, .oco-unit--display rect { fill: var(--ocpl-blue-mid); }
.oco-unit:hover rect, .oco-unit.is-on rect, .oco-unit:focus rect { stroke: var(--ocpl-orange); stroke-width: 3; filter: brightness(1.06); }
.oco-unit:focus { outline: none; }
.oco-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oco-key__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 10px 12px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); scroll-margin-top: calc(var(--oci-sticky-top, 103px) + 16px); transition: border-color .15s, box-shadow .15s; }
.oco-key__item.is-on, .oco-key__item:target { border-color: var(--ocpl-orange); box-shadow: 0 0 0 3px rgba(181, 96, 22, .14); }
.oco-key__item:focus { outline: none; }
.oco-key__letter { grid-row: 1 / 4; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; font-family: var(--font-heading); font-size: 12px; font-weight: 800; color: var(--white); background: var(--ocpl-blue); letter-spacing: .02em; }
.oco-key__item--cabinet .oco-key__letter { background: #7d8a99; }
.oco-key__item--computer .oco-key__letter { background: var(--ocpl-green-dark); }
.oco-key__item--print .oco-key__letter { background: var(--ocpl-orange-light, #f4e1cf); color: var(--ocpl-orange-dark, #7a3e0a); }
.oco-key__item--maps .oco-key__letter, .oco-key__item--display .oco-key__letter { background: var(--ocpl-blue-mid); }
.oco-key strong { font-size: var(--fs-md); color: var(--heading); line-height: 1.3; }
.oco-key p { margin: 0; font-size: var(--fs-sm); color: var(--text-mid); line-height: 1.5; }
.oco-key__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-sm); }
.oco-key__acts:empty { display: none; }
.oco-key__go { font-weight: 700; white-space: nowrap; }
.oco-key__more { display: none; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ocpl-blue-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .oco-room__grid { grid-template-columns: minmax(0, 1fr); } .oco-plan { position: static; }
  .oco-key p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .oco-key__item.is-open p, .oco-key__item:target p { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .oco-key__more { display: inline-flex; min-height: 32px; align-items: center; }
}

/* The two browsers, each a white card on its band. */
.oco-section { padding: 44px 0; }
.oco-section--shelf { background: var(--off-white); border-bottom: 1px solid var(--border); }
.oco-section--wall { background: var(--white); border-bottom: 1px solid var(--border); }
.oco-browse { padding: 18px 20px 20px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); scroll-margin-top: calc(var(--oci-sticky-top, 103px) + 12px); }
.oco-section--wall .oco-browse { background: var(--ocpl-blue-pale); }
.oco-section--wall .oco-browse .ocb-wall__class, .oco-section--wall .oco-browse .ocb-row__chip { background: var(--white); }
.oco-section--wall .oco-browse .ocb-wall__class.is-on { background: var(--ocpl-blue); }
.oco-section--wall .oco-browse .ocb-wall__class--shelf { background: var(--white); border-color: var(--ocpl-blue); }
.oco-section--wall .oco-browse .ocb-wall__class--shelf.is-on { background: var(--ocpl-blue); }
@media (max-width: 560px) { .oco-browse { padding: 14px 14px 16px; } }
.oco-beyond { padding: 44px 0 52px; background: var(--off-white); }
.ocb-countline { font-size: var(--fs-sm); color: var(--text-mid); margin: 0 0 18px; }

/* The three tiles beyond the shelves: the Explore page's card language. */
.ocb-find { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
@media (max-width: 900px) { .ocb-find { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ocb-find { grid-template-columns: minmax(0, 1fr); } }
.ocb-find__card { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--ocpl-blue); border-radius: var(--radius-md); padding: 14px 16px 15px; text-decoration: none; color: inherit; transition: box-shadow var(--transition-fast), transform var(--transition-fast); }
.ocb-find__card:hover { box-shadow: 0 6px 18px rgba(0, 63, 99, .10); transform: translateY(-1px); text-decoration: none; }
.ocb-find__card b { font-size: 1.02rem; font-weight: 700; color: var(--heading); margin: 0; line-height: 1.3; }
.ocb-find__card > span:not(.ocb-find__tag) { font-size: var(--fs-sm); color: var(--text-mid); line-height: 1.5; margin: 0; }
.ocb-find__tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-light); }
.ocb-find__card em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); }
.ocb-find__card--nclive { border-left-color: var(--ocpl-green-dark); }
.ocb-find__card--help { border-left-color: var(--ocpl-orange); }
.ocb-find__card--room { border-left-color: #7d8a99; }

/* ── the browsers' own rules, moved from the Explore page's inline block ── */
.ocb-rows { list-style: none; margin: 0; padding: 0; }
/* Two columns of rows on a wide screen, each a small card: title, meta, the index's description (or the subject
   headings of a Wall title the index does not hold), then the call number and place and theme links (2026-09-25). */
.ocb-shelf__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; margin-top: 4px; }
@media (min-width: 900px) { .ocb-shelf__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ocb-shelf__rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid rgba(10,35,66,.06); font-size: var(--fs-sm); line-height: 1.45; min-width: 0; }
.ocb-shelf__rows .t { flex: 1 1 100%; font-size: var(--fs-md); line-height: 1.35; font-weight: 700; color: var(--heading); text-decoration: none; }
.ocb-shelf__rows .t:hover { color: var(--ocpl-blue); }
.ocb-shelf__rows .y { color: var(--text-mid); font-size: var(--fs-sm); }
.ocb-row__tag { font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--ocpl-blue-pale); color: var(--ocpl-blue-dark); white-space: nowrap; }
.ocb-row__desc { flex: 1 1 100%; margin: 4px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.ocb-row__desc--subj { color: var(--text-mid); }
.ocb-row__lab { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mid); }
.ocb-row__facts { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-mid); min-width: 0; }
.ocb-row__call { white-space: nowrap; }
.ocb-row__chip { display: inline-flex; align-items: center; padding: 1px 9px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--white); font-size: var(--fs-xs); font-weight: 700; color: var(--ocpl-blue-dark); text-decoration: none; line-height: 1.6; }
.ocb-row__chip:hover { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.ocb-row__go { margin-left: auto; align-self: flex-end; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; text-decoration: none; }
.ocb-row__go:hover { text-decoration: underline; }
/* The Wall Collection shelf by shelf: the room's bookshelves as rows, each with its sections as chips. */
.ocb-wall__classes { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.ocb-wall__shelf { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 4px 0 4px 10px; border-left: 3px solid var(--ocpl-blue-light); }
.ocb-wall__class--shelf { background: var(--ocpl-blue-pale); border-color: var(--ocpl-blue-pale); }
.ocb-wall__room { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--ocpl-blue-light); }
/* The collection's own search box, above the shelves. */
.ocb-wall__search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.ocb-wall__search label { font-size: var(--fs-sm); font-weight: 700; color: var(--ocpl-blue-dark); }
.ocb-wall__search input { flex: 1 1 240px; max-width: 480px; padding: 9px 12px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-md); font: inherit; font-size: var(--fs-md); background: var(--white); }
.ocb-wall__searchbtn { padding: 9px 16px; border: 1px solid var(--ocpl-blue); border-radius: var(--radius-pill); background: var(--ocpl-blue); color: var(--white); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.ocb-wall__searchbtn:hover { background: var(--ocpl-blue-dark); }
@media (pointer: coarse) { .ocb-wall__search input, .ocb-wall__searchbtn { min-height: 44px; } }
.ocb-wall__class { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill); background: var(--white); font-size: var(--fs-xs); font-weight: 700; color: var(--ocpl-blue-dark); text-decoration: none; }
.ocb-wall__class span { font-weight: 400; color: var(--text-light); font-variant-numeric: tabular-nums; }
.ocb-wall__class:hover, .ocb-wall__class.is-on { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.ocb-wall__class:hover span, .ocb-wall__class.is-on span { color: rgba(255,255,255,.8); }
.ocb-wall__class:focus-visible, .ocb-row__chip:focus-visible { outline: 3px solid var(--ocpl-blue); outline-offset: 2px; }
.ocb-wall__range { color: var(--text-light); }
.ocb-countline b { color: var(--heading); }
@media (pointer: coarse) { .ocb-wall__class, .ocb-row__chip { min-height: 44px; } }
.ocb-more-wrap { text-align: center; margin: 18px 0 0; }
.ocb-more { padding: 9px 22px; border: 1px solid var(--ocpl-blue); border-radius: var(--radius-pill); background: var(--white); color: var(--ocpl-blue-dark); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.ocb-more:hover { background: var(--ocpl-blue); color: var(--white); }
.ocb-more[disabled] { opacity: .6; cursor: default; }
.ocb-more__rest { font-weight: 400; color: var(--text-mid); margin-left: 6px; }
.ocb-more:hover .ocb-more__rest { color: rgba(255, 255, 255, .85); }