/* components.css: v2 building blocks (js/v2/ui/components.mjs), mockup
   "stocks". Flat grey sections on true black, 17 pt sentence-case headers,
   plain period tabs on a fill capsule, white primary capsule, glass only on
   floating controls. Flat fills only; the liquid glass on floating
   controls is the one place with a drop shadow. */

/* ---------------------------------------------------------------- glass
   The floating control layer only (nav capsule and circles, sheet header
   buttons, tab bar, chips, toasts). One flat tint, blur + saturate, a
   0.5 px rim at 12 % white. Never on content. Fallbacks (no
   backdrop-filter, reduced transparency, increased contrast) are token
   overrides in tokens.css. */
.glass {
  --g-tint: var(--glass-tint);
  --g-filter: var(--glass-filter);
  position: relative;
  background-color: var(--g-tint);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  box-shadow: var(--glass-rim-shadow);
}
/* Liquid glass (iOS 26 look): a brighter, more saturated blur, a light sheen
   from the top, a bright top edge, a faint inner glow and a soft drop shadow
   that lifts the control off the content. WebKit cannot refract the
   backdrop (no SVG filters in backdrop-filter), so the lens bending is left
   out. Reduced transparency and increased contrast drop the sheen. */
:root {
  --lg-filter: blur(14px) saturate(190%) brightness(1.08);
  --lg-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.04) 100%);
  --lg-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.38),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 var(--hairline) rgba(255, 255, 255, 0.10),
    inset 0 0 14px rgba(255, 255, 255, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.40);
  --lg-lens-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.30), inset 0 0 10px rgba(255, 255, 255, 0.06);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --lg-sheen: none; --lg-shadow: var(--glass-rim-shadow); --lg-filter: var(--glass-filter); --lg-lens-shadow: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --lg-sheen: none; --lg-filter: none; }
}
.glass:not(.glass--flat):not(.glass--thin) {
  --g-filter: var(--lg-filter);
  background-image: var(--lg-sheen);
  box-shadow: var(--lg-shadow);
}
.glass--thick { --g-tint: var(--glass-tint-strong); }
.glass--thin { --g-tint: var(--glass-tint-thin); --g-filter: var(--glass-filter-thin); }
.glass--flat { --g-filter: none; }
.glass--capsule { border-radius: var(--radius-capsule); }
.glass--interactive {
  transition: transform var(--dur-press-out) var(--ease-out), background-color var(--dur-press-out) var(--ease-linear);
  -webkit-tap-highlight-color: transparent;
}
.glass--interactive:active {
  background-color: var(--glass-tint-strong);
  transform: scale(var(--press-scale));
  transition-duration: var(--dur-press);
}
@media (forced-colors: active) {
  .glass { outline: 1px solid; outline-offset: -1px; }
}

/* ---------------------------------------------------------------- glass circle and capsule group */
.ui-glassbtn {
  display: grid; place-items: center; flex: none;
  width: var(--control-h); height: var(--control-h);
  border-radius: var(--radius-full);
  color: var(--label);
}
.ui-glassbtn > .ui-ico { width: var(--icon-glass); height: var(--icon-glass); }
.ui-glassgroup {
  display: inline-flex; align-items: center; flex: none;
  height: var(--control-h); border-radius: var(--radius-capsule);
  color: var(--label);
}
.ui-glassgroup > .ui-iconbtn { width: var(--glass-item-w); color: var(--label); }
.ui-glassgroup > .ui-iconbtn > .ui-ico { width: 21px; height: 21px; }

