/* page-spaces.css: Libraries (#libraries: catalog search, library hours, Study spaces tab), #spaces/new and
   #spaces/mine. spec/page-libraries.md over spec/page-spaces.md 2 and 3. Every stylesheet loads on every route,
   so Libraries rules sit under .lb (page root) or #drawer-content > .lb-detail; Study spaces keep the ss- prefix.
   Layout only; components (list, rows, seg, tabs, badges, detail frame, menus, modal, table) are dibs.css. */

/* ---------- shared: dot plus word state (color never carries the meaning alone) ---------- */
.ss-state { display: inline-flex; align-items: center; gap: 6px; font: var(--t-meta); white-space: nowrap; }
.ss-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.ss-none { margin: 0; font: var(--t-meta); color: var(--muted); }

/* ---------- Study spaces tab (page-spaces.md 2.2): toolbar, count 16 below, list 8 below ---------- */
.ss-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.ss-search { flex: 0 1 240px; min-width: 180px; height: 32px; }
.ss-search input { height: 30px; }
.ss-search input:not(:placeholder-shown) ~ kbd { display: none; }
:is(#ss-sort, :where(#ss-sort + .csel)) { margin-left: auto; }
.ss-phone { display: none; }
#ss-filters .t-muted { margin-left: -2px; font-variant-numeric: tabular-nums; }
.ss-count { display: flex; align-items: center; gap: var(--s-4); min-height: 20px; margin-bottom: var(--s-2); }
.ss-count-n { font: var(--t-label); color: var(--muted); }
.ss-count .text-btn { min-height: 20px; padding: 0 var(--s-2); font: var(--t-label); }
.ss-err { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--ink-2); }
.ss-err .icon { color: var(--warning); }
.ss-err .text-btn { min-height: 24px; padding: 0 var(--s-2); }
.ss-row { padding: var(--s-3) var(--s-4); }
.ss-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); min-width: 0; }
.ss-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-item); color: var(--ink); }
.ss-rstate { flex-shrink: 0; }
.ss-meta { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); margin-top: var(--s-1); font: var(--t-meta); color: var(--muted); }
.ss-meta .fact { min-width: 0; }
.ss-meta .fact .icon { flex-shrink: 0; }
.ss-meta .ss-loc { flex-shrink: 1; max-width: 100%; }
.ss-meta .ss-loc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ss-pair { display: inline-flex; gap: var(--s-4); white-space: nowrap; }
.ss-meta .icon { color: var(--muted); }
.ss-skel .skel { height: 14px; }
.ss-skel .ss-meta { margin-top: var(--s-2); }

