/* =============================================================
   Farlist screens — editorial primitives for app surfaces.
   Used directly by Farlist views (profile, items, welcome, reflect).
   Components.css remains responsible for Blueprint-default UI.

   Token contract: project tokens (--bg-*, --text-*, --accent, --rule-*).
   Reference: docs/research/concepts/Farlist-v4/v4-*.jsx + hifi.css.
   ============================================================= */

/* ─── Accessibility helpers ─────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Item row (used on profile + dashboard) ──────────────
   Editorial row, NOT a card. Resets the Blueprint
   `article { background; border; padding; margin }` default
   from base.css — items here are separated by hairline rules
   in the V4 editorial style, not chunky boxed cards. The year
   used to sit baseline-aligned with the title and visually
   competed with it; lives in the meta row now so the title
   is the unambiguous focal point. */
.item-row {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-softer);
  border-radius: 0;
  padding: 28px 0;
  margin: 0;
}
.item-row:last-child { border-bottom: none; }

.item-title {
  font-family: var(--font-serif);
  font-size: 1.294rem;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--text-primary);
  margin: 0;
}

/* Context — body-grade reading text. Was italic Crimson at 0.824rem;
   that combination (italic + display-serif + below-body size) read as
   ~12px sans-equivalent. Inter regular at 1rem with a 1.55 leading
   restores body legibility while keeping the editorial voice via
   Crimson Pro on titles + reflections. */
.item-ctx {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 6px 0 0;
}

/* Reflection — true quote with curly-quote pseudos. Italic Crimson
   stays here on purpose: it IS a quote, italic supports that meaning,
   and at 1.059rem (≈18px on mobile, ≈21px on desktop) the italic
   serif reads cleanly. */
.item-reflection {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.059rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 560px;
}
.item-reflection::before { content: "\201C"; }
.item-reflection::after  { content: "\201D"; }

/* Foot row — meta on the left, actions on the right.
   On narrow widths actions wrap to a new line. */
.item-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-softer);
  flex-wrap: wrap;
}

/* Meta items are inline-flowing with `·` separators between siblings,
   matching the saved-card-meta pattern on /welcome ("IDEA · LEARN · 2028").
   The pseudo wins over flex gap so a single span has no leading dot but
   subsequent spans pick up the bullet. */
.item-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.item-meta > *:not(:first-child)::before {
  content: "·";
  margin-right: 6px;
  color: var(--text-muted);
}

.item-year {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  color: var(--text-tertiary);
  letter-spacing: .08em;
  white-space: nowrap;
}

.item-private-mark {
  font-family: var(--font-mono);
  font-size: 0.588rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.item-actions {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.item-actions a {
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 1px;
  min-height: auto;
}
.item-actions a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.item-actions form { display: inline; margin: 0; }
.item-actions form button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text-tertiary);
  cursor: pointer;
  min-height: auto;
  border-bottom: 1px solid var(--rule-soft);
}
.item-actions form button:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─── Hairline section rule ─────────────────────────────── */
/* Used after status eyebrows on profile + dashboard. */
.rule {
  height: 1px;
  background: var(--rule-soft);
  border: none;
  margin: 0;
}

/* ─── Status group container (legacy — Dashboard still uses) ──── */
.profile-status-group { margin-bottom: 28px; }

/* ─── Status group heading ──────────────────────────────── */
.status-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-tertiary);
  margin: 0 0 6px;
  font-weight: 500;
}
.status-eyebrow.is-pursuing { color: var(--accent); }
.status-eyebrow .ct {
  color: var(--text-muted);
  margin-left: 4px;
}

/* ─── Profile category-grouped layout (UX-rethink Step 1+2) ─────
   Categories are the spine of the page, like every reference
   impossible list. Within each category, items are bare rows
   (status glyph + title + meta) and tap into the detail page. */
.profile-cat-group { margin-bottom: 32px; }
.cat-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-tertiary);
  margin: 0 0 6px;
  font-weight: 500;
}
.cat-eyebrow .ct {
  color: var(--text-muted);
  margin-left: 4px;
}

/* Bare row — what an impossible-list entry looks like. Status glyph
   in a fixed column on the left; title + ctx + meta stack to the
   right. No reflection inline, no notes inline, no actions inline.
   Tap the title → item detail page handles all of that. */
.item-row-bare {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
}
.item-row-glyph {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  flex-shrink: 0;
}
.item-row-body {
  min-width: 0;
}
.item-row-bare .item-title {
  font-size: 1.118rem;
  margin: 0;
}
.item-row-bare .item-ctx {
  margin: 4px 0 0;
  font-size: 0.94rem;
}
.item-row-bare .item-meta {
  margin: 6px 0 0;
}

/* "Last note Apr 2026 →" — quiet liveness signal on rows that
   have notes. Step 2's compromise between "all notes inline"
   (too noisy) and "no signal at all" (loses the journal feel). */
.item-last-note {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  min-height: auto;
}
.item-last-note:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─── Public profile — B4 two-column editorial layout ─────
   Rail (300px) + content column. Stacks vertically below 768px
   so mobile reads as a single editorial column. */
.profile-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);
}

.profile-rail {
  padding: 56px 36px 36px 40px;
  border-right: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
}

.profile-avatar {
  display: block;
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: 6px;
  object-fit: cover;
  margin-bottom: 16px;
}
.profile-avatar--sm {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
}

/* Owner-only placeholder where the avatar would render. Sparse-by-
   design profile invariant — visitors see nothing here. Same 200×200
   footprint as the real avatar so the rail layout doesn't shift on
   first photo upload. */
.profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  max-width: 100%;
  margin-bottom: 16px;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  text-align: center;
  padding: 0 12px;
  transition: border-color var(--duration-quick) var(--ease-out, ease);
}
.profile-avatar-placeholder:hover {
  border-color: var(--accent);
}

.avatar-preview { margin-bottom: 6px; }
.avatar-remove-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.706rem;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.avatar-input {
  font-size: 0.824rem;
  color: var(--text-secondary);
}

.profile-rail-name {
  font-family: var(--font-serif);
  font-size: 2.471rem;
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1;
  color: var(--text-primary);
  margin: 0;
}

.profile-rail-bio {
  font-family: var(--font-body);
  font-size: 0.941rem;
  color: var(--text-tertiary);
  margin-top: 8px;
  line-height: 1.5;
}

/* Owner-only placeholder where the bio would render. Quiet italic
   link in the same slot as the bio. Disappears the moment the user
   sets a bio via /settings#profile. */
