/* ---------- BestLifeEver — soft coral, warm canvas ---------- */
:root {
  --bg: #f6f4ef;
  --surface: #fffdfa;
  --border: #e7e2d8;
  --text: #23201b;
  --muted: #6f6a60;
  --accent: #d9765a;
  --accent-strong: #c2634a;
  --accent-soft: #f8e9e3;
  --accent-text: #8f3f26;
  --accent-mid: #a85338;   /* mid-coral: active nav label + icon, active sub-menu */
  --nav-active: #efe9dfa6;   /* tonal warm pill behind the active rail item */
  --pos: #3f7d54;
  --neg: #b4463a;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 18, 15, 0.05);
}

* { box-sizing: border-box; }

/* Page backdrop shows behind the column when popped into a full tab. */
html { background: #e7e2d8; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Shell (rail + content) ---------- */
.shell { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }

/* Rail: a top bar in the narrow side-panel layout... */
.rail {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.rail__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin-right: 8px;
}
.rail__spark { color: var(--accent); font-size: 16px; }
/* Hidden in the narrow top bar (Chrome's panel header already shows the name);
   shown again in the wide sidebar. */
.rail__name { font-size: 18px; letter-spacing: .2px; display: none; }
.rail__popout {
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 15px; line-height: 1;
  padding: 4px 6px; border-radius: 6px; margin-left: 2px;
}
.rail__popout:hover { color: var(--accent); background: var(--bg); }

.rail__nav { display: flex; gap: 2px; flex: 1; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-item__icon { font-size: 18px; opacity: .9; }
.nav-item:hover { color: var(--text); background: var(--bg); }
.nav-item.is-active { color: var(--accent-mid); background: var(--nav-active); }

/* Nested sub-items under Time / Money in the sidebar. Hidden on the narrow
   top-bar layout (the in-view .subnav is used there instead); shown as an
   indented accordion in the wide sidebar layout. */
.nav-sub { display: none; flex-direction: column; gap: 1px; }
.nav-subitem {
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  padding: 5px 10px 5px 34px;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-subitem:hover { color: var(--text); background: var(--bg); }
/* Highlight a sub-item only when its section is the current view, so the
   default-active "Home" under Time/Money doesn't light up on other pages. */
.nav-sub.is-open .nav-subitem.is-active { color: var(--accent-mid); background: var(--nav-active); }

.rail__user { margin-left: auto; }
.rail__account {
  display: flex; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer;
  padding: 4px 6px; border-radius: 8px; color: var(--text);
}
.rail__account:hover { background: var(--bg); }
.rail__avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 12px; font-weight: 700;
}
.rail__username {
  font-size: 12px; color: var(--muted);
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: none;   /* avatar-only in the narrow top bar; name returns in the wide sidebar */
}

/* Content column, centered like the mockups. */
.content { flex: 1; min-width: 0; }
.content__col { max-width: 730px; margin: 0 auto; padding: 22px 16px 56px; }

/* Views (Time / Money) and their sub-panels. */
.view { display: none; }
.view.is-active { display: block; }
.view__title {
  margin: 8px 0 0;
  text-align: left;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2px;
}

.subnav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  border-bottom: 1px solid var(--border);
  margin: 28px 0 0;
}
.subnav__item {
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 2px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
}
.subnav__item:hover { color: var(--text); }
.subnav__item.is-active {
  color: var(--accent-mid);
  border-bottom-color: rgba(217, 118, 90, .5);
}

.sub-panel { display: none; padding-top: 28px; }
.sub-panel.is-active { display: block; }

/* Time · Home: single column (display:contents flattens the wrappers so the
   `order` values restore the original stacking). On the wide site the greeting,
   calendar and schedule are lifted out into the persistent right rail. */
.thome.is-active { display: flex; flex-direction: column; }
.thome-main, .thome-side { display: contents; }

/* Persistent right rail — hidden on the narrow extension. */
.site-rail { display: none; }

/* Placeholder for sections not yet built out. */
.stub {
  text-align: center;
  padding: 46px 22px;
  color: var(--muted);
}
.stub__icon { font-size: 30px; margin-bottom: 10px; }
.stub__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text); }
.stub__text { margin: 0 auto; max-width: 380px; font-size: 14px; line-height: 1.5; }

/* ---------- New chat front door ---------- */
.chat-hero {
  text-align: center;
  padding: 24px 8px 8px;
  max-width: 560px;
  margin: 0 auto;
}
.chat-hero__greet {
  margin: 0 0 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.chat-hero__spark { color: var(--accent); font-size: 22px; line-height: 1; }

/* Home quick-chat: a little breathing room under the morning brief. */
.home-chat { padding-top: 8px; }

/* ---------- Home bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.bento__tile { margin-bottom: 0; display: flex; flex-direction: column; }
.bento__greet { grid-column: 1 / -1; justify-content: center; }
.bento__greet .hero__greeting { margin: 0; font-size: 18px; }
.bento__weather { grid-column: 1 / -1; align-items: flex-start; justify-content: center; }
.bento__time, .bento__day { grid-column: span 1; }
.bento__brief { grid-column: 1 / -1; }
.bento__label {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.bento__time .clock { font-size: 26px; }
.bento__day .hero__date { font-size: 15px; color: var(--text); }

@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento__greet { grid-column: span 2; }
  .bento__weather { grid-column: span 2; }
  .bento__time { grid-column: span 2; }
  .bento__day { grid-column: span 2; }
  .bento__brief { grid-column: 1 / -1; }
}

.chat-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 12px 10px 16px;
  box-shadow: var(--shadow);
  text-align: left;
}
.chat-box textarea {
  border: 0;
  background: none;
  resize: none;
  font: inherit;
  color: var(--text);
  padding: 4px 0;
  min-height: 30px;
  max-height: 160px;
  outline: none;
}
.chat-box__bar { display: flex; align-items: center; gap: 8px; }
.chat-box__spacer { flex: 1; }
.chat-box__model { font-size: 12px; color: var(--muted); }
.chat-box__icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none; color: var(--muted);
  cursor: pointer; font-size: 18px; line-height: 1;
}
.chat-box__icon:hover { background: var(--bg); color: var(--text); }
.chat-box__send {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: var(--accent); color: #fff;
  cursor: pointer; font-size: 16px; line-height: 1;
}
.chat-box__send:hover { background: var(--accent-strong); }

.chat-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.chip__i { color: var(--muted); flex: 0 0 auto; }
.chip:hover .chip__i { color: var(--accent); }

/* ---------- Recent conversations (New chat page) ---------- */
.chat-recent { margin-top: 26px; max-width: 520px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.chat-recent:empty { display: none; }
.chat-recent__head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; padding-left: 4px; }
.chat-recent__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 10px 12px; font: inherit; cursor: pointer; text-align: left; color: var(--text);
}
.chat-recent__row:hover { border-color: var(--accent); }
.chat-recent__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.chat-recent__time { flex: 0 0 auto; font-size: 11px; color: var(--muted); }

