/* Base elements and shared components. Values come from tokens.css only.
   LEMMA-UI-OVERHAUL-1030 (C1/F01): calmer weights (400-600), token-only shadows, 14-18 px cards, pill controls. */
*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--fs-root);-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 var(--fs-md)/var(--lh) var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:300;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media print{body::before{display:none}}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:var(--head-weight);letter-spacing:-.01em;margin:0;font-variation-settings:"SOFT" 60,"WONK" 0;color:var(--ink);font-optical-sizing:auto}
h1,h2{text-wrap:balance}
h1{font-size:var(--fs-xl);line-height:1.15}
h2{font-size:var(--fs-lg);line-height:1.25}
h3{font-size:1.05rem;line-height:1.3}
h4{font-size:var(--fs-md);line-height:1.3}
p{margin:0}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* Links inside sentences are underlined, so they never rely on colour alone (WCAG 1.4.1); the line thickens on hover. */
:is(p,dd,.small-note,.callout,.note-line)>a:not(.btn):not(.chip):not(.cover){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
:is(p,dd,.small-note,.callout,.note-line)>a:not(.btn):not(.chip):not(.cover):hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
small{font-size:var(--fs-xs)}
pre,code,kbd{font-family:var(--f-mono)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
details>summary{cursor:pointer}
/* DOBBY-UIUX-9: IDs and sources live behind a small Details toggle, never in the main line. */
.id-details{margin-top:var(--s1);color:var(--ink-2);font-size:var(--fs-sm);overflow-wrap:anywhere}
.id-details>summary{width:fit-content;padding-block:calc(var(--s1) / 2);font-weight:500}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--accent-tint);color:var(--ink)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:-999px;top:var(--s2);z-index:400;background:var(--ink);color:var(--bg);padding:var(--s2) var(--s4);border-radius:var(--r-pill);font-weight:600}
.skip:focus{left:var(--s3)}
.muted{color:var(--ink-2)}
.num{font-family:var(--f-head);font-variant-numeric:lining-nums tabular-nums;font-weight:var(--head-weight);letter-spacing:-.015em}
.tabular{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-size:var(--fs-sm)}
.delta-up{color:var(--ok-ink);font-weight:600}
.delta-down{color:var(--danger-ink);font-weight:600}
.nowrap{white-space:nowrap}
.grow{flex:1;min-width:0}
.stack-v{display:grid;gap:var(--s3)}
.row-flex{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.pw-row{align-items:flex-end;flex-wrap:nowrap}.pw-row>.field{flex:1}
.spacer-top{margin-top:var(--s5)}

/* ---- Icons ---- */
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:16px;height:16px}
svg.i.lg{width:24px;height:24px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--control-h);padding:0 calc(20px * var(--density));border-radius:var(--r-pill);
  border:1px solid transparent;font-weight:600;font-size:var(--fs-sm);line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;letter-spacing:.005em;
  background:var(--surface-2);color:var(--ink);transition:transform var(--t-fast) var(--ease),background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.btn:hover{text-decoration:none;background:var(--surface-3)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-1)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink));box-shadow:var(--sh-2)}
.btn.secondary{background:var(--secondary);color:var(--on-secondary)}
.btn.secondary:hover{background:color-mix(in srgb,var(--secondary) 88%,var(--ink))}
.btn.soft{background:var(--surface-3);color:var(--ink)}
.btn.ghost{background:var(--surface);border-color:color-mix(in srgb,var(--ink) 18%,transparent);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.btn.danger{background:var(--surface);border-color:var(--danger);color:var(--danger-ink)}
.btn.danger:hover{background:var(--danger-tint)}
.btn.danger-solid{background:var(--danger);color:var(--on-danger)}
.btn.sm{min-height:var(--control-h-sm);padding:0 calc(14px * var(--density))}
.btn.block{width:100%}
.icon-btn{position:relative;width:var(--control-h);height:var(--control-h);display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;flex:none;padding:0;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--ease)}
.icon-btn:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.icon-btn:active:not(:disabled){transform:scale(.96)}
.icon-btn.plain{border-color:transparent;background:transparent}
.icon-btn.sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--secondary);border:2px solid var(--surface)}
.link-btn{background:none;border:0;padding:0;color:var(--accent-ink);font-weight:600;cursor:pointer;text-underline-offset:.2em}
.link-btn:hover{text-decoration:underline}

/* ---- Chips, counts, dots ---- */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;
  background:var(--surface-2);color:var(--ink-2);border:0;line-height:1.2;letter-spacing:.005em}
