/* shell.css: v2 app chrome, mockup "stocks". Floating glass tab bar
   (iPhone) / flat sidebar panel (>= 1024 px), tab panes, push-stack pages,
   the iOS 26 nav bar (no bar at rest, glass circle + capsule, solid scroll
   band without a line), the stub screens, and the shared widgets the shell
   owns (key modal, toast, pull-to-refresh, loading bar). Colours, type,
   radii, durations and layers come from tokens.css only. Flat fills, no
   shadows. */

/* ---------------------------------------------------------------- stage */
.v2-app {
  /* normal flow, not fixed: iOS clips a fixed root to the short viewport it
     reports at launch in an installed app */
  position: relative;
  width: 100%;
  height: var(--app-h);
  overflow: hidden;
  background: var(--bg);
  color: var(--label);
  font: var(--t-body);
  letter-spacing: var(--tr-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.v2-panes { position: absolute; inset: 0; }
.v2-tabpane { position: absolute; inset: 0; overflow: hidden; }
.v2-tabpane[hidden], .v2-page[hidden] { display: none; }

/* ---------------------------------------------------------------- pages */
.v2-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}
.v2-tabpane.is-swiping .v2-page { will-change: transform; }
.v2-page__scroller {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-top: calc(var(--st) + var(--navbar-h));
  padding-left: var(--sl);
  padding-right: var(--sr);
}
/* a tab root: the large title shares the row with the glass capsule (Stocks) */
.v2-page.is-root > .v2-page__scroller { padding-top: calc(var(--st) + 4px); }
.v2-page__dim {
  position: absolute;
  inset: 0;
  z-index: var(--z-sticky);
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- nav bar
   No bar at rest. Once content scrolls under it, a solid band (88 % black +
   blur, no hairline) fades in with the centred inline title. The back
   button is a glass circle; the trailing actions share one glass capsule. */
.v2-navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  height: calc(var(--st) + var(--navbar-h));
  pointer-events: none;
}
.v2-navbar__bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: calc(-1 * var(--navbar-band-extra));
  background-color: var(--glass-tint-bar);
  -webkit-backdrop-filter: blur(var(--glass-blur-thick));
  backdrop-filter: blur(var(--glass-blur-thick));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-tab-out) var(--ease-linear), visibility 0s linear var(--dur-tab-out);
}
.v2-navbar.is-scrolled .v2-navbar__bg {
  visibility: visible;
  transition: opacity var(--dur-tab-out) var(--ease-linear), visibility 0s;
}
.v2-navbar__row {
  position: absolute;
  left: var(--sl); right: var(--sr); bottom: 0;
  height: var(--navbar-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 var(--margin);
}
.v2-navbar__title {
  font: var(--t-headline);
  letter-spacing: var(--tr-headline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-tab-out) var(--ease-linear), transform var(--dur-tab-in) var(--ease-out);
}
.v2-navbar.is-scrolled .v2-navbar__bg,
.v2-navbar.is-scrolled .v2-navbar__title,
.v2-navbar.is-compact .v2-navbar__title { opacity: 1; transform: none; }
.v2-navbar__leading { justify-self: start; min-width: 0; display: flex; }
.v2-navbar__trailing {
  position: relative; justify-self: end;
  display: flex; align-items: center;
  height: var(--control-h);
  border-radius: var(--radius-capsule);
  pointer-events: auto;
}
.v2-navbar__trailing:empty { display: none; }
.v2-navbar__trailing > .ui-iconbtn,
.v2-navbar__trailing > .v2-shell-iconbtn { width: var(--glass-item-w); height: var(--control-h); color: var(--label); }
.v2-navbar__trailing > :only-child { width: var(--control-h); }
.v2-navbar__trailing .ui-ico,
.v2-navbar__trailing .v2-shell-ico { width: 21px; height: 21px; }
.v2-navbar__back {
  position: relative;
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius-full);
  color: var(--label);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press-out) var(--ease-out);
}
.v2-navbar__back:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.v2-navbar__back svg { flex: none; width: 22px; height: 22px; }
/* the previous page's title is spoken (aria-label), not drawn: iOS 26 back is a bare chevron */
.v2-navbar__back-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* fallback widgets used while js/v2/ui/* is missing */
.v2-shell-iconbtn {
  pointer-events: auto;
  width: var(--tap-min); height: var(--tap-min);
  display: grid; place-items: center;
  padding: 0; margin: 0; border: 0; background: none;
  color: var(--label);
  border-radius: var(--radius-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.v2-shell-iconbtn:active { opacity: 0.4; }
.v2-shell-ico {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------- large title
   Stocks: the place in white, its frame (the date) as a grey second line at
   the same size; an optional small grey subtitle (sync state) under it. */
.v2-largetitle {
  padding: 0 var(--margin) 6px;
  transform-origin: 0 50%;
}
.v2-largetitle__title {
  margin: 0;
  font: var(--t-large-title);
  letter-spacing: var(--tr-large-title);
}
.v2-largetitle__text { display: block; }
.v2-page.is-root .v2-largetitle__text { margin-right: calc(2 * var(--glass-item-w) + 8px); }
.v2-largetitle__detail { display: block; color: var(--label-2); }
.v2-largetitle__subtitle {
  margin: 2px 0 0;
  font: var(--t-secondary);
  letter-spacing: var(--tr-secondary);
  color: var(--label-2);
}

/* ---------------------------------------------------------------- tab bar (iPhone): floating glass capsule, 212 x 62 */
.v2-tabbar {
  position: absolute;
  left: 50%;
  bottom: var(--tabbar-inset);
  z-index: var(--z-tabbar);
  width: min(calc(100% - 2 * var(--margin) - var(--sl) - var(--sr)), calc(var(--n, 2) * var(--tabbar-item-w) + 8px));
  height: var(--tabbar-h);
  padding: 4px;
  box-sizing: border-box;
  border-radius: var(--radius-capsule);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  transition: transform var(--dur-sheet) var(--ease-sheet);
}
/* Scrolling down shrinks the bar into a smaller capsule, icons only, as the
   iOS 26 tab bar does; scrolling up, reaching the top or tapping it brings
   it back (js/v2/shell/navbar.mjs sets html.v2-tabbar-min). */
html.v2-tabbar-min .v2-tabbar { transform: translateX(-50%) translateY(6px) scale(0.8); }
.v2-tab__label { transition: opacity var(--dur-fade) var(--ease-linear); }
html.v2-tabbar-min .v2-tab__label { opacity: 0; }
html.v2-tabbar-min .v2-tab__icon { transform: translateY(7px) scale(1.12); }
/* Clear liquid glass (iOS 26 "Clear"): almost no tint or frost, the
   content shows through; a bright rim and a light sheen draw the capsule,
   and a soft shadow under the glyphs keeps them readable on any content.
   Reduced transparency or increased contrast fall back to the solid glass. */
:root {
  --lg-clear-tint: rgba(255, 255, 255, 0.04);
  --lg-clear-filter: blur(1.5px) saturate(180%) brightness(1.06);
  --lg-clear-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.07) 100%);
  --lg-clear-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.14),
    inset -1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 0 18px rgba(255, 255, 255, 0.05),
    0 6px 22px rgba(0, 0, 0, 0.28);
  --lg-clear-ink-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 8px rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --lg-clear-tint: var(--glass-tint-strong);
    --lg-clear-filter: var(--glass-filter);
    --lg-clear-sheen: none;
    --lg-clear-shadow: var(--glass-rim-shadow);
    --lg-clear-ink-shadow: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --lg-clear-tint: var(--glass-tint-strong); --lg-clear-sheen: none; --lg-clear-ink-shadow: none; }
}
.v2-tabbar__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--lg-clear-tint);
  background-image: var(--lg-clear-sheen);
  -webkit-backdrop-filter: var(--lg-clear-filter);
  backdrop-filter: var(--lg-clear-filter);
  box-shadow: var(--lg-clear-shadow);
}
.v2-tab { text-shadow: var(--lg-clear-ink-shadow); }
.v2-tab__icon svg { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55)); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .v2-tab__icon svg { filter: none; }
}
.v2-tabbar__brand, .v2-tabbar__sub, .v2-tabbar__footer { display: none; }
.v2-tabbar__tabs { position: relative; display: flex; height: 100%; }
.v2-tabbar__group { position: relative; flex: 1; display: flex; }
.v2-tabbar__lens {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(100% / var(--n, 2));
  border-radius: var(--radius-capsule);
  background-color: var(--glass-lens);
  box-shadow: var(--lg-lens-shadow, none);
  translate: calc(var(--i, 0) * 100%) 0;
  pointer-events: none;
}
.v2-tabbar.is-ready .v2-tabbar__lens { transition: translate var(--dur-segment) var(--ease-sheet), scale var(--dur-segment) var(--ease-out); }
/* while it slides, the pill stretches like a drop of liquid, then settles */
.v2-tabbar.is-morph .v2-tabbar__lens { scale: 1.14 0.9; }
.v2-tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-capsule);
  color: var(--label-2);
  text-decoration: none;
  font: var(--t-tab);
  letter-spacing: var(--tr-tab);
  transition: color var(--dur-tab-out) var(--ease-linear);
  -webkit-tap-highlight-color: transparent;
}
.v2-tab.is-active { color: var(--label); }
.v2-tab__icon { display: grid; place-items: center; transition: transform var(--dur-tab-in) var(--ease-out); }
.v2-tab__icon svg { width: var(--icon-tab); height: var(--icon-tab); }
.v2-tab:active .v2-tab__icon { transform: scale(0.9); transition: none; }
html.v2-tabbar-min .v2-tab:active .v2-tab__icon { transform: translateY(7px) scale(1); }
.v2-tab:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }

/* ---------------------------------------------------------------- desktop (>= 1024 px) */
@media (min-width: 1024px) {
  /* sidebar: a flat #1c1c1e panel, radius 26, 8 px from the window edges */
  .v2-tabbar {
    top: calc(var(--st) + var(--float-inset));
    left: calc(var(--sl) + var(--float-inset));
    bottom: var(--float-inset);
    width: var(--sidebar-panel-w);
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 20px 12px 24px;
    border-radius: var(--radius-panel);
    transform: none;
    overflow-y: auto;
  }
  html.v2-tabbar-min .v2-tabbar { transform: none; }
  html.v2-tabbar-min .v2-tab__label { opacity: 1; }
  html.v2-tabbar-min .v2-tab__icon { transform: none; }
  html.v2-tabbar-min .v2-tab:active .v2-tab__icon { transform: scale(0.9); }
  .v2-tabbar__bg {
    background: var(--cell);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .v2-tab { text-shadow: none; }
  .v2-tab__icon svg { filter: none; }
  .v2-tabbar__lens { display: none; }
  .v2-tabbar__brand {
    display: block;
    position: relative;
    padding: 4px 12px 18px;
    font: var(--t-headline);
    letter-spacing: var(--tr-headline);
  }
  .v2-tabbar__tabs { flex-direction: column; height: auto; gap: 0; }
  .v2-tabbar__group { flex: none; flex-direction: column; }
  .v2-tab {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--label);
    font: var(--t-body);
    letter-spacing: var(--tr-body);
    transition: background-color var(--dur-tab-out) var(--ease-linear);
  }
  .v2-tab__icon { color: var(--label-2); }
  .v2-tab__icon svg { width: var(--icon-sidebar); height: var(--icon-sidebar); }
  .v2-tab.is-active { background-color: var(--cell-2); color: var(--label); }
  .v2-tab.is-active .v2-tab__icon { color: var(--label); }
  .v2-tab:hover:not(.is-active) { background: var(--fill-2); }
  .v2-tabbar__sub:not([hidden]) { display: flex; flex-direction: column; padding: 0 0 4px; }
  .v2-tabbar__subitem {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px 0 46px;
    border-radius: var(--radius-sm);
    color: var(--label-2);
    text-decoration: none;
    font: var(--t-secondary);
    letter-spacing: var(--tr-secondary);
  }
  .v2-tabbar__subitem:hover { background: var(--fill-2); color: var(--label); }
  .v2-tabbar__subitem.is-current { background: var(--cell-2); color: var(--label); }
  .v2-tabbar__footer { display: block; position: relative; margin-top: auto; padding: var(--margin) 12px 0; }
  .v2-tabbar__footer:empty { display: none; }
  /* Update the month: one fill capsule at the foot of the sidebar */
  .v2-closebtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: var(--capsule-md-h);
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-capsule);
    background: var(--fill);
    color: var(--label);
    font: var(--t-secondary);
    font-weight: 600;
    letter-spacing: var(--tr-secondary);
    cursor: pointer;
    transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-tab-out) var(--ease-linear);
  }
  .v2-closebtn:hover { background: var(--fill-1); }
  .v2-closebtn:active { transform: scale(var(--press-scale)); }
  .v2-closebtn:focus-visible { outline: var(--focus-ring) solid var(--tint); outline-offset: var(--focus-ring); }
  .v2-closebtn__lead { display: none; }
  .v2-closebtn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v2-closebtn__count { flex: none; color: var(--label-2); font-weight: 400; font-variant-numeric: tabular-nums; }
  .v2-closebtn__count:empty { display: none; }

  .v2-panes { left: var(--sidebar-w); }
  .v2-largetitle,
  .v2-page__content {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  /* desktop nav: the capsule 28 px from the top; the title and its date on one line */
  .v2-navbar { height: calc(var(--st) + var(--navbar-h) + var(--desk-nav-top)); }
  .v2-navbar__row { bottom: auto; top: calc(var(--st) + var(--desk-nav-top)); }
  .v2-page__scroller { padding-top: calc(var(--st) + var(--navbar-h) + var(--desk-nav-top) + 8px); }
  .v2-page.is-root > .v2-page__scroller { padding-top: calc(var(--st) + var(--desk-nav-top) + 2px); }
  .v2-largetitle__text { display: inline; }
  .v2-page.is-root .v2-largetitle__text { margin-right: 0; }
  .v2-largetitle__detail { display: inline; }
  .v2-largetitle__detail::before { content: " "; }
  .v2-largetitle__title { padding-right: calc(2 * var(--glass-item-w) + 16px); }
}

