/* Ubuntu, self-hosted (Ubuntu Font Licence 1.0). No third-party font requests. */
@font-face { font-family:"Ubuntu"; font-style:normal; font-weight:400; font-display:swap;
             src:url(/static/fonts/ubuntu-400.woff2) format("woff2"); }
@font-face { font-family:"Ubuntu"; font-style:italic; font-weight:400; font-display:swap;
             src:url(/static/fonts/ubuntu-400-italic.woff2) format("woff2"); }
@font-face { font-family:"Ubuntu"; font-style:normal; font-weight:500; font-display:swap;
             src:url(/static/fonts/ubuntu-500.woff2) format("woff2"); }
@font-face { font-family:"Ubuntu"; font-style:normal; font-weight:700; font-display:swap;
             src:url(/static/fonts/ubuntu-700.woff2) format("woff2"); }

/* Light palette (default). Dark is opt-in via data-theme, or follows the OS when unset. */
/* Secondary text is tuned to WCAG AA (>= 4.5:1) on both page and panel backgrounds. */
:root { --fg:#1e1d1a; --muted:#605e58; --faint:#6f6c65; --bg:#faf9f5; --panel:#fffdf8; --hover:#f3f1ea;
        --line:#e3e1d9; --accent:#8c3a1e; --on-accent:#fff; --shadow:rgba(0,0,0,.14); --star-off:#6f6c65;
        --ok-bg:#e8f3e8; --ok-line:#bfe0bf; --err-bg:#fbe9e7; --err-line:#f1c0b9;
        --font:"Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme:light; }
:root[data-theme="dark"] { --fg:#e8e6e1; --muted:#aaa69e; --faint:#9a958d; --bg:#171614; --panel:#201f1c; --hover:#282622;
        --line:#35322d; --accent:#d69463; --on-accent:#1a120c; --shadow:rgba(0,0,0,.6); --star-off:#9a958d;
        --ok-bg:#1d2b1d; --ok-line:#2f4d2f; --err-bg:#332018; --err-line:#5a3024; color-scheme:dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fg:#e8e6e1; --muted:#aaa69e; --faint:#9a958d; --bg:#171614; --panel:#201f1c; --hover:#282622;
        --line:#35322d; --accent:#d69463; --on-accent:#1a120c; --shadow:rgba(0,0,0,.6); --star-off:#9a958d;
        --ok-bg:#1d2b1d; --ok-line:#2f4d2f; --err-bg:#332018; --err-line:#5a3024; color-scheme:dark; }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }  /* wins over display rules like .cover-card */
body { margin:0; font:400 15px/1.55 var(--font); color:var(--fg); background:var(--bg); }
a { color:var(--accent); }
/* Pills that are annotations rather than facts (want counts, loans), and popovers. */
.pill.muted-pill { color:var(--muted); }
.pill.faint { color:var(--faint); border-style:dashed; }
a.pill { text-decoration:none; }
a.pill:hover { color:var(--accent); border-color:var(--accent); }
.pop { display:inline-block; position:relative; }
.pop summary { list-style:none; cursor:pointer; }
.pop summary::-webkit-details-marker { display:none; }
.pop .pop-body { position:absolute; left:0; top:1.6rem; z-index:6; min-width:10rem; padding:.45rem .55rem; background:var(--panel);
                 border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 18px var(--shadow); display:flex; flex-wrap:wrap; gap:.3rem; }
.people { display:flex; flex-wrap:wrap; gap:.3rem; }
.small { font-size:12.5px; margin:.35rem 0 0; }
.controls.lend { margin-top:1rem; }
td.owners { white-space:normal; }
td.owners .pill { margin:.1rem .15rem .1rem 0; }
.devices { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem; }
.devices li { display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:14px; padding:.5rem .7rem; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.devices li b { font-weight:500; }
.borrowed { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.borrowed li { display:flex; gap:.8rem; align-items:center; font-size:14px; }
.borrowed .thumb { height:3rem; }
.chips { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin:.2rem 0 .6rem; }
.chip { display:inline-flex; align-items:center; gap:.1rem; }
.chip form.inline { display:inline; }
.chip .x { font-size:14px; color:var(--faint); padding:0 .2rem; line-height:1; }
.chip .x:hover { color:var(--accent); }
.cat-edit { display:inline-block; font-size:13px; }
.cat-edit summary { list-style:none; }
.cat-edit summary::-webkit-details-marker { display:none; }
.cat-picker { margin:.5rem 0 0; padding:.7rem; border:1px solid var(--line); border-radius:8px; background:var(--panel); max-width:28rem; }
.cat-picker input { width:100%; height:32px; padding:0 .6rem; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13.5px; background:var(--bg); color:var(--fg); }
.cat-picker ul { list-style:none; margin:.4rem 0 0; padding:0; max-height:14rem; overflow:auto; }
.cat-picker li button { width:100%; text-align:left; background:none; border:0; padding:.35rem .4rem; border-radius:5px; font:inherit; font-size:13.5px; color:var(--fg); cursor:pointer; display:flex; flex-direction:column; }
.cat-picker li button:hover { background:var(--hover); }
.cat-picker li button .faint { font-size:12px; }
td.title .cat { display:block; font-weight:400; font-size:12px; color:var(--faint); margin-top:.1rem; }
.filters { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.8rem 0 0; }
.small-seg a { text-decoration:none; color:var(--muted); font-size:13px; padding:.3rem .7rem; border-right:1px solid var(--line); }
.small-seg a:last-child { border-right:0; }
.small-seg a.on { background:var(--line); color:var(--fg); }
.catsel select { height:30px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--fg); font:inherit; font-size:13px; padding:0 .5rem; max-width:20rem; }
.clear-filters { font-size:12.5px; }
.pill.primary { border-color:var(--accent); color:var(--accent); }
.author-link { color:inherit; text-decoration:none; border-bottom:1px dotted var(--line); }
.author-link:hover { color:var(--accent); border-bottom-color:var(--accent); }
input, select, button, textarea { font-family:var(--font); }

/* top bar */
.topbar { background:var(--panel); border-bottom:1px solid var(--line); }
.topbar-inner { max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:1.4rem; padding:0 2rem; min-height:60px; flex-wrap:wrap; }
.lockup { display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--fg); }
.lockup svg { display:block; color:var(--accent); }
.wordmark { font-size:1.3rem; letter-spacing:-.015em; }
.wordmark .omni { font-weight:500; }
.wordmark .legent { opacity:.62; }
.site-search { flex:1 1 16rem; max-width:460px; }
.site-search input { width:100%; height:36px; border:1px solid var(--line); border-radius:999px; padding:0 1rem;
                     font:inherit; font-size:14px; background:var(--bg); color:var(--fg); }
.site-search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,58,30,.12); }
.site-search { position:relative; display:flex; align-items:center; gap:.4rem; }
.site-search input { flex:1; }
.scan-link { display:none; color:var(--muted); padding:.3rem; border-radius:6px; }
.scan-link:hover { color:var(--accent); background:var(--hover); }
@media (max-width: 820px), (pointer: coarse) { .scan-link { display:inline-flex; } }
.suggest { position:absolute; left:0; right:0; top:42px; z-index:20; margin:0; padding:.3rem; list-style:none;
           background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px var(--shadow); }