.chip svg.i{width:14px;height:14px}
.chip.ok{background:var(--ok-tint);color:var(--ok-ink)}
.chip.warn{background:var(--warn-tint);color:var(--warn-ink)}
.chip.bad{background:var(--danger-tint);color:var(--danger-ink)}
.chip.info{background:var(--info-tint);color:var(--info-ink)}
.chip.accent{background:var(--accent-tint);color:var(--accent-ink)}
.chip.neutral{background:var(--surface-2);color:var(--ink-2)}
.chip.sm{min-height:22px;padding:1px 8px}
button.chip{cursor:pointer}
.chip.has-tt{cursor:help}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--secondary);color:var(--on-secondary);font-size:var(--fs-xs);font-weight:600;font-style:normal;line-height:1;font-variant-numeric:tabular-nums}
.dot-s{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;background:var(--cat-1)}
.ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--ink-2)}
.ic.round{border-radius:50%}
.ic.ok{background:var(--ok-tint);color:var(--ok-ink)}
.ic.warn{background:var(--warn-tint);color:var(--warn-ink)}
.ic.info{background:var(--info-tint);color:var(--info-ink)}
.ic.bad{background:var(--danger-tint);color:var(--danger-ink)}
.ic.accent{background:var(--accent-tint);color:var(--accent-ink)}

/* ---- Segmented control / tabs ---- */
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg>a,.seg>button,.seg>label{display:inline-flex;align-items:center;gap:6px;min-height:var(--control-h-sm);padding:0 calc(16px * var(--density));border-radius:var(--r-pill);border:0;background:transparent;
  font-weight:600;font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.seg>a:hover,.seg>button:hover{color:var(--ink);text-decoration:none}
.seg [aria-current="page"],.seg [aria-pressed="true"],.seg [aria-selected="true"],.seg .on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.seg .count{min-width:20px;height:20px;font-size:.7rem}

/* ---- Cards ---- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1);min-width:0}
.card.flat{box-shadow:none}
.card.tinted{background:var(--surface-2);border-color:transparent;box-shadow:none}
.card-h{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);min-height:32px;flex-wrap:wrap}
.card-h h2{font-size:1.15rem;letter-spacing:-.012em}
.card-h .end{margin-left:auto;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.label{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:var(--fs-sm);font-weight:600}
a.card,.lift{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
a.card:hover,.lift:hover{transform:translateY(var(--lift));box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));text-decoration:none}
.cover{position:absolute;inset:0;border-radius:inherit;z-index:1}
.cover:focus-visible{outline-offset:2px}
.blob{position:absolute;pointer-events:none;border-radius:62% 38% 46% 54%/48% 58% 42% 52%;animation:morph 14s ease-in-out infinite alternate}
@keyframes morph{50%{transform:rotate(4deg) scale(1.03,.98)}100%{transform:rotate(-3deg) scale(.98,1.02)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes up{from{transform:scaleY(0)}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
@keyframes shimmer{50%{opacity:.55}}
/* Page elements rise into place without fading, so content is readable from the first frame. */
@keyframes settle{from{transform:translateY(var(--rise))}}
.rise{animation:settle var(--t-slow) var(--ease) both}
.rise:nth-child(2){animation-delay:50ms}.rise:nth-child(3){animation-delay:100ms}.rise:nth-child(4){animation-delay:150ms}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important}
:root[data-motion="reduced"] .blob,:root[data-motion="reduced"] .rise{animation:none}
@media (prefers-reduced-motion:reduce){.blob,.rise,.bar>i,.skeleton{animation:none!important}html{scroll-behavior:auto}}

/* ---- Tooltip ----
   A focusable trigger (.has-tt) holds <span role="tooltip" id>; the trigger has aria-describedby.
   Opens on hover, keyboard focus or tap; Esc closes it (app.js adds .tt-closed). */
.tip{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:help;flex:none}
.tip:hover,.tip:focus-visible{color:var(--accent-ink);background:var(--accent-tint)}
.tip svg.i{width:15px;height:15px}
.has-tt{position:relative}
[role="tooltip"]{position:absolute;z-index:90;left:50%;bottom:calc(100% + 10px);width:max-content;max-width:260px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--tip-bg);color:var(--tip-ink);font:500 var(--fs-xs)/1.45 var(--f-body);text-align:left;letter-spacing:0;white-space:normal;text-transform:none;
  box-shadow:var(--sh-3);display:none;transform:translate(-50%,0);pointer-events:none}
