/* =====================================================================
   css/finance-planner.css — item-level target-vs-actual planner.
   Ported VERBATIM from finance-planner-prototype.html's "PLANNER SUPPLEMENT"
   block (the approved design). Styles ONLY the planner-specific pieces that
   have no 1:1 native app class (the 3-level tree grid, qty steppers, variance
   chips, budget hero, sticky save bar). Every value is drawn from the app's
   OWN tokens (--card/--line/--plum/--clay/--sage/--gold/--radius/
   --shadow-card/--serif/--sans) so it reads native. The app's real
   styles.css + reskin CSS own the shell, cards, .section-title,
   .segmented/.seg-btn, .hc-pill, .hc-mini, .fin-group-h, .topbar, nav rail.

   Scope note: every selector below is used ONLY inside #fin-plan-root (the
   planner mount) or the .fin-stickybar / .fin-refresh planner chrome, so
   there is no bleed into the Snapshot panel or any other view.
   ===================================================================== */
.num{font-variant-numeric:tabular-nums;}

/* Budget hero layout (uses the real .card as its container) */
.fin-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center;}
@media(max-width:720px){.fin-hero-grid{grid-template-columns:1fr;gap:22px;}}
.fin-budget-inputwrap{
  display:flex;align-items:baseline;gap:6px;width:fit-content;max-width:100%;
  background:var(--cream-2);border:1px solid var(--line);border-radius:16px;
  padding:8px 16px;transition:border-color .15s,box-shadow .15s;margin-top:4px;
}
.fin-budget-inputwrap:focus-within{border-color:var(--plum-soft);box-shadow:0 0 0 3px rgba(90,38,96,0.10);}
.fin-budget-cur{font-family:var(--serif);font-size:24px;color:var(--plum);font-weight:500;}
.fin-budget-input{
  font-family:var(--serif);font-weight:600;font-size:40px;letter-spacing:-.02em;
  color:var(--plum);border:none;background:transparent;width:210px;padding:0;outline:none;
  font-variant-numeric:tabular-nums;
}
.fin-budget-input::-webkit-outer-spin-button,.fin-budget-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.fin-budget-help{font-size:12.5px;color:var(--muted);margin:11px 0 0;line-height:1.5;max-width:340px;}
.fin-budget-help b{color:var(--text);font-weight:700;}
.fin-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.fin-presets .preset{cursor:pointer;}

/* Gauge (built on the real .hc-food-bar track) */
.fin-gauge-row{display:flex;align-items:baseline;gap:8px;}
.fin-gauge-big{font-family:var(--serif);font-size:34px;font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.fin-gauge-of{font-size:13px;color:var(--muted);font-weight:500;}
.fin-gauge-fill{position:absolute;top:0;left:0;height:100%;border-radius:6px;transition:width .35s cubic-bezier(.4,.9,.3,1),background .3s;}
.fin-gauge-line{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--plum);opacity:.5;}
.fin-gauge-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12.5px;gap:10px;}
.fin-gauge-gapv{font-weight:700;}

/* Column header */
.fin-colhead{display:grid;grid-template-columns:1fr 118px 118px 104px;gap:8px;padding:8px 18px 6px;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);}
.fin-colhead .r{text-align:right;}
@media(max-width:640px){.fin-colhead{display:none;}}

/* Category card = real .card language (border --line, radius --radius-sm, shadow-card) */
.cat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);margin-bottom:12px;overflow:hidden;}
.row{display:grid;grid-template-columns:1fr 118px 118px 104px;gap:8px;align-items:center;cursor:pointer;position:relative;}
.row.cat-row{padding:16px 18px;}
.row.sub-row{padding:12px 18px 12px 40px;background:var(--cream-2);}
.row.item-row{padding:11px 18px 11px 60px;cursor:default;}
.sub-wrap,.item-wrap{display:none;}
.cat.open>.sub-wrap{display:block;}
.sub.open>.item-wrap{display:block;}
.sub{border-top:1px solid var(--line);}
.item-row{border-top:1px solid var(--line);}