/* ---------- detail frames (pane 480 at 1280 and up, drawer, sheet under 600) ---------- */
.ss-dstate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin: 0; font: var(--t-meta); }
.ss-dstate a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ss-db > .ss-dstate + .dsec { margin-top: var(--s-6); }
.ss-facts { margin: 0; padding: 0 0 var(--s-4); list-style: none; border-bottom: 1px solid var(--line); }
.ss-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--s-4); align-items: start; padding: var(--s-2) 0; }
.ss-facts .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--muted); }
.ss-fl { margin: 0; font: var(--t-control); font-weight: 600; color: var(--ink); }
.ss-fv { margin: 0; font: var(--t-meta); color: var(--muted); }
.ss-fl .d-ext { font-weight: 600; }
/* AM53 hours block: state left, today's range right, a rule, then the Sunday-first week */
#drawer-content > .lb-detail .hb-now { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 40px; border-bottom: 1px solid var(--line); font: var(--t-meta); color: var(--ink); }
#drawer-content > .lb-detail .hb-now > .tabular { font-weight: 600; text-align: right; }
#drawer-content > .lb-detail .hb-week { margin: var(--s-2) 0 0; padding: 0; list-style: none; }
#drawer-content > .lb-detail .hb-week li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); min-height: 32px; margin: 0 calc(-1 * var(--s-2)); padding: 6px var(--s-2); border-radius: var(--r-control); font: var(--t-meta); color: var(--ink-2); }
#drawer-content > .lb-detail .hb-week li.is-today { background: var(--surface-2); color: var(--ink); font-weight: 600; }
#drawer-content > .lb-detail .hb-range { text-align: right; }
/* About and comments (A57) */
.ss-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ss-clamp3 { -webkit-line-clamp: 3; }
.ss-clamp4 { -webkit-line-clamp: 4; }
.ss-clamp.is-open { display: block; -webkit-line-clamp: unset; }
.ss-clamp:focus { outline: none; }
.ss-more { margin-top: var(--s-1); }
.ss-note { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.ss-comments h3 .t-muted { font-weight: 400; }
.ss-clist { margin: 0; padding: 0; list-style: none; }
.ss-c + .ss-c { margin-top: var(--s-6); }
.ss-chead { display: flex; align-items: center; gap: var(--s-2); min-height: 28px; }
.ss-cname { font: var(--t-control); font-weight: 600; color: var(--ink); }
.ss-cname:focus { outline: none; }
.ss-cdate { font: var(--t-label); font-weight: 400; color: var(--muted); }
.ss-cmore { margin-left: auto; }
.ss-c > p { margin: 2px 0 0; font: var(--t-body); color: var(--ink-2); }
.ss-allc { margin-top: var(--s-4); }
.ss-cform, .ss-signin { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.ss-cform textarea { margin-top: 6px; }
.ss-cbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-top: 6px; }
.ss-cbar .field-help { margin: 0; }
.ss-ccount { flex-shrink: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.ss-ccount:empty { display: none; }
.ss-cform .field-error { margin: 6px 0 0; }
.ss-csend { display: flex; justify-content: flex-end; margin-top: var(--s-3); }
.ss-signin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ss-signin p { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.ss-dfoot .text-btn { gap: var(--s-2); }
/* filter sheet and report modal: radio lists (sys 9.4) */
.ss-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-fs > legend { padding: 0; margin-bottom: var(--s-1); font: var(--t-control); font-weight: 600; color: var(--ink); }
.ss-fs > .field-help { margin: 0 0 var(--s-1); }
.ss-radio { min-height: 32px; font: var(--t-body); color: var(--ink); cursor: pointer; }
.ss-mfield { margin-top: var(--s-4); }
.ss-sheet .switch-row { padding: var(--s-2) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#drawer.ss-frame { scrollbar-width: thin; }

/* ---------- #spaces/new and #spaces/mine ---------- */
.ss-form > h1 { margin-bottom: var(--s-1); }
.ss-fsub { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.ss-flede { margin: var(--s-1) 0 var(--s-6); font: var(--t-meta); color: var(--muted); }
.ss-form textarea { min-height: 120px; }
.ss-ftop { margin-top: var(--s-4); }
.ss-ffoot { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-6); }
.ss-gate { padding-top: var(--s-8); }
.ss-mine { max-width: var(--w-list); }
.ss-mine .set-sec > .table-wrap, .ss-mine .set-sec > .list, .ss-mine .set-sec > .ss-none { margin-top: var(--s-3); }
.ss-table td { vertical-align: top; }
.ss-tmain > span:first-child { display: block; }
.ss-ttype { width: 120px; }
.ss-tstat { width: 140px; }
.ss-tdate { width: 110px; white-space: nowrap; }
.ss-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 460px; }

/* ================= #libraries (spec/page-libraries.md 3) =================
   b1r1 m3: both tabs share one width, so the tab underline and the right-hand actions stay put when the tab
   changes (refs/vercel-geist-tabs.png keeps one container under its tabs). */
.lb { max-width: var(--w-list); }
.lb .page-head { margin-bottom: var(--s-6); }
/* R2: underline tabs left, the tab's actions right (sys 9.4) */
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.lb-bar .tabs { border-bottom: 0; }
.lb-actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--s-2); }
.lb-actions:empty { display: none; }
.lb .hv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); }
.lb .hv-bar .hv-days { margin: 0; }
/* R3: one search line directly above the list it replaces (L285, AM93) */
.lb .lb-search { display: flex; gap: var(--s-2); margin: 0 0 var(--s-4); }
.lb .lb-field { flex: 1; min-width: 0; max-width: none; height: 36px; }
.lb .lb-field input { height: 34px; } /* b2r5 m3: inherits the .searchbox 14px control font (geist input) */
.lb .lb-field input::-webkit-search-cancel-button { display: none; }
.lb .lb-x { width: 28px; height: 28px; min-height: 28px; margin-right: -4px; }
.lb .lb-x .icon { width: 16px; height: 16px; }
.lb .lb-go { flex-shrink: 0; min-height: 36px; gap: 6px; }
.lb .lb-go .spinner { width: 16px; height: 16px; }
.lb .lb-scoped { margin: calc(-1 * var(--s-2)) 0 var(--s-4); }
.lb .lb-chip { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 2px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font: var(--t-label); color: var(--ink); white-space: nowrap; }
.lb .lb-chip-x { width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); }
.lb .lb-chip-x:hover { background: var(--surface-2); color: var(--ink); }
.lb .lb-chip-x .icon { width: 14px; height: 14px; }
/* R4 day picker: the site's segmented control (.seg, sys 9.4; the Calendar's Month/Week/Agenda). b1r1 m4 */
.lb .hv-days { display: flex; width: max-content; max-width: 100%; margin: 0 0 var(--s-4); overflow-x: auto; scrollbar-width: none; }
.lb .hv-days::-webkit-scrollbar { display: none; }
.lb .hv-days > button { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb .hv-days small { display: none; }
.lb .hv-days > button[aria-current="date"] .hv-dnum { text-decoration: underline 2px var(--accent); text-underline-offset: 3px; }
.lb .hv-dl { white-space: nowrap; }
.lb .hv-dayline { margin: 0 0 var(--s-3); font: var(--t-meta); color: var(--muted); }
/* R5 hours list: L38 bands, AM93 rows (name, where line, state in words) */
.lb .hv-list { overflow: hidden; }
.lb .hv-ghead { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-4); background: var(--bg); border-bottom: 1px solid var(--line); font: var(--t-label); color: var(--ink); }
.lb .hv-group + .hv-group > .hv-ghead { border-top: 1px solid var(--line); }
.lb .hv-gn { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.lb .hv-row { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); color: var(--ink); text-decoration: none; }
.lb a.hv-row:hover { background: var(--bg); text-decoration: none; }
.lb a.hv-row:hover .hv-name { text-decoration: underline; }
.lb .hv-row.selected { background: var(--surface-2); }
.lb .hv-lib + .hv-lib, .lb .hv-group > .hv-row + .hv-row { border-top: 1px solid var(--line); }
.lb .hv-row.is-child { position: relative; padding-left: calc(var(--s-4) + 24px); padding-top: var(--s-2); }
.lb .hv-row.is-child::before { content: ''; position: absolute; left: calc(var(--s-4) + 8px); top: 0; bottom: var(--s-2); width: 1px; background: var(--line); }
.lb .hv-row.is-child .hv-name { font: var(--t-control); font-weight: 600; }
.lb .hv-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); min-width: 0; }
.lb .hv-name { min-width: 0; font: var(--t-item); color: var(--ink); }
.lb .hv-st, .lb .hv-range { flex-shrink: 0; }
.lb .hv-range { font: var(--t-meta); font-weight: 600; color: var(--ink); white-space: nowrap; }
.lb .hv-range.t-muted { font-weight: 400; color: var(--muted); }
.lb .hv-sub { font: var(--t-meta); color: var(--muted); }
.lb .hv-sub .d-ext { margin-left: var(--s-1); }
/* R6 source line */
.lb .hv-src { margin: var(--s-6) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.lb .hv-src .d-ext { font-weight: 500; }

/* results (spec 6.4): L285 flat rows inside one AM93 container */
.lb .lb-results { margin: 0 0 var(--s-4); outline: none; }
.lb .lb-rhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: 32px; margin-bottom: var(--s-2); }
.lb .lb-rcount { flex: 1 1 auto; margin: 0; font: var(--t-meta); color: var(--muted); }
.lb .lb-rhead [data-lb-clear] { margin-left: auto; }
.lb .lb-rstat { margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--muted); }
.lb .lb-res { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; min-height: 0; padding: var(--s-3) var(--s-4); border: 0; border-radius: 0; background: transparent; text-align: left; font: var(--t-meta); color: var(--ink); }
.lb .lb-res:hover { background: var(--bg); }
.lb .lb-res.selected { background: var(--surface-2); }
.lb .lb-res:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lb .lb-r1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); min-width: 0; }
.lb .lb-rt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-width: 0; font: 400 16px/22px var(--font-ui); color: var(--ink); }
.lb .lb-rt b { font-weight: 600; }
.lb .lb-ry { flex-shrink: 0; font: var(--t-meta); color: var(--muted); }
.lb .lb-r2 { font: var(--t-meta); color: var(--muted); }
.lb .lb-y2 { display: none; }
.lb .lb-hold, #drawer-content > .lb-detail .lb-hold { align-items: baseline; white-space: normal; }
.lb .lb-hold > .ss-dot, #drawer-content > .lb-detail .lb-hold > .ss-dot { transform: translateY(-2px); }
.lb .lb-skel { gap: var(--s-2); }
.lb .lb-skel .skel { height: 14px; }
.lb .lb-more { display: flex; justify-content: center; margin-top: var(--s-3); }
.lb .lb-note { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.lb .lb-relax { margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--ink-2); }
.lb .lb-relax b { font-weight: 600; color: var(--ink); }
/* "Search instead for ..." is a link inside the sentence: a space after the bold query, accent and underlined */
.lb .lb-inline { display: inline; min-height: 0; margin: 0 0 0 4px; padding: 0 2px; font: inherit; vertical-align: baseline; text-decoration: underline; text-underline-offset: 2px; }
.lb .lb-inline:hover { background: transparent; text-decoration-thickness: 2px; }
/* L284 no results and "did not answer": a plain centered sentence, no border or background */
.lb .lb-none { padding: var(--s-8) var(--s-4); border: 0; background: none; text-align: center; }
.lb .lb-none p { margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--muted); }
.lb .lb-none p:first-child { color: var(--ink-2); }
.lb .lb-none .text-btn { margin: 0; }
.lb .lb-none-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-4); }
/* the Biomed shelf answer for a typed call number (no network) */
.lb .lb-shelf { margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.lb .lb-h3, #drawer-content > .lb-detail .lb-h3 { margin: 0 0 var(--s-3); font: var(--t-item); color: var(--ink); }
.lb .lb-why, #drawer-content > .lb-detail .lb-why { margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--muted); }
/* AM71 route line: muted building, then level, row and shelf, the side in 600 with the range right */
.lb .lb-loc, #drawer-content > .lb-detail .lb-loc { margin-top: var(--s-2); padding: var(--s-4); border-radius: var(--r-panel); background: var(--surface-2); }
.lb .lb-route, #drawer-content > .lb-detail .lb-route { position: relative; margin: 0; padding: 0; list-style: none; }
.lb .lb-route::before, #drawer-content > .lb-detail .lb-route::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px; background: var(--line-strong); }
.lb .lb-route li, #drawer-content > .lb-detail .lb-route li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); min-height: 28px; padding: 4px 0 4px 24px; font: var(--t-meta); color: var(--ink); }
.lb .lb-route li::before, #drawer-content > .lb-detail .lb-route li::before { content: ''; position: absolute; left: 1px; top: 10px; width: 9px; height: 9px; border: 1px solid var(--ink-2); border-radius: var(--r-pill); background: var(--surface-2); }
.lb .lb-route li.is-muted, #drawer-content > .lb-detail .lb-route li.is-muted { color: var(--muted); }
.lb .lb-route li.is-muted::before, #drawer-content > .lb-detail .lb-route li.is-muted::before { border-color: var(--line-strong); }
.lb .lb-route li.is-end, #drawer-content > .lb-detail .lb-route li.is-end { font-weight: 600; }
.lb .lb-route li.is-end::before, #drawer-content > .lb-detail .lb-route li.is-end::before { background: var(--ink); border-color: var(--ink); }
.lb .lb-rng, #drawer-content > .lb-detail .lb-rng { flex-shrink: 0; text-align: right; }
.lb .lb-loc-note, #drawer-content > .lb-detail .lb-loc-note { margin: var(--s-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--ink-2); }
.lb .lb-attr, #drawer-content > .lb-detail .lb-attr { margin: var(--s-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
/* article access (spec 6.7) */
.lb .lb-art-h { padding: var(--s-4); border-bottom: 1px solid var(--line); }
.lb .lb-art-id { margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.lb .lb-art-t { margin: var(--s-1) 0 0; font: var(--t-h2); color: var(--ink); }
.lb .lb-art-j { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.lb .lb-art-b { padding: var(--s-4); }
.lb .lb-art-b > p { margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--ink-2); }
.lb .lb-prov { margin: 0; padding: 0; list-style: none; }
.lb .lb-prov li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); min-height: 44px; padding: var(--s-2) 0; border-top: 1px solid var(--line); font: var(--t-meta); }
.lb .lb-prov li:first-child { border-top: 0; }
.lb .lb-prov a { font-weight: 600; color: var(--ink); }
.lb .lb-cov, #drawer-content > .lb-detail .lb-cov { font: var(--t-meta); color: var(--muted); }

