/* ============================================================
   flowroutine — shared components & layout
   Plain CSS, no build step. Consumed by every screen.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg-app); }

body {
  font-family: var(--font);
  color: var(--text-1);
  font-size: var(--d-fs);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--indigo-hi); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.ic { width: 14px; height: 14px; flex: none; display: block; }
.ic-sm { width: 12px; height: 12px; }

/* ============================================================
   App frame
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 252px 1fr;
  min-height: calc(100vh - 32px);
}

/* ---------------- Sidebar ---------------- */
.side {
  background: var(--bg-rail);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  min-height: 0;
}
.side-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 16px 14px;
  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
}
.side-brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--indigo); box-shadow: 0 0 10px var(--indigo-line);
}
.pro-tag {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; color: var(--indigo-hi);
  border: 1px solid var(--indigo-line); border-radius: 4px;
  padding: 2px 5px; margin-left: 2px;
}
.side-search {
  margin: 0 12px 10px;
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-inset); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 7px 9px;
  color: var(--text-3); font-size: 12px;
}
.side-search:focus-within { border-color: var(--indigo-line); }
.side-search input {
  background: none; border: none; outline: none;
  color: var(--text-1); font: inherit; width: 100%;
}
.side-search input::placeholder { color: var(--text-3); }
.side-list { overflow-y: auto; flex: 1; padding: 0 8px 16px; }
.side-letter {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--text-3); padding: 12px 10px 4px;
}
.prow {
  display: flex; align-items: center; gap: 9px;
  min-height: var(--d-row-h);
  padding: 4px 9px; border-radius: var(--r-sm);
  cursor: pointer; position: relative;
}
.prow:hover { background: var(--bg-card); }
.prow.active {
  background: var(--green-soft);
  box-shadow: inset 2px 0 0 var(--green);
}
.prow.active .pname { color: var(--green); }
.pname { font-size: 12.5px; font-weight: 520; display: block; }
.psub { font-size: 10.5px; color: var(--text-3); margin-top: 1px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmain { flex: 1; min-width: 0; }
.pcount {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  background: var(--bg-inset); border-radius: var(--r-pill);
  padding: 2px 7px;
}
.pcount.warn { color: var(--amber); background: var(--amber-soft); }

/* avatars: restrained initials */
.av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 650; letter-spacing: .02em;
  background: var(--green-soft); color: var(--green);
  border: 1px solid var(--green-line);
}
.av.prov {
  border-style: dashed; color: var(--text-3);
  background: transparent; border-color: var(--line-hard);
}
.av.me { background: var(--indigo-soft); color: var(--indigo-hi); border-color: var(--indigo-line); }

/* ---- Professional sidebar: principal groups ---- */
.pgroup { margin-top: 14px; }
.pgroup-head {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--r-sm);
  cursor: pointer; position: relative;
}
.pgroup-head:hover { background: var(--bg-card); }
.pgroup-head .av { width: 28px; height: 28px; font-size: 10.5px; }
.pgroup-head .rail {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; background: var(--pc, var(--text-3));
}
.pgroup-head .av { background: transparent; color: var(--pc); border-color: var(--pc); }
.pgroup-name { font-size: 12.5px; font-weight: 620; display: block; }
.pgroup-role { font-size: 10.5px; color: var(--text-3); margin-top: 1px; display: block; }
.pgroup-stats {
  margin-left: auto; text-align: right;
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  line-height: 1.5; white-space: nowrap;
}
.pgroup-stats .over { color: var(--amber); }
.pgroup.selected .pgroup-head { background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--line); }
.pgroup-people { margin: 2px 0 0 14px; border-left: 1px solid var(--line-soft); padding-left: 6px; }
.pgroup-people .prow { min-height: calc(var(--d-row-h) - 4px); }
.pgroup-people .av { width: 22px; height: 22px; font-size: 9px; }
.reports { font-size: 10px; color: var(--text-3); }
.reports .arr { color: var(--pc, var(--text-3)); }

/* locked principal slot (Professional free tier) */
.locked-slot {
  margin: 16px 9px 0;
  border: 1px dashed var(--line-hard); border-radius: var(--r-md);
  padding: 12px;
  color: var(--text-3);
}
.locked-slot .ls-head { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 550; font-size: 12.5px; }
.locked-slot p { font-size: 11px; line-height: 1.55; margin-top: 6px; }
.locked-slot a { font-size: 11px; }

/* ---------------- Main column ---------------- */
/* viewport-height shell: topbar + inbox are auto, panels take the rest (minmax(0,1fr) so the
   track can't grow past the leftover — flex:1 didn't constrain the inner grid). 2026-06-22. */
.main { display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0; height: 100vh; overflow: hidden; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.topbar .spacer { flex: 1; }
.today {
  font-size: 12.5px; color: var(--text-2); font-weight: 520;
}

/* context toggle */
.seg {
  display: flex; gap: 2px;
  background: var(--bg-inset); border: 1px solid var(--line-soft);
  border-radius: var(--r-pill); padding: 3px;
}
.seg button {
  font-size: 12px; font-weight: 520; color: var(--text-3);
  padding: 4px 14px; border-radius: var(--r-pill);
}
.seg button:hover { color: var(--text-2); }
.seg button.on {
  background: var(--indigo-soft); color: var(--indigo-hi);
  box-shadow: inset 0 0 0 1px var(--indigo-line);
}

/* quiet icon buttons (blur mode etc.) */
.qbtn {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-3);
  padding: 6px 10px; border-radius: var(--r-sm);
}
.qbtn:hover { background: var(--bg-card); color: var(--text-2); }
.kbd {
  font-family: var(--mono); font-size: 9.5px; color: var(--text-3);
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 4px;
}

/* free-tier usage meter — deliberately quiet */
.meter {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
}
.meter .bar {
  width: 54px; height: 3px; border-radius: 2px; background: var(--line-soft);
  overflow: hidden;
}
.meter .bar i { display: block; height: 100%; border-radius: 2px; background: var(--text-3); }
.meter.warn { color: var(--amber); border-color: var(--amber-line); }
.meter.warn .bar i { background: var(--amber); }