/* ---------------------------------------------------------------- sections */
.ui-sec + .ui-sec { margin-top: var(--gap-group); }
.ui-sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 var(--margin) 8px;
  font: var(--t-headline); letter-spacing: var(--tr-headline);
}
.ui-sec-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sec-trail { flex: none; font: var(--t-body); letter-spacing: var(--tr-body); color: var(--label-2); white-space: nowrap; }
/* a header over a grouped section lines up with the cell text */
.ui-sec > .ui-sec-head { margin-left: calc(var(--margin) + var(--cell-pad-x)); margin-right: calc(var(--margin) + var(--cell-pad-x)); }
.ui-sec > .ui-sec-head:has(+ .ui-group--plain) { margin-left: var(--margin); margin-right: var(--margin); }
.ui-group {
  position: relative; overflow: hidden;
  margin: 0 var(--margin);
  background: var(--cell); border-radius: var(--radius-section);
}
/* plain: edge-to-edge rows on black (the Stocks watchlist); hairlines stay inset */
.ui-group--plain { margin: 0; border-radius: 0; background: transparent; }
.ui-group--plain > .ui-row { padding-left: var(--margin); padding-right: var(--margin); }
.ui-group--plain > .ui-row + .ui-row::before { left: var(--margin); right: var(--margin); }
.ui-sec-foot {
  margin: 8px calc(var(--margin) + var(--cell-pad-x)) 0;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
}

/* ---------------------------------------------------------------- rows */
.ui-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--row-min);
  padding: var(--cell-pad-y) var(--cell-pad-x);
  color: var(--label); text-align: left;
  font: var(--t-body); letter-spacing: var(--tr-body);
  transition: background-color var(--dur-press-out) var(--ease-linear);
}
/* hairline separators inset 16 from the leading edge (or past a leading node) */
.ui-row + .ui-row::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--sep-left, var(--sep-inset)); height: 1px;
  background: var(--sep); transform: scaleY(0.5); transform-origin: 0 0;
}
.ui-row.has-lead { --sep-left: 56px; }
.ui-row.has-dot { --sep-left: 36px; }
.ui-press { cursor: pointer; }
.ui-press:active { background-color: var(--cell-2); transition: none; }
@media (hover: hover) { .ui-press:hover { background-color: var(--fill-2); } }
.ui-press:disabled { cursor: default; background-color: transparent; }