.profile-rail-bio-placeholder {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.941rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.profile-rail-url {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  color: var(--text-muted);
  margin-top: 14px;
  letter-spacing: .06em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  row-gap: 4px;
}
.profile-rail-url-text { word-break: break-all; }
.profile-rail-url-actions { display: inline-flex; }
.profile-rail-url-copy {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  min-height: auto;
}
.profile-rail-url-copy:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.profile-rail-url-copy.is-copied {
  color: var(--accent);
}

/* "since 2024" — italic editorial line under the URL. Kept quiet
   (text-muted) so the URL stays the dominant identity element. */
.profile-rail-since {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.824rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* Owner-only "● Private" badge. Only renders when profile_public=false;
   the absence of a badge IS the public state (editorial silence). */
.profile-rail-private-pill {
  display: inline-block;
  margin-top: 14px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 0.588rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-full);
}

/* "Edit profile →" — owner-only quiet link below the identity block. */
.profile-rail-edit {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.profile-rail-edit a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  min-height: auto;
  padding-bottom: 1px;
}
.profile-rail-edit a:hover {
  border-bottom-color: var(--accent);
}

/* Read-only handle row inside the edit-profile letter-form — looks
   like a quiet display, not an input. */
.readonly-handle {
  font-family: var(--font-mono);
  font-size: 0.882rem;
  color: var(--text-secondary);
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px dotted var(--rule);
}

.profile-rail-section {
  margin-top: 36px;
}

.profile-rail-section .eyebrow {
  margin-bottom: 8px;
}

/* ─── Responsive disclosure (rail filter sections on mobile) ────────
   On mobile (<769px), STATUS and CATEGORIES collapse into <details>
   accordions to save real estate. On desktop, the responsive-details
   Stimulus controller forces them open and the summary renders as a
   static eyebrow — no chevron, no tap target.

   Hotwire Native: works as-is in WebView. Future enhancement could
   expose the same filter via a bridge action sheet without changing
   this CSS — the controller just keeps the web behavior correct. */
details.rail-section {
  margin-top: 36px;
}
details.rail-section > summary.rail-section-summary {
  list-style: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  /* Hide the native disclosure marker on every browser */
}
details.rail-section > summary.rail-section-summary::-webkit-details-marker {
  display: none;
}
details.rail-section > summary.rail-section-summary::marker {
  display: none;
  content: "";
}
details.rail-section .rail-section-chevron {
  display: none;  /* desktop default — no chevron */
}

@media (max-width: 768px) {
  details.rail-section > summary.rail-section-summary {
    cursor: pointer;
    min-height: 44px;  /* iOS HIG tap target */
    padding: 6px 0;
    margin-bottom: 0;
    user-select: none;
  }
  details.rail-section[open] > summary.rail-section-summary {
    margin-bottom: 8px;
  }
  details.rail-section .rail-section-chevron {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.706rem;
    color: var(--text-tertiary);
    transition: transform var(--duration-quick) var(--ease-out);
    line-height: 1;
  }
  details.rail-section[open] .rail-section-chevron {
    transform: rotate(180deg);
  }
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s;
  min-height: auto;
}
.nav-item-label { display: flex; align-items: center; gap: 10px; }
.nav-item .ct { color: var(--text-muted); font-size: 0.647rem; }
.nav-item:hover { color: var(--text-primary); }
.nav-item.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}
.nav-item.is-active .ct { color: var(--accent); }

.profile-rail-cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Categories are clickable filter links — quiet by default, accent
   when active, slightly toned-up on hover. */
.profile-rail-cat {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 0.882rem;
  color: var(--text-secondary);
  text-decoration: none;
  min-height: auto;
  transition: color var(--duration-quick) var(--ease-out);
}
.profile-rail-cat:hover { color: var(--text-primary); text-decoration: none; }
.profile-rail-cat.is-active {
  color: var(--accent);
}
.profile-rail-cat .ct {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  color: var(--text-muted);
}
.profile-rail-cat:hover .ct { color: var(--text-tertiary); }
.profile-rail-cat.is-active .ct { color: var(--accent); }

/* "All" nav-item glyph — a quiet dot sized to match the status glyphs. */
.nav-item-glyph-all {
  display: inline-flex;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.824rem;
  line-height: 1;
  color: var(--text-muted);
}

.profile-content {
  padding: 36px 80px 56px;
  overflow-y: auto;
}

/* Primary tier (per design-system.md) — filled accent mono caps. The
   "+ Add a stretch" CTA on Profile + Dashboard. Same look as a bare
   <button> but as an <a> for navigation. One Primary per screen. */
.profile-add-link,
.dash-add-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-on);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  min-height: auto;
  transition: background .12s, border-color .12s;
}
.profile-add-link:hover,
.dash-add-link:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}

/* Empty-state copy — kept Crimson italic at 1.059rem because this is
   a single short editorial sentence ("Your list is empty…"), not a
   paragraph the user reads through. Italic at this size still reads
   well and supports the literary voice. */
.profile-empty {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.059rem;
  color: var(--text-tertiary);
  line-height: 1.55;
  max-width: 520px;
}

.profile-visitor-footer {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-softer);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.882rem;
  color: var(--text-muted);
}
.profile-visitor-footer a {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--text-tertiary);
}

@media (max-width: 768px) {
  .profile-shell {
    grid-template-columns: 1fr;
  }
  .profile-rail {
    padding: 32px 24px 24px;
    border-right: none;
    border-bottom: 1px solid var(--rule-soft);
  }
  .profile-rail-name { font-size: 1.882rem; }
  .profile-content { padding: 24px 24px 64px; }
}

/* ─── Preview-as-visitor strip ──────────────────────────────
   Shown across the top of the profile when the owner is in
   `?preview=visitor` mode. Quiet darker band so the user knows
   they're not in their normal view; one-click escape to the
   right. */
.preview-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 24px;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.preview-strip-label { font-style: normal; }
.preview-strip-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.preview-strip-link:hover { border-bottom-color: var(--accent); }

/* ─── Welcome strip (post-signup, dismissible) ──────────── */
.welcome-strip {
  padding: 18px 24px;
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--accent);
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-family: var(--font-body);
  font-size: 0.941rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.welcome-strip .mono {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.765rem;
  color: var(--text-secondary);
}
.welcome-strip form { margin: 0; display: inline; }
.welcome-strip-dismiss {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  min-height: auto;
}

/* ─── Handle prompt (post-first-save welcome page) ──────── */
.welcome-screen {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}

.welcome-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin: 0 0 14px;
  font-weight: 500;
}

.welcome-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -.014em;
  color: var(--text-primary);
  margin: 0 0 28px;
}
.welcome-headline em { color: var(--text-tertiary); font-style: italic; }

