/* ============================================================
   Mimi — calm-minimal styles, layered on the Potiva design system.
   Identity: sage. Interactive colour = deep sage (AA on white); the soft
   sage is for tints/rings. Spacing/type come from the DS tokens.
   ============================================================ */

:root {
  --sage: #7c9885;          /* identity tint (decorative) */
  --sage-soft: #eef3ef;     /* soft fills */
  --sage-ink: #4f6b58;      /* deep sage = interactive/text (AA on white) */
  --mm-maxw: 720px;
  --mm-side: 240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ds-font);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--ts-md);
  -webkit-font-smoothing: antialiased;
}

/* ---------- App layout ---------- */
.mm-app { display: flex; min-height: 100vh; }

.mm-sidebar {
  width: var(--mm-side); flex: 0 0 var(--mm-side);
  background: var(--surface); border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
}
.mm-brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.pf-apps {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border-radius: var(--r-md);
  color: var(--ink-soft); text-decoration: none; flex: none;
}
.pf-apps:hover { background: var(--surface-2); color: var(--ink); }
.mm-logo { font-size: var(--ts-lg); font-weight: 800; letter-spacing: -.02em; color: var(--sage-ink); }
.mm-lang { margin-left: auto; display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.mm-lang-pill { border: 0; background: transparent; color: var(--ink-muted); font: 700 var(--ts-sm)/1 var(--ds-font); min-height: 40px; min-width: 42px; padding: 0 12px; border-radius: var(--r-pill); cursor: pointer; }
.mm-lang-pill.on { background: var(--sage-ink); color: #fff; }

.mm-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mm-navbtn {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: 0 var(--sp-3);
  border: 0; background: transparent; border-radius: var(--r-md);
  color: var(--ink-soft); font: 600 var(--ts-md)/1 var(--ds-font); cursor: pointer; text-align: left;
}
.mm-navbtn:hover { background: var(--surface-2); color: var(--ink); }
.mm-navbtn.active { background: var(--sage-soft); color: var(--sage-ink); }
.mm-ico { font-size: 18px; width: 22px; text-align: center; flex: none; }
.mm-navlabel { flex: 1; }
.mm-badge { background: var(--sage-ink); color: #fff; font: 700 11px/1 var(--ds-font); padding: 3px 7px; border-radius: var(--r-pill); }
.mm-side-foot { font-size: var(--ts-xs); color: var(--ink-muted); padding: var(--sp-3) var(--sp-2) 0; }

.mm-main { flex: 1; min-width: 0; }
#view { max-width: var(--mm-maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-4) calc(var(--sp-16) + var(--sp-8)); }

/* ---------- Page primitives ---------- */
.mm-page { display: block; }
.mm-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.mm-h1 { font-size: var(--ts-2xl); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.mm-h2 { font-size: var(--ts-lg); font-weight: 700; margin: 0; }
.mm-h3 { font-size: var(--ts-md); font-weight: 700; margin: 0 0 var(--sp-2); }
.mm-sub { color: var(--ink-soft); margin: var(--sp-1) 0 0; }
.mm-muted { color: var(--ink-muted); font-size: var(--ts-sm); }
.mm-hello { margin-bottom: var(--sp-4); }
.ds-card + .ds-card { margin-top: var(--sp-3); }

/* ---------- Toolbar (tabs + search) ---------- */
.mm-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.mm-tabs { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.mm-tab { border: 0; background: transparent; color: var(--ink-soft); font: 600 var(--ts-sm)/1 var(--ds-font); min-height: 38px; padding: 0 var(--sp-3); border-radius: var(--r-pill); cursor: pointer; }
.mm-tab.on { background: var(--sage-ink); color: #fff; }
.mm-search { max-width: 220px; }

/* ---------- Task list ---------- */
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-task { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.mm-task + .mm-task { margin-top: var(--sp-2); }
.mm-check {
  width: 26px; height: 26px; flex: none; margin-top: 2px;
  border: 2px solid var(--line); border-radius: 50%; background: var(--surface);
  color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}
.mm-task.done .mm-check { background: var(--sage-ink); border-color: var(--sage-ink); }
.mm-task-main { flex: 1; min-width: 0; cursor: pointer; }
.mm-task-title { font-weight: 600; }
.mm-task.done .mm-task-title { text-decoration: line-through; color: var(--ink-muted); }
.mm-task-notes { font-size: var(--ts-sm); color: var(--ink-soft); margin-top: 2px; }
.mm-del { color: var(--ink-muted); }
.mm-del.danger { color: var(--danger); background: var(--danger-bg); width: auto; padding: 0 var(--sp-2); border-radius: var(--r-md); font-size: var(--ts-xs); font-weight: 700; }

/* ---------- Chips ---------- */
.mm-chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-1); }
.mm-chip { font: 600 var(--ts-xs)/1 var(--ds-font); padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-soft); }
.mm-chip.soft { background: var(--sage-soft); color: var(--sage-ink); }
.mm-chip.warn { background: var(--warning-bg); color: var(--warning); }
.mm-chip.hot { background: var(--sage-ink); color: #fff; }
.mm-warn { color: var(--warning); font-weight: 700; }

/* ---------- Calendar ---------- */
.mm-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.mm-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.mm-cal-dow span { text-align: center; font-size: var(--ts-xs); font-weight: 700; color: var(--ink-muted); }
.mm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mm-cal-cell { position: relative; aspect-ratio: 1; border: 1px solid transparent; border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.mm-cal-cell.empty { background: transparent; cursor: default; }
.mm-cal-num { font-size: var(--ts-sm); font-weight: 600; color: var(--ink-soft); }
.mm-cal-cell.today { border-color: var(--sage-ink); }
.mm-cal-cell.today .mm-cal-num { color: var(--sage-ink); font-weight: 800; }
.mm-cal-cell.sel { background: var(--sage-soft); }
.mm-cal-dot { margin-top: auto; font-size: 10px; font-weight: 700; color: #fff; background: var(--sage-ink); min-width: 16px; height: 16px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.mm-day { margin-top: var(--sp-6); }
.mm-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mm-cal-nav strong { font-size: var(--ts-md); }
.mm-today-btn { min-height: 36px; padding: 0 var(--sp-3); }
.mm-weekday { padding: var(--sp-3); }
.mm-weekday + .mm-weekday { margin-top: var(--sp-2); }
.mm-weekday.today { border-color: var(--sage-ink); }
.mm-weekday .mm-h3 { margin: 0; }
.mm-weekday .mm-list { margin-top: var(--sp-2); }
.mm-yeargrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.mm-yearmon { text-align: center; cursor: pointer; padding: var(--sp-4) var(--sp-2); }
.mm-yearmon.today { border-color: var(--sage-ink); }
.mm-yearmon-name { font-weight: 800; font-size: var(--ts-md); }
.mm-yearmon-count { font-size: var(--ts-xs); color: var(--ink-soft); margin-top: var(--sp-1); }

/* ---------- Dashboard widgets ---------- */
.mm-home { max-width: 600px; margin: 0 auto; }
.mm-widgets { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.mm-widget { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); cursor: pointer; display: block; transition: border-color .12s, box-shadow .12s; }
.mm-widget:hover { border-color: var(--sage-ink); box-shadow: 0 2px 10px rgba(20, 33, 58, .06); }
.mm-widget.soon { opacity: .7; cursor: default; }
.mm-widget-head { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--ts-sm); color: var(--ink-soft); }
.mm-widget-head .mm-arrow { margin-left: auto; color: var(--ink-muted); font-size: var(--ts-lg); line-height: 1; }
.mm-widget-main { font-size: var(--ts-lg); font-weight: 500; margin-top: var(--sp-2); letter-spacing: -.01em; color: var(--ink); }
.mm-widget-main b { font-weight: 800; }
.mm-widget-big { font-size: var(--ts-2xl); font-weight: 800; letter-spacing: -.02em; }
.mm-widget-sub { font-size: var(--ts-sm); color: var(--ink-soft); margin-top: var(--sp-1); }
.mm-widget-foot { font-size: var(--ts-xs); color: var(--success); font-weight: 700; margin-top: var(--sp-1); }
/* dashboard mini-charts */
.mm-money-line { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--sp-2); }
.mm-money-bal { font-size: var(--ts-xl); font-weight: 800; letter-spacing: -.02em; }
.mm-trend { font-size: var(--ts-xs); font-weight: 700; }
.mm-trend.up { color: var(--success); } .mm-trend.down { color: var(--danger); }
.mm-spark { width: 100%; height: 34px; display: block; margin-top: var(--sp-2); }
.mm-money-extra { margin-top: var(--sp-1); }
.mm-catbar-row { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: var(--sp-2); font-size: var(--ts-sm); margin-top: 6px; }
.mm-track { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.mm-track > i { display: block; height: 100%; background: var(--sage-ink); border-radius: var(--r-pill); }
.mm-track > i.over { background: var(--warning); }
.mm-ring-wrap { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.mm-ring { position: relative; flex: none; }
.mm-ring .mm-ring-t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--ink); }
.mm-ring-body { min-width: 0; }
.mm-dots { display: flex; gap: 5px; }
.mm-dots span { width: 15px; height: 15px; border-radius: 5px; background: var(--surface-2); }
.mm-dots span.on { background: var(--sage-ink); }
.mm-dots span.today { outline: 2px solid var(--sage); outline-offset: 1px; }
.mm-habit-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); }

/* ---------- Goals ---------- */
.mm-goal-card { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; cursor: pointer; }
.mm-goal-card + .mm-goal-card { margin-top: var(--sp-3); }
.mm-ring { flex: none; }
.mm-goal-main { flex: 1; min-width: 0; }
.mm-goal-title { font-weight: 700; }
.mm-chev { color: var(--ink-muted); font-size: 22px; flex: none; }
.mm-goal-hero { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.mm-step { color: var(--ink-muted); font-size: var(--ts-sm); font-weight: 700; }
.mm-wizard .mm-h1 { margin-top: var(--sp-2); }
.mm-daychips { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.mm-daychip { min-width: 44px; min-height: 44px; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-md); font: 700 var(--ts-sm)/1 var(--ds-font); color: var(--ink-soft); cursor: pointer; }
.mm-daychip.on { background: var(--sage-ink); color: #fff; border-color: var(--sage-ink); }
.mm-plan { list-style: none; margin: 0; padding: 0; }
.mm-plan-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.mm-plan-row:last-child { border-bottom: 0; }
.mm-intention p { font-style: italic; color: var(--ink-soft); }
.mm-refls, .mm-tips { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.mm-refl { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.mm-refl:last-child { border-bottom: 0; }
.mm-review-stats { display: flex; gap: var(--sp-4); text-align: center; margin-bottom: var(--sp-3); }
.mm-review-stats .n { display: block; font-size: var(--ts-xl); font-weight: 800; }
.mm-review-stats .l { display: block; font-size: var(--ts-xs); color: var(--ink-soft); }
.mm-tips li { padding: var(--sp-2) 0; color: var(--ink-soft); }

/* ---------- Habits ---------- */
.mm-habit { display: flex; align-items: center; gap: var(--sp-3); }
.mm-habit-main { flex: 1; min-width: 0; }
.mm-streak { font-weight: 800; color: var(--warning); font-size: var(--ts-md); white-space: nowrap; }
.mm-sesslist { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.mm-sess { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.mm-sess:last-child { border-bottom: 0; }
.mm-sess.active { display: block; }
.mm-sess-title { font-weight: 600; flex: 1; }
.mm-sess.done .mm-sess-title { color: var(--success); }
.mm-subs { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.mm-sub { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--ts-md); cursor: pointer; }
.mm-sub input { width: 22px; height: 22px; accent-color: var(--sage-ink); }

/* ---------- Money ---------- */
.mm-tabs-wide { display: flex; width: 100%; overflow-x: auto; margin-bottom: var(--sp-4); }
.mm-tabs-wide .mm-tab { flex: 1; white-space: nowrap; }
.mm-money-hero { background: var(--sage-ink); color: #fff; }
.mm-hero-net { display: flex; flex-direction: column; margin-bottom: var(--sp-3); }
.mm-hero-net .l { font-size: var(--ts-sm); opacity: .85; }
.mm-hero-net .v { font-size: var(--ts-2xl); font-weight: 800; letter-spacing: -.02em; }
.mm-hero-io { display: flex; gap: var(--sp-3); border-top: 1px solid rgba(255,255,255,.2); padding-top: var(--sp-3); }
.mm-hero-io > div { flex: 1; display: flex; flex-direction: column; }
.mm-hero-io .l { font-size: var(--ts-xs); opacity: .85; }
.mm-hero-io .v { font-size: var(--ts-md); font-weight: 700; }
.mm-hero-io .v.neg { color: #ffd0c4; }
.mm-hero-saved { display: flex; justify-content: space-between; align-items: baseline; margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }
.mm-hero-saved .l { font-size: var(--ts-sm); opacity: .85; }
.mm-hero-saved .v { font-size: var(--ts-md); font-weight: 700; }
.mm-catbar { margin-bottom: var(--sp-3); }
.mm-catbar-top { display: flex; justify-content: space-between; font-size: var(--ts-sm); margin-bottom: var(--sp-1); }
.mm-bar { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; position: relative; }
.mm-bar.sm { height: 6px; }
.mm-bar-fill { height: 100%; background: var(--sage-ink); border-radius: var(--r-pill); }
.mm-bar-fill.pace { background: var(--warning); }
.mm-bar-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .55; border-radius: 1px; }
.mm-seg { display: flex; background: var(--surface-2); border-radius: var(--r-md); padding: 3px; margin-bottom: var(--sp-4); }
.mm-segbtn { flex: 1; min-height: 40px; border: 0; background: transparent; border-radius: var(--r-sm); font: 700 var(--ts-sm)/1 var(--ds-font); color: var(--ink-soft); cursor: pointer; }
.mm-segbtn.on { background: var(--sage-ink); color: #fff; }
.mm-amt { font-weight: 800; white-space: nowrap; }
.mm-amt.pos { color: var(--success); }
.mm-amt.neg { color: var(--ink); }
.mm-acct { display: flex; align-items: center; gap: var(--sp-3); }
.mm-acct-main { flex: 1; min-width: 0; }
.mm-acct-bal { font-weight: 800; white-space: nowrap; }
.mm-bar-fill.over { background: var(--danger); }
.mm-budget-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--ts-sm); }
/* bills (recurring sinking funds) */
.mm-billspanel { display: block; width: 100%; text-align: left; cursor: pointer; }
.mm-bill-row { margin: var(--sp-2) 0; }
.mm-bill-row-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--ts-sm); margin-bottom: 4px; }
.mm-safe { margin-top: var(--sp-3); font-weight: 700; font-size: var(--ts-sm); }
.mm-safe.neg { color: var(--danger); }
.mm-billquick { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.mm-mini { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--ts-sm); }
.mm-hint { font-size: var(--ts-sm); color: var(--ink-soft); margin-top: var(--sp-2); line-height: 1.45; }
.mm-confirm-msg { margin: 0 0 var(--sp-3); color: var(--ink-soft); line-height: 1.5; }
.mm-loan { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.mm-loan .mm-acct-main { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.mm-loan-actions { display: flex; align-items: center; gap: var(--sp-1); }

/* ---------- People ---------- */
.mm-person { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; cursor: pointer; }
.mm-person + .mm-person { margin-top: var(--sp-3); }
.mm-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--sage-soft); color: var(--sage-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.mm-avatar.lg { width: 56px; height: 56px; font-size: var(--ts-xl); }

/* ---------- Notes ---------- */
.mm-note.pinned { border-color: var(--sage-ink); }
.mm-note-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.mm-note-body { margin: var(--sp-2) 0 0; color: var(--ink-soft); white-space: pre-wrap; }
.mm-note-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3); }
.mm-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--ts-md); margin-bottom: var(--sp-3); cursor: pointer; }
.mm-check input { width: 20px; height: 20px; accent-color: var(--sage-ink); }

/* ---------- More drawer ---------- */
.mm-morelist { display: flex; flex-direction: column; gap: 2px; }
.mm-morelist .mm-navbtn { width: 100%; }

/* ---------- Account counts ---------- */
.mm-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); text-align: center; }
.mm-count .n { display: block; font-size: var(--ts-xl); font-weight: 800; }
.mm-count .l { display: block; font-size: var(--ts-xs); color: var(--ink-soft); }

/* ---------- Forms / modal ---------- */
.mm-field { display: block; margin-bottom: var(--sp-3); }
.mm-field > span { display: block; font: 600 var(--ts-sm)/1.3 var(--ds-font); color: var(--ink); margin-bottom: var(--sp-1); }
.mm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mm-form-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }
textarea.ds-input { resize: vertical; padding: var(--sp-3); }

.mm-overlay { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: flex-end; justify-content: center; z-index: 100; padding: 0; }
.mm-modal { background: var(--surface); width: 100%; max-width: 520px; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--sp-4); max-height: 92vh; overflow-y: auto; animation: mmUp .18s ease; }
@keyframes mmUp { from { transform: translateY(24px); opacity: .7; } to { transform: none; opacity: 1; } }
.mm-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.mm-modal-head h2 { font-size: var(--ts-lg); font-weight: 700; margin: 0; }
.mm-x { font-size: 24px; color: var(--ink-soft); }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: calc(var(--sp-16) + var(--sp-4)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill); font-weight: 600; font-size: var(--ts-sm); z-index: 200; max-width: 90%; text-align: center; opacity: 0; transition: opacity .18s ease; box-shadow: 0 8px 24px rgba(15,23,42,.28); }
#toast.show { opacity: 1; }
#toast[hidden] { display: none; }