/* result and library detail (spec 4.3, 6.5) */
#drawer-content > .lb-detail .lb-by { margin: 0; font: var(--t-meta); color: var(--muted); }
#drawer-content > .lb-detail .lb-hgroup { border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
#drawer-content > .lb-detail .lb-hgroup + .lb-hgroup { margin-top: var(--s-3); }
#drawer-content > .lb-detail .lb-band { display: flex; align-items: center; min-height: 36px; padding: 0 var(--s-4); background: var(--bg); border-bottom: 1px solid var(--line); font: var(--t-label); color: var(--ink); }
#drawer-content > .lb-detail .lb-band .hv-gn { font-weight: 400; color: var(--muted); }
#drawer-content > .lb-detail .lb-holds { margin: 0; padding: 0; list-style: none; }
#drawer-content > .lb-detail .lb-hrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s-3) var(--s-4); }
#drawer-content > .lb-detail .lb-hrow + .lb-hrow { border-top: 1px solid var(--line); }
#drawer-content > .lb-detail .lb-hrow > .lb-loc { align-self: stretch; }
#drawer-content > .lb-detail .lb-where { font: var(--t-meta); color: var(--ink-2); }
#drawer-content > .lb-detail .lb-cnrow { display: flex; align-items: center; gap: var(--s-2); min-height: 28px; }
#drawer-content > .lb-detail .lb-cn { font: var(--t-meta); font-weight: 600; color: var(--ink); }
#drawer-content > .lb-detail .lb-copy { width: 28px; height: 28px; min-height: 28px; }
#drawer-content > .lb-detail .lb-online, #drawer-content > .lb-detail .lb-edlist { margin: 0; padding: 0; list-style: none; }
#drawer-content > .lb-detail .lb-online li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); min-height: 36px; padding: 6px 0; border-bottom: 1px solid var(--line); font: var(--t-meta); }
#drawer-content > .lb-detail .lb-online a { font-weight: 600; color: var(--ink); }
#drawer-content > .lb-detail .lb-eds > summary { min-height: 36px; font: var(--t-control); color: var(--ink); }
#drawer-content > .lb-detail .lb-edlist li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); font: var(--t-meta); }
#drawer-content > .lb-detail .lb-edlist .lb-hold { grid-column: 2; }
#drawer-content > .lb-detail .lb-edy { color: var(--muted); }
#drawer-content > .lb-detail .hv-dlist { margin: 0; padding: 0; list-style: none; }
#drawer-content > .lb-detail .hv-dlist li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; border-bottom: 1px solid var(--line); font: var(--t-meta); }
#drawer-content > .lb-detail .hv-dlist li:last-child { border-bottom: 0; }
#drawer-content > .lb-detail .hv-dlist a { color: var(--ink); }
#drawer-content > .lb-detail .lb-same { text-align: right; }
/* East Asian line: the shown day on line 1, other days this week that differ listed under it */
#drawer-content > .lb-detail .hv-dlist li.lb-eal { display: block; padding: var(--s-3) 0; }
#drawer-content > .lb-detail .lb-eal-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
#drawer-content > .lb-detail .lb-eal-days { margin: var(--s-1) 0 0; padding: 0; list-style: none; color: var(--muted); }
#drawer-content > .lb-detail .lb-eal-days li { display: block; min-height: 0; border: 0; }
#drawer-content > .lb-detail .lb-sub3 { margin: var(--s-4) 0 0; font: var(--t-label); color: var(--muted); }
/* AM52 details: label left, value right, hairlines */
#drawer-content > .lb-detail .lb-facts { margin: 0; }
#drawer-content > .lb-detail .lb-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); min-height: 44px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font: var(--t-meta); }
#drawer-content > .lb-detail .lb-facts > div:last-child { border-bottom: 0; }
#drawer-content > .lb-detail .lb-facts dt { flex-shrink: 0; color: var(--muted); }
#drawer-content > .lb-detail .lb-facts dd { margin: 0; text-align: right; color: var(--ink); }

