/* House Money (/home-cash): loaded on this page only. Same depth and tokens as
   the Cash Playground; the runway is the one bold element. Motion is
   transform and opacity only; reduced motion is honoured. */
.hm-stage {
  --hm-ink: var(--ink); --hm-ink-2: #5A6478; --hm-gain: var(--accent); --hm-strong: var(--navy);
  --hm-mist-1: #E6ECF5; --hm-mist-2: #F7F9FC; --hm-card: #FFFFFF;
  --hm-glass: color-mix(in srgb, #FFFFFF 80%, transparent);
  --hm-sh-1: 0 1px 1px rgba(14, 59, 88, .04), 0 2px 4px rgba(14, 59, 88, .05), 0 12px 28px -14px rgba(14, 59, 88, .22);
  --hm-sh-2: 0 1px 2px rgba(14, 59, 88, .05), 0 8px 18px -6px rgba(14, 59, 88, .14), 0 28px 60px -24px rgba(14, 59, 88, .35);
  --hm-bill: #1F5F8B; --hm-bill-2: #2C79AE; --hm-fund: color-mix(in srgb, var(--sky) 30%, var(--hm-card)); --hm-wait: color-mix(in srgb, var(--hm-strong) 8%, var(--hm-card));
  position: relative; isolation: isolate; margin: 0 -16px 8px; padding: 8px 16px 44px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hm-stage { --hm-ink-2: var(--ink-3); --hm-strong: var(--sky); --hm-mist-1: #0F2232; --hm-mist-2: #0B1620; --hm-card: var(--surface); --hm-glass: color-mix(in srgb, var(--surface) 84%, transparent);
    --hm-sh-1: 0 0 0 1px #233545, 0 12px 28px -14px rgba(0,0,0,.6); --hm-sh-2: 0 0 0 1px #2F4557, 0 28px 60px -24px rgba(0,0,0,.7);
    --hm-bill: #3E8FC4; --hm-bill-2: #56A5D8; --hm-fund: color-mix(in srgb, var(--sky) 26%, var(--hm-card)); }
}
:root[data-theme="dark"] .hm-stage { --hm-ink-2: var(--ink-3); --hm-strong: var(--sky); --hm-mist-1: #0F2232; --hm-mist-2: #0B1620; --hm-card: var(--surface); --hm-glass: color-mix(in srgb, var(--surface) 84%, transparent);
  --hm-sh-1: 0 0 0 1px #233545, 0 12px 28px -14px rgba(0,0,0,.6); --hm-sh-2: 0 0 0 1px #2F4557, 0 28px 60px -24px rgba(0,0,0,.7);
  --hm-bill: #3E8FC4; --hm-bill-2: #56A5D8; --hm-fund: color-mix(in srgb, var(--sky) 26%, var(--hm-card)); }
@media (min-width: 760px) { .hm-stage { margin-inline: -32px; padding-inline: 32px; } }
.hm-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0 0 32px 32px;
  background: radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 60%), linear-gradient(180deg, var(--hm-mist-2), var(--hm-mist-1)); }
.hm-pagehead { padding-top: 28px; }
.hm-pagehead .page-title { max-width: none; font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; }
.hm-pagehead .lede { margin-bottom: 18px; }

.hm { display: flex; flex-direction: column; gap: 16px; font-variant-numeric: tabular-nums lining-nums; }
@media (min-width: 960px) {
  .hm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "scn scn" "ctl ctl" "res plan" "opts plan"; gap: 18px 24px; align-items: start; }
  .hm-scn { grid-area: scn; } .hm-controls { grid-area: ctl; } .hm-result { grid-area: res; } .hm-opts { grid-area: opts; }
  .hm-plan { grid-area: plan; position: sticky; top: 88px; }
}
.hm-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--hm-ink-2); }
.hm-h { font: 680 16px/1.3 var(--font); letter-spacing: -0.01em; margin: 0 0 12px; color: var(--hm-ink); }