/* ---------------- Inbox ---------------- */
.inbox { padding: 18px 24px 6px; }
.inbox-input {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  font-size: 15px; color: var(--text-3);
  box-shadow: var(--shadow-card);
}
.inbox-input:focus-within, .inbox-input.focus { border-color: var(--indigo-line); box-shadow: 0 0 0 3px var(--indigo-soft); }
.inbox-input .prompt { color: var(--indigo); font-size: 17px; font-weight: 300; line-height: 1; }
.inbox-input input {
  flex: 1; background: none; border: none; outline: none;
  font: inherit; color: var(--text-1); font-size: 15px;
}
.inbox-input input::placeholder { color: var(--text-3); }
.inbox-input .kbd { flex: none; }
.inbox-hint {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  padding: 8px 6px 0;
}
.inbox-hint code { color: var(--text-2); }

/* ---- classification receipt ("last filed" slot) ---- */
.receipt {
  margin-top: 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: 12px; color: var(--text-2);
}
.receipt .ok { color: var(--green); display: flex; align-items: center; gap: 6px; font-weight: 560; }
.receipt .filed-to { color: var(--text-1); font-weight: 600; }
.receipt .sep { width: 1px; height: 16px; background: var(--line); }
.receipt .wrong { color: var(--text-3); margin-left: auto; display: flex; align-items: center; gap: 6px; }
.receipt .dismiss { color: var(--text-3); padding: 2px 6px; border-radius: 4px; }
.receipt .dismiss:hover { background: var(--bg-card); color: var(--text-2); }
.refile {
  font-size: 11px; color: var(--text-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 2px 9px;
}
.refile:hover { border-color: var(--indigo-line); color: var(--indigo-hi); background: var(--indigo-soft); }
.receipt.review { border-color: var(--amber-line); }
.receipt.review .ok { color: var(--amber); }
/* optimistic phase-1 card: saved, LLM still deciding. Neutral (no category claimed). */
.receipt.pending { border-style: dashed; border-color: var(--line-hard); }
.receipt.pending .ok { color: var(--text-3); font-weight: 540; }
.receipt.pending .spin { width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line-hard); border-top-color: var(--indigo-hi);
  animation: fr-spin .7s linear infinite; display: inline-block; }

/* badges inside receipts & cards */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-2);
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--r-pill); padding: 2px 9px;
  white-space: nowrap;
}
.badge .ic { width: 11px; height: 11px; color: var(--text-3); }
.badge-how {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  color: var(--indigo-hi); background: var(--indigo-soft);
  border: none; border-radius: 4px; padding: 3px 6px;
}
.badge-how.rule { color: var(--text-2); background: var(--bg-card); border: 1px solid var(--line-soft); }

/* ---------------- Filter bar (person / principal) ---------------- */
.filterbar {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 24px 0;
  padding: 9px 12px;
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: var(--r-md);
  font-size: 12.5px;
}
.filterbar .fname { font-weight: 620; color: var(--green); }
.filterbar .fnote { color: var(--text-2); }
.filterbar .clear {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  color: var(--text-2); font-size: 12px;
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
.filterbar .clear:hover { color: var(--text-1); border-color: var(--line-hard); }
.filterbar.principal { background: var(--indigo-soft); border-color: var(--indigo-line); }
.filterbar.principal .fname { color: var(--indigo-hi); }

/* ---------------- Panels ---------------- */
/* The #panels wrapper (between .main's grid track and the .panels grid) must also be allowed
   to shrink (min-height:0) so the viewport constraint propagates. filterbar is auto, the grid
   fills the rest. */
#panels { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* Fixed 2x2 that fits the viewport: equal rows fill the space below the inbox, and each
   panel scrolls its OWN list (no cross-panel height coupling → no gap between Commitments
   and Journal). 2026-06-22. */
.panels {
  display: grid; gap: 16px;
  grid-template-columns: 1.16fr .84fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "commit todos" "journal facts";
  padding: 18px 24px 22px;
  flex: 1 1 0; min-height: 0;
}
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--d-panel-pad);
  min-width: 0;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.panel-commit  { grid-area: commit; }
.panel-todos   { grid-area: todos; }
.panel-journal { grid-area: journal; }
.panel-facts   { grid-area: facts; }
.panel-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 2px 2px 10px;
}
.panel-title {
  font-size: 12px; font-weight: 680; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2);
}
.panel-n { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.panel-link { margin-left: auto; font-size: 11px; color: var(--text-3); }
.panel-link:hover { color: var(--indigo-hi); }
.plist { display: flex; flex-direction: column; gap: var(--d-gap);
  flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
/* a panel's empty state fills the cell too, so short panels don't collapse */
.panel > .empty { flex: 1; }
.psplit {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  color: var(--text-3); padding: 8px 2px 2px;
}

/* ---------------- Cards ---------------- */
.card {
  background: var(--bg-card);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: var(--d-card-pad);
  display: flex; gap: 10px; align-items: flex-start;
  transition: background .12s var(--ease), border-color .12s var(--ease);
  position: relative;
}
.card:hover, .card.hover { background: var(--bg-card-hover); border-color: var(--line); }
.card .body { flex: 1; min-width: 0; }
.card .title { font-size: var(--d-fs); line-height: 1.45; }
.card .meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px;
}
.card .actions {
  position: absolute; top: 7px; right: 9px; display: none; gap: 2px;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 2px;
  box-shadow: var(--shadow-card);
}
.card:hover .actions, .card.hover .actions { display: flex; }
.card .actions button { padding: 4px 6px; border-radius: 4px; color: var(--text-3); display: flex; }
.card .actions button:hover { background: var(--bg-card-hover); color: var(--text-1); }

/* principal identity: 6px dot, never a fill */
.pdot { width: 6px; height: 6px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--pc, var(--text-3)); }

/* commitment direction */
.dir {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; margin-top: 1px;
}
.dir.in  { background: var(--green-soft); color: var(--green); }
.dir.out { background: var(--indigo-soft); color: var(--indigo-hi); }
.dir-label { font-size: 10.5px; color: var(--text-3); }

/* todo checkbox */
.cbox {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line-hard); margin-top: 2px;
}
.card:hover .cbox { border-color: var(--text-3); }
.cbox.done { background: var(--green); border-color: var(--green); position: relative; }
.cbox.done::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px;
  width: 4px; height: 8px; border: solid #0B1018;
  border-width: 0 1.5px 1.5px 0; transform: rotate(40deg);
}

/* journal date stamp */
.jdate {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  letter-spacing: .06em; white-space: nowrap;
  width: 74px; flex: none; padding-top: 3px;
}

