:root {
  --bg: #f6f3ee;
  --surface: #ffffff;
  --ink: #1f2328;
  --muted: #6b6f76;
  --line: #e2ddd4;
  --accent: #8a3b12;
  --accent-ink: #ffffff;
  --accent-soft: #f3e4d8;
  --error: #a3261a;
  --cover-a: #2c3440;
  --cover-b: #1b2129;
  --cover-ink: #f2efe9;
  --radius: 8px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --del-bg: #f6d6d0; --del-ink: #6d1a0e;
  --ins-bg: #d5ecd2; --ins-ink: #154d12;
  color-scheme: light;
}
/* Dark colors: from the system setting unless the visitor picked light,
   or always when they picked dark (data-theme is set by the header switch). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171a;
    --surface: #1d2024;
    --ink: #e8e6e1;
    --muted: #9a9ea5;
    --line: #2e3237;
    --accent: #e08a55;
    --accent-ink: #1a1208;
    --accent-soft: #3a2a20;
    --error: #ff8a7a;
    --cover-a: #39414d;
    --cover-b: #262c34;
    --del-bg: #4a2420; --del-ink: #ffc9c0;
    --ins-bg: #1f3d22; --ins-ink: #c4f0c0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15171a;
  --surface: #1d2024;
  --ink: #e8e6e1;
  --muted: #9a9ea5;
  --line: #2e3237;
  --accent: #e08a55;
  --accent-ink: #1a1208;
  --accent-soft: #3a2a20;
  --error: #ff8a7a;
  --cover-a: #39414d;
  --cover-b: #262c34;
  --del-bg: #4a2420; --del-ink: #ffc9c0;
  --ins-bg: #1f3d22; --ins-ink: #c4f0c0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the button styles below would otherwise unhide it */
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: var(--accent); }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: 2rem; margin: .2em 0 .3em; }
h2 { font-size: 1.3rem; margin: 2rem 0 .8rem; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .93em; }
.hint { color: var(--muted); font-size: .88em; font-weight: normal; }
.error { background: var(--accent-soft); color: var(--error); padding: .7em 1em; border-radius: var(--radius); }

main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 16px 3rem; }

/* header */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-inner { max-width: 1120px; margin: 0 auto; padding: .7rem 16px; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .45rem; }
.brand-disc { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, var(--surface) 0 3px, var(--accent) 3.5px 6px, var(--muted) 6.5px 100%); }
.search { flex: 1; display: flex; min-width: 220px; }
.search input { flex: 1; min-width: 0; padding: .55em .8em; border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--bg); color: var(--ink); font: inherit; }
.search button { border-radius: 0 var(--radius) var(--radius) 0; }
.account { display: flex; gap: .4rem .9rem; align-items: center; flex-wrap: wrap; }
.account a, .account button.link { white-space: nowrap; }
.account form { margin: 0; }