/* ---------- situation: three cards, one sliding highlight ---------- */
.hm-scn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hm-scn button { position: relative; border: 0; padding: 0; text-align: left; border-radius: 18px; background: var(--hm-glass); box-shadow: var(--hm-sh-1); cursor: pointer; color: var(--hm-ink); transition: transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.hm-scn button:active { transform: scale(0.98); }
.hm-scn-pill { position: absolute; inset: 0; border-radius: inherit; background: var(--hm-card); box-shadow: var(--hm-sh-2), inset 0 0 0 2px var(--hm-strong); }
.hm-scn-in { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; }
.hm-scn-in svg { grid-row: span 2; width: 44px; height: 30px; fill: none; stroke: var(--hm-ink-2); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; transition: stroke 200ms ease; }
.hm-scn button.is-on svg { stroke: var(--hm-strong); }
.hm-scn .hm-ic-accent { stroke: var(--cta); }
.hm-scn-in b { font: 680 15px/1.25 var(--font); }
.hm-scn-in span { font-size: 13px; line-height: 1.35; color: var(--hm-ink-2); }
.hm-scn button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- controls: amount and the closing-day runway ---------- */
.hm-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px 28px; padding: 18px 22px 14px; border-radius: 20px; background: var(--hm-glass); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); box-shadow: var(--hm-sh-1); }
.hm-amount, .hm-date { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
.hm-amount-n, .hm-date-n { justify-self: end; font: 720 22px/1.15 var(--font); letter-spacing: -0.02em; color: var(--hm-ink); }
.hm-date-n small { font-size: 13px; font-weight: 600; color: var(--hm-ink-2); letter-spacing: 0; margin-left: 4px; }
.hm-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12px; color: var(--hm-ink-2); margin-top: -4px; }
.hm-amount input[type=range] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.hm-amount input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--hm-strong) var(--p), var(--rule-2) var(--p)); }
.hm-amount input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--rule-2); }
.hm-amount input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--hm-strong); }
.hm-amount input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(14,59,88,.18), 0 3px 8px rgba(14,59,88,.28); transition: transform 160ms var(--ease-out); }
.hm-amount input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(14,59,88,.18), 0 3px 8px rgba(14,59,88,.28); }
.hm-amount input[type=range]:active::-webkit-slider-thumb { transform: scale(1.1); }
.hm-amount input[type=range]:focus-visible { outline: none; }
.hm-amount input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus); }

/* The runway: months marked, the house pin rides the thumb of a real range input. */
.hm-runway { grid-column: 1 / -1; position: relative; display: block; height: 62px; margin-top: 2px; }
.hm-runway::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 8px; border-radius: 999px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hm-strong) 14%, transparent) 0 14px, transparent 14px 22px); }
.hm-runway-fill { position: absolute; left: 0; right: 0; top: 30px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--hm-strong), var(--sky)); transform-origin: left center; }
.hm-runway-ticks i { position: absolute; top: 42px; width: 1px; height: 6px; background: var(--rule-2); }
.hm-runway-ticks span { position: absolute; top: 7px; left: 50%; translate: -50% 0; font: 600 11px/1 var(--font); font-style: normal; color: var(--hm-ink-2); white-space: nowrap; }
.hm-pin { position: absolute; top: 0; width: 34px; height: 40px; translate: -50% 0; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(14,59,88,.3)); }
.hm-pin svg { width: 100%; height: 100%; }
.hm-pin path:first-child { fill: var(--cta); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.hm-pin path:last-child { stroke: var(--cta); stroke-width: 2.4; stroke-linecap: round; }
.hm-runway input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; touch-action: pan-y; }
.hm-runway input[type=range]:active { cursor: grabbing; }
.hm-runway:has(input:focus-visible) .hm-pin { filter: drop-shadow(0 0 0 var(--focus)) drop-shadow(0 0 3px var(--focus)); }
.hm-runway:has(input:active) .hm-pin { transform: scale(1.08) translateY(-2px); }
.hm-pin { transition: transform 160ms var(--ease-out); }