/* chips */
.chip-person {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 550; color: var(--green);
  background: var(--green-soft); border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 2px 9px 2px 3px;
}
.chip-person .cav {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(63,201,140,.22);
  font-size: 7.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.chip-person.prov {
  color: var(--text-2); background: transparent;
  border: 1px dashed var(--line-hard);
}
.chip-person.prov .cav { background: var(--bg-card-hover); color: var(--text-3); }
.chip-person.prov .q { color: var(--amber); font-weight: 700; }

.tag-ctx {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  color: var(--text-3); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 1.5px 5px;
}
.due {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 560; white-space: nowrap;
  border-radius: var(--r-pill); padding: 2px 9px;
  color: var(--text-2); background: var(--bg-inset);
}
.due .ic { width: 10px; height: 10px; }
.due.soon { color: var(--amber); background: var(--amber-soft); }
.due.overdue { color: var(--amber); background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber-line); }
.chip-min { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.chip-closed {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 560; color: var(--green);
  background: var(--green-soft); border-radius: var(--r-pill); padding: 2px 9px;
}

/* done / closing state */
.card.done .title { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-hard); }

/* inline editing state */
.card.editing { border-color: var(--indigo-line); background: var(--bg-inset); box-shadow: 0 0 0 3px var(--indigo-soft); }
.edit-field {
  width: 100%; background: none; border: none; outline: none;
  font: inherit; color: var(--text-1); font-size: var(--d-fs);
  border-bottom: 1px solid var(--indigo-line); padding-bottom: 3px;
}
.edit-row { display: flex; gap: 6px; margin-top: 9px; }
.btn-sm {
  font-size: 11px; font-weight: 560; padding: 4px 12px;
  border-radius: var(--r-sm);
}
.btn-sm.save { background: var(--indigo); color: #fff; }
.btn-sm.save:hover { background: var(--indigo-hi); }
.btn-sm.ghost { color: var(--text-3); border: 1px solid var(--line); }
.btn-sm.ghost:hover { color: var(--text-2); }

/* empty state coaching */
.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: 18px 16px;
  text-align: center; color: var(--text-3); font-size: 12px; line-height: 1.7;
}
.empty code {
  font-family: var(--mono); font-size: 10.5px; color: var(--indigo-hi);
  background: var(--indigo-soft); border-radius: 4px; padding: 1px 5px;
}
.empty .why { color: var(--text-2); font-size: 12.5px; }

/* needs-review */
.card.review { border-color: var(--amber-line); }
.review-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; font-size: 11px; color: var(--amber);
}

/* privacy blur mode — blurs JOURNAL + FACTS only (the genuinely private content). People,
   commitments, and todos stay legible on a shared screen. (Which categories blur is slated
   to become a Settings preference — see TODO.) */
.blur-on .panel-journal .sensitive,
.blur-on .panel-facts .sensitive,
.blur-on .search-hit.blur-private,
.blur-on .tr-task { filter: blur(5px); user-select: none; }

/* undo toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-raise); border: 1px solid var(--line-hard);
  border-radius: var(--r-md); padding: 10px 14px;
  font-size: 12.5px; color: var(--text-1);
  box-shadow: var(--shadow-float); z-index: 40;
}
.toast .undo { color: var(--indigo-hi); font-weight: 620; padding: 3px 8px; border-radius: var(--r-sm); }
.toast .undo:hover { background: var(--indigo-soft); }
.toast .ring { font-family: var(--mono); font-size: 10px; color: var(--text-3); }

/* ============================================================
   Briefing strip (Professional)
   ============================================================ */