.handle-prompt {
  padding: 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--accent);
  max-width: 680px;
  margin-bottom: 36px;
}
.handle-prompt-intro {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 18px;
}
.handle-prompt-row {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
}
.handle-prompt-input {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex: 1;
  min-width: 280px;
  border: none;
  border-bottom: 1.5px solid var(--text-primary);
  padding: 6px 0;
}
.handle-prompt-prefix {
  font-family: var(--font-mono);
  font-size: 0.824rem;
  color: var(--text-tertiary);
}
.handle-prompt-input input[type="text"] {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 1.412rem;
  letter-spacing: -.008em;
  color: var(--text-primary);
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
  width: 100%;
  min-width: 0;
}
.handle-prompt-input input[type="text"]:focus {
  border: none;
  box-shadow: none;
}

/* Optional name field — sits below the handle row on /welcome.
   Uses the same italic-serif voice as the handle, but quieter (no
   solid underline, just a dotted hairline). Eyebrow says OPTIONAL
   in mono uppercase so it's clear blank is fine. */
.welcome-name-section {
  margin-top: 28px;
}
.welcome-name-prompt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 1.059rem;
  color: var(--text-secondary);
}
.welcome-name-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.welcome-name-input {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 1.412rem;
  letter-spacing: -.008em;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--rule);
  padding: 6px 0;
  outline: none;
}
.welcome-name-input:focus {
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
}
.welcome-name-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

/* Submit row — was inline with the handle; now its own block since
   the name field sits between them. */
.handle-prompt-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-start;
}

/* Saved-stretch card shown on /welcome */
.saved-card {
  padding: 22px 28px;
  border: 1px solid var(--rule-soft);
  background: var(--bg-base);
  max-width: 680px;
}
.saved-card-meta {
  font-family: var(--font-mono);
  font-size: 0.588rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 10px;
}
.saved-card h3 {
  font-family: var(--font-serif);
  font-size: 1.412rem;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: -.005em;
  color: var(--text-primary);
}
/* Saved-card context (welcome screen preview). Body-grade reading text:
   Inter regular at 1rem matches the .item-ctx treatment so the same item
   reads identically on /welcome and on the profile. */
.saved-card-ctx {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ─── Letter-form Add — D1 ──────────────────────────────── */
.letter-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px clamp(24px, 8vw, 96px) 80px;
}

.letter-form-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-tertiary);
  margin: 0 0 36px;
}
.letter-form-eyebrow.is-welcome { color: var(--accent); }

/* Sub-eyebrows that cluster the long edit form into editorial paragraph
   breaks (Links / Lifecycle). Quieter than `.letter-form-eyebrow` (which
   anchors the whole form), spaced as a soft section divider. Keeps the
   letter-form aesthetic — no boxes, no panels, just a hint of structure. */
.letter-section-eyebrow {
  margin: 36px 0 12px;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Contextual band shown above the form when /new is opened with a
   predecessor pre-filled (the `Build on this →` flow). Quiet, italic,
   sits between eyebrow and the first prompt. The strong inside is
   the predecessor's title. */
.letter-form-context {
  margin: -20px 0 32px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.letter-form-context strong {
  font-weight: 500;
  font-style: normal;
  color: var(--text-primary);
}

.letter-prompt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.294rem;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0 0 14px;
  display: block;
  font-weight: 400;
}
.letter-prompt-sm {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.059rem;
  color: var(--text-tertiary);
  margin: 0 0 12px;
  display: block;
  font-weight: 400;
}
/* Smaller variant for inline prompts in the form footer ("Who can see
   this?" sitting next to the submit button). Same italic serif voice
   as the larger letter-prompts; just dialled down so it shares the
   line with the visibility pills + submit. */
.letter-prompt-tiny {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-tertiary);
  margin: 0 0 8px;
  display: block;
  font-weight: 400;
}

.letter-input {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.5vw, 36px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--text-primary);
  border-radius: 0;
  padding: 6px 0 10px;
  width: 100%;
  outline: none;
  display: block;
}
.letter-input:focus {
  border-bottom-color: var(--accent);
  box-shadow: none;
}
.letter-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.letter-input-sm {
  font-family: var(--font-serif);
  font-size: 1.059rem;
  font-style: italic;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--rule);
  border-radius: 0;
  padding: 6px 0 8px;
  width: 100%;
  outline: none;
  display: block;
}
.letter-input-sm:focus {
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
  box-shadow: none;
}
.letter-input-sm::placeholder {
  color: var(--text-muted);
}

/* ─── Lifecycle date inputs (started_at / completed_at) ──
   Two-column row when both fields show; stacks on mobile. The
   <input type="date"> uses native OS picker but we tame the
   default browser styling so it sits inside our editorial form
   without looking out of place. */
.dates-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.letter-section-half {
  flex: 1 1 200px;
  min-width: 0;
}
.letter-date-input {
  font-family: var(--font-mono);
  font-size: 0.882rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--rule);
  border-radius: 0;
  padding: 6px 0 8px;
  width: 100%;
  outline: none;
  display: block;
}
.letter-date-input:focus {
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
}

.letter-textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  padding: 18px 20px;
  border: 1px solid var(--rule-soft);
  background: var(--input-bg);
  border-radius: var(--radius);
  width: 100%;
  outline: none;
  resize: vertical;
  display: block;
}
.letter-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.08);
}

.letter-section { margin-bottom: 42px; }
.letter-section.tight { margin-bottom: 28px; }

.letter-meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  margin: 0 0 10px;
  display: block;
}

/* Pill rows (categories, years, etc.) */
.pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* One-line definition that surfaces below the category pill row when
   the user picks a verb on /new or /edit. Quiet italic body type so
   it reads as guidance, not as a separate heading. Empty + no margin
   when blank so the form doesn't reserve space until a category is
   selected. */
.category-help {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-tertiary);
  min-height: 1.5em;
}
.category-help:empty { margin: 0; min-height: 0; }
.category-help:not(:empty) { margin-top: 12px; }

/* Example titles surfaced beneath the definition when a category is
   selected on /new or /edit. Mono-cap eyebrow voice but quieter — not
   labels, just inspirational. Hidden when empty (no category picked
   yet). */
.category-help-examples {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.706rem;
  line-height: 1.55;
  color: var(--text-muted);
  letter-spacing: .04em;
  min-height: 0;
}
.category-help-examples:not(:empty) { margin-top: 6px; }
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  min-height: auto;
}
.pill:hover { color: var(--text-primary); border-color: var(--rule); }
.pill.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}

/* Radio buttons styled as pills (so the form keeps a real <input>
   for accessibility / Capybara, but visually reads as a pill row) */