/* ---------- Mobile: bottom nav ---------- */
#botnav { display: none; }
.mm-mtop { display: none; }
@media (max-width: 720px) {
  .mm-sidebar { display: none; }
  .mm-mtop { display: flex; align-items: center; gap: var(--sp-2); height: 52px; padding: 0 var(--sp-4);
    background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
  .mm-mtop .mm-lang { margin-left: auto; }
  .mm-mtop-logo { font: 800 var(--ts-md)/1 var(--ds-font); color: var(--sage-ink); }
  #view { padding-bottom: calc(64px + var(--sp-8)); }
  #botnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mm-botbtn { flex: 1; min-height: 60px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-muted); font: 700 10px/1.2 var(--ds-font); cursor: pointer; padding: 6px 2px; }
  .mm-botbtn .mm-ico { font-size: 20px; }
  .mm-botbtn.active { color: var(--sage-ink); }
  .mm-form-row { grid-template-columns: 1fr; }
  .mm-modal { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .mm-modal { animation: none; } }

/* ---- Home widget: minimal (empty), featured, customize + editor ---- */
.mm-widget-min { opacity: .9; }
.mm-widget-featured { border-color: var(--sage-ink); box-shadow: 0 2px 12px rgba(20, 33, 58, .07); }
.mm-customize { display: block; width: 100%; margin-top: var(--sp-4); padding: var(--sp-3); min-height: 44px;
  background: transparent; border: 1px dashed var(--line); border-radius: var(--r-lg);
  color: var(--ink-soft); font: 700 var(--ts-sm)/1 var(--ds-font); cursor: pointer; }
.mm-customize:hover { border-color: var(--sage-ink); color: var(--sage-ink); }
.mm-wedit { display: flex; flex-direction: column; gap: var(--sp-2); }
.mm-wedit-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.mm-wedit-row:last-child { border-bottom: 0; }
.mm-wedit-row .mm-ico { font-size: var(--ts-lg); width: 26px; text-align: center; }
.mm-wedit-name { flex: 1; font-weight: 700; color: var(--ink); font-size: var(--ts-md); }
.mm-wedit-toggle { min-width: 74px; min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-muted);
  font: 700 var(--ts-sm)/1 var(--ds-font); cursor: pointer; }
.mm-wedit-toggle.on { background: var(--sage-ink); border-color: var(--sage-ink); color: #fff; }
.mm-wedit-move { width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-md, 10px); color: var(--ink-soft); font-size: 14px; cursor: pointer; }
.mm-wedit-move:disabled { opacity: .3; cursor: default; }

@media (max-width: 720px) {
  /* The most-used widget leads and reads bigger on a phone. */
  .mm-widget-featured { padding: var(--sp-6); }
  .mm-widget-featured .mm-money-bal, .mm-widget-featured .mm-widget-main { font-size: var(--ts-xl); }
  .mm-widget-featured .mm-ring { transform: scale(1.08); transform-origin: left center; }
}

/* Habit session checklist — items carry an optional quantity (reps/amounts),
   and you can add/remove items on the day (e.g. this week's groceries). */
.mm-subs { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0; }
.mm-sitem { display: flex; align-items: center; gap: var(--sp-2); }
.mm-sub-lbl { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-height: var(--tap); cursor: pointer; }
.mm-sub-txt { flex: 1; }
.mm-sub-qty { color: var(--ink-muted); font-weight: 600; }
.mm-sub-del { border: 0; background: transparent; color: var(--ink-muted); font-size: var(--ts-lg); line-height: 1; width: var(--tap); min-height: var(--tap); cursor: pointer; flex: none; }
.mm-sub-add { display: flex; gap: var(--sp-2); align-items: center; margin: var(--sp-2) 0; }
.mm-sub-add .ds-input { flex: 1; }
.mm-qty { max-width: 100px; flex: 0 0 auto; }
.mm-step-row { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.mm-step-row > .ds-input:first-child { flex: 1; }

/* Money Phase 3: month stepper, tappable category rows */
.mm-month-nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); font-weight: 700; }
.mm-month-nav .ds-iconbtn { color: #fff; }
.mm-month-nav button[disabled] { opacity: .35; pointer-events: none; }
.mm-catbar-tap { cursor: pointer; }
.mm-catbar-tap:hover { opacity: .85; }

/* Habit history dots + recurring/last-contacted helpers */
.mm-hdots { display: flex; gap: 3px; margin-top: var(--sp-1); }
.mm-hdot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line); background: transparent; }
.mm-hdot.on { background: var(--sage-ink); border-color: var(--sage-ink); }
.mm-contact { font-size: var(--ts-xs); color: var(--ink-muted); margin-top: 2px; }
.mm-contact.stale { color: var(--warning); font-weight: 600; }