.ui-cell-lead { flex: none; display: grid; place-items: center; color: var(--label); }
.ui-cell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-cell-label { font: var(--t-body); letter-spacing: var(--tr-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cell-sec {
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-cell-value { flex: none; text-align: right; white-space: nowrap; font: var(--t-body); letter-spacing: var(--tr-body); color: var(--label); font-variant-numeric: tabular-nums; }
.ui-chev { width: var(--icon-chevron); height: var(--icon-chevron); flex: none; stroke-width: 2.4; color: var(--label-3); margin-right: -7px; }
.ui-dot {
  flex: none; width: var(--dot); height: var(--dot);
  border-radius: var(--radius-full);
  background: var(--dot-color, var(--label-3));
}

/* account row: 60 pt, value + grey change stacked on the right */
.ui-acc { min-height: var(--row-acc); padding-top: 8px; padding-bottom: 8px; }
.ui-acc-mini { flex: none; width: var(--viz-spark-w); height: var(--viz-spark-h); display: block; }
.ui-acc-mini > * { width: 100%; height: 100%; display: block; }
.ui-acc-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-acc-value { font: var(--t-body); letter-spacing: var(--tr-body); color: var(--label); }
.ui-acc-delta { font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2); }
.ui-acc-delta .zero, .ui-acc-delta.zero { color: var(--label-2); }

/* index cell (Analysis): two lines, 64 pt, chevron */
.ui-finding { min-height: var(--row-index); padding-top: 10px; padding-bottom: 10px; }
.ui-finding-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ui-finding-mini { flex: none; width: 56px; height: 28px; display: block; }
.ui-finding-mini > * { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- period control (Stocks range tabs)
   Plain labels; the selected one sits on a fill capsule that slides to it.
   No track, no glass, no dividers. */
.ui-seg {
  position: relative; display: inline-flex; align-items: center; gap: 2px;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.ui-seg-thumb {
  position: absolute; top: 0; left: 0; height: var(--capsule-sm-h); width: 0;
  border-radius: var(--radius-capsule); background: var(--fill);
  pointer-events: none;
}
.ui-seg.is-ready .ui-seg-thumb { transition: transform var(--dur-segment) var(--ease-sheet), width var(--dur-segment) var(--ease-sheet); }
.ui-seg-btn {
  position: relative; z-index: var(--z-content); flex: none;
  height: var(--capsule-sm-h); padding: 0 13px;
  border-radius: var(--radius-capsule);
  font: var(--t-secondary); font-weight: 600; letter-spacing: var(--tr-secondary);
  line-height: var(--capsule-sm-h); text-align: center; white-space: nowrap;
  color: var(--label-2);
  transition: color var(--dur-tab-out) var(--ease-linear);
}
.ui-seg-btn[aria-checked="true"] { color: var(--label); }
/* 44 px tall hit area around the 30 px capsule; the look is unchanged (r2-perf P3) */
.ui-seg-btn::before { content: ""; position: absolute; inset: -7px 0; }
.ui-seg-btn:active { opacity: 0.6; }
.ui-seg-btn:focus-visible { outline-offset: -2px; border-radius: var(--radius-capsule); }

/* ---------------------------------------------------------------- switch (iOS 26: 63 x 28 capsule, capsule knob) */
.ui-switch { position: relative; display: inline-block; flex: none; width: 63px; height: 28px; }
.ui-switch-input { position: absolute; inset: 0; z-index: var(--z-content); margin: 0; opacity: 0; cursor: pointer; }
.ui-switch-track {
  position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--fill-1);
  transition: background-color var(--dur-press-out) var(--ease-linear);
}
.ui-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 37px; height: 24px;
  border-radius: var(--radius-full); background: var(--label);
  transition: transform var(--dur-press-out) var(--ease-sheet);
}
.ui-switch-input:checked + .ui-switch-track { background: var(--pos); }
.ui-switch-input:checked + .ui-switch-track::after { transform: translateX(22px); }
.ui-switch-input:focus-visible + .ui-switch-track { outline: 2px solid var(--tint); outline-offset: 2px; }

/* ---------------------------------------------------------------- icon button (plain grey glyph in content) */
.ui-iconbtn {
  display: grid; place-items: center; flex: none;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--radius-full); color: var(--label-2);
  transition: opacity var(--dur-fade) var(--ease-linear), transform var(--dur-press-out) var(--ease-out);
}
.ui-iconbtn:active { opacity: 0.4; transition: none; }
.ui-iconbtn.ui-glassbtn { color: var(--label); }
.ui-iconbtn.glass:active { opacity: 1; }
.ui-iconbtn > .ui-ico { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-press-out) var(--ease-out); }
/* eye: the open and shut icons cross-fade */
.ui-eye .ui-ico--eye-off { opacity: 0; transform: scale(0.8); }
.ui-eye[aria-pressed="true"] .ui-ico--eye { opacity: 0; transform: scale(0.8); }
.ui-eye[aria-pressed="true"] .ui-ico--eye-off { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- capsule buttons */
.ui-capsule {
  display: inline-grid; place-items: center; flex: none;
  padding: 0 20px; border-radius: var(--radius-capsule);
  white-space: nowrap; text-align: center;
  transition: transform var(--dur-press-out) var(--ease-out), opacity var(--dur-fade) var(--ease-linear), background-color var(--dur-press-out) var(--ease-linear);
}
.ui-capsule:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.ui-capsule:disabled { opacity: var(--primary-disabled); cursor: default; transform: none; }
.ui-capsule--sm { height: var(--capsule-sm-h); padding: 0 12px; font: var(--t-secondary); font-weight: 600; letter-spacing: var(--tr-secondary); }
.ui-capsule--md { height: var(--control-h); font: var(--t-headline); letter-spacing: var(--tr-headline); }
.ui-capsule--lg { height: var(--button-h); padding: 0 24px; font: var(--t-headline); letter-spacing: var(--tr-headline); }
.ui-capsule--primary { background: var(--primary-bg); color: var(--on-primary); }
.ui-capsule--secondary { background: var(--fill); color: var(--label); }
.ui-capsule--secondary.is-destructive { color: var(--neg); }
/* the sm hit area grows to 44 pt without changing the drawn capsule */
.ui-capsule--sm { position: relative; }
.ui-capsule--sm::after { content: ""; position: absolute; inset: calc((var(--capsule-sm-h) - var(--tap-min)) / 2) 0; }

/* ---------------------------------------------------------------- scrub chip (glass capsule) */
.ui-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 10px 0 14px;
  border-radius: var(--radius-capsule);
  font: var(--t-secondary); font-weight: 600; letter-spacing: var(--tr-secondary); color: var(--label);
  animation: ui-chip-in var(--dur-tab-out) var(--ease-out) both;
}
.ui-chip .ui-chev { color: var(--label-2); margin-right: 0; }
@keyframes ui-chip-in { from { opacity: 0; transform: translateY(6px); } }