.pill-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pill-radio + .pill-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  min-height: auto;
  margin: 0 0 0 0;
  font-weight: 500;
}
.pill-radio:checked + .pill-label {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.pill-radio:focus-visible + .pill-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Status toggle (Pursuing / Idea on the Add form) ────
   Differentiated from generic pills per the v4 design pack:
   sage-filled "Pursuing now" with a sage glyph, ink-filled
   "Hold as idea" with the dashed-ring glyph. The wrapper
   `.status-toggle` opts into this — outside it the pills stay
   generic so other form rows (category, year, visibility) are
   unaffected. */
.status-toggle .pill-label {
  gap: 8px;
}
.status-toggle .pill-label .glyph {
  width: 8px;
  height: 8px;
  margin: 0;
}

/* Pursuing — sage when checked. */
.status-toggle .pill-radio:checked + .pill-pursuing {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.status-toggle .pill-radio:checked + .pill-pursuing .glyph.pursuing {
  background: var(--accent-on);
  box-shadow: none;
}

/* Idea — ink when checked. */
.status-toggle .pill-radio:checked + .pill-idea {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-base);
}
.status-toggle .pill-radio:checked + .pill-idea .glyph.idea {
  border-color: var(--bg-base);
}

/* Done — square ink marker (only used on the edit form). */
.status-toggle .pill-radio:checked + .pill-done {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-base);
}
.status-toggle .pill-radio:checked + .pill-done .glyph.done {
  background: var(--bg-base);
}

/* Parked — quiet outlined marker. */
.status-toggle .pill-radio:checked + .pill-parked {
  background: var(--bg-card);
  border-color: var(--text-tertiary);
  color: var(--text-secondary);
}

/* Letter-form footer (visibility toggle + submit) */
.letter-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  flex-wrap: wrap;
  gap: 14px;
}
.letter-actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Mark-as-done reflection — E1 ─────────────────────── */
.reflect-screen {
  background: var(--bg-card);
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  padding: 40px 80px 56px;
}

.reflect-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 32px;
}
.reflect-topbar .center { color: var(--accent); font-weight: 500; }
.reflect-topbar a {
  color: var(--text-tertiary);
  text-decoration: none;
  min-height: auto;
}
.reflect-topbar a:hover { color: var(--text-primary); }

.reflect-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

.reflect-meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 14px;
}

.reflect-prompt {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -.022em;
  margin: 0 0 48px;
  text-align: center;
  text-wrap: balance;
  color: var(--text-primary);
}
.reflect-prompt em { font-style: italic; color: var(--text-tertiary); }

.reflect-input-wrap {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

/* Step 0d — completion-date row above the reflection textarea. Quiet
   mono label + compact native date picker. Lets users backfill a
   stretch they actually closed weeks/months ago. */
.reflect-date-row {
  max-width: 680px;
  margin: 0 auto 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.reflect-date-label {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.reflect-date-input {
  font-family: var(--font-mono);
  font-size: 0.825rem;
  padding: 4px 8px;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  background: var(--bg-base);
  color: var(--text-primary);
  max-width: 180px;
}

/* Reflect textarea: was transparent on paper-2 background — too faint
   to see where to type. A subtle inner card (paper-base inside the
   paper-2 screen) gives the field a clear writing surface without
   breaking the ceremonial feel. */
.reflect-textarea {
  font-family: var(--font-serif);
  font-size: 1.235rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
  width: 100%;
  outline: none;
  resize: vertical;
  display: block;
  min-height: 200px;
  transition: border-color var(--duration-quick) var(--ease-out),
              box-shadow var(--duration-quick) var(--ease-out);
}
.reflect-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.08);
}
.reflect-textarea::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.reflect-rule {
  height: 1px;
  background: var(--rule-soft);
  margin-top: 20px;
  display: none; /* the textarea now has its own border, hide the under-rule */
}

.reflect-counter {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.588rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.reflect-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* `.btn-accent` is no longer needed — the editorial mono-uppercase voice
 * is the bare-element default in theme.css. Existing view files keep
 * `class="btn-accent"` harmlessly (no-op). New views: just use bare
 * <button> or <%= f.submit %> and the brand voice applies automatically. */

input[type="submit"].btn-ghost,
button.btn-ghost,
.btn-ghost {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: auto;
}
input[type="submit"].btn-ghost:hover,
button.btn-ghost:hover,
.btn-ghost:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.btn-quiet {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: none;
  min-height: auto;
}
.btn-quiet:hover { color: var(--accent); }

.btn-danger-quiet {
  background: transparent;
  border: none;
  color: var(--color-danger);
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
  min-height: auto;
}
.btn-danger-quiet:hover { text-decoration: underline; }

/* ─── Form errors ───────────────────────────────────────── */
.form-errors {
  background: var(--color-danger-bg);
  border-left: 2px solid var(--color-danger);
  padding: 12px 18px;
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-size: 0.882rem;
  color: var(--color-danger);
}
.form-errors ul { margin: 0; padding-left: 18px; }

/* ─── Dashboard — owner stack view (v0.1.6) ────────────── */
.dash-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 56px 40px;
}

.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dash-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.dash-title {
  font-family: var(--font-serif);
  font-size: 1.294rem;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1;
}

.dash-handle {
  font-family: var(--font-mono);
  font-size: 0.765rem;
  color: var(--text-tertiary);
  letter-spacing: .06em;
}

.dash-summary {
  font-family: var(--font-body);
  font-size: 0.882rem;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.5;
}

.dash-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.dash-view-profile {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  min-height: auto;
}
.dash-view-profile:hover { color: var(--text-primary); border-bottom-color: var(--text-primary); }

/* `.dash-add-link` shares the Primary-tier rule above with
   `.profile-add-link` — same filled-accent style on Profile and
   Dashboard. */

.dash-rule {
  border: none;
  border-top: 1px solid var(--rule-soft);
  margin: 8px 0 32px;
}

/* ─── Dashboard item row — 3-column grid per v4 design ── */
/* glyph (20px) | content (1fr) | status selector (auto)  */
.dash-item-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-softer);
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 18px;
  align-items: baseline;
}
.dash-item-row:last-child { border-bottom: none; }
.dash-item-row > .glyph {
  align-self: start;
  margin-top: 6px;
}
.dash-item-content { min-width: 0; }
.dash-item-content .item-title {
  font-size: 1.118rem;
  letter-spacing: -.003em;
}
.dash-item-status {
  align-self: start;
  padding-top: 4px;
}
.dash-item-status form { display: inline; margin: 0; }

.status-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%239098a8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1px center;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  padding: 0 14px 1px 0;
  cursor: pointer;
  min-height: auto;
  width: auto;
  display: inline-block;
}
.status-select:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: none;
}

@media (max-width: 768px) {
  .dash-shell { padding: 22px 16px 56px; }
  .dash-header { flex-direction: column; gap: 16px; }
  .dash-actions { gap: 16px; }
  .reflect-screen { padding: 40px 24px 48px; }
  .dash-item-row { grid-template-columns: 16px 1fr auto; gap: 12px; }
}