/* ---------- owner 23 Oct: Worth a visit. DD13: one quiet word added to the existing meta line, the same in the list
   and the detail; no icon, no accent colour, no panel, and the row keeps its height. libgeochk2 minor 1: as DD13's
   "Sponsored" it is lighter than the place line, not heavier: regular weight and a step lighter than --muted
   (mixed toward the surface; 4.6:1 on --surface-2 and 5.3:1 on --surface in light, 6.7:1 in dark) ---------- */
.lb .hv-sub .lb-pick, #drawer-content > .lb-detail .lb-pick { font-weight: 400; color: color-mix(in srgb, var(--muted) 93%, var(--surface)); white-space: nowrap; }
.lb .lb-dot, #drawer-content > .lb-detail .lb-dot { display: inline-block; width: 3px; height: 3px; margin: 0 var(--s-2); border-radius: var(--r-pill); background: currentColor; vertical-align: middle; }
/* the separator a screen reader hears where the dot is drawn (", " in the row, ": " in the detail): kept inline at
   zero size, not .sr-only, because an absolutely placed span makes Chrome read "Building , Worth a visit"
   (libgeochk2 nit 6) */
.lb .lb-sep, #drawer-content > .lb-detail .lb-sep { font-size: 0; line-height: 0; }
#drawer-content > .lb-detail .lb-pick-d { margin: 0; font: var(--t-meta); color: var(--muted); }
/* libgeochk2 nit 1 (spec 13 item 13: Hours moves down at most 64 px): the line reads as the header's subtitle, 8 px
   under it as .d-title does (b1r4 n7), and the first section follows 16 px below, so the line costs its own height */