.briefing { padding: 16px 24px 0; }
.brief-head {
  display: flex; align-items: baseline; gap: 10px; padding: 0 2px 9px;
}
.brief-title { font-size: 13px; font-weight: 680; letter-spacing: .04em; }
.brief-meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.brief-regen { margin-left: auto; font-size: 11px; color: var(--text-3); }
.brief-regen:hover { color: var(--indigo-hi); }
.brief-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.brief-card {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--pc, var(--line-hard));
  border-radius: var(--r-md);
  padding: 11px 13px;
}
.brief-card .bc-name { font-size: 12.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.brief-card .bc-role { font-size: 10.5px; color: var(--text-3); font-weight: 400; }
.brief-card ul { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.brief-card li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12px; color: var(--text-2); line-height: 1.5;
}
.brief-card li .ic { width: 12px; height: 12px; margin-top: 2.5px; color: var(--text-3); }
.brief-card li b { color: var(--text-1); font-weight: 560; }
.brief-card li .warn { color: var(--amber); font-weight: 560; }
.brief-card.expanded { grid-column: 1 / -1; }

/* tabular numerals everywhere counts appear in pro */
.ed-pro .pcount, .ed-pro .pgroup-stats, .ed-pro .panel-n, .ed-pro .jdate { font-variant-numeric: tabular-nums; }

/* ============================================================
   Settings / plan page
   ============================================================ */
.set-nav { padding: 6px 8px; }
.set-nav .snav {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.set-nav .snav:hover { background: var(--bg-card); }
.set-nav .snav.on { background: var(--indigo-soft); color: var(--indigo-hi); font-weight: 560; }
.set-main { padding: 28px 36px; max-width: 980px; }
.set-main h1 { font-size: 19px; font-weight: 680; letter-spacing: -.01em; }
.set-sub { color: var(--text-2); font-size: 12.5px; margin-top: 5px; }

.plan-current {
  margin-top: 20px; display: flex; align-items: center; gap: 14px;
  background: var(--bg-panel); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 13px 16px; font-size: 12.5px;
}
.plan-current b { font-weight: 650; }
.plan-current .muted { color: var(--text-3); }

.plan-grid {
  margin-top: 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.plan-col > h2 {
  font-size: 12px; font-weight: 680; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2);
  padding: 0 2px 4px;
}
.plan-col > .col-sub { font-size: 11.5px; color: var(--text-3); padding: 0 2px 12px; }
.plan-card {
  background: var(--bg-panel); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 12px;
  position: relative;
}
.plan-card.featured { border-color: var(--indigo-line); }
.plan-card .tier { display: flex; align-items: baseline; gap: 8px; }
.plan-card .tier b { font-size: 14px; font-weight: 650; }
.plan-card .price { margin-left: auto; font-size: 13px; color: var(--text-1); font-weight: 600; }
.plan-card .price span { font-size: 10.5px; color: var(--text-3); font-weight: 400; }
.plan-card ul { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.plan-card li { display: flex; gap: 8px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.plan-card li .ic { width: 12px; height: 12px; margin-top: 2px; color: var(--green); }
.plan-card li.lim .ic { color: var(--text-3); }
.plan-card .cta {
  margin-top: 14px; display: inline-block;
  font-size: 12px; font-weight: 580; padding: 7px 16px;
  border-radius: var(--r-sm);
}
.plan-card .cta.primary { background: var(--indigo); color: #fff; }
.plan-card .cta.primary:hover { background: var(--indigo-hi); }
.plan-card .cta.quiet { border: 1px solid var(--line); color: var(--text-2); }
.plan-card .cta.quiet:hover { border-color: var(--line-hard); color: var(--text-1); }
.you-are-here {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  color: var(--green); background: var(--green-soft);
  border-radius: 4px; padding: 3px 7px;
}
.trust-note {
  margin-top: 24px; font-size: 11.5px; color: var(--text-3); line-height: 1.7;
  border-top: 1px solid var(--line-soft); padding-top: 16px; max-width: 640px;
}

/* ============================================================
   Cap-moment inline note (free tier, quiet)
   ============================================================ */
.cap-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  font-size: 11.5px; color: var(--text-2); line-height: 1.55;
  background: var(--bg-panel);
}
.cap-note .amber-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--amber); margin-top: 5px;
}
.cap-note b { color: var(--text-1); font-weight: 580; }
.cap-note .quiet-link { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.cap-note .quiet-link:hover { color: var(--indigo-hi); }

/* ============================================================
   Brand (locked identity: R2 settling waves + flow·routine)
   ============================================================ */
.brandmark { width: 24px; height: 24px; flex: none; }
.side-brand .wm, .wm { font-size: 15px; font-weight: 500; letter-spacing: .005em; }
.wm-flow { color: var(--text-1); }
.wm-dot { color: var(--indigo); font-weight: 700; }
.wm-routine { color: var(--indigo-hi); }
.qbtn.icon { padding: 6px 7px; }

/* ============================================================
   Auth pages (Gmail-style chrome)
   ============================================================ */
.auth-top { display: flex; align-items: center; padding: 16px 28px; }
.auth-brand { display: flex; align-items: center; gap: 8px; }
.auth-brand .brandmark { width: 22px; height: 22px; }
.auth-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.link-quiet { color: var(--text-2); font-size: 13px; }
.link-quiet:hover { color: var(--text-1); }
.link-bold { color: var(--indigo-hi); font-weight: 700; font-size: 13px; }
.link-bold:hover { color: var(--text-1); }
.auth-stage { display: flex; flex-direction: column; align-items: center; padding: 40px 0 56px; }
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; text-align: center; }
.auth-logo .brandmark { width: 58px; height: 58px; }
.auth-wm { font-size: 23px; font-weight: 500; letter-spacing: .005em; }
.auth-tag { font-size: 12.5px; color: var(--text-3); }
.tag-chaos { color: var(--text-1); font-weight: 500; }
.tag-calm { color: var(--indigo-hi); font-weight: 650; }
.auth-card { width: 400px; background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: 16px; padding: 26px 30px 28px; box-shadow: var(--shadow-card); }
.auth-card h1 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.auth-card .hsub { font-size: 12px; color: var(--text-3); margin-top: 5px; line-height: 1.55; }
.field { margin-top: 14px; }
.field label { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 6px; font-weight: 500; }
.field input, .field select {
  width: 100%; background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px;
  color: var(--text-1); font: inherit; font-size: 13.5px; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--indigo-line); box-shadow: 0 0 0 3px var(--indigo-soft); }
.field input::placeholder { color: var(--text-3); }
.field .fhint { font-size: 11px; color: var(--text-3); margin-top: 5px; line-height: 1.5; }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-full { width: 100%; margin-top: 20px; background: var(--indigo); color: #fff; font-weight: 600; font-size: 13.5px; padding: 11px; border-radius: var(--r-sm); }
.btn-full:hover { background: var(--indigo-hi); }
.btn-full.ghost { background: none; border: 1px solid var(--line); color: var(--text-2); font-weight: 500; margin-top: 10px; }
.btn-full.ghost:hover { border-color: var(--line-hard); color: var(--text-1); }
.auth-div { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--text-3); font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; }
.auth-div::before, .auth-div::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.auth-foot { margin-top: 18px; font-size: 12px; color: var(--text-3); text-align: center; line-height: 1.65; }
.edition-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.epick { border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 12px; cursor: pointer; }
.epick.on { border-color: var(--indigo-line); background: var(--indigo-soft); }
.epick b { font-size: 12.5px; display: block; }
.epick span { font-size: 10.5px; color: var(--text-3); display: block; margin-top: 3px; line-height: 1.45; }

/* account popover (avatar menu) */
.pop { position: absolute; top: 50px; right: 16px; width: 264px; background: var(--bg-raise); border: 1px solid var(--line-hard); border-radius: var(--r-md); box-shadow: var(--shadow-float); padding: 6px; z-index: 30; }
.pop-id { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.pop-id .pid b { font-size: 13px; display: block; font-weight: 620; }
.pop-id .pid span { font-size: 11px; color: var(--text-3); display: block; margin-top: 1px; }
.plan-chip { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--indigo-hi); background: var(--indigo-soft); padding: 2px 6px; border-radius: 4px; margin-left: auto; }
.pop-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.pop-row:hover { background: var(--bg-card-hover); color: var(--text-1); }
.pop-row .ic { color: var(--text-3); }
.pop-sep { height: 1px; background: var(--line-soft); margin: 4px 6px; }

/* ============================================================
   Settings page
   ============================================================ */
.sset { background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: var(--r-lg); margin-top: 22px; overflow: hidden; }
.sset > h2 { font-size: 12px; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); padding: 15px 18px 11px; }
.srow { display: flex; align-items: center; gap: 16px; padding: 13px 18px; border-top: 1px solid var(--line-soft); }
.srow .sl { flex: 1; min-width: 0; }
.srow .sl b { display: block; font-size: 13px; font-weight: 560; }
.srow .sl span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }
.srow .sval { font-size: 12.5px; color: var(--text-2); }
.switch { width: 36px; height: 21px; border-radius: 999px; background: var(--line); position: relative; flex: none; cursor: pointer; border: none; transition: background .15s var(--ease); }
.switch::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; opacity: .85; transition: left .15s var(--ease); }
.switch.on { background: var(--indigo); }
.switch.on::after { left: 17.5px; opacity: 1; }
.themes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 4px 18px 16px; }
.theme { border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px; cursor: pointer; }
.theme.on { border-color: var(--indigo-line); box-shadow: 0 0 0 2px var(--indigo-soft); }
.theme .tprev { height: 46px; border-radius: 6px; background: var(--tp-bg, #0B1018); border: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; }
.theme .tprev::before { content: ""; position: absolute; left: 8px; top: 9px; right: 24px; height: 5px; border-radius: 3px; background: var(--tp-accent); }
.theme .tprev::after { content: ""; position: absolute; left: 8px; top: 20px; width: 32px; height: 5px; border-radius: 3px; background: var(--tp-text, rgba(255,255,255,.18)); }
.theme b { display: block; font-size: 11px; font-weight: 560; margin-top: 7px; }
.theme span { display: block; font-size: 9.5px; color: var(--text-3); margin-top: 1px; }
.fontopt { display: flex; gap: 10px; padding: 4px 18px 16px; }
.fopt { flex: 1; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; }
.fopt.on { border-color: var(--indigo-line); box-shadow: 0 0 0 2px var(--indigo-soft); }
.fopt .faa { font-size: 19px; color: var(--text-1); line-height: 1.2; }
.fopt b { display: block; font-size: 11px; font-weight: 560; margin-top: 5px; }
.fopt span { display: block; font-size: 9.5px; color: var(--text-3); margin-top: 1px; }
.seg.sm button { padding: 3px 11px; font-size: 11.5px; }
.chip-ok { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--green); background: var(--green-soft); border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.chip-att { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--amber); background: var(--amber-soft); border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.btn-danger-quiet { color: var(--red); font-size: 12px; padding: 5px 10px; border-radius: var(--r-sm); }
.btn-danger-quiet:hover { background: var(--red-soft); }

/* ============================================================
   Onboarding
   ============================================================ */
.ob-head { display: flex; align-items: center; gap: 8px; padding: 16px 28px; }
.ob-steps { margin-left: auto; display: flex; gap: 7px; align-items: center; font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-hard); }
.ob-dot.on { background: var(--indigo); }
.ob-wrap { max-width: 620px; margin: 0 auto; padding: 8px 24px 40px; }
.ob-card { background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: 16px; padding: 26px 28px; margin-top: 18px; }
.ob-card h1 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.ob-card .hsub { font-size: 12px; color: var(--text-3); margin-top: 5px; line-height: 1.55; }
.pcard { display: flex; gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; margin-top: 12px; }
.pcard .pl { flex: 1; min-width: 0; }
.pcard .pl b { display: block; font-size: 13px; font-weight: 580; }
.pcard .pl span { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.principal-add { border: 1px dashed var(--line-hard); border-radius: var(--r-md); padding: 13px; color: var(--text-3); font-size: 12px; text-align: center; margin-top: 12px; line-height: 1.6; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.connect { display: flex; gap: 10px; margin-top: 8px; }
.connect button { flex: 1; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; color: var(--text-2); font-size: 12.5px; display: flex; align-items: center; gap: 8px; justify-content: center; }
.connect button:hover { border-color: var(--line-hard); color: var(--text-1); }

/* ============================================================
   Product additions (not in the design handoff)
   ============================================================ */

/* app frame fills the real viewport (no mock chrome strip) */
.app { min-height: 100vh; }

/* global search (kept from v0.1.x — handoff omits it; topbar placement) */
.top-search { position: relative; width: 300px; }
.top-search .side-search { margin: 0; }
#search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; }
.search-panel {
  background: var(--bg-raise); border: 1px solid var(--line-hard);
  border-radius: var(--r-md); box-shadow: var(--shadow-float);
  padding: 10px 14px; max-height: 60vh; overflow-y: auto; font-size: 12.5px;
}
.search-group h3 {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin: 8px 0 4px;
}
.search-hit { padding: 5px 6px; border-radius: var(--r-sm); color: var(--text-2); }
.search-hit:hover { background: var(--bg-card); color: var(--text-1); }

/* inline edit blocks (toggled open under a card) */
.edit-block { display: none; }
.edit-block.open { display: flex; }
.edit-block form { width: 100%; }
.edit-block input[type="date"] {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-2);
  font: inherit; font-size: 11.5px; padding: 3px 8px; outline: none;
}
.edit-block input[type="date"]:focus { border-color: var(--indigo-line); }
.edit-block input[type="time"] {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-2);
  font: inherit; font-size: 11.5px; padding: 3px 8px; outline: none;
}
.edit-block input[type="time"]:focus { border-color: var(--indigo-line); }

/* add-to-calendar: an always-visible button beside the due badge; opens the chooser as a
   modal (the panels are overflow-clipped, so an inline dropdown would be cut off). */
.cal-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 3px 4px; border-radius: 4px; color: var(--text-3);
  border: 1px solid var(--line-soft); background: var(--bg-card);
}
.cal-btn:hover { background: var(--bg-card-hover); color: var(--indigo-hi, var(--text-1));
  border-color: var(--line); }