.v2-shell-empty {
  padding: var(--gap-group) var(--margin) var(--content-bottom);
  text-align: center;
  color: var(--label-2);
}

/* ---------------------------------------------------------------- toast (js/v2/ui/toast.mjs on #toast): glass capsule above the tab bar */
#toast, .ui-toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--tabbar-inset) + 12px);
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: 12px;
  width: max-content;
  max-width: calc(100% - var(--margin) * 2);
  min-height: var(--capsule-sm-h);
  box-sizing: border-box;
  padding: 11px 18px;
  border-radius: var(--radius-capsule);
  background-color: var(--glass-tint-strong);
  background-image: var(--lg-sheen);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-shadow);
  color: var(--label);
  font: var(--t-secondary);
  letter-spacing: var(--tr-secondary);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity var(--dur-fade) var(--ease-linear), transform var(--dur-tween) var(--ease-out);
}
#toast:empty { display: none; }
#toast.toast--show { opacity: 1; transform: translate(-50%, 0); }
#toast.toast--show:has(.ui-toast-action) { pointer-events: auto; }
#toast:has(.ui-toast-action) { padding: 6px 6px 6px 18px; text-align: left; }
.ui-toast-text { min-width: 0; overflow-wrap: anywhere; }
.ui-toast-action { flex: none; }
#toast[data-kind='error'] .ui-toast-text, #toast[data-kind='error']:not(:has(.ui-toast-text)) { color: var(--neg); }
/* a sheet covers the tab bar: the toast sits just above the home indicator */
body.ui-sheet-open #toast { bottom: calc(var(--sb) + 16px); }
@media (min-width: 1024px) {
  #toast { left: calc(50% + var(--sidebar-w) / 2); bottom: var(--gap-group); }
  body.ui-sheet-open #toast { bottom: var(--gap-group); }
}
@media (prefers-reduced-motion: reduce) {
  #toast { transform: translate(-50%, 0); }
  .v2-tabbar, .v2-tab__label, .v2-tab__icon { transition: none; }
  .v2-tabbar.is-morph .v2-tabbar__lens { scale: none; }
}