#drawer-content > .lb-detail .db > .lb-pick-d:first-child { margin-top: calc(-1 * var(--s-4)); }
#drawer-content > .lb-detail .db > .lb-pick-d + * { margin-top: var(--s-4); }
#drawer-content > .lb-detail .lb-pick-by { white-space: nowrap; }
/* ---------- owner 23 Oct: Getting there (AM60: a plain leading number, the instruction, hairlines from the text
   column; UE28: the photo as a small whole thumbnail beside its instruction) ---------- */
#drawer-content > .lb-detail .lb-steps { margin: 0; padding: 0; list-style: none; }
#drawer-content > .lb-detail .lb-steps > li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: start; padding: var(--s-3) 0; }
#drawer-content > .lb-detail .lb-steps > li:first-child { padding-top: 0; }
#drawer-content > .lb-detail .lb-steps > li + li::before { content: ''; position: absolute; top: 0; right: 0; left: calc(24px + var(--s-3)); border-top: 1px solid var(--line); }
#drawer-content > .lb-detail .lb-num { font: var(--t-item); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
#drawer-content > .lb-detail .lb-step-t { margin: 0; font: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }
/* libgeochk2 minor 2: UE28's photo tile is about 48 pt square; the step tile is 48 px square, so a step with a photo
   is about as tall as two text lines and a text-only step leaves no empty space beside a tall thumbnail */
#drawer-content > .lb-detail .lb-step-ph { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); cursor: zoom-in; }
#drawer-content > .lb-detail .lb-step-ph:hover { background: var(--surface-2); }
#drawer-content > .lb-detail .lb-step-ph:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the whole photo inside the tile, never cropped: the long edge fills the tile and the other edge follows the photo */
#drawer-content > .lb-detail .lb-step-ph img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
#drawer-content > .lb-detail .lb-step-by { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
#drawer-content > .lb-detail .lb-step-by .d-ext { color: var(--muted); }
/* libgeochk2 minor 5: a draft is marked once, as UE28 marks its instruction field "Needs review": one tinted chip on
   the heading or label row, and the reason as a plain muted line (no tinted panel around a second marker) */
