/* Layout: one airy column for a phone held in one hand — a quiet title, two actions, results, then the shelf; a book opens as a bottom sheet. */
:root {
  /* Kolophon « Papier & encre » — source : brand/tokens.css (--bg = --paper, --taupe = --ink-2, --accent = --encre, --soft = --sunken) */
  --bg: #ebe5dc;
  --surface: #f6f2ec;
  --ink: #221f1c;
  --taupe: #625850;
  --line: #d6ccbf;
  --accent: #25334a;
  --accent-ink: #f3eee6;
  --soft: #e2d9cd;
  --sage: #4c5c42;  --sage-soft: #dfe3d5;
  --ochre: #7f5c27; --ochre-soft: #efe1c8;
  --brick: #96503f; --brick-soft: #f0dcd4;
  --rubrique: #a7392a; --rubrique-soft: #f1dcd5;
  --sepia: #6b5d52; --sepia-ink: #f6f2ec;
  --scrim: rgba(34, 31, 28, 0.4);
  --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191715; --surface: #23201c; --ink: #ece5da; --taupe: #ab9f92; --line: #3a352f;
    --accent: #b7c4d8; --accent-ink: #191715; --soft: #2e2a25;
    --sage: #b3c09f; --sage-soft: #2b3027; --ochre: #d9b27a; --ochre-soft: #382d1e; --brick: #e39a87; --brick-soft: #3c2622;
    --rubrique: #e07a63; --rubrique-soft: #3c2520; --sepia: #cdbda9; --sepia-ink: #191715;
    --scrim: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #191715; --surface: #23201c; --ink: #ece5da; --taupe: #ab9f92; --line: #3a352f;
  --accent: #b7c4d8; --accent-ink: #191715; --soft: #2e2a25;
  --sage: #b3c09f; --sage-soft: #2b3027; --ochre: #d9b27a; --ochre-soft: #382d1e; --brick: #e39a87; --brick-soft: #3c2622;
  --rubrique: #e07a63; --rubrique-soft: #3c2520; --sepia: #cdbda9; --sepia-ink: #191715;
  --scrim: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 600px; margin: 0 auto; padding-block: 36px 56px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 32px; }
