/* Financial-Health-Overview module styles.
   Everything is namespaced under .fho so the module can drop into any page
   without colliding. Design tokens mirror the NTFP system but are declared
   locally here so the module is self-contained. */

.fho{
  /* Ivory Glass palette (Compass · Step 2). */
  --fho-ink:#22303F; --fho-muted:#7E8CA0; --fho-faint:#9AA7B8; --fho-line:rgba(60,72,96,.16);
  --fho-card:rgba(255,255,255,.85); --fho-good:#3E9C6E; --fho-good-d:#2F7A57; --fho-bad:#C25441; --fho-bad-d:#A83F2F;
  --fho-good-soft:rgba(47,122,87,.10); --fho-bad-soft:rgba(194,84,65,.10);
  --fho-pur:#CC8163; --fho-pur-d:#B4603F; --fho-pur-soft:rgba(194,84,65,.06);
  --fho-self:#4F6B92; --fho-self-soft:#e7edf5;
  --fho-radius:12px; --fho-shadow:0 1px 2px rgba(40,30,20,.05);
  font-family:'Space Grotesk',var(--font-sans),sans-serif;
  color:var(--fho-ink);
}

/* ── Panel shell ─────────────────────────────────────────────────────────── */
.fho-panel{background:var(--fho-card);border:1px solid var(--fho-line);border-radius:var(--fho-radius);
  padding:22px 24px;box-shadow:var(--fho-shadow)}
.fho-panel-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
.fho-eyebrow{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--fho-faint)}
.fho-title{margin:4px 0 0;font-size:23px;font-weight:600;letter-spacing:-.1px;font-family:var(--font-serif)}
.fho-panel-head .fho-replay{margin-left:auto}

/* ── Status bars (income vs. expense) ────────────────────────────────────── */
.fho-empty{padding:22px 4px 6px;color:var(--fho-muted);font-size:14px;font-weight:600}
.fho-status .fho-body{display:flex;gap:26px;align-items:stretch}
.fho-status .fho-bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:22px;justify-content:center}
.fho-row{display:flex;gap:18px;align-items:flex-start}
.fho-side{width:158px;flex:none;text-align:right;padding-top:2px}
.fho-barwrap{flex:1;min-width:0}
.fho-cap{font-size:12px;color:var(--fho-muted);margin-top:6px}
.fho-cap-pur{color:var(--fho-pur-d)}
.fho-side-l{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fho-muted)}
.fho-side-v{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:2px}
.fho-ticker{font-size:29px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;font-family:var(--font-serif)}
.fho-edit{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--fho-line);background:var(--fho-card);
  color:var(--fho-faint);font-size:13px;cursor:pointer;line-height:1;transition:.15s;padding:0}
.fho-edit:hover{border-color:var(--fho-self);color:var(--fho-self);background:var(--fho-self-soft)}
.fho-edit.on{border-color:var(--fho-self);color:#fff;background:var(--fho-self)}
.fho-row-in .fho-ticker{color:var(--fho-good-d)}
.fho-row-mout .fho-ticker{color:var(--fho-bad)}
.fho-row-out .fho-ticker{color:var(--fho-pur)}
.fho-row-out .fho-side-l{color:var(--fho-pur)}

.fho-track{position:relative;height:38px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);
  border-radius:11px;box-shadow:inset 0 1px 2px rgba(60,72,96,.06)}
/* the empty gray track "pops up by growing" at the start of the reveal */
.fho-track.grow{animation:fhoTrackIn .34s cubic-bezier(.22,1,.36,1) both}
@keyframes fhoTrackIn{from{transform:scaleY(.24);opacity:.25}to{transform:scaleY(1);opacity:1}}
.fho-track.fho-clickable{cursor:pointer;transition:box-shadow .18s ease;box-shadow:0 0 0 1px rgba(30,45,70,.14);
  animation:fhoPulse 2.2s ease-in-out infinite}