/* ─── Narrow mobile (≤480px) ─────────────────────────────
   Targets 320px / 375px / 414px. Fixes overflow, font sizes,
   and touch-target sizing. Supplements the 768px block above.
   ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* --- Item card --- */
  .item-title { font-size: 1.059rem; }
  .item-head  { flex-direction: column; gap: 4px; align-items: flex-start; }
  .item-year  { align-self: flex-start; }

  /* --- Profile shell --- */
  .profile-rail { padding: 24px 16px 20px; }
  .profile-content { padding: 20px 16px 56px; }
  .profile-rail-name { font-size: 1.647rem; }

  /* --- Letter-form (Add + Edit) --- */
  .letter-form { padding: 28px 16px 64px; }
  .letter-form-eyebrow { margin-bottom: 24px; }

  /* Submit + public toggle stack vertically on narrow screens */
  .letter-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .letter-actions .btn-accent {
    width: 100%;
    text-align: center;
  }
  .letter-actions-left { justify-content: flex-start; }

  /* Pill rows: allow natural wrapping, tighten gap */
  .pill-row { gap: 6px; }
  .pill-radio + .pill-label,
  .pill-label { padding: 5px 10px; font-size: 0.588rem; }

  /* --- Handle prompt (welcome page) --- */
  .welcome-screen { padding: 24px 16px 56px; }
  .welcome-headline { font-size: clamp(28px, 9vw, 36px); }
  .handle-prompt { padding: 18px 16px; }
  .handle-prompt-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .handle-prompt-input { flex-direction: column; }
  .handle-prompt-input input[type="text"] { font-size: 1.176rem; }

  /* --- Reflect screen --- */
  .reflect-screen { padding: 24px 16px 48px; }
  .reflect-topbar { font-size: 0.529rem; }
  .reflect-prompt { font-size: clamp(26px, 8vw, 40px); }

  /* --- Dashboard --- */
  .dash-shell { padding: 18px 14px 56px; }
  .dash-item-content .item-title { font-size: 0.941rem; }

  /* --- Misc --- */
  .welcome-strip { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* --- Sort dropdown / content header on mobile --- */
  .profile-content-header { gap: 12px; }
  .dash-subheader { padding: 10px 0; }
}

/* ─── Profile/dashboard content header — top row ─────────
   Holds the +Add link (owner only) on the left and the sort
   dropdown on the right. Both children align to the baseline
   so the mono sort label sits with the +Add CTA. */
.profile-content-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.dash-subheader {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 6px;
}

/* ─── Sort dropdown — quiet mono affordance ──────────────
   Native <select> styled as a small mono control. Auto-submits
   on change via the auto_submit_controller. The label keeps the
   "SORT" eyebrow next to the selector so the affordance reads
   even when no option is chosen. */
.sort-form { margin: 0; display: inline-flex; }
.sort-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: auto;
  cursor: pointer;
}
.sort-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.588rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
}
.sort-select {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .08em;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  padding: 4px 18px 4px 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%239098a8' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 8px 6px;
  width: auto;
  display: inline-block;
}
.sort-select:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* ─── Status intro — italic copy under the parked eyebrow ─
   Shown only when ?status=parked filter is active. Reads as a
   short editorial preface to the parked items below. */
.status-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.941rem;
  color: var(--text-tertiary);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 0 24px;
}

/* ─── Started date meta — "started Mar 2026" ─────────────
   Quiet mono line on Pursuing items. Sits inside `.item-meta`
   so the bullet separator picks it up automatically. */
.item-started {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  color: var(--text-muted);
  letter-spacing: .04em;
}

/* ─── Parked marker — "▭ Parked" mono label ──────────────
   Appears on parked items. Same family as item-private-mark
   but using the ink-tertiary color to read as a status
   indicator rather than a privacy warning. */
.item-parked-mark {
  font-family: var(--font-mono);
  font-size: 0.588rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ─── Notes — dated check-ins on a stretch ───────────────
   Two-tier disclosure: latest note inline + <details> for the
   rest. Editorial italic serif, dated mono prefix, dash-bullet
   grammar matching the parked-tab intro. See docs/features/notes.md. */
.item-notes {
  margin: 12px 0 0;
}
.item-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.941rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 6px 0 0;
  padding-left: 2px;
  display: block;
}
.item-note-date {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  font-style: normal;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.item-note-delete {
  display: inline;
  background: none;
  border: none;
  padding: 0 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.529rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  min-height: auto;
  text-decoration: none;
  vertical-align: baseline;
}
.item-note-delete:hover { color: var(--text-secondary); }
.item-note-delete-form {
  display: inline;
  margin: 0;
  padding: 0;
}

.item-notes-more {
  margin-top: 6px;
}
.item-notes-more-summary {
  font-family: var(--font-mono);
  font-size: 0.588rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  min-height: auto;
}
.item-notes-more-summary::-webkit-details-marker { display: none; }
.item-notes-more-summary:hover { color: var(--text-secondary); }

/* + Note compose box — collapsed by default, native <details>. */
.item-note-add {
  margin-top: 10px;
}
.item-note-add-summary {
  font-family: var(--font-mono);
  font-size: 0.588rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  display: inline-block;
  min-height: auto;
}
.item-note-add-summary::-webkit-details-marker { display: none; }
.item-note-add-summary:hover { color: var(--accent-hover); }

.item-note-form {
  margin-top: 8px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
}
.item-note-textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  resize: vertical;
  outline: none;
}
.item-note-textarea:focus { border-color: var(--accent); }

.item-note-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.item-note-form-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Date input — compact, visible. Defaults to today via the form so
   the placeholder ("dd/mm/yyyy") never renders. The native calendar
   icon needs explicit darken to be visible against paper backgrounds.
   Selector specificity: `input.item-note-date-input` chains with the
   form parent + a [type] match to beat base.css's universal input
   rule, which has (0, 9, 1) specificity from its long :not() chain.
   Without this we lose font-size + padding to the universal rule. */
.item-note-form input[type="date"].item-note-date-input {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 5px 8px;
  outline: none;
  width: auto;
  min-width: 120px;
  max-width: 150px;
  height: auto;
  display: inline-block;
}
.item-note-form input[type="date"].item-note-date-input:focus {
  border-color: var(--accent);
}
.item-note-form input[type="date"].item-note-date-input::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  filter: invert(0.4);
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.btn-accent--small {
  padding: 6px 14px;
  font-size: 0.588rem;
  min-height: auto;
}

/* Quiet ghost button — same mono uppercase as accent but no fill.
   Used for Cancel beside Save in the inline note form. */
