:root {
  --ink: #1a1612;
  --ink-soft: #4a433c;
  --paper: #f6f1e8;
  --paper-deep: #ebe3d4;
  --card: #fffdf9;
  --accent: #c45c26;
  --accent-soft: #e8a882;
  --accent-rgb: 196, 92, 38; /* the accent as r,g,b — for tints: rgba(var(--accent-rgb), 0.08) */
  --line: rgba(26, 22, 18, 0.12);
  --shadow: 0 18px 50px rgba(26, 22, 18, 0.12);
  --radius: 14px;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* The hidden attribute must always win, even over display:flex/grid rules below. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
}
body { position: relative; }

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  z-index: 0;
}

/* App bar */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: calc(0.9rem + env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem) 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 6px 20px -12px rgba(26, 22, 18, 0.35);
}
/* Two rows on every screen — the title, then the tabs — so the header keeps its shape whatever the
   title is (switching into a Future never reflows it). */
.app-bar-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.title-wrap { display: flex; align-items: center; gap: 0.4rem; min-width: 0; max-width: 100%; }
.app-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.05;
  outline: none;
}
.app-title.editing {
  border-bottom: 2px solid var(--accent);
  min-width: 4ch;
}
.title-edit {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.95rem;
  opacity: 0.5;
  padding: 0.2rem 0.3rem;
  line-height: 1;
  border-radius: 6px;
}
.title-edit:hover { opacity: 1; color: var(--accent); }
.mode-nav {
  display: flex;
  gap: 0.3rem;
  background: var(--paper-deep);
  padding: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.mode-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mode-btn.active { background: var(--ink); color: var(--paper); }
.nav-sep { align-self: center; width: 1px; height: 1.1rem; background: var(--line); margin: 0 0.25rem; flex: 0 0 auto; }
/* Write/Add straight from the browse tree (Journal → today, Memories → a memory). */
.browse-add { display: inline-block; margin: 0 0 0.9rem; font: inherit; font-size: 0.95rem; font-weight: 500; color: #fff; background: var(--accent); border: none; border-radius: 999px; padding: 0.55rem 1.2rem; cursor: pointer; }
.browse-add[hidden] { display: none; }
.browse-add:hover { filter: brightness(1.06); }

/* The guided "Next" button — appears after you complete a step, floating bottom-right, with a ✕ to
   dismiss it so it never blocks the page. */
.next-step { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: inline-flex; align-items: stretch; background: var(--accent); border-radius: 999px; box-shadow: var(--shadow); overflow: hidden; animation: cap-pop 0.3s ease; }
.next-step[hidden] { display: none; }
.next-step-go { font: inherit; font-weight: 600; font-size: 0.95rem; color: #fff; background: transparent; border: none; padding: 0.7rem 0.8rem 0.7rem 1.3rem; cursor: pointer; }
.next-step-go:hover { filter: brightness(1.08); }
.next-step-x { font: inherit; font-size: 1.15rem; line-height: 1; color: #fff; background: transparent; border: none; border-left: 1px solid rgba(255,255,255,0.35); padding: 0 0.85rem; cursor: pointer; }
.next-step-x:hover { background: rgba(0,0,0,0.12); }
/* Leave room at the bottom so the floating button can't sit on top of a page's own controls. */
.app-main { padding-bottom: 5.5rem; }
.mode-btn-gear { padding: 0.5rem 0.7rem; font-size: 1rem; }
.mode-more { position: relative; display: inline-flex; }
.more-menu { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 60; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 0.3rem; display: flex; flex-direction: column; min-width: 8.5rem; }
.more-item { text-align: left; border: none; background: transparent; color: var(--ink); font: inherit; font-size: 0.9rem; padding: 0.5rem 0.8rem; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.more-item:hover, .more-item.active { background: var(--ink); color: var(--paper); }

/* Settings page */
.settings { max-width: 40rem; display: flex; flex-direction: column; gap: 2.5rem; }
.settings-group { display: flex; flex-direction: column; gap: 0.9rem; }
.settings-h {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--ink);
  margin: 0; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line);
}
.settings-input {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; max-width: 28rem; width: 100%; box-sizing: border-box;
}
.settings-input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
/* Every select in Settings matches the inputs: normal height, sensible width (not stretched). */
.settings select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; width: 100%; max-width: 28rem; box-sizing: border-box; align-self: flex-start; }
.settings select:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.llm-secret { -webkit-text-security: disc; text-security: disc; }
.llm-model-row { display: flex; gap: 0.5rem; align-items: center; max-width: 28rem; }
.llm-model-row .settings-input { flex: 1 1 auto; min-width: 0; }
.llm-model-row .import-link { flex: 0 0 auto; white-space: nowrap; }

.app-main {
  position: relative;
  z-index: 1;
  padding: 1.75rem clamp(1rem, 4vw, 3rem) 4rem;
}
.view { max-width: 860px; margin: 0 auto; }

/* Write form */
.view-intro {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}
.app-intro {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 1.1rem 2.4rem 1.1rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}
.app-intro p { margin: 0; }
.app-intro p + p { margin-top: 0.5rem; }
.app-intro-lead {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--ink);
}
.app-intro-lead strong { font-weight: 400; }
.app-intro-dismiss {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-soft);
  opacity: 0.6;
  padding: 0.2rem 0.4rem;
}
.app-intro-dismiss:hover { opacity: 1; }

/* Past · Present · Future — the arc of the app, present highlighted. A reusable theme. */
.triptych { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0.4rem; margin-bottom: 1.25rem; align-items: stretch; }
.tri { display: flex; flex-direction: column; gap: 0.15rem; text-align: center; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.5rem; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.tri-when { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.tri-what { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; }
.tri-do { font-size: 0.72rem; color: var(--accent); }
.tri-active { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.tri-active .tri-when { color: rgba(255,255,255,0.8); }
.tri-active .tri-do { color: rgba(255,255,255,0.85); }
.tri-disabled { opacity: 0.4; cursor: default; }
button.tri:hover { border-color: var(--accent); }
button.tri:active { transform: translateY(1px); }
@media (max-width: 520px) { .tri-what { font-size: 1.1rem; } .tri-do { font-size: 0.66rem; } .tri { padding: 0.6rem 0.3rem; } }

.write-form { display: flex; flex-direction: column; gap: 1.1rem; }
/* The input leads: big prompt, tall box, prominent actions right under it. */
.write-main { gap: 0.6rem; }
.write-prompt {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; line-height: 1.15;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.write-main #entry-text { min-height: 4.6rem; font-size: 1.05rem; border-width: 1.5px; }
.write-main #entry-text:focus { border-color: var(--accent); }
.write-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.7rem; clear: both; }
.write-actions .mic-btn { margin: 0; }
.write-actions .save-btn { margin-left: auto; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.field-hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.1rem; }
.field-hint:empty { display: none; }

.radio-group { display: flex; flex-direction: column; gap: 0.15rem; }
.radio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--ink);
}
.radio input {
  accent-color: var(--accent);
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex-shrink: 0;
}
#entry-date, #entry-text, #entry-brief {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
#entry-date { max-width: 12rem; }
#summary-style-select, #summary-style-custom, #summary-format-select {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  max-width: 24rem;
}
#summary-style-custom { margin-top: 0.5rem; }
#summary-style-select:focus, #summary-style-custom:focus, #summary-format-select:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }

/* Outline rendering in the detail panel — clear visual separation between levels */
.outline { display: flex; flex-direction: column; gap: 0.3rem; }
.ol-item { position: relative; padding-left: 1.3rem; line-height: 1.55; }
.ol-item::before { position: absolute; left: 0; }

.ol-l1 {
  margin-left: 0;
  margin-top: 0.7rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.05rem;
}
.ol-l1:first-child { margin-top: 0; }
.ol-l1::before { content: "●"; color: var(--accent); font-size: 0.6em; top: 0.55em; }

.ol-l2 {
  margin-left: 1.9rem;
  color: var(--ink);
  font-weight: 400;
}
.ol-l2::before { content: "○"; color: var(--accent); }