.hm-adjust { grid-column: 1 / -1; font-size: 14px; }
.hm-adjust summary { cursor: pointer; color: var(--hm-ink-2); font-weight: 600; width: max-content; padding: 6px 0; }
.hm-adjust-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; padding-top: 8px; }
.hm-adjust-in label { display: grid; gap: 6px; color: var(--hm-ink-2); font-weight: 600; font-size: 13px; }
.hm-adjust-in input, .hm-adjust-in select, .hm-money, .hm-pct { height: 42px; font: 600 16px/1 var(--font); color: var(--hm-ink); background: var(--hm-card); border: 1px solid var(--rule-2); border-radius: 12px; padding: 0 12px; }
.hm-money, .hm-pct { display: inline-flex; align-items: center; gap: 2px; }
.hm-money input, .hm-pct input { height: auto; border: 0; padding: 0; background: transparent; width: 100%; outline: none; }
.hm-money:focus-within, .hm-pct:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }

/* ---------- result ---------- */
.hm-result { padding: 22px 24px; border-radius: 22px; background: var(--hm-glass); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: var(--hm-sh-2); }
.hm-k { margin: 0; font-size: 14px; color: var(--hm-ink-2); }
.hm-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 6px; font: 750 60px/1 var(--font); letter-spacing: -0.04em; color: var(--hm-ink); }
.hm-big small { font: 600 15px/1.3 var(--font); letter-spacing: 0; color: var(--hm-ink-2); }
.hm-vs { margin: 0; font-size: 15px; color: var(--hm-ink-2); }
.hm-vs b { color: var(--hm-gain); }

/* ---------- ranked options ---------- */
.hm-opts { padding: 18px 18px 14px; border-radius: 22px; background: var(--hm-card); box-shadow: var(--hm-sh-1); }
.hm-opt-list { display: grid; gap: 8px; }
.hm-opt { display: grid; gap: 8px; width: 100%; text-align: left; border: 0; padding: 12px 14px; border-radius: 14px; background: transparent; color: var(--hm-ink); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow 160ms ease, background-color 160ms ease; }
.hm-opt.is-sel { background: color-mix(in srgb, var(--hm-strong) 6%, var(--hm-card)); box-shadow: inset 0 0 0 2px var(--hm-strong); }
.hm-opt:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .hm-opt:not(.is-sel):hover { box-shadow: inset 0 0 0 1px var(--rule-2); } }
.hm-opt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hm-opt-name { display: block; min-width: 0; }
.hm-opt-name small { margin-left: 6px; }
.hm-opt-name b { font: 650 15px/1.3 var(--font); }
.hm-opt-name small { font-size: 13px; color: var(--hm-ink-2); }
.hm-badge { display: table; margin-bottom: 6px; font: 700 11.5px/1 var(--font); color: var(--hm-card); background: var(--hm-gain); padding: 4px 8px; border-radius: 999px; }
.hm-opt-v { font: 720 18px/1.2 var(--font); letter-spacing: -0.01em; white-space: nowrap; }
.hm-bar { height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.hm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--fed); transform-origin: left center; }
.hm-opt.is-sel .hm-bar i, .hm-opt:first-child .hm-bar i { background: linear-gradient(90deg, var(--hm-strong), var(--sky)); }
.hm-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.hm-tags span { font-size: 12px; color: var(--hm-ink-2); background: color-mix(in srgb, var(--hm-strong) 5%, transparent); padding: 3px 8px; border-radius: 999px; }
.hm-note { font-size: 13px; color: var(--hm-ink-2); margin: 10px 2px 0; }