.btn-quiet {
  font-family: var(--font-mono);
  font-size: 0.588rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
  min-height: auto;
}
.btn-quiet:hover {
  color: var(--text-primary);
  border-color: var(--rule);
}

/* ─── Year shape strip — temporal arc visualizer ─────────
   Quiet editorial strip above status groups. Each year is a
   clickable button with up to 6 status glyphs (one per item)
   and a `+N` overflow marker. Wraps freely on narrow widths;
   the buttons are inline-flow so the line reads horizontally
   on desktop and naturally falls into multiple rows on mobile. */
.year-shape {
  margin: 0 0 24px;
  padding: 0;
}

.year-shape-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.year-shape-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}

.year-shape-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--rule-softer);
  border-radius: var(--radius-lg);
  background: transparent;
  text-decoration: none;
  color: var(--text-secondary);
  min-height: auto;
  transition: border-color .15s, background .15s;
}
.year-shape-btn:hover {
  border-color: var(--rule);
  background: var(--bg-card);
}
.year-shape-btn.is-active {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  color: var(--text-primary);
}

.year-shape-label {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .08em;
  color: inherit;
  white-space: nowrap;
}

.year-shape-glyphs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.year-shape-glyphs .glyph {
  /* Slightly smaller than item-row glyphs so the strip stays quiet. */
  width: 6px;
  height: 6px;
  margin: 0;
}

.year-overflow {
  font-family: var(--font-mono);
  font-size: 0.588rem;
  color: var(--text-muted);
  letter-spacing: .04em;
  margin-left: 2px;
}

@media (max-width: 768px) {
  .year-shape { margin-bottom: 18px; }
  .year-shape-row { gap: 6px 8px; }
  .year-shape-btn { padding: 3px 8px 3px 6px; }
}

/* ─── Missing-or-private profile screen ──────────────────
   Returned with HTTP 404 when the handle doesn't exist OR the
   profile is private. Same response intentionally — visitors
   can't probe for which is which (collapses the privacy
   leak without needing a second `profile_invisible` flag).
   v1.1.2. See app/controllers/profiles_controller.rb. */
.missing-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.missing-header { text-align: center; }
.missing-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-tertiary);
  margin: 0 0 16px;
}
.missing-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--text-primary);
  margin: 0 0 14px;
  font-weight: 400;
}
.missing-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.missing-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.missing-cta-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.059rem;
  color: var(--text-tertiary);
  margin: 0;
}

/* ─── Example profiles grid (shared partial) ──────────────
   Used by the missing-or-private screen and (eventually) the
   monthly review email. Marketing landing has its own
   .sb-profile-card style tuned to that layout. */
.example-profiles {
  text-align: left;
}
.example-profiles-eyebrow {
  text-align: center;
  margin: 0 0 24px;
}
.example-profiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.example-profile-card {
  display: block;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.example-profile-card:hover {
  border-color: var(--rule);
  background: var(--bg-base);
}
.example-profile-name {
  font-family: var(--font-serif);
  font-size: 1.176rem;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 2px;
  letter-spacing: -.005em;
}
.example-profile-handle {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  color: var(--text-muted);
  letter-spacing: .06em;
  margin: 0;
}
.example-profile-bio {
  font-family: var(--font-body);
  font-size: 0.882rem;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin: 12px 0 0;
}
.example-profile-meta {
  font-family: var(--font-mono);
  font-size: 0.588rem;
  color: var(--text-muted);
  letter-spacing: .08em;
  margin: 8px 0 0;
}

@media (max-width: 600px) {
  .example-profiles-grid { grid-template-columns: 1fr; }
  .missing-shell { padding: 36px 18px; gap: 36px; }
}


/* ─────────────────────────────────────────────────────────────────
   Item detail page — `/[handle]/:slug`
   The story view of one stretch. Single column, generous reading
   width, editorial language consistent with the profile.
   See docs/features/item-as-story.md.
   ───────────────────────────────────────────────────────────────── */
.item-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}

.item-page-breadcrumb {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .08em;
  color: var(--text-tertiary);
}
.item-page-back {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-secondary);
  text-decoration: none;
}
.item-page-back:hover { color: var(--accent); }
.item-page-url { color: var(--text-tertiary); }

.item-page-eyebrow {
  margin-bottom: 12px;
}

.item-page-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 14px;
}

.item-page-context {
  font-family: var(--font-serif);
  font-size: 1.118rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.item-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule-softer);
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .08em;
  color: var(--text-tertiary);
}

/* ─────────────────────────────────────────────────────────────────
   Item detail page — three-act layout (UX-rethink B)
   The page reads as Identity → Story → Journey → Closed → Chain.
   Each act has its own visual language so the reader can scan
   transitions and know which block is which.
   ───────────────────────────────────────────────────────────────── */

/* Common act wrapper — top divider + breathing room. The first act
   below the title meta gets a visual break (top border) from the
   identity block above. */
.item-page-act {
  margin: 0 0 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
}

/* Act eyebrows — louder than the page meta, anchor each section. */
.act-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 14px;
  font-weight: 500;
}
.act-eyebrow-count {
  color: var(--text-muted);
  margin-left: 4px;
}
.act-eyebrow-closed {
  color: var(--accent);
}

/* Quiet italic subtitle that sits directly under an act eyebrow. Tells
   the reader what each section is at the point of use ("check-ins
   along the way" under JOURNEY, "the closing sentence" under CLOSED).
   Strict pull-up to read as a continuation of the eyebrow line. */