header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
h1 { font: 400 clamp(1.9rem, 8vw, 2.75rem)/1 var(--f-display); margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.count { font: 400 0.75rem var(--f-mono); color: var(--taupe); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; padding-bottom: 6px; }
.brand { display: inline-flex; align-items: center; gap: 0.3em; font-weight: 500; letter-spacing: -0.015em; }
.brand svg { width: 0.78em; height: auto; flex: none; fill: currentColor; }
.brand svg circle { fill: var(--rubrique); }
h2 { font: 600 0.7rem var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); margin: 0; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.big { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 18px; border-radius: 20px; border: 0; cursor: pointer; font: inherit; color: inherit; min-height: 128px; transition: transform 0.15s ease; }
.big:active { transform: scale(0.98); }
.big strong { font: 400 1.4rem/1.1 var(--f-display); }
.big span { font-size: 0.8rem; color: var(--taupe); }
.big svg { width: 22px; height: 22px; margin-bottom: auto; opacity: 0.85; }
.big.check { background: var(--accent); color: var(--accent-ink); }
.big.check span { color: var(--accent-ink); opacity: 0.72; }
.big.add { background: var(--surface); }
.big:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .shelf li:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.big:disabled { opacity: 0.55; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .big { transition: none; } }

.panel { background: var(--surface); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.status { display: flex; gap: 14px; align-items: center; }
.thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; flex: none; background: var(--soft); }
.spinner { width: 16px; height: 16px; border: 1.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.muted { color: var(--taupe); font-size: 0.85rem; }

.verdict { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.verdict.owned { background: var(--sage-soft); }
.verdict.new { background: var(--soft); }
.verdict .tag { font: 600 0.68rem var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; }
.verdict.owned .tag { color: var(--sage); }
.verdict.new .tag { color: var(--accent); }
.verdict .t { font: 400 1.6rem/1.15 var(--f-display); overflow-wrap: anywhere; }
.verdict .a { font-size: 0.88rem; color: var(--taupe); }
.verdict .why { font-size: 0.82rem; color: var(--taupe); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.compare img, .compare .ph { width: 100%; max-width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--soft); }
.compare figcaption { font-size: 0.78rem; color: var(--taupe); display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

.found { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.found li { display: grid; grid-template-columns: auto 44px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.found li:first-child { border-top: 0; }
.found input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.found .crop { width: 44px; height: 60px; object-fit: cover; border-radius: 6px; background: var(--soft); }
.found .meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.found .t { font-weight: 600; overflow-wrap: anywhere; }
.found .a { font-size: 0.82rem; color: var(--taupe); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { font: 600 0.66rem var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.pill.owned { background: var(--sage-soft); color: var(--sage); }
.pill.new { background: var(--soft); color: var(--accent); }
.cond { font: 500 0.72rem var(--f-body); padding: 2px 9px; border-radius: 99px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cond::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cond.c5, .cond.c4 { background: var(--sage-soft); color: var(--sage); }
.cond.c3 { background: var(--soft); color: var(--accent); }
.cond.c2 { background: var(--ochre-soft); color: var(--ochre); }
.cond.c1 { background: var(--brick-soft); color: var(--brick); }

.row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { font: 600 0.88rem var(--f-body); padding: 12px 18px; border-radius: 99px; border: 0; background: var(--soft); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--taupe); }
.btn.danger { background: transparent; color: var(--brick); padding-inline: 10px; }
.btn:disabled { opacity: 0.5; cursor: default; }

.search { display: flex; flex-direction: column; gap: 12px; }
.field { width: 100%; font: 400 1rem var(--f-body); padding: 14px 18px; border-radius: 99px; border: 1px solid transparent; background: var(--surface); color: var(--ink); }
.field::placeholder { color: var(--taupe); }
.field:focus { border-color: var(--line); outline: none; }
select.field { border-radius: 14px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--taupe) 50%), linear-gradient(135deg, var(--taupe) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.hint { font-size: 0.85rem; color: var(--taupe); padding-inline: 6px; }
.hint b { color: var(--ink); font-weight: 600; }
.manual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.manual .full { grid-column: 1 / -1; }

.shelf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.shelf li { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.shelf li:first-child { border-top: 0; }
.shelf li.empty { display: block; cursor: default; }
.spine, .shelf .pic { width: 44px; height: 62px; border-radius: 4px; }
.shelf .pic { object-fit: cover; background: var(--soft); }
.spine { display: grid; place-items: center; font: 400 1.1rem var(--f-display); color: var(--accent-ink); }
.shelf .meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.shelf .t { font: 400 1.2rem/1.2 var(--f-display); overflow-wrap: anywhere; }
.shelf .a { font-size: 0.82rem; color: var(--taupe); }
.chev { color: var(--line); font-size: 1.3rem; }
.empty { padding: 40px 18px; text-align: center; color: var(--taupe); background: var(--surface); border-radius: 20px; }
.empty strong { display: block; font: 400 1.5rem var(--f-display); color: var(--ink); margin-bottom: 6px; }
.note { font-size: 0.75rem; color: var(--taupe); text-align: center; letter-spacing: 0.02em; }
.err { color: var(--brick); font-size: 0.88rem; }

/* book sheet */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 10; display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet { background: var(--bg); width: 100%; max-width: 600px; max-height: 92%; overflow-y: auto; border-radius: 26px 26px 0 0; padding-top: 22px; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 14px; }
.sheet::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; margin-top: -8px; }
.sheet .cover { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 16px; background: var(--surface); }
.sheet .nocover { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 16px; background: var(--surface); display: grid; place-items: center; color: var(--taupe); font-size: 0.88rem; text-align: center; padding: 20px; }
.sheet h3 { font: 400 2rem/1.1 var(--f-display); margin: 4px 0 0; overflow-wrap: anywhere; text-wrap: balance; }
.sheet .a { color: var(--taupe); }
.sheet .isbn { font-size: 0.78rem; color: var(--taupe); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.sheet label { font: 600 0.7rem var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); margin-top: 6px; }
.sheet .condnote { font-size: 0.86rem; color: var(--taupe); }

/* standalone page additions */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; padding-top: env(safe-area-inset-top, 0px); }
.head-right { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-bottom: 4px; }
.head-right .count { padding-bottom: 0; }
.linkish { border: 0; background: none; color: var(--taupe); font: 500 0.75rem var(--f-body); cursor: pointer; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; }
.quota { font-size: 0.72rem; color: var(--taupe); font-variant-numeric: tabular-nums; }

.auth { max-width: 420px; margin: 0 auto; min-height: 100vh; padding-block: 48px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.auth h1 { font-size: 3rem; }
.auth .lede { color: var(--taupe); margin: 10px 0 0; max-width: 32ch; }
.auth form { display: flex; flex-direction: column; gap: 10px; }
.auth .tabs { display: flex; gap: 4px; background: var(--surface); padding: 4px; border-radius: 99px; }
.auth .tabs button { flex: 1; border: 0; background: transparent; color: var(--taupe); font: 600 0.88rem var(--f-body); padding: 10px; border-radius: 99px; cursor: pointer; }
.auth .tabs button[aria-pressed="true"] { background: var(--bg); color: var(--ink); }
.auth .btn.primary { padding-block: 14px; font-size: 0.95rem; }

[hidden] { display: none !important; }
img { max-width: 100%; }

/* plans, account, admin */
.planpill { border: 0; cursor: pointer; font: 600 0.68rem var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; background: var(--soft); color: var(--accent); font-variant-numeric: tabular-nums; }
.planpill.premium { background: var(--accent); color: var(--accent-ink); }
.sheet .section { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.sheet .section + .section { border-top: 1px solid var(--line); padding-top: 16px; }
.sheet .lead { font-size: 0.92rem; color: var(--taupe); margin: 0; }
.sheet .lead b { color: var(--ink); font-weight: 600; }
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.offer { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; }
.offer.best { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.offer .price { font: 400 1.9rem/1 var(--f-display); }
.offer .per { font-size: 0.8rem; opacity: 0.75; }
.offer .tag { font: 600 0.64rem var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.offer:disabled { opacity: 0.6; cursor: progress; }
.perks { margin: 0; padding-left: 18px; color: var(--taupe); font-size: 0.88rem; display: flex; flex-direction: column; gap: 4px; }
.inline { display: flex; gap: 8px; }
.inline .field { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.06em; }
.ok { color: var(--sage); font-size: 0.88rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.stat { background: var(--surface); border-radius: 14px; padding: 12px; }
.stat b { display: block; font: 400 1.6rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.75rem; color: var(--taupe); }
.promo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.promo-form .full { grid-column: 1 / -1; }
.promo-form label { font: 500 0.75rem var(--f-body); letter-spacing: 0; text-transform: none; color: var(--taupe); display: flex; flex-direction: column; gap: 4px; margin: 0; }
.promo-form .field { padding: 11px 14px; border-radius: 12px; }
.codes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.codes li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--line); align-items: center; }
.codes li:first-child { border-top: 0; }
.codes .c { font: 600 0.95rem var(--f-body); letter-spacing: 0.06em; overflow-wrap: anywhere; }
.codes .d { grid-column: 1; font-size: 0.8rem; color: var(--taupe); }
.codes li.off .c { text-decoration: line-through; color: var(--taupe); }
.codes .btn { grid-row: 1 / span 2; grid-column: 2; padding: 8px 14px; font-size: 0.8rem; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 99px; font-size: 0.9rem; z-index: 20; max-width: calc(100% - 40px); text-align: center; }

/* legal pages (cgv, mentions légales, confidentialité) */
.legal { gap: 22px; }
.legal .back { color: var(--taupe); font: 500 0.82rem var(--f-body); text-decoration: none; }
.legal .back:hover { color: var(--ink); }
.legal .updated { color: var(--taupe); font-size: 0.82rem; margin: 10px 0 0; }
.legal section { display: flex; flex-direction: column; gap: 8px; }
.legal h2 { font: 400 1.45rem/1.2 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 6px 0 0; }
.legal p, .legal ul { margin: 0; }
.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.legal a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal dl { margin: 0; display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 6px 14px; background: var(--surface); border-radius: 16px; padding: 16px; }
.legal dt { color: var(--taupe); font-size: 0.85rem; }
.legal dd { margin: 0; overflow-wrap: anywhere; }
.legal .box { background: var(--surface); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.legal nav.others { border-top: 1px solid var(--line); padding-top: 18px; display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 0.85rem; }
.todo { background: var(--ochre-soft); color: var(--ochre); border-radius: 4px; padding: 0 4px; font-weight: 600; }
@media (max-width: 420px) { .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dd + dt { margin-top: 8px; } }
.legal-links { display: flex; justify-content: center; gap: 6px 14px; flex-wrap: wrap; font-size: 0.75rem; }
.legal-links a { color: var(--taupe); text-underline-offset: 3px; }
.consent { font-size: 0.78rem; color: var(--taupe); margin: 0; }
.consent a { color: inherit; text-underline-offset: 2px; }

/* ISBN scanner, reading status, filters */
.scanbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.scanbar svg { width: 26px; height: 26px; flex: none; color: var(--accent); }
.scanbar .sb-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.scanbar strong { font: 400 1.2rem/1.15 var(--f-display); }
.scanbar .sb-text span { font-size: 0.8rem; color: var(--taupe); }
.scanbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.scanner { display: flex; flex-direction: column; gap: 12px; }
.scanner .viewport { position: relative; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #000; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner .aim { position: absolute; left: 12%; right: 12%; top: 38%; bottom: 38%; border: 2px solid rgba(255,255,255,0.85); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,0.25); pointer-events: none; }
.scanner .aim.hit { border-color: #9fd18b; }
.scanner .camerr { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #eee; padding: 20px; font-size: 0.9rem; }
.seg { display: flex; gap: 4px; background: var(--surface); padding: 4px; border-radius: 99px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--taupe); font: 600 0.82rem var(--f-body); padding: 9px 8px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); }
.sheet .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.scanlog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.scanlog li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.scanlog li:first-child { border-top: 0; }
.scanlog img, .scanlog .ph { width: 36px; height: 52px; object-fit: cover; border-radius: 3px; background: var(--soft); }
.scanlog .meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scanlog .t { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.scanlog .a { font-size: 0.78rem; color: var(--taupe); }
.scanlog .btn { padding: 7px 12px; font-size: 0.78rem; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { border: 0; background: var(--surface); color: var(--taupe); font: 600 0.78rem var(--f-body); padding: 7px 12px; border-radius: 99px; cursor: pointer; font-variant-numeric: tabular-nums; }
.filters button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.readchip { font: 500 0.72rem var(--f-body); padding: 2px 9px; border-radius: 99px; background: var(--soft); color: var(--accent); white-space: nowrap; }
.readchip.read { background: var(--sage-soft); color: var(--sage); }
.stars { display: flex; gap: 2px; }
.stars button { border: 0; background: none; cursor: pointer; font-size: 1.6rem; line-height: 1; padding: 2px 3px; color: var(--line); }
.stars button.on { color: var(--ochre); }
.sheet textarea.field { border-radius: 14px; min-height: 90px; resize: vertical; font: 400 0.95rem/1.5 var(--f-body); }
.sheet .details { font-size: 0.82rem; color: var(--taupe); }
.sheet .desc { font-size: 0.9rem; line-height: 1.6; color: var(--ink); max-width: 65ch; }
.sheet .desc.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.scanner .inline .field { text-transform: none; letter-spacing: 0; }

/* sections, places, wishes, loans */
.view { display: flex; flex-direction: column; gap: 10px; }
.tabs-main { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; box-shadow: 0 6px 14px -10px rgba(0,0,0,0.25); }
.places button.add { background: transparent; border: 1px dashed var(--line); }
.places form { display: flex; gap: 6px; }
.places form .field { padding: 6px 12px; font-size: 0.85rem; width: 150px; }
.places form .btn { padding: 6px 12px; font-size: 0.8rem; }
#viewWishes .inline .field { text-transform: none; letter-spacing: 0; }
.shelf .actions-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.shelf .actions-row .btn { padding: 6px 12px; font-size: 0.78rem; }
.loanchip { font: 500 0.72rem var(--f-body); padding: 2px 9px; border-radius: 99px; background: var(--ochre-soft); color: var(--ochre); white-space: nowrap; }
.loanchip.late { background: var(--brick-soft); color: var(--brick); }
.wishchip { font: 600 0.68rem var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: var(--ochre-soft); color: var(--ochre); white-space: nowrap; }
.verdict.wish { background: var(--ochre-soft); }
.verdict.wish .tag { color: var(--ochre); }
.lock { font-size: 0.75rem; color: var(--taupe); }
.datarow { display: flex; gap: 8px; flex-wrap: wrap; }
.datarow a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.placelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.placelist li { display: flex; gap: 6px; align-items: center; }
.placelist .field { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 12px; }
.placelist .n { font-size: 0.78rem; color: var(--taupe); white-space: nowrap; }
.placelist .btn { padding: 8px 12px; font-size: 0.78rem; }
.copyrow { display: flex; gap: 6px; align-items: center; }
.copyrow code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 0.8rem; background: var(--surface); padding: 8px 12px; border-radius: 10px; }

/* photo gallery and edit form */
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.thumb-btn { flex: none; width: 64px; display: flex; flex-direction: column; gap: 4px; align-items: center; border: 0; background: none; padding: 0; cursor: pointer; color: var(--taupe); font: 500 0.68rem var(--f-body); }
.thumb-btn img, .thumb-btn b { width: 64px; height: 86px; object-fit: cover; border-radius: 8px; background: var(--surface); border: 2px solid transparent; display: grid; place-items: center; }
.thumb-btn.on img { border-color: var(--accent); }
.thumb-btn.on { color: var(--ink); }
.thumb-btn.add b { font: 400 1.6rem var(--f-body); color: var(--taupe); border: 1px dashed var(--line); }
.photo-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.photo-tools select.field { width: auto; flex: 1; min-width: 130px; padding: 9px 36px 9px 14px; font-size: 0.88rem; }
.photo-tools .btn { padding: 9px 14px; font-size: 0.82rem; }
.edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.edit-form .full { grid-column: 1 / -1; }
.edit-form label { font: 500 0.75rem var(--f-body); letter-spacing: 0; text-transform: none; color: var(--taupe); display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.edit-form .field { padding: 11px 14px; border-radius: 12px; }
.edit-form textarea.field { min-height: 150px; }
.sheet > * { flex-shrink: 0; }
.sheet > .linkish { align-self: flex-start; }

/* plan chooser */
.plans { display: flex; flex-direction: column; gap: 10px; }
.plan { background: var(--surface); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid transparent; }
.plan.best { border-color: var(--accent); }
.plan.current { background: var(--sage-soft); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-name { font: 400 1.35rem/1.1 var(--f-display); }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price .price { font: 400 1.8rem/1 var(--f-display); }
.plan-price .per { font-size: 0.8rem; color: var(--taupe); }
.plan-desc { margin: 0; font-size: 0.88rem; color: var(--taupe); }
.plan .btn { align-self: flex-start; }
.pill { background: var(--soft); color: var(--accent); }
.table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.compare-table th, .compare-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table tr:first-child th { font: 600 0.7rem var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); }
.compare-table td { font-variant-numeric: tabular-nums; }
.compare-table th:first-child { font-weight: 500; color: var(--ink); }

/* forgotten password */
.authalt { display: flex; flex-direction: column; gap: 10px; }
.authalt h2 { font: 400 1.8rem/1.1 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink); }
.auth form .linkish { align-self: center; }

/* ownership shelves, borrowed books, preferences */
.owns button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.loan-head { display: block !important; padding: 18px 4px 4px !important; border-top: 0 !important; cursor: default !important; }
.loan-head h2 { margin: 0; }
#loanList .empty { text-align: left; padding: 10px 4px 14px; background: none; border-top: 0; }
.borrow-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.borrow-form label { font: 500 0.75rem var(--f-body); letter-spacing: 0; text-transform: none; color: var(--taupe); display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.borrow-form .field { padding: 10px 14px; border-radius: 12px; text-transform: none; }
.sheet > .loanchip { align-self: flex-start; }
.toggle { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; text-transform: none !important; letter-spacing: 0 !important; font: 400 0.9rem/1.4 var(--f-body) !important; color: var(--ink) !important; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin-top: 1px; }
.shelf .loanchip, .shelf .readchip { white-space: normal; }