/* ---------- the plan: runway lanes ---------- */
.hm-plan { padding: 20px 20px 16px; border-radius: 22px; background: var(--hm-card); box-shadow: var(--hm-sh-2); }
.hm-run { position: relative; display: grid; gap: 10px; padding: 4px 0 30px; --name: 112px; }
.hm-lane { display: grid; grid-template-columns: var(--name) 1fr; align-items: center; gap: 10px; }
.hm-lane-name { display: grid; font: 700 14px/1.2 var(--font); color: var(--hm-ink); }
.hm-lane-name small { font: 500 12px/1.3 var(--font); color: var(--hm-ink-2); }
.hm-track { position: relative; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--hm-strong) 4%, transparent); }
.hm-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; border-radius: 8px; padding: 0 8px; }
.hm-seg em { font: 650 12px/1 var(--font); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-seg.is-bill { background: linear-gradient(180deg, var(--hm-bill-2), var(--hm-bill)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 2px 6px -2px rgba(14,59,88,.4); }
.hm-seg.is-bill + .hm-seg.is-bill { margin-left: 2px; }
.hm-seg.is-fund { background: var(--hm-fund); color: var(--hm-ink); }
.hm-seg.is-wait { background: repeating-linear-gradient(135deg, var(--hm-wait) 0 6px, transparent 6px 10px); color: var(--hm-ink-2); }
.hm-seg.is-roll { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--hm-bill) 35%, transparent) 0 8px, transparent 8px 12px); color: var(--hm-ink); }
.hm-overlay { position: absolute; left: calc(var(--name) + 10px); right: 0; top: 0; bottom: 30px; pointer-events: none; }
.hm-safe { position: absolute; top: -4px; bottom: -4px; right: 0; border-left: 2px dashed color-mix(in srgb, var(--hm-gain) 70%, transparent); background: color-mix(in srgb, var(--hm-gain) 9%, transparent); border-radius: 0 10px 10px 0; }
.hm-safe span { position: absolute; top: -18px; right: 4px; font: 650 11px/1 var(--font); color: var(--hm-gain); white-space: nowrap; }
.hm-axis { position: absolute; left: calc(var(--name) + 10px); right: 0; bottom: 0; height: 22px; font: 600 12px/1 var(--font); color: var(--hm-ink-2); }
.hm-tick { position: absolute; bottom: 4px; white-space: nowrap; }
.hm-tick.is-start { left: 0; }
.hm-tick.is-mid { translate: -50% 0; color: var(--hm-gain); }
.hm-tick.is-end { right: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--hm-ink); }
.hm-tick.is-end svg { width: 13px; height: 13px; fill: var(--cta); }

.hm-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.hm-steps li { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: baseline; }
.hm-chip { justify-self: start; font: 700 12px/1 var(--font); color: var(--hm-strong); background: color-mix(in srgb, var(--hm-strong) 9%, transparent); padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.hm-steps p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--hm-ink); }
.hm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hm-cta, .hm-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 650 14.5px/1 var(--font); text-decoration: none; border: 0; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.hm-cta { color: var(--cta-ink); background: var(--cta); }
.hm-quiet { color: var(--hm-ink); background: color-mix(in srgb, var(--hm-strong) 10%, var(--hm-card)); }
.hm-cta:active, .hm-quiet:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hm-cta:hover { background: var(--cta-hover); color: var(--cta-ink); } .hm-quiet:hover { background: color-mix(in srgb, var(--hm-strong) 16%, var(--hm-card)); } }
.hm-fine { margin-top: 12px; font-size: 13px; color: var(--hm-ink-2); }
.hm-fine summary { cursor: pointer; font-weight: 600; }
.hm-fine p { margin: 8px 0 0; line-height: 1.5; }

/* ---------- phones ---------- */
@media (max-width: 959px) {
  .hm-scn { grid-template-columns: 1fr; gap: 8px; }
  .hm-scn-in { padding: 12px 14px; }
  .hm-controls { grid-template-columns: 1fr; padding: 16px; }
  .hm-result { position: sticky; top: 68px; z-index: 15; padding: 14px 18px; border-radius: 18px; order: 0; }
  body:has(.site-head.tuck) .hm-result { top: 8px; }
  .hm-big { font-size: 40px; margin: 2px 0; }
  .hm-big small { font-size: 13px; }
  .hm-vs { font-size: 13px; }
  .hm-run { --name: 84px; }
  .hm-lane-name { font-size: 13px; }
  .hm-steps li { grid-template-columns: 1fr; gap: 6px; }
}
@media print { .hm-scn, .hm-controls, .hm-opts, .hm-actions, .hm-stage::before { display: none !important; } .hm-plan { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .hm-scn button, .hm-pin, .hm-cta, .hm-quiet, .hm-opt, .hm-scn-in svg { transition: none; } }