[role="tooltip"]::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--tip-bg)}
.has-tt.tt-open>[role="tooltip"],.has-tt:hover>[role="tooltip"],.has-tt:focus-visible>[role="tooltip"],.has-tt:focus>[role="tooltip"],.has-tt:focus-within>[role="tooltip"]{display:block;animation:tip-in var(--t-fade) var(--ease) both}
@keyframes tip-in{from{opacity:0}}
.has-tt.tt-closed>[role="tooltip"]{display:none!important}
.has-tt.below>[role="tooltip"]{bottom:auto;top:calc(100% + 10px)}
.has-tt.below>[role="tooltip"]::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--tip-bg)}
.has-tt.end>[role="tooltip"],.has-tt.flip-end>[role="tooltip"]{left:auto;right:0;transform:none}
.has-tt.end>[role="tooltip"]::after,.has-tt.flip-end>[role="tooltip"]::after{left:auto;right:12px;margin-left:0}
.has-tt.start>[role="tooltip"],.has-tt.flip-start>[role="tooltip"]{left:0;right:auto;transform:none}
.has-tt.start>[role="tooltip"]::after,.has-tt.flip-start>[role="tooltip"]::after{left:16px;right:auto;margin-left:0}
.has-tt.flip-below>[role="tooltip"]{bottom:auto;top:calc(100% + 10px)}
.has-tt.flip-below>[role="tooltip"]::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--tip-bg)}
[role="tooltip"] .k{display:block;margin-top:4px;color:var(--tip-ink-2);font-weight:500}

/* ---- Data helpers ---- */
.bar{height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;min-width:24px}
.bar>i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--c,var(--cat-1));transform-origin:left;animation:grow var(--t-slow) var(--ease) both}
.bar.thin{height:6px}
.stackbar{display:flex;height:12px;border-radius:var(--r-pill);overflow:hidden;gap:2px;background:var(--surface-2)}
.stackbar>i{display:block;height:100%;flex:var(--f,1) 1 0;background:var(--c,var(--cat-1));min-width:3px}
.c1{--c:var(--cat-1)}.c2{--c:var(--cat-2)}.c3{--c:var(--cat-3)}.c4{--c:var(--cat-4)}.c5{--c:var(--cat-5)}.c6{--c:var(--cat-6)}.c7{--c:var(--cat-7)}.c8{--c:var(--cat-8)}
.dot-s.c1,.dot-s.c2,.dot-s.c3,.dot-s.c4,.dot-s.c5,.dot-s.c6,.dot-s.c7,.dot-s.c8{background:var(--c)}
/* FINUX2-L1 fixed asset-class colours (class, not rank). Never applied to text. */
.ac-cash{--c:var(--asset-cash)}.ac-equity{--c:var(--asset-equity)}.ac-bonds{--c:var(--asset-bonds)}.ac-funds{--c:var(--asset-funds)}
.ac-property{--c:var(--asset-property)}.ac-retirement{--c:var(--asset-retirement)}.ac-private{--c:var(--asset-private)}.ac-other{--c:var(--asset-other)}
.dot-s[class*="ac-"]{background:var(--c)}
.donut{position:relative;width:var(--size,150px);height:var(--size,150px);border-radius:50%;flex:none;
  background:var(--g,conic-gradient(var(--surface-2) 0 100%));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring,22px)),#000 calc(100% - var(--ring,22px) + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring,22px)),#000 calc(100% - var(--ring,22px) + 1px))}
.donut-wrap{position:relative;width:var(--size,150px);height:var(--size,150px);flex:none}
.donut-wrap .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-wrap .c b{font-size:1.4rem;line-height:1}
.donut-wrap .c small{font-weight:600;color:var(--ink-2)}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.legend li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;font-weight:500;font-size:var(--fs-sm)}
.legend li>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend li .bar{grid-column:2/4;height:6px}
.legend .pct{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.spark{display:block;width:100%;height:56px;overflow:visible}
.vbars{display:flex;align-items:flex-end;gap:5px;height:var(--h,56px)}
.vbars>i{flex:1;min-width:3px;height:var(--v,0%);border-radius:6px 6px 3px 3px;background:var(--c,var(--cat-1));transform-origin:bottom;animation:up var(--t-slow) var(--ease) both}
.vbars>i.o{--c:var(--cat-2)}

/* ---- Forms ---- */
.field{display:grid;gap:6px;min-width:0}
.field>span,.field-label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.field small{color:var(--ink-2)}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),select,textarea{
  width:100%;min-height:var(--control-h);padding:0 calc(14px * var(--density));border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),select,textarea):hover:not(:disabled){border-color:var(--ink-2)}