.suggest li { display:grid; grid-template-columns:2rem 1fr auto; gap:.6rem; align-items:center; padding:.35rem .5rem; border-radius:7px; cursor:pointer; font-size:14px; }
.suggest li:hover, .suggest li[aria-selected="true"] { background:var(--hover); }
.suggest img, .suggest .ph { width:2rem; height:2.6rem; object-fit:contain; border-radius:2px; background:var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; font-size:.9rem; }
.suggest .t { font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.suggest .a { display:block; font-weight:400; color:var(--muted); font-size:12.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.suggest .w { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.suggest .more { justify-content:center; grid-template-columns:1fr; text-align:center; color:var(--accent); font-size:13px; }
/* Catalog page tools: filter box, sortable headers, view toggle, cover grid. */
.catalog-tools { display:flex; align-items:center; gap:.75rem; }
.catalog-tools .filter { position:relative; }
.catalog-tools .filter input { height:34px; width:15rem; padding:0 1.6rem 0 .8rem; border:1px solid var(--line); border-radius:999px; font:inherit; font-size:13.5px; background:var(--panel); color:var(--fg); }
.catalog-tools .filter input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,58,30,.12); }
.catalog-tools .filter .clear { position:absolute; right:.55rem; top:0; line-height:34px; text-decoration:none; color:var(--faint); font-size:16px; }
.view-toggle { display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.view-toggle a { display:inline-flex; padding:.4rem .55rem; color:var(--muted); background:var(--panel); }
.view-toggle a + a { border-left:1px solid var(--line); }
.view-toggle a.on { color:var(--accent); background:var(--hover); }
th.sortable a { color:inherit; text-decoration:none; }
th.sortable a:hover, th.sortable.active a { color:var(--accent); }
th.sortable .arrow { font-size:.7em; }
.cover-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:1.6rem 1.25rem; padding:1rem 0; }
.cover-card { display:block; text-decoration:none; color:inherit; min-width:0; }
.cover-card .cover-slot { position:relative; height:200px; display:flex; align-items:flex-end; justify-content:center; }
.cover-card img { max-height:200px; max-width:100%; width:auto; height:auto; border-radius:4px; box-shadow:0 2px 8px var(--shadow); transition:transform .12s ease; }
.cover-card:hover img { transform:translateY(-3px); }
.cover-card .cover-placeholder { width:130px; height:195px; font-size:2.2rem; }
.cover-card .status { position:absolute; left:.35rem; bottom:.35rem; font-size:10.5px; background:var(--panel); }
.cover-card .t { display:block; margin-top:.55rem; font-weight:500; font-size:13.5px; line-height:1.3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cover-card .a { display:block; font-size:12.5px; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
nav.sections { display:flex; gap:1.4rem; margin-left:auto; font-size:14px; }
/* A transparent top border matches the underline's 2px, so the text sits on the bar's centre line. */
nav.sections a { text-decoration:none; color:var(--muted); padding:.25rem 0; border-top:2px solid transparent; border-bottom:2px solid transparent; }
nav.sections a:hover { color:var(--fg); }
nav.sections a.active { color:var(--accent); border-bottom-color:var(--accent); }
/* Account cluster: the profile link reads as text, sign-out is the quietest thing in the bar. */
nav.account { display:flex; align-items:center; gap:.7rem; font-size:14px; white-space:nowrap; }
nav.account a { text-decoration:none; color:var(--fg); }
nav.account a:hover { color:var(--accent); }
nav.account .signout { margin-left:.6rem; padding-left:.9rem; border-left:1px solid var(--line);
                       font-size:12.5px; color:var(--faint); }
nav.account .signout:hover { color:var(--accent); }
.icon-button { display:inline-flex; align-items:center; padding:.2rem; border:0; background:none; color:var(--accent);
               cursor:pointer; border-radius:6px; }
.icon-button:hover { background:var(--hover); }
.icon-button svg { width:1.15rem; height:1.15rem; display:block; }
/* Theme toggle icon follows the effective theme, "system" included. */
/* Anchored to .icon-button so these outrank the generic `.icon-button svg` rule. */
.icon-button .ico-sun { display:none; }
.icon-button .ico-moon { display:block; }
:root[data-theme="dark"] .icon-button .ico-sun { display:block; }
:root[data-theme="dark"] .icon-button .ico-moon { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-button .ico-sun { display:block; }
  :root:not([data-theme="light"]) .icon-button .ico-moon { display:none; }
}
/* RSS popover next to a public handle */
.feeds-pop { display:inline-block; position:relative; vertical-align:middle; margin-left:.35rem; font-size:14px; font-weight:400; }
.feeds-pop summary { list-style:none; cursor:pointer; color:var(--faint); display:inline-flex; padding:.15rem; border-radius:4px; }
.feeds-pop summary::-webkit-details-marker { display:none; }
.feeds-pop summary:hover, .feeds-pop[open] summary { color:var(--accent); background:var(--hover); }
.feeds-pop ul { position:absolute; left:0; top:1.7rem; z-index:5; min-width:15rem; margin:0; padding:.4rem .6rem; list-style:none;
                background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 14px var(--shadow); }
.feeds-pop li { padding:.25rem 0; display:flex; justify-content:space-between; gap:.8rem; }
.feeds-pop a { text-decoration:none; }
.feed-urls { margin:.6rem 0 0; max-width:40rem; }
.feed-url { display:grid; grid-template-columns:8rem 1fr auto; gap:.5rem; align-items:center; margin:.35rem 0; font-size:13.5px; }
.feed-url input { padding:.35rem .5rem; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:12.5px;
                  font-family:ui-monospace, Menlo, monospace; background:var(--bg); color:var(--fg); min-width:0; }
.review.small { font-size:.9rem; margin-top:.35rem; }
@media (max-width: 820px) { nav.sections { margin-left:0; order:4; width:100%; padding-bottom:.5rem; } }

main { max-width:1080px; margin:0 auto; padding:1.5rem 2rem 4rem; }
h2 { margin:2rem 0 .75rem; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:600; color:var(--muted); font-size:.85rem; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.pill { display:inline-block; padding:0 .45rem; border:1px solid var(--line); border-radius:999px;
        font-size:.8rem; margin-right:.25rem; }
.stars { color:var(--accent); letter-spacing:-1px; white-space:nowrap; }
.stars .s { font-style:normal; }
.stars .s.empty { color:var(--star-off); opacity:.55; }
/* Half star: paint the glyph's left half in the accent, right half in the off colour. */
.stars .s.half { background:linear-gradient(90deg, var(--accent) 50%, var(--star-off) 50%); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.95; }
.mono { font-variant-numeric:tabular-nums; }
.num { text-align:right; }
.page-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.page-head h1 { margin:0; font-size:1.6rem; font-weight:500; letter-spacing:-.01em; }
.page-head p { margin:0; }

/* library tabs */
.tabs { display:flex; gap:.25rem; flex-wrap:wrap; align-items:flex-end; margin:1rem 0 0; border-bottom:1px solid var(--line); }
.tab { padding:.5rem .9rem; margin-bottom:-1px; border:1px solid transparent; border-bottom:none;
       border-radius:6px 6px 0 0; color:var(--muted); text-decoration:none; white-space:nowrap; }
.tab:hover { color:var(--fg); background:var(--hover); }
.tab.active { color:var(--fg); font-weight:500; background:var(--panel); border-color:var(--line); }
.tab .count { display:inline-block; min-width:1.4em; padding:0 .4em; margin-left:.3em; border-radius:999px;
              background:var(--line); color:var(--muted); font-size:.75rem; font-weight:600; text-align:center; }
.tab.active .count { background:var(--accent); color:var(--on-accent); }
.tab-sep { width:1px; height:1.4rem; margin:0 .5rem .45rem; background:var(--line); }
.tab-panel { background:var(--panel); border:1px solid var(--line); border-top:none; border-radius:0 0 8px 8px; padding:.25rem 1rem .75rem; }
.tab-panel.standalone { border-top:1px solid var(--line); border-radius:8px; margin-top:1rem; }
table.books td.title { font-weight:500; }
table.books tbody tr:hover { background:var(--hover); }
table.books tbody tr:last-child td { border-bottom:none; }
/* People: every row the same height whether it ends in a Follow button or the "you"
   pill, text centred on the button's line, and the last row ruled off so the panel's
   padding under it doesn't read as an empty row. The bio stays on the name's line,
   cut with an ellipsis; the whole text is its tooltip. */
table.people-table td { vertical-align:middle; }
table.people-table td.act { white-space:nowrap; }
/* "you" stands where the Follow button would, at the button's size, so every row is one height. */
table.people-table td.act .pill { padding:.15rem .6rem; font-size:.85rem; margin:0; }
table.people-table td.act form { display:flex; }  /* no line box around the button: it centres exactly */
table.people-table tbody tr:last-child td { border-bottom:1px solid var(--line); }
/* width plus max-width:0 lets the column shrink below its text, so the bio gives way
   instead of the table growing past the panel on a phone. */
table.people-table td.title { width:55%; max-width:0; }
table.people-table .who { display:flex; align-items:baseline; gap:.35rem; min-width:0; }
table.people-table .who > a { white-space:nowrap; }
@media (max-width: 600px) { table.people-table .who > a { white-space:normal; } }
/* Capped, or the table would widen the Name column to fit the whole bio. */
table.people-table .bio { flex:0 1 auto; min-width:0; max-width:min(30rem, 45vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
/* The tab's own column on the library (Finished, Started, Added): a date stays on one line. */
table.books td.tabval { white-space:nowrap; }
table.books td.title a { color:inherit; text-decoration:none; }
table.books td.title a:hover { color:var(--accent); }
.empty { color:var(--muted); padding:1.5rem 0; text-align:center; }
.thumb-col { width:2.6rem; padding-right:0; }
.thumb { display:block; height:3.2rem; width:auto; max-width:2.6rem; object-fit:contain; border-radius:3px; box-shadow:0 1px 3px var(--shadow); }
.thumb.placeholder { width:2.2rem; display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; font-size:1rem; background:var(--line); }
.editions-picker summary { cursor:pointer; color:var(--accent); }
.editions-picker ul { list-style:none; margin:.3rem 0 0; padding:0; font-size:.9rem; }
.editions-picker li { padding:.15rem 0; }
.editions-picker a { color:var(--fg); text-decoration:none; }
.editions-picker a:hover { color:var(--accent); }

/* book detail: rail + main */
.book-page { display:grid; grid-template-columns:260px minmax(0,1fr); gap:3rem; align-items:start; margin-top:.75rem; }
/* Not sticky: with its controls grouped into cards the rail is often taller than the window. */
.rail { min-width:0; }
.rail .cover { width:100%; height:auto; display:block; border-radius:4px; box-shadow:0 1px 3px var(--shadow); }
.cover-placeholder { width:100%; aspect-ratio:2/3; display:flex; align-items:center; justify-content:center;
                     font-size:3rem; color:var(--muted); background:var(--line); border-radius:4px; }
.cover-edit { margin-top:.6rem; font-size:12.5px; }
.cover-edit summary { cursor:pointer; color:var(--muted); list-style:none; }
.cover-edit summary::-webkit-details-marker { display:none; }
.cover-edit summary:hover { color:var(--accent); }
.cover-edit .stack label { display:block; margin:.5rem 0; color:var(--muted); }
.cover-edit .stack input { display:block; width:100%; margin-top:.2rem; font:inherit; font-size:13px; }
.cover-edit .stack input[type=url] { padding:.35rem .5rem; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--fg); }
.controls { margin-top:1.25rem; display:grid; gap:.9rem; }
.ctl label, .rail-h { display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin:0 0 .3rem; }
.ctl label.check { display:flex; gap:.5rem; align-items:center; text-transform:none; letter-spacing:0; font-size:13.5px; color:var(--fg); cursor:pointer; }
.ctl label.check input { margin:0; }
.ctl select { width:100%; height:36px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--fg); font:inherit; font-size:14px; padding:0 .6rem; }
/* Zero state is five outline stars; lit ones are filled accent. Hover previews a rating. */
.star-pick { display:flex; gap:2px; align-items:center; }
/* Each star is two overlaid buttons clipped to a half; the lit ones are accent. */
.star-pair { position:relative; display:inline-block; width:1em; height:1em; font-size:22px; line-height:1; }
.star-pair button { position:absolute; inset:0; padding:0; border:0; background:none; cursor:pointer; font:inherit; line-height:1; color:var(--star-off); }
.star-pair .half { clip-path:inset(0 50% 0 0); }
.star-pair .full { clip-path:inset(0 0 0 50%); }
.star-pair button.on { color:var(--accent); }
.star-pair button:hover { color:var(--accent); }
.star-pick button.clear { font-size:12px; color:var(--faint); margin-left:.4rem; border:0; background:none; cursor:pointer; }
.stars.empty { color:var(--star-off); opacity:.55; }
.autosaved { font-size:11.5px; color:var(--faint); margin:0; }
.rail-block { margin-top:1.6rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.read-row { border-bottom:1px solid var(--line); font-size:13.5px; }
.read-row summary { display:flex; justify-content:space-between; gap:.5rem; padding:.35rem 0; cursor:pointer; list-style:none; }
.read-row summary::-webkit-details-marker { display:none; }
.read-row summary span:last-child { color:var(--muted); white-space:nowrap; }
.read-row.active summary span:first-child { color:var(--accent); }
.read-edit { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .6rem; padding:.5rem 0 .8rem; font-size:12.5px; }
.read-edit label { display:flex; flex-direction:column; gap:.15rem; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; font-size:10.5px; }
.read-edit input { padding:.3rem .45rem; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px; background:var(--panel); color:var(--fg); min-width:0; }
.read-edit .span2 { grid-column:1 / -1; }
.read-edit .row-actions { grid-column:1 / -1; display:flex; gap:.8rem; align-items:center; }
.progress { display:block; height:.35rem; border-radius:999px; background:var(--line); overflow:hidden; margin-top:.3rem; }
.progress > span { display:block; height:100%; background:var(--accent); }
.linkish { font-size:13px; color:var(--accent); background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-decoration:none; }
.linkish.danger { color:#b3261e; }
.addread summary { margin-top:.6rem; }
.book-main h1 { font-size:27px; font-weight:500; line-height:1.25; margin:0 0 .35rem; letter-spacing:-.01em; }
.byline { font-size:16px; color:var(--muted); margin:0 0 .9rem; }
.byline a { text-decoration:none; }
.facts { font-size:13.5px; color:var(--muted); margin:0 0 .4rem; }
.facts span { white-space:nowrap; }
.sep { color:var(--line); margin:0 .45rem; }
details.ids { font-size:13px; color:var(--muted); }
details.ids summary { cursor:pointer; color:var(--faint); font-size:12.5px; }
details.ids dl { display:grid; grid-template-columns:max-content 1fr; gap:.2rem 1.2rem; margin:.6rem 0 0; }
details.ids dt { color:var(--faint); }
details.ids dd { margin:0; }
.book-main section { margin-top:2.1rem; }
.book-main section h2 { margin:0 0 .75rem; }
.desc { position:relative; max-height:7.2em; overflow:hidden; }
.desc.open { max-height:none; }
.desc:not(.open)::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2.6em;
                          background:linear-gradient(to bottom, transparent, var(--bg)); }
.desc.short { max-height:none; }
.desc.short::after { display:none; }
.description p { margin:.6rem 0; }
.description p:first-child { margin-top:0; }
.description ul, .description ol { margin:.4rem 0; padding-left:1.4rem; }
.description li { margin:.15rem 0; }
.description h1, .description h2, .description h3 { font-size:1rem; margin:1rem 0 .3rem; text-transform:none; letter-spacing:0; color:var(--fg); }
.more { margin-top:.5rem; }
textarea { width:100%; min-height:96px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--fg);
           font:inherit; font-size:14.5px; padding:.7rem .85rem; resize:vertical; }
textarea::placeholder { color:var(--faint); }
.hint { font-size:12.5px; color:var(--faint); margin:.4rem 0 0; }
.priv { display:none; margin-top:.9rem; }
.priv.show, .priv:has(textarea:not(:placeholder-shown)) { display:block; }
.review { border-left:3px solid var(--accent); padding-left:.9rem; margin-top:1rem; }
details.copy summary { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; font-size:14px; border:1px solid var(--line);
                       background:var(--panel); border-radius:8px; padding:.5rem .9rem; color:var(--fg); list-style:none; }
details.copy summary::-webkit-details-marker { display:none; }
details.copy[open] summary { margin-bottom:1.1rem; }
details.copy .link-groups { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1.4rem; }
.link-groups { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:1rem; }
.link-group h3 { margin:0 0 .45rem; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:500; }
.link-group ul { list-style:none; margin:0; padding:0; }
.link-group li { margin-bottom:.25rem; }
.link-group a { font-size:13.5px; color:var(--accent); text-decoration:none; }
.link-group a:hover { text-decoration:underline; }
/* "Free to read" under the facts: the same quiet line, links in the accent. */
.facts.free-read a { color:var(--accent); text-decoration:none; }
.facts.free-read a:hover { text-decoration:underline; }
/* Your books (title page): one row per book on the shelf, each with its own edition. */
.book-card > h2 .faint { text-transform:none; letter-spacing:0; font-weight:400; }
.shelf-books { list-style:none; margin:0 0 .6rem; padding:0; }
.shelf-book { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.3rem 1rem; padding:.75rem 0; border-top:1px solid var(--line); align-items:start; }
.shelf-sticker { white-space:nowrap; }
.shelf-book:first-child { border-top:0; padding-top:0; }
.shelf-edition { font-size:14.5px; }
.shelf-book .chips { margin:.35rem 0 0; }
.shelf-note { margin:.3rem 0 0; font-size:13.5px; color:var(--muted); font-style:italic; }
.shelf-edit { text-align:right; }
.shelf-edit[open] { grid-column:1 / -1; text-align:left; }
.shelf-form { display:grid; gap:.6rem; margin:.6rem 0 .5rem; max-width:32rem; }
.shelf-form label { font-size:13px; color:var(--muted); }
.shelf-form input[type=text] { display:block; width:100%; margin-top:.2rem; padding:.35rem .5rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; font-size:14px; }
.shelf-form label.check { display:flex; gap:.5rem; align-items:center; color:var(--fg); }
.shelf-form .row-actions { display:flex; gap:.8rem; align-items:center; }
/* Every edition of the title, with "I own this". */
table.editions-table td { vertical-align:middle; font-size:14px; }
table.editions-table td.act { text-align:right; white-space:nowrap; }
table.editions-table td.act form.inline { display:inline; margin-left:.5rem; }
table.editions-table tr.mine td { background:var(--hover); }
.online-mark { color:var(--accent); margin-left:.15rem; }
.editions-more { margin:.8rem 0 0; }

/* Stickers (stickers.py): the print page shows the label at its real size, always paper
   white with dark text whatever the theme, and printing puts only the label on the page. */
.print-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:2rem; align-items:start; margin-top:1.2rem; }
.sticker-stage { display:flex; flex-direction:column; align-items:center; gap:.8rem; padding:2.4rem 1rem; border:1px solid var(--line); border-radius:10px;
                 background:repeating-linear-gradient(45deg, var(--hover) 0 10px, var(--bg) 10px 20px); }
.sticker { width:57mm; height:32mm; max-width:100%; background:#fff; color:#1e1d1a; border-radius:2.5mm; box-shadow:0 1px 2px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.18);
           display:grid; grid-template-columns:26mm minmax(0,1fr); gap:2.5mm; align-items:center; padding:3mm; box-sizing:border-box; }
.sticker.size-wide { width:89mm; height:36mm; grid-template-columns:30mm minmax(0,1fr); }
.sticker .qr { width:100%; aspect-ratio:1; }
.sticker .qr svg { width:100%; height:100%; display:block; }
.st-text { min-width:0; display:flex; flex-direction:column; gap:.6mm; line-height:1.15; }
/* The title may take two lines; a third is cut with an ellipsis. */
.st-text b { font-size:11px; font-weight:700; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.st-text b.long { font-size:9.5px; -webkit-line-clamp:3; }
.st-text .st-ed { font-size:8.5px; color:#605e58; }
.st-text .st-site { margin-top:1.2mm; font-size:8.5px; font-weight:500; color:#8c3a1e; }
.st-text .st-hint { font-size:7.5px; color:#6f6c65; }
.print-card { padding:1.1rem 1.25rem 1.2rem; }
.print-card > h2 { font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; }
.print-card .controls { display:grid; gap:.9rem; }
.print-card .ctl label, .print-card .rail-h { display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin:0 0 .3rem; }
.print-card .ctl select { width:100%; height:36px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--fg); font:inherit; font-size:14px; padding:0 .6rem; }
.code-line { font-size:13px; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:.4rem .6rem; overflow-wrap:anywhere; }
.print-card .btnrow { margin-top:0; align-items:center; }
.print-card form.inline { display:inline; }
/* The bare label page loads in this frame; Print prints the frame, so only the label goes
   to the printer, on paper its own size. Kept in the layout at 1px: a display:none frame
   cannot print in every browser. */
.label-frame { position:absolute; left:0; top:0; width:100mm; height:40mm; border:0; opacity:0; pointer-events:none; }
@media (max-width: 820px) { .print-layout { grid-template-columns:1fr; } }
/* What a scan shows: one card, sized for a phone. */
.scan-page { max-width:34rem; margin:1rem auto 0; display:grid; gap:1rem; }
.scan-book { display:grid; grid-template-columns:64px minmax(0,1fr); gap:.9rem; align-items:center; }
.scan-book .cover, .scan-book .cover-placeholder { width:64px; aspect-ratio:2/3; border-radius:4px; object-fit:cover; font-size:1.4rem; }
.scan-book h1 { margin:0; font-size:1.35rem; font-weight:500; line-height:1.25; }
.scan-book p { margin:.15rem 0 0; font-size:13.5px; }
.scan-state { padding:1rem 1.2rem 1.1rem; }
.scan-state h2 { margin:0 0 .5rem; font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.scan-state p { margin:0 0 .6rem; }
.scan-state .btnrow { margin-top:.4rem; }
.scan-foot { font-size:12.5px; color:var(--faint); margin:.6rem 0 0; }
@media (max-width: 820px) {
  .book-page { grid-template-columns:1fr; gap:1.75rem; }
  .rail { position:static; display:grid; grid-template-columns:120px 1fr; gap:1.25rem; align-items:start; }
  .rail .rail-block { grid-column:1 / -1; }
}

/* about page: prose + receipt */
.prose { max-width:680px; margin:1.5rem auto 3rem; font-size:16px; line-height:1.7; }
.prose h1 { font-size:30px; font-weight:500; letter-spacing:-.015em; margin:0 0 .6rem; }
.prose .lede { font-size:18px; color:var(--muted); margin:0 0 2.5rem; line-height:1.6; }
.prose h2 { font-size:13px; margin:3rem 0 .9rem; }
.prose.page h2 { font-size:18px; font-weight:500; text-transform:none; letter-spacing:-.01em; color:var(--fg); margin:2.2rem 0 .6rem; }
.prose.page em { color:var(--muted); }
.prose.page ul { padding-left:1.3rem; }
.prose.page li { margin:.3rem 0; }
.prose p { margin:0 0 1rem; }
.promises { list-style:none; margin:0; padding:0; }
.promises li { padding:.7rem 0; border-bottom:1px solid var(--line); display:flex; gap:.9rem; align-items:baseline; }
.promises b { font-weight:500; min-width:168px; flex-shrink:0; }
.promises span { color:var(--muted); font-size:15px; }
.receipt-frame { display:flex; justify-content:center; margin:1.25rem 0 .5rem; }
.receipt { background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:1.9rem 1.6rem; width:370px; max-width:100%;
           font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size:13px; line-height:1.85; color:var(--fg); }
.r-name { text-align:center; font-size:14px; letter-spacing:.22em; margin-bottom:3px; }
.r-sub { text-align:center; font-size:11px; color:var(--muted); }
.r-when { text-align:center; font-size:11px; color:var(--faint); margin-bottom:1.1rem; }
.r-tear { border-top:1px dashed var(--line); margin:.9rem 0 .75rem; }
.r-h { font-size:11px; color:var(--muted); letter-spacing:.05em; margin-bottom:.3rem; }
.r-line { display:flex; justify-content:space-between; gap:1rem; }
.r-total { display:flex; justify-content:space-between; margin-top:.45rem; padding-top:.45rem; border-top:1px solid var(--line); }
.r-note { font-size:11px; color:var(--faint); margin-top:2px; }
.r-balance { display:flex; justify-content:space-between; font-size:15px; align-items:baseline; }
.neg { color:#a3341f; } .pos { color:#2e6b3a; }
:root[data-theme="dark"] .neg { color:#e07a5f; } :root[data-theme="dark"] .pos { color:#7fbf8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .neg { color:#e07a5f; } :root:not([data-theme="light"]) .pos { color:#7fbf8a; } }
.r-bar { height:7px; background:var(--line); border-radius:2px; margin:.8rem 0 .35rem; overflow:hidden; }
.r-bar i { display:block; height:100%; background:var(--accent); }
.r-barlabel { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.r-foot { font-size:11px; color:var(--muted); line-height:1.75; }
.r-thanks { text-align:center; font-size:11px; color:var(--faint); letter-spacing:.12em; margin-top:1rem; }
.r-stamp { text-align:center; font-size:10px; color:var(--faint); margin-top:5px; word-break:break-all; }
.under { text-align:center; font-size:13.5px; color:var(--muted); margin-top:.9rem; }
.btnrow { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem; }
.btnrow.center { justify-content:center; }
.site-foot { max-width:1080px; margin:0 auto; padding:1.25rem 2rem 2.5rem; justify-content:center; border-top:1px solid var(--line); font-size:13.5px; color:var(--faint); display:flex; gap:1.2rem; }
.site-foot a { color:var(--muted); text-decoration:none; }
.site-foot a:hover { color:var(--accent); }

/* import */
.prose-narrow { max-width:60ch; }
.upload { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:1rem; }
.summary { padding:1.25rem 1.5rem; }
.tally { list-style:none; margin:0 0 1rem; padding:0; }
.tally li { padding:.3rem 0; border-bottom:1px solid var(--line); }
.tally b { display:inline-block; min-width:3.5rem; font-size:1.2rem; font-weight:500; }
ul.plain { list-style:none; margin:0 0 1rem; padding:0; }
ul.plain li { padding:.2rem 0; }
table.review tr.active td { background:var(--hover); }
table.review .row-actions { white-space:nowrap; }
table.review .row-actions form { margin-left:.35rem; }
table.review .small { font-size:.85rem; }
tr.search-row > td { padding:.75rem 1rem 1rem; background:var(--hover); }
table.candidates { margin-top:.6rem; }
table.candidates td { background:var(--panel); }

/* add page preview & misc */
.isbn-search { display:flex; gap:.5rem; max-width:34rem; margin-bottom:1.25rem; }
.isbn-search input { flex:1; height:36px; padding:0 .75rem; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:14px; background:var(--panel); color:var(--fg); }
.isbn-search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,58,30,.12); }
/* Lookup result: the same shape as the book page, in one bordered card. */
.preview-card { display:grid; grid-template-columns:120px minmax(0,1fr); gap:1.5rem; align-items:start; margin-top:.75rem;
                padding:1.25rem; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.preview-cover img { display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 1px 3px var(--shadow); }
.preview-body h2 { margin:0 0 .15rem; font-size:1.35rem; font-weight:500; letter-spacing:-.01em; line-height:1.25; text-transform:none; color:var(--fg); }
.preview-body .byline { margin:0 0 .5rem; color:var(--muted); }
.preview-body .facts { margin:0 0 1.1rem; font-size:13.5px; color:var(--muted); }
.preview-body .facts .sep { margin:0 .1rem; }
.preview-body .facts .sep { margin:0 .4rem; color:var(--faint); }
.preview-body .in-library { margin:0 0 1.1rem; }
.add-row { display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; margin:0 0 1.25rem; }
.preview-body .about-h { margin:0 0 .4rem; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); font-weight:500; }
.preview-body .desc { margin-bottom:1.1rem; font-size:14.5px; line-height:1.6; }
.preview-body .more { margin:-.6rem 0 1.1rem; }
.add-row .ctl { min-width:11rem; }
.add-row .button { height:36px; }
.inline-add { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin:.75rem 0; }
.inline-add select { padding:.4rem .6rem; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--panel); color:var(--fg); }
@media (max-width: 640px) { .preview-card { grid-template-columns:1fr; } .preview-cover { max-width:140px; } }
dl { display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1.5rem; }
dt { color:var(--muted); }
dd { margin:0; }
.button { display:inline-block; padding:.35rem .8rem; border:1px solid var(--line); border-radius:7px;
          background:var(--panel); color:var(--fg); text-decoration:none; font:inherit; cursor:pointer; }
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
/* margin:0 because .small, the caption class, also matches this and would push the button down. */
.button.small { padding:.15rem .6rem; font-size:.85rem; margin:0; }
.button.danger { color:#b3261e; }
/* settings page: cards */
.settings { max-width:720px; }
.settings h1 { font-size:26px; font-weight:500; margin:0 0 1.6rem; letter-spacing:-.01em; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:1.35rem 1.5rem; margin-bottom:1rem; }
.card > h2 { margin:0 0 .25rem; font-size:13px; letter-spacing:.06em; }
.card .caption { font-size:13.5px; color:var(--muted); margin:0 0 1.1rem; }
.card .foot { font-size:12.5px; color:var(--faint); margin:1rem 0 0; }
.kv { display:grid; grid-template-columns:120px 1fr; gap:.45rem 1rem; font-size:14.5px; margin:0 0 1.1rem; }
.kv dt { color:var(--faint); }
.kv dd { margin:0; }
.btnrow { display:flex; gap:.55rem; flex-wrap:wrap; }
.card .field { margin-bottom:1rem; }
.card .field > label { display:block; font-size:13.5px; margin-bottom:.35rem; }
.card .field .hint { display:inline; margin:0; }
.card .field input[type=text] { width:100%; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:.55rem .7rem; font:inherit; font-size:14.5px; color:var(--fg); }
.card .field input[type=text]:focus, .prefixed:focus-within { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,58,30,.12); }
.prefixed { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:7px; background:var(--bg); overflow:hidden; }
.prefixed span { padding:.55rem 0 .55rem .7rem; color:var(--faint); font-size:14.5px; white-space:nowrap; }
.prefixed input[type=text] { border:0 !important; background:none !important; padding-left:1px !important; box-shadow:none !important; }
.shown-as { border:0; padding:0; margin:0 0 1.1rem; }
.shown-as legend { padding:0; margin-bottom:.35rem; }
.shown-as label { display:flex; align-items:center; gap:.5rem; margin:.3rem 0; cursor:pointer; }
.shown-as b { font-weight:500; }
.toggle { display:flex; gap:.7rem; align-items:flex-start; padding:.9rem; border:1px solid var(--line); border-radius:8px; background:var(--bg); margin-bottom:1.1rem; cursor:pointer; }
.toggle input { margin:.2rem 0 0; }
.toggle b { font-weight:500; display:block; }
.toggle small { color:var(--muted); font-size:13px; }
.locked { border:1px dashed var(--line); border-radius:8px; padding:.9rem; font-size:13.5px; color:var(--muted); margin-top:1rem; }
.locked b { color:var(--fg); font-weight:500; }
.card .feed-urls { margin-top:1rem; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.seg button { border:0; background:transparent; color:var(--muted); font:inherit; font-size:14px; padding:.45rem 1rem; cursor:pointer; border-right:1px solid var(--line); }
.seg button:last-child { border-right:0; }
.seg button.on { background:var(--line); color:var(--fg); }
.stats { font-size:14px; color:var(--muted); margin:0 0 1rem; }
.stats b { color:var(--fg); font-weight:500; }
.social { display:flex; gap:1.8rem; font-size:14.5px; }
.social a { text-decoration:none; color:inherit; }
.social .n { font-weight:500; }
.social .l { color:var(--faint); font-size:13px; display:block; }
/* Danger, graduated: soft for the reversible-by-reimport, hard for the permanent. */
:root { --danger-line:#e3b8ad; --danger-fg:#9a3a26; --danger-hard-bg:#fbe9e7; --danger-hard-line:#d9988a; }
:root[data-theme="dark"] { --danger-line:#4a302a; --danger-fg:#e08b72; --danger-hard-bg:#3a211b; --danger-hard-line:#6b4136; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --danger-line:#4a302a; --danger-fg:#e08b72; --danger-hard-bg:#3a211b; --danger-hard-line:#6b4136; } }
.card.danger { border-color:var(--danger-line); }
.card.danger > h2 { color:var(--danger-fg); }
.drow { border-bottom:1px solid var(--line); padding:.9rem 0; }
.drow:last-of-type { border-bottom:0; padding-bottom:0; }
.drow summary { display:flex; justify-content:space-between; align-items:center; gap:1.25rem; list-style:none; cursor:pointer; }
.drow summary::-webkit-details-marker { display:none; }
.drow summary b { display:block; font-size:14.5px; font-weight:500; margin-bottom:.1rem; }
.drow summary p { margin:0; font-size:13.5px; color:var(--muted); }
.drow .confirm { margin:.9rem 0 0; display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; }
.drow .confirm label { font-size:13px; color:var(--muted); flex:1 1 16rem; }
.drow .confirm input { display:block; width:100%; margin-top:.3rem; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:.5rem .7rem; font:inherit; color:var(--fg); }
.button.danger-soft { border-color:var(--danger-hard-line); color:var(--danger-fg); white-space:nowrap; }
.button.danger-hard { background:var(--danger-hard-bg); border-color:var(--danger-hard-line); color:var(--danger-fg); white-space:nowrap; }
.danger-box { border:1px solid var(--err-line); border-radius:7px; padding:.5rem .9rem; margin:.6rem 0; max-width:40rem; }
.danger-box summary { cursor:pointer; font-weight:500; }
.danger-box .form { margin-top:.5rem; }
.danger-box .form p { margin:0 0 .6rem; color:var(--muted); font-size:14px; }
.danger-box .form label { margin:0 0 .6rem; }
.danger-box .button.danger { border-color:var(--err-line); background:var(--err-bg); }
.actions .button { margin-right:.5rem; }
.form { max-width:28rem; }
.form label { display:block; margin:.8rem 0; font-weight:500; }
.form input { display:block; width:100%; margin-top:.25rem; padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--panel); color:var(--fg); }
.form input:disabled { color:var(--muted); background:var(--bg); }
.form label.check { display:flex; gap:.6rem; align-items:flex-start; }
.form label.check input { width:auto; margin:.25rem 0 0; }
.form small { font-weight:400; }
.flash { padding:.6rem .9rem; border-radius:6px; margin-bottom:1rem; background:var(--ok-bg); border:1px solid var(--ok-line); }
.flash.error, .errors { background:var(--err-bg); border:1px solid var(--err-line); border-radius:6px; padding:.6rem .9rem; margin:0 0 1rem; }

/* Announcement bar for a news post the member hasn't seen. Blue, so it reads as
   news rather than as the green "done" of a flash message. */
:root { --info-bg:#e9f1fb; --info-line:#bcd2ee; --info-fg:#1f4f8f; }
:root[data-theme="dark"] { --info-bg:#172230; --info-line:#2b4262; --info-fg:#9cc2f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --info-bg:#172230; --info-line:#2b4262; --info-fg:#9cc2f2; } }
.news-bar { display:flex; align-items:center; gap:.75rem; padding:.5rem .5rem .5rem .9rem; margin-bottom:1rem; border-radius:6px; background:var(--info-bg); border:1px solid var(--info-line); }
.news-bar p { margin:0; flex:1; min-width:0; }
.news-bar strong { color:var(--info-fg); font-weight:600; }
.news-bar .news-read { color:var(--info-fg); font-weight:500; white-space:nowrap; }
.news-bar form { margin:0; display:flex; }
.news-close { border:0; background:none; color:var(--info-fg); font:inherit; font-size:1.3rem; line-height:1; padding:.15rem .45rem; border-radius:4px; cursor:pointer; }
.news-close:hover { background:var(--info-line); }
/* The list sits inside .prose.page, whose ul/li/h2 rules would indent it and space
   every title like a section heading; these selectors are specific enough to win. */
.prose.page .news-list { list-style:none; padding:0; margin:1.25rem 0 1.5rem; }
.prose.page .news-list li { margin:0; padding:1rem 0; border-bottom:1px solid var(--line); }
.prose.page .news-list li:first-child { padding-top:0; }
.prose.page .news-list time, .prose .news-meta { color:var(--faint); font-size:13px; }
.prose.page .news-list h2 { margin:.15rem 0 .3rem; font-size:1.2rem; font-weight:500; }
.prose.page .news-list h2 a { color:inherit; text-decoration:none; }
.prose.page .news-list h2 a:hover { text-decoration:underline; }
.prose.page .news-list p { margin:0; color:var(--muted); }
.prose .news-meta { margin:0 0 .25rem; }

/* Pager under the All books list: previous / "Showing 101 to 200 of 4,312" / next. */
.pager { display:flex; align-items:center; justify-content:center; gap:1rem; padding:.9rem 0 .4rem; border-top:1px solid var(--line); font-size:13.5px; }
.pager .button.disabled { opacity:.45; pointer-events:none; }
.pager .per-page { margin-left:.5rem; padding-left:1rem; border-left:1px solid var(--line); }
.pager .per-page b { font-weight:600; color:var(--fg); }
@media (max-width:640px) { .pager { flex-wrap:wrap; row-gap:.5rem; } .pager .per-page { border-left:0; padding-left:0; margin-left:0; flex-basis:100%; text-align:center; } }

/* First-visit panel in an empty library: three doors and a quieter fourth. */
.start { padding:2rem 1.25rem 1.6rem; text-align:center; }
.start h2 { margin:0 0 1.2rem; font-size:1.1rem; font-weight:500; }
.start-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.9rem; max-width:760px; margin:0 auto 1.2rem; }
.start-card { display:block; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:inherit; text-decoration:none; text-align:left; transition:border-color .15s; }
.start-card:hover { border-color:var(--accent); text-decoration:none; }
.start-card b { display:block; margin-bottom:.3rem; font-weight:600; }
.start-card span { display:block; color:var(--muted); font-size:13.5px; line-height:1.45; }
.start p { margin:0; font-size:14px; }

/* Error pages: the site's chrome, one sentence, a way back. */
.error-page { max-width:560px; margin:3rem auto; text-align:center; }
.error-page .error-code { margin:0 0 .4rem; color:var(--faint); font-size:13px; letter-spacing:.08em; }
.error-page h1 { margin:0 0 .6rem; font-size:1.6rem; font-weight:500; letter-spacing:-.01em; }
.error-page .btnrow { justify-content:center; margin-top:1.4rem; }

/* Shelves folded into one tab-shaped toggle; the panel opens below the tab bar, in the flow. */
.tabs .shelves-toggle { font:inherit; background:transparent; cursor:pointer; }
.tabs .shelves-toggle:hover { background:var(--hover); }
.tabs .shelves-toggle.active { background:var(--panel); }
.tabs .shelves-toggle::after { content:" ▾"; color:var(--faint); font-size:.8em; }
.tabs .shelves-toggle[aria-expanded="true"]::after { content:" ▴"; }
.tabs .shelves-toggle .current-shelf { margin-left:.3rem; color:var(--fg); font-weight:500; }
.shelf-panel { padding:.8rem .9rem; background:var(--panel); border:1px solid var(--line); border-top:none; }
.shelf-filter { width:100%; margin-bottom:.6rem; padding:.4rem .7rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; font-size:13.5px; }
.shelf-chips { display:flex; flex-wrap:wrap; gap:.4rem; max-height:50vh; overflow-y:auto; }
.shelf-chips .pill.on { color:var(--accent); border-color:var(--accent); }
.shelf-chips .count { color:var(--faint); margin-left:.2rem; font-size:.9em; }

/* Alphabet bar under the catalog filters: jump to titles by initial. */
.alpha { display:flex; flex-wrap:wrap; gap:.15rem .1rem; margin:.7rem 0 0; font-size:13px; }
.alpha a, .alpha .none { display:inline-block; min-width:1.7em; padding:.15rem .3rem; text-align:center; border-radius:5px; text-decoration:none; }
.alpha a { color:var(--fg); }
.alpha a:hover { background:var(--panel); }
.alpha a.on { background:var(--accent); color:var(--on-accent); }
.alpha .none { color:var(--faint); }

/* Loans: the badge on the tab, the ask/offer popover, the Loans page and one request. */
nav.sections .badge { display:inline-block; min-width:1.4em; padding:0 .4em; margin-left:.15rem; border-radius:999px; font-size:.75rem; line-height:1.5; text-align:center; background:var(--accent); color:var(--on-accent); }
.pop.ask { vertical-align:middle; }
.pop.ask summary.pill { cursor:pointer; }
/* The rail is narrow, so the ask form opens in the flow below the person rather than floating. */
.pop.ask .pop-body { position:static; min-width:0; width:100%; margin:.4rem 0 .2rem; }
.ask-form { display:grid; gap:.55rem; font-size:13.5px; }
.ctl .ask-form label, .ask-form label { display:block; font-size:13px; color:var(--fg); text-transform:none; letter-spacing:0; margin:0; }
.ctl .ask-form label.check, .ask-form label.check { display:flex; gap:.5rem; align-items:center; cursor:pointer; }
.ask-form textarea { min-height:64px; margin-top:.25rem; font-size:13.5px; }
.ask-form input[type=text] { display:block; width:100%; margin-top:.25rem; padding:.4rem .55rem; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13.5px; background:var(--bg); color:var(--fg); }
.ask-form .small { margin:0; }
.ask-form .button { justify-self:start; }
.owner-line { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .4rem; margin-bottom:.35rem; }
.loans-panel { padding:.9rem 1.1rem 1rem; }
.loans-panel h2 { margin:0 0 .6rem; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.loans-panel h2 .count { color:var(--muted); margin-left:.3rem; font-size:.95em; letter-spacing:0; }
.loan-list { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.loan-list.finished { opacity:.75; }
.loan-row { display:flex; gap:.8rem; align-items:center; font-size:14px; }
.loan-row .thumb { height:3rem; }
.loan-row .loan-what { flex:1; min-width:0; }
.loan-row .loan-what a { color:inherit; text-decoration:none; }
.loan-row .loan-what a:hover { color:var(--accent); }
.loans-privacy { max-width:52rem; margin-top:1.2rem; line-height:1.5; }
.crumbs { margin:0 0 .5rem; font-size:13px; }
.crumbs a { color:var(--muted); text-decoration:none; }
.card.loan { max-width:44rem; }
.card.loan h3 { margin:1.2rem 0 .5rem; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.loan-book { display:flex; gap:1rem; align-items:flex-start; }
.loan-book .thumb { height:5rem; }
.loan-book .status-line { margin:.5rem 0 0; font-size:14px; color:var(--muted); }
.card.loan .note { margin:1rem 0 0; padding:.6rem .9rem; border-left:3px solid var(--line); background:var(--bg); border-radius:0 6px 6px 0; font-size:14.5px; white-space:pre-wrap; }
.card.loan .contact { margin:0; padding-left:1.1rem; font-size:15px; }
.card.loan .answer { display:grid; gap:.6rem; max-width:32rem; }
.card.loan .answer label { display:block; font-size:14px; }
.card.loan .answer label.check { display:flex; gap:.5rem; align-items:center; cursor:pointer; }
.card.loan .answer textarea { margin-top:.3rem; min-height:72px; }
.card.loan .answer input[type=text] { display:block; width:100%; margin-top:.3rem; padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--bg); color:var(--fg); }
.card.loan .actions { margin:.9rem 0 0; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* Book page: related controls grouped into cards, as on Settings, so a page that keeps
   gaining options stays easy to scan. Cards on the panel colour; fields inside them on
   the page colour, so a select or a textarea stands out from its card. */
.rail-card { padding:.95rem 1rem 1rem; margin:1rem 0 0; }
.rail-card > h2, .book-card > h2 { font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; }
.rail-card > h2 .faint { text-transform:none; letter-spacing:0; font-weight:400; }
.rail-card .controls { margin-top:0; gap:.8rem; }
.rail-card .controls + .controls { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.rail-card .ctl select, .rail-card .read-edit input, .book-card textarea { background:var(--bg); }
.rail-card .read-row:has(+ .addread) { border-bottom:0; }  /* the last read, just above + Add a read */
.rail-card .read-edit { grid-template-columns:minmax(0,1fr); }  /* the rail is too narrow for two date inputs side by side */
.card-note { font-size:12.5px; color:var(--muted); margin:0; line-height:1.45; }
.rail-remove { margin:.9rem 0 0; padding:0 .2rem; }
.book-main .book-card { padding:1.1rem 1.25rem 1.2rem; }
.book-main .book-card h2 { margin:0 0 .8rem; }
.rail-card, .book-card { min-width:0; }  /* let a card shrink inside a grid, so its text wraps */
@media (max-width: 820px) {
  /* One column on a phone: the cover, then each card at full width. Side by side, the
     first card was too narrow for the stars and pushed the page past the screen edge. */
  .rail { grid-template-columns:minmax(0,1fr); gap:1rem; }
  .rail .rail-cover { display:flex; gap:1rem; align-items:flex-end; }
  .rail .rail-cover .cover, .rail .rail-cover .cover-placeholder { width:120px; }
  .rail .rail-card, .rail .rail-remove { margin-top:0; }
}

/* Wishlist: the owner's link card (Wanted tab, Settings) and the shared page. */
.tab-panel .share-card { margin:.9rem 0 .75rem; background:var(--bg); }
.share-card .feed-url { display:flex; gap:.5rem; align-items:center; margin:0 0 .8rem; }
.share-card .feed-url input { flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:.45rem .6rem; font:inherit; font-size:13.5px; color:var(--fg); }
.tab-panel .share-card .feed-url input { background:var(--panel); }
.share-actions { align-items:center; }
.share-actions form { margin:0; }
.wishlist-page { max-width:760px; margin:0 auto; }
.wish-head { margin:.4rem 0 1.4rem; }
.wish-head .eyebrow { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:0 0 .2rem; }
.wish-head h1 { font-size:28px; font-weight:500; margin:0 0 .5rem; letter-spacing:-.01em; }
.wish-head p { margin:0; font-size:14.5px; line-height:1.5; }
.wish-own { padding:.7rem .9rem; border:1px dashed var(--line); border-radius:8px; color:var(--muted); }
.wish-list { list-style:none; margin:0; padding:0; }
.wish-item { display:grid; grid-template-columns:84px minmax(0,1fr); gap:1.1rem; align-items:start; padding:1rem 1.1rem; }
.wish-cover img { width:84px; height:auto; display:block; border-radius:3px; box-shadow:0 1px 3px var(--shadow); }
.wish-cover .cover-placeholder { width:84px; font-size:1.6rem; }
.wish-item.taken .wish-cover img, .wish-item.taken .wish-cover .cover-placeholder { opacity:.55; }
.wish-title { font-size:17px; font-weight:500; margin:0; text-transform:none; letter-spacing:0; color:var(--fg); }
.wish-by { margin:.1rem 0 .3rem; color:var(--muted); font-size:14px; }
.wish-facts { margin:0 0 .75rem; font-size:12.5px; color:var(--faint); }
.wish-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; }
.wish-actions form { margin:0; }
details.copy.wish-buy summary { padding:.25rem .7rem; font-size:13px; }
.wish-buy[open] { flex-basis:100%; }
details.copy.wish-buy[open] summary { margin-bottom:.8rem; }
.wish-foot { margin:1.6rem 0 0; font-size:12.5px; text-align:center; }
@media (max-width:640px) {
  .wish-item { grid-template-columns:64px minmax(0,1fr); gap:.9rem; }
  .wish-cover img, .wish-cover .cover-placeholder { width:64px; }
}

/* The footer's links wrap on a phone instead of widening the whole page past the screen. */
.site-foot { flex-wrap:wrap; row-gap:.4rem; }