:root {
  /* Narra: leaf green to act, heartwood brown for the name, blossom gold to point things out. */
  --bg: #f3f4ec; --surface: #fffefa; --fg: #1c2117; --muted: #5b6352; --line: #d9dccb;
  --accent: #17513a; --accent-soft: #e1ecdc; --on-accent: #ffffff;
  --wood: #7a3d1f; --gold: #f2b632; --gold-soft: #fbefc9; --on-gold: #3b2a05;
  --warn: #8f5a0c; --warn-soft: #f7ecd6; --bad: #a3271f; --bad-soft: #f8e1df;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11140e; --surface: #191e15; --fg: #e9ecdf; --muted: #a5ad98; --line: #2f3728;
    --accent: #74cc98; --accent-soft: #1d3324; --on-accent: #0e150f;
    --wood: #dba577; --gold: #f2b632; --gold-soft: #3a2e0c; --on-gold: #f6dc92;
    --warn: #e3b25c; --warn-soft: #33290f; --bad: #f08a80; --bad-soft: #3a1b18;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { height: 100dvh; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; }

.top { flex: none; display: flex; align-items: center; gap: 1.5rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.12rem; letter-spacing: 0.01em; color: var(--wood); }
.glance { display: flex; gap: 1.4rem; margin: 0; flex-wrap: wrap; flex: 1; min-width: 0; align-items: center; }
.glance div { display: flex; flex-direction: column; min-width: 0; }
.glance dt { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.glance dd { margin: 0; font-family: var(--mono); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.glance dd.good { color: var(--accent); }
.glance dd.bad { color: var(--bad); }
.glance button { margin-left: auto; }

button { font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); padding: 0.4rem 0.8rem; }
button:hover { border-color: var(--accent); }
button:focus-visible, textarea:focus-visible, .bubble:focus-visible, .upload:focus-within, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: 0.55; cursor: default; }

.shell { flex: 1; display: flex; min-height: 0; }
.rail { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.2rem 0.9rem; border-right: 1px solid var(--line); background: var(--surface); }
.bubble { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; background: none; border: 0; padding: 0; width: 5.2rem; color: var(--muted); }
.bubble .dot { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line); font-weight: 700; font-size: 1.05rem; color: var(--fg); }
.bubble .name { font-size: 0.78rem; text-align: center; }
.bubble[aria-current="true"] { color: var(--fg); }
.bubble[aria-current="true"] .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bubble .badge { position: absolute; top: -0.2rem; right: 0.6rem; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 1rem; background: var(--warn); color: var(--surface); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }
.bubble .working { position: absolute; bottom: 1.5rem; right: 0.7rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bubble .working { animation: none; } }