/* mild pulsation so it reads as clickable; hover/active/drilled states stop it */
@keyframes fhoPulse{0%,100%{box-shadow:0 0 0 1px rgba(30,45,70,.14)}50%{box-shadow:0 0 0 3px rgba(30,90,190,.20)}}
.fho-track.fho-clickable:hover,.fho-track.active{animation:none}
.fho-track.fho-clickable:hover{box-shadow:0 0 0 2px rgba(20,40,80,.20)}
.fho-track.fho-clickable:focus-visible{outline:2px solid var(--fho-ink);outline-offset:2px}
.fho-track.active{box-shadow:0 0 0 2px rgba(20,40,80,.28)}
@media (prefers-reduced-motion:reduce){.fho-track.fho-clickable{animation:none}}
.fho-caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--fho-faint);
  transition:transform .3s ease;pointer-events:none}
.fho-track.active .fho-caret{transform:translateY(-50%) rotate(180deg)}
.fho-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:10px}
.fho-fill-in{background:linear-gradient(90deg,rgba(90,180,130,.8),#3E9C6E)}
.fho-fill-mout{background:linear-gradient(90deg,rgba(200,90,70,.85),#C25441)}
/* Money out isn't drilled, but its track shows the same right-extending rectangle as the others. */
.fho-track-mout{box-shadow:inset 0 1px 2px rgba(60,72,96,.06),0 0 0 1px rgba(30,45,70,.12)}
/* Purchases: a dashed, striped bar — "what you bought", visually distinct from cash that left */
.fho-track-pur{border:1.5px dashed rgba(194,84,65,.55);background:rgba(194,84,65,.06)}
.fho-fill-out{background:repeating-linear-gradient(45deg,rgba(222,152,120,.85),rgba(222,152,120,.85) 8px,
  rgba(200,110,80,.7) 8px,rgba(200,110,80,.7) 16px)}
/* The design shows no income-reference line or over-budget tag on the bars. */
.fho-ref,.fho-over{display:none}

/* the income level: a vertical reference the expense bar is read against.
   `left` transitions so the line glides when income is edited. */
.fho-ref{position:absolute;top:-7px;bottom:-7px;width:0;border-left:2px dashed var(--fho-ink);
  opacity:0;transform:translateY(5px);
  transition:left .5s cubic-bezier(.3,.9,.3,1),opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.fho-ref.in{opacity:.35;transform:none}
.fho-ref-l{position:absolute;top:-22px;transform:translateX(-50%);font-size:10px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;color:var(--fho-faint);white-space:nowrap}

/* deficit tag that sits at the tip of an over-extended expense bar */
.fho-over{position:absolute;top:50%;transform:translate(8px,-50%);white-space:nowrap;
  font-size:11px;font-weight:800;color:#fff;background:var(--fho-bad-d);padding:3px 9px;border-radius:999px;
  opacity:0;transition:opacity .35s ease}
.fho-over.show{opacity:1}

/* ── Net cash-flow module (sits to the right of both bars) ───────────────── */
.fho-net{position:relative;overflow:hidden;flex:0 0 auto;width:184px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:2px;padding:16px;border-radius:16px;border:1px solid var(--fho-line);
  opacity:0;transform:translateX(10px);transition:opacity .4s ease,transform .4s ease}
.fho-net.show{opacity:1;transform:none}
.fho-net.bump{animation:fhoBump .5s ease}
@keyframes fhoBump{0%{transform:scale(1)}30%{transform:scale(1.06)}100%{transform:scale(1)}}
/* cursor spotlight layer (painted by the overview pointermove controller) */
.fho-spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease;border-radius:inherit}
.fho-net>:not(.fho-spot){position:relative;z-index:1}
.fho-net-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;margin-bottom:8px}
.fho-net-k{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.fho-net-amt{font-size:33px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;margin-top:1px;font-family:var(--font-serif)}
.fho-net-sub{font-size:12px;color:var(--fho-muted);font-weight:500}

.fho-status[data-verdict="surplus"] .fho-net{background:var(--fho-good-soft);border-color:rgba(47,122,87,.3)}
.fho-status[data-verdict="surplus"] .fho-net-ic{background:linear-gradient(135deg,#4FB07A,#2F7A57);color:#fff}
.fho-status[data-verdict="surplus"] .fho-net-k{color:var(--fho-good-d)}
.fho-status[data-verdict="deficit"] .fho-net{background:var(--fho-bad-soft);border-color:rgba(194,84,65,.3)}
.fho-status[data-verdict="deficit"] .fho-net-ic{background:linear-gradient(135deg,#D6785F,#C25441);color:#fff}
.fho-status[data-verdict="deficit"] .fho-net-k{color:var(--fho-bad-d)}
.fho-net-amt{color:var(--fho-ink)}

/* small replay control */
.fho-replay{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--fho-line);background:var(--fho-card);
  color:var(--fho-muted);font-family:inherit;font-weight:700;font-size:12px;padding:7px 12px;border-radius:9px;cursor:pointer}
.fho-replay:hover{border-color:var(--fho-faint);color:var(--fho-ink)}

/* ── Click-to-decompose: hint, breakdown shell, donut, legend ────────────── */
.fho-hint{margin:24px 0 0;font-size:13px;color:var(--fho-muted);font-weight:500;text-align:center;
  animation:fhoHintBob 2.6s ease-in-out infinite}
/* a subtle up/down nudge inviting the coach to click a bar */
@keyframes fhoHintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.fho-hint{animation:none}}

.fho-breakdown{max-height:0;overflow:hidden;opacity:0;transition:opacity .35s ease}
.fho-breakdown.open{max-height:1200px;overflow:visible;opacity:1;margin-top:18px;padding-top:18px;
  border-top:1px solid var(--fho-line)}
.fho-bd-head{display:flex;align-items:center;margin-bottom:14px}
.fho-bd-k{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.fho-bd-out{color:var(--fho-bad-d)} .fho-bd-in{color:var(--fho-good-d)}
.fho-bd-close{margin-left:auto;border:1px solid var(--fho-line);background:var(--fho-card);width:28px;height:28px;
  border-radius:8px;cursor:pointer;font-size:17px;line-height:1;color:var(--fho-muted)}
.fho-bd-close:hover{border-color:var(--fho-faint);color:var(--fho-ink)}

/* ── Payment-method badge: which card (colour + last-4) / "check" a purchase was on ── */
.fho-pm{display:inline-block;vertical-align:baseline;margin-right:7px;padding:1px 6px;border-radius:6px;
  font-size:10px;font-weight:800;letter-spacing:.02em;color:#fff;line-height:1.5;
  font-variant-numeric:tabular-nums;white-space:nowrap;translate:0 -1px}
.fho-pm-check{background:#8A94A6}

/* ── Money-out drill: card-payment lines + one folded "debit purchases" line (no wheel) ── */
.fho-bd-mout{color:var(--fho-bad-d)}
.fho-mout-list{max-height:230px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  border:1px solid var(--fho-line);border-radius:12px;padding:5px}
.fho-mout-list::-webkit-scrollbar{width:9px}
.fho-mout-list::-webkit-scrollbar-thumb{background:var(--fho-line);border-radius:6px}
.fho-mout-row{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:9px 10px;border-radius:8px;font-size:13.5px}
.fho-mout-row + .fho-mout-row{border-top:1px solid var(--fho-line)}
.fho-mout-row:hover{background:#fafbff}
.fho-mout-row .fho-pm{margin-right:0}
.fho-mout-desc{font-weight:700;color:var(--fho-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fho-mout-desc em{color:var(--fho-muted);font-style:normal;font-weight:600;font-size:12px}
/* Orange-star flag — money out toward a debt with no uploaded statement (a balance we can't see) */
.fho-flag-star{color:#E07B39;font-size:13px;margin-left:4px;cursor:help}
.fho-bd-flag{color:#C4692A;font-weight:800;white-space:nowrap}
.fho-mout-flag{background:rgba(224,123,57,.08)}
.fho-mout-flag:hover{background:rgba(224,123,57,.14)}
.fho-mout-flag .fho-pm-flag{background:#FBEEDF;color:#E07B39;border:1px solid #EEC79A;font-size:12px;padding:1px 5px}
.fho-mout-flag .fho-mout-desc em{color:#C4692A}
.fho-mout-amt{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fho-bad-d)}
.fho-mout-total{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding:11px 10px 0;
  border-top:1px solid var(--fho-line);font-weight:800;font-variant-numeric:tabular-nums;font-size:14px;color:var(--fho-ink)}

.fho-donut{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.fho-donut-svg{width:176px;height:176px;flex:0 0 auto}
.fho-seg{transition:opacity .18s;cursor:pointer}
.fho-donut-svg:hover .fho-seg{opacity:.4}
.fho-donut-svg .fho-seg:hover{opacity:1}
.fho-donut.has-sel .fho-seg:not(.sel){opacity:.22}
.fho-donut.has-sel .fho-seg.sel{opacity:1}
.fho-donut-c{font-size:24px;font-weight:600;fill:var(--fho-ink);font-variant-numeric:tabular-nums;font-family:var(--font-serif)}
.fho-donut-cs{font-size:9.5px;font-weight:700;fill:var(--fho-faint)}

.fho-legend{flex:1;min-width:250px;display:flex;flex-direction:column;gap:1px}
.fho-li{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:8px;cursor:pointer;
  opacity:0;transform:translateY(6px);transition:opacity .32s ease,transform .32s ease,background .15s}
.fho-li.show{opacity:1;transform:none}
.fho-li:hover{background:#fafbff}
.fho-li.sel{background:#f1f4ff;box-shadow:inset 0 0 0 1px #d8def0}
.fho-li:focus-visible{outline:2px solid var(--fho-ink);outline-offset:1px}
.fho-li i{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
/* drag-to-reorder category rows */
.fho-li-grip{flex:0 0 auto;color:var(--fho-faint);font-size:15px;line-height:1;cursor:grab;user-select:none;
  padding:0 1px;opacity:.55}
.fho-li-grip:hover{opacity:1;color:var(--fho-muted)}
.fho-li-grip:active{cursor:grabbing}
.fho-li.draggable-row.dragging{opacity:.4}
.fho-li.drop-above{box-shadow:inset 0 2px 0 var(--fho-self)}
.fho-li.drop-below{box-shadow:inset 0 -2px 0 var(--fho-self)}
.fho-li-lab{font-size:13.5px;font-weight:700;line-height:1.25}
.fho-li-lab small{display:block;font-size:10.5px;color:var(--fho-faint);font-weight:600}
.fho-li-val{margin-left:auto;text-align:right;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25}
.fho-li-val small{display:block;font-size:10.5px;color:var(--fho-faint);font-weight:700}

/* ── Traceability drill-down: exact statement line items ─────────────────── */
.fho-trace-hint{margin:14px 0 0;font-size:12px;color:var(--fho-faint);font-weight:600;text-align:center}
.fho-txns{max-height:0;overflow:hidden;opacity:0;transition:opacity .3s ease}
.fho-txns.open{max-height:2400px;overflow:visible;opacity:1;margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--fho-line)}
.fho-txns-head{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:10px}
.fho-txns-head .fho-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.fho-txns-head b{font-weight:800}
.fho-txns-meta{margin-left:auto;font-size:12px;color:var(--fho-muted);font-weight:700;font-variant-numeric:tabular-nums}
.fho-sort-sel{font-family:inherit;font-size:11.5px;font-weight:700;color:var(--fho-muted);border:1px solid var(--fho-line);
  border-radius:8px;padding:4px 7px;background:var(--fho-card);cursor:pointer;margin-left:6px}
.fho-sort-sel:hover{border-color:var(--fho-faint);color:var(--fho-ink)}
.fho-newcat-btn{font-family:inherit;font-size:11.5px;font-weight:700;color:#5a49b0;border:1px solid var(--fho-self,#c7bdf0);
  border-radius:8px;padding:4px 9px;background:var(--fho-card);cursor:pointer;margin-left:6px;white-space:nowrap}
.fho-newcat-btn:hover{border-color:#5a49b0;background:#f3f0fb}
.fho-txns-cols,.fho-txn{display:grid;grid-template-columns:82px 1fr 100px;gap:10px}
.fho-txns-cols{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--fho-faint);
  padding:0 10px 6px}
.fho-txns-cols span:nth-child(3){text-align:right}
/* Cap the drilled line-item list at ~10 rows and scroll the rest — a long category otherwise
   trickles down and covers the notepad, blocking note-writing. */
.fho-txn-list{display:flex;flex-direction:column;max-height:378px;overflow-y:auto;overscroll-behavior:contain}
.fho-txn-list::-webkit-scrollbar{width:9px}
.fho-txn-list::-webkit-scrollbar-thumb{background:var(--fho-line);border-radius:6px}
.fho-txn{position:relative;padding:9px 10px;font-size:13px;border-top:1px solid var(--fho-line);align-items:center;
  font-variant-numeric:tabular-nums;opacity:0;animation:fhoTxnIn .3s ease forwards;
  animation-delay:calc(var(--k) * 40ms);border-radius:6px}
.fho-txn-date{color:var(--fho-muted);font-weight:600}
.fho-txn-desc{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fho-txn-amt{text-align:right;font-weight:800}
.fho-txn-amt.neg{color:var(--fho-bad-d)} .fho-txn-amt.pos{color:var(--fho-good-d)}
.fho-txn-bal{text-align:right;color:var(--fho-muted);font-weight:700}
/* ── Editable line items ─────────────────────────────────────────────────── */
.fho-txn.editable{cursor:pointer}
.fho-txn.editable:hover{background:#fafbff}
.fho-txn.selected{background:#eef2ff;box-shadow:inset 0 0 0 1px #d3dcf5}
.fho-txn.ignored{opacity:.65}
.fho-txn.ignored .fho-txn-desc,.fho-txn.ignored .fho-txn-amt{text-decoration:line-through;
  color:var(--fho-faint) !important;font-weight:600 !important}
.fho-txn-tools{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;gap:4px;
  background:#eef2ff;padding:3px 3px 3px 10px;border-radius:9px}
.fho-txn.selected .fho-txn-tools{display:flex}
.fho-tool{width:26px;height:26px;border:1px solid #d3dcf5;background:var(--fho-card);border-radius:7px;cursor:pointer;
  font-size:13px;line-height:1;color:var(--fho-muted);padding:0;transition:.12s}
.fho-tool:hover{border-color:var(--fho-ink);color:var(--fho-ink)}
.fho-tool-ignore:hover{border-color:var(--fho-bad);color:var(--fho-bad-d)}
.fho-tool-move:hover{border-color:var(--fho-self);color:var(--fho-self)}
/* inline amount editor */
.fho-amt-edit{display:inline-flex;align-items:center;gap:3px;justify-content:flex-end}
.fho-amt-edit>span{color:var(--fho-faint);font-weight:700}
.fho-amt-in{width:64px;border:1px solid var(--fho-self);border-radius:6px;padding:3px 5px;font-family:inherit;
  font-size:12.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.fho-amt-in:focus{outline:none;box-shadow:0 0 0 2px rgba(124,107,160,.22)}
.fho-amt-ok{border:1px solid var(--fho-self);background:var(--fho-self);color:#fff;border-radius:6px;width:24px;height:24px;
  cursor:pointer;font-size:12px;padding:0}
/* move-to-category menu + selection note */
.fho-move-menu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 8px 8px;padding-bottom:8px;
  border-bottom:1px solid var(--fho-line)}
.fho-mm-l{font-size:11.5px;font-weight:800;color:#5a49b0}
.fho-move-sel{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--fho-ink);border:1px solid var(--fho-self);
  border-radius:8px;padding:5px 8px;background:var(--fho-card);cursor:pointer}
.fho-move-cancel{border:1px solid var(--fho-line);background:var(--fho-card);color:var(--fho-muted);font-family:inherit;
  font-weight:700;font-size:11.5px;padding:5px 10px;border-radius:7px;cursor:pointer}
.fho-newcat-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 8px 8px;padding-bottom:8px;
  border-bottom:1px solid var(--fho-line)}
.fho-newcat-in{font-family:inherit;font-size:12.5px;border:1px solid var(--fho-self,#c7bdf0);border-radius:8px;
  padding:5px 9px;min-width:190px;flex:1}
.fho-newcat-in:focus{outline:none;border-color:#5a49b0}
.fho-newcat-ok{border:1px solid #5a49b0;background:#5a49b0;color:#fff;font-family:inherit;font-size:12px;font-weight:700;
  border-radius:7px;padding:5px 12px;cursor:pointer}
.fho-newcat-ok:hover{background:#4a3b96}
.fho-newcat-cancel{border:1px solid var(--fho-line);background:var(--fho-card);color:var(--fho-muted);font-family:inherit;
  font-weight:700;font-size:11.5px;padding:5px 10px;border-radius:7px;cursor:pointer}
.fho-sel-note{margin-left:auto;font-size:11px;font-weight:800;color:#5a49b0}
.fho-sel-note.muted{color:var(--fho-faint);font-weight:600}
/* revert tags: hover reveals an × to undo that edit on this row */
.fho-revert{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;letter-spacing:.3px;
  text-transform:uppercase;border:1px solid transparent;border-radius:5px;padding:1px 6px;margin-left:6px;
  cursor:pointer;vertical-align:middle;font-family:inherit;text-decoration:none;line-height:1.5}
.fho-revert .fho-revert-x{display:none;font-size:12px;line-height:1}
.fho-revert:hover .fho-revert-x{display:inline}
.fho-revert:hover{border-color:currentColor}
.fho-revert.rv-amount{color:#5a49b0;background:#efecfb}
.fho-revert.rv-category{color:#2f5bbf;background:#e7eeff}
.fho-revert.rv-ignored{color:#5e6878;background:#eceef2}
.fho-freq{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
/* repeat-purchase color key */
.fho-freq-key{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;font-weight:800;
  font-variant-numeric:tabular-nums;margin:0 8px 8px;padding-bottom:8px;border-bottom:1px solid var(--fho-line)}
.fho-freq-key .fho-fk-l{color:var(--fho-faint);font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:10.5px}
.fho-freq-key .fho-fk-sep{color:var(--fho-faint);font-weight:600}
/* "edit sensitivity" affordance + the editable-thresholds form */
.fho-sens-edit{margin-left:auto;border:0;background:none;font-family:inherit;font-size:11px;font-weight:700;
  color:var(--fho-faint);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.fho-sens-edit:hover{color:var(--fho-muted)}
.fho-freq-key.editing{gap:10px}
.fho-sens-f{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--fho-muted)}
.fho-sens-f i{width:9px;height:9px;border-radius:2px}
.fho-sens-in{width:44px;border:1px solid var(--fho-line);border-radius:6px;padding:3px 5px;font-family:inherit;
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center}
.fho-sens-in:focus{outline:none;border-color:var(--fho-ink)}
.fho-sens-apply{border:1px solid var(--fho-self);background:var(--fho-self);color:#fff;font-family:inherit;font-weight:700;
  font-size:11.5px;padding:4px 11px;border-radius:7px;cursor:pointer}
.fho-sens-apply:hover{background:#5a44b3}
.fho-sens-cancel{border:1px solid var(--fho-line);background:var(--fho-card);color:var(--fho-muted);font-family:inherit;
  font-weight:700;font-size:11.5px;padding:4px 10px;border-radius:7px;cursor:pointer}
.fho-sens-cancel:hover{border-color:var(--fho-faint);color:var(--fho-ink)}
.fho-sens-err{color:var(--fho-bad-d);font-weight:700;font-size:11px}
@keyframes fhoTxnIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── Manual "new component" markers ──────────────────────────────────────── */
.fho-tag{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  color:#5a49b0;background:#efecfb;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.fho-li.manual .fho-li-lab{color:#5a49b0}
.fho-txn.manual{background:#f7f5fe}
/* brief spotlight on a freshly-added slice — no dimming of the others */
@keyframes fhoLiFlash{0%,55%{background:#ece7fb}100%{background:transparent}}
.fho-li.flash{animation:fhoLiFlash 1.5s ease}
@keyframes fhoSegFlash{0%,100%{stroke-width:26}45%{stroke-width:33}}
.fho-seg.flash{animation:fhoSegFlash 1.1s ease}
.fho-txns-head .fho-tag{background:#efecfb}

/* prior-edits list inside the add-entry form, with remove buttons */
.fho-ef-edits{margin-top:14px}
.fho-ef-edits:empty{display:none}
.fho-ee-h{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--fho-faint);
  border-top:1px solid #e6e1f6;padding-top:12px;margin-bottom:8px}
.fho-ee{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;background:var(--fho-card);
  border:1px solid #e6e1f6;margin-bottom:6px}
.fho-ee-lab{font-size:13px;font-weight:700}
.fho-ee-amt{margin-left:auto;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:#5a49b0}
.fho-ee-del{border:1px solid var(--fho-line);background:var(--fho-card);color:var(--fho-muted);font-family:inherit;
  font-weight:700;font-size:11.5px;padding:5px 10px;border-radius:7px;cursor:pointer}
.fho-ee-del:hover{border-color:var(--fho-bad);color:var(--fho-bad);background:var(--fho-bad-soft)}

/* ── Add-entry form (pencil) ─────────────────────────────────────────────── */
.fho-editform[hidden]{display:none}
.fho-editform{margin-top:16px}
.fho-ef-inner{border:1px solid #d9d2f4;background:#faf9fe;border-radius:13px;padding:14px 16px}
.fho-ef-title{font-size:13px;font-weight:800;color:#4a3da0}
.fho-ef-title span{display:block;font-size:11.5px;font-weight:600;color:var(--fho-muted);margin-top:2px}
.fho-ef-fields{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.fho-ef-label{flex:1;min-width:180px;border:1px solid var(--fho-line);border-radius:9px;padding:10px 12px;
  font-size:14px;font-family:inherit}
.fho-ef-amt{display:flex;align-items:center;gap:4px;border:1px solid var(--fho-line);border-radius:9px;
  padding:0 12px;background:var(--fho-card)}
.fho-ef-amt span{color:var(--fho-faint);font-weight:700}
.fho-ef-num{width:110px;border:0;padding:10px 4px;font-size:14px;font-family:inherit;font-variant-numeric:tabular-nums}
.fho-ef-label:focus,.fho-ef-num:focus{outline:none}
.fho-ef-amt:focus-within,.fho-ef-label:focus{border-color:var(--fho-self);box-shadow:0 0 0 3px rgba(124,107,160,.22)}
.fho-ef-label.bad,.fho-ef-num.bad,.fho-ef-amt:has(.bad){border-color:var(--fho-bad);box-shadow:0 0 0 3px var(--fho-bad-soft)}
.fho-ef-add{border:1px solid var(--fho-self);background:var(--fho-self);color:#fff;font-family:inherit;font-weight:700;font-size:13.5px;
  padding:10px 16px;border-radius:9px;cursor:pointer}
.fho-ef-add:hover{background:#5a44b3}
.fho-ef-cancel{border:1px solid var(--fho-line);background:var(--fho-card);color:var(--fho-muted);font-family:inherit;
  font-weight:700;font-size:13.5px;padding:10px 14px;border-radius:9px;cursor:pointer}
.fho-ef-cancel:hover{border-color:var(--fho-faint);color:var(--fho-ink)}
.fho-ef-note{font-size:12.5px;font-weight:700;color:var(--fho-good-d);margin-top:10px;min-height:16px}
/* scope selector: where a manual entry lands across the months (one-time / monthly / split) */
.fho-ef-scope{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:12px;padding-top:12px;border-top:1px dashed #e0d9f4}
.fho-ef-opt{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--fho-ink);cursor:pointer}
.fho-ef-opt input[type=radio]{accent-color:#5a49b0;width:15px;height:15px;margin:0;cursor:pointer}
.fho-ef-opt em{font-style:normal;font-weight:600;font-size:11.5px;color:var(--fho-muted)}
.fho-ef-month{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--fho-ink);border:1px solid var(--fho-line);
  border-radius:8px;padding:4px 7px;background:var(--fho-card);cursor:pointer}
.fho-ef-month:disabled{opacity:.4;cursor:not-allowed}
.fho-ef-actions{display:flex;gap:10px;margin-top:14px}
.fho-ee-scope{display:inline-block;margin-left:8px;font-style:normal;font-weight:700;font-size:10.5px;
  color:#6b5cae;background:#efeafb;border-radius:999px;padding:1px 8px;vertical-align:middle}

@media (prefers-reduced-motion: reduce){
  .fho *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

@media(max-width:640px){
  .fho-status .fho-body{flex-direction:column;gap:16px}
  .fho-net{width:auto;flex-direction:row;gap:12px;justify-content:flex-start}
  .fho-net-ic{margin-bottom:0}
}
@media(max-width:560px){
  .fho-row{grid-template-columns:1fr;gap:6px}
  .fho-side{text-align:left}
  .fho-ticker{font-size:26px}
}

/* ── comment on selected lines ─────────────────────────────────────────────
   Sits in the same slot as the "Move N selected to…" menu (fho.js paintSlice),
   because it's the same gesture: select lines, then act on them. This is the
   notepad at the point the conversation actually happens — the coach and client
   are looking at these rows. */
.fho-cmt-box { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px;
               background: var(--fho-card, #fbfbf9); border-radius: 6px; }
.fho-cmt-in { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px; resize: vertical;
              border: 1px solid rgba(57,52,50,.18); border-radius: 4px; background: #fff;
              color: var(--fho-ink, #393432); }
.fho-cmt-in:focus { outline: none; border-color: var(--step-now, #5f7fa6); }
.fho-cmt-row { display: flex; gap: 8px; align-items: center; }
.fho-cmt-save, .fho-cmt-cancel { font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer;
                                 border-radius: 4px; border: 1px solid rgba(57,52,50,.20); background: #fff; }
.fho-cmt-save { background: var(--fho-ink, #393432); color: #fbfbf9; border-color: transparent; }
/* the 💬 marker on a row the coach has already spoken about */
.fho-txn-cmt { font-size: 11px; opacity: .75; margin-left: 4px; }

/* comment badge — same chip shape as the edit badges (.fho-revert), its own green colour, click to edit */
.fho-revert.fho-cmt-badge { color: #3c7359; background: #e6efe9; }
.fho-revert.fho-cmt-badge:hover { border-color: currentColor; background: #dbe9e0; }
/* while editing an amount, hide the tool buttons — they overlap the input box (both hug the right edge) */
.fho-txn.editing .fho-txn-tools { display: none; }