.act-subtitle {
  margin: -10px 0 18px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* Act 1 — Story. Body prose, generous reading width. Photos
   render inline via .trix-content. */
.item-page-story-body {
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.item-page-story-body p {
  margin: 0 0 1em;
}
.item-page-story-body p:last-child { margin-bottom: 0; }

.item-page-act-empty {
  font-family: var(--font-body);
  color: var(--text-tertiary);
  font-size: 0.95rem;
  margin: 0;
}

/* Act 2 — Journey. Tight log. Date column + body, hairline-
   separated rows. Reads as a chronological list, not paragraphs. */
/* Item detail page → Act 2 — Journey (the inline notes log on a
   single item's page). Scoped under `.item-page-journey` so the
   class names don't collide with the Journey view tab below, which
   uses bare `.journey-entry` for its blog-card-shaped events. */
.item-page-journey .journey-log {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-softer);
}
.item-page-journey .journey-entry {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-softer);
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.item-page-journey .journey-date {
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Act 3 — Closed. Ceremonial blockquote. Larger italic serif, accent
   left border, prominent quote marks. The arc snapping shut.
   Visually distinct from the Journey log (which is flat-row prose) —
   per the 2026-05-04 JTBD review, Notes and Reflection should never
   look like the same thing. The reflection earns more breathing room
   and a thicker accent border so it reads as memoir, not journal. */
.item-page-closed {
  margin-top: 32px;
  padding: 8px 0 16px;
}
.item-page-reflection {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.353rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
  padding: 14px 0 14px 28px;
  border-left: 4px solid var(--accent);
  position: relative;
}
.item-page-reflection::before {
  content: "“";
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 2.4rem;
  line-height: 0;
  color: var(--accent);
  position: relative;
  top: 0.45em;
  margin-right: 4px;
}
.item-page-reflection::after  {
  content: "”";
  font-family: var(--font-serif);
  font-style: normal;
  color: var(--accent);
}

/* Chain — post-Closed footer-aside. Less visual weight than the
   three acts above; reads as "and where does this fit?" footnote. */
.item-page-chain {
  margin: 32px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule-softer);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.item-page-chain .act-eyebrow {
  margin-bottom: 6px;
}
.item-page-chain-line {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: baseline;
}
.chain-rel {
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  min-width: 96px;
}

/* Owner footer — Quiet-tier mono caps actions per design-system.md. */
.item-page-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-softer);
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.item-page-actions a {
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  min-height: auto;
}
.item-page-actions a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* `button_to` wrapped state-changing links (Park / Start pursuing /
   Pursue again) — render flat so they read as Quiet-tier links
   alongside the <a> siblings in the same footer row. */
.item-page-action-form {
  display: contents;
}
.item-page-action-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  color: var(--text-tertiary);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  min-height: auto;
}
.item-page-action-button:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.item-page-visitor-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-softer);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-tertiary);
  text-align: center;
}

@media (max-width: 600px) {
  .item-page { padding: 32px 18px 72px; }
  .item-page-act { margin-bottom: 32px; }
  .item-page-journey .journey-entry {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .item-page-journey .journey-date { margin-bottom: 2px; }
  .chain-rel { min-width: 0; }
}

/* Profile row title becomes a link to the item detail page. Inherit
   the title's typography and remove the underline so the row reads
   the same as before — only the cursor changes on hover. */
.item-title-link {
  color: inherit;
  text-decoration: none;
}
.item-title-link:hover {
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────
   "Now" header — UX-rethink Step 3
   Identity-level section above the year-shape strip + category list.
   The /now-page equivalent inside an impossible list: 5 most-
   recently-noted stretches, ordered by activity. Renders only when
   non-empty.
   ───────────────────────────────────────────────────────────────── */
/* No box, no grey background — same visual language as the
   Impossible view's category headers (serif h2 + hairline rule)
   for cross-screen consistency. */
.now-header {
  margin: 0 0 28px;
}
.now-heading {
  font-family: var(--font-serif);
  font-size: 1.412rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-softer);
}
.now-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.now-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.5;
}
.now-item-glyph {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}
.now-item-title {
  font-family: var(--font-serif);
  font-size: 1.06rem;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  flex: 1;
  min-width: 0;
}
.now-item-title:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-soft);
}
.now-item-cat {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Owner-only captions beneath the Now list. `.now-rule` explains the
   selection rule (last 90 days, top 5); `.now-nudge` softly suggests
   parking when pursuing > soft cap. Both quiet, italic body type. */
.now-rule,
.now-nudge {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-tertiary);
  line-height: 1.45;
}
.now-nudge { color: var(--text-secondary); }

/* Cold-start placeholder — shown to owners with stretches but no
   recent notes yet. Anchors the editorial heart of the page even
   before Now has anything to surface; nudges toward T2 (inline
   `+ note` on any list-row surface). The strong inside is the brand
   word "note" (translated per locale). */
.now-header--placeholder .now-heading { color: var(--text-tertiary); }
.now-placeholder {
  margin: 8px 0 0;
  font-family: var(--font-serif);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.now-placeholder strong {
  font-weight: 500;
  font-style: normal;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────
   Profile view tabs — UX-rethink Step 4 (H7)
   Three-tab strip (List / Scrapbook / Notebook) at the top of every
   profile-scoped page. Same identity URL prefix; three lenses.
   ───────────────────────────────────────────────────────────────── */
.view-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--rule-soft);
}
.view-tab {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  min-height: auto;
  transition: color .12s, border-color .12s;
}
.view-tab:hover {
  color: var(--text-secondary);
}
.view-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 600px) {
  .view-tabs { gap: 4px; }
  .view-tab { padding: 10px 10px; font-size: 0.647rem; }
}

/* Group-toggle pills inside the rail (List view) — small inline
   pill row using .filter-pill. Smaller than the previous top-bar
   filter strip; lives in the rail under categories + year-shape. */
.rail-section-group {
  margin-top: 24px;
}
.rail-section-group .eyebrow {
  display: block;
  margin-bottom: 8px;
}
.rail-group-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* `.filter-pill` is the canonical Pill-tier class (per
   design-system.md). Used by the group toggle in the rail; future
   filter-pill instances elsewhere reuse the same shape. */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-full);
  text-decoration: none;
  min-height: auto;
  transition: color .12s, border-color .12s, background .12s;
}
.filter-pill:hover {
  color: var(--text-primary);
  border-color: var(--rule);
}
.filter-pill.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.filter-pill-ct {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 2px;
}
.filter-pill.is-active .filter-pill-ct { color: var(--accent); }

/* Year-shape strip when rendered inside the rail — same partial,
   tighter spacing for the narrower column. The eyebrow lives on
   the rail-section <summary> already; hide the partial's own
   eyebrow to avoid the double-label. */
.profile-rail .year-shape-eyebrow { display: none; }
.profile-rail .year-shape {
  margin: 0;
  display: block;
}
.profile-rail .year-shape-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.profile-rail .year-shape-btn {
  font-size: 0.588rem;
  padding: 3px 7px;
}

/* ─────────────────────────────────────────────────────────────────
   Chain grouping (UX-rethink Phase 8)
   Tree-style view of the List: parent-child + predecessor-as-child
   nesting, ambitious goals at the top, foundations indented below.
   Done items get a ✓ glyph instead of the status circle.
   ───────────────────────────────────────────────────────────────── */
.chain-section { margin-bottom: 24px; }
.chain-section.chain-standalone { margin-top: 32px; }

.chain-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.chain-tree-nested {
  margin-top: 4px;
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--rule-softer);
}
.chain-node {
  margin: 0;
  padding: 0;
}

/* Done check glyph in the row's status slot — replaces the circle
   when the item is closed (Chain view, ?group=chain). The check
   sits in the same 12px box as the other glyphs, accent-colored. */
.item-row-glyph-check {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-top: 4px;
}
.item-row-glyph-check .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.item-title-link.is-done {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
  text-decoration-thickness: 1.5px;
}

