/* The Haven style (5.52): the default look, in day and night.
*
* css/haven-proto.css is the prototype's own stylesheet (mockups/7.1-haven), ported unchanged in value by
* tools/haven_port.py: the tokens, the shell and core, the vault and tide, rows and gems, chips, buttons, the month
* picker, the sheet, the keypad. The screens Haven draws itself use those classes (hv-shell, hv-row ...).
*
* This file is only the glue the prototype does not need, because the prototype has no other screens:
* 1. the page (sky, grain), the header and the floating tab bar, with the prototype's values;
* 2. the app's OWN blocks that the prototype does not show (the rest of Summary, Settings, import, goals ...) given
* the same look: two-layer cards, gems, wells, pills. Every value here is a prototype token.
* It is a layer over Charts' plain base, not over Tactile: none of Tactile's engraved rules apply to Haven.
*/
/* ---------------------------------------------------------------- the page */
:root[data-style="haven"] body { background: var(--hv-paper); color: var(--hv-ink); font-family: var(--hv-font); }
:root[data-style="haven"] body::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 340px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--hv-sky) 0, var(--hv-paper) 100%); }
:root[data-style="haven"] body::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: var(--hv-grain-op); mix-blend-mode: var(--hv-grain-blend); background-image: url("data:image/svg+xml;utf8,"); }
/* Sentence case everywhere: labels read as words, not as engraving. */
:root[data-style="haven"] *,
:root[data-style="haven"] *::before,
:root[data-style="haven"] *::after { text-transform: none !important; text-shadow: none !important; }
:root[data-style="haven"] body { padding-bottom: calc(var(--nav-height, 84px) + var(--space-lg) + 14px); }
:root[data-style="haven"] .k { padding-inline: 16px; }
:root[data-style="haven"] .k > *,
:root[data-style="haven"] .k #dashboard > *,
:root[data-style="haven"] .k #summary-content > * { margin-top: 0; margin-bottom: 16px; }
/* the prototype's own screen: a grid of blocks 16px apart */
:root[data-style="haven"] .hv-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hv-s4); align-content: start; margin-bottom: 16px; padding: 0; }
:root[data-style="haven"] .hv-screen > * { min-width: 0; }
:root[data-style="haven"] .hv-covered .hv-amt { filter: blur(9px); opacity: 0.55; user-select: none; }
:root[data-style="haven"] .hv-vault.is-negative .hv-num,
:root[data-style="haven"] .hv-vault.is-negative .hv-cur { color: #ffb4ad; }
:root[data-style="haven"] .hv-num { display: inline-block; }
/* ------------------------------------------------------------- the header (.hdr in the prototype) */
:root[data-style="haven"] .app-header { display: flex; align-items: center; gap: var(--hv-s2); padding: 22px 20px 6px; background: none; border: 0; box-shadow: none; }
:root[data-style="haven"] .app-header::after { display: none; }
:root[data-style="haven"] .hv-hdr__who { margin-right: auto; display: grid; line-height: 1.12; }
:root[data-style="haven"] .hv-hdr__hi { font-size: var(--hv-fs-label); color: var(--hv-ink-2); }
:root[data-style="haven"] #view-title { font-size: 24px; font-weight: 650; letter-spacing: -0.025em; color: var(--hv-ink); margin: 0; transform: none; }
:root[data-style="haven"] .hv-hdr-extra { display: contents; }
:root[data-style="haven"] .hv-round .icon { width: 22px; height: 22px; stroke-width: 1.5; }
:root[data-style="haven"] #settings-btn.hv-round { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; background: var(--hv-shell); box-shadow: 0 0 0 1px var(--hv-hair), inset 0 1px 0 var(--hv-hl); color: var(--hv-ink); }
:root[data-style="haven"] .hv-pillbtn .icon { width: 18px; height: 18px; }
:root[data-style="haven"] .hv-round[aria-pressed="true"] { background: var(--hv-primary); color: var(--hv-on-primary); }
:root[data-style="haven"] .hv-ic .icon,
:root[data-style="haven"] .hv-gem .icon,
:root[data-style="haven"] .hv-chip .icon { width: 100%; height: 100%; stroke-width: 1.5; }
:root[data-style="haven"] .hv-row > svg,
:root[data-style="haven"] .hv-gem svg { width: 21px; height: 21px; }
/* ---------------------------------------- the app's own blocks: two layers, as the prototype's cards */
:root[data-style="haven"] .k .totals-card,
:root[data-style="haven"] .k .tl-card,
:root[data-style="haven"] .k .tl-list,
:root[data-style="haven"] .k .k-pane,
:root[data-style="haven"] .k .add-card,
:root[data-style="haven"] .k .account-group,
:root[data-style="haven"] .k .hist-day-card,
:root[data-style="haven"] .k .hist-days-card,
:root[data-style="haven"] .k .setup-card,
:root[data-style="haven"] .k .sum-needs,
:root[data-style="haven"] .k .sum-more,
:root[data-style="haven"] .k .owed-list,
:root[data-style="haven"] .k .hero,
:root[data-style="haven"] .k .empty-state,
:root[data-style="haven"] .k .pl-top,
:root[data-style="haven"] .k .coach-q {
background: linear-gradient(180deg, var(--hv-core), var(--hv-core-2));
border: 0;
border-radius: var(--hv-r-core);
box-shadow: inset 0 1px 0 var(--hv-hl), var(--hv-lift), 0 0 0 6px var(--hv-shell), 0 0 0 7px var(--hv-hair);
margin-inline: 7px;
}
:root[data-style="haven"] .k .totals-card .totals-card { box-shadow: none; background: none; margin-inline: 0; }
:root[data-style="haven"] .k .totals-card.plan-month { background: none; box-shadow: none; padding: 0; margin-inline: 0; }
:root[data-style="haven"] .k .section-head { margin: 8px 6px 0; }
:root[data-style="haven"] :is(#view-container, .view-still) h3,
:root[data-style="haven"] .k .section-head h3 { font-size: var(--hv-fs-title); font-weight: 650; letter-spacing: -0.02em; color: var(--hv-ink); }
:root[data-style="haven"] .tl-list { display: block; padding: 4px 16px; }
:root[data-style="haven"] .tl-item { background: none; box-shadow: none; border-radius: 0; padding: 12px 0; }
:root[data-style="haven"] .tl-item + .tl-item { border-top: 1px solid var(--hv-hair); }
:root[data-style="haven"] .tl-label { margin: 8px 6px 0; padding: 0; border: 0; font-size: var(--hv-fs-title); font-weight: 650; letter-spacing: -0.02em; color: var(--hv-ink); }
:root[data-style="haven"] .tl-label .tl-still { font-size: var(--hv-fs-label); font-weight: 600; color: var(--hv-ink-2); letter-spacing: 0; }
:root[data-style="haven"] .tl-card { padding: 16px; }
:root[data-style="haven"] .tl-k { font-size: var(--hv-fs-label); font-weight: 500; letter-spacing: 0; color: var(--hv-ink-2); }
:root[data-style="haven"] .tl-mid { font-size: 20px; font-weight: 650; color: var(--hv-ink); }
:root[data-style="haven"] .tl-t { font-weight: 600; letter-spacing: -0.01em; color: var(--hv-ink); }
:root[data-style="haven"] .tl-s { font-size: var(--hv-fs-label); color: var(--hv-ink-2); }
:root[data-style="haven"] .tl-v { font-weight: 600; color: var(--hv-ink); }
:root[data-style="haven"] .tl-v.tl-bad { color: var(--hv-bad); }
:root[data-style="haven"] .tl-v.tl-ok { color: var(--hv-good); }
:root[data-style="haven"] .tl-badge { color: var(--hv-warn); background: var(--hv-warn-tile); border: 0; }
:root[data-style="haven"] .tl-line { color: var(--hv-ink-2); }
:root[data-style="haven"] .tl-cols i { border-radius: 3px 3px 1px 1px; background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); }
:root[data-style="haven"] .tl-cols i.lit { background: linear-gradient(180deg, var(--hv-tide-b), var(--hv-tide-a)); box-shadow: none; }
:root[data-style="haven"] .tl-thin { background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); }
:root[data-style="haven"] .tl-thin i,
:root[data-style="haven"] .tl-prog i { background: linear-gradient(90deg, var(--hv-tide-a), var(--hv-tide-b)); box-shadow: none; }
:root[data-style="haven"] .tl-prog { background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); }
:root[data-style="haven"] .tl-prog > span { color: var(--hv-ink); }
/* gems for the app's own icon tiles: the prototype's gem, in the category's colour */
:root[data-style="haven"] .k-icon,
:root[data-style="haven"] .tl-ibox,
:root[data-style="haven"] .k .need-row__ic,
:root[data-style="haven"] .k .k-context__mark {
width: 42px; height: 42px; border: 0; border-radius: var(--hv-r-tile); color: var(--hv-on-navy);
--hv-gem: color-mix(in oklab, var(--k-tint, var(--hv-gem-1)) 100%, #0b1530 var(--hv-gem-dark, 0%));
background: linear-gradient(150deg, color-mix(in oklab, var(--hv-gem) 78%, white), var(--hv-gem));
box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.35), 0 8px 14px -8px var(--hv-gem);
}
:root[data-style="haven"][data-theme="dark"] { --hv-gem-dark: 38%; }
:root[data-style="haven"] .k .account-row .k-brand { border-radius: var(--hv-r-tile); }
/* notices: tinted, flat (the prototype's .note) */
:root[data-style="haven"] .k .k-context,
:root[data-style="haven"] .k .warn-card,
:root[data-style="haven"] .k .attention-row { margin-inline: 0; border: 0; border-radius: var(--hv-r-core); background: var(--hv-warn-tile); box-shadow: none; }
:root[data-style="haven"] .k .k-context--alert { background: var(--hv-bad-tile); }
:root[data-style="haven"] .k .k-context__k { color: var(--hv-ink); font-weight: 650; font-size: var(--hv-fs-body); }
:root[data-style="haven"] .k .k-context__note { color: var(--hv-ink-2); }
:root[data-style="haven"] .k .k-context--alert .k-context__mark { --k-tint: var(--hv-bad); }
:root[data-style="haven"] .k .k-context--attention .k-context__mark { --k-tint: var(--hv-warn); }
:root[data-style="haven"] .k .k-context__mark { width: 36px; height: 36px; }
/* the month picker: the prototype's .month */
:root[data-style="haven"] .k .hist-month { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 0; height: 44px; padding: 0; border-radius: var(--hv-r-pill); background: var(--hv-shell); box-shadow: 0 0 0 1px var(--hv-hair), inset 0 1px 0 var(--hv-hl); text-align: center; font-weight: 600; }
:root[data-style="haven"] .k .hist-month .hist-month-name { padding: 0; background: none; box-shadow: none; font-size: var(--hv-fs-body); font-weight: 600; color: var(--hv-ink); }
/* fields are wells; buttons are pills (the prototype's .input, .btn, .chip, .seg, .switch) */
:root[data-style="haven"] .k-input,
:root[data-style="haven"] .k-select,
:root[data-style="haven"] .k .k-picker,
:root[data-style="haven"] .k .hist-search,
:root[data-style="haven"] .k select.hist-chip,
:root[data-style="haven"] input[type="text"],
:root[data-style="haven"] input[type="number"],
:root[data-style="haven"] input[type="password"],
:root[data-style="haven"] input[type="search"],
:root[data-style="haven"] select {
background: var(--hv-well); border: 0; border-radius: var(--hv-r-field); color: var(--hv-ink);
box-shadow: inset 0 0 0 1px var(--hv-hair), inset 0 1px 2px oklch(32% 0.08 265 / 0.05);
}
:root[data-style="haven"] .k-input:focus-visible,
:root[data-style="haven"] .k-select:focus-visible,
:root[data-style="haven"] input:focus-visible { box-shadow: 0 0 0 2px var(--hv-core), 0 0 0 4px var(--hv-link); }
:root[data-style="haven"] .segmented,
:root[data-style="haven"] .k-seg { padding: 3px; border-radius: var(--hv-r-pill); background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); }
:root[data-style="haven"] .k .seg-btn,
:root[data-style="haven"] .k-seg__btn { border-radius: var(--hv-r-pill); color: var(--hv-ink-2); font-weight: 600; background: none; box-shadow: none; }
:root[data-style="haven"] .k .seg-btn.active,
:root[data-style="haven"] .k-seg__btn[aria-selected="true"] { background: var(--hv-thumb); color: var(--hv-ink); box-shadow: 0 1px 2px var(--hv-sh-3), 0 0 0 1px var(--hv-hair); }
:root[data-style="haven"] .k-btn--primary,
:root[data-style="haven"] .btn-primary,
:root[data-style="haven"] .k .add-form .k-btn--primary {
border: 0; border-radius: var(--hv-r-pill); background: var(--hv-primary); color: var(--hv-on-primary); font-weight: 600;
box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.2), 0 14px 22px -14px var(--hv-sh-4);
}
:root[data-style="haven"] .btn-secondary,
:root[data-style="haven"] .k .btn-secondary { border: 0; border-radius: var(--hv-r-pill); background: var(--hv-core); color: var(--hv-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--hv-hair-strong); }
:root[data-style="haven"] .k .k-quick__chip { border: 0; background: var(--hv-well); box-shadow: 0 0 0 1px var(--hv-hair); color: var(--hv-ink-2); font-weight: 550; }
:root[data-style="haven"] .k .k-quick__chip.on { background: var(--hv-primary); color: var(--hv-on-primary); box-shadow: none; }
:root[data-style="haven"] .k-toggle { background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair-strong); }
:root[data-style="haven"] .k-toggle::after { background: var(--hv-core); box-shadow: 0 1px 3px var(--hv-sh-2); }
:root[data-style="haven"] .k-toggle[aria-checked="true"] { background: var(--hv-primary); }
:root[data-style="haven"] .k .k-add-sms { margin-inline: 7px; border-radius: var(--hv-r-core); }
:root[data-style="haven"] .k .amount-hero { margin-inline: 7px; background: linear-gradient(180deg, var(--hv-core), var(--hv-core-2)); color: var(--hv-ink); box-shadow: inset 0 1px 0 var(--hv-hl), var(--hv-lift), 0 0 0 6px var(--hv-shell), 0 0 0 7px var(--hv-hair); }
:root[data-style="haven"] .k .amount-hero .hero-label,
:root[data-style="haven"] .k .amount-hero .amount-prefix,
:root[data-style="haven"] .k .amount-hero .amount-input { color: var(--hv-ink); }
/* the month's chart (the app's own, on the screens that still draw it) in the prototype's water colours */
:root[data-style="haven"] .waves__fill.waves--spent { fill: color-mix(in oklab, var(--hv-tide-b) 24%, transparent); }
:root[data-style="haven"] .waves__line.waves--spent { stroke: var(--hv-line-ink); stroke-width: 2.4; }
:root[data-style="haven"] .waves__line.waves--pace { stroke: var(--hv-ink-3); stroke-width: 1.4; stroke-dasharray: 3 4; }
:root[data-style="haven"] .waves__bar { fill: var(--hv-well); }
:root[data-style="haven"] .waves__bar.is-top { fill: var(--hv-tide-a); }
:root[data-style="haven"] .waves__dot { fill: var(--hv-core); stroke: var(--hv-line-ink); stroke-width: 2.4; }
:root[data-style="haven"] .chart-readout { background: var(--hv-well); box-shadow: none; border-radius: var(--hv-r-field); }
/* Plan's budget bar and the month's steps, in the prototype's parts */
:root[data-style="haven"] .pl-seg { height: 20px; padding: 4px; gap: 3px; border-radius: 10px; background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); }
:root[data-style="haven"] .pl-seg i { border-radius: 6px; }
:root[data-style="haven"] .pl-top--tactile .is-must { background: var(--hv-primary); }
:root[data-style="haven"] .pl-top--tactile .is-flex { background: var(--hv-warn); }
:root[data-style="haven"] .pl-top--tactile .is-free { background: linear-gradient(90deg, var(--hv-tide-a), var(--hv-tide-b)); }
:root[data-style="haven"] .pl-top--tactile .is-saved { background: var(--hv-good); }
/* one shell per group: the accounts inside a group and the payments inside a day are rows, not cards */
:root[data-style="haven"] .k .account-group { padding: 4px 16px; }
:root[data-style="haven"] .k .hist-day-card { padding: 2px 14px; }
:root[data-style="haven"] .k .hist-day-card .hist-row { padding-inline: 0; }
:root[data-style="haven"] .k .hist-day-head { font-size: var(--hv-fs-lead); font-weight: 650; letter-spacing: -0.015em; color: var(--hv-ink); margin: 8px 6px; }
/* ------------------------------------------- the tab bar: the prototype's .bar, .tab, .blob and .fab
* A frosted glass pill, 68px high, 14px in from each side and from the bottom; four tabs and the raised Add in the
* middle column; the lit tab is one pill (the blob) that glides to the tab you chose. */
html:root[data-style="haven"] #tabs.bottom-nav {
left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 68px; margin: 0; padding: 0 4px;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 70px repeat(2, minmax(0, 1fr)); align-items: center;
border: 0; border-radius: 34px; overflow: visible;
background: var(--hv-bar-bg);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
backdrop-filter: blur(20px) saturate(1.5);
box-shadow: 0 0 0 1px var(--hv-hair), inset 0 1px 0 var(--hv-hl), 0 26px 40px -20px var(--hv-sh-2);
}
html:root[data-style="haven"] #tabs .nav-btn {
position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; margin: 0; padding: 8px 0 7px;
border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--hv-ink-3);
font-size: 11px; font-weight: 550; letter-spacing: -0.01em; transition: color var(--hv-d-base) var(--hv-ease-settle);
}
html:root[data-style="haven"] #tabs .nav-btn::before { content: ""; position: absolute; inset: -6px -2px; }
html:root[data-style="haven"] #tabs .nav-btn > span:not(.nav-icon) { font-size: 11px; letter-spacing: -0.01em; }
html:root[data-style="haven"] #tabs .nav-btn.active { color: var(--hv-tab-on); background: none; box-shadow: none; }
html:root[data-style="haven"] #tabs .nav-btn .nav-icon { width: 22px; height: 22px; display: grid; place-items: center; filter: none; color: inherit; transition: transform var(--hv-t-snap) var(--hv-spring-snap); }
html:root[data-style="haven"] #tabs .nav-btn .nav-icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
html:root[data-style="haven"] #tabs .nav-btn.active .nav-icon { transform: translateY(-1px) scale(1.08); filter: none; }
html:root[data-style="haven"] #tabs .nav-btn[data-view="add"] { z-index: 2; padding: 0; justify-self: center; align-content: start; }
html:root[data-style="haven"] #tabs .nav-btn[data-view="add"] > span:not(.nav-icon) { position: absolute; opacity: 0; pointer-events: none; white-space: nowrap; }
html:root[data-style="haven"] #tabs .nav-btn[data-view="add"] .nav-icon {
width: 58px; height: 58px; margin-top: -30px; border-radius: 50%; background: var(--hv-fab); color: var(--hv-on-fab);
box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.25), 0 0 0 6px var(--hv-paper), 0 0 0 7px var(--hv-hair), 0 18px 26px -10px var(--hv-sh-4);
transition: transform var(--hv-d-base) var(--hv-spring-snap);
}
html:root[data-style="haven"][data-theme="dark"] #tabs .nav-btn[data-view="add"] .nav-icon { box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.5), 0 0 0 6px var(--hv-paper), 0 0 0 7px var(--hv-hair), 0 0 28px oklch(77% 0.12 208 / 0.45), 0 18px 26px -10px oklch(0% 0 0 / 0.8); }
html:root[data-style="haven"] #tabs .nav-btn[data-view="add"] .nav-icon svg { width: 28px; height: 28px; }
html:root[data-style="haven"] #tabs .nav-btn[data-view="add"].active .nav-icon { transform: none; }
html:root[data-style="haven"] #tabs .nav-btn[data-view="add"]:active .nav-icon { transform: scale(0.92); }
html:root[data-style="haven"] #tabs .nav-ind {
display: block; position: absolute; z-index: 0; left: 0; top: 7px; width: var(--bw, 0); height: 54px; border-radius: 27px;
transform: translateX(var(--bx, 0)); background: var(--hv-blob); box-shadow: inset 0 0 0 1px var(--hv-hair); pointer-events: none;
}
html:root[data-style="haven"] #tabs .nav-ind.is-ready { transition: transform var(--hv-t-snap) var(--hv-spring-snap), width var(--hv-t-snap) var(--hv-spring-snap), opacity 160ms ease; }
html:root[data-style="haven"] #tabs:has(.nav-btn[data-view="add"].active) .nav-ind { opacity: 0; }
@media (max-width: 359px) {
html:root[data-style="haven"] #tabs.bottom-nav { left: 8px; right: 8px; }
html:root[data-style="haven"] #tabs .nav-btn,
html:root[data-style="haven"] #tabs .nav-btn > span:not(.nav-icon) { font-size: 10px; letter-spacing: -0.02em; }
}
@media (prefers-reduced-motion: reduce) {
:root[data-style="haven"] .hv-rise, :root[data-style="haven"] .hv-chart *, :root[data-style="haven"] .hv-screen * { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; }
html:root[data-style="haven"] #tabs .nav-ind.is-ready, html:root[data-style="haven"] #tabs .nav-btn { transition: none; }
}
/* the prototype's page resets, for its own blocks only (it sets them on the whole page; the app has its own) */
:root[data-style="haven"] :is(.hv-screen, .hv-chips, .hv-sheet) { font-size: var(--hv-fs-body); line-height: 1.4; font-variant-numeric: tabular-nums; }
:root[data-style="haven"] :is(.hv-screen, .hv-sheet), :root[data-style="haven"] :is(.hv-screen, .hv-sheet) * { box-sizing: border-box; }
:where(:root[data-style="haven"]) :where(.hv-screen, .hv-sheet) button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root[data-style="haven"] :is(.hv-screen, .hv-sheet) :is(h1, h2, h3, p) { margin: 0; font-style: normal; }
/* A phone's scrollbar floats over the page and takes no room; the page should not keep a strip free for one. */
:root[data-style="haven"] { scrollbar-gutter: auto; }
/* Plan, in the prototype's order (js/views/plan.js havenArrange) */
:root[data-style="haven"] .plan-coach { display: none; }
:root[data-style="haven"] .hv-step { position: relative; }
:root[data-style="haven"] .hv-fold .hv-row { padding-inline: 0; }
:root[data-style="haven"] .k .hv-note-wrap { margin-inline: 0; }
:root[data-style="haven"] .k .k-context__mark { background: none; box-shadow: none; width: auto; height: auto; --hv-gem: currentColor; color: var(--hv-warn); }
:root[data-style="haven"] .k .k-context--alert .k-context__mark { color: var(--hv-bad); }
/* the sort control: the prototype's .sortpill; the commitments list reads as the prototype's rows */
:root[data-style="haven"] .sort-pick, :root[data-style="haven"] #plan-sort, :root[data-style="haven"] select.sort-pick {
appearance: none; -webkit-appearance: none; height: 32px; padding: 0 28px 0 12px; border: 0; border-radius: var(--hv-r-pill); background-color: var(--hv-shell); box-shadow: 0 0 0 1px var(--hv-hair);
font-size: var(--hv-fs-label); font-weight: 600; color: var(--hv-ink-2);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center;
}
:root[data-style="haven"] .plan-row__amount, :root[data-style="haven"] .plan-row__amount.out { color: var(--hv-ink); font-weight: 600; }
:root[data-style="haven"] .plan-row__remove { color: var(--hv-ink-3); }
:root[data-style="haven"] .k .k-row__title { font-weight: 600; letter-spacing: -0.01em; color: var(--hv-ink); }
:root[data-style="haven"] .k .k-row__meta { font-size: var(--hv-fs-label); color: var(--hv-ink-2); }
:root[data-style="haven"] .k .k-row__value { font-weight: 600; color: var(--hv-ink); }
:root[data-style="haven"] .k .k-row + .k-row { box-shadow: inset 0 1px 0 var(--hv-hair); border-top: 0; }
/* Accounts (js/haven-ui.js havenAccounts): the cards, the dots, the order control, the list */
:root[data-style="haven"] .hv-sec:has(> #accounts-sort) { margin-bottom: 8px; }
:root[data-style="haven"] .k > .hv-sec { padding: 6px 6px 0; margin-bottom: 8px; }
:root[data-style="haven"] .account-group-label { font-size: var(--hv-fs-label); font-weight: 600; color: var(--hv-ink-2); margin: 8px 6px 6px; letter-spacing: 0; }
:root[data-style="haven"] .k .account-row { gap: var(--hv-s3); }
:root[data-style="haven"] .k .account-balance { font-weight: 600; color: var(--hv-ink); }
:root[data-style="haven"] .k .account-balance.out { color: var(--hv-ink); }
:root[data-style="haven"] .k > .hv-chips { margin-bottom: 16px; }
:root[data-style="haven"] .hv-chips button.hv-chip { font: inherit; font-size: var(--hv-fs-label); font-weight: 550; color: var(--hv-ink-2); cursor: pointer; }
/* History: the net on one card with the days as little bars under it (the prototype's net card) */
:root[data-style="haven"] #hist-hero { padding: var(--hv-s4); }
:root[data-style="haven"] #hist-hero .hero-label { font-size: var(--hv-fs-label); font-weight: 400; color: var(--hv-ink-2); letter-spacing: 0; }
:root[data-style="haven"] #hist-hero .hero-amount { margin: 2px 0 10px; font-size: var(--hv-fs-figure); font-weight: 600; letter-spacing: -0.035em; color: var(--hv-ink); text-shadow: none; }
:root[data-style="haven"] #hist-hero .hero-amount.negative { color: var(--hv-bad); }
:root[data-style="haven"] #hist-days.hist-days-card, :root[data-style="haven"] #hist-hero #hist-days { background: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0; }
:root[data-style="haven"] #hist-hero .hist-days__title { display: none; }
:root[data-style="haven"] #hist-hero .hist-days__bars { display: flex; align-items: end; gap: 3px; height: 54px; padding: 0; background: none; box-shadow: none; }
:root[data-style="haven"] #hist-hero .hist-days__col { flex: 1; min-width: 0; }
:root[data-style="haven"] #hist-hero .hist-days__bar { background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); border-radius: 3px 3px 1px 1px; opacity: 1; }
:root[data-style="haven"] #hist-hero .hist-days__bar.is-top { background: linear-gradient(180deg, var(--hv-tide-b), var(--hv-tide-a)); box-shadow: none; }
:root[data-style="haven"] #hist-hero .hist-days__ticks, :root[data-style="haven"] #hist-hero .hist-days__read { color: var(--hv-ink-3); font-size: var(--hv-fs-micro); }
:root[data-style="haven"] #hist-hero .hero-under { display: flex; gap: var(--hv-s4); margin: 10px 0 0; padding: 0; background: none; box-shadow: none; }
:root[data-style="haven"] #hist-hero .stat { display: flex; gap: 6px; padding: 0; border: 0; }
:root[data-style="haven"] #hist-hero .stat-k { font-size: var(--hv-fs-label); color: var(--hv-ink-2); }
:root[data-style="haven"] #hist-hero .stat-v { font-size: var(--hv-fs-label); font-weight: 600; color: var(--hv-ink); }
:root[data-style="haven"] #hist-hero .hero-status { color: var(--hv-ink-3); font-size: var(--hv-fs-micro); margin: 6px 0 0; }
:root[data-style="haven"] .hv-more { margin-top: 12px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--hv-hair); }
:root[data-style="haven"] .hv-more > summary { cursor: pointer; color: var(--hv-ink-2); font-size: var(--hv-fs-label); list-style: none; }
:root[data-style="haven"] .hist-top { gap: var(--hv-s3); }
:root[data-style="haven"] .hist-search { height: 38px; border-radius: var(--hv-r-pill); }
:root[data-style="haven"] .hist-chip { border-radius: var(--hv-r-pill); }
/* Add as a sheet (js/haven-sheet.js): over the page, springing up from the Add button */
:root[data-style="haven"] .hv-scrim { position: fixed; z-index: 60; }
:root[data-style="haven"] .hv-sheet { position: fixed; z-index: 65; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 60px); }
:root[data-style="haven"] #hv-add-body { display: contents; }
:root[data-style="haven"] #hv-add-body.k, :root[data-style="haven"] .hv-sheet .k { padding: 0; display: contents; }
:root[data-style="haven"] .hv-sheet .hv-addform { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hv-s3); margin: 0; }
:root[data-style="haven"] .hv-sheet .hv-addform > * { min-width: 0; margin: 0; }
:root[data-style="haven"] .hv-sheet .hv-core .k-add-sms { display: none; }
:root[data-style="haven"] body.sheet-open #tabs .nav-btn[data-view="add"] .nav-icon svg { transform: rotate(135deg); }
:root[data-style="haven"] #tabs .nav-btn[data-view="add"] .nav-icon svg { transition: transform var(--hv-t-snap) var(--hv-spring-snap); }
/* the amount: the prototype's .amountbig, on the form's own amount field */
:root[data-style="haven"] .hv-addform .amount-field .hero-label { display: none; }
:root[data-style="haven"] .hv-addform .amount-field { display: block; }
:root[data-style="haven"] .hv-addform .hv-amountbig .val { all: unset; box-sizing: content-box; field-sizing: content; min-width: 1ch; max-width: 70%; font-size: 54px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--hv-ink); caret-color: var(--hv-link); }
:root[data-style="haven"] .hv-addform .hv-amountbig { padding: 0; }
:root[data-style="haven"] .hv-addform .hv-amountbig .hv-cur { color: var(--hv-ink-2); }
:root[data-style="haven"] .hv-addform .hv-amountbig::after { display: none; }
:root[data-style="haven"] .hv-addform .hv-chips { margin-inline: calc(var(--hv-s4) * -1); padding-inline: var(--hv-s4); }
:root[data-style="haven"] .hv-addform > .direction-toggle { margin: 0; }
:root[data-style="haven"] .hv-addform .hv-btn.full { width: 100%; }
:root[data-style="haven"] .hv-detailsbtn .hv-chev .hv-ic { width: 20px; height: 20px; }
/* chips and keys of the form's own, drawn as the prototype's */
:root[data-style="haven"] .hv-chips { flex-wrap: nowrap; }
:root[data-style="haven"] .hv-chip { display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
:root[data-style="haven"] .hv-chip > svg { width: 16px; height: 16px; flex: none; }
:root[data-style="haven"] .hv-chip > span:not(.hv-ic) { display: inline; }
:root[data-style="haven"] .hv-key svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root[data-style="haven"] .k .has-pill .seg-pill { background: var(--hv-thumb); box-shadow: 0 1px 2px var(--hv-sh-3), 0 0 0 1px var(--hv-hair); border: 0; }
:root[data-style="haven"] .k-seg.has-pill, :root[data-style="haven"] .k .direction-toggle { height: auto; }
:root[data-style="haven"] .hv-btn .nest .hv-ic { width: 16px; height: 16px; }
:root[data-style="haven"] .hv-btn .nest svg { stroke-width: 2; }
html:root[data-style="haven"] .hv-chip svg, html:root[data-style="haven"] .hv-chip .icon { width: 16px !important; height: 16px !important; flex: none; }
/* Coach: the prototype's vault on top, then the questions as one list */
:root[data-style="haven"] .hv-back { margin-right: 6px; }
:root[data-style="haven"] .k-coach .tl-hero.ct-top {
margin-inline: 7px; padding: var(--hv-s5) var(--hv-s4) var(--hv-s4); border-radius: var(--hv-r-core); color: var(--hv-on-navy); background: var(--hv-vault); background-color: #11234f;
box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.2), inset 0 0 0 1px oklch(100% 0 0 / 0.07), var(--hv-lift-hero), 0 0 0 6px var(--hv-shell), 0 0 0 7px var(--hv-hair);
}
:root[data-style="haven"] .ct-top .tl-k { color: var(--hv-on-navy-2); font-size: var(--hv-fs-label); font-weight: 400; }
:root[data-style="haven"] .ct-top .tl-period { color: var(--hv-on-navy-2); }
:root[data-style="haven"] .ct-top .tl-big { color: var(--hv-on-navy); font-size: var(--hv-fs-hero); font-weight: 600; letter-spacing: -0.035em; margin-top: 14px; }
:root[data-style="haven"] .ct-top .tl-stats { margin-top: var(--hv-s4); padding-top: var(--hv-s3); gap: 0; border-top: 1px solid var(--hv-on-navy-3); }
:root[data-style="haven"] .ct-top .tl-stats > div { padding: 0 var(--hv-s2); background: none; box-shadow: none; border-radius: 0; }
:root[data-style="haven"] .ct-top .tl-stats > div:first-child { padding-left: 0; }
:root[data-style="haven"] .ct-top .tl-stats > div + div { border-left: 1px solid var(--hv-on-navy-3); }
:root[data-style="haven"] .ct-top .tl-stats .tl-k { font-size: var(--hv-fs-micro); }
:root[data-style="haven"] .ct-top .tl-stats b { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--hv-on-navy); overflow-wrap: anywhere; }
:root[data-style="haven"] .ct-top .tl-stats > div { min-width: 0; }
/* A narrow phone: "₹1,516/day" is the longest word, so the two per-day figures get the room and Days left gives it up
(at 320 wide and the largest text it ran into the cell beside it). */
@media (max-width: 380px) {
:root[data-style="haven"] .ct-top .tl-stats { grid-template-columns: 1.25fr 1.35fr 1fr; }
:root[data-style="haven"] .ct-top .tl-stats > div { padding: 0 5px; }
:root[data-style="haven"] .ct-top .tl-stats > div:first-child { padding-left: 0; }
:root[data-style="haven"] .ct-top .tl-stats .tl-k { white-space: nowrap; }
:root[data-style="haven"] .ct-top .tl-stats b { font-size: 14.5px; }
}
:root[data-style="haven"] .ct-top .tl-prog { background: oklch(100% 0 0 / 0.12); box-shadow: none; }
:root[data-style="haven"] .ct-top .tl-prog > span { color: var(--hv-on-navy); }
:root[data-style="haven"] .coach-hub { display: none; }
:root[data-style="haven"] .coach-hub__note { text-align: left; color: var(--hv-ink-3); font-size: var(--hv-fs-micro); margin: -4px 6px 8px; }
:root[data-style="haven"] .coach-questions { margin-inline: 7px; overflow: clip; border-radius: var(--hv-r-core); background: linear-gradient(180deg, var(--hv-core), var(--hv-core-2)); box-shadow: inset 0 1px 0 var(--hv-hl), var(--hv-lift), 0 0 0 6px var(--hv-shell), 0 0 0 7px var(--hv-hair); }
:root[data-style="haven"] .coach-questions .coach-q { margin: 0; border-radius: 0; box-shadow: none; background: none; }
:root[data-style="haven"] .coach-questions .coach-q + .coach-q { box-shadow: inset 0 1px 0 var(--hv-hair); }
/* a wrong amount: the well shakes and rings in red, and says so under the figure (the prototype's .amountbig.error) */
:root[data-style="haven"] .hv-addform .hv-amountbig { flex-wrap: wrap; height: auto; min-height: 78px; align-content: center; }
:root[data-style="haven"] .hv-addform .hv-amountbig:has(.is-invalid) { box-shadow: 0 0 0 2px var(--hv-core), 0 0 0 4px var(--hv-bad); }
:root[data-style="haven"] .hv-addform .hv-amountbig:has(.is-shaking) { animation: hv-shake 340ms var(--hv-ease-out); }
:root[data-style="haven"] .hv-addform .hv-amountbig .field-error { flex-basis: 100%; margin: -2px 0 8px; text-align: center; color: var(--hv-bad); font-size: var(--hv-fs-label); }
:root[data-style="haven"] .hv-addform .hv-amountbig .val.is-invalid { border: 0 !important; }
/* reach: a small link or the raised Add still has a 44px target (the audit measures it) */
:root[data-style="haven"] .hv-link { position: relative; }
:root[data-style="haven"] .hv-link::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 44px; transform: translateY(-50%); inset-inline: -10px; inset-block: auto; }
html:root[data-style="haven"] #tabs .nav-btn[data-view="add"] { align-self: start; margin-top: 20px; min-height: 48px; }
:root[data-style="haven"] .hv-round, :root[data-style="haven"] .hv-pillbtn { flex: none; }
@media (max-width: 359px) { :root[data-style="haven"] .app-header { padding-inline: 14px; gap: 6px; } }
:root[data-style="haven"] .hv-vault { background-color: #11234f; }
/* merchant, account and date: one height, the prototype's field height */
html:root[data-style="haven"] .hv-addform #add-desc,
html:root[data-style="haven"] .hv-addform .add-pair .k-picker,
html:root[data-style="haven"] .hv-addform #add-date { box-sizing: border-box; height: var(--hv-c-field); min-height: var(--hv-c-field); }
/* a field is as wide as its card, never wider, however large the text is set */
:root[data-style="haven"] .k .field, :root[data-style="haven"] .k .k-field { min-width: 0; }
:root[data-style="haven"] .k .field input, :root[data-style="haven"] .k .field select, :root[data-style="haven"] .k .k-field input { width: 100%; min-width: 0; box-sizing: border-box; }
/* ======================= 5.54: what is on Summary has to earn its place ======================= */
/* the month's chart: a title and one number, the drawing, three figures; no paragraph under the title */
:root[data-style="haven"] .waves-card { padding: var(--hv-s4); }
:root[data-style="haven"] .waves-card .chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--hv-s3); margin-bottom: 4px; }
:root[data-style="haven"] .waves-card .chart-head b { font-size: var(--hv-fs-lead); font-weight: 650; letter-spacing: -0.015em; color: var(--hv-ink); }
:root[data-style="haven"] .waves-card .chart-head small { display: none; }
:root[data-style="haven"] .waves-card .waves, :root[data-style="haven"] .waves-card svg.waves { margin-top: 4px; }
:root[data-style="haven"] .waves__bar { fill: color-mix(in oklab, var(--hv-tide-a) 26%, transparent); }
:root[data-style="haven"] .waves__bar.is-top { fill: var(--hv-tide-a); }
:root[data-style="haven"] .waves__line.waves--spent { stroke: var(--hv-line-ink); }
:root[data-style="haven"] .waves__hatch { stroke: var(--hv-warn); }
:root[data-style="haven"] .waves__tick { fill: var(--hv-ink-3); }
:root[data-style="haven"] .waves-card .chart-readout { margin: 6px 0 0; padding: 0; background: none; border-radius: 0; font-size: var(--hv-fs-micro); color: var(--hv-ink-2); line-height: 1.35; }
:root[data-style="haven"] .waves-card .waves__key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hv-s2); padding: var(--hv-s3) 0 0; margin-top: var(--hv-s3); box-shadow: inset 0 1px 0 var(--hv-hair); font-size: var(--hv-fs-micro); }
:root[data-style="haven"] .waves-card .waves__k, :root[data-style="haven"] .waves-card button.waves__k { display: grid; grid-template-columns: none; gap: 2px; align-items: start; min-width: 0; padding: 0; text-align: left; }
:root[data-style="haven"] .waves-card .waves__k::before { display: none; }
:root[data-style="haven"] .waves-card .waves__k b { font-size: var(--hv-fs-body); font-weight: 650; color: var(--hv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-style="haven"] .waves-card .waves__lab { color: var(--hv-ink-2); }
:root[data-style="haven"] .waves-card .waves__note { margin: 8px 0 0; font-size: var(--hv-fs-micro); color: var(--hv-ink-3); }
/* the three ways to add, in one row */
:root[data-style="haven"] .hv-addrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hv-s2); }
:root[data-style="haven"] .hv-addrow .hv-chip { justify-content: center; gap: 6px; height: 36px; padding: 0 8px; font-size: var(--hv-fs-label); }
/* the bank notice: one calm line, only when it matters */
:root[data-style="haven"] .hv-notice { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; gap: var(--hv-s3); align-items: center; padding: var(--hv-s3) var(--hv-s4); border-radius: var(--hv-r-core); cursor: pointer; width: 100%; }
:root[data-style="haven"] .hv-notice.bad { background: var(--hv-bad-tile); }
:root[data-style="haven"] .hv-notice b { display: block; font-weight: 650; color: var(--hv-ink); }
:root[data-style="haven"] .hv-notice .hv-ic { color: var(--hv-bad); }
:root[data-style="haven"] .hv-due { text-align: left; border: 0; width: 100%; }
/* the eye covers every amount on the screen (one tap, remembered) */
:root[data-style="haven"].hv-covered :is(.hv-amt, .hv-num, .hv-cur, .tl-big, .tl-v, .tl-mid, .tl-cardamt, .stat-v, .hero-amount, .totals-row > span:last-child, .k-row__value, .account-balance, .plan-row__amount, .summary-row__v, .bank-amount, .waves__k b, .hv-step .hv-fig, .tl-stats b, .hv-muted b, .chart-readout, .hist-day-total, .txn-amount, .hist-amount) { filter: blur(9px); opacity: 0.55; user-select: none; }
:root[data-style="haven"] .waves-card .chart-head { padding: 0; margin: 0 0 6px; flex-wrap: wrap; row-gap: 2px; }
:root[data-style="haven"] .waves-card .chart-head b { min-width: 0; }
:root[data-style="haven"] .waves__fill.waves--pace { fill: none; }
:root[data-style="haven"] .waves__fill.waves--spent { fill: color-mix(in oklab, var(--hv-tide-b) 22%, transparent); }
:root[data-style="haven"] .waves-card .waves__k b { white-space: normal; font-size: 14px; line-height: 1.25; }
:root[data-style="haven"] .waves-card svg { width: 100%; height: auto; }
/* Accounts: the cards are the account in hand, with what you do with it */
:root[data-style="haven"] .hv-due.hv-core { padding: var(--hv-s2) var(--hv-s4); }
:root[data-style="haven"] .hv-due.hv-core { box-shadow: inset 0 1px 0 var(--hv-hl), var(--hv-lift); }
/* Plan: each bill is a line, with a tick to say it is paid */
:root[data-style="haven"] .hv-bill { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--hv-s2); padding: var(--hv-s2) var(--hv-s3) var(--hv-s2) var(--hv-s4); min-height: 60px; transition: opacity var(--hv-d-base) var(--hv-ease-settle), transform var(--hv-d-slow) var(--hv-ease-settle), max-height var(--hv-d-slow) var(--hv-ease-settle); max-height: 120px; overflow: clip; }
:root[data-style="haven"] .hv-bill + .hv-bill { box-shadow: inset 0 1px 0 var(--hv-hair); }
:root[data-style="haven"] .hv-bill__open { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--hv-s3); min-width: 0; cursor: pointer; }
:root[data-style="haven"] .hv-bill__open .hv-gem { width: 38px; height: 38px; border-radius: 13px; }
:root[data-style="haven"] .hv-paycheck, :root[data-style="haven"] .hv-paycheck-gap { width: 36px; height: 36px; }
:root[data-style="haven"] .hv-paycheck { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair-strong); color: var(--hv-ink-2); cursor: pointer; transition: background var(--hv-d-base) var(--hv-ease-settle), color var(--hv-d-base) var(--hv-ease-settle), transform var(--hv-d-fast) var(--hv-ease-out); }
:root[data-style="haven"] .hv-paycheck::before { content: ""; position: absolute; inset: -4px; }
:root[data-style="haven"] .hv-paycheck:active { transform: scale(0.9); }
:root[data-style="haven"] .hv-paycheck .nest { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
:root[data-style="haven"] .hv-paycheck .hv-ic { width: 18px; height: 18px; }
:root[data-style="haven"] .hv-paycheck.saved { background: var(--hv-good); color: var(--hv-on-navy); box-shadow: none; }
:root[data-style="haven"] .hv-paycheck .spin { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--hv-hair-strong); border-top-color: var(--hv-link); opacity: 0; }
:root[data-style="haven"] .hv-paycheck.saving .spin { opacity: 1; animation: hv-rot 520ms linear infinite; }
/* Coming months */
:root[data-style="haven"] .hv-meter.over i { background: var(--hv-warn); }
:root[data-style="haven"] .hv-notes { padding: var(--hv-s3) var(--hv-s4); box-shadow: inset 0 1px 0 var(--hv-hair); display: grid; gap: 6px; }
:root[data-style="haven"] .hv-monthnote { line-height: 1.4; }
/* Add, in two steps: the amount, then what it was */
:root[data-style="haven"] .hv-addstep { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hv-s3); }
:root[data-style="haven"] .hv-addstep[hidden] { display: none; }
:root[data-style="haven"] .hv-stepin { animation: hv-stepin var(--hv-d-slow) var(--hv-ease-out) both; }
@keyframes hv-stepin { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
:root[data-style="haven"] .hv-addback { display: flex; align-items: center; gap: var(--hv-s3); }
:root[data-style="haven"] .hv-addback .hv-round { width: 36px; height: 36px; flex: none; }
:root[data-style="haven"] .hv-addback .hv-ic { width: 18px; height: 18px; }
:root[data-style="haven"] .hv-addstep .hv-chips { margin-inline: 0; padding-inline: 0; }
:root[data-style="haven"] .hv-addstep .k-field .k-label { font-size: var(--hv-fs-label); font-weight: 550; color: var(--hv-ink-2); }
@media (prefers-reduced-motion: reduce) { :root[data-style="haven"] .hv-stepin { animation-duration: 1ms; } }
/* rhythm: a heading, then its card, with room for the control beside the heading */
:root[data-style="haven"] .k .section-head { margin: 10px 6px 14px; align-items: center; }
:root[data-style="haven"] .k .section-head h3 { margin: 0; }
:root[data-style="haven"] .k .k-row { min-height: 56px; padding-block: 8px; }
:root[data-style="haven"] .k .plan-row-wrap .k-row { min-height: 60px; }
:root[data-style="haven"] .waves-card { overflow: visible; min-width: 0; }
/* reach: small buttons still have a 44px target */
:root[data-style="haven"] .hv-bill__open { position: relative; }
:root[data-style="haven"] .hv-bill__open::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--k-tap, 44px); transform: translateY(-50%); }
/* ======================= 5.55: Plan's two lists as one ======================= */
:root[data-style="haven"] .hv-sum { display: grid; gap: 14px; }
:root[data-style="haven"] .hv-sum__bar { display: flex; gap: 4px; height: 14px; }
:root[data-style="haven"] .hv-sum__bar i { border-radius: 7px; min-width: 6px; transition: opacity var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .hv-sum i.a { background: var(--hv-good); }
:root[data-style="haven"] .hv-sum i.b { background: var(--hv-warn); }
:root[data-style="haven"] .hv-sum i.c { background: linear-gradient(90deg, var(--hv-tide-a), var(--hv-tide-b)); }
:root[data-style="haven"] .hv-sum[data-filter="paid"] .hv-sum__bar i:not(.a),
:root[data-style="haven"] .hv-sum[data-filter="topay"] .hv-sum__bar i:not(.b),
:root[data-style="haven"] .hv-sum[data-filter="aside"] .hv-sum__bar i:not(.c) { opacity: 0.25; }
:root[data-style="haven"] .hv-sum__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hv-s2); }
:root[data-style="haven"] .hv-sum__keys button { all: unset; box-sizing: border-box; display: grid; gap: 2px; padding: 8px 10px; margin: -8px -4px; border-radius: 14px; cursor: pointer; position: relative; transition: background var(--hv-d-fast) var(--hv-ease-out); }
:root[data-style="haven"] .hv-sum__keys button::before { content: ""; position: absolute; inset: -2px; }
:root[data-style="haven"] .hv-sum__keys button.on { background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair-strong); }
:root[data-style="haven"] .hv-sum__keys span { display: flex; align-items: center; gap: 6px; font-size: var(--hv-fs-label); color: var(--hv-ink-2); }
:root[data-style="haven"] .hv-sum__keys span i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
:root[data-style="haven"] .hv-sum__keys i.a { background: var(--hv-good); }
:root[data-style="haven"] .hv-sum__keys i.b { background: var(--hv-warn); }
:root[data-style="haven"] .hv-sum__keys i.c { background: var(--hv-tide-a); }
:root[data-style="haven"] .hv-sum__keys b { font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
:root[data-style="haven"] .hv-clabel { padding: 12px 16px 4px; font-size: var(--hv-fs-label); font-weight: 600; color: var(--hv-ink-2); }
:root[data-style="haven"] .hv-clabel:not(:first-child) { margin-top: 4px; box-shadow: inset 0 1px 0 var(--hv-hair); }
:root[data-style="haven"] .hv-clabel[hidden], :root[data-style="haven"] .hv-clist [data-kind][hidden] { display: none; }
:root[data-style="haven"] .hv-bill[hidden] { display: none; }
:root[data-style="haven"] .hv-clist .hv-bill + .hv-bill { box-shadow: inset 0 1px 0 var(--hv-hair); }
:root[data-style="haven"] .hv-tick { display: inline-grid; place-items: center; width: 14px; height: 14px; }
:root[data-style="haven"] .hv-tick .icon { width: 100%; height: 100%; stroke-width: 2; }
:root[data-style="haven"] .hv-bill--aside { position: relative; padding-bottom: 14px; }
:root[data-style="haven"] .hv-usedline { position: absolute; left: 70px; right: 58px; bottom: 7px; height: 4px; border-radius: 2px; background: var(--hv-well); overflow: hidden; }
:root[data-style="haven"] .hv-usedline i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--hv-tide-a), var(--hv-tide-b)); transition: width var(--hv-d-hero) var(--hv-spring-soft); }
:root[data-style="haven"] .hv-usedline.full i { background: var(--hv-warn); }
:root[data-style="haven"] .hv-clist form { margin: 0; }