/* GENERATED by tools/haven_port.py from mockups/7.1-haven/src/haven.css - do not edit here.
 * The Haven prototype's own stylesheet, scoped to :root[data-style="haven"] and with its names prefixed "hv"
 * (classes .hv-shell, .hv-row ...; properties --hv-ink ...; animations hv-draw ...). The values are the prototype's. */
:root[data-style="haven"] { --hv-spring-soft: linear(0, 0.016 2.5%, 0.0575 5.0%, 0.1162 7.5%, 0.1854 10.0%, 0.2602 12.5%, 0.3367 15.0%, 0.4122 17.5%, 0.4846 20.0%, 0.5525 22.5%, 0.6152 25.0%, 0.6722 27.5%, 0.7234 30.0%, 0.7688 32.5%, 0.8086 35.0%, 0.8431 37.5%, 0.8729 40.0%, 0.8983 42.5%, 0.9197 45.0%, 0.9376 47.5%, 0.9524 50.0%, 0.9646 52.5%, 0.9745 55.0%, 0.9824 57.5%, 0.9886 60.0%, 0.9935 62.5%, 0.9972 65.0%, 1 67.5%, 1.0019 70.0%, 1.0033 72.5%, 1.0042 75.0%, 1.0048 77.5%, 1.005 80.0%, 1.005 82.5%, 1.0049 85.0%, 1.0046 87.5%, 1.0043 90.0%, 1.0039 92.5%, 1.0035 95.0%, 1.0032 97.5%, 1); --hv-t-soft: 840ms; --hv-spring-snap: linear(0, 0.016 2.5%, 0.0583 5.0%, 0.1191 7.5%, 0.1922 10.0%, 0.2723 12.5%, 0.3552 15.0%, 0.4378 17.5%, 0.5176 20.0%, 0.5928 22.5%, 0.6623 25.0%, 0.7252 27.5%, 0.7813 30.0%, 0.8305 32.5%, 0.873 35.0%, 0.9091 37.5%, 0.9392 40.0%, 0.9639 42.5%, 0.9837 45.0%, 0.9992 47.5%, 1.011 50.0%, 1.0195 52.5%, 1.0254 55.0%, 1.0291 57.5%, 1.031 60.0%, 1.0315 62.5%, 1.0309 65.0%, 1.0296 67.5%, 1.0276 70.0%, 1.0253 72.5%, 1.0227 75.0%, 1.0201 77.5%, 1.0175 80.0%, 1.015 82.5%, 1.0126 85.0%, 1.0105 87.5%, 1.0085 90.0%, 1.0068 92.5%, 1.0052 95.0%, 1.0039 97.5%, 1); --hv-t-snap: 500ms; --hv-t-tide: 1340ms; }
:root[data-style="haven"] {
  color-scheme: light;
  /* ---- colour (OKLCH), every text pair checked by tools/release/haven_tokens.mjs ---- */
  --hv-paper: oklch(97.8% 0.006 250);
  --hv-sky: oklch(94.2% 0.034 245);
  --hv-core: oklch(100% 0 0);
  --hv-core-2: oklch(98.6% 0.006 250);
  --hv-shell: oklch(100% 0 0 / 0.6);
  --hv-well: oklch(96.2% 0.012 250);
  --hv-hair: oklch(32% 0.08 265 / 0.09);
  --hv-hair-strong: oklch(32% 0.08 265 / 0.17);
  --hv-ink: oklch(25% 0.07 265);
  --hv-ink-2: oklch(42% 0.05 262);
  --hv-ink-3: oklch(50% 0.045 260);
  --hv-navy-0: oklch(21% 0.08 266);
  --hv-navy: oklch(27% 0.085 265);
  --hv-navy-hi: oklch(37% 0.105 262);
  --hv-on-navy: oklch(100% 0 0);
  --hv-on-navy-2: oklch(88% 0.03 255);
  --hv-on-navy-3: oklch(100% 0 0 / 0.14);
  --hv-glow: oklch(76% 0.13 212);
  --hv-tide-a: oklch(52% 0.15 252);
  --hv-tide-b: oklch(66% 0.13 214);
  --hv-link: oklch(50% 0.17 258);
  --hv-good: oklch(42% 0.11 165);
  --hv-good-tile: oklch(94.5% 0.05 165);
  --hv-bad: oklch(48% 0.19 25);
  --hv-bad-tile: oklch(95% 0.04 25);
  --hv-warn: oklch(46% 0.11 70);
  --hv-warn-tile: oklch(95.5% 0.07 85);
  /* chart colours: fixed order, colour-blind checked */
  --hv-cat-1: oklch(58% 0.16 255); --hv-cat-2: oklch(64% 0.12 195); --hv-cat-3: oklch(74% 0.15 75);
  --hv-cat-4: oklch(64% 0.17 30); --hv-cat-5: oklch(56% 0.17 295); --hv-cat-6: oklch(66% 0.16 150);
  /* gem tiles: the same hues, deeper, so a white glyph holds 3:1 */
  --hv-gem-1: oklch(55% 0.17 258); --hv-gem-2: oklch(58% 0.12 195); --hv-gem-3: oklch(62% 0.16 62);
  --hv-gem-4: oklch(60% 0.19 28); --hv-gem-5: oklch(54% 0.18 295); --hv-gem-6: oklch(55% 0.15 152);
  /* semantic roles, so the Night theme only re-points these */
  --hv-stage: oklch(92.5% 0.022 250);
  --hv-primary: var(--hv-navy); --hv-on-primary: var(--hv-on-navy);
  --hv-fab: radial-gradient(circle at 30% 25%, var(--hv-navy-hi), var(--hv-navy) 70%); --hv-on-fab: var(--hv-on-navy);
  --hv-bar-bg: oklch(100% 0 0 / 0.82); --hv-blob: oklch(27% 0.085 265 / 0.08); --hv-tab-on: var(--hv-navy);
  --hv-toast-bg: var(--hv-navy); --hv-scrim: oklch(22% 0.08 266 / 0.38);
  --hv-vault: radial-gradient(120% 90% at 85% 0%, oklch(42% 0.12 258 / 0.9), transparent 60%), linear-gradient(165deg, var(--hv-navy-hi), var(--hv-navy) 55%, var(--hv-navy-0));
  --hv-line-ink: var(--hv-navy); --hv-thumb: var(--hv-core); --hv-skel-hi: oklch(99% 0.004 250); --hv-aside-card: oklch(100% 0 0 / 0.7);
  --hv-hl: oklch(100% 0 0); --hv-grain-op: 0.035; --hv-grain-blend: multiply; --hv-card-edge: oklch(100% 0 0 / 0.22);
  --hv-sh-1: oklch(28% 0.09 265 / 0.07); --hv-sh-2: oklch(28% 0.09 265 / 0.3); --hv-sh-3: oklch(28% 0.09 265 / 0.14); --hv-sh-4: oklch(28% 0.09 265 / 0.6);
  /* ---- type ---- */
  --hv-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hv-fs-micro: 12px; --hv-fs-label: 13px; --hv-fs-body: 15px; --hv-fs-lead: 17px; --hv-fs-title: 20px; --hv-fs-figure: 30px; --hv-fs-hero: 54px;
  /* ---- space: 4pt ---- */
  --hv-s1: 4px; --hv-s2: 8px; --hv-s3: 12px; --hv-s4: 16px; --hv-s5: 20px; --hv-s6: 24px; --hv-s8: 32px;
  /* ---- shape: concentric (core = shell - padding) ---- */
  --hv-pad-shell: 6px;
  --hv-r-shell: 32px;
  --hv-r-core: calc(var(--hv-r-shell) - var(--hv-pad-shell));
  --hv-r-tile: 15px;
  --hv-r-field: 14px;
  --hv-r-pill: 999px;
  /* ---- controls ---- */
  --hv-c-field: 38px; --hv-c-btn: 42px; --hv-c-chip: 30px; --hv-tap: 44px;
  /* ---- depth: ambient, tinted navy ---- */
  --hv-lift: 0 1px 2px var(--hv-sh-1), 0 22px 40px -24px var(--hv-sh-2);
  --hv-lift-hero: 0 2px 4px var(--hv-sh-3), 0 34px 54px -26px var(--hv-sh-4);
  /* ---- motion: three speeds, two families (see the springs injected by the build) ---- */
  --hv-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --hv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hv-ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --hv-d-fast: 160ms; --hv-d-base: 340ms; --hv-d-slow: 640ms; --hv-d-hero: 1100ms;
}
:root[data-style="haven"] .hv-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
:root[data-style="haven"] .hv-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:root[data-style="haven"][data-theme="dark"] {
  color-scheme: dark;
  --hv-paper: oklch(15.5% 0.03 266); --hv-sky: oklch(21% 0.065 262);
  --hv-core: oklch(21.5% 0.042 266); --hv-core-2: oklch(19.5% 0.04 266); --hv-shell: oklch(30% 0.06 265 / 0.38); --hv-well: oklch(17.2% 0.038 266);
  --hv-hair: oklch(100% 0 0 / 0.08); --hv-hair-strong: oklch(100% 0 0 / 0.16);
  --hv-ink: oklch(96% 0.008 250); --hv-ink-2: oklch(79% 0.03 255); --hv-ink-3: oklch(69% 0.035 255);
  --hv-link: oklch(77% 0.12 245);
  --hv-good: oklch(80% 0.14 160); --hv-good-tile: oklch(29% 0.06 165);
  --hv-bad: oklch(76% 0.15 25); --hv-bad-tile: oklch(30% 0.08 25);
  --hv-warn: oklch(83% 0.13 82); --hv-warn-tile: oklch(31% 0.07 82);
  --hv-navy-0: oklch(15% 0.07 266); --hv-navy: oklch(26% 0.09 265); --hv-navy-hi: oklch(35% 0.11 262);
  --hv-glow: oklch(78% 0.12 205); --hv-tide-a: oklch(52% 0.15 252); --hv-tide-b: oklch(74% 0.13 207);
  --hv-cat-1: oklch(54% 0.18 262); --hv-cat-2: oklch(66% 0.11 188); --hv-cat-3: oklch(66.5% 0.15 86);
  --hv-cat-4: oklch(57% 0.19 28); --hv-cat-5: oklch(54% 0.19 304); --hv-cat-6: oklch(63% 0.15 146);
  --hv-gem-1: oklch(58% 0.17 258); --hv-gem-2: oklch(60% 0.12 192); --hv-gem-3: oklch(64% 0.16 62);
  --hv-gem-4: oklch(61% 0.19 28); --hv-gem-5: oklch(57% 0.18 298); --hv-gem-6: oklch(58% 0.15 150);
  --hv-stage: oklch(10.5% 0.03 266);
  --hv-primary: oklch(50% 0.16 256); --hv-on-primary: oklch(100% 0 0);
  --hv-fab: radial-gradient(circle at 30% 25%, oklch(86% 0.09 205), oklch(77% 0.12 208) 70%); --hv-on-fab: oklch(19% 0.06 266);
  --hv-bar-bg: oklch(24% 0.05 265 / 0.78); --hv-blob: oklch(100% 0 0 / 0.09); --hv-tab-on: oklch(86% 0.09 210);
  --hv-toast-bg: oklch(30% 0.06 265); --hv-scrim: oklch(6% 0.03 266 / 0.6);
  --hv-vault: radial-gradient(120% 90% at 85% 0%, oklch(46% 0.14 255 / 0.75), transparent 62%), linear-gradient(165deg, oklch(38% 0.13 258), oklch(28% 0.1 262) 55%, oklch(20% 0.08 266));
  --hv-line-ink: oklch(82% 0.1 212); --hv-thumb: oklch(31% 0.05 266); --hv-skel-hi: oklch(28% 0.04 266); --hv-aside-card: oklch(24% 0.045 266 / 0.8);
  --hv-hl: oklch(100% 0 0 / 0.1); --hv-grain-op: 0.06; --hv-grain-blend: screen; --hv-card-edge: oklch(100% 0 0 / 0.16);
  --hv-sh-1: oklch(4% 0.03 266 / 0.5); --hv-sh-2: oklch(4% 0.03 266 / 0.7); --hv-sh-3: oklch(4% 0.03 266 / 0.55); --hv-sh-4: oklch(4% 0.03 266 / 0.85);
}
:root[data-style="haven"][data-theme="dark"] .tide svg { filter: drop-shadow(0 0 16px oklch(72% 0.13 208 / 0.35)); }
:root[data-style="haven"] .tide[data-mood="watch"] { --hv-tide-a: oklch(60% 0.15 62); --hv-tide-b: oklch(80% 0.14 84); }
:root[data-style="haven"] .tide[data-mood="low"] { --hv-tide-a: oklch(50% 0.19 27); --hv-tide-b: oklch(70% 0.17 32); }
:root[data-style="haven"] .tide stop { transition: stop-color var(--hv-d-slow) var(--hv-ease-settle); }
:root[data-style="haven"] .hv-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hv-s4); padding: 6px 16px 0; align-content: start; }
:root[data-style="haven"] .hv-fig { font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
:root[data-style="haven"] .hv-fig .hv-cur { font-size: 0.56em; font-weight: 500; opacity: 0.62; letter-spacing: 0; margin-right: 0.08em; vertical-align: 0.5em; }
:root[data-style="haven"] .hv-fig.small .hv-cur { vertical-align: 0.12em; font-size: 0.78em; }
:root[data-style="haven"] .hv-muted { color: var(--hv-ink-2); font-size: var(--hv-fs-label); }
:root[data-style="haven"] .hv-amt { transition: filter var(--hv-d-base) var(--hv-ease-settle), opacity var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .covered .hv-amt { filter: blur(9px); opacity: 0.55; user-select: none; }
:root[data-style="haven"] .hv-hdr { display: flex; align-items: center; gap: var(--hv-s2); padding: 22px 20px 6px; }
: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"] .hv-round { position: relative; display: grid; place-items: center; width: 40px; height: 40px; 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); transition: transform var(--hv-d-fast) var(--hv-ease-out), background var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .hv-round::before { content: ""; position: absolute; inset: -2px; }
:root[data-style="haven"] .hv-round:active { transform: scale(0.92); }
:root[data-style="haven"] .hv-round[aria-pressed="true"] { background: var(--hv-primary); color: var(--hv-on-primary); }
:root[data-style="haven"] .hv-shell { padding: var(--hv-pad-shell); border-radius: var(--hv-r-shell); background: var(--hv-shell); box-shadow: 0 0 0 1px var(--hv-hair); }
:root[data-style="haven"] .hv-core { 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); padding: var(--hv-s4); }
:root[data-style="haven"] .hv-core.flush { padding: 0; overflow: clip; }
:root[data-style="haven"] .hv-stack { display: grid; gap: var(--hv-s3); }
:root[data-style="haven"] .hv-sec { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 6px 0; }
:root[data-style="haven"] .hv-sec h2 { font-size: var(--hv-fs-title); font-weight: 650; letter-spacing: -0.02em; }
:root[data-style="haven"] .hv-link { font-size: var(--hv-fs-label); font-weight: 600; color: var(--hv-link); background: none; border: 0; padding: 0; }
:root[data-style="haven"] .hv-link::before { content: ""; position: absolute; inset: 0; }
:root[data-style="haven"] .hv-vault { position: relative; border-radius: var(--hv-r-core); padding: var(--hv-s5) var(--hv-s4) var(--hv-s4); color: var(--hv-on-navy); background: var(--hv-vault); 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); overflow: clip; }
:root[data-style="haven"] .hv-vault__lab { font-size: var(--hv-fs-label); color: var(--hv-on-navy-2); }
:root[data-style="haven"] .hv-vault__fig { font-size: var(--hv-fs-hero); line-height: 0.98; margin: 6px 0 8px; }
:root[data-style="haven"] .tide { position: relative; width: 108px; height: 132px; }
:root[data-style="haven"] .tide svg { width: 100%; height: 100%; overflow: visible; display: block; }
:root[data-style="haven"] .tide .sh-line { fill: oklch(100% 0 0 / 0.06); stroke: oklch(100% 0 0 / 0.55); stroke-width: 1.4; }
:root[data-style="haven"] .tide .water { transform: translateY(calc((1 - var(--lvl, 0)) * 77px)); transition: transform var(--hv-t-tide, 1200ms) var(--hv-spring-soft, var(--hv-ease-settle)); }
:root[data-style="haven"] .tide .wave { animation: hv-drift 7s linear infinite; }
:root[data-style="haven"] .tide .wave.b { animation-duration: 11s; animation-direction: reverse; opacity: 0.55; }
:root[data-style="haven"] .tide .pace { stroke: oklch(100% 0 0 / 0.85); stroke-width: 1; stroke-dasharray: 2 3; }
@keyframes hv-drift { to { transform: translateX(-32px); } }
:root[data-style="haven"] .hv-chart { display: block; width: 100%; height: auto; overflow: visible; }
:root[data-style="haven"] .hv-chart .grid { stroke: var(--hv-hair); stroke-width: 1; }
:root[data-style="haven"] .hv-chart .axis { fill: var(--hv-ink-3); font-size: 10.5px; }
:root[data-style="haven"] .hv-chart .line { fill: none; stroke: var(--hv-line-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
:root[data-style="haven"] .hv-chart .area { fill: url(#areaFill); opacity: 0; }
:root[data-style="haven"] .hv-chart .plan { fill: none; stroke: var(--hv-ink-3); stroke-width: 1.4; stroke-dasharray: 3 4; }
:root[data-style="haven"] .hv-chart .dot { fill: var(--hv-core); stroke: var(--hv-line-ink); stroke-width: 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
:root[data-style="haven"] .on-screen .hv-chart .line { animation: hv-draw var(--hv-d-hero) var(--hv-ease-out) 240ms forwards; }
:root[data-style="haven"] .on-screen .hv-chart .area { animation: hv-fade-in var(--hv-d-slow) var(--hv-ease-settle) 700ms forwards; }
:root[data-style="haven"] .on-screen .hv-chart .dot { animation: hv-pop var(--hv-d-slow) var(--hv-spring-snap, var(--hv-ease-out)) 1100ms forwards; }
@keyframes hv-draw { to { stroke-dashoffset: 0; } }
@keyframes hv-fade-in { to { opacity: 1; } }
@keyframes hv-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
:root[data-style="haven"] .hv-row { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--hv-s3); min-height: 60px; padding: var(--hv-s2) var(--hv-s4); transition: background var(--hv-d-fast) var(--hv-ease-out), transform var(--hv-d-fast) var(--hv-ease-out); }
:root[data-style="haven"] .hv-row + .hv-row { box-shadow: inset 0 1px 0 var(--hv-hair); }
:root[data-style="haven"] button.hv-row, :root[data-style="haven"] .hv-row[role="button"] { width: 100%; border: 0; background: none; text-align: left; }
:root[data-style="haven"] button.hv-row:active, :root[data-style="haven"] .hv-row[role="button"]:active { background: var(--hv-well); }
:root[data-style="haven"] .hv-row.fresh { animation: hv-wash 1600ms var(--hv-ease-settle); }
@keyframes hv-wash { from { background: color-mix(in oklab, var(--hv-glow) 28%, var(--hv-core)); } to { background: transparent; } }
:root[data-style="haven"] .hv-gem { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--hv-r-tile); color: var(--hv-on-navy); 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"] .hv-gem .hv-ic { width: 21px; height: 21px; }
:root[data-style="haven"] .hv-g1 { --hv-gem: var(--hv-gem-1); }
:root[data-style="haven"] .hv-g2 { --hv-gem: var(--hv-gem-2); }
:root[data-style="haven"] .hv-g3 { --hv-gem: var(--hv-gem-3); }
:root[data-style="haven"] .hv-g4 { --hv-gem: var(--hv-gem-4); }
:root[data-style="haven"] .hv-g5 { --hv-gem: var(--hv-gem-5); }
:root[data-style="haven"] .hv-g6 { --hv-gem: var(--hv-gem-6); }
:root[data-style="haven"] .hv-pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--hv-r-pill); font-size: var(--hv-fs-micro); font-weight: 600; background: var(--hv-well); color: var(--hv-ink-2); white-space: nowrap; }
:root[data-style="haven"] .hv-pill .hv-ic { width: 14px; height: 14px; }
:root[data-style="haven"] .hv-pill.good { background: var(--hv-good-tile); color: var(--hv-good); }
:root[data-style="haven"] .hv-pill.bad { background: var(--hv-bad-tile); color: var(--hv-bad); }
:root[data-style="haven"] .hv-pill.warn { background: var(--hv-warn-tile); color: var(--hv-warn); }
:root[data-style="haven"] .hv-chips { position: relative; display: flex; gap: var(--hv-s2); overflow-x: auto; margin: 0 calc(var(--hv-s4) * -1); padding: 2px var(--hv-s4); scrollbar-width: none; }
:root[data-style="haven"] .hv-chips::-webkit-scrollbar { display: none; }
:root[data-style="haven"] .hv-chip { flex: none; position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--hv-c-chip); padding: 0 12px; border-radius: var(--hv-r-pill); border: 0; background: var(--hv-well); box-shadow: 0 0 0 1px var(--hv-hair); color: var(--hv-ink-2); font-size: var(--hv-fs-label); font-weight: 550; 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-chip::before { content: ""; position: absolute; inset: -7px 0; }
:root[data-style="haven"] .hv-chip:active { transform: scale(0.95); }
:root[data-style="haven"] .hv-chip .hv-ic { width: 16px; height: 16px; }
:root[data-style="haven"] .hv-chip.on { background: var(--hv-primary); color: var(--hv-on-primary); box-shadow: none; }
:root[data-style="haven"] .hv-month { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 44px; 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"] .hv-month button { border: 0; background: none; color: var(--hv-ink-2); height: 44px; }
:root[data-style="haven"] .field { display: grid; gap: 6px; min-width: 0; }
:root[data-style="haven"] .field > span { font-size: var(--hv-fs-label); color: var(--hv-ink-2); font-weight: 550; padding-left: 2px; }
@keyframes hv-shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
:root[data-style="haven"] .hv-amount { display: flex; align-items: center; gap: 8px; height: 68px; padding: 0 var(--hv-s4); border-radius: var(--hv-r-field); background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); font-size: 38px; font-weight: 600; letter-spacing: -0.035em; transition: box-shadow var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .hv-amount:focus-within { box-shadow: 0 0 0 2px var(--hv-core), 0 0 0 4px var(--hv-link); }
:root[data-style="haven"] .hv-amount .hv-cur { font-size: 22px; color: var(--hv-ink-2); font-weight: 500; }
:root[data-style="haven"] .hv-amount input { all: unset; flex: 1; min-width: 0; align-self: center; }
:root[data-style="haven"] .hv-amount input::placeholder { color: var(--hv-ink-3); }
:root[data-style="haven"] .hv-btn { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--hv-s3); height: var(--hv-c-btn); padding: 0 6px 0 var(--hv-s5); border: 0; border-radius: var(--hv-r-pill); background: var(--hv-primary); color: var(--hv-on-primary); font-size: var(--hv-fs-body); font-weight: 600; overflow: hidden; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.2), 0 14px 22px -14px var(--hv-sh-4); transition: transform var(--hv-d-fast) var(--hv-ease-out), background var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .hv-btn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--hv-tap); transform: translateY(-50%); }
:root[data-style="haven"] .hv-btn:active { transform: scale(0.97); }
:root[data-style="haven"] .hv-btn .nest { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hv-on-navy-3); flex: none; }
:root[data-style="haven"] .hv-btn .nest .hv-ic { width: 16px; height: 16px; }
:root[data-style="haven"] .hv-btn .lbl { flex: 1; text-align: center; padding-left: 30px; display: grid; }
:root[data-style="haven"] .hv-btn .lbl > span { grid-area: 1 / 1; transition: transform var(--hv-d-base) var(--hv-ease-settle), opacity var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .hv-btn .lbl .done { transform: translateY(120%); opacity: 0; }
:root[data-style="haven"] .hv-btn .spin { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--hv-on-navy-3); border-top-color: var(--hv-on-navy); opacity: 0; }
:root[data-style="haven"] .hv-btn.saving .spin { opacity: 1; animation: hv-rot 520ms linear infinite; }
:root[data-style="haven"] .hv-btn.saving .lbl .go { transform: translateY(-120%); opacity: 0; }
:root[data-style="haven"] .hv-btn.saved { background: var(--hv-good); }
:root[data-style="haven"] .hv-btn.saved .lbl .go { transform: translateY(-120%); opacity: 0; }
:root[data-style="haven"] .hv-btn.saved .lbl .done { transform: none; opacity: 1; }
:root[data-style="haven"] .hv-btn.saved .spin { opacity: 0; }
:root[data-style="haven"] .hv-btn.saving .tick path { stroke-dasharray: 24; stroke-dashoffset: 24; }
:root[data-style="haven"] .hv-btn.saved .tick path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: hv-tick 320ms var(--hv-ease-out) forwards; }
@keyframes hv-rot { to { transform: rotate(360deg); } }
@keyframes hv-tick { to { stroke-dashoffset: 0; } }
:root[data-style="haven"] .hv-btn.full { width: 100%; }
:root[data-style="haven"] .hv-btn.small { height: 34px; padding: 0 6px 0 var(--hv-s4); font-size: var(--hv-fs-label); }
:root[data-style="haven"] .hv-btn.small .lbl { padding-left: 0; white-space: nowrap; }
:root[data-style="haven"] .hv-btn.ghost { background: var(--hv-core); color: var(--hv-ink); box-shadow: 0 0 0 1px var(--hv-hair-strong); }
:root[data-style="haven"] .hv-note { display: grid; grid-template-columns: auto 1fr; gap: var(--hv-s3); align-items: start; padding: var(--hv-s3) var(--hv-s4); border-radius: var(--hv-r-core); }
:root[data-style="haven"] .hv-note.bad { background: var(--hv-bad-tile); }
:root[data-style="haven"] .hv-note.warn { background: var(--hv-warn-tile); }
:root[data-style="haven"] .hv-note.good { background: var(--hv-good-tile); }
:root[data-style="haven"] .hv-note b { display: block; font-weight: 650; }
:root[data-style="haven"] .hv-note.bad .hv-ic { color: var(--hv-bad); }
:root[data-style="haven"] .hv-note.warn .hv-ic { color: var(--hv-warn); }
:root[data-style="haven"] .hv-note.good .hv-ic { color: var(--hv-good); }
:root[data-style="haven"] .hv-step { flex: none; width: 172px; display: grid; gap: 6px; padding: var(--hv-s3); border-radius: 22px; background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); transition: transform var(--hv-d-slow) var(--hv-ease-settle), opacity var(--hv-d-base) var(--hv-ease-settle), width var(--hv-d-slow) var(--hv-ease-settle), margin var(--hv-d-slow) var(--hv-ease-settle), padding var(--hv-d-slow) var(--hv-ease-settle); overflow: clip; }
:root[data-style="haven"] .hv-step.late { background: var(--hv-bad-tile); box-shadow: none; }
:root[data-style="haven"] .hv-step b { font-size: var(--hv-fs-body); font-weight: 650; }
:root[data-style="haven"] .hv-step .hv-btn { justify-self: start; }
:root[data-style="haven"] .hv-step.gone { opacity: 0; transform: scale(0.88) translateY(-6px); width: 0; padding-inline: 0; margin-right: calc(var(--hv-s2) * -1); }
:root[data-style="haven"] .hv-meter { height: 8px; border-radius: 4px; background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); overflow: clip; }
:root[data-style="haven"] .hv-meter i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--hv-tide-a), var(--hv-tide-b)); transform-origin: left; transition: width var(--hv-d-hero) var(--hv-spring-soft, var(--hv-ease-settle)); }
:root[data-style="haven"] .hv-meter.go i { width: calc(var(--p, 0) * 100%); }
:root[data-style="haven"] .hv-meter.over i { background: var(--hv-bad); }
:root[data-style="haven"] .hv-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--hv-d-slow) var(--hv-ease-settle); }
:root[data-style="haven"] .hv-fold.open { grid-template-rows: 1fr; }
:root[data-style="haven"] .hv-fold > div { overflow: clip; min-height: 0; }
:root[data-style="haven"] .hv-chev { transition: transform var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .open > .hv-chev, :root[data-style="haven"] [aria-expanded="true"] .hv-chev { transform: rotate(180deg); }
:root[data-style="haven"] .on-screen .hv-bars .col { animation: hv-grow var(--hv-d-hero) var(--hv-spring-soft, var(--hv-ease-out)) calc(var(--k) * 110ms + 150ms) both; }
@keyframes hv-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
:root[data-style="haven"] .hv-scrim { position: absolute; inset: 0; z-index: 30; background: var(--hv-scrim); opacity: 0; pointer-events: none; transition: opacity var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .sheet-open .hv-scrim { opacity: 1; pointer-events: auto; }
:root[data-style="haven"] .hv-sheet { position: absolute; z-index: 35; left: 8px; right: 8px; bottom: 8px; max-height: calc(100% - 60px); overflow-y: auto; border-radius: 36px; padding: var(--hv-pad-shell); background: var(--hv-shell); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px var(--hv-hair), 0 40px 60px -24px var(--hv-sh-4); transform: translateY(calc(105% + var(--drag, 0px))) scale(0.92); transform-origin: 50% 100%; opacity: 0; pointer-events: none; scrollbar-width: none; transition: transform var(--hv-t-soft, 620ms) var(--hv-spring-soft, var(--hv-ease-settle)), opacity var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .sheet-open .hv-sheet { transform: translateY(var(--drag, 0px)); opacity: 1; pointer-events: auto; }
:root[data-style="haven"] .hv-sheet.dragging { transition: none; }
:root[data-style="haven"] .hv-sheet .hv-core { border-radius: 30px; padding: var(--hv-s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hv-s3); }
:root[data-style="haven"] .hv-sheet .hv-core > * { min-width: 0; }
:root[data-style="haven"] .hv-amount { min-width: 0; width: 100%; }
:root[data-style="haven"] .hv-sheet__head { display: flex; align-items: center; justify-content: space-between; }
:root[data-style="haven"] .hv-sheet__head h2 { font-size: var(--hv-fs-title); font-weight: 650; letter-spacing: -0.02em; }
:root[data-style="haven"] .hv-screen .hv-rise { opacity: 0; }
:root[data-style="haven"] .hv-screen.still .hv-rise { opacity: 1; }
:root[data-style="haven"] .hv-screen.enter .hv-rise { animation: hv-rise var(--hv-d-slow) var(--hv-ease-out) calc(var(--i, 0) * 60ms) both; }
@keyframes hv-rise { from { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
:root[data-style="haven"] .hv-screen.leave { animation: hv-leave var(--hv-d-fast) var(--hv-ease-in) forwards; }
@keyframes hv-leave { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -14px)); } }
@keyframes hv-shimmer { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-style="haven"] *, :root[data-style="haven"] *::before, :root[data-style="haven"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  :root[data-style="haven"] .tide .wave { animation: none; }
}
:root[data-style="haven"] .reduced *, :root[data-style="haven"] .reduced *::before, :root[data-style="haven"] .reduced *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
:root[data-style="haven"] .reduced .tide .wave { animation: none; }
@media (max-width: 359px) {
  :root[data-style="haven"] { --hv-fs-hero: 42px; }
  :root[data-style="haven"] .hv-screen { padding-inline: 12px; }
  :root[data-style="haven"] .hv-hdr { padding-inline: 14px; }
  :root[data-style="haven"] .tide { width: 80px; height: 98px; }
  :root[data-style="haven"] .hv-step { width: 150px; }
}
:root[data-style="haven"] .hv-pillbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border: 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); font-size: var(--hv-fs-label); font-weight: 600; color: var(--hv-ink); transition: transform var(--hv-d-fast) var(--hv-ease-out); }
:root[data-style="haven"] .hv-pillbtn::before { content: ""; position: absolute; inset: -4px 0; }
:root[data-style="haven"] .hv-pillbtn:active { transform: scale(0.96); }
:root[data-style="haven"] .hv-pillbtn .hv-ic { width: 18px; height: 18px; color: var(--hv-link); }
:root[data-style="haven"] .hv-grip { display: block; position: relative; width: 40px; height: 5px; margin: 0 auto 4px; border-radius: 3px; background: var(--hv-hair-strong); touch-action: none; }
:root[data-style="haven"] .hv-grip::before { content: ""; position: absolute; inset: -14px -30px; }
:root[data-style="haven"] .hv-sheet__head { touch-action: none; }
:root[data-style="haven"] .hv-amountbig { display: flex; align-items: center; justify-content: center; gap: 6px; height: 78px; border-radius: var(--hv-r-field); background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); transition: box-shadow var(--hv-d-base) var(--hv-ease-settle); }
:root[data-style="haven"] .hv-amountbig .hv-cur { font-size: 28px; color: var(--hv-ink-2); font-weight: 500; }
:root[data-style="haven"] .hv-amountbig .val { font-size: 54px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
:root[data-style="haven"] .hv-amountbig .val.bump { animation: hv-bump 220ms var(--hv-ease-out); }
@keyframes hv-bump { 0% { transform: translateY(5px); opacity: 0.6; } 100% { transform: none; opacity: 1; } }
:root[data-style="haven"] .hv-amountbig.error { box-shadow: 0 0 0 2px var(--hv-core), 0 0 0 4px var(--hv-bad); animation: hv-shake 340ms var(--hv-ease-out); }
:root[data-style="haven"] .hv-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
:root[data-style="haven"] .hv-key { position: relative; height: 46px; border: 0; border-radius: 16px; background: var(--hv-well); box-shadow: inset 0 0 0 1px var(--hv-hair); font-size: 21px; font-weight: 550; color: var(--hv-ink); display: grid; place-items: center; transition: transform var(--hv-d-fast) var(--hv-ease-out), background var(--hv-d-fast) var(--hv-ease-out); }
:root[data-style="haven"] .hv-key::before { content: ""; position: absolute; inset: -2px; }
:root[data-style="haven"] .hv-key:active { transform: scale(0.93); background: var(--hv-core); }
:root[data-style="haven"] .hv-key.alt { color: var(--hv-ink-2); }
:root[data-style="haven"] .hv-detailsbtn { all: unset; box-sizing: border-box; display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 8px 2px 2px; color: var(--hv-ink-2); font-size: var(--hv-fs-label); font-weight: 550; cursor: pointer; }
:root[data-style="haven"] .hv-detailsbtn[aria-expanded="true"] .hv-chev { transform: rotate(180deg); }
@media (max-width: 359px) {
  :root[data-style="haven"] .hv-amountbig .val { font-size: 46px; }
  :root[data-style="haven"] .hv-key { height: 42px; }
}