.namecell{display:flex;align-items:center;gap:10px;min-width:0;}
/* caret = the app's soft plum-tint square (matches .tile-finances icon tint) */
.caret{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;color:var(--plum);background:rgba(90,38,96,0.09);transition:transform .22s ease,background .15s;font-size:11px;}
.open>.row .caret,.sub.open>.row .caret{transform:rotate(90deg);background:rgba(90,38,96,0.16);}
.caret.leaf{background:transparent;color:var(--muted);opacity:.5;cursor:default;font-size:9px;}
.grp-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.nm{min-width:0;}
.nm .t{font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);}
.sub-row .nm .t{font-size:13.5px;}
.item-row .nm .t{font-size:13px;font-weight:600;color:var(--text);}
.nm .meta{font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:600;}
.not-itemized .nm .t{color:var(--muted);font-style:italic;font-weight:600;}
/* itemize tag = the app's amber hc-pill */
.badge-todo{font-size:10px;font-weight:700;letter-spacing:.04em;color:#95651c;background:rgba(217,154,58,0.14);padding:2px 8px;border-radius:999px;text-transform:uppercase;margin-left:4px;font-family:var(--sans);}

/* value cells — Fraunces figures, matching the app's dc-m .val serif language */
.valcell{text-align:right;}
.valcell .top{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.1;color:var(--ink);}
.item-row .valcell .top{font-size:14px;}
.valcell.target .top{color:var(--plum);}
.valcell .cap{font-size:10px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:1px;display:none;font-family:var(--sans);font-weight:700;}
@media(max-width:640px){.valcell .cap{display:block;}}

/* variance chips = the app's hc-pill recipe (plum default, sage under, red over) */
.varcell{text-align:right;}
.var-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;font-family:var(--sans);}
.var-chip.under{background:rgba(138,155,120,.16);color:var(--sage-ink);}
.var-chip.over{background:rgba(192,64,64,.10);color:#c04040;}
.var-chip.on{background:rgba(90,38,96,0.09);color:var(--plum);}

/* mini bar under names = the app's .hc-food-bar track */
.minibar{height:6px;border-radius:6px;background:#f0e7d8;overflow:hidden;margin-top:8px;max-width:280px;}
.minibar .f{height:100%;border-radius:6px;transition:width .35s ease;}
.sub-row .minibar{max-width:200px;margin-top:6px;}

/* qty stepper (desktop) — cream-2 pill w/ --line border + plum glyphs (fin-num-input family) */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--cream-2);overflow:hidden;height:30px;}
.stepper button{width:28px;height:28px;border:none;background:transparent;color:var(--plum);font-size:16px;font-weight:600;cursor:pointer;display:grid;place-items:center;transition:background .12s;line-height:1;}
.stepper button:hover{background:rgba(90,38,96,0.09);}
.stepper button:active{background:rgba(90,38,96,0.09);transform:scale(.94);}
.stepper .qv{min-width:34px;text-align:center;font-family:var(--serif);font-weight:600;font-size:13.5px;color:var(--ink);}
.qty-static{font-family:var(--serif);font-weight:600;font-size:13.5px;color:var(--ink);}
.qtywrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.qty-actual-tag{font-size:10.5px;color:var(--muted);font-weight:600;}
.qty-actual-tag b{color:var(--text);font-weight:700;}
.qty-actual-tag.diff b{color:#c04040;}

/* Refresh button (planner chrome) — the app's seg-btn language, right-aligned */
.fin-refresh{cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.fin-refresh[aria-busy="true"]{opacity:.55;pointer-events:none;}
.fin-refresh .ref-ic{display:inline-block;transition:transform .5s ease;}
.fin-refresh[aria-busy="true"] .ref-ic{animation:finspin .8s linear infinite;}
@keyframes finspin{to{transform:rotate(360deg);}}
.fin-updated{font-size:11px;color:var(--muted);font-weight:600;}

/* sticky save bar — cream-2 glass, --line top; button is the real .btn-primary */
.fin-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(253,249,241,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:11px 16px;}
.fin-stickybar[hidden]{display:none;}
.fin-stickybar-inner{max-width:760px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.fin-sb-left{display:flex;flex-direction:column;}
.fin-sb-left .k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.fin-sb-left .v{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--plum);}
.fin-sb-gap{font-size:13px;font-weight:700;}
.fin-sb-save{margin-top:0;align-self:auto;}

/* On desktop the rail is 104px — clear it under the sticky bar so the inner
   column lines up with the content column, not the whole viewport. */
@media(min-width:900px){ .fin-stickybar-inner{max-width:none;padding-left:104px;} }
@media(min-width:1200px){ .fin-stickybar-inner{padding-left:104px;} }

.flash{animation:finflash .5s ease;}
@keyframes finflash{0%{background:rgba(217,154,58,0.14);}100%{background:transparent;}}

/* ---- Responsive: mobile read-only (mirrors the app's mobile behavior) ---- */
@media(max-width:640px){
  .stepper{display:none;}
  .qty-static.desk{display:none;}
  .fin-stickybar{display:none;}
  .fin-budget-inputwrap{pointer-events:none;background:transparent;border-color:transparent;padding:0;}
  .fin-budget-input{pointer-events:none;width:auto;min-width:0;}
  .fin-presets,.fin-budget-help{display:none;}
  .fin-reset{display:none;}
  .row.cat-row,.row.sub-row,.row.item-row{grid-template-columns:1fr auto;gap:6px 12px;grid-template-rows:auto auto;}
  .row .namecell{grid-column:1;grid-row:1;}
  .row .valcell.actual{grid-column:2;grid-row:1;text-align:right;}
  .row .valcell.target{grid-column:1;grid-row:2;padding-left:32px;text-align:left;display:flex;align-items:baseline;gap:6px;}
  .row .valcell.target .cap{margin-top:0;}
  .row .valcell.target .top{font-size:13px;}
  .row .varcell{grid-column:2;grid-row:2;text-align:right;}
  .valcell .cap{display:inline-block;margin-right:4px;}
  .minibar{max-width:none;}
}