textarea{padding:10px 14px;min-height:96px;resize:vertical;line-height:1.5}
select{appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
input[type="file"]{width:100%;font-size:var(--fs-sm);color:var(--ink-2)}
input[type="file"]::file-selector-button{margin-right:12px;min-height:var(--control-h-sm);padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-weight:600;cursor:pointer}
input[type="range"]{width:100%;accent-color:var(--accent)}
input[type="color"]{width:48px;height:40px;padding:3px;border-radius:var(--r-xs);border:1px solid var(--line-strong);background:var(--surface);cursor:pointer}
.check{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:var(--fs-sm);cursor:pointer}
.check input,input.ck{appearance:none;width:22px;height:22px;flex:none;margin:0;border-radius:var(--r-xs);border:2px solid var(--line-strong);background:var(--surface);display:inline-grid;place-items:center;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}
.check input::after,input.ck::after{content:"";width:10px;height:6px;border:solid var(--on-accent);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform var(--t-fast) var(--ease)}
.check input:checked,input.ck:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after,input.ck:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.check input:disabled,input.ck:disabled{background:var(--surface-2);border-color:var(--line);cursor:not-allowed}
.switch{appearance:none;width:44px;height:26px;border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--line-strong);position:relative;cursor:pointer;flex:none;margin:0;transition:background var(--t-fast)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-1);transition:transform var(--t-fast) var(--ease)}
.switch:checked{background:var(--accent);border-color:var(--accent)}
.switch:checked::after{transform:translateX(18px)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3)}
.form-actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-top:var(--s4)}
.error-text{color:var(--danger-ink);font-weight:600;font-size:var(--fs-sm)}

/* ---- Tables (kept for dense review data) ---- */
.table-wrap{width:100%;overflow:auto;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.table-wrap table{border-collapse:collapse;min-width:100%;font-size:var(--fs-sm)}
.table-wrap th,.table-wrap td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table-wrap thead th{position:sticky;top:0;background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;letter-spacing:.01em}
.table-wrap tbody tr:last-child>*{border-bottom:0}
.table-wrap tbody tr{transition:background var(--t-fast)}
.table-wrap tbody tr:hover{background:var(--surface-hover)}
.table-wrap :is(td,th).num{text-align:right;font-variant-numeric:lining-nums tabular-nums}
.table-wrap td small,.table-wrap th small{display:block;color:var(--ink-2);font-weight:500}
.table-wrap select,.table-wrap input:not([type="checkbox"]){min-width:130px;min-height:var(--control-h-sm)}
.table-wrap input[type="checkbox"]{width:auto}

/* ---- Key/value list ---- */
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.kv>div{display:grid;gap:2px;min-width:0}
.kv>div>span{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
.kv>div>b{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---- Empty states and skeletons ---- */
.empty{display:grid;justify-items:center;gap:var(--s2);padding:var(--s6) var(--s4);text-align:center;color:var(--ink-2);font-weight:500;font-size:var(--fs-sm);text-wrap:balance}
.empty .ic{width:52px;height:52px;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink)}
.skeleton{border-radius:var(--r-sm);min-height:18px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.8s var(--ease) infinite}
.skeleton-page{display:grid;gap:var(--s5)}
.skeleton-page .skeleton.tall{min-height:220px;border-radius:var(--r-lg)}
.skeleton-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s5)}
.skeleton-row .skeleton{min-height:150px;border-radius:var(--r-lg)}

/* ---- Callouts and notices ---- */
.callout{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--warn-tint);color:var(--ink);flex-wrap:wrap}
.callout.info{background:var(--info-tint)}
.callout.ok{background:var(--ok-tint)}
.callout.bad{background:var(--danger-tint)}
.callout .ic{background:var(--surface);color:var(--warn-ink)}
.callout b{font-weight:600}
.callout small{display:block;color:var(--ink-2);font-weight:500}
.note-line{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg);font-weight:500;font-size:var(--fs-sm)}
.note-line svg{color:var(--warn-ink)}