button, .button {
  display: inline-block; padding: .55em 1em; border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
button.secondary { background: var(--accent-soft); color: var(--ink); }
.theme-toggle {
  background: none; color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  width: 2.2rem; height: 2.2rem; padding: 0; display: inline-grid; place-items: center; font-weight: normal;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }
.theme-toggle .moon { display: none; }
.theme-toggle[aria-pressed="true"] .sun { display: none; }
.theme-toggle[aria-pressed="true"] .moon { display: block; }
button.link { background: none; color: var(--accent); padding: 0; font-weight: normal; text-decoration: underline; }

/* home */
.hero { padding: 1.5rem 0 .5rem; max-width: 46rem; }
.hero h1 { font-size: 2.3rem; }
.hero-count { color: var(--muted); }

/* cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.4rem 1.1rem; }
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.card:hover .cover { box-shadow: 0 6px 18px rgb(0 0 0 / .18); transform: translateY(-2px); }
.card-title { font-weight: 600; margin-top: .55rem; line-height: 1.3; }
.card-label { color: var(--accent); font-size: .92em; }
.card-meta { color: var(--muted); font-size: .85em; }

/* covers */
.cover { display: block; width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgb(0 0 0 / .12); transition: transform .15s, box-shadow .15s; background: var(--surface); }
.cover-card { aspect-ratio: 2 / 3; }
/* Show the whole cover: audiobook art is often square, course boxes tall. */
img.cover-card { object-fit: contain; background: var(--surface); }
.cover-large { aspect-ratio: 2 / 3; }
.cover-generic {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px; color: var(--cover-ink); background: linear-gradient(160deg, var(--cover-a), var(--cover-b));
}
.cover-generic::before {
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; top: 9%; left: 11%; border-radius: 50%; opacity: .3;
  background: radial-gradient(circle, transparent 0 9%, #fff 9.5% 11%, transparent 11.5% 30%, #fff 30.5% 31%, transparent 31.5% 60%, #fff 60.5% 61%, transparent 61.5% 99%, #fff 99.5%);
}
.cover-generic span { position: relative; }
.g-format { position: absolute !important; top: 10px; left: 12px; font-size: .7em; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.g-title { font-family: var(--serif); font-weight: 600; font-size: 1.02em; line-height: 1.2; }
.g-label { font-weight: 700; margin-top: .25em; }
.g-creator { font-size: .78em; opacity: .85; margin-top: .25em; }
.g-note { font-size: .68em; opacity: .55; margin-top: .6em; }
.cover-large.cover-generic { padding: 24px; font-size: 1.35rem; }

/* release page */
.crumbs { color: var(--muted); font-size: .92em; margin: 0; }
.crumbs a { color: inherit; }
.byline { color: var(--muted); margin-top: 0; }
.release { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: 2.2rem; align-items: start; }
.release h1 { margin-top: 0; }
.release-label { display: block; font-size: .65em; color: var(--accent); margin-top: .2em; }
.gallery-main img { width: 100%; border-radius: 4px; box-shadow: 0 2px 10px rgb(0 0 0 / .15); display: block; }
.thumbs { list-style: none; display: flex; gap: .6rem; padding: 0; margin: .8rem 0 0; flex-wrap: wrap; }
.thumbs a { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-decoration: none; color: var(--muted); font-size: .78em; }
.thumbs img { height: 72px; border-radius: 3px; border: 2px solid transparent; }
.thumbs a[aria-current="true"] img { border-color: var(--accent); }

table { border-collapse: collapse; width: 100%; }
.facts th, .facts td { text-align: left; padding: .3em 0; vertical-align: top; }
.facts th { color: var(--muted); font-weight: normal; width: 8.5em; }
.list th, .list td { text-align: left; padding: .45em .6em; border-bottom: 1px solid var(--line); }
.list th { font-size: .85em; color: var(--muted); font-weight: 600; }
.contents { padding-left: 1.1em; }
.contents li { margin: .25em 0; }
.contents span { margin-left: .4em; }
.actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }
.actions form { margin: 0; }

.tracks { list-style: none; padding: 0; columns: 2 320px; column-gap: 2.5rem; margin: 0; }
.tracks li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: .5em; padding: .35em 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.tracks .num { color: var(--muted); text-align: right; }

/* forms */
.narrow { max-width: 26rem; margin: 1rem auto; }
.form { display: flex; flex-direction: column; gap: .9rem; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .95em; }
.form input, .form select, .form textarea {
  font: inherit; font-weight: normal; padding: .5em .65em; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); min-width: 0;
}
.form button { align-self: flex-start; }
/* Never wider than the screen: a select is otherwise as wide as its longest option. */
.form label, .form .row > *, .form .cols > * { min-width: 0; }
.form input, .form select, .form textarea { max-width: 100%; }
.form [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 2px var(--del-bg); }
.title-picked { background: var(--accent-soft); border-radius: var(--radius); padding: .4rem .9rem .8rem; }
.title-picked p { margin: .3rem 0 .5rem; }
.title-search { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .3rem; }
.title-search label { font-weight: normal; color: var(--muted); }
.title-results { list-style: none; padding: 0; margin: .3rem 0 0; border: 1px solid var(--line); border-radius: 6px; }
.title-results li { padding: .45rem .7rem; border-bottom: 1px solid var(--line); }
.title-results li:last-child { border-bottom: 0; }
.title-results button.link { text-align: left; text-decoration: none; color: var(--accent); }
.form.wide { max-width: 52rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; background: var(--surface); }
legend { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; padding: 0 .4rem; }
fieldset .hint { margin: 0; }
.cols { display: flex; gap: .8rem; flex-wrap: wrap; }
.cols label { flex: 1 1 10rem; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; }
.row > * { flex: 1 1 9rem; }
.row .qty, .qty { flex: 0 0 5rem; width: 5rem; }
.year { width: 6rem; }

.button.secondary { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.form-actions { display: flex; gap: 1.2rem; align-items: center; }
.edit-images { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.edit-images li { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .85em; color: var(--muted); }
.edit-images img { height: 96px; border-radius: 3px; }
.form label.check { flex-direction: row; align-items: center; gap: .35rem; font-weight: normal; color: var(--ink); }
/* release tabs */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: .6rem 0 1.4rem; }
.tabs a { padding: .45em 1em; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; text-decoration: none; color: var(--muted); margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--bg); border-color: var(--line); color: var(--ink); font-weight: 600; }
.tabs .count { font-size: .8em; background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 0 .5em; margin-left: .2em; }

/* history */
.revisions { list-style: none; padding: 0; margin: 0; }
.revisions li { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; padding: .55em 0; border-bottom: 1px solid var(--line); }
.rev-date { font-family: var(--mono); font-size: .9em; }
.rev-user { font-weight: 600; }
.rev-action { color: var(--muted); }
.rev-action.added { color: var(--accent); }
.rev-summary { flex-basis: 100%; color: var(--muted); font-style: italic; }
.rev-current { font-size: .78em; background: var(--accent-soft); border-radius: 999px; padding: 0 .55em; }
.rev-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 .5rem; flex-wrap: wrap; }
del { background: var(--del-bg); color: var(--del-ink); text-decoration: line-through; padding: 0 .15em; border-radius: 2px; }
ins { background: var(--ins-bg); color: var(--ins-ink); text-decoration: none; padding: 0 .15em; border-radius: 2px; }
.diff td, .diff th { text-align: left; padding: .45em .6em; border-bottom: 1px solid var(--line); vertical-align: top; }
.diff thead th { font-size: .85em; color: var(--muted); }
.diff tbody th { color: var(--muted); font-weight: normal; width: 8em; }
.diff-list { list-style: none; padding: 0; margin: 0; }
.diff-list li { display: flex; gap: .6em; padding: .3em 0; }
.diff-list span { font-family: var(--mono); color: var(--muted); }
.diff-images { list-style: none; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.diff-images li { display: flex; flex-direction: column; gap: .3rem; font-size: .85em; }
.diff-images img { height: 120px; border-radius: 3px; border: 3px solid transparent; }
.diff-images .out img { border-color: #c8553d; opacity: .7; }
.diff-images .in img { border-color: #3e9a3a; }

/* credits and edition checkboxes */
.credits { margin: -.3rem 0 .8rem; }
.credit .muted { margin-right: .25em; }
fieldset.checks { border: 0; padding: 0; background: none; flex-direction: row; flex-wrap: wrap; gap: .4rem 1.2rem; }
fieldset.checks legend.small-legend { font: 600 .95em var(--sans); padding: 0; margin-bottom: .3rem; }
.row select.role { flex: 0 0 9.5rem; }

/* barcode scanning */
.search .scan-link { display: inline-grid; place-items: center; width: 2.6rem; margin-left: .4rem; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); background: var(--bg); }
.search .scan-link svg { width: 1.3rem; height: 1.3rem; }
.search .scan-link:hover { border-color: var(--muted); }
.scan-page { max-width: 34rem; margin: 0 auto; }
.scanner { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; width: 100%; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 30% 10%; border: 3px solid rgb(255 255 255 / .85); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / .35); pointer-events: none; }
.scan-start { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; font-size: 1.1rem; padding: .8em 1.4em; }
.scan-status { min-height: 1.5em; margin: .7rem 0; }
.scan-tools { display: flex; gap: .6rem; flex-wrap: wrap; }
.scan-tools label.button { cursor: pointer; }
.check-code { background: var(--accent-soft); border-radius: var(--radius); padding: .3rem 1rem .8rem; margin: 1rem 0; }
.scan-dialog { width: min(32rem, 94vw); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 1rem; }
.scan-dialog::backdrop { background: rgb(0 0 0 / .55); }

/* collections and copies */
.your-copies { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem 1rem .8rem; width: 100%; }
.your-copies h3 { font-family: var(--serif); margin: .6rem 0 .3rem; }
.your-copies ul { padding-left: 1.1rem; margin: .3rem 0 .7rem; }
.your-copies li { margin: .25rem 0; }
.checks-row { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.collection-tools { display: flex; flex-wrap: wrap; gap: .6rem; }
.delete-copy { margin-top: 1.5rem; }
.copies { list-style: none; padding: 0; margin: 1rem 0; }
.copies li { display: grid; grid-template-columns: 56px 1fr auto; gap: .8rem; align-items: start; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.copy-cover img, .copy-nocover { width: 56px; height: 72px; object-fit: contain; border-radius: 3px; background: var(--surface); display: grid; place-items: center; }
.copy-nocover { font-size: .6rem; color: var(--muted); text-align: center; border: 1px solid var(--line); }
.copy-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.copy-body a { color: var(--ink); text-decoration: none; }
.copy-notes { font-style: italic; overflow-wrap: anywhere; }

/* people and publisher directories */
.letters { font-family: var(--mono); letter-spacing: .1em; line-height: 2; }
.directory { list-style: none; padding: 0; columns: 3 220px; column-gap: 2rem; }
.directory li { padding: .2rem 0; break-inside: avoid; display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px solid var(--line); }
.aka { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .9rem; }
.pager { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; }

/* data download page */
.prose { max-width: 46rem; }
.download-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem 1.2rem 1rem; margin: 1.2rem 0; }
.download-box h2 { margin-top: .8rem; }
.download-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.break { word-break: break-all; }
pre.example { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
  font: .8rem/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; }
.foot p { margin: .3rem 0; }
.prose .lead { font-size: 1.15rem; color: var(--muted); }
.about h2 { margin-top: 2.2rem; }
.kinds dt { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin-top: .9rem; }
.kinds dd { margin: .2rem 0 0; }
.principles { padding-left: 1.1rem; }
.principles li { margin: .7rem 0; }

.new-key { background: var(--ins-bg); color: var(--ins-ink); border-radius: var(--radius); padding: .4rem 1.2rem 1rem; margin: 1rem 0; }
.new-key .hint { color: inherit; opacity: .85; }
.new-key #new-key { font-size: 1.05rem; background: var(--surface); color: var(--ink); padding: .6rem .8rem; border-radius: 6px; }

/* admin */
button.small { padding: .3em .7em; font-size: .85em; }
button.danger { background: var(--error); color: var(--surface); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin: 1rem 0 1.5rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; display: flex; flex-direction: column; }
.stat-n { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.stat-k { color: var(--muted); font-size: .85em; }
.pill { display: inline-block; font-size: .78em; padding: .05em .6em; border-radius: 999px; background: var(--accent-soft); }
.pill.bad { background: var(--del-bg); color: var(--del-ink); }
.list td form { margin: 0; }
.list .suspend { display: flex; gap: .4rem; }
.list .suspend input { min-width: 0; width: 9rem; padding: .3em .5em; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: .85em; }
.list tr.warn td { background: var(--del-bg); color: var(--del-ink); }
.list pre { white-space: pre-wrap; word-break: break-all; font-size: .75em; max-width: 32rem; }
.search.inline { max-width: 28rem; margin: .5rem 0 1rem; }
.qr { background: #fff; padding: 12px; border-radius: var(--radius); width: 220px; margin: 1rem 0; }
.qr svg { display: block; width: 100%; height: auto; }
input.code { font-family: var(--mono); font-size: 1.4rem; letter-spacing: .2em; width: 9rem; }
@media (max-width: 720px) { .list { display: block; overflow-x: auto; } }

.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: .88em; text-align: center; padding: 1.5rem 16px; }

@media (max-width: 720px) {
  h1 { font-size: 1.6rem; }
  .hero h1 { font-size: 1.8rem; }
  .release { grid-template-columns: 1fr; }
  .gallery { max-width: 360px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .account { width: 100%; justify-content: flex-end; }
}