:root { --bg: #faf7f2; --card: #ffffff; --ink: #221c18; --muted: #7a6f66; --line: #e8e1d8; --accent: #d9480f; --soft: #f1e9dd; --radius: 14px; --wood: #9a6434; --wood2: #5a3617; --shadow: rgba(70, 45, 20, .28); }
@media (prefers-color-scheme: dark) { :root { --bg: #17130f; --card: #231d18; --ink: #f3ece4; --muted: #a79c92; --line: #37302a; --soft: #2d251f; --wood: #6a4222; --wood2: #35200f; --shadow: rgba(0, 0, 0, .55); } }
h1, h2, h3, .sheet .t { font-family: Fraunces, Georgia, "Times New Roman", serif; }
h1.brand { display: flex; align-items: center; gap: 8px; }
/* The Bookshelfit wordmark: the word, then the i and the t as two books standing on its baseline. */
.wm { display: inline-flex; align-items: baseline; white-space: nowrap; }
.wm svg { height: 1em; width: auto; overflow: visible; margin-left: .07em; }
/* The opening (splash.js): the logo big in the middle, then gliding up into the header. */
.splash { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.splash-bg { position: absolute; inset: 0; background: var(--bg); }
.splash-lockup { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; transform-origin: 0 0;
  font: bold 1.6rem/1.45 Fraunces, Georgia, "Times New Roman", serif; color: var(--ink); white-space: nowrap; }
.splash-tag { position: absolute; left: 0; right: 0; margin: 0; text-align: center; color: var(--muted); font-size: .95rem; }
.hero { text-align: center; padding-top: 28px; }
.hero .mark { display: block; margin: 0 auto; border-radius: 28px; box-shadow: 0 10px 24px -10px var(--shadow); }
.hero .wordmark { font-size: 2.5rem; margin: 14px 0 0; letter-spacing: -0.015em; line-height: 1; }
.hero .muted { margin: 6px 0 0; }
.band { display: block; width: 100%; height: 96px; margin-top: 14px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 -apple-system, system-ui, "Segoe UI", sans-serif; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
#app { max-width: 720px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.6rem; margin: 8px 0 12px; }
h2 { font-size: 1.1rem; margin: 20px 0 8px; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.muted { color: var(--muted); font-size: 0.9rem; }
p.strong { font-weight: 600; margin: 0; }
.audible-row p.muted { margin: 2px 0 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { width: 100%; padding: 12px; margin: 6px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: inherit; font: inherit; }
textarea { min-height: 96px; resize: vertical; }
/* Buttons, three tiers: primary (rust, a soft glow, shrinks a touch when pressed), chip (warm sand), quiet (text). */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 14px -8px var(--accent); transition: transform .12s ease, box-shadow .12s ease; }
button:active, .button:active { transform: scale(.97); box-shadow: none; }
button:focus-visible, .button:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.small, .button.small, .chip { padding: 8px 12px; font-size: 0.9rem; }
.chip { background: var(--soft); color: var(--ink); border: 1px solid transparent; box-shadow: none; }
.chip.on { background: var(--ink); color: var(--bg); }
.ic { flex: none; }
h1 .ic { width: 22px; height: 22px; margin-right: 6px; vertical-align: -3px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.danger { background: #b42318; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.card > h2:first-child { margin-top: 0; }
.conn { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.conn a.chip { display: inline-block; padding: 5px 10px; }
.conn .why { flex: 1 1 180px; min-width: 0; }
.dupe { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.dupe:first-child { border-top: 0; padding-top: 0; }
.dupe img, .dupe .nocover { width: 56px; flex: none; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; font-size: 0.6rem; }
.dupe p { margin: 0 0 6px; }
.dupe p.muted { font-size: 0.82rem; }
.dupe .strong a { color: var(--accent); }
.code { font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; min-height: 110px; word-break: break-all; }
.picker { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); margin: 6px 0 12px; }
.picker input { border: 0; margin: 0; padding: 6px 2px; background: transparent; }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.picks:empty { display: none; }
.picks .chip, .suggest .chip { padding: 5px 10px; font-size: 0.85rem; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.suggest .new { border-style: dashed; color: var(--accent); }
.bookhead { display: flex; gap: 14px; align-items: flex-start; margin: 8px 0 14px; }
.bookhead img, .bookhead .nocover { width: 118px; flex: none; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 3px 5px 12px -3px var(--shadow); }
.bookhead .grow { flex: 1; min-width: 0; }
.bookhead h1 { font-size: 1.45rem; line-height: 1.15; margin: 0 0 4px; text-wrap: balance; }
.bookhead p { margin: 0 0 2px; }
.bookhead .stars { margin: 8px 0 4px; }
.prose { white-space: pre-wrap; margin: 0; line-height: 1.5; }
.card.tap { cursor: pointer; }
.topline { display: flex; justify-content: space-between; align-items: center; }
ol.steps { padding-left: 20px; margin: 6px 0 10px; } ol.steps li { margin: 4px 0; }
.dupe .grow { flex: 1; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.book { display: block; padding: 0; overflow: hidden; margin: 0; position: relative; }
.book img, .nocover { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; background: var(--line); }
.nocover { display: grid; place-items: center; padding: 8px; text-align: center; font-size: 0.85rem; color: var(--muted); }
.book .title { padding: 8px 10px 0; font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.book .muted { padding: 2px 10px 10px; }
.book .muted.left { color: var(--accent); font-weight: 600; margin-top: -8px; }
.badge { position: absolute; top: 8px; right: 8px; background: var(--accent); color: #fff; font-size: 0.7rem; padding: 3px 8px; border-radius: 999px; }
.audible { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--card); font-size: 0.8rem; }
.audible svg { position: absolute; inset: -2px; width: 32px; height: 32px; transform: rotate(-90deg); }
.audible .track { stroke: var(--line); stroke-width: 2.5; }
.audible .arc { stroke: var(--accent); stroke-width: 2.5; }
.audible.owned span { opacity: 0.45; }
.coverwrap { position: relative; }
.book .audible { position: absolute; left: 8px; bottom: 8px; }
.audible-row { display: flex; align-items: center; gap: 12px; }
.audible-row .audible { width: 40px; height: 40px; font-size: 1.1rem; flex: none; }
.audible-row .audible svg { width: 44px; height: 44px; }
.audible-row .grow { flex: 1; min-width: 0; }
.stars { display: flex; gap: 2px; margin: 6px 0 12px; }
.star { background: none; color: var(--line); font-size: 1.8rem; padding: 0 2px; }
.star.on { color: #f5a524; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.row.between { justify-content: space-between; flex-wrap: nowrap; align-items: flex-start; margin: 0 0 6px; }
.quiet { background: none; color: var(--muted); padding: 0 0 0 8px; font-size: 0.8rem; font-weight: 500; flex: none; }
.row label { display: flex; gap: 6px; align-items: center; }
.row input[type="checkbox"] { width: auto; margin: 0; }
.photos { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.photos figure { margin: 0; flex: 0 0 120px; text-align: center; }
.photos img, .preview { width: 120px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; display: block; margin: 0 auto 6px; }
.preview { width: 160px; }
details { border-top: 1px solid var(--line); padding: 10px 0; }
summary { cursor: pointer; font-weight: 600; }
details ul { margin: 8px 0 0; padding-left: 18px; }
.answer { white-space: pre-wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); vertical-align: middle; }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.seg button.on { background: var(--ink); color: var(--bg); }
.legend { display: flex; gap: 16px; align-items: flex-end; margin: 4px 0 10px; }
.legend span { display: inline-flex; align-items: flex-end; gap: 6px; }
.legend i { display: inline-block; width: 7px; height: 18px; border-radius: 2px 2px 0 0; background: var(--muted); transform-origin: bottom left; }
.legend i.lean { transform: rotate(-9deg); margin-right: 2px; }
.legend i.open { outline: 2px solid var(--accent); outline-offset: 1px; }
.shelf { display: flex; align-items: flex-end; gap: 4px; padding: 0 6px; height: 118px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.shelf::-webkit-scrollbar, .books-row::-webkit-scrollbar { display: none; }
.shelf .cv { width: 58px; margin: 0 3px; }
.rail { height: 11px; background: linear-gradient(var(--wood), var(--wood2)); border-radius: 2px; box-shadow: 0 8px 12px -6px var(--shadow); margin-bottom: 18px; }
h2.sec { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 4px; }
h2.sec small { color: var(--muted); font: 500 0.82rem/1 -apple-system, system-ui, sans-serif; }
.books-row { display: flex; gap: 10px; overflow-x: auto; align-items: flex-end; padding: 14px 10px 12px; scrollbar-width: none; }
.tile { position: relative; flex: none; background: none; border: 0; padding: 0; border-radius: 0; color: inherit; font: inherit; font-weight: inherit; text-align: center; cursor: pointer; }
.tile.tilt-l { transform: rotate(-2.5deg); } .tile.tilt-r { transform: rotate(2deg); }
.cv { display: block; width: 66px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; box-shadow: 3px 5px 10px -2px var(--shadow); background: var(--line); }
.cv.big { width: 92px; }
.cv.nocover { font-size: 0.6rem; padding: 4px; }
.tile .cap { display: block; max-width: 92px; margin: 6px auto 0; font-size: 0.68rem; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .audible { position: absolute; left: 4px; bottom: 4px; width: 22px; height: 22px; font-size: 0.65rem; }
.tile .audible svg { width: 26px; height: 26px; }
.tile.capped .audible { bottom: 26px; }
.timeleft { position: absolute; right: -4px; top: -8px; background: var(--accent); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; }
.shelfhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.shelfhead h3 { font-size: 1.05rem; margin: 0; }
.hit { font: 500 0.72rem/1 -apple-system, system-ui, sans-serif; color: var(--muted); }
.chip.face { padding: 4px 10px; font-size: 0.75rem; flex: none; }
.more { flex: none; align-self: flex-end; width: 58px; height: 86px; margin: 0 4px 0 8px; border-radius: 3px; border: 1px dashed var(--muted); background: transparent; color: var(--muted); display: grid; place-items: center; font: 600 0.78rem/1.2 -apple-system, system-ui, sans-serif; text-align: center; box-shadow: none; padding: 0; }
.more small { display: block; font-weight: 500; font-size: 0.68rem; }
.today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: linear-gradient(135deg, var(--card), var(--soft)); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin: 4px 0 6px; }
.today b { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.35rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today span { font-size: 0.72rem; color: var(--muted); display: block; line-height: 1.2; }
/* People as cards */
.pdetails { border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin: 10px 0; padding: 0; }
.pdetails summary { list-style: none; display: flex; gap: 12px; align-items: center; padding: 12px; cursor: pointer; font-weight: 500; }
.pdetails summary::-webkit-details-marker { display: none; }
.pdetails[open] summary { border-bottom: 1px solid var(--line); }
.pdetails .grow { flex: 1; min-width: 0; }
.pdetails .row.between { margin: 0; }
.pdetails .bio { margin: 10px 12px 0; }
.pdetails .pad { padding: 8px 12px 0; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: Fraunces, Georgia, serif; font-weight: 600; color: #fff; flex: none; object-fit: cover; }
.minis { display: flex; gap: 4px; flex: none; }
.minis img { width: 22px; height: 33px; object-fit: cover; border-radius: 2px; box-shadow: 1px 2px 4px -1px var(--shadow); }
.bar { height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.covergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; padding: 12px; }
.mini img, .mini .nocover { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; box-shadow: 2px 3px 8px -3px var(--shadow); font-size: 0.6rem; }
.mini span { display: block; font-size: 0.7rem; line-height: 1.2; margin-top: 4px; color: var(--muted); }
header .links a { display: inline-flex; align-items: center; gap: 3px; }
/* Ask as a conversation */
.strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 8px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip .chip { flex: none; }
.turn { margin: 16px 0; }
.bubble { max-width: 88%; padding: 10px 14px; border-radius: 18px; line-height: 1.45; }
.bubble.q { margin-left: auto; width: fit-content; background: var(--soft); border-bottom-right-radius: 6px; }
.answer-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; }
.answer-row .mark { flex: none; margin-bottom: 6px; }
.bubble.a { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble.a .answer { margin: 0; }
.tiny { margin: 4px 0 0 34px; font-size: 0.78rem; }
.sp { position: relative; flex: none; border-radius: 3px 3px 0 0; border: 0; padding: 0; transform-origin: bottom left; transition: transform .25s ease; }
.sp.lean { transform: rotate(-7deg); }
.sp.open { outline: 3px solid var(--accent); outline-offset: 2px; }
.sp.up { transform: translateY(-16px); }
.sp span { position: absolute; inset: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 10px/1 -apple-system, system-ui, sans-serif; color: #fff; padding: 6px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .9; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 84px 1fr; gap: 14px; transform: translateY(110%); transition: transform .25s ease; z-index: 5; max-width: 720px; margin: 0 auto; }
.sheet.show { transform: none; }
.sheet img, .sheet .nocover { width: 84px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; font-size: 0.7rem; }
.sheet .t { font-size: 1.15rem; font-weight: 700; line-height: 1.15; margin: 0 0 4px; }
.sheet .row { margin-top: 10px; }
.sheet .stars { margin: 4px 0 2px; }
.sheet .star { font-size: 1.5rem; }
.sheet .note { margin: 4px 0 0; font-size: 0.9rem; font-style: italic; color: var(--muted); }
.sheet a.chip { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .sp, .sheet { transition: none; } }
#nav { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: 420px; margin: 0 auto; display: flex; gap: 4px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px -14px var(--shadow); z-index: 4; }
#nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; color: var(--muted); transition: background .15s ease, color .15s ease; }
#nav a.active { background: var(--accent); color: #fff; }
#nav[hidden], #toast[hidden], [hidden] { display: none; }
#toast .undo { background: transparent; border: 1px solid var(--bg); color: var(--bg); padding: 4px 12px; margin-left: 10px; font-size: 0.85rem; font-weight: 700; box-shadow: none; }
#toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 0.9rem; z-index: 6; white-space: nowrap; }
/* Small rewards: a page that fades in, a spine that turns, stars that pop, a READ stamp, and the shape of a page while it loads. */
.page-in { animation: fadein .25s ease-out; }
.flip { animation: flipin .28s ease-out; transform-origin: center; }
.stars.pop .star.on { animation: pop .3s ease-out both; }
.stars.pop .star.on:nth-child(2) { animation-delay: .04s; } .stars.pop .star.on:nth-child(3) { animation-delay: .08s; }
.stars.pop .star.on:nth-child(4) { animation-delay: .12s; } .stars.pop .star.on:nth-child(5) { animation-delay: .16s; }
.stamp { position: absolute; left: 10px; top: 40px; padding: 4px 10px; border: 3px solid var(--accent); color: var(--accent); background: rgba(255,255,255,.7); border-radius: 6px; font: 600 1.1rem/1.2 Fraunces, Georgia, serif; letter-spacing: .05em; transform: rotate(-8deg); animation: stamp 1.4s ease-out both; pointer-events: none; }
.bookhead { position: relative; }
.skeleton { padding-top: 10px; }
.skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--soft) 25%, var(--line) 50%, var(--soft) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; margin: 8px 0; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes flipin { from { transform: rotateY(90deg); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-8deg) scale(1.6); } 15% { opacity: 1; transform: rotate(-8deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .page-in, .flip, .stars.pop .star.on, .stamp, .skel { animation: none; } }

/* Signing in, the Face ID offer and the Profile. */
button.wide, .button.wide { width: 100%; }
.login { display: grid; gap: 10px; }
.login form { display: grid; }
.login form p { margin: 0 0 4px; }
.login input { margin: 4px 0 10px; }
.login .quiet { justify-self: center; }
.login-problem { color: #c2410c; font-size: .9rem; margin: 0; }
.login-problem:empty { display: none; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code-input { font: 600 1.9rem/1 Fraunces, Georgia, serif; letter-spacing: .45em; text-align: center; padding: 12px 6px 12px 18px; }
.me { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 .95rem/1 Fraunces, Georgia, serif;
  background: linear-gradient(150deg, #185FA5, #534AB7); box-shadow: 0 4px 10px -6px var(--shadow); align-self: center; }
.me.big { width: 76px; height: 76px; font-size: 1.9rem; }
.phead { display: grid; justify-items: center; text-align: center; padding-top: 10px; }
.phead p { margin: 0; }
.pname { display: flex; align-items: center; gap: 2px; margin-top: 8px; }
.pname h1 { margin: 0; }
.pname form { margin: 0; }
.pname input { margin: 0; }
.prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.card h2 + .prow, .card h2 + div > .prow:first-child { border-top: 0; }
.prow > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.prow .ok { color: var(--fb-sage, #3c7a54); font-weight: 600; }
.prow button.quiet, .prow .danger.quiet { padding: 4px 6px; }
.fine { font-size: .85rem; margin: 8px 0 0; }
.faceid-sheet { text-align: center; }
.faceid-mark { color: var(--accent); display: grid; place-items: center; margin: 4px 0 2px; }
.prow button { white-space: nowrap; flex: none; }