/* =====================================================================
   NOTES — shared chrome for the two curated lists (/ideas/, /beliefs/)
   and the private book reader. Page-scoped on top of system.css.
   ===================================================================== */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.page-body { background: var(--canvas); padding: 0 0 var(--space-96); }

.state-line { font-family: var(--font-body); font-size: var(--size-14); color: var(--ink-mute); padding: var(--space-24) 0; }

/* ---------- tools row ---------- */
.tools { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-24); flex-wrap: wrap; }
.tools .input { max-width: 300px; }
.count-line { font-family: var(--font-body); font-size: var(--size-12); color: var(--ink-mute); flex: 1; }

/* ---------- editor ---------- */
.editor { padding: var(--space-24); margin-bottom: var(--space-24); display: grid; gap: var(--space-16); }
.editor-title { font-family: var(--font-serif); font-size: var(--size-20); color: var(--ink-strong); margin: 0; }
.editor label.label { display: block; margin-bottom: 4px; }
.editor textarea {
  width: 100%; min-height: 90px; resize: vertical;
  background: var(--canvas-deep); color: var(--ink-default);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: var(--space-12); font: inherit; font-size: var(--size-14);
}
.editor .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.editor .editor-foot { display: flex; gap: var(--space-12); }
.editor select.input { appearance: none; }
.form-hint { font-family: var(--font-body); font-size: var(--size-12); color: var(--ink-mute); margin: 0; }

/* ---------- note cards ---------- */
.note-card {
  border: 1px solid var(--border-strong); border-left-width: 3px; border-radius: 12px;
  background: var(--canvas-deep); padding: var(--space-20);
  margin-bottom: var(--space-12);
}
.note-card.st-holding   { border-left-color: var(--signal); }
.note-card.st-shaky     { border-left-color: var(--brand-accent); }
.note-card.st-discarded { opacity: 0.6; }
.nc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.nc-head h3 { font-family: var(--font-display); font-size: var(--size-17); color: var(--ink-strong); margin: 0; }
.nc-conf { font-family: var(--font-body); font-size: var(--size-14); color: var(--ink-strong); }
.nc-status {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--size-13);
  color: var(--kicker);
}
.nc-body { font-size: var(--size-15); line-height: 1.6; color: var(--ink-default); margin: var(--space-12) 0 0; }
.nc-note { font-size: var(--size-14); line-height: 1.6; color: var(--ink-mute); margin: var(--space-8) 0 0; font-style: italic; }
.nc-foot { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-16); }
.nc-tag {
  font-family: var(--font-body); font-size: var(--size-12); color: var(--ink-mute);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 10px;
}
.nc-link { font-family: var(--font-body); font-size: var(--size-12); color: var(--brand-accent); }
.nc-act {
  margin-left: auto; font: inherit; font-size: var(--size-12); font-family: var(--font-body);
  background: none; border: 0; color: var(--ink-mute); cursor: pointer; padding: 2px 4px;
}
.nc-act + .nc-act { margin-left: 0; }
.nc-act:hover { color: var(--brand-accent); }

/* ---------- book reader ---------- */
.reader { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: var(--space-48); align-items: start; }
.toc { position: sticky; top: var(--space-96); display: flex; flex-direction: column; gap: 2px; }
.toc-item {
  display: flex; gap: var(--space-12); align-items: baseline; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 8px;
  color: var(--ink-mute); font: inherit; font-size: var(--size-14);
}
.toc-item:hover { background: var(--canvas-elev); color: var(--ink-default); }
.toc-item.active { background: var(--canvas-elev); color: var(--ink-strong); }
.toc-item.read .toc-n { color: var(--brand-accent); }
.toc-n { font-family: var(--font-body); font-size: var(--size-12); }

.chapter-wrap { max-width: 68ch; }
.chap-meta { font-family: var(--font-body); font-size: var(--size-12); color: var(--ink-mute); margin-bottom: var(--space-24); }
.chapter h2 { font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 38px); font-weight: 600; color: var(--ink-strong); margin: 0 0 var(--space-24); letter-spacing: -0.01em; }
.chapter h3 { font-family: var(--font-serif); font-size: var(--size-20); color: var(--ink-strong); margin: var(--space-32) 0 var(--space-12); }
.chapter h4, .chapter h5 { font-family: var(--font-display); font-size: var(--size-15); color: var(--ink-strong); margin: var(--space-24) 0 var(--space-8); }
.chapter p { font-size: var(--size-17); line-height: 1.75; color: var(--ink-default); margin: 0 0 var(--space-20); }
.chapter blockquote {
  margin: var(--space-24) 0; padding-left: var(--space-20);
  border-left: 3px solid var(--brand-accent);
  font-family: var(--font-serif); font-style: italic; font-size: var(--size-20);
  line-height: 1.5; color: var(--ink-strong);
}
.chapter ul { margin: 0 0 var(--space-20); padding-left: 1.3em; }
.chapter li { font-size: var(--size-16); line-height: 1.7; color: var(--ink-default); padding: 3px 0; }
.chapter hr { border: 0; border-top: 1px solid var(--border-strong); margin: var(--space-32) 0; }
.chapter code { font-family: var(--font-body); font-size: 0.9em; }
.reader-foot { display: flex; gap: var(--space-12); margin-top: var(--space-48); }
.reader-foot .btn[disabled] { opacity: 0.35; cursor: not-allowed; }

@media (max-width: 860px) {
  .reader { grid-template-columns: 1fr; gap: var(--space-24); }
  .toc { position: static; flex-direction: row; overflow-x: auto; padding-bottom: var(--space-8); }
  .toc-item { flex: none; }
  .toc-t { display: none; }
  .toc-item.active .toc-t { display: inline; }
}

@media (max-width: 560px) {
  .editor .row2 { grid-template-columns: 1fr; }
  .tools .input { max-width: none; width: 100%; }
  .tools .btn { width: 100%; justify-content: center; }
  .chapter p { font-size: var(--size-16); }
}

/* ---------- ideas: a grid you scan, not a feed you scroll ---------- */
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-12); align-items: start; }
.idea-grid .note-card { margin-bottom: 0; }

/* ---------- beliefs: confidence is a length, not a number ---------- */
.group-title {
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-heading-3);
  color: var(--ink-strong);
  margin: var(--space-32) 0 var(--space-12);
  display: flex; align-items: center; gap: var(--space-12);
}
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.nc-bar { display: block; height: 3px; border-radius: 2px; background: var(--border-strong); margin-top: var(--space-12); overflow: hidden; }
.nc-bar-fill { display: block; height: 100%; background: var(--brand-accent); }

@media (max-width: 560px) { .idea-grid { grid-template-columns: 1fr; } }