/* ---------------------------------------------------------------- loading bar: the nav-bar subtitle shows sync state instead */
#loading-bar { display: none; }

/* ---------------------------------------------------------------- pull-to-refresh (js/pull-refresh.mjs) */
.ptr-indicator {
  position: absolute;
  left: 50%;
  top: calc(var(--st) + 4px);
  z-index: var(--z-toast);
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin);
  box-shadow: var(--glass-rim-shadow);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 8px));
  transition: opacity var(--dur-fade) var(--ease-linear);
}
.ptr-indicator--visible { opacity: 1; }
.ptr-indicator__arrow {
  width: 8px; height: 8px;
  border-left: 2px solid var(--label-2);
  border-bottom: 2px solid var(--label-2);
  transform: translateY(-2px) rotate(-45deg);
  transition: transform var(--dur-tween) var(--ease-out), border-color var(--dur-fade) var(--ease-linear);
}
.ptr-indicator--ready .ptr-indicator__arrow {
  border-color: var(--label);
  transform: translateY(2px) rotate(135deg);
}
.ptr-indicator--spin .ptr-indicator__arrow {
  width: 14px; height: 14px;
  border: 2px solid var(--label-4);
  border-top-color: var(--label);
  border-radius: var(--radius-full);
  transform: none;
  animation: v2-ptr-spin 0.8s linear infinite;
}
@keyframes v2-ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ptr-indicator__arrow { transition: none; animation: none; }
}