.ol-l3 {
  margin-left: 3.8rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.ol-l3::before { content: "▪"; color: var(--accent-soft); font-size: 0.85em; top: 0.15em; }

.ol-text { color: var(--ink-soft); line-height: 1.55; padding-left: 1.3rem; }

/* A leaf bullet that holds a full paragraph reads as prose, not a terse label — override the
   per-level label styling (bold/small/muted) so the detail is comfortable to read. */
.ol-para { font-weight: 400; font-size: 1rem; color: var(--ink); line-height: 1.62; margin-top: 0.2rem; }
.ol-para::before { top: 0.5em; }

/* Compressed drill-down outline: top-level nodes show, branches open on click */
.outline-tree .ol-node { display: flex; flex-direction: column; gap: 0.3rem; }
.outline-tree summary.ol-branch { cursor: pointer; list-style: none; }
.outline-tree summary.ol-branch::-webkit-details-marker { display: none; }
.outline-tree summary.ol-branch:hover { color: var(--accent); }
/* a disclosure triangle replaces the per-level bullet on a branch */
.outline-tree summary.ol-branch::before { content: "▸"; color: var(--accent); font-size: 0.72em; top: 0.4em; }
.outline-tree details[open] > summary.ol-branch::before { content: "▾"; }
/* indentation comes from nesting here, so drop the per-level margins and the top-gap on l1 */
.outline-tree .ol-item { margin-left: 0; margin-top: 0; }
.outline-tree .ol-children { padding-left: 0.95rem; display: flex; flex-direction: column; gap: 0.3rem; }

/* Outline items that link into the prose */
.ol-linked { cursor: pointer; }
.ol-linked:hover { color: var(--accent); }
.ol-linked::after { content: " ›"; color: var(--accent); opacity: 0.55; }

/* Foldable prose / verbatim sections (collapsed by default) */
.rep-fold { margin-top: 1.4rem; }
.rep-fold > summary {
  cursor: pointer;
  list-style: none;
  margin: 0 0 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.rep-fold > summary::-webkit-details-marker { display: none; }
.rep-fold > summary::before { content: "▸  "; color: var(--accent); font-size: 0.85em; }
.rep-fold[open] > summary::before { content: "▾  "; }

.rep-hl {
  background: var(--accent-soft);
  border-radius: 5px;
  box-shadow: 0 0 0 4px var(--accent-soft);
  transition: background 0.5s, box-shadow 0.5s;
}
/* Auto-growing box: starts at a few lines, grows to fit its content (JS sets the height); no inner
   scrollbar and no manual resize handle, so the box itself expands and pushes the form below down. */
#entry-text { resize: none; overflow: hidden; min-height: 4.6rem; line-height: 1.6; }
#entry-text:focus, #entry-date:focus, #entry-brief:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }

.entry-view {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  color: var(--ink-soft);
}
.entry-view p { margin: 0 0 0.9rem; line-height: 1.65; }
.entry-view p:last-child { margin-bottom: 0; }
.edit-text-btn { align-self: flex-start; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font: inherit; font-size: 0.85rem; font-weight: 500; padding: 0.35rem 0.95rem; border-radius: 999px; cursor: pointer; }
.edit-text-btn:hover { border-color: var(--accent-soft); color: var(--accent); }

/* Single-select toggle: show ONE representation at a time (Summary ⇄ Outline). */
.rep-toggle { display: inline-flex; gap: 0.2rem; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem; margin: 0 0 1rem; }
.rep-tab { border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.95rem; border-radius: 999px; cursor: pointer; }
.rep-tab.active { background: var(--ink); color: var(--paper); }
.rep-body { color: var(--ink); }
/* One layout for every input page: READ shows .read-only parts, EDIT shows .edit-only parts. */
.write-form.reading .edit-only { display: none !important; }
.write-form:not(.reading) .read-only { display: none !important; }
.write-tools { margin-top: 0.45rem; }
.entry-details { color: var(--ink-soft); font-size: 0.92rem; margin: 0.7rem 0 0; }
.write-actions .cancel-btn { order: -1; }
.cancel-btn { font: inherit; font-size: 0.92rem; background: none; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 999px; padding: 0.6rem 1.3rem; cursor: pointer; }
.cancel-btn:hover { border-color: var(--ink-soft); color: var(--ink); }

.photo-row { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.photo-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  border: 1px dashed var(--accent-soft);
  border-radius: var(--radius);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  background: rgba(var(--accent-rgb), 0.04);
}
.photo-add { font: inherit; }
/* Mic button (no longer shares .photo-add) — same chip look, its own rules. */
.mic-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-weight: 600; font-size: 0.9rem;
  padding: 0.7rem 1.1rem; border: 1px dashed var(--accent-soft); border-radius: var(--radius);
  color: var(--accent); background: rgba(var(--accent-rgb), 0.04); cursor: pointer;
}
.mic-btn.listening {
  border-style: solid;
  border-color: #d5322f;
  color: #fff;
  background: #d5322f;
  animation: mic-pulse 1.3s ease-in-out infinite;
}
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
/* Hands-free is the primary voice CTA — filled, so it stands out from the dashed Dictate button. */
.handsfree-btn:not(.listening) { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.photo-thumbs { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* In-app camera */
.camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  display: flex;
  flex-direction: column;
}
.camera-overlay[hidden] { display: none; }
#camera-video {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
}
.camera-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  background: #000;
}
.camera-shutter {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  flex-shrink: 0;
}
.camera-shutter:active { transform: scale(0.94); }
.camera-ghost {
  border: none;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
  min-width: 4rem;
}
.photo-thumb { position: relative; }
.photo-thumb img, .photo-thumb video {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  background: #000;
}
.photo-thumb button {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.save-btn {
  align-self: flex-start;
  border: none;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}
.save-btn:disabled { opacity: 0.4; cursor: default; }
.save-btn:not(:disabled):active { transform: translateY(1px); }

/* Delete lives only in the editor now — a quiet, destructive secondary action under Save. */
.delete-entry-btn {
  align-self: flex-start;
  border: 1px solid var(--line);
  background: transparent;
  color: #b23c17;
  font: inherit; font-size: 0.85rem; font-weight: 500;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.delete-entry-btn:hover { border-color: #d08b74; background: rgba(178, 60, 23, 0.05); }

/* Summarize toggle */
.toggle-field {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.toggle-copy { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.toggle-title { font-weight: 600; font-size: 0.95rem; }
.toggle-hint { font-size: 0.8rem; color: var(--ink-soft); }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 46px; height: 26px;
  border-radius: 999px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  transition: background 0.2s;
}
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 22, 18, 0.25);
  transition: transform 0.2s;
}
.toggle-input:checked + .toggle-switch { background: var(--accent); border-color: var(--accent); }
.toggle-input:checked + .toggle-switch::after { transform: translateX(20px); }
.toggle-input:focus-visible + .toggle-switch { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

.detail-badge {
  margin: 0 0 0.75rem;
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-deep);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.detail-badge[hidden] { display: none; }

.rep-heading {
  margin: 1.9rem 0 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.detail-full .rep-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.detail-modes { display: flex; gap: 0.4rem; margin: 0 0 1rem; flex-wrap: wrap; }
.mode-chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit; font-size: 0.78rem; font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}
.mode-chip:hover { border-color: var(--accent-soft); color: var(--ink); }
.mode-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.import-link.danger { color: #b23c17; }
.import-link.danger:hover { color: #d8542a; }

.write-status { margin: 0; min-height: 1.2em; font-size: 0.9rem; color: var(--ink-soft); }
.write-status.ok { color: #2e7d32; }
.write-status.error { color: #b23c17; }

.memories-row {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.mem-field { font-size: 0.85rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.4rem; }
.mem-field input {
  width: 5rem; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.5rem;
}
.memories-row .import-status { flex-basis: 100%; }

/* Memories tab — the structured input form */
.mem-form { display: flex; flex-direction: column; gap: 1rem; }
.mem-form input[type="text"], .mem-form input[type="number"], .mem-form textarea {
  font: inherit; color: var(--ink); background: var(--card); width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem;
}
.mem-form textarea { resize: vertical; line-height: 1.6; }
.mem-form input:focus, .mem-form textarea:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.mem-years { display: flex; align-items: flex-end; gap: 0.75rem; border: none; padding: 0; margin: 0; flex-wrap: wrap; }
.mem-years .mem-year-field { flex: 1; min-width: 6rem; }
.mem-year-dash { padding-bottom: 0.85rem; color: var(--ink-soft); }
.mem-year-field em, .mem-form .field-label em, .write-more .field-label em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.mem-ongoing { display: inline-flex; align-items: center; gap: 0.4rem; padding-bottom: 0.6rem; color: var(--ink); font-size: 0.9rem; white-space: nowrap; }
.mem-ongoing input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }

/* "A past memory?" disclosure inside the Write form */
.write-more { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0.9rem; background: var(--card); }
.write-more > summary {
  cursor: pointer; list-style: none; padding: 0.7rem 0; color: var(--accent); font-weight: 600; font-size: 0.9rem;
}
.write-more > summary::-webkit-details-marker { display: none; }
.write-more > summary::before { content: "＋ "; }
.write-more[open] > summary::before { content: "－ "; }
.write-more[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 0.9rem; }
.write-more .field { margin-bottom: 0.9rem; }
.write-more > *:last-child { margin-bottom: 0.9rem; }
/* Tappable category / subject chips (replacing the native datalist dropdown) */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chip-row:empty { display: none; }

/* Memories: a compact two-up form ABOVE the text box, so both fit above the fold on a narrow phone. */
#memory-fields { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.6rem; }
.mem-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; align-items: start; }
.mem-row > * { min-width: 0; }        /* let columns be equal — don't let no-wrap chips stretch one */
#memory-fields .field { margin: 0; gap: 0.25rem; min-width: 0; }
#memory-fields .field-label { font-size: 0.72rem; }
#memory-fields input[type="text"], #memory-fields input[type="number"] { width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; font-size: 0.95rem; }
/* Keep suggestion chips to a single scrollable line so they don't grow the form's height. */
#memory-fields .chip-row { flex-wrap: nowrap; overflow-x: auto; margin-top: 0.3rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* soft right-edge fade so the strip reads as "swipe for more", not chopped off */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
#memory-fields .chip-row::-webkit-scrollbar { display: none; }
#memory-fields .chip { flex: 0 0 auto; }
/* Year range on its own full-width row — fits comfortably, so give the year
   inputs a real width (no clipping to "19") instead of squeezing two 6rem
   fields into half the row. */
#memory-fields .mem-years { gap: 0.5rem; flex-wrap: wrap; }
#memory-fields .mem-year-field { flex: 0 0 auto; min-width: 0; }
#memory-fields .mem-year-field input[type="number"] { width: 5rem; }
#memory-fields .mem-year-dash { padding-bottom: 0.6rem; }
#memory-fields .mem-ongoing { padding-bottom: 0.5rem; font-size: 0.82rem; margin-left: 0.15rem; }
/* A shorter text box in Memories (the form takes the top), taller in the Journal. */
.form-memoir .write-main #entry-text { min-height: 4.6rem; }
.form-memoir .write-prompt { margin-bottom: 0.25rem; }
.chip {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  font: inherit; font-size: 0.8rem; padding: 0.35rem 0.75rem; border-radius: 999px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--accent-soft); color: var(--ink); }
.chip-on { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.mem-list { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 2.5rem; }
.mem-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.mem-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.mem-when {
  font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--accent);
}
.mem-del {
  border: none; background: var(--paper-deep); color: var(--ink-soft);
  width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.mem-del:hover { color: #b23c17; }
.mem-card-actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.mem-edit {
  border: none; background: var(--paper-deep); color: var(--ink-soft);
  width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.mem-edit:hover { color: var(--accent); }
.mem-reps { color: var(--ink-soft); }
.mem-goto {
  border: none; background: none; padding: 0; font: inherit;
  color: var(--accent); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.mem-goto:hover { color: var(--ink); }
/* Memoire tab: the chronological list below the input form */
.memoire-list { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.mem-card.mem-flash { animation: memflash 1.6s ease; }
@keyframes memflash {
  0%, 45% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
.year-mem-heading { margin-top: 2.5rem; }

/* Review-before-save + chat refinement (Memories tab) */
.mem-review { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.mem-review > .rep-heading { color: var(--accent); }
.mem-review .mem-list { margin-top: 1.25rem; }
.mem-chat { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.mem-chat-log { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem; max-height: 240px; overflow-y: auto; }
.mem-chat-log:empty { display: none; }
.mem-bubble { padding: 0.5rem 0.8rem; border-radius: 0.9rem; font-size: 0.9rem; line-height: 1.35; max-width: 85%; }
.mem-bubble-you { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 0.2rem; }
.mem-bubble-bot { align-self: flex-start; background: var(--paper-deep); color: var(--ink-soft); border-bottom-left-radius: 0.2rem; }
.mem-bubble-error { background: #f6d5cd; color: #7a2a12; }
.mem-chat-row { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--line); }
.mem-chat-row input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: var(--card); }
.mem-chat-row input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.mem-chat-row button { padding: 0.6rem 1.1rem; border: none; border-radius: var(--radius); background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.mem-chat-row button:disabled { opacity: 0.5; cursor: default; }
.mem-review-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }

.import-row { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.import-actions { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.import-link {
  display: inline-block;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  padding: 0;
}
.import-link:hover { color: var(--accent); }
.import-overwrite { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.7rem; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }
.import-overwrite input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.import-status { margin: 0.5rem 0 0; min-height: 1.1em; font-size: 0.85rem; color: var(--ink-soft); }
.import-status.ok { color: #2e7d32; }
.import-status.error { color: #b23c17; }

/* Browse header */
.browse-header { margin-bottom: 1.75rem; }
.breadcrumb, .write-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem;
  font-size: 0.9rem;
}
.write-breadcrumb { margin-bottom: 0.7rem; }
.write-breadcrumb:empty { display: none; }
.write-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; margin: 0.2rem 0 0.6rem; }
.write-title[hidden] { display: none; }
.crumb {
  border: none; background: transparent; padding: 0.2rem 0.1rem;
  font: inherit; font-size: 0.9rem; color: var(--accent); font-weight: 600;
  cursor: pointer; border-radius: 4px;
}
.crumb:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb-current { color: var(--ink-soft); font-weight: 500; cursor: default; }
.crumb-sep { color: var(--ink-soft); opacity: 0.55; }
/* The "Life" root reads as a home anchor: a bordered pill with a house glyph, so it's
   obvious you can click it to get back to everything. */
.crumb-root {
  border: 1px solid var(--accent-soft); border-radius: 999px;
  padding: 0.15rem 0.7rem;
}
.crumb-root::before { content: "⌂ "; }
button.crumb-root:hover { background: var(--accent-soft); color: var(--ink); text-decoration: none; }
.period-nav { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.period-nav-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit; font-size: 0.82rem; font-weight: 500;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.period-nav-btn:hover { border-color: var(--accent-soft); color: var(--ink); }

.period-label {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--ink);
}
.period-brief {
  margin: 0.5rem 0 0;
  max-width: 52rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink-soft);
}
.period-summarize {
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit; font-size: 0.8rem; font-weight: 500;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
}
.period-summarize:hover { border-color: var(--accent-soft); color: var(--ink); }
.period-summarize.stale { border-color: var(--accent-soft); color: var(--accent); }
.period-summarize:disabled { opacity: 0.5; cursor: default; }

.period-delete {
  margin-top: 0.9rem;
  margin-left: 0.5rem;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit; font-size: 0.8rem; font-weight: 500;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
}
.period-delete:hover { border-color: #d08b74; color: #b23c17; background: rgba(178, 60, 23, 0.05); }

.period-summary { max-width: 52rem; margin-top: 1.25rem; color: var(--ink-soft); }
.period-summary:empty { display: none; }
.period-outline {
  max-width: 52rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.period-outline[hidden], .period-outline:empty { display: none; }
.subj-cat { font-family: var(--font-display); font-size: 0.55em; color: var(--ink-soft); font-style: italic; }
/* Memory timeline band on a decade page */
.mtl { max-width: 52rem; margin: 0.5rem 0 1.75rem; }
.mtl-grid { position: relative; }
.mtl-axis { display: flex; margin-bottom: 0.35rem; }
.mtl-year { flex: 1 1 0; font-size: 0.7rem; color: var(--ink-soft); border-left: 1px solid var(--line); padding-left: 3px; }
.mtl-year:first-child { border-left: none; padding-left: 0; }
.mtl-axis-span { position: relative; height: 1rem; margin-bottom: 0.35rem; }
.mtl-tick { position: absolute; top: 0; font-size: 0.7rem; color: var(--ink-soft); white-space: nowrap; }
.mtl-track { position: relative; height: 1.9rem; margin-top: 0.35rem; background: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: 10% 100%; border-radius: 4px; }
.mtl-bar {
  position: absolute; top: 0; height: 100%; min-width: 0.5rem;
  padding: 0; background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 6px; cursor: pointer; box-sizing: border-box;
}
.mtl-bar-label {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center;
  font-size: 0.75rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; cursor: pointer; pointer-events: auto;
}
.mtl-track:hover .mtl-bar { background: var(--accent); }
.mtl-track:hover .mtl-bar-label { color: var(--accent); }
/* Links to individual memories (subject/category with more than one) */
.mem-links { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.5rem 0 1.5rem; max-width: 52rem; }
.mem-link {
  display: flex; flex-direction: column; gap: 0.2rem; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.85rem 1.1rem; cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color 0.2s;
}
.mem-link:hover { border-color: var(--accent-soft); }
.mem-link-when { font-family: var(--font-display); font-style: italic; color: var(--accent); font-size: 1.05rem; }
.mem-link-brief { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.4; }
.day-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.6rem 0 1.5rem; }
/* On the day/memory page these are pill buttons, not the round card icons. */
.detail-nav-btn.mem-edit, .detail-nav-btn.mem-del { width: auto; height: auto; border-radius: 999px; }
.summarizing-note {
  max-width: 52rem; margin: 0 0 1.25rem;
  background: rgba(var(--accent-rgb), 0.08); border: 1px solid var(--accent-soft); border-radius: var(--radius);
  color: var(--accent); padding: 0.7rem 1rem; font-size: 0.9rem; line-height: 1.4;
}
.summarizing-note .sn-count { font-weight: 600; }

/* Sub-nav inside the Activity tab (Queue | Graph) */
.subnav { display: flex; gap: 0.4rem; max-width: 52rem; margin: 0 auto 1rem; }
.subnav-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font: inherit; font-size: 0.85rem; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; }
.subnav-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- Activity page: live view of the summarization queue ------------------------------- */
.activity { max-width: 52rem; margin: 0 auto; }
.act-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.act-title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; margin: 0; }
.act-actions { display: flex; gap: 0.5rem; align-items: center; }
.act-clear { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font: inherit; font-size: 0.8rem; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer; }
.act-clear:hover { border-color: var(--accent-soft); color: var(--ink); }
.act-retry { border: none; background: var(--accent); color: #fff; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.95rem; border-radius: 999px; cursor: pointer; }
.act-errbanner { background: rgba(179, 38, 30, 0.1); border: 1px solid rgba(179, 38, 30, 0.4); color: #b3261e; border-radius: var(--radius); padding: 0.7rem 1rem; font-size: 0.9rem; margin: 0 0 1rem; }
.act-bar { height: 8px; border-radius: 999px; background: var(--paper-deep); overflow: hidden; margin: 1rem 0 0.6rem; }
.act-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }
.act-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.act-stat b { color: var(--ink); }
.act-s-running b { color: var(--accent); }
.act-s-error b { color: #b3261e; }
.act-section { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--ink-soft); margin: 1.4rem 0 0.5rem; }
.act-list { display: flex; flex-direction: column; gap: 2px; }
.act-list-done { opacity: 0.85; }
.act-row {
  display: grid; grid-template-columns: 0.8rem 1fr auto auto auto auto; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 0.9rem;
}
.act-ago { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }
.act-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line); }
.act-running .act-dot { background: var(--accent); animation: act-pulse 1.1s ease-in-out infinite; }
.act-queued .act-dot { background: var(--accent-soft); }
.act-pending .act-dot { background: var(--line); }
.act-done .act-dot, .act-copy .act-dot { background: #3a7d44; }
.act-error .act-dot { background: #b3261e; }
@keyframes act-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.act-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); opacity: 0.8; }
.act-state { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.act-running .act-state { color: var(--accent); }
.act-error .act-state { color: #b3261e; }
.act-dur { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 3rem; text-align: right; }
.act-empty { color: var(--ink-soft); font-style: italic; margin-top: 1rem; }
@media (max-width: 640px) {
  .act-row { grid-template-columns: 0.7rem 1fr auto auto; }
  .act-kind, .act-dur { display: none; } /* keep the state + "ago" columns */
}

/* ---- Unified node page (every level shares this) ---- */
.node-name { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.1; color: var(--ink); margin: 0.4rem 0 0.35rem; }
.node-subtitle { color: var(--accent); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; margin: 0 0 0.75rem; }
.node-word { font-family: var(--font-display); font-size: 2.1rem; color: var(--accent); margin: 0.4rem 0 0.15rem; text-align: center; }
.node-phrase { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--ink-soft); margin: 0 0 0.5rem; text-align: center; }
.node-sentence { font-size: 1.15rem; color: var(--ink); line-height: 1.5; max-width: 52rem; margin: 0 0 0.6rem; }
.node-zoom { max-width: 52rem; margin: 0 0 0.6rem; }
.node-complete { color: var(--ink); line-height: 1.65; }
/* Tappable entity name-links inside summaries → open that name's page */
.ent-link {
  border: none; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent); font-weight: 600;
  border-bottom: 1px dotted var(--accent-soft);
}
.ent-link:hover { border-bottom-style: solid; }

/* Full summary at the top of every node page */
.node-summary { color: var(--ink); line-height: 1.65; max-width: 52rem; margin: 0.2rem 0 0.9rem; font-size: 1.05rem; }
.node-summary > p:first-child { margin-top: 0; }

/* Report-a-mistake: the "Fix this" chip that appears on text selection, and its panel */
#fixsel-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70;
  border: none; background: var(--ink); color: var(--paper); font: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 0.6rem 1.1rem; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#fixsel-panel {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(26,22,18,0.35); padding: 1rem;
}
.fixsel-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.2rem; width: min(30rem, 100%); display: flex; flex-direction: column; gap: 0.7rem;
}
.fixsel-title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 0; }
.fixsel-quote { margin: 0; color: var(--ink-soft); font-style: italic; background: var(--paper-deep); border-radius: 10px; padding: 0.6rem 0.8rem; }
.fixsel-note { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.8rem; resize: vertical; line-height: 1.5; }
.fixsel-note:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.fixsel-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.fixsel-cancel { border: 1px solid var(--line); background: none; color: var(--ink-soft); font: inherit; padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer; }
.fixsel-apply { border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 600; padding: 0.5rem 1.2rem; border-radius: 999px; cursor: pointer; }
.fixsel-status { margin: 0; font-size: 0.85rem; color: var(--ink-soft); min-height: 1.1em; }
.fixsel-status.working::before { content: "◷ "; }
.fixsel-status.ok { color: #3a7d44; }
.fixsel-status.error { color: #b3261e; }
.zoom-more, .zoom-less {
  border: none; background: none; padding: 0;
  color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
}
/* "More" sits inline at the end of the sentence paragraph */
.zoom-more { font-size: 0.92rem; white-space: nowrap; }
.zoom-more::after { content: " ›"; opacity: 0.6; }
.zoom-more:hover, .zoom-less:hover { text-decoration: underline; }
/* "Less" folds the full summary back — a block link below it, hidden until expanded */
.zoom-less { display: block; margin-top: 0.5rem; font-size: 0.9rem; }
.zoom-less::before { content: "▾  "; }
.node-zoom[data-state="brief"] .zoom-less { display: none; }
.lazy-hint { color: var(--ink-soft); font-style: italic; margin: 0.2rem 0; }
.node-para { color: var(--ink-soft); line-height: 1.65; max-width: 52rem; margin: 0 0 0.9rem; }
.node-outline { max-width: 52rem; margin: 0.1rem 0 0.9rem; } /* the leaf's leading outline block */
.node-fold { max-width: 52rem; margin: 0.3rem 0; }
.node-fold > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.9rem; list-style: none; padding: 0.3rem 0; }
.node-fold > summary::-webkit-details-marker { display: none; }
.node-fold > summary::before { content: "▸  "; }
.node-fold[open] > summary::before { content: "▾  "; }
.node-fold-body { color: var(--ink-soft); line-height: 1.65; padding: 0.2rem 0 0.6rem; }
/* Verbatim transcript — the raw spoken words, styled alike everywhere and clearly unlike the
   polished summary prose: a quieter, monospace-leaning face with a left rule. */
.verbatim, .node-verbatim, .ent-note-existing {
  white-space: pre-wrap;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-soft);
  border-left: 3px solid var(--accent-soft);
  padding-left: 0.9rem;
}
.verbatim p, .ent-note-existing p { margin: 0 0 0.6rem; }
.verbatim p:last-child, .ent-note-existing p:last-child { margin-bottom: 0; }
.verbatim-tools { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }
.verbatim-edit, .verbatim-cancel { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font: inherit; font-size: 0.82rem; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer; }
.verbatim-edit:hover, .verbatim-cancel:hover { border-color: var(--accent-soft); color: var(--ink); }
.verbatim-save { border: none; background: var(--accent); color: #fff; font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0.95rem; border-radius: 999px; cursor: pointer; }
.verbatim-input { width: 100%; font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace; font-size: 0.86rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.8rem; resize: vertical; line-height: 1.65; }
.verbatim-input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.verbatim-status { font-size: 0.82rem; color: var(--ink-soft); }

/* Per-node comment box (below the outline): speak/type your take → folded into the summary */
.node-comment { max-width: 52rem; margin: 1.2rem 0 0.5rem; }
.node-comment-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.node-comment-input { flex: 1; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.8rem; resize: none; overflow: hidden; min-height: 4.6rem; line-height: 1.5; }
.node-comment-input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.node-comment-mic { border: 1px solid var(--line); background: var(--card); font-size: 1.1rem; padding: 0.5rem 0.7rem; border-radius: 999px; cursor: pointer; flex-shrink: 0; }
.node-comment-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.5rem; }
.node-comment-add { border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 600; padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; }
.node-comment-status { font-size: 0.82rem; color: var(--ink-soft); }
.node-links { display: flex; flex-direction: column; gap: 0.5rem; max-width: 52rem; margin: 0.4rem 0 1.4rem; }
.node-link { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 1rem; cursor: pointer; font: inherit; color: var(--ink); transition: border-color 0.2s; }
.node-link:hover { border-color: var(--accent-soft); }
.node-link.has-thumb { flex-direction: row; align-items: center; gap: 0.85rem; }
.node-link-thumb { flex: 0 0 auto; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--paper-deep); border: 1px solid var(--line); }
.node-link-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.node-link-name { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--accent); }
.node-link-line { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.4; }
.day-delete { color: #b23c17; border-color: rgba(178, 60, 23, 0.35); }
.day-body { max-width: 52rem; }
.cat-card .card-title, .subj-card .card-title { color: var(--accent); }

.calendar-root { position: relative; }

/* Life view — the epitaph */
.epitaph { text-align: center; margin: 1.5rem auto 2rem; max-width: 42rem; }
.epi-word {
  font-family: var(--font-display);
  font-size: clamp(3rem, 13vw, 6rem);
  line-height: 1;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.epi-phrase {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  color: var(--accent);
  margin: 0 0 1.25rem;
}
.epi-sentence {
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 1.1rem;
  line-height: 1.5;
}
.epi-paragraph { color: var(--ink-soft); line-height: 1.75; margin: 0; text-align: left; }
.epitaph-empty { text-align: center; color: var(--ink-soft); font-style: italic; margin: 2.5rem auto; max-width: 34rem; line-height: 1.6; }
.life-actions { text-align: center; margin-bottom: 2rem; }
.life-distill { display: inline-block; }
.life-actions .write-status { text-align: center; }

/* Year view */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.year-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 2px 0 rgba(26, 22, 18, 0.04);
}
.year-month-thumb { width: 100%; height: 140px; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.year-card-body { padding: 1.25rem; }
.year-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-soft); }

.card-label {
  margin: 0 0 0.5rem; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.card-title { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.card-brief { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

/* Month view */
.month-weeks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.month-week-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 2px 0 rgba(26, 22, 18, 0.04);
}
.month-week-thumb { width: 100%; height: 140px; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.month-week-body { padding: 1.25rem; }
.month-week-card .card-title { font-size: 1.3rem; }
.month-week-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-soft); }

/* Week view */
.week-list { display: flex; flex-direction: column; gap: 1.25rem; }
.week-day {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 2px 0 rgba(26, 22, 18, 0.04);
}
.week-day.has-entry:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-soft); }
.week-day-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
.week-day-dow { margin: 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.week-day-date { margin: 0.2rem 0 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.week-day-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }
.week-day-brief { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--ink); line-height: 1.35; }
.week-day-excerpt { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }

/* Detail panel */
.detail-backdrop { position: fixed; inset: 0; background: rgba(26, 22, 18, 0.45); z-index: 20; backdrop-filter: blur(3px); }
.detail-panel {
  position: fixed; top: 0; right: 0; width: min(520px, 100vw); height: 100vh;
  background: var(--card); z-index: 30; padding: 2rem 1.75rem 3rem;
  overflow-y: auto; box-shadow: -12px 0 40px rgba(26, 22, 18, 0.15);
  animation: slideIn 0.28s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.close-btn {
  position: absolute; top: 1rem; right: 1rem; border: none; background: var(--paper-deep);
  width: 2.25rem; height: 2.25rem; border-radius: 50%; font-size: 1.4rem; line-height: 1;
  cursor: pointer; color: var(--ink-soft);
}
.detail-date { margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.detail-brief { margin: 0 0 1.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.3; }
.detail-full { color: var(--ink-soft); font-size: 0.95rem; }
.detail-full p { margin: 0 0 1.35rem; line-height: 1.7; }
.detail-full p:last-child { margin-bottom: 0; }
.detail-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.detail-images figure { margin: 0; }
.detail-images img, .detail-images video { width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; background: #000; }

.detail-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.detail-action {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit; font-size: 0.82rem; font-weight: 500;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.detail-action:hover { border-color: var(--accent-soft); color: var(--ink); }
.detail-action.danger:hover { border-color: #d08b74; color: #b23c17; background: rgba(178, 60, 23, 0.05); }

.edit-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.edit-field > span {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
#edit-brief, #edit-full {
  font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.7rem 0.85rem;
}
#edit-full { resize: vertical; line-height: 1.6; }
#edit-brief:focus, #edit-full:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.edit-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: -0.4rem 0 1.1rem; }
.edit-hint { font-size: 0.78rem; color: var(--ink-soft); flex: 1; min-width: 12rem; }
.edit-photos { margin-bottom: 1rem; }
.edit-buttons { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.edit-buttons .save-btn { padding: 0.7rem 1.5rem; font-size: 0.92rem; }

.detail-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.detail-nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit; font-size: 0.82rem; font-weight: 500; line-height: 1;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.detail-nav-btn:hover { border-color: var(--accent-soft); color: var(--ink); }
.detail-nav-btn[hidden] { display: none; }
#detail-next { margin-left: auto; }

.nav-hint { margin-top: 2rem; font-size: 0.82rem; color: var(--ink-soft); opacity: 0.7; }

/* Ask / chat view */
#chat-view:not([hidden]) { display: flex; flex-direction: column; gap: 1rem; }
.chat-log { display: flex; flex-direction: column; gap: 0.85rem; min-height: 45vh; }
.chat-hint { color: var(--ink-soft); font-size: 0.92rem; font-style: italic; max-width: 40rem; margin: 0.5rem 0; }
.chat-msg {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.chat-msg p { margin: 0 0 0.6rem; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.chat-msg.assistant {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.chat-msg.thinking { color: var(--ink-soft); }
.chat-msg.error { background: #fff; border: 1px solid #d08b74; color: #b23c17; }
.chat-form {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  padding: 0.6rem 0 calc(0.4rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--paper) 35%);
}
#chat-input {
  flex: 1;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.75rem 1rem;
  resize: none;
  line-height: 1.5;
  max-height: 160px;
}
#chat-input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.chat-send {
  border: none;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-send:disabled { opacity: 0.5; cursor: default; }

/* ---- Futures: imagine the journal continuing, then step into it ------------------------ */
.futures { max-width: 52rem; margin: 0 auto; }

/* Banner shown while you're browsing an imagined future (a sample-like journal). */
.fut-inbanner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between;
  background: var(--paper-deep); border: 1px solid var(--accent-soft); border-radius: var(--radius);
  padding: 0.7rem 1rem; margin-bottom: 1.4rem; color: var(--ink-soft); font-size: 0.9rem;
}
.fut-inbanner-btns { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; }
.fut-back {
  border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; flex-shrink: 0;
}
.fut-reveal {
  border: 1px solid var(--accent); background: var(--card); color: var(--accent); font: inherit; font-weight: 600;
  padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; flex-shrink: 0;
}
.fut-reveal:hover { background: var(--accent); color: #fff; }

/* The reveal — a full-screen audio-show player */
.show-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(120% 120% at 50% 0%, #2a2119 0%, #17120d 70%); }
.show-stage { max-width: 40rem; width: 100%; max-height: 100vh; text-align: center; color: #f4efe6; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.show-tap { color: var(--accent-soft); font-size: clamp(1.5rem, 5vw, 2.2rem) !important; animation: mic-pulse 1.6s ease-in-out infinite; }
.show-year { font-family: var(--font-display); font-size: clamp(3rem, 12vw, 6rem); line-height: 1; color: var(--accent-soft); opacity: 0.9; }
.show-text { font-family: var(--font-display); font-size: clamp(1.3rem, 4vw, 2rem); line-height: 1.4; margin: 1.4rem auto 1.6rem; max-width: 34rem; max-height: 48vh; overflow-y: auto; cursor: pointer; }
.show-fade { animation: show-in 0.6s ease; }
@keyframes show-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.show-controls { display: flex; gap: 0.8rem; justify-content: center; }
.show-controls button { font: inherit; border-radius: 999px; padding: 0.55rem 1.4rem; cursor: pointer; border: 1px solid rgba(244,239,230,0.35); background: transparent; color: #f4efe6; }
.show-controls #show-toggle { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.show-voice { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center; margin-top: 1.2rem; font-size: 0.8rem; color: rgba(244,239,230,0.7); }
.show-voice select { font: inherit; font-size: 0.8rem; color: #f4efe6; background: rgba(255,255,255,0.08); border: 1px solid rgba(244,239,230,0.25); border-radius: 8px; padding: 0.3rem 0.5rem; max-width: 12rem; }

/* Bucket list */
.fut-bucket { margin: 0 0 1.5rem; }
.bucket-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.bucket-item { display: flex; align-items: center; gap: 0.6rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.5rem 0.55rem 0.85rem; }
.bucket-item span { flex: 1; line-height: 1.4; }
.bucket-del { border: none; background: transparent; color: var(--ink-soft); font-size: 1.1rem; cursor: pointer; width: 1.7rem; height: 1.7rem; border-radius: 50%; flex-shrink: 0; }
.bucket-del:hover { color: #b3261e; background: var(--paper-deep); }
.bucket-empty { color: var(--ink-soft); font-style: italic; }
.bucket-add { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.bucket-add input { flex: 1; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1rem; }
.bucket-add input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.bucket-addbtn { border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer; }
.bucket-fulfill { display: inline-block; }

/* Composer */
.fut-title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; margin: 0 0 0.3rem; }
.fut-lead { color: var(--ink-soft); max-width: 42rem; line-height: 1.55; margin: 0 0 1rem; }
.fut-nudge {
  width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 1rem; resize: vertical; line-height: 1.5;
}
.fut-nudge:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.fut-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 0.9rem; }
.fut-horizons { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.fut-h { border: none; background: var(--card); color: var(--ink-soft); font: inherit; font-size: 0.85rem; padding: 0.5rem 1rem; cursor: pointer; }
.fut-h.active { background: var(--ink); color: var(--paper); }
.fut-count { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--ink-soft); }
.fut-count input {
  width: 3.4rem; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.5rem; text-align: center;
}
.fut-count input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.fut-go {
  border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  padding: 0.6rem 1.4rem; border-radius: 999px; cursor: pointer;
}
.fut-interview { border: 1px solid var(--accent); background: var(--card); color: var(--accent); font: inherit; font-weight: 600; font-size: 0.85rem; padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer; margin-left: 0.3rem; }
.fut-interview:hover { background: var(--accent); color: #fff; }
.memoir-handsfree-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.fut-go:disabled { opacity: 0.5; cursor: default; }
.fut-status { margin-top: 1rem; color: var(--ink-soft); font-size: 0.9rem; }
.fut-status.working::before { content: "◷ "; }
.fut-status.error { color: var(--accent); }

/* Gallery of futures you've made — open one to step into it */
.fut-gallery { margin-top: 0.4rem; }
.fut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.fut-card-wrap { position: relative; }
.fut-card {
  width: 100%; display: flex; align-items: center; gap: 0.85rem; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.85rem 1rem; cursor: pointer; font: inherit; color: var(--ink);
}
.fut-card:hover { border-color: var(--accent-soft); }
.fut-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fut-card-year {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--accent);
  flex-shrink: 0; min-width: 3rem;
}
.fut-card-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fut-card-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fut-card-tag { font-size: 0.78rem; color: var(--ink-soft); }
.fut-card-tag.fut-gen { color: var(--accent); }
.fut-card-tag.fut-err { color: var(--accent); }
.fut-card.fut-generating { border-style: dashed; animation: fut-pulse 1.6s ease-in-out infinite; }
.fut-card.fut-error { border-color: var(--accent-soft); }
@keyframes fut-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
.fut-empty { color: var(--ink-soft); font-style: italic; }

/* ---- People & Animals: the entity registry -------------------------------------------- */
.entities { max-width: 52rem; margin: 0 auto; }
.ent-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ent-title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; margin: 0; }
/* Header actions (Interview · Select · Scan): quiet outline buttons on one row — secondary to the list. */
.ent-scan { border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 500; padding: 0.35rem 0.8rem; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ent-scan:hover { border-color: var(--accent-soft); color: var(--accent); }
.ent-scan:disabled { opacity: 0.6; cursor: default; }
.ent-scan.ent-scan-on { background: var(--accent); border-color: var(--accent); color: #fff; } /* Done, while selecting */
.ent-status { margin: 0.8rem 0; font-size: 0.9rem; color: var(--ink-soft); }
.ent-status.working::before { content: "◷ "; }
.ent-status.ok { color: #3a7d44; }
.ent-status.error { color: #b3261e; }
.ent-empty { color: var(--ink-soft); font-style: italic; margin-top: 1rem; }
.ent-onboard { display: block; width: 100%; margin: 0.2rem 0 0.6rem; border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.95rem; padding: 0.7rem 1rem; border-radius: 10px; cursor: pointer; text-align: left; }
.ent-onboard:hover { filter: brightness(1.05); }
.ent-needs { display: block; width: 100%; margin: 0.2rem 0 0.8rem; border: 1px solid rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.08); color: var(--accent); font: inherit; font-weight: 600; font-size: 0.9rem; padding: 0.6rem 0.9rem; border-radius: 10px; cursor: pointer; text-align: left; }
/* Onboarding overlay — the live checklist + names */
.ob-card { max-width: 34rem; text-align: left; }
.ob-title { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 0.3rem; text-align: center; }
.ob-lead { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; margin: 0 0 1rem; text-align: center; }
.ob-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.ob-item { display: flex; align-items: baseline; gap: 0.6rem; font-size: 1rem; color: var(--ink-soft); }
.ob-item.ob-ok { color: var(--ink); }
.ob-check { width: 1.2rem; flex-shrink: 0; color: var(--ink-soft); font-weight: 700; }
.ob-item.ob-ok .ob-check { color: #3a7d44; }
.ob-label { flex-shrink: 0; }
.ob-val { color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.ob-names-wrap { border-top: 1px solid var(--line); padding-top: 0.7rem; margin-bottom: 0.6rem; }
.ob-names-title { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.ob-names { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.ob-names-none { color: var(--ink-soft); font-style: italic; font-size: 0.85rem; }
.ob-chip { background: var(--accent-soft); color: var(--paper); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.82rem; animation: show-in 0.4s ease; }
#ob-stop { color: var(--ink-soft); border: 1px solid var(--line); background: var(--card); font: inherit; border-radius: 999px; padding: 0.5rem 1.2rem; cursor: pointer; }
.ent-needs:hover { background: rgba(var(--accent-rgb), 0.14); }
.ent-card-self { border-color: var(--accent); }
/* Editable name heading on a name's page — looks like a title, becomes clearly editable on focus. */
.ent-rename { font-family: var(--font-display); font-size: 2rem; font-weight: 400; line-height: 1.1; color: var(--ink);
  width: 100%; border: none; border-bottom: 1px dashed transparent; background: transparent; padding: 0.1rem 0; margin: 0.2rem 0; }
.ent-rename:hover { border-bottom-color: var(--line); }
.ent-rename:focus { outline: none; border-bottom-color: var(--accent); }
.ent-rename-hint { font-size: 0.72rem; color: var(--ink-soft); }
.ent-singles-toggle { display: block; margin: 1rem 0 0; border: none; background: none; color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.3rem 0; }
.ent-singles-toggle:hover { text-decoration: underline; }
.ent-kind { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--ink-soft); margin: 1.4rem 0 0.6rem; }
.ent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; }
.ent-card-wrap { position: relative; }
.ent-card { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 3rem 0.7rem 0.9rem; cursor: pointer; font: inherit; color: var(--ink); }
/* × delete: a full-height tap strip on the card's right edge (≥44px wide), separated by a hairline. */
.ent-card-del { position: absolute; top: 0; right: 0; bottom: 0; width: 2.75rem; display: flex; align-items: center; justify-content: center; z-index: 2; border: none; border-left: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; background: transparent; color: var(--ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: 0.7; }
.ent-card-del:hover, .ent-card-del:active { opacity: 1; color: #b3261e; background: rgba(179, 38, 30, 0.08); }
.ent-card:hover { border-color: var(--accent-soft); }
.ent-name { font-weight: 600; }
.ent-aka { font-size: 0.78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-flag { font-size: 0.74rem; color: #b3261e; white-space: nowrap; }
.ent-card-flag { border-color: rgba(179, 38, 30, 0.4); }
/* A name with no description of your own yet — dashed, with a small note, so the empty ones stand out. */
.ent-card-empty { border-style: dashed; border-color: var(--accent-soft); background: transparent; }
.ent-need { font-size: 0.8rem; color: var(--accent); }
.ent-needs-key { font-weight: 400; opacity: 0.8; }
.ent-draft { font-size: 0.74rem; color: #b3261e; white-space: nowrap; }
/* Select mode (batch delete): tap cards to pick; a bar pinned to the bottom holds the actions. */
.ent-selbar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.ent-selcount { font-weight: 600; font-size: 0.9rem; margin-right: auto; }
.ent-sellink { border: none; background: none; color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.2rem 0.3rem; }
.ent-sel-del { margin: 0 0 0 auto; }
.ent-sel-del:disabled { opacity: 0.45; cursor: default; }
.ent-pick { font-size: 1.05rem; color: var(--accent); line-height: 1; }
.ent-selectmode .ent-card { padding-right: 0.9rem; }
.ent-card-picked { border-color: var(--accent); border-style: solid; background: rgba(var(--accent-rgb), 0.08); }
body.ent-selecting:has(#people-view:not([hidden])) #next-step { display: none !important; }
.ent-flag-banner { background: rgba(179, 38, 30, 0.1); border: 1px solid rgba(179, 38, 30, 0.4); color: #b3261e; border-radius: var(--radius); padding: 0.6rem 0.9rem; font-size: 0.9rem; margin: 0.5rem 0; }
.ent-count { margin-left: auto; font-size: 0.8rem; color: var(--paper); background: var(--accent-soft); border-radius: 999px; padding: 0.05rem 0.5rem; min-width: 1.5rem; text-align: center; }
/* On phones: tidy single-column rows (not chunky rounded boxes), smaller action buttons. */
@media (max-width: 640px) {
  .ent-grid { grid-template-columns: 1fr; gap: 0.4rem; }
  .ent-card { border-radius: 10px; padding: 0.55rem 3rem 0.55rem 0.8rem; }
  .ent-card-del { border-radius: 0 10px 10px 0; }
  .ent-head { flex-wrap: wrap; gap: 0.4rem; }
  .ent-head .act-actions { gap: 0.35rem; }
  .ent-scan { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
  .ent-title { font-size: 1.6rem; }
}
.ent-back { border: none; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0.2rem 0; margin-bottom: 0.6rem; }
.ent-profile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
.ent-canon { font-family: var(--font-display); font-size: 1.8rem; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 0.2rem 0; }
.ent-canon:focus { outline: none; border-bottom-color: var(--accent); }
.ent-kindsel, .ent-field input, #ent-merge-sel { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.6rem; }
.ent-note-input { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; resize: vertical; line-height: 1.5; width: 100%; }
.ent-note-input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.ent-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--ink-soft); }
.ent-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.2rem; }
.ent-save { border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 600; padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; }
.ent-merge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--ink-soft); }
.ent-merge button, .ent-del { border: 1px solid var(--line); background: none; color: var(--ink-soft); font: inherit; font-size: 0.82rem; padding: 0.4rem 0.85rem; border-radius: 999px; cursor: pointer; }
.ent-del { margin-left: auto; }
.ent-del:hover { border-color: var(--accent-soft); color: #b3261e; }
/* Hands-free interview overlay */
.iv-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(26,22,18,0.55); padding: 1rem; }
.iv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; width: min(30rem, 100%); text-align: center; }
.iv-name { font-family: var(--font-display); font-size: 2rem; color: var(--accent); margin-bottom: 0.5rem; }
.iv-profile { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; margin: 0.2rem 0 0.6rem; text-align: left; max-height: 30vh; overflow-y: auto; }
.iv-profile p { margin: 0 0 0.5rem; }
.iv-profile-working { color: var(--ink-soft); font-style: italic; }
.iv-q { font-size: 1.15rem; line-height: 1.5; color: var(--ink); min-height: 2.5em; }
.iv-interim { color: var(--ink-soft); font-style: italic; margin-top: 0.6rem; min-height: 1.2em; }
.iv-a { color: var(--ink); margin-top: 0.4rem; font-weight: 600; }
.iv-saved { color: #3a7d44; font-size: 0.85rem; margin-top: 0.5rem; min-height: 1.1em; }
.iv-actions { display: flex; justify-content: center; gap: 0.8rem; margin-top: 1.2rem; }
.iv-actions button { font: inherit; border-radius: 999px; padding: 0.5rem 1.3rem; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.iv-actions #iv-done { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.iv-actions #iv-stop { color: var(--ink-soft); }
.iv-input-wrap { margin-top: 0.8rem; }
.iv-input-wrap textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.8rem; resize: vertical; line-height: 1.5; }
.iv-input-wrap textarea:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.iv-voice { display: flex; align-items: center; gap: 0.5rem; justify-content: center; margin-top: 0.9rem; font-size: 0.82rem; color: var(--ink-soft); }
.iv-voice select { font: inherit; font-size: 0.82rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.5rem; max-width: 14rem; }
.iv-voicestatus { font-size: 0.72rem; color: var(--ink-soft); margin: 0.4rem 0 0; min-height: 1em; }
/* Voice memory capture */
.mv-card { transition: background 0.25s; }
.mv-flash { animation: mv-flash 0.7s ease; }
@keyframes mv-flash { 0% { background: var(--accent); } 60% { background: var(--accent-soft); } 100% { background: var(--card); } }
.mv-cat-row { display: flex; align-items: center; gap: 0.5rem; justify-content: center; margin-bottom: 0.8rem; }
.mv-cat-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.mv-cat { font: inherit; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.6rem; }
.mv-form { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; }
.mv-field { display: flex; gap: 0.6rem; font-size: 0.95rem; }
.mv-field span { width: 4rem; color: var(--ink-soft); font-size: 0.8rem; flex-shrink: 0; align-self: center; }
.mv-field b { color: var(--ink); font-weight: 600; border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
.mv-field b.mv-just { animation: mv-just 0.7s ease; }        /* pulse a field the moment it fills as you talk */
@keyframes mv-just { 0% { background: var(--accent); color: #fff; } 70% { background: var(--accent-soft); color: var(--ink); } 100% { background: transparent; } }

/* ---- Live capture: colour the text as you write, list what was found ------------------------ */
/* A transparent textarea sits on top of a metric-matched backdrop that paints the highlights. */
.cap-wrap { position: relative; width: 100%; }
.cap-input { position: relative; z-index: 1; display: block; width: 100%; box-sizing: border-box; background: transparent !important; }
.cap-marks {
  position: absolute; inset: 0; z-index: 0;
  box-sizing: border-box; overflow: hidden; pointer-events: none;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  color: transparent; background: var(--card);
}
.cap-marks mark { color: transparent; border-radius: 3px; }
.cap-marks mark.cap-name { background: rgba(214, 158, 46, 0.30); box-shadow: inset 0 -2px 0 rgba(214, 158, 46, 0.7); }   /* names — amber */
.cap-marks mark.cap-fact { background: rgba(64, 155, 155, 0.26); box-shadow: inset 0 -2px 0 rgba(64, 155, 155, 0.65); }  /* answers — teal */

.cap-found { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.55rem 0 0.2rem; }
.cap-found[hidden] { display: none; }
.cap-found-label { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.15rem; }
.cap-chip { font-size: 0.85rem; padding: 0.16rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); animation: cap-pop 0.35s ease; }
.cap-chip-name { border-color: rgba(214, 158, 46, 0.8); }
.cap-chip-when, .cap-chip-where, .cap-chip-category, .cap-chip-subject { border-color: rgba(64, 155, 155, 0.8); }
.cap-chip.cap-hot { cursor: pointer; background: rgba(214, 158, 46, 0.12); }
.cap-chip.cap-hot:hover { background: rgba(214, 158, 46, 0.28); border-color: rgba(214, 158, 46, 1); }
@keyframes cap-pop { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---- Entity page: BROWSE (paragraph + facts) vs EDIT (name + facts form + notes) --------------- */
.ent-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.ent-edit-toggle { font: inherit; font-size: 0.95rem; color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 999px; padding: 0.4rem 1rem; cursor: pointer; }
.ent-edit-toggle:hover { background: var(--accent-soft); }
.ent-editing .ent-edit-toggle { color: #fff; background: var(--accent); }

/* Browse: a clean "Label: value" list of what's known. */
.ent-facts-view { margin: 0.6rem 0 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ent-facts-view > div { display: flex; gap: 0.6rem; }
.ent-facts-view dt { flex: 0 0 6.5rem; color: var(--ink-soft); font-size: 0.9rem; }
.ent-facts-view dd { margin: 0; color: var(--ink); font-weight: 500; }

/* Edit: the game — chips that fill in as you talk (extracted invisibly), tap to correct. */
.cap-lead { font-size: 0.98rem; color: var(--ink); margin: 0.6rem 0 0.6rem; }
.fact-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.fact-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 0.95rem; cursor: pointer; }
.fact-chip .fc-check { color: var(--ink-soft); }
.fact-chip .fc-k { font-weight: 600; }
.fact-chip .fc-v { color: var(--ink-soft); font-weight: 400; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-chip.filled { border-color: rgba(64, 155, 155, 0.7); background: rgba(64, 155, 155, 0.10); animation: cap-pop 0.35s ease; }
.fact-chip.filled .fc-check { color: rgb(40, 140, 120); }
.fact-chip.editing { padding: 0.25rem 0.5rem; }
.fact-chip .fc-input { font: inherit; font-size: 0.95rem; border: none; background: transparent; color: var(--ink); min-width: 6rem; outline: none; }
/* Prominent, always-visible Delete on a name's Edit page (deleting used to be buried in a fold). */
.ent-del-big { display: block; width: 100%; margin: 1.4rem 0 0.4rem; font: inherit; font-size: 0.95rem; color: #b3402f; background: none; border: 1px solid rgba(179, 64, 47, 0.4); border-radius: var(--radius); padding: 0.7rem 1rem; cursor: pointer; }
.ent-del-big:hover { border-color: #b3402f; background: rgba(179, 64, 47, 0.07); }
.mv-phase { font-size: 1.05rem; color: var(--ink); min-height: 1.4em; margin-bottom: 0.4rem; }
.iv-hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.8rem; }
.ent-note-existing { margin-bottom: 0.6rem; }
.ent-detail-body { display: flex; flex-direction: column; gap: 0.6rem; }
.ent-facts-list { list-style: none; margin: 0.2rem 0 1rem; padding: 0.7rem 0.9rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 0.35rem; }
.ent-fact { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.92rem; color: var(--ink-soft); }
.ent-fact.ok { color: var(--ink); }
.ent-fact .ob-check { width: 1.1rem; flex-shrink: 0; font-weight: 700; }
.ent-fact.ok .ob-check { color: #3a7d44; }
.ent-fact .ob-label { flex-shrink: 0; min-width: 5.5rem; color: var(--ink-soft); font-size: 0.8rem; }
.ent-fact .ob-val { color: var(--accent); font-weight: 600; }
.ent-summary { margin: 1rem 0; }
.ent-summary-body { background: var(--paper-deep); border-radius: var(--radius); padding: 0.9rem 1.1rem; line-height: 1.6; color: var(--ink); }
.ent-summary-body p { margin: 0 0 0.6rem; }
.ent-summary-body p:last-child { margin-bottom: 0; }
.ent-summary-refresh { border: none; background: none; color: var(--ink-soft); font: inherit; font-size: 0.8rem; cursor: pointer; margin-top: 0.4rem; }
.ent-summary-refresh:hover { color: var(--accent); }
.ent-ask { margin: 1.2rem 0; }
.ent-ask-form { display: flex; gap: 0.5rem; }
#ent-ask-input { flex: 1; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 1rem; }
#ent-ask-input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.ent-ask-btn { border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: 999px; cursor: pointer; }
.ent-ask-answer { margin-top: 0.8rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; line-height: 1.6; color: var(--ink); }
.ent-ask-answer p { margin: 0 0 0.6rem; }
.ent-ask-working { color: var(--ink-soft); }
.ent-ask-err { color: #b3261e; }
.ent-ask-save { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font: inherit; font-size: 0.82rem; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer; margin-top: 0.3rem; }
.ent-ask-save:hover { border-color: var(--accent-soft); color: var(--ink); }
.ent-mentions { display: flex; flex-direction: column; gap: 2px; }
.ent-mention { display: grid; grid-template-columns: 6rem 1fr; gap: 0.7rem; align-items: baseline; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.8rem; cursor: pointer; font: inherit; color: var(--ink); }
.ent-mention:hover { border-color: var(--accent-soft); }
.ent-when { font-size: 0.8rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.ent-snip { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .ent-mention { grid-template-columns: 4.5rem 1fr; } }
.fut-card-del {
  position: absolute; top: 0.4rem; right: 0.4rem; width: 1.75rem; height: 1.75rem; line-height: 1; z-index: 2;
  border: none; border-radius: 50%; background: transparent; color: var(--ink-soft);
  font-size: 1.1rem; cursor: pointer; opacity: 0.5;
}
.fut-card-del:hover { opacity: 1; color: var(--accent); background: var(--paper-deep); }

@media (max-width: 640px) {
  .week-day-header { flex-direction: column; }
  /* Tab bar wraps to its own full-width row; text tabs share the space, gear stays put. */
  .app-bar-inner { gap: 0.6rem; }
  /* Six tabs — keep them on ONE row (never let the gear wrap to its own line). Tighten spacing so
     they fit a 360px phone; if a narrower screen can't hold them, the row scrolls sideways. */
  .mode-nav { width: 100%; max-width: 100%; gap: 0; padding: 0.2rem; flex-wrap: nowrap; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 999px; box-sizing: border-box; }
  .mode-nav::-webkit-scrollbar { display: none; }
  .mode-btn { flex: 0 0 auto; min-width: 0; padding: 0.38rem 0.3rem; font-size: 0.72rem; white-space: nowrap; }
  .mode-more { flex: 0 0 auto; }
  #more-btn { padding-left: 0.4rem; padding-right: 0.4rem; }
  /* The sideways-scrolling tab row clips anything that pokes out of it — so here the More menu is
     placed against the screen instead (main.js sets its top/right under the More button). */
  .more-menu { position: fixed; }
  .mode-btn-gear { flex: 0 0 auto; padding: 0.38rem 0.4rem; font-size: 0.92rem; }
}

/* Live summarization progress — a fixed toast showing the summary climbing the levels. */
.summary-progress {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(92vw, 560px);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  background: rgba(28, 24, 20, 0.92);
  color: #f4efe6;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  font-size: 0.82rem;
  line-height: 1.3;
  backdrop-filter: blur(6px);
}
.summary-progress[hidden] { display: none; }
.summary-progress .sp-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.summary-progress .sp-now { font-weight: 600; }
.summary-progress .sp-level {
  opacity: 0.7;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.summary-progress .sp-count { opacity: 0.6; white-space: nowrap; }
.summary-progress .sp-spinner {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid rgba(244, 239, 230, 0.3);
  border-top-color: #f4efe6;
  animation: sp-spin 0.7s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

@media (prefers-color-scheme: light) {
  .summary-progress { background: rgba(38, 32, 26, 0.94); }
}

/* ---- Summarization graph -------------------------------------------------------------- */
#graph-view { max-width: 1100px; }
.graph-view {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Tap-a-node quick preview */
.graph-pop {
  position: absolute;
  z-index: 5;
  width: min(15rem, 70vw);
  padding: 0.7rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.graph-pop-name { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; color: var(--ink); }
.graph-pop-brief { margin-top: 0.3rem; font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); }
.graph-pop-brief.muted { font-style: italic; }
.graph-pop-open {
  margin-top: 0.6rem; padding: 0.35rem 0.8rem; border: none; border-radius: 999px;
  background: var(--accent); color: var(--paper); font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.graph-pop-open:hover { filter: brightness(1.05); }
.graph-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}
.graph-title { font-family: var(--font-display); font-size: 1.15rem; }
.graph-legend { display: flex; gap: 0.7rem; margin-left: auto; font-size: 0.72rem; color: var(--ink-soft); }
.graph-legend .gl { display: inline-flex; align-items: center; gap: 0.3rem; }
.graph-legend .gl::before {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--paper-deep); border: 1px solid var(--line);
}
.graph-legend .gl.dirty::before { background: var(--accent-soft); border-color: var(--accent); }
.graph-legend .gl.active::before { background: var(--accent); border-color: var(--accent); }
.graph-controls { display: flex; gap: 0.35rem; }
.gc-btn {
  min-width: 2rem; height: 2rem; padding: 0 0.6rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink-soft);
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.gc-btn.gc-reset { font-size: 0.8rem; }
.gc-btn:hover { color: var(--ink); border-color: var(--accent-soft); }
.graph-viewport {
  position: relative;
  height: min(72vh, 640px);
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(26, 22, 18, 0.04) 1px, transparent 1px) 0 0 / 26px 26px;
  touch-action: none;
  cursor: grab;
}
.graph-viewport:active { cursor: grabbing; }
.graph-stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.graph-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-soft); }

/* Full-screen graph (via the ⤢ button) — fills the display, viewport takes all remaining height. */
.graph-view:fullscreen, .graph-view:-webkit-full-screen {
  max-width: none; height: 100vh; border-radius: 0; background: var(--paper);
}
.graph-view:fullscreen .graph-viewport, .graph-view:-webkit-full-screen .graph-viewport {
  height: auto; flex: 1 1 auto;
}

.graph-svg { display: block; width: 100%; height: 100%; }
.graph-svg .gedge { fill: none; stroke: var(--line); stroke-width: 1.5; }
.graph-svg .gedge.dirty { stroke: var(--accent-soft); }
.graph-svg .gedge.active { stroke: var(--accent); stroke-width: 2.25; }
.graph-svg .gnode circle { fill: var(--paper-deep); stroke: var(--line); stroke-width: 1.5; transition: fill 0.2s; }
.graph-svg .gnode.clean circle { opacity: 0.55; }
.graph-svg .gnode.spine circle { opacity: 1; }
.graph-svg .gnode.dirty circle { fill: var(--accent-soft); stroke: var(--accent); opacity: 1; }
.graph-svg .gnode.active circle { fill: var(--accent); stroke: var(--accent); opacity: 1; animation: gpulse 1.1s ease-in-out infinite; }
.graph-svg .gnode.bubble circle { fill: var(--card); stroke: var(--line); }
.graph-svg .gnode.bubble.dirty circle { fill: var(--accent-soft); stroke: var(--accent); }
.graph-svg .glabel { fill: var(--ink-soft); font-family: var(--font-body); font-size: 13px; text-anchor: middle; }
.graph-svg .glabel-lead { stroke: var(--line); stroke-width: 1; }
/* Leaf names appear only when you hover the dot, so a crowded row stays clean. */
.graph-svg .glabel.hoveronly { opacity: 0; pointer-events: none; }
.graph-svg .gnode:hover .glabel.hoveronly { opacity: 1; fill: var(--ink); font-weight: 600; }
.graph-svg .gnode:hover circle { stroke: var(--accent); }
.graph-svg .gnode.spine .glabel { fill: var(--ink); font-weight: 600; }
.graph-svg .gcount { fill: var(--ink); font-family: var(--font-body); font-size: 13px; font-weight: 600; text-anchor: middle; }
.graph-svg .grow-label { fill: rgba(74, 67, 60, 0.55); font-family: var(--font-body); font-size: 12px; text-anchor: start; }
@keyframes gpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Rotate the phone → let the Graph tab use the whole landscape screen. */
@media (orientation: landscape) and (max-height: 700px) {
  #graph-view { max-width: none; }
  .graph-view { border-radius: 10px; }
  .graph-viewport { height: 82vh; }
}

/* "The summary isn't right?" correction box on a leaf page */
.correct-fold > summary { color: var(--ink-soft); }
.correct-input {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.6rem 0.75rem; line-height: 1.5; resize: vertical; min-height: 3rem;
}
.correct-input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.correct-btn {
  margin-top: 0.5rem; padding: 0.5rem 1rem; border: none; border-radius: 999px;
  background: var(--accent); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer;
}
.correct-btn:hover { filter: brightness(1.05); }
.correct-status { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-soft); min-height: 1.1em; }
.correct-status.error { color: #b23b2e; }

/* Guide & about — doc list + in-app reader */
.doc-list { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.doc-open { text-align: left; }
.doc-reader {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.5rem, 3vw, 2rem);
  background: rgba(26, 22, 18, 0.42); backdrop-filter: blur(3px);
}
.doc-panel {
  display: flex; flex-direction: column;
  width: min(720px, 100%); max-height: 90vh;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.doc-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line);
}
.doc-title { font-family: var(--font-display); font-size: 1.15rem; margin-right: auto; }
.doc-copy {
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--ink-soft); font: inherit; font-size: 0.8rem; padding: 0.3rem 0.75rem; cursor: pointer;
}
.doc-copy:hover { color: var(--ink); border-color: var(--accent-soft); }
.doc-close {
  border: none; background: transparent; color: var(--ink-soft);
  width: 2rem; height: 2rem; font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.doc-close:hover { background: var(--paper-deep); color: var(--ink); }
.doc-body { padding: 1rem 1.2rem 1.6rem; overflow: auto; line-height: 1.6; color: var(--ink); }
.doc-body h1 { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; margin: 0.2rem 0 0.8rem; }
.doc-body h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 1.4rem 0 0.5rem; }
.doc-body h3 { font-size: 1.05rem; font-weight: 600; margin: 1rem 0 0.4rem; }
.doc-body p { margin: 0 0 0.85rem; }
.doc-body ul, .doc-body ol { margin: 0 0 0.9rem; padding-left: 1.3rem; }
.doc-body li { margin: 0.2rem 0; }
.doc-body blockquote { margin: 0 0 0.9rem; padding: 0.2rem 0 0.2rem 0.9rem; border-left: 3px solid var(--accent-soft); color: var(--ink-soft); font-style: italic; }
.doc-body code { background: var(--paper-deep); padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.9em; }
.doc-body hr { border: none; border-top: 1px solid var(--line); margin: 1.3rem 0; }
.doc-body a { color: var(--accent); }
.doc-loading { color: var(--ink-soft); text-align: center; padding: 2rem 0; }

/* ---- Sample lives (famous journals, each an isolated journal) ------------------------- */
.sample-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  margin-bottom: 1rem; padding: 0.7rem 0.9rem;
  background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 0.9rem; color: var(--ink-soft);
}
.sample-back {
  border: 1px solid var(--accent); background: var(--card); color: var(--accent);
  border-radius: 999px; padding: 0.3rem 0.85rem; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.sample-back:hover { background: var(--accent); color: var(--paper); }
.sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; }
.sample-card-wrap { position: relative; }
.sample-card {
  display: flex; flex-direction: row; align-items: center; gap: 0.65rem; width: 100%; text-align: left;
  padding: 0.6rem 0.7rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; font: inherit; transition: border-color 0.15s, transform 0.05s;
}
.sample-card:hover { border-color: var(--accent-soft); }
.sample-card:active { transform: translateY(1px); }
.sample-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sample-card:disabled { opacity: 0.5; cursor: default; }
.sample-thumb {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; background: var(--paper-deep); border: 1px solid var(--line);
}
.sample-thumb-mono { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); font-weight: 400; }
img.sample-photo { object-fit: cover; }
.sample-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sample-name { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.15; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.sample-tag { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.sample-del {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.sample-del:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.sample-gen-row { display: flex; gap: 0.5rem; }
.sample-gen-row .settings-input { flex: 1; }
.sample-gen-btn {
  border: 1px solid var(--accent); background: var(--accent); color: var(--paper);
  border-radius: var(--radius); padding: 0 1.1rem; font: inherit; cursor: pointer; white-space: nowrap;
}
.sample-gen-btn:hover { filter: brightness(1.05); }
.sample-gen-btn:disabled { opacity: 0.5; cursor: default; }
.sample-status { margin-top: 0.6rem; font-size: 0.88rem; color: var(--ink-soft); min-height: 1.2em; }
.sample-status.working { color: var(--accent); }
.sample-status.ok { color: var(--accent); }
.sample-status.error { color: #b3261e; }

/* Sample lives are read-only: hide writing/editing affordances (the journal is a fixed artifact). */
.sample-journal .day-actions,
.sample-journal .period-delete,
.sample-journal .period-summarize,
.sample-journal .correct-fold,
.sample-journal .add-mem,
.sample-journal #detail-edit,
.sample-journal #detail-delete { display: none !important; }

/* ---- Places tab: map of a life, with a year slider ------------------------------------ */
/* The view fills the space below the app bar and lays out as [map flexes] + [slider fixed], so the
   slider is ALWAYS visible — including short landscape phone viewports (the old fixed-vh map pushed
   it off-screen). */
/* height is set precisely in JS (fitHeight); this is just a pre-map fallback. */
.places-wrap { display: flex; flex-direction: column; gap: 0.75rem; height: calc(100dvh - 150px); min-height: 200px; }
.places-status { color: var(--ink-soft); text-align: center; padding: 2rem 1rem; line-height: 1.6; margin: auto; }
.places-mapwrap { position: relative; flex: 1 1 auto; min-height: 120px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.places-map { width: 100%; height: 100%; z-index: 1; }
.places-full {
  position: absolute; top: 10px; right: 10px; z-index: 500;
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,253,249,0.92); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(26,22,18,0.18); backdrop-filter: blur(3px);
}
.places-full:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.places-slider { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.3rem; padding: 0 0.2rem; }
/* Real Fullscreen API: the wrap becomes the whole screen. */
.places-wrap:fullscreen { height: 100dvh; background: var(--paper); padding: 0.75rem; gap: 0.6rem; }
/* Faux fullscreen (iOS Safari, which lacks element Fullscreen): fixed overlay. */
.places-wrap.faux-full { position: fixed; inset: 0; z-index: 9998; height: 100dvh; background: var(--paper); padding: 0.75rem; margin: 0; }
.places-year { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent); text-align: center; }
.places-slider input[type="range"] { width: 100%; accent-color: var(--accent); height: 1.6rem; }

/* Photo markers on the map */
.place-marker { display: block; width: 40px; height: 40px; }
.place-marker .pm-photo { display: block; width: 34px; height: 34px; margin: 3px; border-radius: 50%;
  background-size: cover; background-position: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  opacity: 0.55; filter: saturate(0.7); transition: opacity 0.2s, transform 0.2s; }
.place-marker .pm-dot { display: block; width: 16px; height: 16px; margin: 12px; border-radius: 50%;
  background: var(--accent-soft); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.4); opacity: 0.6; }
.place-marker.active .pm-photo, .place-marker.active .pm-dot { opacity: 1; filter: none; transform: scale(1.18); }
.place-marker.active .pm-dot { background: var(--accent); }
.place-pop { font-family: var(--font-body); min-width: 150px; }
.place-pop strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.place-pop-years { font-size: 0.8rem; color: var(--accent); letter-spacing: 0.03em; margin: 0.1rem 0 0.3rem; }
.place-pop-line { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.4; }

.reset-samples { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 0.35rem 0.9rem; font: inherit; font-size: 0.85rem; cursor: pointer; }
.reset-samples:hover { border-color: #b3261e; color: #b3261e; }

/* Location autocomplete on the memory form */
.loc-field { position: relative; }
#entry-location { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; }
#entry-location:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.loc-suggest { position: absolute; left: 0; right: 0; top: calc(100% - 0.2rem); z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.loc-item { display: block; width: 100%; text-align: left; padding: 0.6rem 0.9rem; background: none; border: none;
  border-bottom: 1px solid var(--line); font: inherit; color: var(--ink); cursor: pointer; }
.loc-item:last-child { border-bottom: none; }
.loc-item:hover { background: var(--paper-deep); }
.field-hint.loc-ok { color: var(--accent); }
.place-pop-sv { display: block; width: 240px; max-width: 60vw; height: auto; border-radius: 8px; margin-bottom: 0.4rem; border: 1px solid var(--line); }

.places-slider { position: relative; z-index: 600; }

/* Me: the prompt rolls to the next question as each answer lands. */
@keyframes q-roll { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
.q-roll { animation: q-roll 0.35s ease; }

/* Stories: the "your life now" ladder above a new story's box. */
.life-ladder { margin: 0.2rem 0 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 0.35rem 0.8rem 0.45rem; }
.ladder-head { margin: 0.25rem 0 0.2rem; font-size: 0.78rem; color: var(--ink-soft); }
.ladder-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--line); min-height: 2.4rem; }
.ladder-row:first-of-type { border-top: none; }
.ladder-row.picked { background: rgba(var(--accent-rgb), 0.07); margin: 0 -0.8rem; padding-left: 0.8rem; padding-right: 0.8rem; }
.ladder-cat { flex: 0 0 6.2rem; font-weight: 600; font-size: 0.88rem; }
.ladder-now { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ladder-yrs { color: var(--ink-soft); font-size: 0.8rem; }
.ladder-count { font-size: 0.75rem; color: var(--ink-soft); white-space: nowrap; }
.ladder-me { flex: 1 1 auto; text-align: left; border: none; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer; }
.ladder-add { flex: 0 0 auto; border: 1px solid var(--line); background: var(--paper); color: var(--accent); font: inherit; font-size: 0.8rem; font-weight: 600; border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; white-space: nowrap; }
.ladder-add:hover { border-color: var(--accent-soft); }
@media (max-width: 640px) {
  .ladder-cat { flex-basis: 5.6rem; font-size: 0.82rem; }
  .ladder-count { display: none; }
  .ladder-now { white-space: normal; font-size: 0.84rem; line-height: 1.3; } /* wrap, don't truncate */
  .ladder-add { padding: 0.28rem 0.6rem; }
}
/* A prompt that's a real question (Me's next question, a Stories ladder thread) reads as a sentence. */
.write-prompt.is-question { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--ink); line-height: 1.3; }

/* A Future / sample life keeps the SAME tab bar as your journal (nothing jumps when you switch):
   the writing tabs — Journal, Me, Stories — are just grayed out and can't be tapped. More stays. */
.sample-journal .mode-btn[data-mode="diary"],
.sample-journal .mode-btn[data-mode="memoir"],
.sample-journal .mode-btn[data-mode="me"],
.more-item:disabled { opacity: 0.35; pointer-events: none; cursor: default; }
.more-item:disabled:hover { background: transparent; color: var(--ink); }

/* The Guide sits at the bottom of the More menu, set off by a hairline. */
.more-guide { border-top: 1px solid var(--line) !important; margin-top: 0.15rem; }
/* First run: a one-line pointer to the guide under an empty Journal. */
.first-help { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.first-help button { border: none; background: none; padding: 0; font: inherit; color: var(--accent); font-weight: 600; cursor: pointer; }

/* A Future is read-only: no "Add your take" box on its pages. */
.sample-journal .node-comment { display: none !important; }

/* In a Future: what this is, from when to when, and the prompt it was imagined from. */
.future-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; margin: 0 0 1rem; padding: 0.6rem 0.9rem; border: 1px solid rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.07); border-radius: var(--radius); font-size: 0.88rem; }
.fb-what { font-weight: 600; color: var(--accent); }
.fb-prompt { flex: 1 1 12rem; font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.fb-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.fb-back, .fb-reveal { border: none; background: none; padding: 0; font: inherit; color: var(--accent); font-weight: 600; cursor: pointer; white-space: nowrap; }
/* The journal's title stays on one line on phones (a long Future name ends in …). */
@media (max-width: 640px) {
  .app-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .title-wrap { min-width: 0; max-width: 100%; }
}

/* Futures page: one list to switch between your journal (now) and each Future, then a compact
   "New future". Minimal reading — the rows say where you are and what a tap does. */
.fut-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.2rem 0 1.4rem; }
.fut-row-wrap { display: flex; align-items: stretch; gap: 0.3rem; }
.fut-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.7rem; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; font: inherit; color: var(--ink); cursor: pointer; }
.fut-row:hover { border-color: var(--accent-soft); }
.fut-row.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.07); }
.fr-year { flex: 0 0 3.2rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--accent); }
.fr-now .fr-year { font-family: inherit; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.fr-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-yrs { color: var(--ink-soft); font-size: 0.85rem; }
.fr-tag { flex: 0 0 auto; font-size: 0.82rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.fr-here { color: var(--ink); }
.fut-err { color: #b3261e; }
.fr-icon { flex: 0 0 2.6rem; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); color: var(--ink-soft); font: inherit; cursor: pointer; }
.fr-icon:hover { color: var(--accent); border-color: var(--accent-soft); }
.fr-del:hover { color: #b3261e; }
.fut-new { border-top: 1px solid var(--line); padding-top: 1rem; margin-bottom: 1.2rem; }
.fut-new-title { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 0; cursor: pointer; list-style: none; color: var(--accent); }
.fut-new-title::-webkit-details-marker { display: none; }
.fut-new[open] .fut-new-title { margin-bottom: 0.6rem; }
.fut-new .fut-nudge { width: 100%; box-sizing: border-box; min-height: 2.6rem; resize: vertical; }
.fut-new .fut-count { display: inline-flex; align-items: center; gap: 0.3rem; }
.fut-new .fut-count input { width: 3.4rem; }
.fut-new .fut-interview { margin-top: 0.7rem; border: none; background: none; padding: 0; font: inherit; font-size: 0.85rem; color: var(--accent); cursor: pointer; }
.fut-bucket-fold > summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 0.6rem; }
@media (max-width: 640px) {
  .fut-row { padding: 0.6rem 0.7rem; gap: 0.5rem; }
  .fr-year { flex-basis: 2.8rem; font-size: 1.1rem; }
  .fr-yrs { display: none; }
}

/* Stories ladder as timelines: [＋ before] [story] [story] … [NOW] per thread, oldest → newest. */
.life-ladder .ladder-row { display: block; padding: 0.55rem 0 0.6rem; min-height: 0; }
.life-ladder .ladder-row.picked { margin: 0 -0.8rem; padding-left: 0.8rem; padding-right: 0.8rem; }
.life-ladder .ladder-cat { display: block; flex: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.35rem; }
.lt-track { position: relative; display: flex; align-items: stretch; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; padding: 0.1rem 0.05rem 0.2rem; }
.lt-track::-webkit-scrollbar { display: none; }
.lt-track::before { content: ""; position: absolute; left: 0.3rem; right: 0.3rem; top: 50%; border-top: 1px dashed var(--line); z-index: 0; } /* the time line behind the blocks */
.lt-block { position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; min-width: 5.5rem; max-width: 10rem; min-height: 3.2rem; padding: 0.4rem 0.65rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font: inherit; text-align: left; color: var(--ink); }
.lt-name { font-size: 0.85rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lt-yrs { font-size: 0.72rem; color: var(--ink-soft); }
.lt-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.lt-add { min-width: 3.2rem; align-items: center; border-style: dashed; border-color: var(--accent-soft); background: var(--paper); color: var(--accent); font-size: 1.3rem; cursor: pointer; }
.lt-add:hover { background: rgba(var(--accent-rgb), 0.08); }
.lt-story { cursor: pointer; }
.lt-story:hover { border-color: var(--accent-soft); }
.lt-now { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.lt-missing { cursor: pointer; border-style: dashed; }
.lt-missing .lt-name { font-weight: 500; color: var(--accent); }
.lt-refile { margin-left: 0.6rem; border: none; background: none; padding: 0; font: inherit; font-size: 0.72rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; }

.cap-more { border: none; background: none; padding: 0.2rem 0.4rem; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--accent); cursor: pointer; }


/* ============================================================================================
   MODERN look (⚙ → Look). Classic stays the default; this only overrides tokens and a few shapes.
   ============================================================================================ */
html.theme-modern {
  --ink: #111827;
  --ink-soft: #6b7280;
  --paper: #ffffff;
  --paper-deep: #f3f4f6;
  --card: #ffffff;
  --accent: #4f46e5;
  --accent-soft: #a5b4fc;
  --accent-rgb: 79, 70, 229;
  --line: rgba(17, 24, 39, 0.10);
  --shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 8px 24px rgba(17, 24, 39, 0.06);
  --radius: 12px;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.theme-modern .grain { display: none; }
html.theme-modern body { -webkit-font-smoothing: antialiased; }
/* Headings: tight sans instead of the display serif. */
html.theme-modern .app-title { font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.35rem, 4vw, 1.75rem); }
html.theme-modern .node-name, html.theme-modern .write-title, html.theme-modern .ent-title,
html.theme-modern .fut-title, html.theme-modern .fut-new-title, html.theme-modern h2 { font-weight: 700; letter-spacing: -0.02em; }
html.theme-modern .node-word { font-weight: 700; letter-spacing: -0.01em; }
/* The phrase stays a reading line — italic serif, like Classic — so each page keeps its hierarchy. */
html.theme-modern .node-phrase { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.3rem; color: var(--ink-soft); letter-spacing: 0; }
html.theme-modern .write-prompt:not(.is-question) { letter-spacing: 0.04em; }
html.theme-modern .write-prompt.is-question { font-weight: 600; letter-spacing: -0.01em; }
/* The header: plain white with a hairline, no heavy shadow. */
html.theme-modern .app-bar { box-shadow: none; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
/* Tabs: a light segmented control; the active tab is a white pill with a soft shadow. */
html.theme-modern .mode-nav { background: var(--paper-deep); border-color: transparent; }
html.theme-modern .mode-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12); }
html.theme-modern .mode-btn:disabled { opacity: 0.35; }
/* Flat cards: hairline borders, no drop shadows on the small ones. */
html.theme-modern .ent-card, html.theme-modern .fut-row, html.theme-modern .lt-block,
html.theme-modern .fact-chip, html.theme-modern .cap-chip { box-shadow: none; }
html.theme-modern .rep-tab.active { background: var(--ink); color: #fff; }
@media (max-width: 640px) { html.theme-modern .mode-btn { font-size: 0.7rem; } } /* Inter runs a hair wider */

/* Modern, readable: the INTERFACE is Inter, but the words you READ — summaries, transcripts, stories,
   profiles, answers — are set in a text serif, a touch larger with generous leading, at a
   comfortable measure. (Classic reads well because of exactly this contrast.) */
html.theme-modern .node-summary, html.theme-modern .rep-body, html.theme-modern .entry-view p:not(.node-word):not(.node-phrase),
html.theme-modern .node-fold-body, html.theme-modern .verbatim, html.theme-modern .node-verbatim,
html.theme-modern .ent-summary, html.theme-modern .ent-note-existing, html.theme-modern .ent-ask-answer,
html.theme-modern .node-outline-body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.09rem;
  line-height: 1.72;
  color: #1f2937;
}
html.theme-modern .node-summary, html.theme-modern .rep-body { max-width: 40rem; }
html.theme-modern .node-summary p, html.theme-modern .rep-body p { margin: 0 0 1rem; }
/* Stories timelines: a bit more size and contrast in the blocks. */
html.theme-modern .lt-block { border-color: rgba(17, 24, 39, 0.16); }
html.theme-modern .lt-name { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
html.theme-modern .lt-yrs { font-size: 0.76rem; color: #4b5563; }
html.theme-modern .life-ladder .ladder-cat { color: #374151; }

.settings-guide { margin: 0 0 1.2rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink-soft); font-size: 0.9rem; }
.settings-guide .import-link { font-weight: 600; }

/* Stories: the category drop-down (matches the other fields). */
.cat-select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.8rem; width: 100%; box-sizing: border-box; }
.cat-select:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
#entry-category:not([hidden]) { margin-top: 0.4rem; }

.places-note { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--ink-soft); }

/* A name page's quick Delete, at the right end of its breadcrumb. */
.write-breadcrumb .ent-quick-del { margin-left: auto; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font: inherit; font-size: 0.8rem; padding: 0.25rem 0.7rem; border-radius: 999px; cursor: pointer; }
.write-breadcrumb .ent-quick-del:hover { color: #b3261e; border-color: rgba(179, 38, 30, 0.4); }
.entities .write-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.ent-kind-need { color: var(--accent); }

/* Stories timelines: a full-screen button, and the full-screen view (scrolls; wider tracks). */
.ladder-headrow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ladder-full { flex: 0 0 auto; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); border-radius: 8px; width: 2rem; height: 2rem; font-size: 1rem; line-height: 1; cursor: pointer; }
.ladder-full:hover { color: var(--accent); border-color: var(--accent-soft); }
.life-ladder:fullscreen, .life-ladder.faux-full { position: fixed; inset: 0; z-index: 200; margin: 0; border-radius: 0; overflow-y: auto; padding: calc(0.8rem + env(safe-area-inset-top)) 1.2rem 1.2rem; background: var(--card); }
.life-ladder:fullscreen .lt-block, .life-ladder.faux-full .lt-block { max-width: 13rem; }

body.ladder-full-open .app-bar { display: none; }

/* Stories: start a new thread. */
.lt-newthread { display: flex; gap: 0.4rem; align-items: center; padding: 0.7rem 0 0.2rem; border-top: 1px solid var(--line); margin-top: 0.3rem; }
.lt-newthread-btn { border: 1px dashed var(--accent-soft); background: var(--paper); color: var(--accent); font: inherit; font-size: 0.85rem; font-weight: 600; border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer; }
#lt-newthread-name { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.9rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.7rem; background: var(--card); color: var(--ink); }
.lt-newthread-add { border: none; background: var(--accent); color: #fff; font: inherit; font-size: 0.85rem; font-weight: 600; border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer; }
.lt-thread-del { margin-left: 0.4rem; border: none; background: none; color: var(--ink-soft); font: inherit; font-size: 0.9rem; cursor: pointer; padding: 0 0.2rem; }
.lt-thread-del:hover { color: #b3261e; }