/* Layout: left column is what you read (past), right column is what comes next (reading list + Claude's tips).
   One deliberate light, airy theme: warm paper, soft tan shelf, pastel spines. */
:root {
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;

  --paper: oklch(0.978 0.008 80);
  --card: oklch(0.995 0.004 80);
  --field: oklch(0.985 0.006 80);
  --ink: oklch(0.33 0.03 55);
  --ink-soft: oklch(0.5 0.03 60);
  --rule: oklch(0.91 0.018 75);
  --hover: oklch(0.95 0.015 75);
  --shadow: oklch(0.45 0.04 60 / 0.18);

  --accent: oklch(0.5 0.07 55);
  --accent-hover: oklch(0.44 0.07 55);
  --on-accent: oklch(0.99 0.004 80);

  --shelf: oklch(0.95 0.022 75);
  --board: oklch(0.8 0.045 68);
  --board-shadow: oklch(0.72 0.045 62);

  --book: oklch(0.8 0.07 35);
  --poetry: oklch(0.82 0.06 140);
  --graphic: oklch(0.86 0.07 85);
  --spine-ink: oklch(0.3 0.03 55);
  --book-text: oklch(0.5 0.1 35);
  --poetry-text: oklch(0.45 0.08 145);
  --graphic-text: oklch(0.48 0.08 80);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
a { color: var(--accent); }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap {
  max-width: 1180px; margin: 0 auto;
  padding-block: 40px 72px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 700px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; }
.eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.masthead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.title { font-size: clamp(38px, 6vw, 54px); line-height: 1; margin: 6px 0 10px; }
.tally { font-style: italic; color: var(--ink-soft); font-size: 17px; text-wrap: pretty; margin: 0; }
.note { font-size: 14px; font-style: italic; color: var(--ink-soft); margin: 6px 0 0; }
.masthead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* Sign-in */
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
.login { max-width: 420px; margin: 0 auto; padding-block: 14vh 40px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: grid; gap: 14px; }
.login .title { margin: 0; }
.login-form { display: grid; gap: 14px; margin-top: 14px; }
.login-form .input { min-height: 50px; font-size: 17px; }
.login-form .btn { min-height: 48px; margin-top: 4px; }
.login-msg { min-height: 1.4em; margin: 0; font-size: 15px; color: var(--ink-soft); }
.login-msg.err { color: var(--book-text); }

.btn { border: 0; cursor: pointer; border-radius: 999px; padding: 11px 20px 10px; font-size: 15px; line-height: 1.2; font-weight: 500; background: var(--accent); color: var(--on-accent); transition: background .15s; }
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost, .btn.light { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.btn.ghost:hover, .btn.light:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--board); }
.btn.small { font-size: 14px; padding: 8px 15px 7px; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.linkish:hover { color: var(--accent); text-decoration-color: currentColor; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 44px; margin-top: 32px; align-items: start; }
@media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.col { display: grid; gap: 24px; min-width: 0; }
/* Line the left heading up with the heading inside the shelf panel. */
@media (min-width: 981px) { main.col { padding-top: 22px; } }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.h2 { font-size: 28px; margin: 4px 0 0; line-height: 1.15; }
@media (max-width: 640px) { .h2 { font-size: 25px; } }
.sub { margin: 4px 0 0; font-style: italic; color: var(--ink-soft); font-size: 15px; text-wrap: pretty; max-width: 48ch; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab { cursor: pointer; border: 1px solid var(--rule); background: var(--card); color: var(--ink-soft); padding: 6px 13px 5px; border-radius: 999px; font-size: 14px; line-height: 1.2; }
.tab:hover { color: var(--ink); background: var(--hover); }
.tab[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Log form */
.form { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 24px; margin-bottom: 24px; box-shadow: 0 10px 24px -18px var(--shadow); display: grid; gap: 16px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 640px) { .row2 { grid-template-columns: minmax(0, 1fr); } .form { padding: 18px; } }
.field { display: grid; gap: 6px; min-width: 0; }
.label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.input { color: var(--ink); background: var(--field); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 12px; width: 100%; }
.input:focus { outline: none; border-color: var(--accent); }
textarea.input { min-height: 100px; resize: vertical; line-height: 1.5; }
.chips, .q-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip, .q-chip { position: relative; }
.chip input, .q-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span, .q-chip span { display: block; border: 1px solid var(--rule); background: var(--card); color: var(--ink-soft); padding: 7px 14px 6px; border-radius: 999px; font-size: 14px; line-height: 1.2; }
.chip input:focus-visible + span, .q-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:checked + span, .q-chip input:checked + span { color: var(--spine-ink); border-color: transparent; }
.chip input[value="book"]:checked + span, .q-chip input[value="book"]:checked + span { background: var(--book); }
.chip input[value="poetry"]:checked + span, .q-chip input[value="poetry"]:checked + span { background: var(--poetry); }
.chip input[value="graphic"]:checked + span, .q-chip input[value="graphic"]:checked + span { background: var(--graphic); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Read log */
.log { display: grid; gap: 16px; }
.entry { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 22px 24px 16px; }
@media (max-width: 640px) { .entry { padding: 18px 18px 14px; } }
.entry-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--book-text); }
.tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--book); }
.tag.poetry { color: var(--poetry-text); }
.tag.poetry::before { background: var(--poetry); }
.tag.graphic { color: var(--graphic-text); }
.tag.graphic::before { background: var(--graphic); }
.date { font-size: 14px; color: var(--ink-soft); font-style: italic; font-variant-numeric: tabular-nums; }
.entry-title { font-size: 22px; line-height: 1.2; margin: 8px 0 2px; }
.entry-author { font-style: italic; color: var(--ink-soft); margin: 0 0 14px; }
.notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding-top: 14px; border-top: 1px solid var(--rule); }
@media (max-width: 640px) { .notes { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.note-head { display: flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.note-head.good { color: var(--poetry-text); }
.note-head.bad { color: var(--book-text); }
.dia { width: 6px; height: 6px; transform: rotate(45deg); background: currentColor; flex: none; }
.note-body { margin: 0; white-space: pre-wrap; text-wrap: pretty; overflow-wrap: anywhere; }
.note-empty { margin: 0; color: var(--ink-soft); font-style: italic; }
.entry-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.empty { text-align: center; padding: 40px 24px; border: 1px dashed var(--rule); border-radius: 10px; color: var(--ink-soft); font-style: italic; text-wrap: pretty; background: var(--card); }

/* Reading list: a light shelf */
.cabinet { --rule: oklch(0.87 0.03 70); background: var(--shelf); color: var(--ink); border-radius: 12px; padding: 22px 22px 22px; }
.count { font-style: italic; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.shelf { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding: 0 12px; margin-top: 20px; border-bottom: 8px solid var(--board); box-shadow: 0 3px 0 -1px var(--board-shadow); }
.spine { flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0; color: var(--spine-ink); display: flex; align-items: center; justify-content: center; padding: 10px 0; overflow: hidden; box-shadow: inset -2px 0 0 oklch(0 0 0 / 0.06); transition: transform .2s; }
.spine:hover { transform: translateY(-4px); }
.spine.book { background: var(--book); }
.spine.poetry { background: var(--poetry); }
.spine.graphic { background: var(--graphic); }
.spine.empty-slot { background: oklch(0.995 0.004 80 / 0.45); box-shadow: none; border: 1px dashed oklch(0.8 0.045 68 / 0.7); border-bottom: 0; color: oklch(0.5 0.03 60 / 0.7); }
.spine.empty-slot:hover { transform: none; }
.spine-text { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-size: 14px; line-height: 1.1; max-height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spine.empty-slot .spine-text { font-family: var(--font-body); font-style: italic; font-size: 13px; }
.queue { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.queue:empty { display: none; }
.q-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.q-body { flex: 1; min-width: 0; }
.q-item:last-child { border-bottom: 0; }
.q-num { width: 24px; flex: none; font-family: var(--font-display); font-size: 17px; color: var(--ink-soft); line-height: 1.3; }
.q-title { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.q-meta { font-size: 14px; font-style: italic; color: var(--ink-soft); }
.q-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.q-btn { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; color: var(--accent); text-decoration: underline; text-decoration-color: var(--board); text-underline-offset: 3px; }
.q-btn:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.q-empty { margin: 18px 0 0; font-style: italic; color: var(--ink-soft); font-size: 15px; text-wrap: pretty; }
.q-add { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.q-add .q-chips { margin-top: 2px; }
.q-add > div:last-child { margin-top: 6px; }
.q-add-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.q-input { font-size: 15px; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 11px; width: 100%; }
.q-input::placeholder { color: var(--ink-soft); }
.q-input:focus { outline: none; border-color: var(--accent); }
.full-note { margin: 14px 0 0; font-style: italic; color: var(--ink-soft); font-size: 15px; }

/* Claude's tips */
.tips { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 22px; }
.tips .section-head { margin-bottom: 0; }
.tips-controls { display: grid; gap: 8px; margin-top: 14px; }
.status { font-size: 15px; font-style: italic; color: var(--ink-soft); margin: 0; }
.status.busy::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--graphic-text); animation: pulse 1.2s ease-in-out infinite; vertical-align: middle; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status.busy::before { animation: none; } .spine, .btn { transition: none; } }
.tip-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.tip { padding: 14px 0; border-top: 1px solid var(--rule); display: flex; align-items: flex-start; gap: 14px; }
.tip-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tip-title { font-family: var(--font-display); font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.tip-meta { font-size: 14px; font-style: italic; color: var(--ink-soft); }
.tip-why { margin: 2px 0 0; font-size: 15px; text-wrap: pretty; }
.tip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }

/* Covers */
.cover { display: block; flex: none; object-fit: cover; border-radius: 3px; background: var(--shelf); box-shadow: 0 1px 0 var(--rule), 0 6px 14px -8px var(--shadow); }
.entry-head { display: flex; align-items: flex-start; gap: 16px; }
.entry-head > div { min-width: 0; }
.entry-cover { width: 56px; height: 84px; margin-top: 8px; }
.q-cover { width: 32px; height: 48px; }
.tip-cover { width: 44px; height: 66px; margin-top: 2px; }

/* Book suggestions under the title fields */
.combo { position: relative; }
.suggest { position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); width: max(100%, 340px); max-width: min(440px, calc(100vw - 32px)); margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 16px 32px -18px var(--shadow); max-height: 360px; overflow-y: auto; }
.suggest-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; cursor: pointer; }
.suggest-item:hover, .suggest-item[aria-selected="true"] { background: var(--hover); }
.suggest-cover { width: 34px; height: 50px; flex: none; border-radius: 3px; object-fit: cover; background: var(--shelf); box-shadow: inset 0 0 0 1px var(--rule); }
.suggest-text { display: grid; min-width: 0; }
.suggest-title { font-weight: 500; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.suggest-meta { font-size: 14px; font-style: italic; color: var(--ink-soft); }
.suggest-note { padding: 10px; font-size: 14px; font-style: italic; color: var(--ink-soft); }
.suggest-source { margin-top: 4px; padding: 7px 8px 3px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-soft); }