.due-time { font-family: var(--mono); font-size: 10px; color: var(--text-3); flex: none; }

/* add-to-calendar modal (reuses .modal / .modal-backdrop) */
.cal-modal { max-width: 340px; }
.cal-modal-body { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.cal-modal-item {
  font-size: 12px; color: var(--text-3); margin: 2px 0 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.cal-when { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.cal-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 13px; color: var(--text-1); text-decoration: none; background: var(--bg-card);
}
.cal-opt:hover { background: var(--bg-card-hover); border-color: var(--indigo-line, var(--line)); }
.cal-ext { color: var(--text-3); font-size: 12px; }

/* sidebar: add-person + per-person edit forms */
.side-foot { padding: 8px 12px 14px; border-top: 1px solid var(--line-soft); }
.side-add { width: 100%; justify-content: center; }
.person-form, .person-edit {
  display: none; flex-direction: column; gap: 7px; margin-top: 8px;
}
.person-form.open, .person-edit.open { display: flex; }
.person-edit { margin: 2px 9px 10px; padding: 10px; background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: var(--r-md); }
.person-form input, .person-form select, .person-edit input, .person-edit textarea {
  background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 9px;
  color: var(--text-1); font: inherit; font-size: 12px; outline: none;
}
.person-form input:focus, .person-edit input:focus, .person-edit textarea:focus { border-color: var(--indigo-line); }
.person-edit textarea { min-height: 48px; resize: vertical; }
.person-form .frow, .person-edit .frow { display: flex; gap: 6px; justify-content: flex-end; }
.prow .prow-edit {
  display: none; padding: 3px 5px; border-radius: 4px; color: var(--text-3); flex: none;
}
.prow:hover .prow-edit { display: block; }
.prow .prow-edit:hover { background: var(--bg-raise); color: var(--text-1); }
.side-empty { padding: 14px 10px; color: var(--text-3); font-size: 11.5px; line-height: 1.6; }

/* toast zone hosts the fixed toasts (base.html container) */
#toast-zone {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 40;
}
#toast-zone .toast { position: static; transform: none; }

/* auth error strip */
.form-error {
  margin-top: 14px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--red-soft); border: 1px solid var(--red);
  color: var(--text-1); font-size: 12.5px; line-height: 1.5;
}