/* js/charts/fullscreen.mjs close button (its class is fixed): a glass circle */
.modal-fs .modal-fs__close {
  background-color: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-rim-shadow);
  color: var(--label);
  transition: transform var(--dur-press-out) var(--ease-out);
}
.modal-fs .modal-fs__close:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

/* ---------------------------------------------------------------- hero */
.ui-hero { padding: 20px var(--margin) 6px; }
.ui-hero-label {
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
}
.ui-hero-value {
  white-space: nowrap;
  font: var(--t-hero); letter-spacing: var(--tr-hero); font-variant-numeric: tabular-nums;
}
.ui-hero--sheet { padding-top: 12px; }
.ui-hero--sheet .ui-hero-value { font: var(--t-hero-sheet); letter-spacing: var(--tr-hero); margin-top: 2px; }
.ui-hero.is-skeleton .ui-hero-label,
.ui-hero.is-skeleton .ui-hero-value { color: transparent; }
.ui-hero.is-skeleton .ui-hero-value,
.ui-hero.is-skeleton .ui-hero-label:not(.ui-vh) {
  background: var(--fill-2); border-radius: var(--radius-xs);
  transform: scaleY(0.6); transform-origin: 0 50%;
  animation: ui-pulse calc(var(--dur-entry) * 3) var(--ease-linear) infinite;
}
.ui-hero.is-skeleton .ui-hero-value { width: 60%; }
.ui-hero.is-skeleton .ui-hero-label { width: 30%; }
@media (min-width: 1024px) { .ui-hero:not(.ui-hero--sheet) .ui-hero-value { font: var(--t-hero-desktop); letter-spacing: var(--tr-hero); } }

/* ---------------------------------------------------------------- change line */
.ui-change { padding: 0 var(--margin); }
/* both lines wrap (N20); changeLine() reserves the height so scrubbing never moves the chart */
.ui-change-main {
  min-height: 22px; overflow-wrap: break-word;
  font: var(--t-body); letter-spacing: var(--tr-body); color: var(--label-2);
}
.ui-change-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-change-total.zero { color: var(--label); }
.ui-change-frame, .ui-change-prov { color: var(--label-2); }
.ui-change-split {
  min-height: 20px; padding-top: 2px; overflow-wrap: break-word;
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
}
.ui-change-split::first-letter { text-transform: capitalize; }
.ui-change-part { white-space: nowrap; }
.ui-change-split .ui-amt { color: var(--label-2); font-variant-numeric: tabular-nums; }
/* the signed parts (you added, markets) show their own gain or loss colour */
.ui-change-split .ui-amt.pos { color: var(--pos); }
.ui-change-split .ui-amt.neg { color: var(--neg); }
body.is-masked .ui-change-split .ui-amt:is(.pos, .neg) { color: var(--label-2); }