/* ---------------------------------------------------------------- API key modal (js/key-modal.mjs) */
.key-modal__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-sheet);
  display: grid;
  place-items: center;
  padding: var(--margin);
  background: var(--scrim);
}
.key-modal__card {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 22px var(--cell-pad-x) var(--cell-pad-x);
  border-radius: var(--radius-panel);
  background: var(--cell);
  color: var(--label);
}
.key-modal__card h2 {
  margin: 0 0 6px;
  font: var(--t-headline);
  letter-spacing: var(--tr-headline);
}
.key-modal__card .muted {
  margin: 0 0 var(--cell-pad-x);
  font: var(--t-secondary);
  letter-spacing: var(--tr-secondary);
  color: var(--label-2);
}
.key-modal__field { display: flex; gap: 8px; align-items: center; }
.key-modal__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap-min);
  box-sizing: border-box;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-capsule);
  background: var(--fill);
  color: var(--label);
  caret-color: var(--tint);
  font: var(--t-body);
  letter-spacing: var(--tr-body);
}
.key-modal__input:focus { outline: none; }
.key-modal__card .btn {
  min-height: var(--tap-min);
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-capsule);
  background: var(--fill);
  color: var(--label);
  font: var(--t-secondary);
  font-weight: 600;
  letter-spacing: var(--tr-secondary);
  cursor: pointer;
}
.key-modal__card .btn--primary {
  padding: 0 22px;
  background: var(--primary-bg);
  color: var(--on-primary);
  font: var(--t-headline);
  letter-spacing: var(--tr-headline);
}
.key-modal__card .btn:disabled { opacity: var(--primary-disabled); }
.key-modal__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  margin-top: 6px;
  font: var(--t-secondary);
  letter-spacing: var(--tr-secondary);
  color: var(--label-2);
}
.key-modal__remember input { accent-color: var(--pos); width: 20px; height: 20px; margin: 0; }
.key-modal__error {
  margin: 6px 0 0;
  font: var(--t-footnote);
  letter-spacing: var(--tr-footnote);
  color: var(--neg);
}
.key-modal__actions { display: flex; justify-content: flex-end; margin-top: var(--cell-pad-x); }

/* ---------------------------------------------------------------- Enter values
   The sidebar footer button (shell/closebutton.mjs): a '+' glyph before
   "Enter values", the same action as the '+' in the Wealth nav-bar capsule. */
@media (min-width: 1024px) {
  .v2-closebtn { min-height: var(--tap-min); }
  .v2-closebtn__lead { display: grid; place-items: center; flex: none; }
  .v2-closebtn__lead .ui-ico { width: 18px; height: 18px; }
  .v2-closebtn__label { flex: none; }
  .v2-closebtn__count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}