/* receipt extras: relink / completion offers reuse the receipt strip */
.receipt .raw { color: var(--text-2); }
.receipt + .receipt { margin-top: 8px; }

/* htmx request feedback: dim the inbox while in flight */
.inbox-input.htmx-request { opacity: .6; }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .side { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .side-list { max-height: 220px; }
  .panels { grid-template-columns: 1fr; grid-template-areas: "commit" "journal" "todos" "facts"; }
  .top-search { width: 100%; max-width: 220px; }
}

/* link-styled buttons inside empty states */
.linklike { color: var(--indigo-hi); text-decoration: underline; text-underline-offset: 2px; }
.linklike:hover { color: var(--text-1); }
.inline { display: inline; }

/* site-wide copyright footer */
.copyright {
  text-align: center; font-size: 11px; color: var(--text-3);
  padding: 18px 0 22px; background: var(--bg-app);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.copyright a { color: var(--text-3); text-decoration: none; }
.copyright a:hover { color: var(--text-2); text-decoration: underline; }
.beta-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: var(--indigo-hi); border: 1px solid var(--indigo-line); border-radius: 4px;
  padding: 2px 5px;
}

/* ---- legal page (Terms & Privacy) ---- */
.legal { max-width: 720px; margin: 0 auto; padding: 40px 24px 72px; line-height: 1.6; }
.legal .back { color: var(--text-3); font-size: 13px; text-decoration: none; }
.legal .back:hover { color: var(--text-1); }
.legal h1 { font-size: 24px; font-weight: 640; color: var(--text-1); margin: 16px 0 8px; }
.legal h2 { font-size: 15px; font-weight: 620; color: var(--text-1); margin: 26px 0 6px; }
.legal p { font-size: 14px; color: var(--text-2); margin-bottom: 10px; }
.legal .legal-meta { font-size: 12.5px; color: var(--text-3); }
.legal strong { color: var(--text-1); }

/* ---- signup consent ---- */
.consent { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 16px;
  font-size: 12px; color: var(--text-3); line-height: 1.5; }
.consent input { margin-top: 2px; flex: none; }
.consent a { color: var(--indigo-hi); }

/* ---------------------------------------------------------------- modal + time report */
.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; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: flex-start; justify-content: center;
  background: rgba(5, 8, 13, .62); padding: 64px 16px 16px;
  overflow-y: auto;
}
.modal {
  background: var(--bg-panel); border: 1px solid var(--line-hard);
  border-radius: var(--r-lg); box-shadow: var(--shadow-float);
  width: 100%; max-width: 620px; max-height: calc(100vh - 96px);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.modal-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-1); }
.modal-title .ic { color: var(--indigo-hi); }
.modal-close { font-size: 13px; }

.tr-period { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.tr-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-preset {
  font-size: 12px; padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--text-2); background: var(--bg-inset);
}
.tr-preset:hover { color: var(--text-1); border-color: var(--line-hard); }
.tr-preset.on { background: var(--indigo-soft); border-color: var(--indigo-line); color: var(--indigo-hi); }
.tr-custom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tr-custom input[type=date] { font-size: 12px; padding: 4px 6px; background: var(--bg-inset);
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-1); }
.tr-dash { color: var(--text-3); }

.tr-rangeline { padding: 10px 16px; font-size: 12px; color: var(--text-2); }
.tr-rangeline strong { color: var(--text-1); }

.tr-tablewrap { overflow-y: auto; padding: 0 16px; }
.tr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tr-table th { text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-3); padding: 6px 8px; position: sticky; top: 0;
  background: var(--bg-panel); border-bottom: 1px solid var(--line); }
.tr-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); color: var(--text-1); vertical-align: top; }
.tr-table .num { text-align: right; font-family: var(--mono); white-space: nowrap; color: var(--text-2); }
.tr-date { white-space: nowrap; color: var(--text-2); font-family: var(--mono); font-size: 12px; }
.tr-table tfoot td { border-bottom: none; border-top: 1px solid var(--line-hard); padding-top: 9px; }
.tr-total-label { text-align: right; color: var(--text-2); }