/* Note + photo presence markers in the row meta. Quiet inline
   icons, accent on hover, link to the item detail page. */
.item-marker {
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: none;
  min-height: auto;
  padding: 0 2px;
  transition: color .12s;
}
.item-marker:hover { color: var(--accent); }
.item-marker .icon {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
}

/* ─────────────────────────────────────────────────────────────────
   Impossible view — Joel Runyon reference style
   Plain bulleted list, sublists for parent/predecessor children,
   strikethrough for done items with completion date in parens.
   No status glyphs, no boxes. Top-level grouped by category as
   section headers, like every classic impossible-list page.
   ───────────────────────────────────────────────────────────────── */
.impossible-section {
  margin-bottom: 36px;
}
.impossible-cat {
  font-family: var(--font-serif);
  font-size: 1.412rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-softer);
}

.impossible-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
}
.impossible-list-nested {
  margin: 4px 0 6px;
  padding-left: 22px;
}
.impossible-item {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 4px 0;
  padding: 0;
}
.impossible-item::marker { color: var(--accent); }

.impossible-title {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  min-height: auto;
  transition: color .12s, border-color .12s;
}
.impossible-title:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-soft);
}
.impossible-item.is-done > .impossible-title {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
  text-decoration-thickness: 1.5px;
}
.impossible-item.is-parked > .impossible-title {
  color: var(--text-tertiary);
  font-style: italic;
}

.impossible-date,
.impossible-year,
.impossible-note-count {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-left: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   Journey view — Done events + Notes only; richer card-feel feed.
   Year+month spine like Notebook, but entries are blog-card-shaped
   so the substance reads as "follow the progress" rather than a
   list of activities.

   Note vs Close visual cue (per the recent review):
   - Both kinds get a left rule + padding so neither sits flush at
     the entry edge ("touching the border" — the previous version
     gave Done a rule and Note nothing).
   - Done's rule is accent-soft (semantic: "this matters"); Note's
     rule is rule-soft (semantic: "ongoing journal entry").
   - Done's reflection block keeps its own accent border inside the
     entry — that's the marker for "this is a closed reflection."
   ───────────────────────────────────────────────────────────────── */
.journey-year {
  margin-bottom: 56px;
}
.journey-year-marker {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-softer);
  line-height: 1;
}
.journey-month-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 24px 0 12px;
  font-weight: 500;
}

.journey-entry {
  margin: 0 0 28px;
  padding: 16px 0 16px 14px;
  border-bottom: 1px solid var(--rule-softer);
  border-left: 2px solid var(--rule-soft);
}
.journey-entry:last-child {
  border-bottom: none;
}
.journey-entry--done {
  border-left-color: var(--accent-soft);
}

.journey-entry-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.journey-entry-kind {
  color: var(--accent);
  font-weight: 500;
}
.journey-entry--note .journey-entry-kind {
  color: var(--text-secondary);
}

.journey-entry-title {
  font-family: var(--font-serif);
  font-size: 1.294rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0 0 10px;
}
.journey-entry-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.journey-entry-title a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-soft);
}

.journey-entry-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.118rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 10px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
}
.journey-entry-quote::before { content: "“"; }
.journey-entry-quote::after  { content: "”"; }

.journey-entry-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 10px;
}

.journey-entry-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
}

/* `Build on this →` Quiet link sitting under the compose form on Done
   events in the Journey view. Matches the rhythm of `.profile-review-link`
   so the editorial cadence stays consistent. */
.journey-entry-action {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ─── Profile review link (T1 — surface /review) ─────────
   Quiet link below the Now header. Sits in the reading flow
   between Now and the view tabs. */
.profile-review-link {
  margin: 14px 0 24px;
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ─── /review screen ─────────────────────────────────────
   The monthly check-in surface. List of pursuing items with
   a quick-note textarea per item. Part of the reflective-
   cadence family (with /reflect): the page background is
   `--bg-card` so it reads as set-apart from regular browsing.
   See `docs/system/design-system.md` — "When to use bg-card
   for the whole page." */
.review-page {
  background: var(--bg-card);
  min-height: 100vh;
}
.review-shell {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

.review-header { margin: 0 0 32px; }
.review-header .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 8px;
}
.review-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.review-intro {
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
  line-height: 1.55;
}

.review-form { display: flex; flex-direction: column; }

.review-item {
  padding: 24px 0;
  border-top: 1px solid var(--rule-soft);
}
.review-item:first-child { border-top: 0; padding-top: 0; }

.review-item-title {
  font-family: var(--font-serif);
  font-size: 1.412rem;
  line-height: 1.25;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--text-primary);
}

.review-item-meta {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  margin: 0 0 10px;
}

.review-textarea {
  width: 100%;
  margin-top: 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  resize: vertical;
  outline: none;
}
.review-textarea:focus { border-color: var(--accent); }

.review-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
}

/* ─── /discover — public directory ─────────────────────────
   Single editorial column, hairline rhythm, no boxes. Same
   visual restraint as the impossible-list pattern: titles are
   the focus, metadata recedes. See ROADMAP Thread E. */
.discover-shell {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

.discover-header {
  margin: 0 0 32px;
  text-align: center;
}
.discover-header .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 8px;
}
.discover-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.discover-lead {
  color: var(--text-secondary);
  margin: 0 auto 12px;
  max-width: 56ch;
  line-height: 1.55;
}
.discover-count {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.discover-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 36px;
}

.discover-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.discover-profile {
  padding: 28px 0;
  border-top: 1px solid var(--rule-soft);
}
.discover-profile:first-child { border-top: 0; padding-top: 0; }
.discover-profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 6px;
}
.discover-profile-name {
  font-family: var(--font-serif);
  font-size: 1.706rem;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--text-primary);
}
.discover-profile-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.discover-profile-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-soft);
}
.discover-profile-url {
  font-size: 0.706rem;
  color: var(--text-muted);
  letter-spacing: .04em;
  word-break: break-all;
}
.discover-profile-bio {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 10px;
  max-width: 60ch;
}
.discover-profile-now {
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.discover-profile-now-label {
  font-family: var(--font-mono);
  font-size: 0.647rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-right: 8px;
}
.discover-profile-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
}
.discover-profile-count {
  font-family: var(--font-mono);
  font-size: 0.706rem;
  letter-spacing: .08em;
  color: var(--text-tertiary);
}
.discover-profile-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.discover-empty {
  margin: 32px 0;
  text-align: center;
  color: var(--text-tertiary);
  font-family: var(--font-serif);
}

.discover-cta {
  margin: 56px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--rule-soft);
  text-align: center;
}
.discover-cta-line {
  font-family: var(--font-serif);
  font-size: 1.06rem;
  color: var(--text-secondary);
  margin: 0 0 18px;
}