/* ---- Popover (details) and sheet (dialog) ---- */
.pop{position:relative}
.pop>summary{list-style:none}
.pop>summary::-webkit-details-marker{display:none}
.pop .pop-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(320px,calc(100vw - 32px));padding:var(--s4);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3);display:grid;gap:var(--s3);animation:rise var(--t-fast) var(--ease) both}
.pop .pop-panel b{font-family:var(--f-head);font-weight:var(--head-weight);font-size:1.05rem}
.pop .pop-panel p{font-size:var(--fs-sm);color:var(--ink-2);font-weight:400}
.sheet{border:0;padding:0;margin:auto 0 auto auto;height:100%;max-height:100%;width:min(480px,100vw);background:var(--surface);color:var(--ink);box-shadow:var(--sh-3);border-radius:var(--r-lg) 0 0 var(--r-lg)}
.sheet::backdrop{background:var(--scrim)}
.sheet[open]{animation:slidein var(--t-sheet) var(--ease) both}
@keyframes slidein{from{transform:translateX(40px);opacity:0}}
.sheet-body{padding:var(--s5);display:grid;gap:var(--s4)}
.sheet-head{display:flex;align-items:center;gap:var(--s3)}
.sheet-head h2{margin-right:auto}
@media (max-width:720px){.sheet{margin:auto 0 0;width:100vw;height:auto;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0}}

/* ---- Stepper ---- */
.steps{display:flex;list-style:none;margin:0;padding:0;gap:6px}
.steps li{flex:1;display:flex;align-items:center;gap:10px;font-weight:600;font-size:var(--fs-sm);color:var(--ink-2);min-width:0}
.steps li:not(:last-child)::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--line);margin-right:6px;min-width:12px}
.steps .n{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--line);background:var(--surface);font-size:.8rem;transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.steps .n svg{display:none;width:15px;height:15px}
.steps .done .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.steps .done .n svg{display:block}
.steps .done .n em{display:none}
.steps .n em{font-style:normal}
.steps li.done::after{background:var(--accent)}
.steps [aria-current="step"]{color:var(--ink)}
.steps [aria-current="step"] .n{border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 4px var(--accent-tint)}

/* ---- Sticky action bar ---- */
.actionbar{position:sticky;bottom:var(--s4);z-index:40;display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 0;padding:10px 10px 10px 20px;border-radius:var(--r-pill);
  background:var(--bar-bg);color:var(--bar-ink);box-shadow:var(--sh-3);flex-wrap:wrap}
.actionbar b{font-weight:600}
.actionbar small{color:var(--bar-ink-2);font-weight:500;font-size:var(--fs-sm)}
.actionbar .end{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.actionbar .btn.ghost{color:var(--bar-ink);border-color:color-mix(in srgb,var(--bar-ink) 30%,transparent)}
.actionbar .btn.ghost:hover{background:color-mix(in srgb,var(--bar-ink) 10%,transparent)}
.actionbar .btn.primary{background:var(--bar-cta);color:var(--on-bar-cta);box-shadow:none}

/* ---- Toast notice ---- */
.toast{position:fixed;z-index:200;left:50%;bottom:var(--s5);transform:translateX(-50%);display:flex;align-items:center;gap:var(--s3);max-width:min(560px,calc(100vw - 32px));
  padding:12px 12px 12px 18px;border-radius:var(--r-md);background:var(--bar-bg);color:var(--bar-ink);box-shadow:var(--sh-3);font-weight:500;font-size:var(--fs-sm);animation:rise var(--t) var(--ease) both}
.toast .icon-btn{color:var(--bar-ink);border-color:transparent;background:transparent}
.toast.error{background:var(--danger);color:var(--on-danger)}
.toast.error .icon-btn{color:var(--on-danger)}

/* UI1-F6: edge masks appear only where finance tabs extend off screen. */
.seg[data-finance-tabs]{scroll-snap-type:x proximity;scroll-padding-inline:var(--s4)}
.seg[data-finance-tabs]>a{scroll-snap-align:start;flex-shrink:0}
.seg[data-finance-tabs].scroll-left{mask-image:linear-gradient(to right,transparent,var(--ink) var(--s4));-webkit-mask-image:linear-gradient(to right,transparent,var(--ink) var(--s4))}
.seg[data-finance-tabs].scroll-right{mask-image:linear-gradient(to left,transparent,var(--ink) var(--s4));-webkit-mask-image:linear-gradient(to left,transparent,var(--ink) var(--s4))}
.seg[data-finance-tabs].scroll-left.scroll-right{mask-image:linear-gradient(to right,transparent,var(--ink) var(--s4),var(--ink) calc(100% - var(--s4)),transparent);-webkit-mask-image:linear-gradient(to right,transparent,var(--ink) var(--s4),var(--ink) calc(100% - var(--s4)),transparent)}