/* Index Library — page styles on top of cwt-base.css */

body { display: flex; flex-direction: column; min-height: 100vh; }

.top {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-black); color: var(--color-white);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  padding: 12px 16px;
}
.top a { color: var(--color-white); text-transform: uppercase; font-size: var(--font-size-nav); letter-spacing: 0.04em; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; }
.top .stamp { font-size: 11px; letter-spacing: 0.04em; opacity: 0.55; margin-left: -8px; }

main { flex: 1; width: 100%; max-width: 1500px; margin: 0 auto; padding: 16px 24px; box-sizing: border-box; }
.foot { max-width: 1500px; margin: 0 auto; padding: 48px 24px 24px; box-sizing: border-box; width: 100%; }
.foot div { margin-bottom: 4px; }

h2 { margin: 0 0 12px; }
p { margin: 0 0 12px; max-width: 60ch; }
.caption { max-width: none; }

.hr { margin: 16px 0; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
/* Three tiers of control, one rule: a filled .btn is the one main action of a view; a boxed button does something
   (files, applies, removes, combines, saves); plain uppercase text takes you somewhere or changes what you are looking
   at (page links, kind and status filters, layout, lanes), with an arrow when it is where you are. cwt-base has the
   first and third; the box is this app's addition, so that an action never reads as a label. */
.links { align-items: center; gap: 6px 14px; }
.links a:not(.btn), a.act, .links button[aria-pressed] {
  font-size: var(--font-size-button); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.6;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; color: var(--color-black);
}
.links a:not(.btn):hover, a.act:hover, .links button[aria-pressed]:hover { text-decoration: underline; text-underline-offset: 3px; }
.links a.on::before, .links button.on::before { content: "→ "; }
.links button:not([aria-pressed]):not(.btn), button.act, .dupacts button, .dup button, .bulk button, .drawer-head button, .sense-head button, .proposal button {
  font-size: var(--font-size-button); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2;
  background: var(--color-white); color: var(--color-black); border: 1px solid var(--color-black); padding: 5px 10px;
  cursor: pointer; font-family: inherit; transition: background-color 120ms, color 120ms;
}
.links button:not([aria-pressed]):hover, button.act:hover, .dupacts button:hover, .dup button:hover, .bulk button:hover, .drawer-head button:hover, .sense-head button:hover, .proposal button:hover { background: var(--color-black); color: var(--color-white); }
.links button:not([aria-pressed]):disabled, button.act:disabled, .dupacts button:disabled, .dup button:disabled, .bulk button:disabled { opacity: 0.4; cursor: default; background: var(--color-white); color: var(--color-black); }

.flag {
  display: inline-block; font-size: var(--font-size-button); text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--color-black); padding: 0 6px; line-height: 18px; vertical-align: middle; margin-right: 6px;
}
.flag--out { color: var(--color-black); border-color: var(--color-black); }
.flag--ok { color: var(--color-black); border-color: var(--color-black); }

/* search */
#q { width: 100%; box-sizing: border-box; font-size: 20px; }
.count { font-size: var(--font-size-nav); margin: 8px 0; }
.list { border-top: 1px solid var(--color-rule); }
.item {
  display: grid; grid-template-columns: 1fr; gap: 0 16px;
  padding: 10px 0; border-bottom: 1px solid var(--color-rule); color: var(--color-black);
}
.item:has(.th) { grid-template-columns: 60px 1fr; }
.item .th { width: 60px; height: 80px; object-fit: cover; display: block; grid-row: 1 / span 4; background: var(--color-white); }
.cols { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-black); padding: 2px 8px; }
.cols input { font-family: inherit; font-size: var(--font-size-nav); border: 1px solid var(--color-black); padding: 3px 8px; min-width: 0; flex: 1 1 160px; max-width: 280px; }
.chip button { border: 0; background: none; padding: 0; font-family: inherit; font-size: inherit; cursor: pointer; }
.addres button { display: block; text-align: left; border: 0; background: none; padding: 2px 0; font-family: inherit; font-size: var(--font-size-nav); cursor: pointer; }
.addres:not(:empty) { padding: 4px 0 8px; border-bottom: 1px solid var(--color-rule); }
.item .m { font-size: var(--font-size-nav); }
/* collection rows: compact controls in line with the text */
.item select[data-share], .item input[data-addto] { font-family: inherit; font-size: var(--font-size-nav); border: 1px solid var(--color-black); padding: 3px 8px; background: var(--color-white); color: var(--color-black); }
.item input[data-addto] { min-width: 0; width: 160px; max-width: 100%; }
.item .f { font-size: var(--font-size-nav); }
@media (min-width: 750px) {
  .item { grid-template-columns: 3fr 2fr 2fr 2fr; align-items: baseline; }
  .item:has(.th) { grid-template-columns: 60px 3fr 2fr 2fr 2fr; align-items: start; }
  .item .th { grid-row: auto; }
}