/* Typeahead "search as you type" dropdown (people, categories, tags) */
.mm-ta-wrap { position: relative; }
.mm-ta-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 220px; overflow-y: auto; margin-top: 4px;
}
.mm-ta-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px; min-height: var(--tap);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; color: var(--ink); cursor: pointer;
}
.mm-ta-item:last-child { border-bottom: 0; }
.mm-ta-item:hover, .mm-ta-item:focus { background: var(--sage-soft); }
.mm-ta-sub { color: var(--ink-muted); font-size: var(--ts-xs); }

/* Progressive disclosure: "More details" collapse in forms */
.mm-more { border: 1px solid var(--line); border-radius: var(--r-md); margin-top: var(--sp-3); }
.mm-more > summary { cursor: pointer; padding: 12px 14px; min-height: var(--tap); box-sizing: border-box;
  font-weight: 600; color: var(--sage-ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.mm-more > summary::-webkit-details-marker { display: none; }
.mm-more > summary::before { content: '+'; font-weight: 800; font-size: 1.1em; width: 1em; text-align: center; }
.mm-more[open] > summary::before { content: '\2212'; }
.mm-more-body { padding: 0 14px 12px; }
.mm-mg { margin-top: var(--sp-3); }
.mm-mg:first-child { margin-top: 0; }
.mm-mg-h { font-size: var(--ts-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); margin-bottom: 6px; font-weight: 700; }

/* Unified picker (category / person / account / goal / note-link) */
.mm-picker { position: relative; }
.mm-picker-btn { text-align: left; cursor: pointer; width: 100%; display: block; }
.mm-picker-btn.mm-picker-ph { color: var(--ink-muted); }
.mm-picker-btn::after { content: '\25BE'; float: right; color: var(--ink-muted); margin-left: 8px; }
/* Flow inline (not absolute) — an absolute panel gets CLIPPED inside scrollable
   modals, hiding the search box + "add new". Inline lets the modal scroll to it. */
.mm-picker-panel {
  margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.16); overflow: hidden;
}
.mm-picker-search { margin: 8px; width: calc(100% - 16px); box-sizing: border-box; }
.mm-picker-list { max-height: 220px; overflow-y: auto; }
.mm-picker-opt, .mm-picker-add {
  display: block; width: 100%; text-align: left; padding: 11px 12px; min-height: var(--tap);
  background: none; border: 0; border-top: 1px solid var(--line); font: inherit; color: var(--ink); cursor: pointer;
}
.mm-picker-opt:hover, .mm-picker-opt:focus, .mm-picker-add:hover, .mm-picker-add:focus { background: var(--sage-soft); }
.mm-picker-add { color: var(--sage-ink); font-weight: 600; }
/* The display:block above would otherwise override the [hidden] attribute — make
   filtered-out options and the inactive Add button actually disappear. */
.mm-picker-opt[hidden], .mm-picker-add[hidden] { display: none; }

/* Weekday hint under any date/time field */
.mm-daycue { font-size: var(--ts-xs); color: var(--sage-ink); font-weight: 600; margin-top: 4px; }

/* "More details" carries-data marker (collapsed by default) */
.mm-more-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sage-ink); margin-left: 8px; vertical-align: middle; }