#drawer-content > .lb-detail .lb-draft-why { margin: 0 0 var(--s-3); font: var(--t-meta); color: var(--muted); }
#drawer-content > .lb-detail .lb-dir h3 .badge { margin-left: var(--s-1); vertical-align: 2px; }
#drawer-content > .lb-detail .lb-labrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
#drawer-content > .lb-detail .lb-labrow .badge { flex-shrink: 0; }
/* the larger photo (DD25: a title, the photo whole, a credit; L193: the image alone on the plain dialog background,
   fit inside the window, close at the corner; libgeochk2 nit 2: no grey box around a portrait photo) */
dialog.modal.lb-photo-modal { width: min(960px, calc(100vw - 32px)); }
dialog.modal.lb-photo-modal .lb-ph-body { padding-bottom: var(--s-6); }
dialog.modal.lb-photo-modal img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 220px); margin: 0 auto; object-fit: contain; border-radius: var(--r-control); }
dialog.modal.lb-photo-modal .lb-ph-cap { margin: var(--s-3) 0 0; font: var(--t-body); color: var(--ink); }
dialog.modal.lb-photo-modal .lb-ph-by { margin: var(--s-1) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
/* owner-only promotion form (CG99: note field with its count, switch row with a line that follows it, Cancel and
   Save at the end; AM45: says who sees it) */
#drawer-content > .lb-detail .lb-owner { padding-top: var(--s-4); border-top: 1px dashed var(--line-strong); }
#drawer-content > .lb-detail .lb-owner .pm-field { margin-top: var(--s-2); }
#drawer-content > .lb-detail .lb-owner textarea { display: block; width: 100%; resize: vertical; }
/* CG99: the help sits between the label and the field; the count is alone on its line, left, under the field */
#drawer-content > .lb-detail .lb-owner .lb-promo-help { margin: 2px 0 6px; }
#drawer-content > .lb-detail .lb-owner .lb-promo-count { margin: var(--s-1) 0 0; text-align: left; }
#drawer-content > .lb-detail .lb-owner .lb-draft-why { margin: var(--s-1) 0 0; font: var(--t-label); font-weight: 400; }
#drawer-content > .lb-detail .lb-sw { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; margin-top: var(--s-3); }
#drawer-content > .lb-detail .lb-sw label { font: var(--t-control); font-weight: 600; color: var(--ink); }
#drawer-content > .lb-detail .lb-sw-help { margin: 0; }
#drawer-content > .lb-detail .lb-owner-lede { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
#drawer-content > .lb-detail .lb-owner-foot { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); }
/* the directions editor (UE268: compact numbered rows, the row's actions at its end, "Add a stop" last; UE28: the
   photo thumbnail beside its description) */
#drawer-content > .lb-editor .lb-ed-for { margin: 0; min-width: 0; font: var(--t-item); color: var(--ink); }
#drawer-content > .lb-editor .lb-ed-lede { margin: var(--s-1) 0 var(--s-4); font: var(--t-meta); color: var(--muted); }
#drawer-content > .lb-editor .lb-ed-steps { margin: 0; padding: 0; list-style: none; }
#drawer-content > .lb-editor .lb-ed-step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--s-2); align-items: start; padding: var(--s-2) 0; }
#drawer-content > .lb-editor .lb-ed-step + .lb-ed-step::before { content: ''; position: absolute; top: 0; right: 0; left: calc(24px + var(--s-2)); border-top: 1px solid var(--line); }
#drawer-content > .lb-editor .lb-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 8px; border-radius: var(--r-control); background: var(--ink); color: var(--surface); font: var(--t-small); font-variant-numeric: tabular-nums; }
#drawer-content > .lb-editor .lb-ed-f { min-width: 0; }
#drawer-content > .lb-editor .lb-ed-f textarea { display: block; width: 100%; min-height: 40px; max-height: 200px; resize: vertical; field-sizing: content; }
#drawer-content > .lb-editor .lb-ed-acts { display: flex; gap: 0; }
#drawer-content > .lb-editor .lb-ed-acts .icon-btn:disabled { opacity: .4; }
#drawer-content > .lb-editor .lb-ed-src { margin-top: var(--s-1); }
#drawer-content > .lb-editor .lb-ed-add-ph { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; margin-top: var(--s-1); margin-left: calc(-1 * var(--s-2)); padding: 0 var(--s-2); border: 0; background: transparent; color: var(--ink-2); font: var(--t-control); }
#drawer-content > .lb-editor .lb-ed-add-ph:hover { background: var(--surface-2); color: var(--ink); }
#drawer-content > .lb-editor .lb-ed-photo { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-2); }
/* UE28: the same 48 px tile as the student list, the whole photo inside */
#drawer-content > .lb-editor .lb-ed-thumb { width: 48px; height: 48px; object-fit: contain; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface-2); }
#drawer-content > .lb-editor .lb-ed-pf label { display: block; font: var(--t-control); font-weight: 600; color: var(--ink); }
#drawer-content > .lb-editor .lb-ed-pf input { display: block; width: 100%; margin-top: 6px; }
#drawer-content > .lb-editor .lb-req { margin-left: var(--s-1); font: var(--t-label); font-weight: 400; color: var(--muted); }
#drawer-content > .lb-editor .lb-ed-pacts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-1); }
#drawer-content > .lb-editor .lb-ed-pacts .text-btn { margin-left: calc(-1 * var(--s-2)); }
#drawer-content > .lb-editor .lb-ed-add { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2); width: 100%; min-height: 44px; margin-top: var(--s-2); padding: 0 var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r-panel); background: transparent; color: var(--ink-2); font: var(--t-control); }
#drawer-content > .lb-editor .lb-ed-add:hover { background: var(--surface-2); color: var(--ink); }
#drawer-content > .lb-editor .lb-ed-empty { margin: 0 0 var(--s-2); }
#drawer-content > .lb-editor .lb-ed-rules { margin-top: var(--s-3); }
#drawer-content > .lb-editor .lb-ed-top { margin-top: var(--s-3); }
#drawer-content > .lb-editor .lb-draft-why { margin: calc(-1 * var(--s-2)) 0 var(--s-4); }
#drawer-content > .lb-editor .df { position: sticky; bottom: 0; border-top: 1px solid var(--line); background: var(--surface); }
@media (pointer: coarse), (max-width: 599px) {
  #drawer-content > .lb-editor .lb-ed-acts .icon-btn { width: 44px; height: 44px; min-height: 44px; }
  #drawer-content > .lb-editor .lb-ed-add-ph, #drawer-content > .lb-editor .lb-ed-pacts .text-btn { min-height: 44px; }
  #drawer-content > .lb-detail .lb-dir .dsec-head .text-btn { min-height: 44px; }
}
/* a narrow phone (libgeochk2 minor 3): UE268 keeps a stop's actions at its row end, so move up, move down and delete
   stay beside the step field as one 44 px column and the field keeps about 200 px. The photo's Replace and Remove
   sit together beside its thumbnail, and the description field takes the full width under them. */
@media (max-width: 419px) {
  #drawer-content > .lb-editor .lb-ed-acts { flex-direction: column; margin-right: calc(-1 * var(--s-1)); }
  #drawer-content > .lb-editor .lb-ed-pf { display: contents; }
  #drawer-content > .lb-editor .lb-ed-photo { row-gap: var(--s-1); align-items: center; }
  #drawer-content > .lb-editor .lb-ed-thumb { grid-column: 1; grid-row: 1; }
  #drawer-content > .lb-editor .lb-ed-pacts { grid-column: 2; grid-row: 1; flex-wrap: nowrap; margin-top: 0; }
  #drawer-content > .lb-editor .lb-ed-pf > :not(.lb-ed-pacts) { grid-column: 1 / -1; }
  #drawer-content > .lb-editor .lb-ed-pf > label { margin-top: var(--s-2); }
}


@media (min-width: 768px) {
  .lb .lb-res .lb-r1 .lb-ry { display: inline; }
}
@media (max-width: 767px) {
  .lb .lb-ry { display: none; }
  .lb .lb-y2 { display: inline; }
}
/* phones (spec 9) */
@media (max-width: 599px) {
  /* spec 9: at 390 by 844 the hours list starts high enough for five rows without scrolling */
  .lb .page-head { margin-bottom: var(--s-2); }
  .lb-bar { gap: var(--s-2); margin-bottom: var(--s-3); }
  .lb .hv-bar { margin-bottom: var(--s-2); }
  .lb #hv-open { min-height: 44px; padding: 0 var(--s-3); }
  /* libpolishchk nit 1: the sheet body pads 16 here, not 24, so the pick line keeps 8 under the header with -8, and
     8 before the first section keeps its cost to its own height (40 px at 390, 60 px at 320) */
  #drawer-content > .lb-detail .db > .lb-pick-d:first-child { margin-top: calc(-1 * var(--s-2)); }
  #drawer-content > .lb-detail .db > .lb-pick-d + * { margin-top: var(--s-2); }
  .lb.is-spaces .lb-bar { flex-wrap: wrap; border-bottom: 0; }
  .lb.is-spaces .lb-bar .tabs { flex: 1 1 100%; border-bottom: 1px solid var(--line); }
  .lb.is-spaces .lb-actions { width: 100%; }
  .lb.is-spaces .lb-actions > * { flex: 1 1 0; }
  .lb .lb-field { height: 44px; }
  .lb .lb-field input { height: 42px; }
  .lb .lb-x { width: 44px; height: 44px; min-height: 44px; margin-right: -8px; }
  .lb .lb-go { width: 44px; min-height: 44px; padding: 0; }
  .lb .lb-go-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lb .lb-search { margin-bottom: var(--s-2); }
  .lb .lb-scoped { margin: 0 0 var(--s-3); }
  .lb .hv-days { width: 100%; margin-bottom: var(--s-2); }
  .lb .hv-days > button { flex: 1 1 0; min-width: 0; padding: 0; }
  .lb .hv-dl { display: flex; flex-direction: column; align-items: center; line-height: 16px; }
  .lb .hv-dow { font: var(--t-small); }
  /* AM93 row order: name, the location line, then the open state in words */
  .lb .hv-row > .hv-l1 { display: contents; }
  .lb .hv-row > .hv-sub { order: 1; }
  .lb .hv-row > .hv-l1 > .hv-st, .lb .hv-row > .hv-l1 > .hv-range { order: 2; align-self: flex-start; }
  .lb .lb-rhead [data-lb-clear], .lb .lb-none [data-lb-clear] { min-height: 44px; }
  .lb .lb-route li { flex-wrap: wrap; }
  #drawer-content > .lb-detail .lb-copy { width: 44px; height: 44px; min-height: 44px; }
  #drawer-content > .lb-detail .lb-cnrow { flex-wrap: wrap; }
  #drawer-content > .lb-detail .lb-route li { flex-wrap: wrap; }
  /* AM52: label left, value right at phone width too; only the value wraps */
  #drawer-content > .lb-detail .lb-facts dd { min-width: 0; overflow-wrap: anywhere; }
  .ss-desk, .ss-talk { display: none; }
  .ss-phone { display: inline-flex; flex-shrink: 0; }
  .ss-search { flex: 1 1 160px; height: 44px; max-width: none; }
  .ss-search input { height: 42px; }
  .ss-search kbd { display: none; }
  /* b2r4 m1: AM93 row order, as Libraries: name, the place line, then the open state in words */
  .ss-row { display: flex; flex-direction: column; gap: 2px; }
  .ss-row > .ss-l1 { display: contents; }
  .ss-row > .ss-meta { order: 1; margin-top: 0; }
  .ss-row > .ss-l1 > .ss-rstate { order: 2; align-self: flex-start; }
  .ss-name { white-space: normal; }
  .ss-ffoot { flex-direction: column-reverse; align-items: stretch; }
  .ss-table thead { display: none; }
  .ss-table, .ss-table tbody { display: block; }
  .ss-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .ss-table tr:last-child { border-bottom: 0; }
  .ss-table td { display: block; width: auto; height: auto; padding: 0; border: 0; }
  .ss-table .ss-tmain, .ss-table .ss-texc { grid-column: 1; }
  .ss-table .ss-tstat { grid-column: 2; grid-row: 1; }
  .ss-table .ss-ttype, .ss-table .ss-tdate { grid-column: 1; font: var(--t-label); font-weight: 400; color: var(--muted); text-align: left; }
  .ss-table .ss-texc { margin-top: 2px; }
}
@media (pointer: coarse) {
  .lb .lb-field { height: 44px; }
  .lb .lb-field input { height: 42px; }
  .lb .lb-go { min-height: 44px; }
  .ss-search { height: 44px; }
  .ss-search input { height: 44px; min-height: 44px; margin: -1px 0; }
}
@media (pointer: coarse), (max-width: 599px) {
  .ss-radio { min-height: 44px; }
  .ss-count .text-btn { min-height: 44px; }
}
/* with the 480 pane open the main column narrows: the spaces toolbar keeps one row and the sort takes the
   right end of the count line (sys 8); under 1440 the search gets its own row above the filters */
body.pane-open .ss-toolbar { position: relative; }
body.pane-open .ss-search { flex-basis: 200px; min-width: 160px; }
body.pane-open :is(#ss-sort, :where(#ss-sort + .csel)) { position: absolute; right: 0; top: calc(100% + var(--s-4)); margin: 0; }
body.pane-open .ss-count { min-height: 32px; padding-right: 160px; }
@media (max-width: 1439px) { body.pane-open .ss-search { flex: 1 1 100%; max-width: none; } }
/* b13r5 m1: the same narrow column without the pane (tablet with the rail, 1024 with the sidebar expanded) gets the
   same answer: the four controls need 750px (240 + 264 + 86 + 136 + 3 gaps), so from 606 (search, talk and Open now
   still fit one row) to 760 the sort takes the right end of the count line instead of a row of its own (spec
   page-discover.md R2, ref linear may-2026 0038). Under 606 Open now wraps too, so the sort never sits alone. */
.lb.is-spaces #lb-panel { container: lbsp / inline-size; }
@container lbsp (min-width: 606px) and (max-width: 760px) {
  .ss-toolbar { position: relative; }
  :is(#ss-sort, :where(#ss-sort + .csel)) { position: absolute; right: 0; top: calc(100% + var(--s-4)); margin: 0; }
  .ss-count { min-height: 32px; padding-right: 160px; }
  /* touch: the sort is 44 tall, so the count line matches it and the list starts below its target */
  @media (pointer: coarse) { .ss-count { min-height: 44px; } }
}
@media (max-width: 399px) {
  #drawer.ss-frame .dh-count, #drawer.ss-frame [data-ss-step] { display: none; }
}