/* item page */
.spec { border-collapse: collapse; width: 100%; max-width: 60ch; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 4px 16px 4px 0; border-bottom: 1px solid var(--color-rule); font-weight: 400; }
.spec th { text-transform: uppercase; font-size: var(--font-size-button); letter-spacing: 0.04em; white-space: nowrap; width: 1%; }
img.cover { max-width: 240px; height: auto; display: block; }
.prose { white-space: pre-wrap; }
.notes { margin-top: 12px; }
.notes .label { margin-bottom: 4px; }
.photos { display: flex; flex-wrap: wrap; gap: 8px; }
.photos img { width: 120px; height: 120px; object-fit: cover; display: block; }
.photos figure { margin: 0; position: relative; width: 120px; }
.photos figcaption { font-size: 12px; margin-top: 2px; }
.photos figure button { position: absolute; top: 0; right: 0; background: var(--color-white); border: 1px solid var(--color-black); padding: 0 6px; font-family: inherit; cursor: pointer; }

/* forms */
.form { display: grid; gap: 12px; max-width: 60ch; }
.form label { display: block; font-size: var(--font-size-button); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.form input, .form select, .form textarea { width: 100%; box-sizing: border-box; }
.form textarea { min-height: 96px; resize: vertical; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn { cursor: pointer; }
.err { color: var(--color-black); }

/* capture */
video { width: 100%; max-width: 560px; background: var(--color-black); display: block; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs figure { margin: 0; position: relative; }
.thumbs img { width: 88px; height: 88px; object-fit: cover; display: block; }
.thumbs figure span { position: absolute; left: 0; bottom: 0; background: var(--color-white); font-size: 12px; padding: 0 4px; }
.thumbs figure button { position: absolute; top: 0; right: 0; background: var(--color-white); border: 1px solid var(--color-black); padding: 0 6px; font-family: inherit; cursor: pointer; }
.cap { border-top: 1px solid var(--color-black); padding-top: 12px; }
.cap .thumbs img { width: 64px; height: 64px; }

/* librarian */
.chat { display: grid; gap: 12px; max-width: 70ch; }
.msg .who { font-size: var(--font-size-button); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.msg .body { white-space: pre-wrap; }
.msg .acts { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
/* the librarian at work: the current step, the trail behind it, the clock */
.working { display: flex; align-items: center; gap: 8px; }
.working .step { flex: 1; }
.working .step.fresh { animation: step-in 0.35s ease-out; }
.working .elapsed { font-size: 12px; font-variant-numeric: tabular-nums; }
.trail { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; color: var(--color-gray); display: flex; flex-wrap: wrap; gap: 2px 6px; }
.trail:empty { display: none; }
.proposal { display: grid; gap: 4px; border: 1px solid var(--color-black); padding: 8px 10px; margin-top: 8px; font-size: var(--font-size-nav); }
.sense { border: 1px solid var(--color-black); padding: 10px 12px 12px; margin-bottom: 12px; background: var(--color-white); }
.sense-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-nav); text-transform: uppercase; letter-spacing: 0.04em; }
.sense-head b { font-weight: normal; }

.sense > p { margin: 8px 0 4px; }
.proposal b { font-weight: normal; text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: var(--font-size-base); margin: 0; }
.checks input { width: auto; }
.trail .sep { color: var(--color-gray); }
@keyframes step-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ask { display: flex; gap: 8px; align-items: flex-end; max-width: 70ch; margin-top: 16px; }
.ask textarea { flex: 1; min-height: 44px; resize: vertical; }
.cmwrap { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-button); text-transform: uppercase; letter-spacing: 0.04em; }
.cmwrap select { font-family: inherit; font-size: var(--font-size-button); text-transform: none; letter-spacing: 0; border: 1px solid var(--color-black); background: var(--color-white); color: var(--color-black); padding: 3px 6px; max-width: 220px; }
button.rec { background: var(--color-white); color: var(--color-black); border: 1px solid var(--color-black); padding: 10px 12px; font-family: inherit; font-size: var(--font-size-button); text-transform: uppercase; cursor: pointer; }
button.rec.on { background: var(--color-black); color: var(--color-white); }

/* loans */
.loan { display: grid; grid-template-columns: 1fr; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--color-rule); }
@media (min-width: 750px) { .loan { grid-template-columns: 3fr 2fr 2fr 2fr; align-items: baseline; } }

/* Search is the work surface; the index stays compact as it grows. */
.library-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; margin:24px 0 40px; }
.library-heading h1 { margin:0 0 12px; }
.library-heading p { margin:0; font-size:14px; }
.search-label { display:flex; justify-content:space-between; gap:12px; font-size:12px; text-transform:uppercase; margin-bottom:8px; }
.empty { padding:48px 0; }
.empty h3 { margin:0 0 16px; }
.item:hover { background:#f6f6f6; }
.item > span { overflow-wrap:anywhere; min-width:0; }
:focus-visible { outline:2px solid #000000; outline-offset:4px; }
.top :focus-visible { outline-color:#ffffff; }
[hidden] { display:none !important; }
body.nosharing .share-only { display: none !important; }  /* a local-only install: no share controls anywhere */
.qcard { display: flex; gap: 16px; align-items: center; margin: -8px 0 16px; padding: 12px; border: 1px solid var(--color-black); }
.qcard img, .qcard .qr svg { width: 112px; height: 112px; flex: none; display: block; }
.qcard .caption { margin: 8px 0 0; }
.qcard a { word-break: break-all; font-size: var(--font-size-nav); }
.qcard[hidden] { display: none; }
button:disabled { cursor:wait; }
@media (max-width:749px) {
  .top nav { margin-left:0; }
  .form .two { grid-template-columns:1fr; }
  #q { font-size:16px; }
  .ask { flex-wrap:wrap; }
  .ask textarea { min-width:100%; }
}

input::placeholder, textarea::placeholder { color:#000000; opacity:1; }
.photos img.on { outline: 2px solid var(--color-black); outline-offset: -2px; }
.item--out { opacity: 0.55; }
.item--out:hover { opacity: 1; }
.addc { border: 1px solid var(--color-black); background: var(--color-white); padding: 0 6px; font-family: inherit; font-size: inherit; cursor: pointer; margin-left: 8px; }

/* capture: voice notes per photo, and the review view of what the model found */
.shotnotes { display: grid; gap: 6px; max-width: 60ch; }
.shotnotes:empty { display: none; }
.shotnote { display: flex; gap: 8px; align-items: center; }
.shotnote span { font-size: 12px; min-width: 1.5em; }
.shotnote > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.said { margin: 0; font-size: 12px; max-width: none; }
.said:empty { display: none; }
.heard { margin: 0; padding: 6px 10px; border: 1px solid var(--color-black); font-size: var(--font-size-nav); }
.shotnote input { flex: 1; min-width: 0; font-family: inherit; font-size: var(--font-size-nav); border: 1px solid var(--color-black); padding: 4px 8px; }
#audio.on { background: var(--color-black); color: var(--color-white); padding-left: 6px; padding-right: 6px; }
.review { display: grid; gap: 16px; }
.vision { position: relative; margin: 0; max-width: 560px; }
.vision img { width: 100%; height: auto; display: block; }
.vision .idx { position: absolute; right: 0; bottom: 0; background: var(--color-white); font-size: 12px; padding: 0 4px; }
.vision--empty { outline: 3px solid var(--color-critical); outline-offset: -3px; }
.vision--empty::after { content: "Nothing identified in this photo"; position: absolute; left: 0; top: 0; padding: 2px 6px; background: var(--color-critical); color: var(--color-white); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.box { position: absolute; box-sizing: border-box; padding: 0; background: transparent; border: 3px solid; cursor: pointer; font-family: inherit; }
.box--ok { border-color: var(--color-success); }
.box--bad { border-color: var(--color-critical); }
.box:not([data-goto]) { cursor: help; }
.box span { position: absolute; left: -3px; top: -3px; max-width: calc(100% + 6px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 4px; line-height: 16px; font-size: 11px; color: var(--color-white); text-transform: uppercase; letter-spacing: 0.04em; }
.box--ok span { background: var(--color-success); }
.box--bad span { background: var(--color-critical); }
.cap.flash { outline: 2px solid var(--color-black); outline-offset: 6px; }

/* scan: the phone as a scanner */
.scanner { display: grid; gap: 12px; max-width: 560px; }
.filed { margin: 0 0 12px; padding: 8px 0; border-top: 1px solid var(--color-black); }
.phone { display: flex; gap: 16px; align-items: flex-start; max-width: 560px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--color-black); }
.phone-qr svg { display: block; width: 160px; height: 160px; }
.phone p { margin: 0 0 8px; }
@media (max-width: 749px) { .phone { display: none; } }
.viewfinder { position: relative; }
.viewfinder .status { position: absolute; left: 0; top: 0; background: var(--color-white); font-size: 12px; padding: 4px 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.viewfinder .marks { position: absolute; inset: 0; pointer-events: none; }
.bookmode { display: flex; align-items: center; gap: 12px; border: 1px solid var(--color-black); padding: 8px 10px; font-size: var(--font-size-nav); }
.bookmode span:first-child { flex: 1; }
.bookmode button { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-black); color: var(--color-white); border: 1px solid var(--color-black); padding: 6px 10px; font-family: inherit; cursor: pointer; }
.lights { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.lights span, .lights a, .lights button { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; font: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.lights button.on { text-decoration: underline; text-underline-offset: 3px; }
.viewfinder .over { position: absolute; left: 0; right: 0; bottom: 0; }
.viewfinder .over .lights { background: rgba(255, 255, 255, 0.92); padding: 6px 8px; gap: 4px 12px; }
.poolstrip { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; border: 1px solid var(--color-black); padding: 8px 10px; margin: -24px 0 24px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: inherit; text-decoration: none; }
.poolstrip span { display: inline-flex; align-items: center; gap: 6px; }
.poolstrip .go { margin-left: auto; }
/* the ticker: a strip along the top of the index, the width of the header, running right to left; hover pauses it */
.ticker { display: flex; align-items: center; height: 30px; margin: -16px -24px 16px; border-bottom: 1px solid var(--color-black); background: var(--color-white); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; overflow: hidden; }
.ticker .track { display: flex; width: max-content; white-space: nowrap; animation: tick 60s linear infinite; }
.ticker:hover .track, .ticker:focus-within .track { animation-play-state: paused; }
.ticker .run { display: inline-flex; align-items: center; }
.ticker .run a { color: inherit; text-decoration: none; padding: 0 6px; }
.ticker .run a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ticker .run b { font-weight: normal; background: var(--color-black); color: var(--color-white); padding: 1px 5px; margin-right: 8px; }
.ticker .run i { font-style: normal; padding: 0 10px; }
.ticker .tick-x { flex: none; margin-left: auto; height: 100%; padding: 0 14px; background: var(--color-white); border: 0; border-left: 1px solid var(--color-black); cursor: pointer; font: inherit; color: inherit; }
.ticker .tick-x:hover { background: var(--color-black); color: var(--color-white); }
.ticker--off { height: auto; border-bottom: 0; margin-bottom: 0; justify-content: flex-end; }
.ticker--off .track { display: none; }
.ticker--off .tick-x { border-left: 0; padding: 2px 8px; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker .track { animation: none; } .ticker { overflow-x: auto; } }
.update { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; border: 1px solid var(--color-black); background: var(--color-black); color: var(--color-white); padding: 8px 10px; margin: -24px 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.update a { color: var(--color-white); }
.update button { margin-left: auto; background: none; border: 1px solid var(--color-white); color: var(--color-white); padding: 2px 8px; font: inherit; cursor: pointer; }
.marks .box { pointer-events: none; }
.pairs { display: grid; gap: 16px; margin-top: 12px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; border: 1px solid var(--color-black); padding: 12px; }
.pair-side { display: grid; gap: 4px; align-content: start; font-size: var(--font-size-nav); }
.pair-side img, .pair-side .noimg { width: 96px; height: 128px; object-fit: cover; display: block; background: var(--color-gray); }
.pair-side b { font-weight: normal; font-size: var(--font-size-base); }
.pair-side a { color: inherit; }
.pair-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.pair-acts button { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: none; border: 1px solid var(--color-black); padding: 6px 10px; font-family: inherit; cursor: pointer; }
.mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--color-black); background: var(--color-white); flex: none; }
.mark--ok { background: var(--color-success); border-color: var(--color-success); }
.mark--review { background: var(--color-orange); border-color: var(--color-orange); }
.mark--bad { background: var(--color-critical); border-color: var(--color-critical); }
.mark--work { animation: pulse 0.9s infinite alternate; }
@keyframes pulse { from { background: var(--color-white); } to { background: var(--color-black); } }
.pool { display: grid; gap: 12px; }
.job { border: 1px solid var(--color-black); padding: 8px; display: grid; gap: 8px; }
.job--working .vision img { opacity: 0.6; }
.jobhead { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.jobhead span { margin-left: auto; text-transform: none; letter-spacing: 0; text-align: right; }
.jobhead .pick { margin-left: 12px; display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; }
.jobhead .pick input { width: auto; margin: 0; }
/* the Pool's cart: its tools stay in reach while pruning a long list */
/* the cart: tools that ride along while working a long list; the Pool's tools and the library's select bar share it */
.cart { position: sticky; top: var(--top-h, 48px); z-index: 90; background: var(--color-white); padding: 8px 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--color-black); }
.cart .links { align-items: center; }
.cart #poolcount, .cart #bulkn { font-size: var(--font-size-nav); font-weight: normal; margin-right: 4px; }
.pair-side .pick { display: inline-flex; margin-right: 6px; }
.pair-side .pick input { width: auto; margin: 0; }
.filed { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.filed img, .filed .noimg { width: 40px; height: 40px; object-fit: cover; display: block; background: var(--color-gray); }
.filed b { display: block; font-weight: normal; }
.filed > div > span { font-size: 12px; }
.filed a { color: inherit; text-decoration: none; }
.dupacts { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.dup { border: 1px solid var(--color-orange); padding: 8px 10px; max-width: none; }

/* share links */
.share { padding: 8px 0 16px; border-bottom: 1px solid var(--color-rule); }
.share .row { margin-top: 12px; }
.share input, .share select { font-family: inherit; font-size: var(--font-size-nav); border: 1px solid var(--color-black); padding: 4px 8px; background: var(--color-white); color: var(--color-black); max-width: 100%; }
.share .caption button.act { text-decoration: underline; }

/* ever-present librarian */
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 110; width: 56px; height: 56px; padding: 0; cursor: pointer; background: var(--color-black); color: var(--color-white); border: 1px solid var(--color-white); outline: 1px solid var(--color-black); font-family: inherit; font-size: var(--font-size-button); text-transform: uppercase; letter-spacing: 0.04em; }
.fab:hover, .fab[aria-expanded="true"] { background: var(--color-white); color: var(--color-black); }
body[data-route="librarian"] .fab { display: none; }
/* the drawer slides in from the right; on a wide screen the page condenses to the left with it (body padding), and the
   Ask button rides along, so the librarian and the page share one motion */
:root { --drawer-w: 440px; --slide: 280ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(var(--drawer-w), 100%); box-sizing: border-box; display: flex; flex-direction: column; padding: 16px; background: var(--color-white); border-left: 1px solid var(--color-black); transform: translateX(100%); transition: transform var(--slide); }
body.drawer-open .drawer { transform: none; }
body { transition: padding-right var(--slide); }
.fab { transition: right var(--slide); }
@media (min-width: 750px) {
  body.drawer-open { padding-right: var(--drawer-w); }
  body.drawer-open .fab { right: calc(16px + var(--drawer-w)); }
}
@media (prefers-reduced-motion: reduce) { .drawer, body, .fab { transition: none; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--color-black); font-size: var(--font-size-nav); text-transform: uppercase; letter-spacing: 0.04em; }

#drawer-body { flex: 1; min-height: 0; overflow-y: auto; }
#drawer-body .ask { position: sticky; bottom: 0; background: var(--color-white); padding-top: 8px; }
/* phones: the drawer is the whole screen, the page behind it holds still, the ask box clears the keyboard and the home bar */
@media (max-width: 749px) {
  .drawer { left: 0; width: 100%; height: 100dvh; border-left: 0; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .drawer-head { position: sticky; top: 0; background: var(--color-white); z-index: 1; }
  #drawer-body .ask { padding-bottom: 4px; }
  body.drawer-open { overflow: hidden; }
  body.drawer-open .modes, body.drawer-open .fab { display: none; }
}

/* phone: one bar along the bottom edge, under the thumb; the top nav and the menu button are for wider screens */
.menu, .modes, .sheet { display: none; }
@media (max-width: 749px) {
  .top nav { display: none; }
  .modes { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--color-black); padding-bottom: env(safe-area-inset-bottom); }
  .modes a, .modes button { flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--color-white); text-align: center; padding: 0; font-size: var(--font-size-nav); text-transform: uppercase; letter-spacing: 0.04em; background: none; border: 0; font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modes > * + * { border-left: 1px solid var(--material-graphite); }
  .modes .on { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }  /* an arrow would not fit five across */
  .modes button.open { background: var(--color-white); color: var(--color-black); }
  .sheet { display: block; position: fixed; inset: 0; z-index: 105; }
  .sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
  .sheet-nav { position: absolute; left: 0; right: 0; bottom: calc(48px + env(safe-area-inset-bottom)); display: grid; background: var(--color-white); border-top: 1px solid var(--color-black); }
  .sheet-nav a { padding: 16px; border-bottom: 1px solid var(--color-rule); color: inherit; text-decoration: none; font-size: var(--font-size-nav); text-transform: uppercase; letter-spacing: 0.04em; }
  .foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* on the phone the cart sits just above the thumb bar, where the hand already is */
  .cart { position: fixed; top: auto; left: 0; right: 0; bottom: calc(48px + env(safe-area-inset-bottom)); margin: 0; padding: 8px 16px 10px; border-bottom: 0; border-top: 1px solid var(--color-black); z-index: 99; max-height: 45vh; overflow-y: auto; }
  .cart .caption { display: none; }
  .bulk.cart input, .bulk.cart select { flex: 1 1 40%; width: auto; }  /* two to a row, thumb-sized */
  body:has(.cart:not([hidden])) .foot { padding-bottom: calc(220px + env(safe-area-inset-bottom)); }
  .library-heading { margin: 8px 0 24px; gap: 12px; }
  .library-heading h1 { font-size: var(--font-size-h3); margin: 0; }
  .library-heading p, body.owner .library-heading .btn, .search-label span { display: none; }
  main { padding: 12px 16px 16px; }
  .ticker { margin: -12px -16px 12px; height: 32px; }
  img.cover { max-width: 160px; }
  .links { gap: 0 20px; }
  .links a, .links button[aria-pressed] { padding: 8px 0; }  /* finger-sized targets */
  .links button:not([aria-pressed]), .dupacts button, .proposal button { padding: 9px 12px; }
  body:is([data-route="capture"], [data-route="scan"]) #snap:not([hidden]) { position: fixed; left: 16px; right: 16px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 99; padding: 16px; background: var(--color-black); color: var(--color-white); text-align: center; }
  body:is([data-route="capture"], [data-route="scan"]) .links:has(#audio:not([hidden])) #snap:not([hidden]) { right: calc(50% + 4px); }
  body:is([data-route="capture"], [data-route="scan"]) #snap:not([hidden]) ~ #audio:not([hidden]) { position: fixed; left: calc(50% + 4px); right: 16px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 99; padding: 16px; background: var(--color-white); color: var(--color-black); border: 1px solid var(--color-black); text-align: center; }
  body:is([data-route="capture"], [data-route="scan"]) #snap:not([hidden]) ~ #audio.on { background: var(--color-black); color: var(--color-white); }
  body:is([data-route="capture"], [data-route="scan"]) .foot { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  .fab { display: none; }  /* Ask lives in the bar */
}

/* grid layout: covers first, for looking through the stack */
#layout { padding-left: 16px; border-left: 1px solid var(--color-black); align-items: center; }
.viewctl select { font-family: inherit; font-size: var(--font-size-button); text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--color-black); padding: 2px 4px; background: var(--color-white); color: var(--color-black); }
.list .group { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 24px 0 0; padding: 6px 0; border-bottom: 1px solid var(--color-black); font-size: var(--font-size-nav); text-transform: uppercase; letter-spacing: 0.04em; }
.list .group:first-child { margin-top: 0; }
.list.grid .group { margin-bottom: -8px; }
.list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; border-top: 0; padding-top: 8px; }
.card { display: flex; flex-direction: column; gap: 2px; color: var(--color-black); min-width: 0; }
.card .cv { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; margin-bottom: 6px; background: var(--color-white); }
.card img.cv { outline: 1px solid var(--color-rule); outline-offset: -1px; }
.card .cv--blank { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; box-sizing: border-box; padding: 12px; border: 1px solid var(--color-black); overflow: hidden; font-size: var(--font-size-button); text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.card .t { font-size: var(--font-size-nav); line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.card .cv--blank span:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.card .c, .card .f { font-size: var(--font-size-button); overflow-wrap: anywhere; }
.card .f:not(:empty) { margin-top: 4px; }
.card .f .flag { margin-bottom: 4px; }
.card:hover .cv { opacity: 0.85; }
.card .addc { margin-left: 0; }
/* wall: big covers and nothing else; the title and creator appear over the cover on hover or focus */
.list.wall { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 20px; }
.list.wall .card { position: relative; }
.list.wall .card .cv { margin-bottom: 0; }
.list.wall .card .c, .list.wall .card .f { display: none; }
.list.wall .card .t { display: none; position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: rgba(255, 255, 255, 0.94); border-top: 1px solid var(--color-black); -webkit-line-clamp: 2; }
.list.wall .card:hover .t, .list.wall .card:focus-visible .t, .list.wall .card.sel .t { display: -webkit-box; }
.list.wall .card:hover .cv { opacity: 1; }
@media (max-width: 749px) {
  .list.grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 20px 12px; }
  .list.wall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
  .list.wall .card .t { display: -webkit-box; position: static; padding: 4px 0 0; background: none; border-top: 0; font-size: var(--font-size-button); }  /* no hover on a phone */
  #layout { width: 100%; padding-left: 0; border-left: 0; }  /* the view controls take their own line on phones */
}

/* inline share tier on index rows, and select mode for the bulk editor */
.item .sh, .card .sh { font-family: inherit; font-size: var(--font-size-button); border: 1px solid var(--color-black); background: var(--color-white); color: var(--color-black); padding: 1px 4px; max-width: 100%; }
.sel { cursor: pointer; }
.sel--on { outline: 2px solid var(--color-black); outline-offset: 2px; background: var(--color-gray); }
.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--font-size-nav); }
.bulk[hidden] { display: none; }
.bulk select, .bulk input { font-family: inherit; font-size: var(--font-size-nav); border: 1px solid var(--color-black); background: var(--color-white); color: var(--color-black); padding: 4px 8px; }
.bulk input { min-width: 0; width: 180px; max-width: 100%; }

/* community search (#35): the followed libraries as a filter row, their matches under your own */
.others { margin-top: 8px; }
#otherlist:not(:empty) { margin-top: 24px; }