/* To-Do week view */
.mm-wk-jump { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.mm-wk-jumplabel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ts-xs); }
.mm-wk-jumplabel input { min-height: 38px; }
.mm-wk-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); }
.mm-wk-day + .mm-wk-day { margin-top: var(--sp-2); }
.mm-wk-day.today { border-color: var(--sage-ink); }
.mm-wk-dayhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.mm-wk-dayhead > span { font-weight: 700; }
.mm-wk-day.today .mm-wk-dayhead > span { color: var(--sage-ink); }
.mm-wk-empty { margin: 0; }
.mm-wk-overdue { border-color: var(--warning); }

/* App lock (PIN) overlay */
.mm-lock { position: fixed; inset: 0; z-index: 9999; background: var(--surface-2); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.mm-lock-box { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.14); }
.mm-lock-logo { font-size: var(--ts-lg); font-weight: 800; color: var(--sage-ink); margin-bottom: var(--sp-3); }
.mm-lock-box .mm-h2 { margin-bottom: var(--sp-3); }
.mm-lock-pin { text-align: center; letter-spacing: .5em; font-size: var(--ts-lg); }
.mm-lock-box .mm-field { text-align: left; }
.mm-lock-err { color: var(--danger); font-size: var(--ts-sm); font-weight: 600; margin: var(--sp-2) 0; }

/* Sample-data onboarding */
.mm-demo-welcome { border: 1px dashed var(--sage-ink); }
.mm-demo-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  background: var(--sage-soft); border-color: var(--sage); }
.mm-demo-banner span { font-size: var(--ts-sm); font-weight: 600; color: var(--sage-ink); }