.tr-actions { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.copy-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--r-md); background: var(--indigo); color: #fff; border: none; font-weight: 600; }
.copy-btn:hover { background: var(--indigo-hi); }
.copy-btn.copied { background: var(--green); }
.tr-hint { font-size: 11px; color: var(--text-3); }
.tr-empty { padding: 28px 16px 32px; text-align: center; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.tr-empty code { font-family: var(--mono); background: var(--bg-inset); padding: 1px 5px; border-radius: 4px; }

/* ---------------------------------------------------------------- blur-lock + inbox spinner */
.unblur-box { display: inline-flex; align-items: center; gap: 8px; }
.unblur-box[hidden] { display: none; }
.unblur-box input { font-size: 12.5px; padding: 5px 9px; border-radius: var(--r-sm);
  background: var(--bg-inset); border: 1px solid var(--line-hard); color: var(--text-1); width: 160px; }
.unblur-box input:focus { outline: none; border-color: var(--indigo-line); }
.unblur-msg { font-size: 11px; color: var(--red); white-space: nowrap; }

/* HTMX loading indicator: hidden by default, shown while the request is in flight. */
.htmx-indicator { opacity: 0; transition: opacity .15s var(--ease); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.inbox-spinner { display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 12px; color: var(--text-3); font-family: var(--mono); }
.inbox-spinner .spin { width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line-hard); border-top-color: var(--indigo-hi);
  animation: fr-spin .7s linear infinite; }
@keyframes fr-spin { to { transform: rotate(360deg); } }

/* ---- /stats : the app's self-reporting surface (Principle §6) ---- */
.stats-page { max-width: 860px; margin: 0 auto; padding: 32px 24px 64px; }
.stats-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.stats-head h1 { font-size: 20px; font-weight: 620; color: var(--text-1); margin: 0; }
.stats-head .back { color: var(--text-3); font-size: 13px; text-decoration: none; }
.stats-head .back:hover { color: var(--text-1); }
.stats-window { margin-left: auto; display: flex; gap: 4px; }
.stats-window a { padding: 4px 10px; border-radius: 6px; font-size: 12px; color: var(--text-3);
  text-decoration: none; border: 1px solid transparent; }
.stats-window a.on { color: var(--text-1); background: var(--bg-card); border-color: var(--line); }
.stats-empty { color: var(--text-3); }
.stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.stat-card.warn { border-color: var(--amber-line); background: var(--amber-soft); }
.stat-num { font-size: 26px; font-weight: 650; color: var(--text-1); }
.stat-num .unit { font-size: 14px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.stat-label { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.stats-table { margin-bottom: 28px; }
.stats-table h2 { font-size: 14px; font-weight: 600; color: var(--text-2); margin: 0 0 10px; }
.stats-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-table th { text-align: left; color: var(--text-3); font-weight: 500; padding: 6px 8px;
  border-bottom: 1px solid var(--line); }
.stats-table td { padding: 8px; border-bottom: 1px solid var(--line-soft); color: var(--text-1); }
.stats-table .bar { display: inline-block; width: 80px; height: 6px; border-radius: 3px;
  background: var(--bg-inset); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.stats-table .bar span { display: block; height: 100%; background: var(--indigo-hi); }
.stats-note { font-size: 12px; color: var(--text-3); margin-top: 10px; line-height: 1.5; }
.stats-table tr.good td { background: var(--green-soft); }

/* ---- Ideas modal (on-demand, capture via wi:/hi:) ---- */
.ideas-modal { max-width: 560px; }
.ideas-body { padding: 8px 16px 18px; overflow-y: auto; }
.ideas-group { margin-top: 12px; }
.ideas-group-head { display: flex; align-items: center; gap: 8px; font-size: 12px;
  font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 2px; }
.ideas-n { font-family: var(--mono); font-size: 10px; color: var(--text-3);
  background: var(--bg-inset); border-radius: var(--r-pill); padding: 1px 7px; }
.ideas-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.idea-row { display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--bg-card); }
.idea-row:hover { border-color: var(--line); }
.idea-text { flex: 1; font-size: 13px; color: var(--text-1); line-height: 1.45; }
.idea-del { color: var(--text-3); padding: 2px 6px; border-radius: 4px; flex: none; }
.idea-del:hover { color: var(--amber); background: var(--amber-soft); }
.ideas-empty { font-size: 12px; color: var(--text-3); padding: 6px 2px; }
.ideas-empty code { font-family: var(--mono); color: var(--indigo-hi); }

/* ---- /settings page (Account slice; extends over time) ---- */
.settings { max-width: 560px; margin: 0 auto; padding: 40px 24px 72px; }
.settings .back { color: var(--text-3); font-size: 13px; text-decoration: none; }
.settings .back:hover { color: var(--text-1); }
.settings h1 { font-size: 24px; font-weight: 640; color: var(--text-1); margin: 14px 0 18px; }
.set-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 16px; }
.set-card h2 { font-size: 14px; font-weight: 620; color: var(--text-1); margin: 0; }
.set-card .btn-sm { margin-top: 16px; }
.set-card input:disabled { color: var(--text-3); background: var(--bg-inset); cursor: not-allowed; }
.form-ok { background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }
.set-soon { font-size: 12px; color: var(--text-3); margin-top: 8px; line-height: 1.6; }
a.av.me { text-decoration: none; }

/* ---- First-run onboarding coach-marks (non-blocking) ---- */
.tour-hl { position: absolute; z-index: 200; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(5, 8, 13, .66); transition: top .2s var(--ease),
  left .2s var(--ease), width .2s var(--ease), height .2s var(--ease); }
.tour-bubble { position: absolute; z-index: 201; width: 300px; max-width: calc(100vw - 24px);
  background: var(--bg-panel); border: 1px solid var(--line-hard); border-radius: 10px;
  box-shadow: var(--shadow-float); padding: 14px 16px; }
.tour-h { font-weight: 620; color: var(--text-1); font-size: 14px; margin-bottom: 4px; }
.tour-t { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.tour-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tour-dots { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-right: auto; }
.tour-skip { color: var(--text-3); font-size: 12px; padding: 5px 8px; border-radius: 5px; }
.tour-skip:hover { color: var(--text-1); background: var(--bg-card); }
.tour-next { background: var(--indigo); color: #fff; font-size: 12px; font-weight: 560;
  padding: 6px 14px; border-radius: 6px; }
.tour-next:hover { background: var(--indigo-hi); }

/* ---- Feedback / report-a-problem modal ---- */
.feedback-modal { max-width: 480px; }
.feedback-body { padding: 16px; }
.fb-lead { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 12px; }
.feedback-body textarea { width: 100%; resize: vertical; font: inherit; font-size: 13px;
  color: var(--text-1); background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; }
.feedback-body textarea:focus { outline: none; border-color: var(--indigo-line);
  box-shadow: 0 0 0 3px var(--indigo-soft); }
.fb-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.fb-hint { font-size: 11px; color: var(--text-3); margin-right: auto; }
.fb-admin-link { display: inline-block; margin-top: 14px; font-size: 12px; color: var(--indigo-hi); }
.fb-thanks { text-align: center; padding: 20px 8px; color: var(--text-2); }
.fb-thanks .ic { color: var(--green); width: 22px; height: 22px; margin: 0 auto 8px; }
.fb-thanks p { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }

/* ---- Admin bug catalog (/admin/feedback) ---- */
.admin-fb { max-width: 820px; margin: 0 auto; padding: 40px 24px 72px; }
.admin-fb .back { color: var(--text-3); font-size: 13px; text-decoration: none; }
.admin-fb h1 { font-size: 24px; font-weight: 640; color: var(--text-1); margin: 14px 0 4px; }
.admin-fb-sub { font-size: 12.5px; color: var(--text-3); margin-bottom: 18px; line-height: 1.5; }
.fb-counts { display: flex; gap: 10px; margin-bottom: 14px; font-size: 12px; }
.fb-c { font-family: var(--mono); color: var(--text-3); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; }
.fb-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
  background: var(--bg-card); }
.fb-row.status-closed { opacity: .55; }
.fb-line { display: flex; align-items: center; gap: 8px; font-size: 11.5px; flex-wrap: wrap; }
.fb-kind { font-family: var(--mono); font-weight: 700; letter-spacing: .04em; padding: 1px 6px;
  border-radius: 4px; text-transform: uppercase; font-size: 9.5px; }
.fb-kind.kind-bug { color: var(--amber); background: var(--amber-soft); }
.fb-kind.kind-error { color: var(--indigo-hi); background: var(--indigo-soft); }
.fb-status { font-family: var(--mono); color: var(--text-3); }
.fb-status.status-new { color: var(--green); }
.fb-when, .fb-who, .fb-ver { color: var(--text-3); }
.fb-ver { font-family: var(--mono); }
.fb-ops { margin-left: auto; display: flex; gap: 4px; }
.fb-ops button { font-size: 11px; color: var(--text-3); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 8px; }
.fb-ops button:hover { color: var(--text-1); border-color: var(--indigo-line); }
.fb-msg { font-size: 13.5px; color: var(--text-1); margin-top: 8px; line-height: 1.5; white-space: pre-wrap; }
.fb-ctx { margin-top: 8px; font-size: 11px; color: var(--text-3); }
.fb-ctx summary { cursor: pointer; }
.fb-ctx pre { margin-top: 6px; padding: 8px; background: var(--bg-inset); border-radius: 6px;
  overflow-x: auto; font-family: var(--mono); font-size: 10.5px; color: var(--text-2); white-space: pre-wrap; }
.fb-empty { color: var(--text-3); font-size: 13px; padding: 12px 0; }

/* ---- One-time welcome splash (full-screen overlay → hands off to the tour) ---- */
.welcome-splash { position: fixed; inset: 0; z-index: 300; background: var(--bg-app);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fr-welcome-in .5s var(--ease) both; }
.welcome-splash::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 38%, var(--indigo-soft) 0%, transparent 70%); opacity: .6; }
.welcome-splash.leaving { animation: fr-welcome-out .4s var(--ease) both; }
.welcome-inner { position: relative; text-align: center; max-width: 460px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; }
.welcome-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.welcome-wm { font-size: 26px; font-weight: 500; letter-spacing: .005em; }
.welcome-wm .tm { font-size: 11px; vertical-align: super; color: var(--text-3); margin-left: 1px; }
.welcome-h { font-size: 30px; font-weight: 650; color: var(--text-1); letter-spacing: -.01em; margin-top: 8px; }
.welcome-lead { font-size: 15px; color: var(--text-2); line-height: 1.6; margin: 10px 0 28px; max-width: 380px; }
.welcome-btn { background: var(--indigo); color: #fff; font-size: 14px; font-weight: 560;
  padding: 12px 28px; border-radius: 10px; box-shadow: 0 4px 18px var(--indigo-line);
  transition: background .15s var(--ease), transform .15s var(--ease); }
