:root { color-scheme: light dark; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; }
header { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline;
         padding: 0.5rem 1rem; border-bottom: 1px solid #8884; }
main { padding: 0 1rem 2rem; max-width: 60rem; }
.note { opacity: 0.75; font-size: 0.9em; }
.truncated { border-left: 3px solid #c80; padding-left: 0.5rem; opacity: 1; }
table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
th, td { text-align: left; padding: 0.25rem 0.5rem; border-bottom: 1px solid #8884; }
input, button { font: inherit; padding: 0.35rem 0.5rem; }
code { word-break: break-all; }

/* Read pages: one layout, phone first. */
header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
header .search { display: flex; gap: 0.25rem; flex: 1 1 16rem; }
header .search input { flex: 1; min-width: 0; }
a { color: #0a58b0; }
@media (prefers-color-scheme: dark) { a { color: #7db4f5; } }
nav a { padding: 0.25rem 0; display: inline-block; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: end; margin: 0.5rem 0; }
.filters label { display: flex; flex-direction: column; font-size: 0.85em; }
select { font: inherit; padding: 0.35rem 0.25rem; }
.rows, .tree { list-style: none; padding: 0; }
ol.rows { list-style: decimal; padding-left: 1.5rem; }
.rows li, .tree li { padding: 0.4rem 0; border-bottom: 1px solid #8883; }
.pager { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
dt { font-weight: 600; }
dd { margin: 0; }
.gap { color: #b35900; font-weight: 600; font-size: 0.9em; }
table { display: block; overflow-x: auto; }
@media (max-width: 30rem) { dl { grid-template-columns: 1fr; } dd { margin-bottom: 0.5rem; } }

/* Write forms: one column, big tap targets, so they work on a phone. */
.entry .field { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.75rem 0; max-width: 32rem; }
.entry input, .entry select, .entry textarea { font: inherit; padding: 0.5rem; width: 100%; box-sizing: border-box; }
.entry input[type=checkbox], .entry input[type=radio] { width: auto; }
.entry fieldset { border: 1px solid #8884; margin: 0.75rem 0; max-width: 32rem; }
.entry label.choice { display: block; padding: 0.4rem 0; }
.credit { display: flex; gap: 0.5rem; margin: 0.4rem 0; }
.credit input[name=credit_name] { flex: 2; }
.credit select { flex: 1; }
button, .buttons a { min-height: 2.5rem; }
button.primary { background: #0a58b0; color: #fff; border: 0; border-radius: 4px; padding: 0.5rem 1.25rem; }
button.danger, a.danger { color: #b00020; }
button.link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; min-height: 0; cursor: pointer; }
form.inline { display: inline; }
.buttons { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.error { color: #b00020; font-weight: 600; font-size: 0.9em; }
.error.top { border-left: 4px solid #b00020; padding: 0.25rem 0.75rem; }
.has-error input, .has-error select, .has-error textarea { border: 2px solid #b00020; }
.saved { border-left: 4px solid #2a7; padding: 0.25rem 0.75rem; }
.warn { border-left: 4px solid #b8860b; padding: 0.25rem 0.75rem; }
.found { border-left: 4px solid #2a7; padding: 0.25rem 0.75rem; }
.actions { font-size: 0.9em; }
li.pick { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
li.pick span { flex: 1 1 12rem; }

/* ---- S7: care of the collection (loans, misplaced, replacement). Keep both sides on a merge. ---- */
.badge { background: #b00020; color: #fff; border-radius: 1em; padding: 0 0.5em; font-size: 0.8em; }
.late { color: #b00020; }
tr.overdue td { background: #b0002010; }
.care-nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.care-nav a[aria-current=page] { font-weight: 700; text-decoration: none; }
/* --- S8: reading (Reads, runs, next-up, comparison) --- */
.status { font-size: 0.85em; padding: 0 0.35rem; border-radius: 3px; border: 1px solid #8886; }
.status-finished { border-color: #2a7; }
.status-reading { border-color: #0a58b0; }
.status-abandoned { border-color: #b35900; }
.mark { font-size: 0.8em; padding: 0 0.3rem; border-radius: 3px; background: #b3590022; white-space: nowrap; }
.compare-wrap { overflow-x: auto; }
table.compare { border-collapse: collapse; margin: 0.5rem 0; }
table.compare caption { text-align: left; font-size: 0.85em; padding-bottom: 0.4rem; }
table.compare th, table.compare td { border: 1px solid #8884; padding: 0.3rem 0.5rem; text-align: left; vertical-align: top; }
table.compare th.here { background: #0a58b014; }
/* --- end S8 --- */

/* ---- S9: photos, barcode capture, bulk entry, shelf photos. Keep both sides on a merge. ---- */
.photo-grid { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.photo-grid li { width: 9.5rem; }
.photo-grid img { display: block; max-width: 100%; height: auto; border: 1px solid #8884; }
img.photo-big { max-width: 100%; height: auto; }
img.photo-small, img.crop { max-height: 8rem; max-width: 100%; border: 1px solid #8884; vertical-align: middle; }
input[type=file] { max-width: 100%; }
.bulk-item { border-top: 1px solid #8884; margin-top: 1rem; }
.bulk-item.has-error { border-left: 4px solid #b00020; padding-left: 0.75rem; }
fieldset.choices { border: 0; padding: 0; margin: 0 0 0.5rem; }
.box-fields { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.shelf-wrap { position: relative; display: inline-block; max-width: 100%; margin: 1.2rem 0 0 1.8rem; line-height: 0; }
.shelf-wrap img { max-width: 100%; height: auto; display: block; }
.shelf-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, #fff6 1px, transparent 1px), linear-gradient(to bottom, #fff6 1px, transparent 1px);
  background-size: 10% 10%; outline: 1px solid #fff8; }
.shelf-box { position: absolute; border: 2px solid #0a58b0; background: #0a58b022; box-sizing: border-box; color: #fff; text-decoration: none; }
.shelf-box span { background: #0a58b0; font-size: 0.75rem; line-height: 1; padding: 1px 4px; position: absolute; top: 0; left: 0; }
.shelf-box.st-confirmed { border-color: #2a7; background: #2a72; }
.shelf-box.st-confirmed span { background: #2a7; }
.shelf-box.st-rejected { border-color: #888; background: #8882; border-style: dashed; }
.shelf-box.st-rejected span { background: #888; }
.tick { position: absolute; font-size: 0.65rem; line-height: 1; color: #666; }
.tick-x { top: -1rem; transform: translateX(-50%); }
.tick-y { left: -1.8rem; transform: translateY(-50%); }
/* --- end S9 --- */
/* --- S12: import and export --- */
table.summary { width: auto; min-width: 20rem; }
table.summary td:last-child { text-align: right; }
/* --- end S12 --- */
/* --- S10: recognition --- */
.rec { display: inline-block; font-size: 0.75rem; padding: 1px 6px; border-radius: 3px; border: 1px solid; vertical-align: middle; }
.rec-barcode, .rec-isbn_checked { color: #155f2a; border-color: #2a7; background: #2a71; }
.rec-title_found, .rec-title_no_author { color: #6a4a00; border-color: #c90; background: #c901; }
.rec-model_only { color: #8a1c1c; border-color: #c55; background: #c551; }
.rec-panel, .rec-hint, .rec-job { border: 1px solid #8884; padding: 0.25rem 0.75rem; margin: 1rem 0; }
.rec-item { border-top: 1px solid #8884; margin-top: 1rem; }
.rec-item.has-error { border-left: 4px solid #b00020; padding-left: 0.75rem; }
.rec-cols { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.rec-cols img.crop { max-height: 14rem; }
.rec-cols > div { flex: 1 1 16rem; min-width: 0; }
dl.reading { margin: 0.25rem 0; } dl.reading dd { margin-left: 1rem; overflow-wrap: anywhere; }
progress { width: 100%; max-width: 30rem; }
/* --- end S10 --- */