.panel { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.panel-head { padding: 1rem 1.4rem 0.6rem; }
.panel-head h1 { margin: 0; font-size: 1.25rem; }
.panel-head p { margin: 0; color: var(--muted); }
.messages { flex: 1; overflow-y: auto; padding: 0.6rem 1.4rem 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.msg { max-width: 44rem; padding: 0.65rem 0.9rem; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.owner { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 3px; }
.msg.claude { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.msg.claude.blocked { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.msg.harness, .msg.lead { align-self: center; background: none; color: var(--muted); font-size: 0.9rem; text-align: center; border: 1px dashed var(--line); }
.msg.status { align-self: flex-start; color: var(--muted); font-size: 0.9rem; padding-left: 0.2rem; }
.msg.error { align-self: center; background: var(--bad-soft); color: var(--bad); }
.used { margin-top: 0.55rem; font-size: 0.82rem; color: var(--muted); white-space: normal; }
.used summary { cursor: pointer; }
.used ol { margin: 0.4rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.used pre { margin: 0.25rem 0 0; padding: 0.5rem; background: var(--bg); border-radius: 6px; font-family: var(--mono); font-size: 0.76rem; overflow-x: auto; max-height: 14rem; }

.composer { display: flex; gap: 0.6rem; padding: 0.8rem 1.4rem 1.1rem; border-top: 1px solid var(--line); background: var(--surface); align-items: flex-end; }
.composer textarea { flex: 1; min-width: 0; resize: none; font: inherit; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); max-height: 9rem; }
.composer button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; padding: 0.55rem 1.1rem; }
.upload { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.8rem; cursor: pointer; white-space: nowrap; }
.upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
[hidden] { display: none !important; }

.signed-out .top, .signed-out .shell { display: none; }
.signed-out, .needs-setup { overflow-y: auto; }
.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.plain-link { background: none; border-color: transparent; color: var(--accent); text-decoration: underline; padding: 0.4rem 0; }

/* The front page a visitor sees before logging in. */
.landing { width: min(64rem, 100% - 2rem); margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 0 3rem; display: flex; flex-direction: column; gap: 3rem; }
.landing-top { display: flex; align-items: center; justify-content: space-between; }
.landing-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 22rem); gap: 3rem; align-items: center; }
.pitch { display: flex; flex-direction: column; gap: 1rem; }
.pitch h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.pitch-lead { margin: 0; font-size: 1.15rem; color: var(--muted); max-width: 34rem; }
.pitch-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.pitch-actions .primary { padding: 0.8rem 1.6rem; font-size: 1.05rem; border-radius: 8px; }
.pitch-actions a, .landing-foot a { color: var(--accent); }
.pitch-note { margin: 0; color: var(--muted); font-size: 0.9rem; }
.landing .sign-in { margin: 0; width: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem; }
.landing .sign-in h1 { font-size: 1.2rem; }
.tour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; scroll-margin-top: 1rem; }
.tour article { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tour .dot { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; }
.tour h2, .trust h2 { margin: 0; font-size: 1.15rem; }
.tour p { margin: 0; color: var(--muted); }
.trust { display: flex; flex-direction: column; gap: 0.9rem; }
.trust ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2rem; }
.trust li { color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.8rem; }
.trust strong { color: var(--fg); display: block; }
.landing-foot { color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.landing-foot p { margin: 0 0 0.4rem; }

/* The first screen after logging in, before any books are set up. */
.welcome { margin: auto; width: min(26rem, 100% - 2rem); padding: 2rem 0; display: flex; flex-direction: column; gap: 0.8rem; align-items: stretch; text-align: center; }
.welcome img { align-self: center; }
.welcome h1 { margin: 0; font-size: 1.5rem; }
.welcome p { margin: 0; color: var(--muted); }
.pick { text-align: left; padding: 1rem 1.1rem; border-radius: 12px; display: flex; flex-direction: column; gap: 0.25rem; }
.pick strong { font-size: 1.05rem; }
.pick span { font-weight: 400; font-size: 0.9rem; opacity: 0.9; }
.pick:not(.primary) span { color: var(--muted); }
.welcome .plain-link { align-self: center; }
.setup .back { align-self: flex-start; margin: 0; background: none; border-color: transparent; color: var(--accent); font-weight: 500; padding: 0.3rem 0; }

/* Setting up, one question at a time. */
.wizard { width: min(34rem, 100% - 2rem); padding-top: max(1.2rem, env(safe-area-inset-top)); gap: 0.9rem; }
.wizard-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.85rem; min-height: 2rem; }
.wizard-note { background: var(--accent-soft); color: var(--fg); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.wizard form { display: flex; flex-direction: column; gap: 0.8rem; }
.wizard h1 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); line-height: 1.2; text-wrap: balance; }
.wizard textarea, .account textarea { font: inherit; font-size: 16px; padding: 0.7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); width: 100%; resize: vertical; }
.wizard input, .wizard select { width: 100%; }
.wizard-choices { display: flex; flex-direction: column; gap: 0.6rem; }
.wizard .pick { margin: 0; background: var(--surface); border-color: var(--line); color: var(--fg); font-weight: 400; }
.wizard .pick.chosen { border-color: var(--accent); background: var(--accent-soft); }
.wizard .pick span { color: var(--muted); }
.wizard-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.wizard .wizard-actions button { margin: 0; }
.wizard .wizard-actions .primary { padding: 0.75rem 1.6rem; }
.wizard .plain-link { background: none; border-color: transparent; color: var(--accent); font-weight: 500; padding: 0.4rem 0; }
.wizard-review { margin: 0; display: flex; flex-direction: column; }
.wizard-review div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 0.2rem 0.8rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.wizard-review dt { color: var(--muted); font-size: 0.85rem; }
.wizard-review dd { margin: 0; overflow-wrap: anywhere; }
.wizard-review .plain-link { margin: 0; padding: 0; font-size: 0.85rem; }
.wizard-paper { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.wizard-paper-size { font-size: 0.8rem; }

/* A tab explaining itself, and the small labels used around the app. */
.intro { align-self: stretch; max-width: 44rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.intro h2 { margin: 0; font-size: 1.05rem; }
.intro p { margin: 0; }
.intro ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.intro-when { color: var(--muted); }
.intro-label { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem !important; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.85rem; background: var(--accent-soft); color: var(--accent); }
.chips .try { white-space: normal; text-align: left; }
.panel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.8rem; }
.panel-head h1 { grid-area: 1 / 1; }
.panel-head p { grid-area: 2 / 1 / 3 / 3; }
.panel-buttons { grid-area: 1 / 2; display: flex; gap: 0.5rem; }
.upload { position: relative; }
.panel-buttons button { min-height: 2.4rem; }
.panel-buttons #papers-button { position: static; }
.tools { display: flex; gap: 0.6rem; flex: none; }
.tools:not(:has(> :not([hidden]))) { display: none; }
button.upload { font: inherit; color: var(--fg); background: var(--surface); }
#business-changes { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
#business-changes small { display: block; color: var(--muted); }
#business-form, #business-known { display: flex; flex-direction: column; gap: 0.5rem; }
#business-form .primary { align-self: flex-start; padding: 0.6rem 1.2rem; }
.old-books-kinds { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.guide .intro { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1rem 0 0; background: none; }
.guide #guide-body { display: flex; flex-direction: column; gap: 1rem; }

/* Shown whenever the sample company is open. */
.sample-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; padding: 0.4rem 0.9rem; padding-top: max(0.4rem, env(safe-area-inset-top)); background: var(--gold-soft); color: var(--on-gold); font-size: 0.88rem; }
.sample-bar button { padding: 0.2rem 0.7rem; background: transparent; border-color: currentColor; color: inherit; font-weight: 600; }
.signed-out .sample-bar { display: none; }
.tries { display: flex; gap: 0.5rem; padding: 0.5rem 1.4rem 0.6rem; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); background: var(--surface); }
.tries::-webkit-scrollbar { display: none; }
.try { flex: none; border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.88rem; background: var(--accent-soft); border-color: transparent; color: var(--accent); white-space: nowrap; }
.tries:not([hidden]) + .composer { border-top: 0; padding-top: 0.2rem; }
#account-sample button { align-self: flex-start; }
.sign-in { margin: auto; width: min(22rem, 100% - 2rem); display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; text-align: center; }
.sign-in img { align-self: center; }
.sign-in h1 { margin: 0; font-size: 1.5rem; }
.sign-in p { margin: 0; color: var(--muted); }
.sign-in label { text-align: left; font-size: 0.85rem; color: var(--muted); }
.sign-in input { font: inherit; font-size: 16px; padding: 0.7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.sign-in input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sign-in button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; padding: 0.7rem; }
.needs-setup .top, .needs-setup .shell { display: none; }
.needs-setup { overflow-y: auto; }
.setup { margin: 0 auto; width: min(30rem, 100% - 2rem); padding: 1.5rem 0 3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.setup h1 { margin: 0; font-size: 1.5rem; }
.setup h2 { margin: 1.2rem 0 0; font-size: 1.1rem; }
.setup p { margin: 0; color: var(--muted); }
.setup label { margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.setup input, .setup select { font: inherit; font-size: 16px; padding: 0.65rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); width: 100%; }
.setup input:focus-visible, .setup select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.setup button { margin-top: 1.2rem; background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; padding: 0.8rem; }
.panel-head { position: relative; }
#papers-button { position: absolute; top: 0.9rem; right: 1.2rem; min-height: 2.4rem; }
.papers ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; max-height: 60vh; overflow-y: auto; }
.papers li { display: flex; gap: 0.7rem; align-items: center; }
.paper-link { flex: none; width: 4rem; height: 4rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--bg); color: var(--muted); text-decoration: none; }
.paper-link img { width: 100%; height: 100%; object-fit: cover; }
.paper-words { display: flex; flex-direction: column; min-width: 0; font-size: 0.9rem; }
.paper-words span { color: var(--muted); }
.paper-words .sign-in-ok { color: var(--accent); }
.paper-words .sign-in-error { color: var(--warn); }
.choices { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 44rem; }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; min-height: 2.75rem; padding: 0.5rem 0.9rem; border-color: var(--accent); background: var(--accent-soft); text-align: left; }
.choice-name { font-weight: 600; }
.choice-kind { font-size: 0.75rem; color: var(--muted); }
.sign-in .sign-in-switch { background: none; border-color: transparent; color: var(--accent); font-weight: 500; text-decoration: underline; }
.sign-in .sign-in-hint { text-align: left; font-size: 0.8rem; margin-top: -0.4rem; }
.sign-in-error { color: var(--bad); }
.sign-in-ok { color: var(--accent); }
.account { width: min(24rem, 100% - 2rem); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg); padding: 1.2rem; }
.account::backdrop { background: rgb(0 0 0 / 0.45); }
.account h2 { margin: 0; font-size: 1.2rem; }
.account h3 { margin: 0.6rem 0 0; font-size: 1rem; }
.account p { margin: 0.2rem 0 0; color: var(--muted); }
.account form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.account label { font-size: 0.85rem; color: var(--muted); }
.account input { font: inherit; font-size: 16px; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.account input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account button { min-height: 2.75rem; }
.backup-link { display: block; margin-top: 0.5rem; padding: 0.6rem; text-align: center; border: 1px solid var(--line); border-radius: 6px; color: var(--fg); text-decoration: none; }
.backup-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.account-actions button { flex: 1; }
#account-button { margin-left: 0; font-weight: 600; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On a phone: figures scroll sideways along the top, the three panels sit along the bottom like tabs. */
@media (max-width: 760px) {
  .landing { gap: 2rem; }
  .landing-main { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .tour, .trust ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sample-bar + .top { padding-top: 0.5rem; }
  .tries { padding-left: 0.7rem; padding-right: 0.7rem; }
  .top { flex-wrap: nowrap; gap: 0.9rem; padding: 0.5rem 0.9rem; padding-top: max(0.5rem, env(safe-area-inset-top)); }
  .brand span { display: none; }
  .glance { flex-wrap: nowrap; overflow-x: auto; gap: 1.1rem; scrollbar-width: none; }
  .glance::-webkit-scrollbar { display: none; }
  .glance div { flex: none; }
  .glance dd, .glance dt { white-space: nowrap; }
  .glance button { flex: none; }
  .shell { flex-direction: column-reverse; }
  .rail { flex-direction: row; justify-content: space-around; gap: 0; border-right: 0; border-top: 1px solid var(--line); padding: 0.45rem 0.5rem; padding-bottom: max(0.45rem, env(safe-area-inset-bottom)); }
  .bubble { flex: 1; width: auto; gap: 0.15rem; min-height: 3.2rem; }
  .bubble .dot { width: 2.3rem; height: 2.3rem; font-size: 0.9rem; }
  .bubble .badge { right: calc(50% - 1.9rem); }
  .bubble .working { bottom: 1.3rem; right: calc(50% - 1.5rem); }
  .panel-head { padding: 0.6rem 0.9rem 0.3rem; }
  #papers-button { top: 0.45rem; right: 0.7rem; }
  .panel-head h1 { font-size: 1.05rem; }
  .panel-head p { font-size: 0.85rem; }
  .messages { padding-left: 0.9rem; padding-right: 0.9rem; }
  .msg { max-width: 92%; }
  .composer { flex-wrap: wrap; padding: 0.6rem 0.7rem; }
  .composer textarea { font-size: 16px; }
  .composer button[type="submit"], .upload { min-height: 2.75rem; }
  .tools { flex-basis: 100%; }
  .tools .upload { flex: 1; justify-content: center; text-align: center; white-space: normal; }
  .panel-buttons button { padding: 0.3rem 0.6rem; font-size: 0.85rem; min-height: 2.2rem; }
  .wizard-review div { grid-template-columns: minmax(0, 1fr) auto; }
  .wizard-review dt { grid-column: 1 / -1; }
}

/* ---- Narra ---- */
.welcome h1, .wizard-top strong { color: var(--wood); }
@media (max-width: 640px) { .landing .brand span { display: inline; } }