/* ---------------------------------------------------------------- month card: one 52 pt row */
.ui-month {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: calc(100% - 2 * var(--margin)); min-height: var(--row-min); padding: 0 var(--cell-pad-x);
  text-align: left; color: var(--label);
  font: var(--t-body); letter-spacing: var(--tr-body);
  transition: background-color var(--dur-press-out) var(--ease-linear);
}
.ui-month-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-month-detail {
  flex: none; display: flex; align-items: center; gap: 8px;
  color: var(--label-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ui-month-detail .ui-chev { margin-right: -7px; }
.ui-month[data-state="loading"] { opacity: 0.5; }

/* ---------------------------------------------------------------- ring and progress (flat, white on fill) */
.ui-ring { flex: none; transform: rotate(-90deg); }
.ui-ring circle { fill: none; stroke-width: 3.5; }
.ui-ring-track { stroke: var(--fill); }
.ui-ring-val {
  stroke: var(--label); stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-entry) var(--ease-out);
}

.ui-pbar { height: 4px; overflow: hidden; border-radius: var(--radius-full); background: var(--fill); }
.ui-pbar-fill {
  display: block; height: 100%; border-radius: var(--radius-full); background: var(--label);
  transform-origin: 0 50%; transition: transform var(--dur-segment) var(--ease-out);
}

/* ---------------------------------------------------------------- action bar: flat band at the foot of a sheet */
.ui-actionbar {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  padding-bottom: var(--sb);
  background: var(--material);
  -webkit-backdrop-filter: var(--glass-filter-thick); backdrop-filter: var(--glass-filter-thick);
}
.ui-actionbar-inner {
  position: relative; display: flex; align-items: center; gap: 14px;
  max-width: 712px; margin: 0 auto; padding: 10px var(--margin);
}
.ui-actionbar-lead { flex: 1; min-width: 0; font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2); }
.ui-btn-primary { position: relative; min-width: 148px; }
.ui-btn-primary > * { grid-area: 1 / 1; transition: opacity var(--dur-tab-out) var(--ease-linear), transform var(--dur-tween) var(--ease-out); }
.ui-btn-primary .ui-spinner, .ui-btn-primary .ui-btn-check { opacity: 0; transform: scale(0.6); }
.ui-btn-check { width: 22px; height: 22px; stroke-width: 2.6; }
.ui-spinner { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ui-spinner circle { stroke-dasharray: 42 100; }
.ui-actionbar[data-state="busy"] .ui-btn-label,
.ui-actionbar[data-state="done"] .ui-btn-label { opacity: 0; transform: scale(0.9); }
/* a spinner keeps turning under reduced motion (it is the only sign of work), at a fixed speed */
.ui-actionbar[data-state="busy"] .ui-spinner { opacity: 1; transform: none; animation: ui-spin 0.8s linear infinite; transform-origin: 50% 50%; will-change: transform; }
.ui-actionbar[data-state="busy"] .ui-btn-primary:disabled { opacity: 1; }
.ui-actionbar[data-state="done"] .ui-btn-check { opacity: 1; transform: none; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- text blocks */
.ui-footnote {
  margin: 12px var(--margin) 0;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
}
.ui-empty { padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ui-empty-title { font: var(--t-headline); letter-spacing: var(--tr-headline); }
.ui-empty-body { font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2); max-width: 32em; }
.ui-empty .ui-capsule { margin-top: 10px; }

.ui-skel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.ui-skel-line {
  display: block; height: 14px; border-radius: var(--radius-xs); background: var(--fill-2);
  animation: ui-pulse calc(var(--dur-entry) * 3) var(--ease-linear) infinite;
}
.ui-skel-line:nth-child(3n + 1) { width: 72%; }
.ui-skel-line:nth-child(3n + 2) { width: 48%; }
.ui-skel-line:nth-child(3n + 3) { width: 60%; }
@keyframes ui-pulse { 50% { opacity: 0.45; } }

/* ---------------------------------------------------------------- inline setup cell: capsule fields, no ring */
.ui-setup { flex-wrap: wrap; row-gap: 8px; }
.ui-setup > .ui-cell-label { flex: 1 1 auto; }
.ui-setup-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.ui-field {
  display: flex; align-items: center; gap: 4px;
  height: 36px; padding: 0 14px; min-width: 120px;
  background: var(--fill); border-radius: var(--radius-capsule);
}
.ui-field-label { font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2); white-space: nowrap; }
.ui-field-input {
  flex: 1; min-width: 0; width: 6em; padding: 0; border: 0; outline: 0; background: none;
  color: var(--label); caret-color: var(--tint); text-align: right;
  font: var(--t-body); letter-spacing: var(--tr-body); font-variant-numeric: tabular-nums;
}
.ui-field-input::placeholder { color: var(--label-3); }
.ui-field-suffix { color: var(--label-2); }