/* ---------- Big Calendar (Time · Calendar) ---------- */
.bcal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bcal-nav { display: flex; align-items: center; gap: 8px; }
.bcal-navbtn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; color: var(--text); cursor: pointer; font-size: 18px; }
.bcal-navbtn:hover { border-color: var(--accent); color: var(--accent-strong); }
.bcal-today { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.bcal-today:hover { border-color: var(--accent); color: var(--accent-strong); }
.bcal-label { font-size: 17px; font-weight: 600; color: var(--text); min-width: 150px; }
.bcal-views { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.bcal-viewbtn { border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; padding: 5px 12px; border-radius: 7px; }
.bcal-viewbtn.is-active { background: var(--surface); color: var(--accent-strong); font-weight: 600; box-shadow: 0 1px 2px rgba(20,18,15,.08); }

.bcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bcal-dowrow { margin-bottom: 4px; }
.bcal-dow { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 6px; }
.bcal-month { gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bcal-month { grid-auto-rows: 108px; }
.bcal-cell { background: var(--surface); height: 108px; overflow: hidden; padding: 6px 7px; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; }
.bcal-cell.is-out { background: var(--bg); }
.bcal-cell.is-out .bcal-date { color: #c3bcae; }
.bcal-cell.is-today .bcal-date { background: var(--accent); color: #fff; }
.bcal-date { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--text); min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.bcal-item { font-size: 11.5px; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--accent-soft); border-radius: 5px; padding: 1px 5px; }
.bcal-item.is-done { color: #9a948a; text-decoration: line-through; background: var(--bg); }
.bcal-item b { color: var(--accent-strong); font-weight: 600; }
.bcal-item--bill { background: #fbe4de; color: #9a3a26; }
.bcal-item--bday { background: #efe3f6; color: #7b4a94; }
.bcal-item--holiday { background: #e2f0e4; color: #3f7a4a; }
.bcal-more { font-size: 11px; color: var(--muted); padding-left: 4px; }

/* Week view */
.bcal-week { display: flex; flex-direction: column; gap: 8px; }
.bcal-weekrow { display: flex; gap: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; }
.bcal-weekrow.is-today { border-color: var(--accent); }
.bcal-weekday { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bcal-weekday__dow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.bcal-weekday__n { font-size: 22px; font-weight: 600; color: var(--text); }
.bcal-weekrow.is-today .bcal-weekday__n { color: var(--accent-strong); }
.bcal-weekitems { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.bcal-empty { font-size: 14px; color: var(--muted); font-style: italic; }

/* Year view */
.bcal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.bcal-mini { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 12px; cursor: pointer; text-align: left; font: inherit; }
.bcal-mini:hover { border-color: var(--accent); }
.bcal-mini__title { font-size: 14px; font-weight: 700; color: var(--accent-strong); margin-bottom: 8px; }
.bcal-mini__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.bcal-minicell { font-size: 10px; text-align: center; color: var(--text); padding: 2px 0; border-radius: 4px; }
.bcal-minicell.is-out { color: #cfc8ba; }
.bcal-minicell.is-today { background: var(--accent); color: #fff; }
.bcal-minicell.has-items:not(.is-today) { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

/* ---------- All Me ---------- */
.me-card { padding: 18px 20px; }
.me-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; }
.me-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.me-field { display: flex; flex-direction: column; gap: 2px; }
.me-lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.me-in { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 14px; color: var(--text); padding: 4px 0; outline: none; resize: none; box-sizing: border-box; }
.me-in::placeholder { color: #b7b0a4; }
.me-in:focus { border-bottom-color: var(--accent); }

.me-person { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 12px; background: var(--bg); }
.me-person__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.me-person__name { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); padding: 2px 0; outline: none; }
.me-person__name:focus { border-bottom-color: var(--accent); }
.me-person__x { flex: 0 0 auto; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.me-person__x:hover { color: var(--neg); }
.me-person__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin-bottom: 8px; }

/* ---------- Quick Budget (Money · Home) ---------- */
.quick-budget { margin-top: 16px; }
.qb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.qb-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(20,18,15,.04);
  display: flex; flex-direction: column;
}
.qb-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.qb-name {
  flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--border); background: none;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--accent-strong);
  padding: 2px 0; outline: none;
}
.qb-name:focus { border-bottom-color: var(--accent); }
.qb-card__x { flex: 0 0 auto; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.qb-card__x:hover { color: var(--neg); }

/* underline-only inputs (clear background, line under only) */
.qb-in { border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 14px; color: var(--text); padding: 4px 0; outline: none; }
.qb-in::placeholder { color: #b7b0a4; }
.qb-in:focus { border-bottom-color: var(--accent); }

.qb-label { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Income sources */
.qb-incomes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.qb-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
.qb-income__total b { font-size: 14px; font-weight: 700; color: var(--text); }
.qb-income { display: flex; align-items: center; gap: 8px; }
.qb-income__name { flex: 1; min-width: 0; }
.qb-income__amt { width: 84px; text-align: right; flex: 0 0 auto; }
.qb-income__x { flex: 0 0 auto; border: 0; background: none; color: #c9c1b4; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.qb-income__x:hover { color: var(--neg); }

.qb-addrow { align-self: flex-start; margin-top: 4px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent-strong); cursor: pointer; padding: 0; }
.qb-addrow:hover { text-decoration: underline; }

/* Items */
.qb-items { display: flex; flex-direction: column; gap: 6px; }
.qb-item { display: flex; align-items: center; gap: 8px; }
.qb-item.is-grouped { border-left: 3px solid var(--gc, var(--accent-soft)); padding-left: 8px; margin-left: -11px; }
.qb-item__name { flex: 1; min-width: 0; }
.qb-item__cost { width: 78px; text-align: right; flex: 0 0 auto; }
.qb-check { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.qb-item__dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
.qb-item__dot:hover { box-shadow: 0 0 0 2px rgba(20,18,15,.15); }
.qb-item__x { flex: 0 0 auto; border: 0; background: none; color: #c9c1b4; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.qb-item__x:hover { color: var(--neg); }

.qb-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.qb-additem { border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent-strong); cursor: pointer; padding: 0; }
.qb-additem:hover { text-decoration: underline; }
.qb-groupbtn { border: 1px solid var(--border); background: none; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; padding: 4px 12px; }
.qb-groupbtn:hover { border-color: var(--accent); color: var(--accent-strong); }
.qb-groupbtn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.qb-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* Per-group totals legend */
.qb-glegend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.qb-gtot { display: flex; align-items: center; gap: 8px; }
.qb-gtot__sw { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }
.qb-gtot__name { flex: 1; min-width: 0; font-size: 14px; }
.qb-gtot__val { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--text); }
.qb-gtot__x { flex: 0 0 auto; border: 0; background: none; color: #c9c1b4; font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; }
.qb-gtot__x:hover { color: var(--neg); }

.qb-total { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--muted); }
.qb-total b { color: var(--text); }
.qb-balance { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 14px; font-weight: 700; }

/* Quick Budget page: New button + list view */
.qb-new { margin-bottom: 14px; }
.qb-list { display: flex; flex-direction: column; gap: 8px; }
.qb-listrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 12px;
  padding: 12px 16px; font: inherit; cursor: pointer; text-align: left;
  box-shadow: 0 1px 2px rgba(20,18,15,.04);
}
.qb-listrow:hover { border-color: var(--accent); }
.qb-listrow__name { font-size: 14.5px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-listrow__bal { font-size: 14px; font-weight: 700; flex: 0 0 auto; }

/* ---------- Money · Home ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
}
.metric__label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.metric__value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.insight {
  display: flex;
  gap: 10px;
  background: var(--accent-soft);
  border: 1px solid #f0d9cf;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 12px 0;
}
.insight__spark { color: var(--accent-text); font-size: 15px; line-height: 1.5; }
.insight__body { flex: 1; }
.insight__text { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--text); }

.agenda { display: flex; flex-direction: column; }
.agenda-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.agenda-row:first-child { border-top: 0; }
.agenda-row__date {
  flex: 0 0 56px;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.agenda-row__name { flex: 1; font-size: 14px; }
.agenda-row__amt { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Money · Assessment ---------- */
.score-card { display: flex; align-items: center; gap: 16px; }
.score-ring {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 3px solid var(--accent);
  color: var(--accent-text);
}
.score-ring.pos { background: #e6f0e9; border-color: var(--pos); color: #2f6641; }
.score-ring.neg { background: #f7e4e2; border-color: var(--neg); color: #8f2f27; }
.score-ring__num { font-size: 24px; font-weight: 700; line-height: 1; }
.score-ring__of { font-size: 10px; opacity: .7; }
.score-meta__label { font-size: 17px; font-weight: 600; }
.score-meta__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.finding { list-style: none; margin: 0; padding: 0; }
.finding li {
  display: flex; gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 14px; line-height: 1.45;
}
.finding li:first-child { border-top: 0; }
.finding li span { flex: 0 0 auto; font-weight: 700; }
.finding--good li span { color: var(--pos); }
.finding--watch li span { color: var(--neg); }

/* ---------- Time · Planner ---------- */
.pl-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.pl-toggle { display: flex; gap: 2px; background: var(--bg); border-radius: 10px; padding: 3px; }
.pl-toggle__btn {
  border: 0; background: none; font: inherit; font-size: 12px;
  color: var(--muted); cursor: pointer; padding: 6px 11px; border-radius: 8px;
}
.pl-toggle__btn.is-active { background: var(--surface); color: var(--accent-text); font-weight: 600; box-shadow: var(--shadow); }
.pl-head__actions { display: flex; gap: 6px; }

.pl-addform {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.pl-addform input[type=text] { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; background: var(--bg); }
.pl-addform__row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pl-addform__row input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font: inherit; background: var(--bg); }

.pl-board { display: flex; flex-direction: column; gap: 14px; }
.pl-side__title, .pl-side--week .pl-side__title { font-size: 12px; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 999px;
  cursor: grab;
}
.pl-chip__grip { color: var(--muted); font-size: 11px; }
.pl-chip.is-dragging { opacity: .4; }

.pl-timeline { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.pl-hour { display: flex; gap: 8px; border-top: 1px solid var(--border); min-height: 38px; padding: 4px 8px; }
.pl-hour:first-child { border-top: 0; }
.pl-hour--any { background: var(--bg); }
.pl-hour__label { flex: 0 0 62px; font-size: 11px; color: var(--muted); padding-top: 6px; }
.pl-hour__slot { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 2px 0; }
.pl-hour.is-drop, .pl-day.is-drop { background: var(--accent-soft); }

.pl-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 8px; font-size: 12px;
}
.pl-item--goal { background: var(--accent-soft); }
.pl-item.is-done .pl-item__text { text-decoration: line-through; color: var(--muted); }
.pl-item__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl-item__x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.pl-item__x:hover { color: var(--neg); }

.pl-week { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pl-day { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 8px 10px; }
.pl-day.is-today { border-color: var(--accent); }
.pl-day__head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.pl-day__num { color: var(--muted); }
.pl-day.is-today .pl-day__num { color: var(--accent-text); }
.pl-day__slot { display: flex; flex-direction: column; gap: 4px; min-height: 24px; }
.pl-day__empty { margin: 0; color: #ccc4b6; font-size: 12px; }

.pl-routines { display: flex; flex-direction: column; gap: 12px; }
.pl-r-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pl-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.pl-field input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font: inherit; background: var(--bg); color: var(--text); }
.pl-daychks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pl-daychk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text); }

.pl-log { font-size: 12px; color: var(--muted); margin: 12px 2px 0; font-style: italic; }

@media (min-width: 620px) {
  .pl-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .pl-day__head { flex-direction: column; align-items: center; gap: 0; }
}

/* ---------- Money · Cashflow ---------- */
.cf__legend { font-size: 12px; color: var(--muted); margin: 4px 2px 10px; }
.cf__key { font-weight: 600; }
.cf__key--a { color: var(--text); }
.cf__key--p { color: var(--muted); }

.cf__scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table.cf { border-collapse: collapse; font-variant-numeric: tabular-nums; width: max-content; }
.cf th, .cf td { text-align: right; padding: 7px 10px; white-space: nowrap; }
.cf thead th { font-size: 11px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.cf__month { }
.cf__yr { font-size: 9px; opacity: .6; margin-left: 2px; }
.cf__corner { position: sticky; left: 0; background: var(--surface); z-index: 2; }
.cf__rowlabel {
  position: sticky; left: 0;
  background: var(--surface);
  text-align: left;
  font-size: 12px; font-weight: 600;
  border-right: 1px solid var(--border);
  z-index: 1;
}
.cf tbody tr { border-top: 1px solid var(--border); }
.cf__cell { line-height: 1.25; }
.cf__actual { display: block; font-size: 12px; font-weight: 600; }
.cf__proj { display: block; font-size: 11px; color: var(--muted); }
.cf__zero { color: #bdb6a8; font-weight: 500; }
.cf__net .cf__rowlabel { color: var(--accent-text); }
.cf__net td, .cf__net th { border-top: 2px solid var(--border); }

/* Wide layout: the rail becomes a left sidebar, content stays centered. */
@media (min-width: 760px) {
  .shell { flex-direction: row; }
  /* Middle column fills the space between the left rail and the right rail. */
  .content { flex: 1 1 auto; min-width: 0; }
  .rail {
    flex-direction: column;
    align-items: stretch;
    width: 280px;
    flex: 0 0 280px;
    gap: 3px;
    padding: 18px 12px;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
  }
  .rail__brand { margin: 0 4px 16px; }
  .rail__nav { flex-direction: column; flex: 0 0 auto; }
  .nav-item { padding: 0 12px; gap: 12px; letter-spacing: .03em; }
  .nav-item__icon { font-size: 25px; }
  /* Sidebar: nested sub-items replace the in-view sub-nav bar. Always show
     every section's sub-items, not just the active section's. */
  .subnav { display: none; }
  .nav-sub { display: flex; }
  .nav-subitem { letter-spacing: .03em; padding-left: 49px; }
  /* The active sub-item carries the full highlight; the section header just
     turns coral when one of its pages is the current view. */
  .nav-item.is-active:has(+ .nav-sub) { color: var(--accent-strong); background: none; }
  /* Divider lines above and below each section header (Time, Money). */
  .nav-item:has(+ .nav-sub) {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding-top: 9px;
    padding-bottom: 9px;
    margin: 4px 0;
  }
  .rail__user {
    margin: auto 0 0;
    border-top: 1px solid var(--border);
    padding-top: 10px;
  }
  .rail__account { width: 100%; }
  .rail__name { display: inline; }
  .rail__username { display: block; max-width: none; }
  /* Page content (Time / Money) caps at 1100px, centered in the middle column. */
  .content__col { max-width: 1100px; padding: 30px 22px 60px; }
  /* Roomier header → menu → content rhythm on the wide shell (spec: ~40px). */
  .subnav { margin-top: 36px; }
  .subnav__item { font-size: 15px; }
  .sub-panel { padding-top: 34px; }
  /* Pin the section header + sub-menu to the top when the pop-out scrolls. */
  .view__header {
    position: sticky;
    top: 0;
    z-index: 7;
    background: var(--bg);
    padding-top: 6px;
  }
  /* The morning brief no longer needs to stick — the header above it does. */
  .home-top { position: static; }
  /* Persistent right rail on every page of the wide site: 350px, no border or
     background, holding greeting, calendar, and today's schedule. */
  /* Today hides it (its brief already covers the schedule); Home now shows it. */
  body.is-today .site-rail { display: none; }
  .site-rail {
    display: block;
    flex: 0 0 280px;
    max-width: 280px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: 30px 12px 40px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
  }
  /* Calendar and schedule sit flat in the rail — no card background or border. */
  .site-rail .card {
    background: none;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Sticky home header: morning brief + greeting/clock/date stay pinned
   under the tab bar while the cards below scroll up beneath it. */
.home-top {
  position: sticky;
  top: var(--nav-h, 41px);
  z-index: 5;
  background: var(--bg);
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 4px;
}

/* (Scroll-snap removed: in the new shell it forced the calendar to the top on
   load, scrolling the section header + sub-menu out of view.) */

/* ---------- Home hero ---------- */
.hero { text-align: center; padding: 6px 0 16px; }
.hero__greeting { margin: 0; color: var(--muted); font-size: 14px; }

.name-btn {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  padding: 0 2px;
  border-bottom: 1px dashed var(--border);
}
.name-btn:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* muted prompt when no name is set yet */
.name-btn--empty { color: var(--accent); font-weight: 600; }

/* ---------- Weather ---------- */
.weather {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px auto 0;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.weather:hover { border-color: var(--accent); }
.weather__icon { font-size: 15px; line-height: 1; }
.weather__temp { font-weight: 700; font-variant-numeric: tabular-nums; }
.weather__desc { color: var(--muted); }
.weather__place {
  color: var(--muted);
  font-size: 12px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather__place:not(:empty)::before { content: '· '; }
.weather__set { color: var(--accent); font-weight: 600; }

/* Sidebar greeting + weather + time, pinned above the calendar. */
.side-hello { padding: 6px 4px 14px; text-align: left; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.side-hello__greet { font-size: 15px; font-weight: 600; color: var(--text); }
/* ---------- My Circle ---------- */
.circle-row { padding: 18px 0 22px; border-bottom: 1px solid var(--border); }
.circle-row:last-child { border-bottom: 0; }
.circle-row__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.circle-row__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--accent-strong); }
.circle-row__count {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--bg); border-radius: 999px; padding: 2px 8px;
}
.circle-strip {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start;
}
.circle-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 104px; border: 0; background: none; padding: 4px; cursor: pointer;
  font: inherit; border-radius: 12px;
}
.circle-tile:hover { background: var(--bg); }
.circle-av {
  display: grid; place-items: center; overflow: hidden;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--accent-strong); font-size: 24px; font-weight: 600;
}
.circle-av__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.circle-av--add { border-style: dashed; color: var(--accent); font-size: 30px; font-weight: 400; }
.circle-av--lg { width: 96px; height: 96px; font-size: 30px; }
.circle-tile__rel {
  font-size: 12px; font-weight: 600; color: var(--accent-strong);
  text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.circle-tile__name {
  font-size: 14px; color: var(--text);
  text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.circle-tile__rel.is-empty, .circle-tile__name.is-empty { color: var(--muted); font-weight: 400; font-style: italic; }

/* Family clusters: blocks that slide right to left */
.circle-row--clusters .circle-row__head { flex-wrap: wrap; }
.cl-spacer { flex: 1; }
.cl-nav {
  width: 28px; height: 28px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
}
.cl-nav:hover { border-color: var(--accent); color: var(--accent-strong); }
.cl-strip {
  display: flex; gap: 26px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
}
.cl-strip > .cl-block { scroll-snap-align: start; }
.cl-block {
  flex: 0 0 auto; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); padding: 14px 12px 8px;
}
.cl-block__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 0 4px; }
.cl-block__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-block__edit {
  border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--accent); cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.cl-block__edit:hover { background: var(--bg); color: var(--accent-strong); }

.cl-stage { position: relative; }
.cl-lines { position: absolute; inset: 0; pointer-events: none; }
.cl-line { stroke: var(--border); stroke-width: 2; }

/* The couple, ringed together at the centre */
.cl-core {
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 4px;
  border: 2px solid var(--accent); border-radius: 50%; background: var(--bg);
  box-sizing: border-box;
}
.cl-core.is-empty { border-style: dashed; cursor: pointer; }
.cl-core__hint { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; padding: 0 8px; }
.cl-core__av { cursor: pointer; }

/* A child on the arc */
.cl-person {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
}
.cl-person__rel { font-size: 10.5px; font-weight: 600; color: var(--accent-strong); white-space: nowrap; }
.cl-person__name { font-size: 11.5px; color: var(--text); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-empty { position: absolute; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--muted); }

/* Cluster editor */
.cl-picker { margin: 14px 0 6px; }
.cl-pick { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cl-pick__name { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-pick__seg { display: flex; gap: 2px; flex-shrink: 0; }
.cl-pick__btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 9px; cursor: pointer;
}
.cl-pick__btn:first-child { border-radius: 8px 0 0 8px; }
.cl-pick__btn:last-child { border-radius: 0 8px 8px 0; }
.cl-pick__btn.is-on { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

/* Person details */
.circle-modal__card { max-width: 560px; }
.circle-modal__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.circle-modal__titles { flex: 1; min-width: 0; }
.circle-modal__name { font-size: 19px; font-weight: 600; color: var(--text); }
.circle-modal__rel { font-size: 14px; color: var(--accent-strong); }
.circle-modal__body .me-field { margin-bottom: 12px; }
.circle-modal__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); text-align: right; }

/* ---------- Plans ---------- */
.plan-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

.plan-page { max-width: 900px; margin: 0 auto; padding-bottom: 60px; }
.plan-page__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.plan-back, .plan-del {
  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--accent-strong); cursor: pointer; padding: 4px 2px; border-radius: 7px;
}
.plan-del { color: var(--muted); }
.plan-del:hover { color: var(--neg); }
.plan-title {
  display: block; width: 100%; border: 0; background: none; outline: none; padding: 0;
  font: inherit; font-size: 24px; font-weight: 600; color: var(--text);
}
.plan-title::placeholder { color: var(--muted); }
.plan-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }

.plan-sec { padding: 20px 0; border-top: 1px solid var(--border); }
.plan-sec__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.plan-sec__n {
  flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent-strong); color: #fff; font-size: 12px; font-weight: 700;
}
.plan-sec__title { flex: 1; margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.plan-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 9px;
  padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--accent-strong); cursor: pointer;
}
.plan-btn:hover { border-color: var(--accent); }
.plan-field {
  display: block; width: 100%; box-sizing: border-box; min-height: 90px;
  border: 0; background: none; outline: none; resize: none; overflow: hidden; padding: 0;
  font: inherit; font-size: 15px; line-height: 1.7; color: var(--text);
}
.plan-field::placeholder { color: var(--muted); }
.plan-empty { margin: 0; font-size: 14px; color: var(--muted); }
.plan-ai { font-size: 14px; line-height: 1.65; }

/* Steps */
.plan-steps { display: flex; flex-direction: column; gap: 4px; }
.plan-step { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.plan-step__check {
  flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px;
  border: 1.5px solid var(--border); border-radius: 5px; background: none;
  color: #fff; font-size: 11px; cursor: pointer; padding: 0;
}
.plan-step.is-done .plan-step__check { background: var(--accent-strong); border-color: var(--accent-strong); }
.plan-step__n { flex-shrink: 0; width: 20px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-step__text {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 4px 0;
  font: inherit; font-size: 14px; color: var(--text);
}
.plan-step.is-done .plan-step__text { text-decoration: line-through; color: var(--muted); }
.plan-step__btn {
  flex-shrink: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px 5px; border-radius: 6px;
}
.plan-step__btn:hover { color: var(--accent-strong); background: var(--bg); }
.plan-step__btn.is-danger:hover { color: var(--neg); }
.plan-addstep {
  margin-top: 10px; border: 0; background: none; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--accent); cursor: pointer; padding: 4px 2px;
}

/* Schedule: list on the left, month on the right */
.plan-sched { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.plan-sched__list { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.plan-schedrow { display: flex; align-items: center; gap: 8px; }
.plan-schedrow.is-done .plan-schedrow__text { text-decoration: line-through; color: var(--muted); }
.plan-schedrow__text { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-schedrow__date, .plan-schedrow__time {
  flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 4px 7px; font: inherit; font-size: 12px; color: var(--text);
}
.plan-schedrow__time { width: 92px; }
.plan-cal { flex: 0 0 262px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); }
.plan-cal__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.plan-cal__label { font-size: 14px; font-weight: 700; }
.plan-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.plan-cal__dow span { font-size: 10px; color: var(--muted); text-align: center; padding-bottom: 4px; }
.plan-cal__day {
  position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center;
  font-size: 12px; border-radius: 7px; color: var(--text); font-variant-numeric: tabular-nums;
}
.plan-cal__day.is-empty { visibility: hidden; }
.plan-cal__day.is-today { outline: 1px solid var(--accent); }
.plan-cal__day.has-step { background: var(--bg); font-weight: 700; color: var(--accent-strong); }
.plan-cal__dot { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* Compact birthday / bills cards in the side rail. */
.side-mini .card__head { margin-bottom: 6px; }
.side-mini .card__title { font-size: 14px; }
.side-mini .brief__list { margin: 0; padding: 0; list-style: none; }
.side-mini .brief__item { font-size: 12.5px; padding: 2px 0; }

.side-hello__date {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-top: 2px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.side-hello__dow { font-weight: 600; color: var(--accent-strong); }
/* Weather block, laid out like the Home page: degree on the left, the sun icon
   over the condition, the time on the right, and the location on its own line
   underneath. */
.side-hello__row { margin-top: 8px; text-align: center; }
/* Weather group: exactly the Home card's proximity — degree on the left, the
   cloud nudged down over the condition — with the location centered underneath. */
.side-hello__wx {
  display: grid;
  width: 100%;
  /* Spacer columns keep the degree/icon group centered while the location row
     still spans the full width. */
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-areas:
    ".     temp icon  ."
    ".     temp desc  ."
    "place place place place";
  align-items: center;
  column-gap: 10px; row-gap: 2px;
  border: 0; background: none; padding: 0; margin: 0;
}
.side-hello__wx .weather__temp {
  grid-area: temp; align-self: end;
  font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--text);
}
.side-hello__wx .weather__icon { grid-area: icon; align-self: end; transform: translateY(6px); color: var(--accent); display: flex; }
.side-hello__wx .weather__icon svg { width: 26px; height: 26px; }
.side-hello__wx .weather__desc {
  grid-area: desc; align-self: end;
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
}
.side-hello__wx .weather__place {
  grid-area: place; justify-self: stretch; text-align: center; margin-top: 10px;
  max-width: none; white-space: normal;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.side-hello__wx .weather__place::before { content: none; }
.side-hello__wx .weather__set { grid-area: desc; justify-self: center; color: var(--accent); font-weight: 600; }
/* Full-width rule under the location, with the time centered beneath it. */
.side-hello__time {
  display: block; text-align: center;
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 19px; font-weight: 600; letter-spacing: 0;
  color: var(--accent-strong); font-variant-numeric: tabular-nums;
}
.side-hello__time .clock__sec { font-size: 1em; }
.side-hello__time .clock__ampm { font-size: 12px; color: var(--text); margin-left: 2px; }

.clock {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.hero__date { color: var(--muted); font-size: 14px; }

/* ---------- Ask / AI box ---------- */
.ask { margin-bottom: 14px; }

.ask__box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}
.ask__label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}
.ask__input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
  background: var(--bg);
}
.ask__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.ask__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.ask__time {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  background: var(--bg);
}
.ask__hint { color: var(--muted); font-size: 12px; flex: 1; }

.ask__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.ask__button:hover { background: var(--accent-soft); border-color: var(--accent); }
.ask__button-icon { font-size: 16px; line-height: 1; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.card__title { margin: 0; font-size: 14px; font-weight: 700; flex: 1; }
/* Section totals sit directly above the Planned / Actual columns. */
.card__head .entry__total {
  width: 92px;
  box-sizing: border-box;
  text-align: right;
  flex: none;
}

.pill {
  background: var(--bg);
  color: var(--muted);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
}
/* Actual total pill — outlined so it reads as the "entered" figure */
.pill--actual {
  background: none;
  color: var(--accent-text);
  border: 1px solid var(--accent-soft, var(--border));
}

/* ---------- Schedule ---------- */
/* Capped so a long day can't push the habits card off the bottom of the rail. */
.schedule { list-style: none; margin: 0; padding: 0; max-height: 400px; overflow-y: auto; }

.schedule__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.schedule__item:first-child { border-top: 0; }

.schedule__check {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.schedule__body { flex: 1; min-width: 0; }
.schedule__text { word-break: break-word; }
.schedule__time {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 1px 6px;
  margin-top: 3px;
}
.schedule__item.is-done .schedule__text {
  text-decoration: line-through;
  color: var(--muted);
}

/* hours-left line above the timeline */
.sched-hoursleft {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

/* hour grid: time gutter on the left, tasks (drop target) on the right */
.sched-hour {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.sched-hour:first-child { border-top: 0; }
.sched-hour__time {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.sched-hour.is-now .sched-hour__time { color: var(--accent); }
.sched-hour__tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sched-hour__empty {
  font-size: 11.5px;
  color: #c9bfae;
  padding: 3px 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.sched-hour__empty:hover { color: var(--accent); }
.sched-hour__addform { padding: 1px 0; }
.sched-hour__addinput {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--accent);
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  padding: 2px 0;
  outline: none;
}
.sched-hour__addinput::placeholder { color: var(--muted); }

/* the row a task is being dragged over */
.sched-hour.is-drop,
.sched-untimed.is-drop {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.sched-task {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: grab;
}
.sched-task:active { cursor: grabbing; }
.sched-task.is-dragging { opacity: 0.4; }
.sched-task__text { flex: 1; min-width: 0; word-break: break-word; }
.sched-task.is-done .sched-task__text {
  text-decoration: line-through;
  color: var(--muted);
}
/* badge on read-only items pulled in from To-Do's / plan steps */
.sched-task__src {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

/* schedule title acts as a "back to today" button on other days */
#scheduleTitle { cursor: pointer; color: var(--accent-strong); }
/* Full-width rule under the "Today's Schedule" heading row. */
#scheduleCard .card__head {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
#scheduleTitle.is-away { color: var(--accent); }
#scheduleTitle.is-away::after { content: ' ↩'; font-size: 12px; }

.sched-untimed {
  padding: 9px;
  margin: 4px 0 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 239px;      /* hard cap — then the list scrolls */
  overflow-y: auto;
}
.sched-untimed__head {
  position: sticky;
  top: -9px;              /* pin under the padding while rows scroll */
  background: var(--bg);
  padding: 4px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

/* Notes box that opens under a task when you click it. */
.sched-notes {
  margin: 2px 0 8px 26px;
  padding: 8px 10px;
  border-left: 2px solid var(--accent);
  background: var(--bg);
  border-radius: 0 8px 8px 0;
}
.sched-notes__head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-strong); margin-bottom: 4px;
}
.sched-notes__box {
  display: block; width: 100%; box-sizing: border-box; min-height: 46px;
  border: 0; background: none; outline: none; resize: none; overflow: hidden; padding: 0;
  font: inherit; font-size: 14px; line-height: 1.55; color: var(--text);
}
.sched-notes__box::placeholder { color: var(--muted); }
.sched-task { cursor: pointer; }
.sched-task.is-noting .sched-task__text { color: var(--accent-strong); }
/* A dot after the text marks a task that already has a note. */
.sched-task.has-note .sched-task__text::after {
  content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); margin-left: 6px; vertical-align: middle;
}

/* Archived-tasks link (right of the "time left in the day" line). */
.sched-archrow { display: flex; justify-content: flex-end; margin: 2px 0 6px; }
.sched-archlink {
  border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; align-items: center; gap: 4px;
}
.sched-archlink:hover { color: var(--accent-strong); }

/* Archived-tasks list (shown in place of the schedule). */
.sched-archive { display: flex; flex-direction: column; gap: 6px; max-height: 400px; overflow-y: auto; }
.sched-archive__empty { font-size: 12.5px; color: var(--muted); padding: 8px 2px; }
.arch-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.arch-item__text { flex: 1; min-width: 0; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-item__when { font-size: 11px; color: var(--muted); white-space: nowrap; }
.arch-item__btn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 3px 5px; border-radius: 6px; }
.arch-item__btn:hover { color: var(--accent-strong); background: var(--bg); }

.sched-divider {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 8px 0 4px;
}

/* ---------- Morning brief ---------- */
/* ---------- Morning brief (ported from the standalone design) ---------- */
.brief {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 20px;
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20,18,15,.04), 0 12px 32px rgba(20,18,15,.06);
}
.brief__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.brief__glow--a {
  top: -90px; right: -70px; width: 280px; height: 280px; opacity: .55;
  background: radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 70%);
}
.brief__glow--b {
  bottom: -120px; left: -60px; width: 240px; height: 240px; opacity: .4;
  background: radial-gradient(circle at 60% 60%, rgba(150,170,210,.45), transparent 70%);
}

.brief__inner { position: relative; display: flex; }
.brief__main { flex: 1 1 62%; min-width: 0; padding: 28px 26px; display: flex; flex-direction: column; gap: 22px; }
.brief__side { flex: 1 1 38%; min-width: 0; padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.brief__rule { height: 1px; background: var(--border); }
.brief__vr { width: 1px; background: var(--border); flex: 0 0 1px; }

.brief__greet { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.brief__greet .name-btn { font: inherit; color: var(--accent-strong); border-bottom-color: transparent; }
.brief__greet .name-btn:hover { color: var(--accent); }
.brief__date { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.brief__weekday { color: var(--accent-strong); font-size: 15px; }

/* 7-day selector under the date (7 x 42px circles + 6 x 6px gaps) */
.brief__days, .brief__expand { --brief-strip-w: 330px; }
.brief__days { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
.brief__day {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text); line-height: 1;
}
.brief__day:hover { border-color: var(--accent); }
.brief__day-l { font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.brief__day-n { font-size: 14px; font-weight: 600; margin-top: 2px; }
.brief__day.is-today:not(.is-active) { border-color: var(--accent); }
.brief__day.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.brief__day.is-active .brief__day-l { color: #fff; }

/* Expanded: the whole month as a Mon-first grid, circles the same fixed 42px
   as the week strip. */
.brief__days--month {
  display: grid; grid-template-columns: repeat(7, 42px);
  gap: 6px; justify-content: start; overflow-x: auto;
  max-width: none;
}
.brief__days--month .brief__day { width: 42px; height: 42px; }
.brief__day-gap { width: 42px; height: 42px; }

/* Expand / Collapse toggle, right-aligned to the day strip. */
.brief__expand {
  display: block; width: 100%; max-width: var(--brief-strip-w); text-align: right;
  margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px;
}
.brief__expand:hover { color: var(--accent); }
.brief:not(.brief--today) .brief__expand { display: none; }

/* Today / Home have no title bar; keep the content sitting a little down. */
#view-home .sub-panel, #view-today .sub-panel { padding-top: 44px; }

/* Habits show only on the Today (book-page) brief, not on Home. */
.brief:not(.brief--today) .brief__habits { display: none; }

/* Home brief: a simple greeting + date on the left, weather / location / time on
   the right. Hide the day strip, the schedule/bills/birthdays columns, and the
   news block; keep the card at its current footprint. */
.brief:not(.brief--today) .brief__days { display: none; }
.brief:not(.brief--today) .brief__cols { display: none; }
.brief:not(.brief--today) .brief__newsblock { display: none; }
.brief:not(.brief--today) .brief__side .brief__rule { display: none; }
/* No divider under the greeting/date block on Home. */
.brief:not(.brief--today) .brief__main > .brief__rule { display: none; }
/* Greeting/date container matches the location/time (weather) container height. */
.brief:not(.brief--today) .brief__main { gap: 0; }
.brief:not(.brief--today) .brief__main > div:first-child {
  min-height: 74px;   /* same as the weather block */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Book-page proportions for the Today brief. */
.brief--today { max-width: 1250px; margin: 0 auto; }
/* Coral section headers on Today (Scheduled, Bills, Markets, Habits, …). */
.brief--today .brief__label { color: var(--accent-strong); }

/* Second header stacked in a column (Birthdays under Bills). */
.brief__head--stacked { margin-top: 22px; }

/* "+ add to schedule" button on the Today Scheduled header (Today only). */
.brief__add { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.brief__add:hover { color: var(--accent); background: var(--bg); }
.brief:not(.brief--today) .brief__add { display: none; }
.brief__addsched { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0 8px; }
.brief__addsched input[type=text] { flex: 1; min-width: 120px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 13.5px; padding: 4px 0; outline: none; }
.brief__addsched input[type=text]:focus { border-bottom-color: var(--accent); }
.brief__addsched input[type=time] { border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; font: inherit; background: var(--bg); }

/* Today's Schedule card lives inside the brief on Today (drop the card chrome);
   the simple list shows on Home instead. */
.brief--today #briefSchedule { display: none; }
.brief:not(.brief--today) #briefSchedHost { display: none; }
#briefSchedHost { margin-top: 4px; }
#briefSchedHost > .card { border: 0; background: none; box-shadow: none; padding: 0; margin: 0; }
#briefSchedHost .card__head { margin-bottom: 6px; }
/* The Today brief is a single column now — it takes the whole width the two
   columns used to share. */
.brief--today .brief__col--sched { flex: 1 1 100%; width: 100%; padding: 0; }

/* ---- "Let's plan your day" chat column (Today brief) ---- */
.brief__col--plan { display: flex; flex-direction: column; min-height: 0; align-self: stretch; }
.planday__sub { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.planday__window {
  flex: 1 1 auto; min-height: 220px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg);
  margin-bottom: 12px;
}
.planday__empty { margin: auto 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; }
.planday__box { flex: 0 0 auto; }

/* ---- Today fits the browser window; only inner regions scroll ----
   Applies on the two-column brief (≥641px). The shell becomes exactly one
   viewport tall and every wrapper flexes so the schedule column, the plan
   window, and the side rail each scroll on their own instead of the page. */
@media (min-width: 641px) {
  body.is-today .shell { height: 100dvh; overflow: hidden; }
  body.is-today .content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  /* Today gets the full content width — the card's own max-width does the
     centring, so there's only a slim gutter either side. */
  body.is-today .content__col {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    max-width: none; padding: 30px 14px 12px;
  }
  body.is-today #view-today.is-active { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body.is-today #view-today .sub-panel.is-active { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 14px; }
  body.is-today .brief--today { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: none; }
  body.is-today .brief--today .brief__inner { flex: 1; min-height: 0; }
  body.is-today .brief--today .brief__main { min-height: 0; }
  body.is-today .brief__cols { flex: 1; min-height: 0; }
  body.is-today .brief__col--sched { overflow-y: auto; min-height: 0; }
  body.is-today .brief__col--plan { min-height: 0; }
  body.is-today .planday__window { min-height: 0; }
  body.is-today .brief__side { overflow-y: auto; min-height: 0; }
}

/* Narrow side panel keeps normal page scroll, but cap the chat window so its
   responses always scroll inside it. */
@media (max-width: 640px) {
  .planday__window { max-height: 320px; }
}
.brief--today .brief__inner { min-height: 780px; }
/* Left column takes everything the fixed right side doesn't, minus its own
   left/right padding. */
.brief--today .brief__main { flex: 1 1 auto; min-width: 0; padding: 34px 30px; }
.brief--today .brief__side { flex: 0 0 292px; padding: 34px 26px; gap: 18px; }
.brief--today .brief__habits { display: flex; flex-direction: column; gap: 18px; }

/* ---- Habits (Today brief) ---- */
#habitsBody { margin-top: 14px; }
.hb-row { display: flex; align-items: center; gap: 11px; font-size: 13.5px; padding: 5px 0; }
.hb-name { flex: 0 0 auto; }
.hb-water .hb-name { min-width: 44px; }
.hb-cups { display: flex; gap: 4px; flex: 1; }
.hb-cup { width: 13px; height: 16px; padding: 0; border: 1.4px solid #e7c9bd; border-radius: 0 0 5px 5px; background: none; cursor: pointer; }
.hb-cup.is-full { background: var(--accent); border-color: var(--accent); }
.hb-count { font-size: 12px; color: var(--muted); }
.hb-check { width: 15px; height: 15px; flex: 0 0 auto; display: grid; place-items: center; border: 1.6px solid var(--accent); border-radius: 50%; }
.hb-toggle { border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; text-align: left; width: 100%; padding: 5px 0; }
.hb-toggle.is-done { color: #9a948a; }
.hb-toggle.is-done .hb-check, .hb-meal.is-done .hb-check { background: var(--pos); border-color: var(--pos); }
.hb-sublabel { font-size: 13.5px; color: var(--text); margin: 18px 0 2px; }
.hb-meal .hb-name { flex: 1; }
.hb-meal.is-done .hb-name { color: #9a948a; text-decoration: line-through; }
.hb-check-btn { border: 0; background: none; padding: 0; cursor: pointer; display: flex; }
.hb-time { border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--accent-strong); cursor: pointer; padding: 0; }
.hb-meal.is-done .hb-time { color: var(--muted); }
.hb-add { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-strong); cursor: pointer; padding: 10px 0 0; }

/* Entrance: hidden on load, then the slide-up begins 0.02s before the fade-in. */
@keyframes briefSlide { from { transform: translateY(100px); } to { transform: translateY(0); } }
@keyframes briefFade  { from { opacity: 0; } to { opacity: 1; } }
.brief--in {
  animation:
    briefSlide 2.2s cubic-bezier(.2, .7, .2, 1) 0.99s both,
    briefFade  2.2s ease 1s both;
}

/* The Home chat stays hidden until 0.01s after the brief finishes (~3.2s), then
   slides up starting 0.03s before it fades in (same as the brief). */
@keyframes chatSlide  { from { transform: translateY(100px); } to { transform: translateY(0); } }
@keyframes chatFadeIn { from { opacity: 0; } to { opacity: 1; } }
.home-chat.chat--in {
  animation:
    chatSlide  1s cubic-bezier(.2, .7, .2, 1) 3.18s both,
    chatFadeIn 1s ease 3.21s both;
}

@media (prefers-reduced-motion: reduce) {
  .brief--in, .home-chat.chat--in { animation: none; }
}

/* ---------- Time · To-Do's (print-clean redesign) ---------- */
.todos { position: relative; padding: 0; }
.todos__cols { position: relative; display: flex; gap: 14px; align-items: flex-start; }
/* Lists column is now a vertical stack of per-category cards. */
.todos__lists { flex: 1 1 52%; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
/* Cap the list column only when the detail column is open. */
.todos__cols.has-detail .todos__lists { max-width: 350px; }
.todos__vr { display: none; }
.todos__detail {
  flex: 1 1 48%; min-width: 0; padding: 24px 24px 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20,18,15,.04);
}

/* ---- Task open: header + list on the left, full-height info/plan on the right ---- */
/* The .is-active guard matters: an id selector outranks `.view { display:none }`,
   so without it the Time view stayed on screen after switching pages. */
#view-time.detailing.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
  column-gap: 16px;
  align-items: start;
}
#view-time.detailing > .view__header { grid-column: 1; grid-row: 1; }
#view-time.detailing > .sub-panel.is-active { grid-column: 1; grid-row: 2; }
#view-time.detailing > .todos__detail--panel {
  grid-column: 2; grid-row: 1 / span 2;
  position: sticky; top: 12px; align-self: stretch;
  min-height: calc(100vh - 24px); max-height: calc(100vh - 24px); overflow-y: auto;
  margin: 0;
}
@media (max-width: 640px) {
  #view-time.detailing.is-active { display: block; }
  #view-time.detailing > .todos__detail--panel {
    position: static; height: auto; min-height: 0; max-height: none; margin-top: 14px;
  }
}

/* Each category: a no-background header (like "Todo's") above its own card. */
.todos__cat { display: flex; flex-direction: column; gap: 18px; margin-top: 0; }
.todos__cat > .todos__cat-head { padding: 0 2px 8px; border-bottom: 1px solid var(--border); }
.todos__catcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(20,18,15,.04);
}
/* Header now sits outside the card, so tasks no longer need the hanging indent. */
.todos__catcard .todos__tasks { padding-left: 0; }
/* Cards view: header outside, task tiles inside. The category itself has no
   card chrome — only the individual task tiles keep their background/border. */
.todos__cardsec { display: flex; flex-direction: column; gap: 18px; }
.todos__cardsec > .todos__cat-head { padding: 0 2px 8px; border-bottom: 1px solid var(--border); }
.todos__cardsec .todos__catcard {
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}

.todos__title { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.todos__sub { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 3px; }

.todos__cat { margin-top: 24px; }
.todos__cat-head { display: flex; align-items: center; gap: 7px; }
.todos__cat-ic { color: var(--accent); display: flex; }
.todos__cat-ic svg { width: 16px; height: 16px; }
.todos__cat-name { font-size: 18px; font-weight: 700; letter-spacing: .02em; text-transform: capitalize; color: var(--accent-strong); }
.todos__cat-name.is-empty { color: var(--muted); }

/* list options (⋯) menu */
.todos__catmenu { position: relative; margin-left: auto; }
.todos__cat-more { border: 0; background: none; color: #c9c1b4; cursor: pointer; padding: 2px 4px; display: flex; align-items: center; border-radius: 6px; }
.todos__cat-more svg { width: 16px; height: 16px; }
.todos__cat-more:hover { color: var(--text); background: var(--bg); }
.todos__dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,18,15,.12); padding: 4px; min-width: 132px;
  display: flex; flex-direction: column;
}
.todos__dropitem { border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: left; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.todos__dropitem:hover { background: var(--bg); }
.todos__dropitem--danger { color: var(--neg); }
.todos__cat-rule { height: 1px; background: var(--border); margin: 10px 0 12px; }

.todos__tasks { padding-left: 22px; }
.todos__task { display: flex; align-items: center; gap: 11px; padding: 6px 0; font-size: 15px; letter-spacing: .04em; }
.todos__check {
  width: 13px; height: 13px; flex: 0 0 auto; padding: 0;
  border: 1.6px solid var(--accent); border-radius: 50%;
  background: none; cursor: pointer; display: grid; place-items: center;
}
.todos__task.is-done { color: #9a948a; }
.todos__task.is-done .todos__check { background: var(--pos); border-color: var(--pos); }
.todos__task.is-done .todos__name { text-decoration: line-through; }
.todos__name { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.todos__task.is-selected .todos__name { font-weight: 600; }
.todos__due { font-size: 12.5px; color: var(--muted); flex: 0 0 auto; }

/* align "+ add a task" with the task text (past the check circle) */
.todos__addform { margin-top: 4px; margin-left: 24px; }
.todos__addtask {
  width: 190px; max-width: 100%; border: 0; border-bottom: 1px solid transparent;
  background: none; font: inherit; font-size: 14px; color: var(--text); padding: 6px 0 2px; outline: none;
}
.todos__addtask::placeholder { color: #b7b0a4; }
.todos__addtask:placeholder-shown { border-bottom-color: var(--border); }
.todos__addtask:focus { border-bottom-color: var(--accent); }

.todos__newlist { margin-top: 24px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-strong); cursor: pointer; padding: 0; }

/* detail column */
.todos__detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.todos__detail-title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--accent); flex: 1; min-width: 0; }
.todos__title-in {
  font-family: inherit; border: 0; background: none; padding: 0 0 2px; width: 100%; outline: none;
  border-bottom: 1px solid transparent;
}
.todos__title-in:focus { border-bottom-color: var(--accent); }
.todos__detail-close { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; flex: 0 0 auto; }
.todos__detail-close:hover { color: var(--accent); }
.todos__sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.todos__sec-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--accent-strong); }
.todos__rule { height: 1px; background: var(--border); flex: 1; }
.todos__info { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: start; font-size: 13.5px; padding-left: 16px; margin-bottom: 22px; }
.todos__info label { color: var(--muted); padding-top: 3px; }
.todos__plan { padding-left: 16px; }
.todos__in {
  width: 100%; border: 0; border-bottom: 1px solid transparent; background: none;
  font: inherit; font-size: 13.5px; color: var(--text); padding: 3px 0; outline: none; resize: none;
}
.todos__in::placeholder { color: #b7b0a4; }
.todos__in:placeholder-shown { border-bottom-color: var(--border); }
.todos__in:focus { border-bottom-color: var(--accent); }
.todos__pair { display: flex; gap: 8px; }
.todos__pair .todos__in { border-bottom: 1px solid var(--border); }
.todos__pair .todos__in:focus { border-bottom-color: var(--accent); }

.todos__step { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.todos__step-num { color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; flex: 0 0 auto; }
.todos__step.is-done .todos__step-num { color: var(--pos); }
.todos__step.is-done .todos__in { text-decoration: line-through; color: #9a948a; }
.todos__step-rm { border: 0; background: none; color: #c9c1b4; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; flex: 0 0 auto; }
.todos__step-rm:hover { color: var(--neg); }
.todos__addstep { margin-top: 6px; border: 0; background: none; font: inherit; font-size: 14px; color: #b7b0a4; cursor: pointer; padding: 4px 0; }
.todos__addstep:hover { color: var(--accent-text); }

.todos__detail-rule { height: 1px; background: var(--border); margin: 20px 0 14px; }
.todos__delete { border: 0; background: none; font: inherit; font-size: 14px; color: var(--neg); cursor: pointer; padding: 0; }

/* ---- To-Do's card header (title + counts) ---- */
.todos__header { min-width: 0; }
.todos__header-left { min-width: 0; }

/* ---- Time view title row: "Todo's" on the left, view toggle on the right ---- */
.view__titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.view__actions { flex: 0 0 auto; display: flex; align-items: center; }
.view__subtitle { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.view__subtitle:empty { display: none; }

/* ---- List / Cards view toggle (sits beside the "Todo's" header) ---- */
.todos__viewtoggle {
  flex: 0 0 auto;
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
}
.todos__viewbtn {
  display: grid; place-items: center; width: 30px; height: 28px;
  border: 0; background: none; border-radius: 7px; cursor: pointer; color: var(--muted); padding: 0;
}
.todos__viewbtn svg { width: 17px; height: 17px; }
.todos__viewbtn:hover { color: var(--text); }
.todos__viewbtn.is-active { background: var(--surface); color: var(--accent-strong); box-shadow: 0 1px 2px rgba(20,18,15,.08); }

/* ---- Cards view ---- */
.todos__cards { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.todos__cardsec { margin-top: 0; }
.todos__cardgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.todos__card {
  display: flex; flex-direction: column; gap: 8px;
  height: 200px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 14px; cursor: pointer; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,18,15,.04);
}
.todos__card:hover { border-color: var(--accent); }
.todos__card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.todos__card-top { display: flex; align-items: flex-start; gap: 10px; }
.todos__card-name { font-size: 16.5px; font-weight: 400; text-transform: capitalize; color: var(--text); line-height: 1.6; }
.todos__card.is-done .todos__card-name { text-decoration: line-through; color: #9a948a; }
.todos__card.is-done .todos__check { background: var(--pos); border-color: var(--pos); }
.todos__card-meta { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 23px; }
.todos__card-meta > span {
  font-size: 11px; color: var(--muted);
  background: var(--bg); border-radius: 6px; padding: 2px 7px;
}
.todos__card-due { color: var(--accent-strong) !important; }
.todos__cardadd {
  display: flex; align-items: center;
  border: 1px dashed var(--border); border-radius: 12px; padding: 13px 14px;
}
.todos__cardadd-in { width: 100%; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); outline: none; }
.todos__cardadd-in::placeholder { color: #b7b0a4; }
.todos__cardadd:focus-within { border-color: var(--accent); }
.todos__cards .todos__newlist { margin-top: 22px; }

/* Narrow side panel: stack the detail below the lists */
@media (max-width: 640px) {
  .todos__cols { flex-direction: column; }
  .todos__vr { display: none; }
  .todos__lists, .todos__detail { flex-basis: auto; }
  .todos__detail { border-top: 1px solid var(--border); }
  .todos__cardgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* three day columns divided by hairlines */
.brief__cols { display: flex; gap: 0; }
.brief__col { flex: 1; min-width: 0; padding: 0 18px; }
.brief__col:first-child { padding-left: 0; }
.brief__col:last-child { padding-right: 0; }
.brief__head { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.brief__ic { color: var(--accent); display: flex; }
.brief__ic svg { width: 17px; height: 17px; }
.brief__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.brief__list { list-style: none; margin: 0; padding: 0; }
.brief__item { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.brief__item:last-child { margin-bottom: 0; }
.brief__item--sched { display: flex; gap: 10px; }
.brief__t { flex: 0 0 40px; color: var(--muted); font-variant-numeric: tabular-nums; }
.brief__l { font-weight: 560; }
.brief__item--empty { color: var(--muted); font-style: italic; }

/* weather: city label on top, big temp, condition · time below */
.brief .weather {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 0 12px; margin: 0;
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
}
.brief .weather__place {
  order: -1; flex-basis: 100%;
  max-width: none; white-space: normal;   /* override the base 120px cap so it fills its own line */
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.brief .weather__place::before { content: none; }   /* drop the base "· " prefix */
.brief .weather__icon { order: 2; color: var(--accent); display: flex; align-self: center; transform: translateY(-6px); }
.brief .weather__icon svg { width: 26px; height: 26px; }
.brief .weather__temp { order: 1; font-size: 32px; font-weight: 600; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.brief .weather__desc { display: none; }
.brief__wxline { font-size: 14px; color: var(--muted); margin-top: 2px; }
.brief__wxline #briefCondition { font-size: 14px; font-weight: 600; }
.brief__wxline .clock { font: inherit; font-weight: 600; letter-spacing: 0; color: var(--text); }

/* ---- Home weather block ----
   Location on top; then the sun icon over the condition ("Clear") in one column,
   with the degree to its left and the time to its right, all on the same band.
   A divider line sits under the block (aligned with the one under the date). */
.brief:not(.brief--today) .brief__side { padding: 36px 24px 0; }
.brief:not(.brief--today) .brief__wx {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "temp  icon  place"
    "temp  clear time";
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  min-height: 74px;
  box-sizing: border-box;
  transform: translateY(-14px);   /* lift the weather block up to the date's level */
}
.brief:not(.brief--today) .weather { display: contents; }
.brief:not(.brief--today) .weather__place { grid-area: place; justify-self: start; align-self: end; margin-bottom: 2px; transform: translate(10px, 6px); }
.brief:not(.brief--today) .weather__temp  { grid-area: temp; font-size: 32px; align-self: end; line-height: 1; }
.brief:not(.brief--today) .weather__icon  { grid-area: icon; transform: translateY(16px); align-self: end; }
.brief:not(.brief--today) .weather__desc  { grid-area: clear; display: block; font-size: 12px; font-weight: 600; color: var(--muted); align-self: end; }
.brief:not(.brief--today) .brief__wxline  { grid-area: time; align-self: end; justify-self: start; margin: 0; transform: translateX(10px); }
.brief:not(.brief--today) .brief__wxline .clock { line-height: 1; }
.brief:not(.brief--today) .brief__wxline #briefCondition,
.brief:not(.brief--today) .brief__wxdot { display: none; }
.brief:not(.brief--today) .brief__wxline .clock {
  font-size: 28px; font-weight: 600; color: var(--accent-strong);
  font-variant-numeric: tabular-nums;   /* equal-width digits so PM doesn't shift */
}
/* Seconds and AM/PM match the hour size; AM/PM stays black. */
.clock__sec { font-size: 1em; }
.clock__ampm { font-size: 23px; color: var(--text); margin-left: 3px; }

/* ---- Home chat panel (left, under the date line) + quick links (right) ---- */
.brief--today .home-chatpanel,
.brief--today .home-links { display: none; }
/* Chat row (below the greeting/weather row): reply on the left, past-chats
   column on the right that slides in. */
.home-chatpanel { position: relative; display: flex; align-items: stretch; padding: 24px 26px; border-top: 1px solid var(--border); overflow: hidden; }
.home-chatmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.home-replywrap { width: 100%; max-width: 900px; margin: 0 auto; box-sizing: border-box; }
.home-replywrap .home-reply { max-width: none; margin: 0; }
/* When the past-chats column is open, keep equal space on the reply's left and
   right (so it doesn't hug the drawer). */
body.home-drawer-open .home-replywrap { padding: 0 24px; }

/* Past-chats toggle: top-right of the row when closed; slides left to the
   reply's top-right (clear of the drawer) when open. */
.home-drawer-btn {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  display: grid; place-items: center; width: 32px; height: 30px; padding: 0;
  border: 1px solid var(--border); background: var(--bg); border-radius: 9px;
  color: var(--muted); cursor: pointer;
  transition: right .25s ease;
}
/* Button stays put (top-right of the row) whether the drawer is open or not. */
.home-drawer-btn svg { width: 17px; height: 17px; }
.home-drawer-btn:hover { color: var(--accent-strong); border-color: var(--accent); }
/* New-chat button sits to the right; past-chats button just left of it. */
.home-newchat-btn { right: 10px; }
#homePastBtn { right: 50px; }

/* Mind Map: Home-style chat under Time. Its own drawer open-state (per panel). */
.mind-hero { width: 100%; max-width: 720px; margin: 0 auto 12px; text-align: center; }
#mindPastBtn { right: 50px; }
#mindChatPanel.is-drawer-open .home-drawer { margin-right: 0; opacity: 1; pointer-events: auto; }
#mindChatPanel.is-drawer-open .home-replywrap { padding: 0 24px; }

/* Gallery (landing) vs. an open map. */
#sub-mindmap.is-gallery .mindmap-canvas,
#sub-mindmap.is-gallery .mindmap-chatcard,
#sub-mindmap.is-gallery .mindmap-tools,
#sub-mindmap.is-gallery .mindmap-back { display: none; }
#sub-mindmap:not(.is-gallery) .mindmap-gallery { display: none; }

.mindmap-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mm-mapcard {
  border: 1px solid var(--border); background: var(--surface); border-radius: 14px;
  padding: 16px 18px; text-align: left; cursor: pointer; font: inherit;
  box-shadow: 0 1px 2px rgba(20,18,15,.04); display: flex; flex-direction: column; gap: 8px; min-height: 120px;
}
.mm-mapcard:hover { border-color: var(--accent); }
.mm-mapcard__gist { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.mm-mapcard__when { font-size: 11px; color: var(--muted); margin-top: auto; }
.mm-mapcard--new { align-items: center; justify-content: center; text-align: center; color: var(--accent-strong); border-style: dashed; }
.mm-mapcard--new .mm-mapcard__plus { font-size: 26px; line-height: 1; }
.mm-mapcard--new .mm-mapcard__label { font-size: 14px; font-weight: 600; }

.mindmap-back {
  position: absolute; left: 20px; bottom: 20px; z-index: 21;
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 7px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; box-shadow: 0 8px 24px rgba(20,18,15,.14);
}
.mindmap-back:hover { color: var(--accent-strong); border-color: var(--accent); }

/* Full-page map with a floating chat card above it. */
#sub-mindmap.is-active { position: relative; display: block; padding: 0; min-height: calc(100dvh - 150px); }
.mindmap-canvas {
  position: absolute; inset: 0; overflow: auto;
  /* (the Journal overrides this below — its two columns scroll separately) */
  border: 1px solid var(--border); border-radius: 16px;
  background:
    radial-gradient(circle at 1px 1px, rgba(20,18,15,.06) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
}
.mindmap-canvas__hint { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 14px; color: var(--muted); }

/* Journal: identical to the Mind Map page, minus the tools card & gallery. */
#sub-journal.is-active { position: relative; display: block; padding: 0; min-height: calc(100dvh - 150px); }
#sub-journal .mindmap-chatcard .home-chatpanel { border-top: 0; padding: 0; opacity: 1; }
#sub-journal .mindmap-chatcard .home-reply { max-height: 38vh; }
/* Same hide-chat / reopen behaviour as the Mind Map. */
#sub-journal.chat-hidden .mindmap-chatcard { display: none; }
#sub-journal.chat-hidden:not(.is-gallery) .mindmap-chatbtn { display: grid; }

/* Gallery (landing) vs. an open entry — mirrors the Mind Map. */
#sub-journal.is-gallery .mindmap-canvas,
#sub-journal.is-gallery .mindmap-chatcard,
#sub-journal.is-gallery .mindmap-chatbtn,
#sub-journal.is-gallery .mindmap-back { display: none; }
#sub-journal:not(.is-gallery) .journal-gallery-wrap { display: none; }
.journal-gallery-wrap { padding: 4px 2px 24px; }
.journal-gallery__bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.journal-viewtoggle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
}
.journal-viewtoggle:hover { border-color: var(--accent); color: var(--accent-strong); }
/* List layout: one entry per row. */
.mindmap-gallery.is-list { grid-template-columns: 1fr; gap: 8px; }
.mindmap-gallery.is-list .mm-mapcard { flex-direction: row; align-items: baseline; gap: 14px; min-height: 0; padding: 12px 16px; }
.mindmap-gallery.is-list .mm-mapcard__gist { flex: 1; }
.mindmap-gallery.is-list .mm-mapcard__when { margin-top: 0; }
.mindmap-gallery.is-list .mm-mapcard--new { flex-direction: row; justify-content: center; }

/* Free-writing entry on the dotted canvas. */
/* Fills the whole width of its column so the writing space expands fully. */
.journal-entry { position: relative; z-index: 2; width: 100%; box-sizing: border-box; margin: 0; padding: 52px 32px 100px; }
.journal-entry__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.journal-entry__title {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none; padding: 0;
  font: inherit; font-size: 22px; font-weight: 600; color: var(--text);
}
.journal-entry__title::placeholder { color: var(--muted); font-weight: 600; }
.journal-entry__meta { flex-shrink: 0; text-align: right; white-space: nowrap; font-size: 12px; color: var(--muted); }
.journal-entry__body {
  display: block; width: 100%;
  min-height: 500px; padding: 0 0 100px;
  border: 0; background: none; outline: none; resize: none; overflow: hidden;
  font: inherit; font-size: 17px; line-height: 1.9; letter-spacing: .05em; color: var(--text);
}
.journal-entry__body::placeholder { color: var(--muted); }

/* ---- Analyze / discuss: sliding right column ----
   The page itself doesn't scroll: each column scrolls on its own. */
.journal-editor { display: flex; align-items: stretch; height: 100%; }
.journal-main { flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; }
/* Grows with the content, so the absolute drawing layer scrolls along with it. */
.journal-page { position: relative; min-height: 100%; }
/* Flat off-white writing surface (same tone as the nav rail), no dots. */
#journalCanvas { background: var(--surface); }

/* Several titled blocks can share one page. */
.journal-block + .journal-block { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); }
/* Every entry on the page shows in full — the box grows to fit its text and
   never scrolls inside itself. */
.journal-block .journal-entry__body { min-height: 160px; height: auto; padding-bottom: 0; }
.journal-block.is-only .journal-entry__body { min-height: 500px; }

/* ---- Drawing layer (pen, highlight, boxes, connectors, text) ---- */
.journal-draw { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.journal-draw.is-drawing { pointer-events: auto; }
.journal-draw__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--accent-strong); }
.journal-draw__texts { position: absolute; inset: 0; }
/* In select mode only the shapes themselves are clickable. */
.journal-draw [data-shape], .journal-draw [data-link] { pointer-events: auto; }
.journal-draw.is-drawing { cursor: crosshair; }
.journal-draw[data-tool="text"] { cursor: text; }
.journal-draw[data-tool="line"] { cursor: pointer; }
.journal-draw[data-tool="erase"] { cursor: cell; }

/* ⋮ menu beside an entry block's date/time. */
.journal-block__menu { position: relative; flex-shrink: 0; }
.journal-block__kebab {
  border: 0; background: none; font: inherit; font-size: 16px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.journal-block__kebab:hover { color: var(--accent-strong); background: var(--bg); }
.journal-block__pop {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 40;
  min-width: 120px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20, 18, 15, .18);
  display: flex; flex-direction: column; gap: 1px;
}
.journal-block__popitem {
  border: 0; background: none; font: inherit; font-size: 14px; color: var(--text);
  text-align: left; padding: 7px 10px; border-radius: 7px; cursor: pointer;
}
.journal-block__popitem:hover { background: var(--bg); }
.journal-block__popitem.is-danger { color: var(--neg); }

.jd-box { fill: none; stroke: var(--accent-strong); stroke-width: 2; cursor: move; }
.jd-box.is-preview { stroke-dasharray: 5 4; opacity: .7; pointer-events: none; }
.jd-pen { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; cursor: move; }
.jd-mark { fill: none; stroke: #f7d774; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; opacity: .45; cursor: move; }
.jd-line { stroke: var(--text); stroke-width: 2; fill: none; cursor: move; }
.jd-line.is-preview { stroke-dasharray: 5 4; opacity: .7; pointer-events: none; }
.jd-line.is-selected { stroke: var(--accent); stroke-dasharray: 6 3; }
/* Endpoint handles — drag onto a shape to attach, off it to detach. */
.jd-handle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; cursor: grab; pointer-events: auto; }
.jd-handle.is-bound { fill: var(--accent); }
/* Corner grips for resizing a box / text box. */
.jd-resize { fill: var(--surface); stroke: var(--accent); stroke-width: 2; pointer-events: auto; }
.jd-resize--nw, .jd-resize--se { cursor: nwse-resize; }
.jd-resize--ne, .jd-resize--sw { cursor: nesw-resize; }
.jd-link { stroke: var(--accent-strong); stroke-width: 2; fill: none; }
.jd-link__hit { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
.jd-box.is-selected, .jd-pen.is-selected, .jd-mark.is-selected, .jd-link.is-selected { stroke: var(--accent); }
.jd-box.is-selected, .jd-link.is-selected { stroke-dasharray: 6 3; }
.jd-box.is-linking { stroke-dasharray: 4 3; }
.jd-text {
  position: absolute; min-height: 28px; padding: 5px 8px; box-sizing: border-box;
  border: 1px dashed transparent; border-radius: 8px; outline: none; cursor: move;
  font-size: 14px; line-height: 1.5; color: var(--text); pointer-events: auto;
}
.jd-text:hover, .jd-text:focus { border-color: var(--border); }
.jd-text.is-selected, .jd-text.is-linking { border-color: var(--accent); border-style: dashed; }

/* Right rail: the reopen-chat button sits on top, the tools card 10px below,
   and the pair is centred vertically in one shared stacking context. */
.journal-railstack {
  position: absolute; right: -25px; top: 50%; transform: translateY(-50%);
  z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Inside the stack both children flow normally — the rail does the placing. */
.journal-railstack .mindmap-chatbtn,
.journal-railstack .mindmap-tools {
  position: static; right: auto; top: auto; bottom: auto; transform: none; z-index: auto;
}
#sub-journal.is-gallery .journal-railstack,
#sub-journal.is-discussing .journal-railstack { display: none; }
/* The chat button still only appears when the chat is hidden. */
#sub-journal.chat-hidden:not(.is-gallery) .journal-railstack .mindmap-chatbtn { display: grid; }

/* Drag a gallery card onto another to reorder. */
.mm-mapcard.is-dragging { opacity: .4; }
.mm-mapcard.is-dropinto { border-color: var(--accent); border-style: dashed; }

/* Analyze button (upper-right of the entry canvas). */
.journal-analyze {
  position: absolute; top: 14px; right: 16px; z-index: 15;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 7px 13px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-strong);
  cursor: pointer; box-shadow: 0 6px 18px rgba(20,18,15,.10);
}
.journal-analyze:hover { border-color: var(--accent); }
.journal-analyze__spark { font-size: 14px; }
.journal-analyze.is-busy { opacity: .6; pointer-events: none; }
#sub-journal.is-analyzed .journal-analyze,
#sub-journal.is-discussing .journal-analyze { display: none; }

/* The right column starts collapsed and slides open, pushing the text left. */
.journal-side {
  flex: 0 0 auto; box-sizing: border-box; width: 0; overflow: hidden; opacity: 0;
  border-left: 1px solid var(--border); background: var(--surface);
  transition: width .25s ease, opacity .2s ease;
}
/* The Journal canvas is a fixed frame; the columns inside it do the scrolling. */
#journalCanvas { overflow: hidden; }
#sub-journal.is-analyzed .journal-side,
#sub-journal.is-discussing .journal-side {
  width: min(360px, 42%); opacity: 1; padding: 26px 22px 40px;
  /* Full height, scrolling on its own when the analysis runs long. */
  height: 100%; overflow-y: auto;
}
/* Back arrow to the left of the "Journal" heading (only while a page is open). */
.view__back {
  display: none;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 20px; line-height: 1; color: var(--accent-strong);
  padding: 2px 8px 2px 0; margin: 0;
}
.view__back:hover { color: var(--accent); }
#view-allme.journal-open .view__back { display: inline-flex; align-items: center; }

.journal-side__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.journal-side__head { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); }
.journal-side__close {
  flex-shrink: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 20px; line-height: 1; color: var(--muted);
  padding: 2px 6px; border-radius: 7px;
}
.journal-side__close:hover { color: var(--accent-strong); background: var(--bg); }
.journal-side__body { font-size: 14px; line-height: 1.65; color: var(--text); }
.journal-side__body .ai-md-loading { color: var(--muted); }
.journal-discuss {
  margin-top: 18px; width: 100%;
  border: 0; border-radius: 10px; padding: 10px 12px;
  background: var(--accent-strong); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.journal-discuss:hover { filter: brightness(1.05); }

/* Discussion thread (left column after "Discuss further") — Home chat look. */
.journal-thread { max-width: 760px; margin: 0 auto; padding: 30px 24px 120px; }
.journal-thread.home-reply { max-height: none; overflow: visible; }

/* In discuss mode the chat card is trimmed to just its input line. */
#sub-journal.is-discussing .mindmap-chatcard { display: flex; }
#sub-journal.is-discussing .mindmap-chatcard .mm-chathead,
#sub-journal.is-discussing .mindmap-chatcard .home-chatpanel { display: none; }
#sub-journal.is-discussing .mindmap-chatbtn { display: none !important; }

.mindmap-chatcard {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
  width: min(560px, calc(100% - 120px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(20,18,15,.20);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.mindmap-chatcard:has(#mindChatPanel.is-drawer-open) { transform: translateX(-50%); }

/* Chat reply fades out until you hover, focus the input, or click the card;
   the input box always stays fully visible. */
.mindmap-chatcard #mindChatPanel { opacity: .35; transition: opacity .2s ease; }
.mindmap-chatcard:hover #mindChatPanel,
.mindmap-chatcard:focus-within #mindChatPanel,
.mindmap-chatcard.is-active #mindChatPanel { opacity: 1; }

/* Chat card header: past + new on the left, × on the right. */
.mm-chathead { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.mm-chathead__title { font-size: 14px; font-weight: 600; color: var(--accent-strong); margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-headbtn { display: grid; place-items: center; width: 30px; height: 28px; border: 0; background: none; border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; }
.mm-headbtn svg { width: 17px; height: 17px; }
.mm-headbtn:hover { background: var(--bg); color: var(--accent-strong); }
.mm-headbtn--x { margin-left: auto; font-size: 20px; }

.mindmap-tools.is-collapsed .mm-tool:not(.mm-tools-toggle) { display: none; }
.mindmap-tools.is-collapsed .mm-tools-toggle { transform: rotate(180deg); }

/* Floating tools card (left). */
.mindmap-tools {
  position: absolute; right: -25px; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 50px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; box-shadow: 0 8px 24px rgba(20,18,15,.14);
  opacity: .6; transition: opacity .2s ease;
}
.mindmap-tools:hover { opacity: 1; }

/* Reopen-chat button — 20px above the tools, shown only when chat is hidden. */
.mindmap-chatbtn {
  display: none; position: absolute; right: -25px; bottom: calc(50% + 125px); z-index: 20;
  width: 50px; height: 50px; place-items: center; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--surface); border-radius: 12px;
  color: var(--accent-strong); cursor: pointer; box-shadow: 0 8px 24px rgba(20,18,15,.14);
  opacity: .6; transition: opacity .2s ease;
}
.mindmap-chatbtn svg { width: 19px; height: 19px; }
.mindmap-chatbtn:hover { opacity: 1; }
#sub-mindmap.chat-hidden .mindmap-chatcard { display: none; }
#sub-mindmap.chat-hidden .mindmap-chatbtn { display: grid; }
.mm-tool {
  width: 100%; height: 34px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 8px; color: var(--muted);
  cursor: pointer; font-size: 18px; line-height: 1;
}
.mm-tool svg { width: 17px; height: 17px; }
.mm-tool:hover { background: var(--bg); color: var(--accent-strong); }

/* Map nodes drawn from the conversation. */
.mm-stage { position: relative; transform-origin: 0 0; }
/* Drawing layer sits over the stage and scales with it. */
.mm-draw { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 8; }
.mm-tool__sep { display: block; height: 1px; background: var(--border); margin: 3px 2px; }
.mm-node { cursor: grab; }
.mm-node.is-dragging { cursor: grabbing; opacity: .85; z-index: 12; }
.mm-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.mm-node {
  position: absolute; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font-size: 14px; line-height: 1.4; color: var(--text);
  box-shadow: 0 1px 2px rgba(20,18,15,.05); max-width: 240px;
}
.mm-node { cursor: pointer; transition: box-shadow .15s ease; }
.mm-node:hover { box-shadow: 0 4px 14px rgba(20,18,15,.12); }
.mm-node--you { width: 240px; border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.mm-node--sug { background: var(--bg); }
.mm-node__gist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-node__full { display: none; white-space: pre-wrap; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); font-weight: 400; color: var(--text); font-size: 12px; }
.mm-node.is-expanded { z-index: 3; max-width: 320px; }
.mm-node.is-expanded .mm-node__gist { white-space: normal; }
.mm-node.is-expanded .mm-node__full { display: block; }
.mm-node__more { display: none; position: absolute; top: 5px; right: 6px; border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px; }
.mm-node.is-expanded .mm-node__more { display: inline-block; }
.mm-node__more:hover { color: var(--accent-strong); }

/* Node modal — centered, up to 800px, 15px text, scrollable. */
.mm-modal { position: fixed; inset: 0; z-index: 300; background: rgba(20,18,15,.18); display: grid; align-items: start; justify-items: center; padding: 150px 24px 24px; overflow-y: auto; }
.mm-modal[hidden] { display: none; }
.mm-modal__card {
  position: relative; width: min(800px, 100%); max-width: 800px; max-height: calc(100vh - 180px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(20,18,15,.30); padding: 26px 28px 100px;
}
.mm-modal__close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.mm-modal__close:hover { color: var(--text); }
.mm-modal__title { font-size: 16px; font-weight: 700; color: var(--accent-strong); margin-bottom: 12px; padding-right: 28px; }
.mm-modal__body { font-size: 18px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.mindmap-chatcard #mindChatPanel { border-top: 0; padding: 0; }
.mindmap-chatcard #mindReplyWindow { max-height: 38vh; }
.mindmap-chatcard .mind-input { width: 100%; box-shadow: none; }
/* Widen the card when the past-chats column slides out. */
.mindmap-chatcard:has(#mindChatPanel.is-drawer-open) { width: min(840px, calc(100% - 40px)); }

/* Past-chats column: 290px, tucked away (negative margin) until opened. */
.home-drawer {
  flex: 0 0 270px; width: 270px; box-sizing: border-box; align-self: stretch;
  display: flex; flex-direction: column;
  margin-right: -270px; opacity: 0; pointer-events: none;
  border-left: 1px solid var(--border); padding-left: 16px;
  transition: margin-right .25s ease, opacity .2s ease;
}
body.home-drawer-open .home-drawer { margin-right: 0; opacity: 1; pointer-events: auto; }
.home-drawer__head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 24px 12px 0; margin-bottom: 10px;   /* equal space above and below "Chats" */
  border-bottom: 1px solid var(--border);
}
.home-drawer__title { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: none; color: var(--accent-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-drawer__back { border: 0; background: none; font-size: 18px; color: var(--text); cursor: pointer; padding: 0 2px; flex: 0 0 auto; }
.home-drawer__back:hover { color: var(--accent); }
.home-drawer__close { position: absolute; top: 12px; right: 12px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; z-index: 2; }
.home-drawer__close:hover { color: var(--text); }
.home-drawer__list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.home-drawer__subhead { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); margin: 2px 0 6px; }

/* Past-chat rows: a menu button with a coral ✦ next to each title. */
.home-past__row {
  display: flex; align-items: center; gap: 8px;
  border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--text);
  text-align: left; cursor: pointer; padding: 7px 8px; border-radius: 8px; width: 100%;
}
.home-past__row:hover { background: var(--bg); }
.home-past__spark { color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.home-past__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Goal / Concern groups indent under the "Actions" subhead; the action text
   sits at the same indent as its type header. */
.home-action-group { margin-bottom: 8px; padding-left: 14px; }
.home-action-type { font-size: 12px; font-weight: 700; color: var(--accent-strong); margin: 2px 0 3px; }
.home-action {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; font: inherit; font-size: 14px; color: var(--text);
  padding: 6px 8px 6px 0; border-radius: 8px; cursor: pointer;
}
.home-action:hover { background: var(--bg); color: var(--accent-strong); }
.home-action.is-plain { cursor: default; }
.home-action.is-plain:hover { background: none; color: var(--text); }

/* Summary sentence above the outline. */
.home-summary { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text); }

/* Inline goal-action preview: the Goals card inside the drawer. */
.home-goalcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 2px rgba(20,18,15,.04);
}
.home-goalcard__head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 8px; }
.home-goalrow {
  display: flex; align-items: baseline; gap: 8px;
  border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--text);
  text-align: left; cursor: pointer; padding: 2px 0; width: 100%;
}
.home-goalrow__spark { flex: 0 0 auto; color: var(--muted); }   /* grey for other goals */
.home-goalrow__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-goalrow.is-hit { color: var(--accent-strong); font-weight: 600; }
.home-goalrow.is-hit .home-goalrow__spark { color: inherit; }   /* coral, matches the created goal */
.home-goalrow.is-hit .home-goalrow__text { text-decoration: underline; }
.home-goalrow:hover { color: var(--accent); }
.home-showlink { margin-top: 10px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: underline; cursor: pointer; padding: 0; }
.home-showlink:hover { color: var(--accent-strong); }

/* Numbered summary outline (jumps the reply window to each prompt). */
.home-outline { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.home-outline li { color: var(--muted); }
.home-outline__item {
  border: 0; background: none; font: inherit; font-size: 14px; color: var(--text);
  text-align: left; cursor: pointer; padding: 4px 4px; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-outline__item:hover { color: var(--accent-strong); }
.home-reply {
  min-height: 160px; max-height: 42vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 22px; border: 0; background: none;   /* equal side space; the ✦ sits in the left */
  max-width: 900px; width: 100%; margin-left: auto; margin-right: auto;
}
.home-reply__empty { margin: auto 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
/* Full-width messages; the ✦ hangs in the left gutter so text runs flush left. */
.home-reply .ai-msg {
  position: relative;
  align-self: stretch; max-width: 100%; width: 100%;
  padding-left: 0; padding-right: 0;
  border: 0; border-radius: 0;
  font-size: 17px;
}
.home-reply .ai-msg--user { background: none; color: var(--accent-strong); }
.home-reply .ai-msg--assistant { background: none; }
/* Coral ✦ positioned in the gutter, outside the text to the left. */
.home-reply .ai-msg--user::before,
.home-reply .ai-msg--assistant:not(.is-pending)::before {
  content: "✦";
  position: absolute; left: -22px; top: 0;
  display: inline-flex; align-items: center; height: 2.5em;   /* center on the first line */
  color: var(--accent); font-weight: 700;
  font-size: 17px; line-height: 1;
}
.home-reply .ai-md { min-width: 0; }

/* Rendered Markdown inside assistant replies. */
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md h1, .ai-md h2, .ai-md h3, .ai-md h4, .ai-md h5, .ai-md h6 {
  font-size: 1.05em; font-weight: 700; margin: 12px 0 4px; line-height: 1.3;
}
.ai-md p { margin: 6px 0; }
.ai-md ul { margin: 4px 0; padding-left: 20px; }
.ai-md li { margin: 3px 0; }
.ai-md strong { font-weight: 700; }
.ai-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.home-log { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.home-log__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.home-log__what { color: var(--text); min-width: 0; }
.home-log__when { color: var(--muted); flex: 0 0 auto; font-size: 11px; }
.home-past__empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 4px 8px; }

/* "+" add button on the right-sidebar Today's Schedule card. */
.sched-add-btn {
  margin-left: 8px; border: 0; background: none; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.sched-add-btn:hover { color: var(--accent); background: var(--bg); }
/* Inside the Today brief the "Scheduled" column already has its own +. */
#briefSchedHost .sched-add-btn { display: none; }

.brief__news { font-size: 14px; color: var(--text); line-height: 1.4; }
.brief__news .up { color: var(--pos); font-weight: 600; }
.brief__news .down { color: var(--neg); font-weight: 600; }

/* Narrow side panel: stack everything into one column. */
@media (max-width: 640px) {
  .brief__inner { flex-direction: column; }
  .brief__vr--main { display: none; }
  .brief__side { border-top: 1px solid var(--border); }
  .brief__cols { flex-direction: column; }
  .brief__cols .brief__vr { display: none; }
  .brief__col { padding: 14px 0; border-top: 1px solid var(--border); }
  .brief__col:first-child { padding-top: 0; border-top: 0; }
}

/* ---------- Plan your day ---------- */
.plan { padding: 0; overflow: hidden; }

/* inside the morning brief: pinned to the bottom, styled as its own panel */
.brief .plan {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.plan__open {
  width: 100%;
  padding: 14px 12px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
  text-align: center;
}
.plan__open:hover { background: var(--accent-soft); }

.plan__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.plan__back {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 4px;
}
.plan__title { flex: 1; font-weight: 700; font-size: 14px; }
.plan__close { font-size: 17px; }

/* two slides on a track that shifts left */
.plan__viewport { overflow: hidden; }
.plan__track {
  display: flex;
  width: 200%;
  transition: transform 0.3s ease;
}
.plan__track.at-2 { transform: translateX(-50%); }
.plan__slide {
  width: 50%;      /* half of the 200% track = one viewport */
  flex-shrink: 0;
  padding: 12px;
  box-sizing: border-box;
}

.plan__q {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.plan__input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: var(--bg);
  resize: vertical;
  box-sizing: border-box;
}
.plan__input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.plan__next { width: 100%; margin-top: 10px; }

.plan__concern {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.plan__concern:first-child { border-top: 0; padding-top: 2px; }
.plan__concern-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.plan__concern-text { margin: 0; font-weight: 600; font-size: 13.5px; line-height: 1.4; }

.plan__field { display: block; margin-top: 8px; }
.plan__field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 3px;
}
.plan__field-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  background: var(--bg);
  resize: vertical;
  box-sizing: border-box;
}
.plan__field-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* ---------- 3 Must Do Today ---------- */
.must__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.must__row:first-child { border-top: 0; }
/* the numbered badge sits after the checkbox on filled rows, before input on empty */
.must__num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.must__row.is-done .must__num { background: var(--bg); color: var(--muted); }

.must__input {
  flex: 1;
  min-width: 0;
  /* darker border so a white input stays visible on the white card */
  border: 1px solid #c9bfae;
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  background: var(--surface);
}
.must__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

/* ---------- My Concerns ---------- */
/* narrow (side panel): stacked blocks with labelled fields */
.concerns__head { display: none; }

/* A concern is a group of field cards; the row itself is just the container. */
.concern-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin-bottom: 18px;
}
/* Each field (Concerns / Why / Solution / Plan) is its own card with its
   label as a header on top. */
.concern-cell {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(20,18,15,.04);
}
.concern-cell::before {
  content: attr(data-label);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.concern-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;   /* only shows a line while empty */
  border-radius: 0;
  padding: 3px 0;
  font: inherit;
  background: none;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  min-height: 28px;      /* an empty field reads as a single line */
  line-height: 22px;
}
.concern-input::placeholder { color: #b7b0a4; }
.concern-input:placeholder-shown { border-bottom-color: var(--border); }
.concern-input:focus { outline: none; border-bottom-color: var(--accent); background: none; }
.concern-del { position: absolute; top: 6px; right: 6px; }

/* action steps */
.concern-step {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.concern-step__num {
  width: 15px;
  flex-shrink: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.concern-step__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid transparent;   /* only shows a line while empty */
  border-radius: 0;
  padding: 3px 0;
  font: inherit;
  background: none;
  box-sizing: border-box;
}
.concern-step__input::placeholder { color: #b7b0a4; }
.concern-step__input:placeholder-shown { border-bottom-color: var(--border); }
.concern-step__input:focus { outline: none; border-bottom-color: var(--accent); background: none; }
.concern-step__add {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 0;
}
.concern-step__add:hover { text-decoration: underline; }
/* keep the first field's label clear of the delete button */
.concern-row .concern-cell:first-child { padding-right: 22px; }

/* wide (popped-out tab): lay the field cards out in columns */
@media (min-width: 560px) {
  .concern-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.3fr 26px;
    gap: 10px;
    align-items: start;
    padding: 0;
    margin: 0 0 18px;
  }
  .concern-row .concern-cell:first-child { padding-right: 14px; }
  .concern-del { position: static; align-self: start; }
}

/* ---------- To-Do's ---------- */
.todo-cat {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.todo-cat.is-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.todo-cat.is-cat-dragging { opacity: 0.5; }
.todo-cat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: grab;
}
.todo-cat__head:active { cursor: grabbing; }
.todo-cat__grip {
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.todo-cat__title { flex: 1; font-weight: 700; font-size: 14px; }

.todo {
  border-top: 1px solid var(--border);
}
.todo:first-of-type { border-top: 0; }
.todo__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  cursor: grab;
}
.todo__row:active { cursor: grabbing; }
.todo.is-dragging { opacity: 0.4; }
.todo__name {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  word-break: break-word;
}
.todo__name:hover { color: var(--accent); }
.todo.is-done .todo__name { text-decoration: line-through; color: var(--muted); }
.todo__has-details {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.todo__details {
  padding: 6px 0 10px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.todo-field { display: block; }
.todo-field__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 3px;
}
.todo-field__input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  background: var(--bg);
  box-sizing: border-box;
  resize: vertical;
}
.todo-field__input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.todo-field__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.todo__delete { align-self: flex-start; color: var(--neg); }
.todo__delete:hover { border-color: var(--neg); color: var(--neg); }

/* Info / Plan section headings inside a task */
.todo-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 4px 0 2px;
}

/* plan steps */
.todo-steps { margin-top: 2px; }
.todo-steps__hint { font-size: 11.5px; color: var(--muted); margin: 0 0 4px; }
.todo-step { border-top: 1px dashed var(--border); }
.todo-step:first-of-type { border-top: 0; }
.todo-step__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.todo-step__name {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  word-break: break-word;
}
.todo-step__name:hover { color: var(--accent); }
.todo-step.is-done .todo-step__name { text-decoration: line-through; color: var(--muted); }
.todo-step__detail {
  padding: 4px 0 8px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.todo-step__add {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 4px 0;
}
.todo-step__add:hover { text-decoration: underline; }

.todo-cat__add { margin: 2px 0 8px; }
.todo-cat__add input {
  width: 100%;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  background: none;
  box-sizing: border-box;
}
.todo-cat__add input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--accent);
  background: var(--surface);
}

/* ---------- Calendar ---------- */
.cal-card { padding: 12px; }

/* 7-column bar so the month arrows line up over the day columns:
   prev near "Mo" (nudged 5px toward centre), next over "Su", and a
   borderless collapse caret pinned between the next arrow and the edge. */
.cal__bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  align-items: center;
  margin-bottom: 10px;
}
#calPrev { grid-column: 1; justify-self: center; transform: translateX(5px); }
.cal__label { grid-column: 2 / 7; }
#calNext { grid-column: 7; justify-self: center; transform: translateX(-8px); }

.cal__label {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
}
.cal__label:hover { background: var(--bg); }
/* only clickable-to-return when we've navigated away from this month */
.cal__label.is-away { color: var(--accent); }
.cal__label.is-away::after { content: ' ↩'; font-size: 12px; }

/* Collapse / Expand: a right-aligned word under the calendar, with a
   full-width rule beneath it. */
.cal__collapserow {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cal__collapse {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  cursor: pointer;
  padding: 2px;
}
.cal__collapse:hover { color: var(--accent-strong); }

/* week view: days outside the month are muted (month arrows stay visible and
   expand back to the full month when clicked) */
.cal__day.is-muted { color: var(--muted); opacity: 0.6; }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal__dow {
  margin-bottom: 4px;
}
.cal__dow span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 0;
}

.cal__day {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.cal__day:hover:not(.is-empty) { background: var(--bg); }
.cal__day.is-empty { cursor: default; }

.cal__day.is-today {
  color: var(--accent);
  font-weight: 700;
  /* inset box-shadow gives a rounded blue outline without shifting layout */
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cal__day.is-today:hover { background: var(--accent-soft); }

/* the day currently shown in the schedule (when it isn't today) */
.cal__day.is-selected { box-shadow: inset 0 0 0 1.5px var(--muted); }

.cal__dot {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.cal__day.is-today .cal__dot { background: var(--accent); }

/* Numerology number, tucked to the right of the date (7 / 11 / 28 only). */
.cal__num {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.cal__num--28 { color: #2e9e6b; }
.cal__day.is-muted .cal__num { opacity: .45; }
.cal__day.is-today .cal__num,
.cal__day.is-selected .cal__num { color: inherit; }
/* Keep 28 green even on today / the selected day. */
.cal__day.is-today .cal__num--28,
.cal__day.is-selected .cal__num--28 { color: #2e9e6b; }

/* ---------- Meals ---------- */
.meal {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.meal:first-child { border-top: 0; padding-top: 0; }

.meal__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.meal__check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.meal__label { font-weight: 600; font-size: 14px; flex: 1; }
.meal__time {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}
.meal.is-eaten .meal__label { color: var(--muted); }

.meal__input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  background: var(--bg);
}
.meal__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.macros {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.macro {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.macro--kcal { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.macro--edit {
  cursor: pointer;
  border-style: dashed;
  font-family: inherit;
}
.macro--edit:hover { color: var(--accent); border-color: var(--accent); }

.meal__miss {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.add-meal { width: 100%; margin-top: 10px; }

/* ---------- Daily totals grid ---------- */
.totals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tot { text-align: center; min-width: 0; }
.tot__value {
  font-weight: 700;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tot__label { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.tot__bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.tot__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.tot__bar span.is-over { background: var(--neg); }

.target-line {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

/* ---------- Settings form ---------- */
.settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.field { display: block; }
.field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.field__input,
.field__pair input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  background: var(--surface);
  min-width: 0;
}
.field__input:focus,
.field__pair input:focus { outline: none; border-color: var(--accent); }
.field__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* number box wide, unit dropdown narrow */
.field__pair--unit { grid-template-columns: 1fr 72px; }

.readout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
}
.readout__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 12.5px;
}
.readout__row span { color: var(--muted); }
.readout__row b { text-align: right; }

.note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  padding: 9px 10px;
  border-radius: 8px;
}
.note--caution {
  background: #fffaeb;
  border: 1px solid #fedf89;
  color: #93370d;
}
.note--info {
  background: var(--accent-soft);
  border: 1px solid #ecd9d0;
  color: #8f3f26;
}
.note--quiet { color: var(--muted); padding: 0; font-size: 11.5px; }

/* ---------- Month bar ---------- */
.month-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.month-bar__label { margin: 0; font-size: 15px; font-weight: 700; }
.month-nav {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 17px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.month-nav:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Totals ---------- */
.card--overview { background: var(--surface); }
.totals { list-style: none; margin: 0; padding: 0; }
.totals__row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.totals__row:first-child { border-top: 0; }
.totals__row span { color: var(--muted); }
.totals__row--balance {
  margin-top: 4px;
  border-top: 2px solid var(--text);
  font-size: 15px;
  font-weight: 700;
}
.totals__row--balance span { color: var(--text); font-weight: 700; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* Overview + Assessment cards side by side. */
.overview-row { display: flex; gap: 14px; align-items: stretch; margin-bottom: 14px; }
.overview-row .card--overview { flex: 1; margin: 0; }
.card--variance {
  flex: 0 0 300px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.card--variance .assess { flex: 1; }
.assess__line { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.assess__line:last-child { margin-bottom: 0; }
.assess__foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.assess__plan { white-space: nowrap; }
.card--variance .variance {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.variance__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-variant-numeric: tabular-nums;
}
.variance__row span { color: var(--muted); }
.variance__row b { font-weight: 600; }
.variance__row--diff {
  margin-top: 4px;
  border-top: 2px solid var(--text);
  font-weight: 700;
}
.variance__row--diff span { color: var(--text); font-weight: 700; }
.variance__value { font-size: 18px; font-weight: 700; }
@media (max-width: 620px) {
  .overview-row { flex-direction: column; }
  .card--variance { flex: 1 0 auto; }
}

/* Two-column overview: label | Planned | Actual */
.totals--split .totals__row {
  display: grid;
  grid-template-columns: 1fr 92px 92px;
  align-items: center;
  gap: 8px;
}
.totals--split .totals__row > b,
.totals--split .totals__col { text-align: right; }
.totals--split .totals__row--head {
  border-top: 0;
  padding-bottom: 2px;
}
.totals--split .totals__col {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Entry rows ---------- */
.entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.entry:first-child { border-top: 0; }
.entry__main { flex: 1; min-width: 0; }
.entry__name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry__meta { font-size: 12px; color: var(--muted); }
.entry__cost { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Inline-editable recurring fields — look like text until hovered/focused. */
.rec-edit {
  font: inherit;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  padding: 1px 0;
  color: inherit;
  outline: none;
}
.rec-edit:hover { border-bottom-color: var(--muted); }
.rec-edit:focus { border-bottom-color: var(--accent); }
.rec-edit--name { width: 100%; font-weight: 500; color: var(--text); }
.rec-edit--cost {
  width: 92px;
  flex: none;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rec-due { display: flex; align-items: baseline; }
.rec-edit--due { width: 40px; text-align: left; font-variant-numeric: tabular-nums; }
.rec-edit--due::-webkit-outer-spin-button,
.rec-edit--due::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Paid checkbox on the left of each budget row */
.entry__check {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
}
.entry__check:hover { border-color: var(--accent); }
.entry__check.is-on { background: var(--accent); border-color: var(--accent); }
.entry__checkspace { flex: none; width: 18px; }

/* Paid rows read as done: struck through and dimmed */
.entry.is-paid .entry__name,
.entry.is-paid .entry__planned { text-decoration: line-through; color: var(--muted); }
.entry.is-paid .entry__actual { text-decoration: line-through; color: var(--muted); }

/* Planned | Actual two-column budget rows */
.entry__planned {
  width: 92px;
  flex: none;
  text-align: right;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  padding: 2px 0;
  outline: none;
}
.entry__planned:hover { border-bottom-color: var(--muted); }
.entry__planned:focus { border-bottom-color: var(--accent); }
.entry.is-paid .entry__planned:hover,
.entry.is-paid .entry__planned:focus { border-bottom-color: transparent; }
.entry__actual {
  width: 92px;
  flex: none;
  text-align: right;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  padding: 2px 0;
  outline: none;
}
.entry__actual:hover { border-bottom-color: var(--muted); }
.entry__actual:focus { border-bottom-color: var(--accent); }
.entry__delspace { width: 24px; flex: none; }

/* Column header row */
.entry--head { padding: 2px 0 4px; border-top: 0; }
.entry--head:hover { background: none; }
.entry__collabel {
  width: 92px;
  flex: none;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.icon-btn {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 6px;
  flex-shrink: 0;
}
.icon-btn:hover { color: var(--neg); background: var(--bg); }

/* ---------- Task ⋮ menu (Edit / Archive / Delete) ---------- */
.sched-task__menu { position: relative; flex-shrink: 0; }
.sched-task__kebab { font-size: 16px; }
.sched-task__kebab:hover { color: var(--accent-strong); }
.sched-task__pop {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 40;
  min-width: 132px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20, 18, 15, .18);
  display: flex; flex-direction: column; gap: 1px;
}
.sched-task__popitem {
  border: 0; background: none; font: inherit; font-size: 14px; color: var(--text);
  text-align: left; padding: 7px 10px; border-radius: 7px; cursor: pointer;
}
.sched-task__popitem:hover { background: var(--bg); }
.sched-task__popitem.is-danger { color: var(--neg); }
.sched-task__popitem.is-danger:hover { background: var(--bg); }
/* Inline rename: a borderless, background-free input in place of the text. */
.sched-task__edit {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none; padding: 0; margin: 0;
  font: inherit; color: var(--text);
}

/* ---------- Add-entry form ---------- */
.add-form {
  display: grid;
  grid-template-columns: 1fr 74px;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.add-form input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  background: var(--bg);
  min-width: 0;
}
.add-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.add-form .add-form__submit { grid-column: 1 / -1; }

/* Budget: collapsed to a single underline until the name field is focused. */
.add-form--budget {
  display: block;
  border-top: 0;
  padding-top: 8px;
  margin-top: 6px;
}
.add-form--budget .add-form__name {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  padding: 7px 0;
  color: var(--muted);
}
.add-form--budget .add-form__name::placeholder { color: var(--muted); }
.add-form--budget .add-form__name:focus {
  background: none;
  border-bottom-color: var(--accent);
  color: var(--text);
}
.add-form--budget .add-form__rest { display: none; }
.add-form--budget.is-open .add-form__rest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.add-form--budget.is-open .add-form__submit { grid-column: 1 / -1; }

/* single-column variant: one input above a full-width button */
.add-form--goal { grid-template-columns: 1fr; }
.add-form--goal input { grid-column: 1 / -1; }

/* debt form: two columns, each field spans full width for clarity */
.add-form--debt { grid-template-columns: 1fr 1fr; }
.add-form--debt input,
.add-form--debt select { grid-column: 1 / -1; }
.add-form__select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  background: var(--bg);
  color: var(--text);
}
.add-form__select:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* small inline type tag (e.g. Card / Loan) */
.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}

/* full-width "reveal" button that stands in for the goal form */
.add-open { width: 100%; margin-top: 10px; }

/* muted target-year / age subline under a goal horizon title */
.goal-sub { font-size: 12px; color: var(--muted); margin: 8px 0 10px; }

/* clickable goal text opens its detail */
.goal-open { border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; width: 100%; }
.goal-open:hover { color: var(--accent-strong); }

/* ---- Goal detail (CRUD + plan) ---- */
.goal-detail { display: block; }
.goal-detail__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.goal-detail__back { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; padding: 0; }
.goal-detail__back:hover { color: var(--accent); }
.goal-detail__horizon { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); }
.goal-detail__title { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 19px; font-weight: 600; color: var(--text); padding: 2px 0 6px; outline: none; }
.goal-detail__title:focus { border-bottom-color: var(--accent); }
.goal-detail__done { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-size: 14px; color: var(--muted); cursor: pointer; }

.goal-sechead { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; }
.goal-seclabel { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--accent-strong); }
.goal-rule { height: 1px; background: var(--border); flex: 1; }
.goal-in { width: 100%; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; font-size: 13.5px; color: var(--text); padding: 4px 0; outline: none; resize: none; }
.goal-in::placeholder { color: #b7b0a4; }
.goal-in:placeholder-shown { border-bottom-color: var(--border); }
.goal-in:focus { border-bottom-color: var(--accent); }
.goal-info { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: start; }
.goal-lbl { font-size: 14px; color: var(--muted); padding-top: 4px; }
.goal-plan { }
.goal-step { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.goal-step__num { color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; flex: 0 0 auto; }
.goal-step.is-done .goal-step__num { color: var(--pos); }
.goal-step.is-done .goal-in { text-decoration: line-through; color: #9a948a; }
.goal-step__rm { border: 0; background: none; color: #c9c1b4; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; flex: 0 0 auto; }
.goal-step__rm:hover { color: var(--neg); }
.goal-addstep { margin-top: 6px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent-strong); cursor: pointer; padding: 4px 0; }
.goal-addstep:hover { text-decoration: underline; }
.goal-detail__rule { height: 1px; background: var(--border); margin: 20px 0 14px; }
.goal-detail__delete { border: 0; background: none; font: inherit; font-size: 14px; color: var(--neg); cursor: pointer; padding: 0; }

/* Goals card headers match the On My Mind field headers: coral, uppercase,
   with a divider line under the header row. */
#goalCards .card__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
#goalCards .card__head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
#goalCards .card__head .pill { text-transform: none; letter-spacing: 0; }
#goalCards .schedule__text { font-size: 15px; letter-spacing: .05em; }

/* Per-goal ⋯ menu (Edit / Delete) */
.goal-menu { position: relative; margin-left: auto; flex: 0 0 auto; }
.goal-more { border: 0; background: none; color: #c9c1b4; cursor: pointer; padding: 2px 4px; display: flex; align-items: center; border-radius: 6px; }
.goal-more svg { width: 16px; height: 16px; }
.goal-more:hover { color: var(--text); background: var(--bg); }
.goal-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,18,15,.12); padding: 4px; min-width: 132px;
  display: flex; flex-direction: column;
}
.goal-dropitem { border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: left; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.goal-dropitem:hover { background: var(--bg); }
.goal-dropitem--danger { color: var(--neg); }

/* Add-goal: a plain underlined input, no background. (Higher specificity than
   the generic .add-form input rule so the box/background don't come back.) */
.add-form--goal .goal-addinput {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  padding: 6px 0;
  outline: none;
}
.add-form--goal .goal-addinput::placeholder { color: #b7b0a4; }
.add-form--goal .goal-addinput:focus { border-bottom-color: var(--accent); background: none; }

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-strong); color: #fff; }
.btn--ghost { color: var(--accent); border-color: var(--border); }
.btn--sm { padding: 5px 9px; font-size: 12px; }

/* ---------- Misc ---------- */
.empty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 14px 6px;
  margin: 0;
}
.section-note {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 12px;
  line-height: 1.5;
}
[hidden] { display: none !important; }

/* ---------- AI assistant ---------- */
.ai-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  cursor: grab;
  box-shadow: 0 4px 14px rgb(114 115 116 / 40%);
  z-index: 100;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-fab:hover { background: var(--accent-strong); }
.ai-fab:active { cursor: grabbing; }

/* ================= AI chat ================= */
.ai-iconbtn { border: 0; background: none; font-size: 16px; line-height: 1; color: var(--muted); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.ai-iconbtn:hover { color: var(--accent); background: var(--bg); }
.ai-close { font-size: 20px; }
.ai-modal__spark { color: var(--accent); }

/* ---- Compact mode (default): movable chat, mid-right of the main area ---- */
.ai-modal {
  position: fixed; right: 40px; top: 50%; transform: translateY(-50%); z-index: 200;
  width: 350px; max-width: calc(100vw - 24px); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; gap: 10px;
}
.ai-title { display: none; }
.ai-modal__top { display: flex; justify-content: flex-end; align-items: center; gap: 2px; cursor: move; }

.ai-modal__col { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 0; }

/* conversation lives in its own card above the input box (hidden until it starts) */
.ai-stage {
  min-height: 0; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 28px rgba(20,18,15,.14); padding: 12px 14px;
}
.ai-modal:not(.is-expanded):not(.is-chatting) .ai-stage { display: none; }
.ai-modal__greet { display: none; }
.ai-msgs { display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ai-msg--assistant { align-self: flex-start; background: var(--bg); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.ai-msg--user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.ai-msg.is-pending { color: var(--muted); letter-spacing: 2px; }

/* input box styled like the home chat box */
.ai-composer {
  margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 28px rgba(20,18,15,.14); padding: 12px 12px 10px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.ai-textarea { border: 0; background: none; font: inherit; color: var(--text); padding: 4px 0; min-height: 40px; max-height: 150px; resize: none; outline: none; }
.ai-composer__bar { display: flex; align-items: center; gap: 8px; }
.ai-composer__spacer { flex: 1; }
.ai-composer__model { font-size: 12px; color: var(--muted); }
.ai-plus, .ai-mic { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.ai-plus:hover, .ai-mic:hover { background: var(--bg); color: var(--text); }
.ai-mic.is-live { color: var(--neg); background: #fee4e2; }
.ai-send { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; font-size: 16px; }
.ai-send:hover { background: var(--accent-strong); }
.ai-send:disabled { opacity: .5; cursor: default; }

.ai-preview { display: none; }   /* no preview in compact mode */

/* settings popover (gear) */
.ai-settings {
  position: absolute; top: 46px; right: 12px; width: 280px; z-index: 4;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20,18,15,.18); padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ai-flabel { font-size: 11px; font-weight: 600; color: var(--muted); }
.ai-input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font: inherit; background: var(--bg); }
.ai-input:focus { outline: none; border-color: var(--accent); }
.ai-note { font-size: 11px; color: var(--muted); margin: 2px 0 4px; line-height: 1.4; }
.ai-save { align-self: flex-start; }

/* ---- Past-conversations panel ---- */
.ai-history {
  position: absolute; top: 46px; right: 12px; width: 300px; max-height: 60vh; z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20,18,15,.18); padding: 12px;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden;
}
.ai-history__head { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ai-history__new {
  border: 1px dashed var(--border); background: var(--bg); border-radius: 9px;
  padding: 8px 10px; font: inherit; font-size: 14px; color: var(--accent-strong);
  cursor: pointer; text-align: left;
}
.ai-history__new:hover { border-color: var(--accent); color: var(--accent); }
.ai-history__empty { font-size: 14px; color: var(--muted); font-style: italic; padding: 4px 2px; }
.ai-history__list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.ai-history__row { display: flex; align-items: stretch; border-radius: 9px; }
.ai-history__row:hover { background: var(--bg); }
.ai-history__row.is-current { background: var(--bg); }
.ai-history__open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
  padding: 8px 10px; color: var(--text);
}
.ai-history__title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-history__time { font-size: 11px; color: var(--muted); }
.ai-history__del {
  flex: 0 0 auto; border: 0; background: none; color: var(--muted);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 10px; border-radius: 9px;
}
.ai-history__del:hover { color: var(--neg, #c0492f); }
.ai-modal.is-expanded .ai-history { top: 52px; right: 24px; }

.ai-pv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 4px 0; color: var(--text); }
.ai-pv-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: capitalize; color: var(--accent-strong); margin: 14px 0 6px; }
.ai-pv-empty { font-size: 14px; color: var(--muted); font-style: italic; }
.ai-preview__title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }

/* ---- Expanded mode: full overlay (not over the left rail) ---- */
.ai-modal.is-expanded {
  position: fixed; inset: 0; transform: none; gap: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  background: rgba(246, 244, 239, .82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  display: block;
}
@media (min-width: 760px) { .ai-modal.is-expanded { left: 280px; } }
.ai-modal.is-expanded .ai-modal__top { position: absolute; top: 14px; right: 18px; border: 0; padding: 0; z-index: 3; cursor: default; }
.ai-modal.is-expanded .ai-modal__col { width: 100%; height: 100%; align-items: center; padding: 0 24px; }
/* expanded conversation is bare (no card) */
.ai-modal.is-expanded .ai-stage { width: 100%; max-width: 680px; max-height: none; background: none; border: 0; box-shadow: none; padding: 0; }
.ai-modal.is-expanded .ai-modal__greet { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 600; color: var(--text); text-align: center; padding: 0; }
.ai-modal.is-expanded .ai-msg--assistant { background: var(--surface); }
.ai-modal.is-expanded .ai-composer { width: 100%; max-width: 680px; margin: 14px 0 26px; background: var(--surface); border-radius: 16px; padding: 12px 12px 10px 16px; box-shadow: var(--shadow); }
/* empty: composer ~2/3 down with the greeting above; chatting: composer at bottom */
.ai-modal.is-expanded:not(.is-chatting) .ai-modal__col { justify-content: flex-start; padding-top: 40vh; }
.ai-modal.is-expanded:not(.is-chatting) .ai-stage { flex: 0 0 auto; }
.ai-modal.is-expanded:not(.is-chatting) .ai-msgs { display: none; }
.ai-modal.is-expanded:not(.is-chatting) .ai-modal__greet { margin-bottom: 22px; }
.ai-modal.is-expanded.is-chatting .ai-modal__col { padding-top: 22px; }
.ai-modal.is-expanded.is-chatting .ai-modal__greet { display: none; }

/* preview panel (expanded only): flush to top/bottom/right, chat gaps stay symmetric */
.ai-modal.is-expanded.has-preview { display: flex; }
.ai-modal.is-expanded.has-preview .ai-modal__col { flex: 1 1 auto; min-width: 0; }
.ai-modal.is-expanded.has-preview .ai-preview {
  display: block; flex: 0 0 380px; align-self: stretch; overflow-y: auto;
  background: var(--surface); border: 0; border-left: 1px solid var(--border); padding: 24px;
}
@media (max-width: 759px) {
  .ai-modal.is-expanded.has-preview { display: block; }
  .ai-modal.is-expanded.has-preview .ai-preview { display: none; }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 50;
}
.toast.is-visible { opacity: 1; }

/* ============================================================
   Assistant — voice mode (hands-free talk)
   ============================================================ */
.ai-voicebtn { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.ai-voicebtn:hover { background: var(--bg); color: var(--accent-strong); }
.ai-modal.is-voice .ai-voicebtn { color: #fff; background: var(--accent); }

.ai-modal.is-voice .ai-modal__col { display: none; }
.ai-modal.is-voice.is-voice-chat .ai-modal__col { display: flex; }
.ai-modal.is-voice.is-voice-chat .ai-composer { display: none; }

.ai-voice {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 18px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 12px 34px rgba(20, 18, 15, .14); text-align: center;
}
.ai-voice[hidden] { display: none; }
.ai-modal.is-expanded .ai-voice { max-width: 560px; margin: 12vh auto 16px; padding: 28px; }
.ai-voice__top { align-self: stretch; display: flex; align-items: center; gap: 6px; }
.ai-voice__title { flex: 1; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-mid); }
.ai-voice__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ai-voice__pick, .ai-voice__rate {
  height: 28px; max-width: 150px; padding: 0 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: 12px; color: var(--text); cursor: pointer;
}
.ai-voice__rate { max-width: 70px; }

.ai-voice__orb {
  position: relative; width: 132px; height: 132px; margin: 10px 0 4px; border: 0; padding: 0;
  border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center;
}
.ai-voice__orb:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ai-voice__core {
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3b49b, var(--accent) 55%, var(--accent-strong));
  box-shadow: 0 8px 24px rgba(194, 99, 74, .35); transition: transform .25s ease, filter .25s ease;
}
.ai-voice__ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent);
  opacity: 0; transform: scale(.7);
}
.ai-voice[data-state="listening"] .ai-voice__ring { animation: aiVoiceRing 1.6s ease-out infinite; }
.ai-voice[data-state="listening"] .ai-voice__core { animation: aiVoiceBreathe 1.6s ease-in-out infinite; }
.ai-voice[data-state="thinking"] .ai-voice__core { animation: aiVoiceSpin 1.2s linear infinite; filter: saturate(.8) brightness(1.05);
  background: conic-gradient(from 0deg, var(--accent-soft), var(--accent), var(--accent-strong), var(--accent-soft)); }
.ai-voice[data-state="speaking"] .ai-voice__core { animation: aiVoiceTalk .5s ease-in-out infinite alternate; }
.ai-voice[data-state="paused"] .ai-voice__core, .ai-voice[data-state="idle"] .ai-voice__core { filter: grayscale(.85) brightness(1.1); box-shadow: none; }
@keyframes aiVoiceRing { 0% { opacity: .55; transform: scale(.72); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes aiVoiceBreathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.02); } }
@keyframes aiVoiceSpin { to { transform: rotate(360deg); } }
@keyframes aiVoiceTalk { from { transform: scale(.92); } to { transform: scale(1.05); } }

.ai-voice__status { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.ai-voice__heard { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--muted); font-style: italic; max-width: 100%; overflow-wrap: anywhere; }
.ai-voice__heard:empty { display: none; }
.ai-voice__reply {
  margin: 0; max-height: 9em; overflow-y: auto; font-size: 14px; line-height: 1.5; color: var(--text);
  padding: 10px 12px; background: var(--bg); border-radius: 12px; text-align: left; align-self: stretch;
}
.ai-voice__reply:empty { display: none; }
.ai-voice__ctrls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.ai-voice__btn {
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.ai-voice__btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.ai-voice__btn--end { border-color: var(--neg); color: var(--neg); }
.ai-voice__btn--end:hover { background: var(--neg); color: #fff; border-color: var(--neg); }
@media (prefers-reduced-motion: reduce) {
  .ai-voice__ring, .ai-voice__core { animation: none !important; }
}

/* assistant jumped here: brief highlight */
.ble-flash { animation: bleFlash 1.8s ease-out; }
@keyframes bleFlash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px rgba(194, 99, 74, .18); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ble-flash { animation: none; outline: 3px solid var(--accent); } }