.welcome-btn:hover { background: var(--indigo-hi); transform: translateY(-1px); }
.welcome-foot { margin-top: 32px; font-size: 11px; color: var(--text-3); }
@keyframes fr-welcome-in { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: none; } }
@keyframes fr-welcome-out { from { opacity: 1; } to { opacity: 0; transform: scale(1.01); } }

/* ---- Maintenance page (planned-maintenance 503) ---- */
.maint { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg-app); }
.maint-inner { position: relative; text-align: center; max-width: 440px;
  display: flex; flex-direction: column; align-items: center; }
.maint .welcome-wm { font-size: 24px; font-weight: 500; }
.maint .welcome-wm .tm { font-size: 10px; vertical-align: super; color: var(--text-3); }
.maint-h { font-size: 24px; font-weight: 640; color: var(--text-1); margin: 18px 0 10px; }
.maint-lead { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.maint-foot { margin-top: 30px; font-size: 11px; color: var(--text-3); }

/* ---- What's new (user-facing changelog) + version badge ---- */
.new-badge { margin-left: 3px; font-size: 10px; }
.set-about { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.set-about a { color: var(--indigo-hi); }
.whatsnew { max-width: 640px; margin: 0 auto; padding: 40px 24px 72px; }
.whatsnew .back { color: var(--text-3); font-size: 13px; text-decoration: none; }
.whatsnew .back:hover { color: var(--text-1); }
.whatsnew h1 { font-size: 24px; font-weight: 640; color: var(--text-1); margin: 14px 0 6px; }
.wn-sub { font-size: 13px; color: var(--text-3); margin-bottom: 22px; line-height: 1.5; }
.wn-rel { margin-bottom: 22px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.wn-relhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.wn-ver { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--indigo-hi); }
.wn-date { font-size: 11.5px; color: var(--text-3); }
.wn-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wn-list li { position: relative; padding-left: 18px; font-size: 14px; color: var(--text-1); line-height: 1.5; }
.wn-list li::before { content: "→"; position: absolute; left: 0; color: var(--indigo); }

/* ---- Admin usage dashboard ---- */
.usage-cards { grid-template-columns: repeat(4, 1fr); }
.u-email { display: block; font-size: 11px; color: var(--text-3); font-family: var(--mono); margin-top: 1px; }

/* ---- Completed / Trash history pages + done badge ---- */
.badge-done { color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); }
.hist { max-width: 640px; margin: 0 auto; padding: 40px 24px 72px; }
.hist .back { color: var(--text-3); font-size: 13px; text-decoration: none; }
.hist .back:hover { color: var(--text-1); }
.hist h1 { font-size: 24px; font-weight: 640; color: var(--text-1); margin: 14px 0 6px; }
.hist-sub { font-size: 13px; color: var(--text-3); margin-bottom: 22px; line-height: 1.5; }
.hist-empty { color: var(--text-3); font-size: 14px; padding: 10px 0; }
.hist-group { margin-bottom: 20px; }
.hist-group h2 { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase;
  letter-spacing: .04em; margin: 0 0 8px; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 5px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-card); }
.hist-text { flex: 1; font-size: 13.5px; color: var(--text-1); line-height: 1.45; }
.hist-when { font-size: 11px; color: var(--green); font-family: var(--mono); flex: none; }
.hist-restore { font-size: 12px; color: var(--text-3); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; flex: none; }
.hist-restore:hover { color: var(--indigo-hi); border-color: var(--indigo-line); background: var(--indigo-soft); }

/* ---- Admin cleanup tool (temporary) ---- */
.cleanup-form { margin-top: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cleanup-form label { font-size: 13px; color: var(--text-2); }
.cleanup-form input { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg-inset); color: var(--text-1); width: 130px; }
.btn-sm.danger { background: var(--amber); color: #1a1206; }
.btn-sm.danger:hover { background: #e6a935; }