/* The Stock Forge — shared dashboard theme (login, app shell, billing, admin).
   "Forge" identity: dark steel base, molten-ember accent, steel-blue for links.
   Core palette + scales: /shared/tokens.css (linked in every shell). */
:root {
  /* Dashboard semantic layer */
  --surface-radius: var(--radius-xl);
  --card-radius: var(--radius-lg);
  --control-radius: var(--radius-md);
  --control-pad-y: 11px;
  --control-pad-x: 18px;
  --elevation: var(--shadow);
  --focus-outline: var(--ember);
  --focus-offset: 2px;
  --focus-radius: 6px;
  --focus-ring-shadow: 0 0 0 3px rgba(255, 122, 24, .20);
  --content-max: 1440px;
  --radius: var(--surface-radius);
  /* Dashboard-only breakpoints (literal px in @media, not var()) */
  --bp-dash-nav: 1480px;
  --bp-table-cards: 1301px;
  /* Measured header.top bar height (14px pad + ~34px content + 14px pad) — wheel subnav sticky offset. */
  --dash-header-height: 62px;
  /* Wheel toolbar panel height — refined at runtime by wheel/core.js when subnav mounts. */
  --wheel-subnav-height: 58px;
  /* Combined-book exposure hues — ONE palette for sector column, Sector filter,
     Sector/Portfolio fund cards, and ticker chips (thresholds differ; hues match). */
  --exp-light-green: color-mix(in srgb, var(--good-bright, var(--good)) 58%, white 42%);
  --exp-green: var(--good);
  --exp-heating: color-mix(in srgb, var(--warn) 40%, var(--bad) 60%);
  --exp-alert: var(--bad);
  /* Chip-only maroon chrome for >20% ticker weight (text still --exp-alert). */
  --exp-critical-chrome: #7f1d1d;
  --exp-critical-fill: rgba(69, 10, 10, 0.55);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1100px 640px at 78% -12%, var(--bg-gradient-accent) 0%, transparent 60%),
    radial-gradient(1200px 700px at 10% 0%, var(--bg-gradient-mid) 0%, var(--bg) 55%);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}
a { color: var(--steel); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Anchor styled as a secondary (ghost) button — matches button.ghost height so it
   sits inline next to a primary <button> (e.g. "Analyze  or  Revisit My reports"). */
a.btn-ghost {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: var(--control-pad-y) var(--control-pad-x); border-radius: var(--control-radius); font-weight: 700; white-space: nowrap;
  transition: transform var(--dur-fast) ease, border-color var(--dur) ease, color var(--dur) ease,
    background var(--dur) ease, box-shadow var(--dur) ease;
}
a.btn-ghost:hover {
  border-color: var(--accent); color: var(--text); background: var(--panel); text-decoration: none;
  box-shadow: 0 4px 18px rgba(255, 122, 24, .22), 0 0 0 1px rgba(255, 122, 24, .14);
}
a.btn-ghost:active { transform: translateY(1px); }
a.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.btn-primary {
  display: inline-block; font-weight: 700; padding: var(--control-pad-y) var(--control-pad-x); border-radius: var(--control-radius);
  background: linear-gradient(135deg, var(--ember), var(--accent-2)); color: var(--on-accent);
  text-decoration: none; text-align: center;
  transition: transform var(--dur-fast) ease, filter var(--dur) ease, box-shadow var(--dur) ease;
}
a.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(255, 122, 24, .28); text-decoration: none; }
a.btn-primary:active { transform: translateY(1px); }
a.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "or" separator between the two primary choices. */
.or-sep { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
h1, h2, h3 { margin: 0 0 var(--space-lg); }

/* Accessibility: visible keyboard focus + skip link. */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 6px; }
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 999;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  padding: var(--space-md) var(--space-lg-plus); border-radius: var(--control-radius);
}
.skip-link:focus { left: 12px; }

/* Brand logo mark (replaces the old gradient dot). */
.logo-mark { width: 26px; height: 26px; display: inline-block; flex: 0 0 auto;
  filter: drop-shadow(0 0 10px rgba(255, 122, 24, .45)); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hidden { display: none !important; }
.center { text-align: center; }
.row { display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

/* Inputs + buttons */
input, select, textarea {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: var(--control-pad-y) var(--space-lg-plus); border-radius: var(--control-radius); font: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 24, .20);
}
/* Drop the OS-native number spinner arrows everywhere — they ignore our theme and
   we never want a system stepper. Values are still typed/validated normally. The
   only arrows in the UI are our own custom-select caret (.cs-caret). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* Unified label → field rhythm across every form (login, reset, settings,
   wheel modals): the label sits 6px above its input, and each field group is
   separated from the next by 12px — whether the group is a .field wrapper or a
   row inside a .grid form (those forms use gap:12px to match). */
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 var(--space-xs); }
.field { margin-bottom: var(--space-lg); }
/* Two label/field layouts exist:
   1) sibling — <div class="field"><label/>…<input/></div>: the label's 6px
      bottom margin creates the gap.
   2) nested — <label>Text <input|select/></label> (wheel settings + all modals):
      there the label's bottom margin sits below the whole group, so it never
      separates the text from the control. Give nested controls the same 6px top
      gap so both layouts read identically. (Filter bars keep label + control as
      siblings, so this direct-child rule doesn't touch them.) */
label > input:not([type="checkbox"]):not([type="radio"]),
label > select,
label > textarea,
label > .cs { margin-top: var(--space-xs); }
button {
  background: linear-gradient(135deg, var(--ember), var(--accent-2)); color: var(--on-accent); border: 0;
  padding: var(--control-pad-y) var(--control-pad-x); border-radius: var(--control-radius); font-weight: 700; cursor: pointer;
  transition: transform var(--dur-fast) ease, filter var(--dur) ease, box-shadow var(--dur) ease;
}
button:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(255, 122, 24, .28); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
button.ghost {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); box-shadow: none;
  transition: transform var(--dur-fast) ease, border-color var(--dur) ease, background var(--dur) ease,
    box-shadow var(--dur) ease, color var(--dur) ease;
}
button.ghost:hover {
  border-color: var(--accent); background: var(--panel);
  box-shadow: 0 4px 18px rgba(255, 122, 24, .22), 0 0 0 1px rgba(255, 122, 24, .14);
}
button.ghost:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(255, 122, 24, .16); }
button.danger { background: linear-gradient(135deg, var(--bad), var(--danger-strong-end)); color: #fff; }
button.small { padding: 7px 12px; font-size: 13px; }
.brand { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; letter-spacing: -.2px; }
.brand .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ember), var(--accent-2));
  box-shadow: 0 0 14px var(--accent);
}

/* Panels */
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-3xl); box-shadow: var(--shadow);
}
.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

/* Auth (login) layout */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .panel { padding: 28px; }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.tabs button {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.tabs button.active { background: linear-gradient(135deg, var(--ember), var(--accent-2)); color: var(--on-accent); }
.legal { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }
body.auth-popup .legal { display: none; }
body.auth-popup .auth-card { max-width: 400px; }

/* App shell */
header.top {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  padding: 14px 24px; position: sticky; top: 0; z-index: 30;
  background: var(--nav-backdrop); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
nav.tabs-main { display: flex; gap: 4px; flex-wrap: nowrap; flex-shrink: 1; min-width: 0; }
nav.tabs-main a {
  padding: 8px 14px; border-radius: var(--control-radius); color: var(--muted); font-weight: 600;
}
nav.tabs-main a.active { background: var(--panel-2); color: var(--text); }
.pill {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 6px 12px; font-size: 13px; font-weight: 600;
}
.pill.low { border-color: var(--warn); color: var(--warn); }
/* Header pills that double as nav (Balance -> Billing, email -> Account).
   Rounded-rectangle (10px) to match the nav tabs / buttons / bug icon — NOT the
   999px oval used by status pills elsewhere, so the whole header reads uniform. */
.nav-pill {
  border-radius: var(--control-radius);
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nav-pill:hover, .nav-pill:focus-visible {
  border-color: var(--accent); color: var(--text);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
  outline: none;
}
.nav-pill:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.nav-pill.active {
  border-color: var(--accent); color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
/* Pill-shaped header buttons (Sign out) — reset default button chrome so they
   match the <span> nav pills exactly (base `button` sets gradient bg + on-accent
   text + 0 border, all of which must be neutralized here). */
button.nav-pill {
  appearance: none; font: inherit; line-height: inherit;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); box-shadow: none; filter: none;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
}
button.nav-pill:hover, button.nav-pill:focus-visible {
  filter: none; box-shadow: none;
}
button.nav-pill:active { transform: translateY(1px); }
button.nav-pill:disabled { opacity: .5; cursor: not-allowed; transform: none; }
#userPill { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Header user-action cluster — pills + sign-out share one rhythm; bug icon stays special. */
.dash-header-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
/* Bug icon: drop the 44px touch-target minimum in the desktop bar and render it as
   a fixed square matching the pill height (13px text * 1.5 + 12px padding + 2px
   border ~= 34px) so it lines up with the pills instead of towering over them.
   Mobile drawer restores the full-width touch target below. */
.dash-header-actions .bug-report-btn {
  min-width: 0; min-height: 0; padding: 0;
  width: 34px; height: 34px; flex: 0 0 auto;
}
.wrap { max-width: 1440px; margin: 0 auto; padding: 24px; }
.dash-foot {
  max-width: 1440px; margin-left: auto; margin-right: auto;
  padding: 14px 24px; border-top: 1px solid var(--border);
}
body:has(#view-wheel-trade.active) .dash-foot { max-width: 1480px; }
.view { display: none; }
.view.active { display: block; }
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-2 .panel.panel-span-2 { grid-column: 1 / -1; }
.subscriptions-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.subscription-row {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--card-radius);
  background: var(--panel-2);
}
.subscription-row-included {
  border-style: dashed;
  background: color-mix(in srgb, var(--panel-2) 88%, var(--panel));
}
.subscription-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 120px; }
.subscription-price { display: block; margin: 4px 0 6px; }
.tabs-main a.nav-external .nav-ext { opacity: .75; font-size: .85em; margin-left: 2px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }
/* In forms, bottom-align cells so inputs stay on one line when a sibling label wraps. */
form .grid.cols-2, form .grid.cols-3 { align-items: end; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
tbody tr:hover { background: var(--panel-2); }

/* Badges + states */
.badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.badge.active { background: rgba(47, 191, 113, .16); color: var(--good); }
.badge.suspended { background: rgba(245, 166, 35, .16); color: var(--warn); }
.badge.banned { background: rgba(239, 69, 101, .16); color: var(--bad); }
.badge.admin { background: rgba(123, 97, 255, .18); color: var(--admin); }

/* Analysis verdict pills (My reports). Mirrors the scoring cutoffs 80/70/60:
   Good (green) > Selective (steel-blue) > Small size (amber) > Avoid (red);
   Insufficient data is a neutral outline. */
/* Verdict pill — the single color signal for a report row. Uniform min-width +
   centered text so the Decision column reads as a tidy, aligned stack of chips. */
.verdict {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  min-width: 84px; text-align: center;
}
.verdict-good { background: rgba(47, 191, 113, .16); color: var(--good); }
.verdict-selective { background: rgba(91, 140, 255, .16); color: var(--selective); }
.verdict-small { background: rgba(245, 166, 35, .16); color: var(--warn); }
.verdict-avoid { background: rgba(239, 69, 101, .16); color: var(--bad); }
.verdict-insufficient {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
}
/* Score is intentionally neutral: the verdict pill already carries the color
   signal, so we don't double-color the row (keeps the table calm + scannable). */
.score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }

/* News feed */
.news-feed { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.news-item {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
  background: var(--panel-2); transition: border-color .15s ease;
}
.news-item:hover { border-color: var(--accent); }
.news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.news-edition {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--accent);
}
.news-when { font-size: 12px; }
.news-headline { margin: 0 0 10px; font-size: 17px; line-height: 1.35; }
.news-tickers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ticker-chip {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
}
.news-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.news-link:hover { text-decoration: underline; }
/* Full brief body: preserve the post's line breaks (it uses \n, not <p>). */
.news-body { font-size: 14.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.news-body b, .news-body strong { font-weight: 700; }
.news-body a { color: var(--accent); text-decoration: none; }
.news-body a:hover { text-decoration: underline; }

/* Dashboard layout: analysis + market panels on the left, News widget on the right.
   The sidebar sticks below the sticky header and scrolls its own feed so a long
   news list never pushes the dashboard down. */
.dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 22px; align-items: start; }
.dash-main { min-width: 0; }
.dash-side { position: sticky; top: 84px; }
.news-widget { display: flex; flex-direction: column; max-height: calc(100vh - 108px); }
.news-widget-head { justify-content: space-between; align-items: center; gap: 10px; }
.news-widget-src { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.news-widget-src:hover { text-decoration: underline; }
/* The feed is the only scrolling region inside the widget (min-height:0 lets a
   flex child shrink so overflow actually kicks in). */
.news-widget-feed { margin-top: 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.news-widget-feed .news-item { padding: 14px; border-radius: var(--card-radius); }
.news-widget-feed .news-body { font-size: 13.5px; }
@media (max-width: 1200px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .news-widget { max-height: none; }
  .news-widget-feed { max-height: 70vh; }
}

.state { padding: 40px 20px; text-align: center; color: var(--muted); }
.spinner {
  width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Per-job progress bar (Analyze + batch rows) */
.pbar {
  position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--border);
  overflow: hidden; width: 100%;
}
.pbar > span {
  position: absolute; inset: 0 auto 0 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--ember));
  border-radius: var(--radius-pill); transition: width .45s ease;
}
.pbar.done > span { background: var(--good); }
.pbar.failed > span { background: var(--bad); }
/* Indeterminate shimmer until the first real percentage arrives */
.pbar.indet > span {
  width: 35% !important; animation: pbar-indet 1.1s ease-in-out infinite;
}
@keyframes pbar-indet { 0% { left: -35%; } 100% { left: 100%; } }
.track-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.track-row .track-main { flex: 1; min-width: 0; }
.track-row .track-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }

/* Tooltips (contextual help) */
.info {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; border: 1px solid var(--border); color: var(--muted); font-size: 11px;
  cursor: help; margin-left: 6px; position: relative;
  /* Match the .hint badges: center on the cap height instead of the baseline. */
  vertical-align: middle; top: -1px;
}
.info:hover, .info:focus-visible, .info.tip-on {
  color: var(--accent); border-color: var(--accent); outline: none;
}

/* Toasts */
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 13000; pointer-events: none; }
#toasts .toast { pointer-events: auto; }
.toast {
  background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--control-radius); padding: 12px 16px; box-shadow: var(--shadow); max-width: 360px;
  animation: slidein .2s ease;
}
.toast.error { border-left-color: var(--bad); }
.toast.success { border-left-color: var(--good); }
.toast.warn { border-left-color: var(--warn); }
.toast .req-id { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
@keyframes slidein { from { transform: translateY(8px); opacity: 0; } }

/* Banners */
.banner {
  border: 1px solid var(--border); border-radius: var(--card-radius); padding: 14px 18px; margin-bottom: 18px;
  display: flex; gap: 12px; align-items: center;
}
.banner.welcome { background: linear-gradient(135deg, rgba(255, 122, 24, .14), rgba(255, 61, 46, .10)); border-color: rgba(255, 122, 24, .35); }
.banner.warn { background: rgba(245, 166, 35, .12); border-color: var(--warn); }
.banner .close { margin-left: auto; cursor: pointer; color: var(--muted); background: none; border: 0; font-size: 18px; line-height: 1; padding: 0 var(--space-2xs); }
.banner-stack { margin-top: var(--space-sm); }
#opsAlertBanner { margin-top: var(--space-lg); }

/* ---- Contextual onboarding tours (spotlight coach-marks) ---- */
/* Root sits above modals (200) + wheel overlay (200) but below toasts (13000). */
#wfa-onboarding-root { position: fixed; inset: 0; z-index: 500; pointer-events: none; }
/* Transparent full-viewport catcher blocks background interaction while a tour
   is active (the background is also set inert for a11y). */
#wfa-onboarding-root .wfa-ob-catch { position: fixed; inset: 0; pointer-events: auto; }
/* The "ring" is a box positioned over the target; its huge box-shadow dims the
   rest of the viewport, leaving the target visually lit. Pointer-events none so
   it never intercepts (the catcher handles blocking). */
#wfa-onboarding-root .wfa-ob-ring {
  position: fixed; pointer-events: none; border-radius: var(--radius-sm);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(6, 9, 14, .68), 0 0 12px rgba(255, 122, 24, .55);
}
@media (prefers-reduced-motion: no-preference) {
  #wfa-onboarding-root .wfa-ob-ring { animation: wfaObPulse 1.8s ease-in-out infinite; }
}
@keyframes wfaObPulse {
  0%, 100% { border-color: var(--accent); }
  50% { border-color: var(--ember); }
}

.wfa-ob-card {
  position: fixed; z-index: 501; pointer-events: auto;
  max-width: 380px; width: calc(100vw - 32px);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  padding: 18px 18px 16px; color: var(--text);
}
.wfa-ob-card .wfa-ob-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
}
.wfa-ob-card .wfa-ob-count {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); margin-right: auto;
}
.wfa-ob-card .wfa-ob-x {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); min-width: 44px; min-height: 32px; padding: 4px 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.wfa-ob-card .wfa-ob-x:hover { border-color: var(--accent); }
.wfa-ob-card .wfa-ob-x:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.wfa-ob-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text); }
.wfa-ob-card .wfa-ob-body { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.wfa-ob-dots { display: flex; gap: 6px; margin: 0 0 14px; }
.wfa-ob-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--border); display: inline-block;
}
.wfa-ob-dots i.on { background: linear-gradient(135deg, var(--ember), var(--accent-2)); }
.wfa-ob-actions { display: flex; align-items: center; gap: 8px; }
.wfa-ob-actions .wfa-ob-skip {
  margin-right: auto; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); border-radius: var(--control-radius); min-height: 44px; padding: 0 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.wfa-ob-actions .wfa-ob-skip:hover { border-color: var(--accent); color: var(--text); }
.wfa-ob-actions button.wfa-ob-back {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--control-radius); min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.wfa-ob-actions button.wfa-ob-next {
  background: linear-gradient(135deg, var(--ember), var(--accent-2)); color: var(--on-accent);
  border: 0; border-radius: var(--control-radius); min-height: 44px; padding: 0 20px; font-size: 14px;
  font-weight: 700; cursor: pointer;
}
.wfa-ob-actions button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.wfa-ob-actions .wfa-ob-skip:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* Mobile: dock the card as a bottom sheet, keep tap targets large. */
@media (max-width: 768px) {
  .wfa-ob-card {
    left: 12px !important; right: 12px !important; bottom: 12px !important;
    top: auto !important; width: auto; max-width: none;
  }
}

/* Market sentiment panel (Analyze view) */
.market-sentiment .market-score-wrap { text-align: right; }
/* Close breadth is its own card now, so no top divider — just a little breathing
   room under the card heading. */
.market-breadth-section { margin-top: 8px; }
.market-subhead { font-size: 0.95rem; margin: 0 0 8px; }
.breadth-session-count { margin: 0 0 10px; font-style: italic; }
.breadth-table-wrap { overflow-x: auto; margin: 8px 0 12px; }
.breadth-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.breadth-table th, .breadth-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
tr.breadth-latest-session { background: rgba(47, 191, 113, 0.08); }
.breadth-align-split { color: var(--warn); }
.breadth-align-bear { color: var(--bad); }
.breadth-align-ok { color: var(--good); }
.breadth-align-neutral { color: var(--muted); }
.breadth-pct-up { color: var(--good); font-weight: 700; font-variant-numeric: tabular-nums; }
.breadth-pct-down { color: var(--bad); font-weight: 700; font-variant-numeric: tabular-nums; }
.market-breadth-subhead {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--text);
  letter-spacing: 0.01em;
}
.market-breadth-subhead:first-of-type { margin-top: 0; }
.market-score {
  font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.5px;
}
.market-regime { margin-top: 8px; display: inline-block; }
.market-regime.risk-off { border-color: var(--bad); color: #ff8fa3; }
.market-regime.neutral { border-color: var(--warn); color: var(--warn); }
.market-regime.risk-on { border-color: var(--good); color: var(--good); }
.market-score.risk-off { color: #ff8fa3; }
.market-score.neutral { color: var(--warn); }
.market-score.risk-on { color: var(--good); }
.market-plain { margin: 14px 0 12px; line-height: 1.55; }
.market-factors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.factor-chip {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 5px 11px; font-size: 12px; color: var(--muted);
}
.factor-chip strong { color: var(--text); font-weight: 700; }
.factor-chip.factor-lagged { border-color: var(--warn); color: var(--muted); }
.market-tape-brief { margin-top: 4px; }
.market-disclaimer.warn { color: var(--warn); }

/* Market context — Fear & Greed five-band gauges (Vector · RRMI · CNN · CMC) */
:root {
  --sentiment-seg-extreme-fear-from: color-mix(in srgb, var(--bad) 85%, var(--panel));
  --sentiment-seg-extreme-fear-to: var(--bad);
  --sentiment-seg-fear-from: color-mix(in srgb, var(--bad) 45%, var(--warn));
  --sentiment-seg-fear-to: color-mix(in srgb, var(--bad) 70%, var(--warn));
  --sentiment-seg-neutral-from: color-mix(in srgb, var(--warn) 75%, var(--muted));
  --sentiment-seg-neutral-to: var(--warn);
  --sentiment-seg-greed-from: color-mix(in srgb, var(--warn) 35%, var(--good));
  --sentiment-seg-greed-to: color-mix(in srgb, var(--good) 80%, var(--warn));
  --sentiment-seg-extreme-greed-from: color-mix(in srgb, var(--good) 75%, var(--panel));
  --sentiment-seg-extreme-greed-to: var(--good);
}
.sentiment-gauge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin: 10px 0 14px;
}
.sentiment-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 12px 10px 10px;
  background: color-mix(in srgb, var(--panel-2) 90%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  text-align: center;
}
.sentiment-gauge-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.sentiment-gauge-momentum-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  width: 100%;
}
.sentiment-gauge-action-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  width: 100%;
}
.sentiment-gauge-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 22px;
}
.sentiment-gauge-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.sentiment-gauge-stale-pill { font-size: 10px; padding: 2px 7px; }
.sentiment-gauge-body { width: 100%; position: relative; }
.sentiment-gauge-body--pending,
.sentiment-gauge-body--error {
  min-height: 0;
  display: block;
  padding: 0;
}
.sentiment-gauge-status {
  margin: 6px 0 0;
  line-height: 1.35;
  font-size: 12px;
}
.sentiment-gauge-pending,
.sentiment-gauge-error { margin: 0; line-height: 1.4; }
.sentiment-gauge-error { color: var(--bad); }
.sentiment-gauge-hub--empty .sentiment-gauge-score,
.sentiment-gauge-hub--empty .sentiment-gauge-native-label {
  opacity: 0.45;
}
.sentiment-gauge-stage {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 2 / 1;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .38));
}
.sentiment-gauge-stage--art { aspect-ratio: 2 / 1; min-height: 110px; }
.sentiment-gauge-svg--segments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.sentiment-gauge-svg--needle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.sentiment-gauge-track {
  fill: none;
  stroke: color-mix(in srgb, var(--border) 70%, transparent);
  stroke-width: 16;
  stroke-linecap: butt;
}
.sentiment-gauge-track--outer {
  stroke: color-mix(in srgb, var(--panel-2) 55%, transparent);
  stroke-width: 22;
  opacity: 0.85;
}
.sentiment-gauge-segment {
  fill: none;
  stroke-width: 13;
  stroke-linecap: butt;
  opacity: 0.98;
}
.sentiment-gauge-needle {
  stroke: color-mix(in srgb, var(--text) 88%, var(--panel));
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--text) 25%, transparent));
}
.sentiment-gauge-hub-ring {
  fill: color-mix(in srgb, var(--panel) 92%, transparent);
  stroke: color-mix(in srgb, var(--border) 80%, var(--muted));
  stroke-width: 1.4;
}
.sentiment-gauge-hub {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  min-width: 72px;
}
.sentiment-gauge-score {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.sentiment-gauge-hub--extreme-fear .sentiment-gauge-score { color: var(--bad); }
.sentiment-gauge-hub--fear .sentiment-gauge-score { color: color-mix(in srgb, var(--bad) 75%, var(--warn)); }
.sentiment-gauge-hub--neutral .sentiment-gauge-score { color: var(--warn); }
.sentiment-gauge-hub--greed .sentiment-gauge-score { color: color-mix(in srgb, var(--good) 80%, var(--warn)); }
.sentiment-gauge-hub--extreme-greed .sentiment-gauge-score { color: var(--good); }
.sentiment-gauge-native-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
  max-width: 120px;
}
.sentiment-gauge-source-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--border);
}
.sentiment-gauge-momentum { font-size: 10px; margin: 0; }
.sentiment-gauge-asof {
  margin: 0;
  font-size: 10px;
  min-height: 1.2em;
  line-height: 1.2;
}
.sentiment-gauge-detail-btn { margin: 0; }
.market-vector-fallback-title { margin: 0 0 6px; font-size: 15px; }
.sentiment-detail-modal-head {
  flex-shrink: 0;
  align-items: flex-start;
  margin-bottom: 10px;
}
.sentiment-detail-modal-foot {
  flex-shrink: 0;
  margin-top: 10px;
}
.modal-card.sentiment-detail-modal {
  display: flex;
  flex-direction: column;
  max-width: min(1024px, calc(100vw - 32px));
  width: min(1024px, calc(100vw - 32px));
  height: auto;
  max-height: min(88vh, calc(100dvh - 32px));
  padding: 20px 22px;
  overflow: hidden;
}
.modal-card.income-detail-modal {
  display: flex;
  flex-direction: column;
  max-width: min(1024px, calc(100vw - 32px));
  width: min(1024px, calc(100vw - 32px));
  max-height: min(88vh, calc(100dvh - 32px));
  overflow: hidden;
}
.income-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.sentiment-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.sentiment-detail-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
}
.sentiment-detail-score {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sentiment-detail-score--extreme-fear { color: var(--bad); }
.sentiment-detail-score--fear {
  color: color-mix(in srgb, var(--bad) 75%, var(--warn));
}
.sentiment-detail-score--neutral { color: var(--warn); }
.sentiment-detail-score--greed {
  color: color-mix(in srgb, var(--good) 80%, var(--warn));
}
.sentiment-detail-score--extreme-greed { color: var(--good); }
.sentiment-detail-diff {
  margin: 0 0 10px;
  line-height: 1.45;
}
.sentiment-detail-guide {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--panel-2) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
}
.sentiment-detail-guide-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}
.sentiment-detail-guide-horizon {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
}
.sentiment-detail-guide-live {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--control-radius);
}
.sentiment-detail-guide-use {
  margin: 0 0 12px;
  line-height: 1.45;
}
.sentiment-detail-guide-bands {
  margin: 6px 0 0;
  padding-left: 1.15rem;
  font-size: 12px;
  line-height: 1.45;
}
.sentiment-detail-guide-bands li { margin: 0.2rem 0; }
.sentiment-detail-guide-what {
  margin: 0 0 12px;
  line-height: 1.55;
  font-size: 13px;
}
.sentiment-detail-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.sentiment-detail-guide-card {
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--control-radius);
}
.sentiment-detail-guide-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.sentiment-detail-guide-card-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.sentiment-detail-parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.sentiment-detail-part {
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.sentiment-detail-part-name {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
}
.sentiment-detail-part-line {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.45;
}
.sentiment-detail-part-line:last-child { margin-bottom: 0; }
.sentiment-detail-part-k {
  font-weight: 650;
  color: var(--muted);
}
@media (max-width: 900px) {
  .sentiment-detail-guide-grid,
  .sentiment-detail-parts {
    grid-template-columns: 1fr;
  }
}
.sentiment-detail-subhead {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.sentiment-detail-reading {
  margin: 0 0 6px;
  line-height: 1.5;
}
.sentiment-detail-rows {
  /* Parent owns the column tracks so every row shares the same edges. */
  display: grid;
  grid-template-columns: minmax(10.5rem, 34%) minmax(0, 1fr) minmax(4.5rem, max-content);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  margin-bottom: 6px;
}
.sentiment-detail-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: 8px 12px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 12px;
}
.sentiment-detail-row:first-child { border-top: 0; }
.sentiment-detail-row-label {
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
}
.sentiment-detail-row-meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  min-width: 0;
}
.sentiment-detail-row-value {
  justify-self: end;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
/* Fallback when subgrid is unavailable — still identical tracks per row. */
@supports not (grid-template-columns: subgrid) {
  .sentiment-detail-rows {
    display: flex;
    flex-direction: column;
  }
  .sentiment-detail-row {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr) 7.75rem;
    grid-column: auto;
  }
}
.sentiment-detail-attribution { margin-top: 12px; }
.sentiment-detail-disclaimer { margin-top: 4px; }
.sentiment-detail-factors { margin-bottom: 8px; }
.sentiment-detail-inputs {
  margin: 0 0 12px;
  padding-left: 1.1rem;
  list-style: disc;
}
.sentiment-detail-inputs li { margin: 0.25rem 0; }

@media (max-width: 560px) {
  .sentiment-detail-rows {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .sentiment-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label value"
      "meta value";
    grid-column: auto;
  }
  .sentiment-detail-row-label { grid-area: label; }
  .sentiment-detail-row-meta { grid-area: meta; }
  .sentiment-detail-row-value { grid-area: value; align-self: start; }
}

@media (max-width: 820px) {
  .sentiment-gauge-grid { grid-template-columns: 1fr; }
}

.cycle-watch { margin-bottom: 16px; }
.cycle-gauge-wrap { margin: 8px 0 4px; color: var(--text); width: 100%; }
.cycle-gauge-legend-item--recovery { --cycle-legend-from: var(--cycle-seg-recovery-from); --cycle-legend-to: var(--cycle-seg-recovery-to); }
.cycle-gauge-legend-item--early-expansion { --cycle-legend-from: var(--cycle-seg-early-expansion-from); --cycle-legend-to: var(--cycle-seg-early-expansion-to); }
.cycle-gauge-legend-item--mid-expansion { --cycle-legend-from: var(--cycle-seg-mid-expansion-from); --cycle-legend-to: var(--cycle-seg-mid-expansion-to); }
.cycle-gauge-legend-item--late-expansion { --cycle-legend-from: var(--cycle-seg-late-expansion-from); --cycle-legend-to: var(--cycle-seg-late-expansion-to); }
.cycle-gauge-legend-item--peak-watch { --cycle-legend-from: var(--cycle-seg-peak-watch-from); --cycle-legend-to: var(--cycle-seg-peak-watch-to); }
.cycle-gauge-legend-item--recession-warning { --cycle-legend-from: var(--cycle-seg-recession-warning-from); --cycle-legend-to: var(--cycle-seg-recession-warning-to); }
.cycle-gauge-legend-item--recession { --cycle-legend-from: var(--cycle-seg-recession-from); --cycle-legend-to: var(--cycle-seg-recession-to); }
.cycle-gauge-stage {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 2 / 1;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .42));
}
.cycle-gauge-stage--art { aspect-ratio: 2 / 1; min-height: 140px; }
.cycle-gauge-art {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.cycle-gauge-svg--segments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}
.cycle-gauge-segment {
  fill: none;
  stroke-width: 13;
  stroke-linecap: butt;
  opacity: 0.98;
  filter: drop-shadow(0 0 6px rgba(14, 165, 233, .22));
}
.cycle-gauge-svg--needle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.cycle-gauge-needle-group {
  /* legacy — needle uses direct x2/y2 on .cycle-gauge-needle */
}
.cycle-gauge-needle {
  stroke: #e8f4ff;
  stroke-width: 3.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(14, 165, 233, .65));
}
.cycle-gauge-hub-ring {
  fill: rgba(8, 14, 24, .92);
  stroke: rgba(14, 165, 233, .55);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(14, 165, 233, .35));
}
.cycle-gauge-hub-core {
  fill: var(--cycle-seg-early-expansion-to);
  stroke: rgba(34, 197, 94, .45);
  stroke-width: 1;
}
.cycle-gauge-phase-caption {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: -2px 0 6px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  transition: opacity 0.35s ease;
}
.cycle-gauge-phase-caption--anim {
  opacity: 0.45;
}
.cycle-gauge-svg {
  width: 100%;
  display: block;
  margin: 0;
}
.cycle-gauge-svg--labels {
  display: none;
}
.cycle-gauge-hub-phase {
  display: none;
}
.cycle-gauge-track {
  fill: none;
  stroke: color-mix(in srgb, var(--border) 70%, transparent);
  stroke-width: 16;
  stroke-linecap: butt;
}
.cycle-gauge-track--outer {
  stroke: color-mix(in srgb, var(--panel-2) 55%, transparent);
  stroke-width: 22;
  opacity: 0.85;
}
.cycle-gauge-hub-score {
  display: none;
}
.cycle-gauge-legend {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px 4px;
  width: 100%;
  margin: 10px 0 0;
  padding: 8px 4px;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  backdrop-filter: blur(6px);
}
.cycle-gauge-legend-item {
  font-size: 9px;
  line-height: 1.15;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cycle-gauge-legend-item::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  margin: 0 auto 3px;
  background: linear-gradient(
    90deg,
    var(--cycle-legend-from, var(--good)),
    var(--cycle-legend-to, var(--good))
  );
  box-shadow: 0 0 6px color-mix(in srgb, var(--cycle-legend-from, var(--good)) 35%, transparent);
}
.cycle-view-toggle { margin: 8px 0; }
.cycle-view-toggle .year-chip { box-shadow: inset 0 0 0 1px transparent; }
.cycle-watch-disclaimer { margin-top: 8px; line-height: 1.45; }
.cycle-detail-modal-head {
  flex-shrink: 0;
  align-items: flex-start;
  margin-bottom: 12px;
}
.cycle-detail-modal-foot {
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cycle-detail-modal-foot .spacer {
  flex: 1 1 auto;
  min-width: 8px;
}
.cycle-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.cycle-detail-summary {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
}
.cycle-detail-summary-score { font-size: 13px; font-weight: 600; }
.cycle-detail-block {
  flex-shrink: 0;
  padding: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
}
.cycle-detail-block--leading { border-left: 3px solid rgba(46, 160, 67, .55); }
.cycle-detail-block--coincident { border-left: 3px solid rgba(88, 166, 255, .50); }
.cycle-detail-block--lagging { border-left: 3px solid rgba(255, 176, 32, .55); }
.cycle-detail-block--overlay { border-left: 3px solid rgba(255, 122, 24, .55); }
.cycle-detail-block-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cycle-detail-block-summary::-webkit-details-marker { display: none; }
.cycle-detail-block-summary::before {
  content: "▸";
  flex: 0 0 auto;
  margin-right: 6px;
  font-size: 11px;
  color: var(--muted);
  transition: transform .15s ease;
}
.cycle-detail-block[open] > .cycle-detail-block-summary::before {
  content: "▾";
}
.cycle-detail-block-title {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
}
.cycle-detail-block-desc {
  margin: 0;
  padding: 0 14px 8px;
  line-height: 1.45;
}
.cycle-detail-block-panel {
  padding-bottom: 4px;
}
.cycle-detail-block[open] > .cycle-detail-block-panel {
  max-height: min(62vh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  border-top: 1px solid var(--border);
}
.cycle-detail-block .cycle-indicator-cards {
  padding: 0 16px 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (min-width: 640px) {
  .cycle-detail-block .cycle-indicator-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cycle-indicator-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (min-width: 640px) {
  .cycle-indicator-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cycle-indicator-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  height: 100%;
  min-height: 320px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cycle-indicator-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  min-height: calc(3 * 1.35 * 14px);
}
.cycle-indicator-card-title {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  min-width: 0;
  min-height: calc(3 * 1.35 * 14px);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cycle-indicator-card-value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 8px;
  min-height: calc(1.45 * 18px + 4px);
}
.cycle-indicator-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.cycle-indicator-value--low { color: var(--good-bright, var(--good)); }
.cycle-indicator-value--mid { color: var(--warn-bright, var(--warn)); }
.cycle-indicator-value--high { color: var(--bad-bright, var(--bad)); }
.cycle-indicator-asof {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cycle-indicator-stress-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cycle-indicator-stress-pill--low {
  color: var(--good-bright, var(--good));
  background: color-mix(in srgb, var(--good) 16%, transparent);
  border-color: color-mix(in srgb, var(--good) 35%, transparent);
}
.cycle-indicator-stress-pill--mid {
  color: var(--warn-bright, var(--warn));
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.cycle-indicator-stress-pill--high {
  color: var(--bad-bright, var(--bad));
  background: color-mix(in srgb, var(--bad) 16%, transparent);
  border-color: color-mix(in srgb, var(--bad) 35%, transparent);
}
.cycle-indicator-card-context {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  height: calc(3 * 1.45 * 12px);
  min-height: calc(3 * 1.45 * 12px);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cycle-indicator-card-reading {
  margin: 0;
  padding: 12px 14px;
  background: rgba(88, 166, 255, .06);
  border: 1px solid rgba(88, 166, 255, .18);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: calc(24px + (3 * 1.35 * 11px) + 8px + (6 * 1.45 * 12px));
  align-self: stretch;
}
.cycle-indicator-reading-band {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  min-height: calc(3 * 1.35 * 11px);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cycle-indicator-reading-band--low { color: var(--good-bright, var(--good)); }
.cycle-indicator-reading-band--mid { color: var(--warn-bright, var(--warn)); }
.cycle-indicator-reading-band--high { color: var(--bad-bright, var(--bad)); }
.cycle-indicator-reading-means {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  min-height: calc(6 * 1.45 * 12px);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cycle-indicator-card-foot {
  flex-shrink: 0;
  padding-top: 10px;
}
.cycle-indicator-card-note { margin: 0 0 8px; line-height: 1.45; }
.cycle-indicator-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.cycle-indicator-link:hover { text-decoration: underline; }
.cycle-detail-source { margin: 2px 0 0; line-height: 1.45; flex-shrink: 0; }
.cycle-detail-empty { margin: 0; font-size: 13px; }

/* Daily report quota chip (Analyze view). Neutral by default; warns near/at the cap. */
.quota { display: inline-flex; align-items: center; gap: 7px; }
.quota .dot-q { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px currentColor; color: var(--good); }
.quota.low .dot-q { background: var(--warn); color: var(--warn); }
.quota.low { border-color: var(--warn); color: var(--warn); }
.quota.none .dot-q { background: var(--bad); color: var(--bad); }
.quota.none { border-color: var(--bad); color: var(--bad); }

/* Market sentiment · download the same daily briefing PDF we post to Telegram. */
.market-pdf-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.market-pdf-row button { white-space: nowrap; }

/* Header link back to the public site. */
.back-site { color: var(--muted); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.back-site:hover { color: var(--text); text-decoration: none; }

/* Respect reduced-motion: disable non-essential animation/transition. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pbar.indet > span { animation: none; width: 100% !important; }
  .bug-report-btn:hover::before,
  .bug-report-btn:focus-visible::before { animation: none; opacity: 0.32; }
}

/* Bug report header button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}
.bug-report-btn {
  position: relative;
  flex-shrink: 0;
  border-radius: var(--control-radius);
  overflow: visible;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bug-report-btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 13px;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(135deg, var(--accent), var(--ember));
  transition: opacity .25s ease;
}
.bug-report-btn__icon {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
}
.bug-report-btn__label {
  display: none;
  position: relative;
  z-index: 1;
}
.bug-report-btn:hover,
.bug-report-btn:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bug-report-btn:hover::before,
.bug-report-btn:focus-visible::before {
  opacity: 0.38;
  animation: bug-report-glow 1.6s ease-in-out infinite;
}
@keyframes bug-report-glow {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50% { opacity: 0.48; transform: scale(1.04); }
}
.bug-report-shot {
  max-width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* Custom file picker — hides native OS control, matches dashboard buttons. */
.file-picker { margin-top: 0; }
.file-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.file-picker-trigger,
.file-picker-clear {
  flex: 0 0 auto;
  width: auto;
}
.file-picker-name {
  flex: 1 1 120px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-picker-preview {
  display: block;
  max-width: 100%;
  max-height: 180px;
  margin-top: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  object-fit: contain;
  background: rgba(0, 0, 0, .18);
}
.file-picker-hint { display: block; margin-top: 6px; }
.ops-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  background: var(--panel);
  padding: 10px;
  border-radius: var(--radius-sm);
}
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(255,255,255,0.04); }

/* Wheel trading modals + heatmap grid */
.modal {
  position: fixed; inset: 0; z-index: 200;
  /* No dim scrim — avoids gray flash/jump over the dark dashboard; card shadow defines depth. */
  background: transparent;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal.hidden { display: none; }
.modal-card {
  position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 18px; max-width: 920px; width: 100%; max-height: 90vh; overflow: auto;
  box-shadow: var(--shadow), 0 24px 64px rgba(0, 0, 0, .55);
}
.modal-card.modal-card--wide {
  max-width: 720px;
}
.modal-card.cycle-detail-modal {
  display: flex;
  flex-direction: column;
  /* Fit content; cap width/height so long sections scroll inside the body */
  max-width: min(1024px, calc(100vw - 32px));
  width: min(1024px, calc(100vw - 32px));
  height: auto;
  max-height: min(88vh, calc(100dvh - 32px));
  padding: 20px 22px;
  overflow: hidden;
}
.modal-card.cycle-detail-modal > .row:first-child {
  padding-right: 48px;
}
.modal-card > .row:first-child {
  flex-wrap: nowrap;
  align-items: flex-start;
  padding-right: 48px;
}
.modal-card > .row:first-child > div:first-child,
.modal-card > .row:first-child > h3 {
  flex: 1 1 auto;
  min-width: 0;
}
.modal-card > .row:first-child > .row:last-child {
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.modal-card button[id$="Close"],
.modal-card > .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
}
.heatmap-host { overflow: auto; margin-top: 8px; }
table.heatmap-grid { font-size: 11px; border-collapse: collapse; }
table.heatmap-grid th, table.heatmap-grid td {
  border: 1px solid var(--border); padding: 4px 6px; text-align: right;
}
table.heatmap-grid td { background: var(--panel-2); min-width: 42px; }
.index-chip {
  display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--border); margin-right: 4px;
}

/* ---- Wheel recommendations: rich table, badges, analysis modal, heatmap ---- */

/* Give the Wheel recs view extra width so all columns fit without scrolling. */
body:has(#view-wheel-trade.active) .wrap { max-width: 1560px; }

/* Wheel tables: scroll inside .recs-wrap when viewport < table min-width (before columns crush). */
.recs-wrap {
  width: 100%; max-width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
table.recs.recs-sticky-col { min-width: 1280px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.recs { width: 100%; table-layout: auto; border-collapse: collapse; }
table.recs th, table.recs td { padding: 9px 10px; vertical-align: middle; }
table.recs.recs-compact th, table.recs.recs-compact td {
  padding: 6px 7px; font-size: 13px;
}
table.recs.recs-compact th { font-size: 11px; letter-spacing: .3px; }
table.recs td.num, table.recs th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.recs th[data-sort="expiration_date"],
table.recs td[data-col="expiration_date"] {
  white-space: nowrap;
}
/* Sector: stock/positions stay single-line + ellipsis. Puts/calls allow a
   2-line wrap inside the compact row height (smaller type; no row stretch). */
table.recs td.sector-cell { white-space: nowrap; }
#wheelStockTable td.sector-cell, #wheelPositionsTable td.sector-cell {
  overflow: hidden; text-overflow: ellipsis;
}
/* Actions column: fixed footprint so the column doesn't jump when a row shows the
   "Linked (assignment)" tag instead of the Edit/Delete buttons. */
table.recs th.acts, table.recs td.acts { width: 180px; white-space: nowrap; }
/* Stocks tab: same fixed, evenly-distributed, center-aligned grid as the other
   wheel tables (9 columns), so headers sit directly over their values. */
#wheelStockTable { width: 100%; table-layout: fixed; }
#wheelStockTable th, #wheelStockTable td { white-space: nowrap; text-align: center; }
#wheelStockTable th:nth-child(1), #wheelStockTable td:nth-child(1) { width: 11%; }  /* Ticker */
#wheelStockTable th:nth-child(2), #wheelStockTable td:nth-child(2) { width: 11%; }  /* Sector */
#wheelStockTable th:nth-child(3), #wheelStockTable td:nth-child(3) { width: 7%; }   /* Shares */
#wheelStockTable th:nth-child(4), #wheelStockTable td:nth-child(4) { width: 9%; }   /* Avg cost */
#wheelStockTable th:nth-child(5), #wheelStockTable td:nth-child(5) { width: 7%; }   /* Days held */
#wheelStockTable th:nth-child(6), #wheelStockTable td:nth-child(6) { width: 8%; }   /* Price */
#wheelStockTable th:nth-child(7), #wheelStockTable td:nth-child(7) { width: 8%; }   /* Target */
#wheelStockTable th:nth-child(8), #wheelStockTable td:nth-child(8) { width: 10%; }  /* Cost basis */
#wheelStockTable th:nth-child(9), #wheelStockTable td:nth-child(9) { width: 10%; }  /* Mkt value */
#wheelStockTable th:nth-child(10), #wheelStockTable td:nth-child(10) { width: 9%; } /* P/L $ */
#wheelStockTable th:nth-child(11), #wheelStockTable td:nth-child(11) { width: 8%; } /* P/L % */
table.recs tbody tr { transition: background .12s ease; }
table.recs.is-busy tbody {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* My reports: full width with FIXED, evenly-distributed columns. Auto layout was
   dumping all the leftover width into one spot (huge Decision→Score void, Score
   glued to When); fixed proportions give a balanced grid that fills the panel.
   First/last columns sit flush with the panel edges (Ticker under the heading,
   PDF flush right). */
#historyTable { width: 100%; table-layout: fixed; }
/* Headers and cells are center-aligned (both) so the column titles sit directly
   over their values — a tidy, symmetric grid. */
#historyTable th, #historyTable td { white-space: nowrap; text-align: center; }
#historyTable th:nth-child(1), #historyTable td:nth-child(1) { width: 13%; }  /* Ticker */
#historyTable td.tk-cell { overflow: visible; text-align: left; }
#historyTable th:nth-child(2), #historyTable td:nth-child(2) { width: 17%; }  /* Sector */
#historyTable th:nth-child(3), #historyTable td:nth-child(3) { width: 8%; }   /* Price */
#historyTable th:nth-child(4), #historyTable td:nth-child(4) { width: 8%; }   /* Target */
#historyTable th:nth-child(5), #historyTable td:nth-child(5) { width: 7%; }   /* Gap % */
#historyTable th:nth-child(6), #historyTable td:nth-child(6) { width: 14%; } /* Rubric band */
#historyTable th:nth-child(7), #historyTable td:nth-child(7) { width: 7%; }   /* Score */
#historyTable th:nth-child(8), #historyTable td:nth-child(8) { width: 15%; }  /* When */
#historyTable th:nth-child(9), #historyTable td:nth-child(9) { width: 11%; }  /* PDF */
#historyTable td.sector-cell {
  overflow: hidden; text-overflow: ellipsis; max-width: 0;
}
#historyTable .verdict { min-width: 0; padding: 2px 7px; font-size: 11px; }

/* Wheel screener — earnings expiry highlight + rubric band column */
.exp-post-earnings {
  color: var(--warn);
  font-weight: 600;
  border-bottom: 1px dotted rgba(255, 180, 60, .55);
  cursor: help;
}
.wheel-rubric-link {
  cursor: pointer;
  border: none;
  font: inherit;
  background: none;
  padding: 0;
  font-weight: 600;
}
.wheel-rubric-link:hover { text-decoration: underline; }
.wheel-rubric-good { color: var(--good); }
.wheel-rubric-selective { color: var(--selective); }
.wheel-rubric-small { color: var(--warn); }
.wheel-rubric-avoid { color: var(--bad); }
.wheel-rubric-insufficient { color: var(--muted); }
.wheel-rubric-missing,
.wheel-rubric-unknown,
.wheel-rubric-link.wheel-rubric-unavailable,
.wheel-rubric-link.wheel-rubric-unmapped {
  color: var(--muted);
  font-weight: 500;
}
.wheel-rubric-missing {
  cursor: pointer;
  border: none;
  font: inherit;
  background: none;
  padding: 0;
}
.wheel-rubric-missing:hover { text-decoration: underline; }
.wheel-rubric-link:focus,
.wheel-rubric-link:focus-visible,
.wheel-rubric-missing:focus,
.wheel-rubric-missing:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: none;
}
.wheel-screener-puts td.rubric-cell, .wheel-screener-calls td.rubric-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
/* Wheel put/call screener — fixed proportional grid via data-col (DnD-safe).
   Class on body + float tables; `table.recs.wheel-screener-*` beats `table.recs { table-layout: auto }`.
   Center alignment must beat `table.recs th.num { text-align: right }` (0,2,2).
   Desktop: fill the panel (`width: 100%`) so % columns breathe.
   Narrow (≤1100px): raise min-width so columns scroll instead of crushing. */
table.recs.wheel-screener-puts,
table.recs.wheel-screener-calls {
  width: 100%;
  table-layout: fixed;
  min-width: 720px;
}
@media (max-width: 1100px) {
  table.recs.wheel-screener-puts,
  table.recs.wheel-screener-calls {
    /* Prefer intrinsic floor over width:100% so narrow viewports scroll instead of
       crushing columns (min-width alone is unreliable on fixed tables in WebKit). */
    width: max(100%, 1180px);
    min-width: 1180px;
  }
  table.recs.wheel-screener-calls {
    /* Calls add AVG COST + SIZE/OPEN vs puts — need a wider floor. */
    width: max(100%, 1360px);
    min-width: 1360px;
  }
}
table.recs.wheel-screener-puts > thead > tr > th,
table.recs.wheel-screener-puts > tbody > tr > td,
table.recs.wheel-screener-calls > thead > tr > th,
table.recs.wheel-screener-calls > tbody > tr > td {
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
}
table.recs.wheel-screener-puts > thead > tr > th,
table.recs.wheel-screener-calls > thead > tr > th {
  overflow: visible;
}
table.recs.wheel-screener-puts > tbody > tr > td,
table.recs.wheel-screener-calls > tbody > tr > td {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Full-width flex inner so labels center in the cell (inline-flex shrink-wraps to text). */
table.recs.wheel-screener-puts th .th-inner,
table.recs.wheel-screener-calls th .th-inner {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
}
table.recs.wheel-screener-puts th .th-label,
table.recs.wheel-screener-calls th .th-label {
  /* Desktop: allow 2-line wrap so labels fit % columns without forcing overflow. */
  white-space: normal;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
  hyphens: auto;
}
@media (max-width: 1100px) {
  table.recs.wheel-screener-puts th .th-label,
  table.recs.wheel-screener-calls th .th-label {
    /* Narrow: one line + horizontal scroll (.recs-hscroll). Avoid mid-word wraps
       like "STR IKE" / "SECT OR". */
    white-space: nowrap;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    word-break: normal;
    hyphens: manual;
    text-overflow: ellipsis;
  }
}
table.recs.wheel-screener-puts th[data-col="underlying_ticker"],
table.recs.wheel-screener-calls th[data-col="underlying_ticker"],
table.recs.wheel-screener-puts td.tk-cell,
table.recs.wheel-screener-calls td.tk-cell {
  text-align: left;
}
table.recs.wheel-screener-puts th[data-col="underlying_ticker"] .th-inner,
table.recs.wheel-screener-calls th[data-col="underlying_ticker"] .th-inner {
  justify-content: flex-start;
}
table.recs.wheel-screener-puts th .sort-ind,
table.recs.wheel-screener-calls th .sort-ind {
  flex: 0 0 auto;
  margin-left: 1px;
}
.wheel-screener-puts th.col-draggable, .wheel-screener-calls th.col-draggable {
  cursor: grab;
  user-select: none;
}
.wheel-screener-puts th.col-draggable[data-sort], .wheel-screener-calls th.col-draggable[data-sort] {
  cursor: grab;
}
.wheel-screener-puts th.col-draggable:active, .wheel-screener-calls th.col-draggable:active {
  cursor: grabbing;
}
.wheel-screener-puts td.tk-cell, .wheel-screener-calls td.tk-cell {
  overflow: visible;
  text-overflow: clip;
}
.wheel-star-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  margin-right: 4px;
  cursor: pointer;
  min-width: 22px;
  min-height: 22px;
}
.wheel-star-btn.is-starred { color: var(--accent); }
.wheel-star-btn:hover,
.wheel-star-btn:focus-visible {
  color: var(--accent);
  outline: none;
}
.wheel-star-btn:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-xs);
}
/* Beat `table.recs th.num { text-align: right }` — keep screener cells centered. */
table.recs.wheel-screener-puts > thead > tr > th.num,
table.recs.wheel-screener-puts > tbody > tr > td.num,
table.recs.wheel-screener-calls > thead > tr > th.num,
table.recs.wheel-screener-calls > tbody > tr > td.num,
table.recs.wheel-screener-puts > thead > tr > th[data-col="held"],
table.recs.wheel-screener-puts > tbody > tr > td.held-cell,
table.recs.wheel-screener-calls > thead > tr > th[data-col="open"],
table.recs.wheel-screener-calls > tbody > tr > td.held-cell {
  text-align: center;
}
.wheel-screener-puts [data-col="underlying_ticker"], .wheel-screener-calls [data-col="underlying_ticker"] { width: 8%; }
.wheel-screener-puts [data-col="market_cap"], .wheel-screener-calls [data-col="market_cap"] { width: 4.5%; min-width: 52px; }
.wheel-screener-puts [data-col="sector"], .wheel-screener-calls [data-col="sector"] { width: 8.5%; }
.wheel-screener-puts [data-col="underlying_price"], .wheel-screener-calls [data-col="underlying_price"] { width: 5.5%; }
.wheel-screener-puts [data-col="target_price"], .wheel-screener-calls [data-col="target_price"] { width: 5.5%; }
.wheel-screener-puts [data-col="decision"], .wheel-screener-calls [data-col="decision"] { width: 8%; }
.wheel-screener-puts [data-col="expiration_date"], .wheel-screener-calls [data-col="expiration_date"] { width: 6.5%; }
.wheel-screener-puts [data-col="strike"], .wheel-screener-calls [data-col="strike"] { width: 5.5%; }
.wheel-screener-calls [data-col="holding_avg_cost"] { width: 6%; }
.wheel-screener-puts [data-col="dte"], .wheel-screener-calls [data-col="dte"] { width: 4%; }
.wheel-screener-puts [data-col="mid"], .wheel-screener-calls [data-col="mid"] { width: 5%; }
.wheel-screener-puts [data-col="last_price"], .wheel-screener-calls [data-col="last_price"] { width: 5%; }
.wheel-screener-puts [data-col="rec_quantity"] { width: 4%; }
.wheel-screener-calls [data-col="available_call_contracts"] { width: 3%; }
.wheel-screener-puts [data-col="collateral"], .wheel-screener-calls [data-col="collateral"] { width: 6%; }
.wheel-screener-puts [data-col="roi"], .wheel-screener-calls [data-col="roi"] { width: 5.5%; }
.wheel-screener-puts [data-col="pop"], .wheel-screener-calls [data-col="pop"] { width: 4.5%; }
.wheel-screener-puts [data-col="held"] { width: 5.5%; }
.wheel-screener-calls [data-col="open"] { width: 6%; }
.wheel-screener-puts [data-col="_actions"], .wheel-screener-calls [data-col="_actions"] { width: 4.5%; }
/* Puts screener has two fewer columns than calls (no AVG COST / SIZE-open pair),
   so redistribute the freed width for even spacing (sums to exactly 100%): give
   TICKER extra breathing room before CAP, and tighten POP/HELD so they don't drift
   apart. Puts-only overrides — equal specificity, declared after the shared rules
   so they win for .wheel-screener-puts. */
.wheel-screener-puts [data-col="underlying_ticker"] { width: 10.5%; }
.wheel-screener-puts [data-col="market_cap"] { width: 5.5%; }
.wheel-screener-puts [data-col="sector"] { width: 8.5%; }
.wheel-screener-puts [data-col="underlying_price"] { width: 6%; }
.wheel-screener-puts [data-col="target_price"] { width: 6%; }
.wheel-screener-puts [data-col="decision"] { width: 8.5%; }
.wheel-screener-puts [data-col="expiration_date"] { width: 7%; }
.wheel-screener-puts [data-col="collateral"] { width: 6.5%; }
.wheel-screener-puts [data-col="roi"] { width: 6%; }
.wheel-screener-puts [data-col="pop"] { width: 4%; }
.wheel-screener-puts [data-col="held"] { width: 5%; }
/* Screener: analyst-consensus target vs the recommended strike (third-party data).
   Text-only emphasis (colored value + dotted underline) — no cell background tint. */
.wheel-screener-puts td.target-below-strike .target-flag,
.wheel-screener-calls td.target-above-strike .target-flag,
.wheel-screener-puts td.target-above-strike .target-flag {
  font-weight: 700;
  cursor: help;
  text-underline-offset: 3px;
}
.wheel-screener-puts td.target-below-strike .target-flag {
  color: var(--warn);
  text-decoration: underline dotted rgba(245, 166, 35, .8);
}
.wheel-screener-puts td.target-above-strike .target-flag {
  color: var(--good);
  text-decoration: underline dotted rgba(47, 191, 113, .8);
}
.wheel-screener-calls td.target-above-strike .target-flag {
  color: var(--good);
  text-decoration: underline dotted rgba(47, 191, 113, .8);
}
.wheel-screener-puts th.col-dragging, .wheel-screener-calls th.col-dragging { opacity: 0.55; cursor: grabbing; }
.wheel-screener-puts th.col-drag-over, .wheel-screener-calls th.col-drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.wheel-screener-puts thead th, .wheel-screener-calls thead th {
  padding-top: 7px;
  padding-bottom: 7px;
  line-height: 1.15;
}
/* Puts/Calls: wrap long sectors onto 2 lines without growing the compact row.
   Must beat `table.recs.wheel-screener-* > tbody > tr > td { white-space:nowrap;
   text-overflow:ellipsis }` (higher specificity). Clamp an INNER span — never
   set display:-webkit-box on the <td> (breaks table-cell layout). */
table.recs.wheel-screener-puts > tbody > tr > td.sector-cell,
table.recs.wheel-screener-calls > tbody > tr > td.sector-cell {
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  max-width: 0;
  vertical-align: middle;
}
table.recs.wheel-screener-puts > tbody > tr > td.sector-cell .sector-cell-text,
table.recs.wheel-screener-calls > tbody > tr > td.sector-cell .sector-cell-text {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  font-size: 10.5px;
  line-height: 1.15;
  max-height: 2.3em; /* exactly two lines; clips without growing the row */
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
  text-overflow: clip;
}
/* Combined-book exposure TEXT — sector column, Puts sector filter, fund Sector /
   Portfolio share, ticker chips. Same --exp-* hue per band everywhere.
   (Sector vs ticker only differ by % thresholds in JS, not by color.) */
.sector-exp--light-green,
.cs-option.cms-option.sector-exp--light-green,
.cs-option.cms-option.sector-exp--light-green > span,
.cs-option.cms-option.sector-exp--light-green[aria-selected="true"],
.cs-option.cms-option.sector-exp--light-green[aria-selected="true"] > span,
.fund-cell .fund-v.fund-exp--light-green,
.fund-cell .fund-v.fund-tk-exp--light-green,
.fund-cell:has(.fund-v.fund-exp--light-green) .fund-sub,
.fund-cell:has(.fund-v.fund-tk-exp--light-green) .fund-sub,
.recs-ticker.is-tk-exp--light-green {
  color: var(--exp-light-green);
}
.sector-exp--green,
.cs-option.cms-option.sector-exp--green,
.cs-option.cms-option.sector-exp--green > span,
.cs-option.cms-option.sector-exp--green[aria-selected="true"],
.cs-option.cms-option.sector-exp--green[aria-selected="true"] > span,
.fund-cell .fund-v.fund-exp--green,
.fund-cell .fund-v.fund-tk-exp--green,
.fund-cell:has(.fund-v.fund-exp--green) .fund-sub,
.fund-cell:has(.fund-v.fund-tk-exp--green) .fund-sub,
.recs-ticker.is-tk-exp--green {
  color: var(--exp-green);
}
.sector-exp--orange,
.cs-option.cms-option.sector-exp--orange,
.cs-option.cms-option.sector-exp--orange > span,
.cs-option.cms-option.sector-exp--orange[aria-selected="true"],
.cs-option.cms-option.sector-exp--orange[aria-selected="true"] > span,
.fund-cell .fund-v.fund-exp--orange,
.fund-cell .fund-v.fund-tk-exp--orange,
.fund-cell:has(.fund-v.fund-exp--orange) .fund-sub,
.fund-cell:has(.fund-v.fund-tk-exp--orange) .fund-sub,
.recs-ticker.is-tk-exp--orange {
  color: var(--exp-heating);
}
.sector-exp--red,
.cs-option.cms-option.sector-exp--red,
.cs-option.cms-option.sector-exp--red > span,
.cs-option.cms-option.sector-exp--red[aria-selected="true"],
.cs-option.cms-option.sector-exp--red[aria-selected="true"] > span,
.fund-cell .fund-v.fund-exp--red,
.fund-cell .fund-v.fund-tk-exp--red,
.fund-cell:has(.fund-v.fund-exp--red) .fund-sub,
.fund-cell:has(.fund-v.fund-tk-exp--red) .fund-sub,
.recs-ticker.is-tk-exp--red {
  color: var(--exp-alert);
}
.fund-cell .fund-v.fund-tk-exp--critical,
.fund-cell:has(.fund-v.fund-tk-exp--critical) .fund-sub {
  /* Same alert red as Sector “Alerted” / fund-tk-exp--red — critical is label + weight only. */
  color: var(--exp-alert);
  font-weight: 800;
}
.recs-ticker.is-tk-exp--critical {
  /* Chip fill stays maroon; text matches Sector / Portfolio alert red. */
  color: var(--exp-alert);
}
.sector-exp--light-green,
.sector-exp--green,
.sector-exp--orange,
.sector-exp--red,
.cs-option.cms-option.sector-exp--light-green,
.cs-option.cms-option.sector-exp--green,
.cs-option.cms-option.sector-exp--orange,
.cs-option.cms-option.sector-exp--red {
  font-weight: 600;
}
.wheel-screener-puts th[data-sort="decision"],
.wheel-screener-calls th[data-sort="decision"] {
  overflow: visible;
}
/* Report popup — score chip + markdown body (dark theme, card-style sections) */
.pill.report-score-pill {
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 4px 12px; border-radius: var(--radius-pill); letter-spacing: .2px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
.pill.report-score-good { background: rgba(47, 191, 113, .14); border-color: rgba(47, 191, 113, .45); color: var(--good-bright); }
.pill.report-score-selective { background: rgba(91, 140, 255, .14); border-color: rgba(91, 140, 255, .45); color: var(--selective); }
.pill.report-score-small { background: rgba(245, 166, 35, .14); border-color: rgba(245, 166, 35, .45); color: var(--warn-bright); }
.pill.report-score-avoid { background: rgba(239, 69, 101, .14); border-color: rgba(239, 69, 101, .5); color: var(--bad-bright); }
.pill.report-score-insufficient { background: var(--panel-2); border-color: var(--border); color: var(--muted); }

#reportBody.report-body-block {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
#reportBody.report-body-block:empty {
  margin-top: 0; padding-top: 0; border-top: 0;
}
#incomeDetailBody.report-body-block {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
#incomeDetailBody.report-body-block:empty,
#incomeDetailBody.report-body-block.hidden {
  margin-top: 0; padding-top: 0; border-top: 0;
}

.report-body-block .report-md {
  font-size: 14.5px; line-height: 1.62; color: var(--text);
}

/* Title is redundant with the modal header — keep for structure/accessibility. */
.report-body-block .report-h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.report-body-block .report-subtitle {
  margin: 0 0 14px; font-size: 14px; color: var(--muted); font-style: normal;
}
.report-body-block .report-subtitle em { font-style: normal; color: var(--text); font-weight: 600; }

.report-body-block .report-disclaimer {
  margin: 0 0 16px; padding: 10px 14px;
  border-left: 3px solid rgba(255, 122, 24, .55);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 122, 24, .06);
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.report-body-block .report-disclaimer p { margin: 0; }
.report-body-block .report-callout {
  margin: 12px 0; padding: 10px 14px;
  border-left: 3px solid var(--steel);
  border-radius: 0 10px 10px 0;
  background: rgba(91, 140, 255, .06);
  color: var(--muted); font-size: 13px;
}
.report-body-block .report-callout p { margin: 0; }

.report-body-block .report-rubric {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 8px 14px;
  border-radius: var(--control-radius); background: var(--panel-2);
  border: 1px solid var(--border); font-size: 14px;
}
.report-body-block .report-rubric strong { color: var(--ember); font-weight: 700; }

.report-body-block .report-metrics {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px;
}
.report-body-block .report-metrics > li {
  margin: 0; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--card-radius);
  font-size: 13px; line-height: 1.45; color: var(--muted);
}
.report-body-block .report-metrics > li strong { display: block; margin-top: 4px; color: var(--text); font-size: 15px; font-weight: 800; }
.report-body-block .report-metrics > li ul { margin: 8px 0 0; padding-left: 16px; font-size: 12px; }

.report-body-block .report-h2 {
  margin: 28px 0 12px; padding: 0 0 8px 12px;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .55px;
  color: var(--muted); border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.report-body-block .report-h2:first-of-type { margin-top: 4px; }
.report-body-block .report-h2-hero { border-left-color: var(--accent); color: var(--ember); }
.report-body-block .report-exec-summary {
  font-size: 15px; line-height: 1.65;
  padding: 14px 16px; margin: 0 0 4px;
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, rgba(255, 122, 24, .08), rgba(255, 61, 46, .04));
  border: 1px solid rgba(255, 122, 24, .22);
}
.report-body-block .report-exec-summary p {
  margin: 0 0 12px;
}
.report-body-block .report-exec-summary p:last-child {
  margin-bottom: 0;
}
/* Fallback when enhanceReportMarkdown has not wrapped yet (e.g. plain MD preview):
 * style only the first paragraph after the hero H2 — never the criteria H3 block. */
.report-body-block .report-h2-hero + p {
  font-size: 15px; line-height: 1.65;
  padding: 14px 16px; border-radius: var(--card-radius);
  background: linear-gradient(135deg, rgba(255, 122, 24, .08), rgba(255, 61, 46, .04));
  border: 1px solid rgba(255, 122, 24, .22);
}
.report-body-block .report-h2-good { border-left-color: var(--good); color: var(--good-bright); }
.report-body-block .report-h2-good + ul { padding-left: 0; list-style: none; }
.report-body-block .report-h2-good + ul > li {
  padding: 8px 12px 8px 28px; margin-bottom: 6px; border-radius: var(--radius-sm);
  background: rgba(47, 191, 113, .08); border: 1px solid rgba(47, 191, 113, .2);
  position: relative;
}
.report-body-block .report-h2-good + ul > li::before {
  content: "+"; position: absolute; left: 10px; top: 8px;
  color: var(--good); font-weight: 800;
}
.report-body-block .report-h2-risk { border-left-color: var(--bad); color: var(--bad-bright); }
.report-body-block .report-h2-risk + ul { padding-left: 0; list-style: none; }
.report-body-block .report-h2-risk + ul > li {
  padding: 8px 12px 8px 28px; margin-bottom: 6px; border-radius: var(--radius-sm);
  background: rgba(239, 69, 101, .08); border: 1px solid rgba(239, 69, 101, .22);
  position: relative;
}
.report-body-block .report-h2-risk + ul > li::before {
  content: "!"; position: absolute; left: 11px; top: 7px;
  color: var(--bad); font-weight: 800; font-size: 13px;
}
.report-body-block .report-h2-warn { border-left-color: var(--warn); color: var(--warn-bright); }
.report-body-block .report-h2-scenario { border-left-color: var(--steel); color: var(--selective); }
.report-body-block .report-h2-stress { border-left-color: var(--warn); color: var(--warn-bright); }

/* Bull/base/bear scenario cards (same layout as PDF; dark theme). */
.report-body-block .scenario-cards {
  display: flex; flex-direction: column; gap: 10px;
  margin: 10px 0 16px;
}
.report-body-block .scenario-card {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--card-radius); padding: 14px 16px;
}
.report-body-block .scenario-bull { border-left: 4px solid var(--good); }
.report-body-block .scenario-base { border-left: 4px solid var(--steel); }
.report-body-block .scenario-bear { border-left: 4px solid var(--bad); }
.report-body-block .scenario-other { border-left: 4px solid var(--muted); }
.report-body-block .scenario-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.report-body-block .scenario-name { font-size: 15px; font-weight: 800; color: var(--text); }
.report-body-block .scenario-weight {
  font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap;
}
.report-body-block .scenario-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;
}
.report-body-block .scenario-stat {
  padding: 10px 12px; border-radius: var(--control-radius);
  background: var(--panel); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.report-body-block .scenario-stat .sk {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 700;
}
.report-body-block .scenario-stat .sv {
  font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
}
.report-body-block .scenario-stat .sv.up { color: var(--good-bright); }
.report-body-block .scenario-stat .sv.down { color: var(--bad-bright); }
.report-body-block .scenario-rationale {
  font-size: 13.5px; line-height: 1.58; color: var(--muted);
  padding-top: 10px; border-top: 1px dashed var(--border);
}

.report-body-block .report-h3 {
  margin: 18px 0 8px; font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: .1px;
}

.report-body-block p { margin: 0 0 12px; }
.report-body-block ul:not(.report-metrics), .report-body-block ol {
  margin: 0 0 14px; padding-left: 1.25em;
}
.report-body-block li { margin-bottom: 6px; }
.report-body-block li::marker { color: var(--accent); }
.report-body-block strong { color: var(--text); font-weight: 700; }
.report-body-block em { color: var(--muted); }
.report-body-block a { color: var(--steel); font-weight: 600; word-break: break-word; }
.report-body-block a:hover { color: var(--ember); }

.report-body-block .report-hr {
  border: 0; height: 1px; margin: 28px 0;
  background: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
}

.report-body-block .report-table-wrap {
  overflow-x: auto; margin: 10px 0 16px;
  border: 1px solid var(--border); border-radius: var(--card-radius);
  -webkit-overflow-scrolling: touch;
}
.report-body-block .report-table {
  width: 100%; margin: 0; border-collapse: collapse; font-size: 13px;
}
.report-body-block .report-table th, .report-body-block .report-table td {
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.report-body-block .report-table th {
  background: var(--panel-2); color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .45px; font-weight: 700;
  white-space: nowrap;
}
.report-body-block .report-table tbody tr:last-child td { border-bottom: 0; }
.report-body-block .report-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
.report-body-block .report-table tbody tr:hover { background: rgba(255, 122, 24, .04); }

.report-body-block .val-good {
  color: var(--good-bright); font-weight: 700;
  background: rgba(47, 191, 113, .12); padding: 1px 6px; border-radius: 5px;
}
.report-body-block .val-bad {
  color: var(--bad-bright); font-weight: 700;
  background: rgba(239, 69, 101, .12); padding: 1px 6px; border-radius: 5px;
}

.report-body-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; background: var(--panel-2); padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--border);
}
.report-body-block pre {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--control-radius);
  padding: 12px 14px; overflow-x: auto; font-size: 12px; line-height: 1.5;
}

@media (max-width: 620px) {
  #reportBody .report-metrics { grid-template-columns: 1fr; }
  #reportBody .report-rubric { display: flex; flex-wrap: wrap; }
  #reportBody .scenario-stats { grid-template-columns: 1fr; }
}
/* Puts/Calls: horizontal scroll on inner pane; float header outside so it can
   stick under the wheel subnav on page scroll (overflow-x would break sticky). */
.recs-wrap:has(.wheel-screener-puts),
.recs-wrap:has(.wheel-screener-calls),
.recs-wrap:has(.wheel-screener-history),
.recs-wrap:has(#incomeTable) {
  overflow: visible;
}
.recs-hscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}
.recs-head-float {
  position: sticky;
  top: var(--wheel-subnav-height);
  z-index: 14;
  height: 0;
  overflow: visible;
  pointer-events: none;
}
@media (min-width: 1481px) {
  .recs-head-float {
    top: calc(var(--dash-header-height) + var(--wheel-subnav-height));
  }
}
.recs-head-float.is-active {
  pointer-events: auto;
}
.recs-head-float-scroll {
  overflow: hidden;
  visibility: hidden;
  background: var(--panel);
  width: 100%;
}
.recs-head-float.is-active .recs-head-float-scroll {
  visibility: visible;
  box-shadow: 0 1px 0 var(--border), var(--shadow);
}
.recs-head-float table.recs {
  margin: 0;
}
.recs-head-float thead th {
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--border);
}

/* Open option positions: fixed proportional widths spread the slack evenly (no more
   lop-sided gaps), Actions keeps enough room for its Close/Expired/Assigned buttons.
   Most columns center-align; Ticker (.tk-cell) left-aligns like puts/calls/history.
   Scrolls horizontally on small screens via .recs-wrap. */
#wheelPositionsTable { width: 100%; table-layout: fixed; }
#wheelPositionsTable th, #wheelPositionsTable td { white-space: nowrap; text-align: center; }
#wheelPositionsTable th.tk-cell, #wheelPositionsTable td.tk-cell,
#uikitWheelPositionsDemo th.tk-cell, #uikitWheelPositionsDemo td.tk-cell {
  text-align: left;
}
#wheelPositionsTable td.tk-cell,
#uikitWheelPositionsDemo td.tk-cell {
  overflow: visible;
  text-overflow: clip;
}
#wheelPositionsTable th:nth-child(1),  #wheelPositionsTable td:nth-child(1)  { width: 7%; }   /* Ticker */
#wheelPositionsTable th:nth-child(2),  #wheelPositionsTable td:nth-child(2)  { width: 8%; }   /* Sector */
#wheelPositionsTable th:nth-child(3),  #wheelPositionsTable td:nth-child(3)  { width: 5%; }   /* Strike */
#wheelPositionsTable th:nth-child(4),  #wheelPositionsTable td:nth-child(4)  { width: 5%; }   /* Price */
#wheelPositionsTable th:nth-child(5),  #wheelPositionsTable td:nth-child(5)  { width: 5%; }   /* Target */
#wheelPositionsTable th:nth-child(6),  #wheelPositionsTable td:nth-child(6)  { width: 4%; }   /* Type */
#wheelPositionsTable th:nth-child(7),  #wheelPositionsTable td:nth-child(7)  { width: 7%; white-space: normal; vertical-align: middle; }   /* Expiry */
#wheelPositionsTable th:nth-child(8),  #wheelPositionsTable td:nth-child(8)  { width: 3%; }   /* DTE */
#wheelPositionsTable th:nth-child(9),  #wheelPositionsTable td:nth-child(9)  { width: 3%; }   /* Qty */
#wheelPositionsTable th:nth-child(10), #wheelPositionsTable td:nth-child(10) { width: 5%; }   /* Entry */
#wheelPositionsTable th:nth-child(11), #wheelPositionsTable td:nth-child(11) { width: 5%; }   /* Credit */
#wheelPositionsTable th:nth-child(12), #wheelPositionsTable td:nth-child(12) { width: 4%; }   /* Mark */
#wheelPositionsTable th:nth-child(13), #wheelPositionsTable td:nth-child(13) { width: 7%; white-space: normal; }   /* P/L */
#wheelPositionsTable th:nth-child(14), #wheelPositionsTable td:nth-child(14) { width: 6%; }   /* Held ROC */
#wheelPositionsTable th:nth-child(15), #wheelPositionsTable td:nth-child(15) { width: 6%; }   /* Open ROC */
#wheelPositionsTable th:nth-child(16), #wheelPositionsTable td:nth-child(16) { width: 6%; }   /* Collateral */
#wheelPositionsTable th:nth-child(17), #wheelPositionsTable td:nth-child(17) { width: 4%; }  /* Actions */

/* Transaction history: same fixed, evenly-distributed, center-aligned grid as the
   other wheel tables. 11 columns; checkbox + Actions keep room for controls.
   Class shared by body + floating header clone.
   Center must beat `table.recs th.num { text-align: right }` on the float table
   (no #wheelHistoryTable id — only `.wheel-screener-history`). */
table.recs.wheel-screener-history,
.wheel-screener-history { width: 100%; table-layout: fixed; }
#wheelHistoryTable { width: max-content; table-layout: auto; }
table.recs.wheel-screener-history > thead > tr > th,
table.recs.wheel-screener-history > tbody > tr > td,
table.recs.wheel-screener-history > thead > tr > th.num,
table.recs.wheel-screener-history > tbody > tr > td.num,
.wheel-screener-history th, .wheel-screener-history td {
  white-space: nowrap;
  text-align: center;
}
.wheel-screener-history th:nth-child(1),  .wheel-screener-history td:nth-child(1) { width: 4%; }   /* Select */
.wheel-screener-history th:nth-child(2),  .wheel-screener-history td:nth-child(2) { width: 10%; }  /* Date */
.wheel-screener-history th:nth-child(3),  .wheel-screener-history td:nth-child(3) { width: 8%; }   /* Type */
.wheel-screener-history th:nth-child(4),  .wheel-screener-history td:nth-child(4) { width: 8%; }   /* Action */
.wheel-screener-history th:nth-child(5),  .wheel-screener-history td:nth-child(5) { width: 9%; }   /* Ticker */
.wheel-screener-history th:nth-child(6),  .wheel-screener-history td:nth-child(6) { width: 7%; }   /* Side */
.wheel-screener-history th:nth-child(7),  .wheel-screener-history td:nth-child(7) { width: 6%; }   /* Qty */
.wheel-screener-history th:nth-child(8),  .wheel-screener-history td:nth-child(8) { width: 8%; }   /* Price */
.wheel-screener-history th:nth-child(9),  .wheel-screener-history td:nth-child(9) { width: 8%; }   /* Strike */
.wheel-screener-history th:nth-child(10), .wheel-screener-history td:nth-child(10) { width: 10%; }  /* Expiry */
.wheel-screener-history th:nth-child(11), .wheel-screener-history td:nth-child(11) { width: 16%; }  /* Actions */
.wheel-hist-cb-cell { text-align: center; vertical-align: middle; }
.wheel-hist-cb-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--touch-min, 36px); min-height: var(--touch-min, 36px);
  margin: 0; cursor: pointer;
}
.wheel-hist-cb-label input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; cursor: pointer;
}
.wheel-hist-cb-spacer { display: inline-block; width: 16px; height: 16px; }

/* History Type / Action pills (Side reuses .side-badge put/call). */
.hist-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .35px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: lowercase;
  line-height: 1.35;
}
.hist-pill.hist-buy {
  background: rgba(47, 191, 113, .16);
  border: 1px solid rgba(47, 191, 113, .45);
  color: var(--good-bright);
}
.hist-pill.hist-sell {
  background: rgba(239, 69, 101, .14);
  border: 1px solid rgba(239, 69, 101, .45);
  color: var(--bad-bright);
}
.hist-pill.hist-option {
  background: rgba(91, 140, 255, .14);
  border: 1px solid rgba(91, 140, 255, .45);
  color: var(--selective);
}
.hist-pill.hist-stock {
  background: rgba(255, 122, 24, .12);
  border: 1px solid rgba(255, 122, 24, .4);
  color: var(--accent);
}
/* History controls: filters (left) + bulk-select actions (right) share one row.
   The bulk bar lives in reserved right-side space and toggles via `visibility`
   (not `display`) so it never reflows the filters or pushes the table down —
   selecting/clearing rows no longer makes the layout jump. */
.hist-controls-row {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 12px 16px;
}
.hist-controls-row > .filter-bar { flex: 1 1 320px; margin: 0; min-width: 0; }
.wheel-hist-bulk-bar {
  flex: 0 0 auto; margin-left: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px; padding: 8px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.wheel-hist-bulk-bar.hidden { visibility: hidden; }
/* On narrow screens the bar wraps under the filters; there it may collapse fully
   (no reserved gap needed) since everything is already stacked. */
@media (max-width: 720px) {
  .wheel-hist-bulk-bar { width: 100%; margin-left: 0; }
  .wheel-hist-bulk-bar.hidden { display: none; }
}
.wheel-hist-bulk-count { font-size: 13px; font-weight: 600; color: var(--text); }
.wheel-hist-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wheel-hist-bulk-confirm-body {
  white-space: pre-wrap; font-size: 14px; line-height: 1.45; margin: 12px 0 8px;
}
/* WfaConfirm — shared design-system confirm dialog body (newline → paragraphs). */
.wfa-confirm-body { font-size: 14px; line-height: 1.45; margin: 12px 0 4px; }
.wfa-confirm-body p { margin: 0 0 8px; color: var(--text); }
.wfa-confirm-body p:last-child { margin-bottom: 0; }

/* Ticker cell: symbol left, index badges in a 2×2 grid (1 3 / 2 4) beside the ticker. */
.tk-cell { min-width: 0; white-space: nowrap !important; }
.tk-row { display: flex; flex-direction: row; align-items: center; gap: 5px; }
.recs-compact .recs-ticker {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 6px; cursor: pointer; width: fit-content; flex-shrink: 0;
  transition: border-color .12s ease, color .12s ease;
}
.tk-badges { display: inline-flex; flex-wrap: nowrap; gap: 3px; align-items: center; }
.tk-badges.tk-badges-grid {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 1px 2px;
  flex-shrink: 0;
  align-items: center;
}
.idx-g1 { grid-row: 1; grid-column: 1; }
.idx-g2 { grid-row: 2; grid-column: 1; }
.idx-g3 { grid-row: 1; grid-column: 2; }
.idx-g4 { grid-row: 2; grid-column: 2; }
.tk-badges-grid .idx-mini {
  font-size: 7px; padding: 0 3px; letter-spacing: .15px; text-align: center;
  line-height: 1.35; min-width: 22px;
}
.idx-mini {
  display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 4px; border-radius: 3px; line-height: 1.35; cursor: help;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
}
.idx-mini.idx-sp500 { background: rgba(91, 140, 255, .18); border-color: rgba(91, 140, 255, .45); color: var(--idx-sp500); }
.idx-mini.idx-ndx   { background: rgba(123, 97, 255, .18); border-color: rgba(123, 97, 255, .45); color: var(--idx-ndx); }
.idx-mini.idx-dji   { background: rgba(47, 191, 113, .16); border-color: rgba(47, 191, 113, .4); color: var(--good-bright); }
.idx-mini.idx-rut   { background: rgba(245, 166, 35, .16); border-color: rgba(245, 166, 35, .4); color: var(--warn-bright); }
.idx-mini.tip-on, .idx-mini:hover { filter: brightness(1.12); }

/* Held column: puts + stock stacked in one cell, color-coded by position. */
.held-th { cursor: default !important; text-align: right; }
.held-cell { white-space: nowrap !important; text-align: right; }
.held-stack { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; line-height: 1.25; }
.held-line { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.held-line.held-on { color: var(--good); }
.held-line.held-off { color: var(--muted); opacity: .55; font-weight: 600; }
button.held-line {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  line-height: inherit;
}
.held-line.held-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--good) 45%, transparent);
  text-underline-offset: 2px;
}
.held-line.held-clickable:hover,
.held-line.held-clickable:focus-visible {
  filter: brightness(1.12);
  outline: none;
}
.held-k { font-size: 9px; font-weight: 600; letter-spacing: .2px; opacity: .8; }

/* Held-put digest modal: short open-put cards for one ticker (read-only). */
.held-pos-digest {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-height: min(60vh, 520px);
  overflow: auto;
  margin-top: var(--space-sm);
}
.held-pos-card {
  border: 1px solid var(--border);
  border-radius: var(--card-radius, var(--radius-lg));
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  box-shadow: var(--elevation, none);
}
.held-pos-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.held-pos-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.held-pos-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.held-pos-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
}
.held-pos-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.held-pos-metric .lab {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
}
.held-pos-metric .val {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .held-pos-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Put/Call type pill — usual market colors: calls green (bullish), puts red (bearish). */
.side-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 8px; border-radius: var(--radius-pill); text-transform: uppercase;
}
.side-badge.side-call { background: rgba(47, 191, 113, .16); border: 1px solid rgba(47, 191, 113, .45); color: var(--good-bright); }
.side-badge.side-put  { background: rgba(239, 69, 101, .14); border: 1px solid rgba(239, 69, 101, .45); color: var(--bad-bright); }

/* Moneyness pill: OTM (safe) green, ITM (assignment risk) red. */
.mny {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 4px; cursor: help;
}
.mny.mny-otm { background: rgba(47, 191, 113, .16); border: 1px solid rgba(47, 191, 113, .45); color: var(--good-bright); }
.mny.mny-itm { background: rgba(229, 72, 77, .16); border: 1px solid rgba(229, 72, 77, .5); color: var(--bad-bright); }
.mny.mny-na  { color: var(--muted); opacity: .6; }

/* Open-positions ticker cell: the moneyness badge sits to the RIGHT of the symbol
   and only renders for ITM legs (assignment risk); OTM / no-quote rows show no
   badge, so the ticker is always the leftmost, aligned element (no row jump). The
   money filter still uses the full OTM/ITM state — this is display-only. */
.tk-money-row { display: inline-flex; align-items: center; gap: 7px; }
.tk-money {
  display: inline-flex; align-items: center; justify-content: flex-start;
}
.tk-money .mny {
  padding: 1px 5px; font-size: 9px; letter-spacing: .3px; line-height: 1.5;
  border-radius: 4px; cursor: help;
}

/* P/L: stack dollars + percent so wide figures do not bleed into Collateral. */
.pos-pl-cell { line-height: 1.2; vertical-align: middle; }
.pos-pl-cell .pl-amt { display: block; white-space: nowrap; }
.pos-pl-cell .pl-pct { display: block; font-size: 10px; opacity: .85; font-weight: 500; white-space: nowrap; }

/* Open-position row menu (kebab) — matches cs-menu dropdown styling. */
.pos-actions { position: relative; overflow: visible; text-align: center; }
.row-menu { position: relative; display: inline-block; }
.row-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.row-menu-btn:hover,
.row-menu-btn[aria-expanded="true"] {
  border-color: var(--border); background: var(--panel-2); color: var(--text);
}
.row-menu-btn:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 24, .20);
}
.row-menu-pop {
  position: fixed; z-index: 300;
  min-width: 152px; margin: 0; padding: 5px; list-style: none;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--control-radius);
  box-shadow: var(--shadow);
}
.row-menu-pop.hidden { display: none; }
.row-menu-item {
  display: block; width: 100%; text-align: left; padding: 8px 11px;
  border: none; border-radius: 7px; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.row-menu-item:hover { background: rgba(255, 122, 24, .14); }
.row-menu-item-danger { color: var(--bad-bright); }
.row-menu-item-danger:hover { background: rgba(229, 72, 77, .14); }

/* Sortable headers. */
table.recs th[data-sort] { cursor: pointer; user-select: none; }
.wheel-screener-puts th.col-draggable[data-sort],
.wheel-screener-calls th.col-draggable[data-sort] { cursor: grab; }
table.recs th[data-sort]:hover { color: var(--text); }
table.recs th[data-sort] .sort-ind,
.wheel-screener-puts th .sort-ind,
.wheel-screener-calls th .sort-ind {
  display: inline-block; width: 0.75em; margin-left: 2px;
  text-align: center; color: var(--accent); font-size: 10px;
}

/* Underlying cell: ticker click target (compact sizing in .recs-compact above). */
.recs-ticker:hover { color: var(--ember); border-color: var(--accent); }
.recs-ticker .tk-ic { font-size: 10px; opacity: .75; }
/* Income screener: ticker chip + wrapping Description column. */
td.tk-cell.income-tk-cell {
  white-space: nowrap !important;
  vertical-align: middle;
  overflow: visible;
  text-overflow: clip;
}
#incomeTable.income-screener-funds td.income-tk-cell .wheel-star-btn,
#incomeFloatTable.income-screener-funds td.income-tk-cell .wheel-star-btn,
#uikitIncomeEtfDistDemo td.income-tk-cell .wheel-star-btn {
  font-size: 14px;
  min-width: 20px;
  min-height: 20px;
  margin-right: 2px;
}
#incomeTable.income-screener-funds td.income-tk-cell .recs-ticker,
#incomeFloatTable.income-screener-funds td.income-tk-cell .recs-ticker {
  min-width: 0;
}
#incomeTable td.income-desc-cell,
#uikitIncomeTableDemo td.income-desc-cell,
#uikitIncomeFundsDemo td.income-desc-cell {
  white-space: normal !important;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  font-weight: 500;
  overflow: hidden;
  word-break: break-word;
}
.income-screener-footnotes {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.income-screener-footnotes p {
  margin: 0;
}
.income-score-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
/* Income funds: colored dotted underline on Score when a saved fund analysis report exists. */
#incomeTable.income-screener-funds td.income-score-has-report,
#incomeFloatTable.income-screener-funds td.income-score-has-report,
#uikitIncomeEtfDistDemo td.income-score-has-report {
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}
#incomeTable.income-screener-funds td.income-score-report--strong,
#incomeFloatTable.income-screener-funds td.income-score-report--strong,
#uikitIncomeEtfDistDemo td.income-score-report--strong {
  color: var(--good);
  text-decoration-color: color-mix(in srgb, var(--good) 75%, transparent);
}
#incomeTable.income-screener-funds td.income-score-report--mixed,
#incomeFloatTable.income-screener-funds td.income-score-report--mixed,
#uikitIncomeEtfDistDemo td.income-score-report--mixed {
  color: var(--warn);
  text-decoration-color: color-mix(in srgb, var(--warn) 75%, transparent);
}
#incomeTable.income-screener-funds td.income-score-report--weak,
#incomeFloatTable.income-screener-funds td.income-score-report--weak,
#uikitIncomeEtfDistDemo td.income-score-report--weak {
  color: var(--bad);
  text-decoration-color: color-mix(in srgb, var(--bad) 75%, transparent);
}
#incomeTable.income-screener-funds td.income-score-report--insufficient,
#incomeFloatTable.income-screener-funds td.income-score-report--insufficient,
#uikitIncomeEtfDistDemo td.income-score-report--insufficient,
#incomeTable.income-screener-funds td.income-score-report--unknown,
#incomeFloatTable.income-screener-funds td.income-score-report--unknown,
#uikitIncomeEtfDistDemo td.income-score-report--unknown {
  color: var(--muted);
  text-decoration-color: color-mix(in srgb, var(--muted) 75%, transparent);
}
#incomeTable.income-screener-funds td.income-desc-cell,
#uikitIncomeFundsDemo td.income-desc-cell {
  max-height: 2.7em;
}
/* Bonds (notes): content-sized + horizontal scroll (long descriptions). */
#incomeTable:not(.income-screener-funds):not(.income-screener-prefs),
#incomeFloatTable:not(.income-screener-funds):not(.income-screener-prefs) {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}
/* Subtab switch: dim empty table while the next mode loads (avoids stale-row blink). */
.recs-wrap.income-table-busy {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
/* Funds: fit viewport — no horizontal scroll at desktop widths. */
#incomeTable.income-screener-funds,
#incomeFloatTable.income-screener-funds {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
#incomeTable.income-screener-funds th,
#incomeTable.income-screener-funds td,
#incomeFloatTable.income-screener-funds th,
#incomeFloatTable.income-screener-funds td {
  padding-left: 6px;
  padding-right: 6px;
  font-size: 12px;
}
/* Legacy Quality Proxy funds layout (14–15 cols) — not used when .income-screener-etf */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(1),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(1),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(1) { width: 5.5%; }   /* Symbol */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(2),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(2),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(2) { width: 5.5%; }   /* Proxy */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(3),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(3),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(3) { width: 18%; }    /* Description */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(4),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(4),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(4) { width: 6%; }     /* Kind */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(5),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(5),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(5) { width: 8%; }     /* Dist */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(6),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(6),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(6) { width: 5%; }     /* Price */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(7),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(7),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(7) { width: 6%; }     /* NAV */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(8),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(8),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(8) { width: 5.5%; }   /* Prem */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(9),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(9),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(9) { width: 5%; }     /* Day */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(10),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(10),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(10) { width: 6%; }    /* 1Y Price */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(11),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(11),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(11) { width: 5.5%; }  /* Mkt */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(12),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(12),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(12) { width: 5%; }    /* 200d */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(13),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(13),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(13) { width: 4.5%; }  /* Beta */
#incomeTable.income-screener-funds:not(.income-screener-etf) th:nth-child(14),
#incomeTable.income-screener-funds:not(.income-screener-etf) td:nth-child(14),
#incomeFloatTable.income-screener-funds:not(.income-screener-etf) th:nth-child(14) { width: 5%; }   /* $ Vol */

/* ETF Elite layout (15 cols, no Cap): Symbol, Score, Desc, Category, Type, Dist TTM, 1Y TR, SI TR, Price, NAV, Prem, Exp, AUM, Beta, $Vol */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(1),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(1),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(1) { width: 4.5%; }    /* Symbol */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(2),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(2),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(2) { width: 4%; }      /* Score */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(3),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(3),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(3) { width: 12%; }     /* Description */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(4),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(4),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(4) { width: 10%; }     /* Category */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(5),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(5),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(5) { width: 4.5%; }    /* Type */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(6),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(6),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(6) { width: 4.5%; }    /* Dist TTM */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(7),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(7),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(7) { width: 4%; }      /* 1Y TR */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(8),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(8),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(8) { width: 4%; }      /* SI TR */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(9),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(9),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(9) { width: 4%; }      /* Price */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(10),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(10),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(10) { width: 4%; }     /* NAV */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(11),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(11),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(11) { width: 4%; }     /* Prem */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(12),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(12),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(12) { width: 3.5%; }   /* Exp */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(13),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(13),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(13) { width: 4.5%; }   /* AUM */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(14),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(14),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(14) { width: 3.5%; }   /* Beta */
#incomeTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(15),
#incomeTable.income-screener-etf:not(.income-screener-etf-at) td:nth-child(15),
#incomeFloatTable.income-screener-etf:not(.income-screener-etf-at) th:nth-child(15) { width: 4.5%; }   /* $ Vol */

/* ETF Elite + Yield AT (16 cols): … Dist TTM, Yield AT, 1Y TR … */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(1),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(1),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(1) { width: 5%; }
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(2),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(2),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(2) { width: 3.5%; }
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(3),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(3),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(3) { width: 10.5%; }
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(4),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(4),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(4) { width: 8.5%; }
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(5),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(5),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(5) { width: 4%; }
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(6),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(6),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(6) { width: 4%; }      /* Dist TTM */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(7),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(7),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(7) { width: 4.5%; }    /* Yield AT */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(8),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(8),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(8) { width: 3.5%; }    /* 1Y TR */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(9),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(9),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(9) { width: 3.5%; }    /* SI TR */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(10),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(10),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(10) { width: 3.5%; }   /* Price */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(11),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(11),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(11) { width: 3.5%; }   /* NAV */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(12),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(12),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(12) { width: 3.5%; }   /* Prem */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(13),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(13),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(13) { width: 3%; }     /* Exp */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(14),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(14),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(14) { width: 4%; }     /* AUM */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(15),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(15),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(15) { width: 3%; }     /* Beta */
#incomeTable.income-screener-etf.income-screener-etf-at th:nth-child(16),
#incomeTable.income-screener-etf.income-screener-etf-at td:nth-child(16),
#incomeFloatTable.income-screener-etf.income-screener-etf-at th:nth-child(16) { width: 4%; }     /* $ Vol */
/* Category: wrap up to 2 lines when the label is long (clamp on inner span). */
#incomeTable.income-screener-etf td.income-etf-cat,
#incomeFloatTable.income-screener-etf td.income-etf-cat,
#uikitIncomeEtfDistDemo td.income-etf-cat {
  white-space: normal !important;
  max-width: 0; /* keep column width under table-layout:fixed */
  vertical-align: middle;
  text-align: left;
  overflow: hidden;
}
#incomeTable.income-screener-etf td.income-etf-cat .income-etf-cat-text,
#incomeFloatTable.income-screener-etf td.income-etf-cat .income-etf-cat-text,
#uikitIncomeEtfDistDemo td.income-etf-cat .income-etf-cat-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
}
/* Type stays compact one-line. */
#incomeTable.income-screener-etf td.income-etf-type,
#incomeFloatTable.income-screener-etf td.income-etf-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}
#incomeTable td.income-num[data-tip],
#uikitIncomeFundsDemo td.income-num[data-tip],
#uikitIncomeBondsDemo td.income-num[data-tip] {
  cursor: help;
}

/* Income screener — phone/tablet: horizontal scroll + readable mins (avoid crushed
   fixed % columns). Bonds already use max-content; funds/preferreds switch here. */
@media (max-width: 768px) {
  #incomeTable.income-screener-funds,
  #incomeFloatTable.income-screener-funds,
  #incomeTable.income-screener-prefs,
  #incomeFloatTable.income-screener-prefs,
  #uikitIncomeFundsDemo,
  #uikitIncomeEtfDistDemo,
  #uikitIncomeTableDemo.income-screener-prefs {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }
  #incomeTable.income-screener-funds th,
  #incomeTable.income-screener-funds td,
  #incomeFloatTable.income-screener-funds th,
  #incomeFloatTable.income-screener-funds td,
  #incomeTable.income-screener-prefs th,
  #incomeTable.income-screener-prefs td,
  #incomeFloatTable.income-screener-prefs th,
  #incomeFloatTable.income-screener-prefs td,
  #uikitIncomeFundsDemo th,
  #uikitIncomeFundsDemo td,
  #uikitIncomeEtfDistDemo th,
  #uikitIncomeEtfDistDemo td,
  #uikitIncomeTableDemo.income-screener-prefs th,
  #uikitIncomeTableDemo.income-screener-prefs td {
    width: auto;
    max-width: none;
  }
  #incomeTable.income-screener-funds th:nth-child(1),
  #incomeTable.income-screener-funds td:nth-child(1),
  #incomeFloatTable.income-screener-funds th:nth-child(1),
  #incomeTable.income-screener-prefs th:nth-child(1),
  #incomeTable.income-screener-prefs td:nth-child(1),
  #incomeFloatTable.income-screener-prefs th:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--panel);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.25);
  }
  #incomeTable.income-screener-etf td.income-etf-cat,
  #incomeFloatTable.income-screener-etf td.income-etf-cat,
  #uikitIncomeEtfDistDemo td.income-etf-cat {
    max-width: 140px;
    min-width: 88px;
  }
  #incomeTable.income-screener-etf td.income-etf-type,
  #incomeFloatTable.income-screener-etf td.income-etf-type {
    max-width: 72px;
    min-width: 48px;
  }
  #incomeTable.income-screener-funds td.income-desc-cell,
  #uikitIncomeFundsDemo td.income-desc-cell,
  #uikitIncomeEtfDistDemo td.income-desc-cell {
    max-height: none;
    min-width: 120px;
    max-width: 180px;
    white-space: normal;
    text-align: left;
  }
  #incomeTable.income-screener-etf th:nth-child(1),
  #incomeTable.income-screener-etf td:nth-child(1),
  #incomeFloatTable.income-screener-etf th:nth-child(1) {
    min-width: 52px;
  }
  #incomeTable.income-screener-etf th:nth-child(n + 2),
  #incomeTable.income-screener-etf td:nth-child(n + 2),
  #incomeFloatTable.income-screener-etf th:nth-child(n + 2),
  #incomeFloatTable.income-screener-etf td:nth-child(n + 2) {
    min-width: 44px;
  }
}

#incomeTable th,
#incomeTable td,
#incomeFloatTable th,
#uikitIncomeTableDemo th,
#uikitIncomeTableDemo td,
#uikitIncomeFundsDemo th,
#uikitIncomeFundsDemo td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
/* Preferreds: Funds-style fit — no desktop horizontal scroll. */
#incomeTable.income-screener-prefs,
#incomeFloatTable.income-screener-prefs,
#uikitIncomeTableDemo.income-screener-prefs {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 11px;
}
#incomeTable.income-screener-prefs th,
#incomeTable.income-screener-prefs td,
#incomeFloatTable.income-screener-prefs th,
#incomeFloatTable.income-screener-prefs td,
#uikitIncomeTableDemo.income-screener-prefs th,
#uikitIncomeTableDemo.income-screener-prefs td {
  padding: 3px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#incomeTable.income-screener-prefs th,
#incomeFloatTable.income-screener-prefs th,
#uikitIncomeTableDemo.income-screener-prefs th {
  line-height: 1.15;
  font-weight: 600;
}
/* Column budget (18 cols) — Symbol / Issuer first; sums ~100%. */
#incomeTable.income-screener-prefs th:nth-child(1),
#incomeTable.income-screener-prefs td:nth-child(1),
#incomeFloatTable.income-screener-prefs th:nth-child(1) { width: 5.5%; }  /* Symbol */
#incomeTable.income-screener-prefs th:nth-child(2),
#incomeTable.income-screener-prefs td:nth-child(2),
#incomeFloatTable.income-screener-prefs th:nth-child(2) { width: 5%; }    /* Issuer */
#incomeTable.income-screener-prefs th:nth-child(3),
#incomeTable.income-screener-prefs td:nth-child(3),
#incomeFloatTable.income-screener-prefs th:nth-child(3) { width: 4%; }    /* QI */
#incomeTable.income-screener-prefs th:nth-child(4),
#incomeTable.income-screener-prefs td:nth-child(4),
#incomeFloatTable.income-screener-prefs th:nth-child(4) { width: 5%; }    /* Class */
#incomeTable.income-screener-prefs th:nth-child(5),
#incomeTable.income-screener-prefs td:nth-child(5),
#incomeFloatTable.income-screener-prefs th:nth-child(5) { width: 4.5%; }  /* Rate */
#incomeTable.income-screener-prefs th:nth-child(6),
#incomeTable.income-screener-prefs td:nth-child(6),
#incomeFloatTable.income-screener-prefs th:nth-child(6) { width: 7%; }    /* Rating */
#incomeTable.income-screener-prefs th:nth-child(7),
#incomeTable.income-screener-prefs td:nth-child(7),
#incomeFloatTable.income-screener-prefs th:nth-child(7) { width: 4.5%; }  /* Price */
#incomeTable.income-screener-prefs th:nth-child(8),
#incomeTable.income-screener-prefs td:nth-child(8),
#incomeFloatTable.income-screener-prefs th:nth-child(8) { width: 4%; }    /* Liq */
#incomeTable.income-screener-prefs th:nth-child(9),
#incomeTable.income-screener-prefs td:nth-child(9),
#incomeFloatTable.income-screener-prefs th:nth-child(9) { width: 4.5%; }  /* D/P % */
#incomeTable.income-screener-prefs th:nth-child(10),
#incomeTable.income-screener-prefs td:nth-child(10),
#incomeFloatTable.income-screener-prefs th:nth-child(10) { width: 4%; }   /* Cpn % */
#incomeTable.income-screener-prefs th:nth-child(11),
#incomeTable.income-screener-prefs td:nth-child(11),
#incomeFloatTable.income-screener-prefs th:nth-child(11) { width: 4%; }   /* Ann $ */
#incomeTable.income-screener-prefs th:nth-child(12),
#incomeTable.income-screener-prefs td:nth-child(12),
#incomeFloatTable.income-screener-prefs th:nth-child(12) { width: 4%; }   /* CY % */
#incomeTable.income-screener-prefs th:nth-child(13),
#incomeTable.income-screener-prefs td:nth-child(13),
#incomeFloatTable.income-screener-prefs th:nth-child(13) { width: 4%; }   /* YTC % */
#incomeTable.income-screener-prefs th:nth-child(14),
#incomeTable.income-screener-prefs td:nth-child(14),
#incomeFloatTable.income-screener-prefs th:nth-child(14) { width: 4%; }   /* Call */
#incomeTable.income-screener-prefs th:nth-child(15),
#incomeTable.income-screener-prefs td:nth-child(15),
#incomeFloatTable.income-screener-prefs th:nth-child(15) { width: 6.5%; } /* Opt */
#incomeTable.income-screener-prefs th:nth-child(16),
#incomeTable.income-screener-prefs td:nth-child(16),
#incomeFloatTable.income-screener-prefs th:nth-child(16) { width: 4%; }   /* G/L % */
#incomeTable.income-screener-prefs th:nth-child(17),
#incomeTable.income-screener-prefs td:nth-child(17),
#incomeFloatTable.income-screener-prefs th:nth-child(17) { width: 3%; }   /* Cum */
#incomeTable.income-screener-prefs th:nth-child(18),
#incomeTable.income-screener-prefs td:nth-child(18),
#incomeFloatTable.income-screener-prefs th:nth-child(18) { width: 5.5%; } /* $Vol */
/* Issuer + Symbol headers/cells — left; other Preferreds cols stay center. */
#incomeTable.income-screener-prefs td.income-issuer-cell,
#incomeFloatTable.income-screener-prefs td.income-issuer-cell,
#uikitIncomeTableDemo.income-screener-prefs td.income-issuer-cell {
  text-align: left;
}
/* Desktop: Preferreds fit panel — avoid needless h-scroll gutter. */
@media (min-width: 1100px) {
  .recs-hscroll:has(#incomeTable.income-screener-prefs) {
    overflow-x: hidden;
  }
}
/* Bonds / non-prefs description cell keeps a readable floor. */
#incomeTable:not(.income-screener-funds):not(.income-screener-prefs) td.income-desc-cell,
#incomeTable.income-screener-bonds td.income-desc-cell {
  min-width: 12rem;
  max-width: 22rem;
  white-space: normal;
}
#incomeTable:not(.income-screener-funds) td.income-desc-cell,
#uikitIncomeTableDemo.income-screener-prefs td.income-desc-cell {
  white-space: normal;
}
/* Prefer content-sized Preferreds table kept above; Funds overrides win via specificity. */
#incomeTable td.income-desc-cell {
  min-width: 0;
  max-width: none;
}
/* Preferreds Description still needs a readable floor when auto-layout (bonds path). */
#incomeTable:not(.income-screener-funds):not(.income-screener-prefs) td.income-desc-cell {
  min-width: 12rem;
  max-width: 22rem;
}
/* Funds/Bonds: first column (Symbol) left; other Income cols default center. */
#incomeTable th:first-child,
#incomeTable td:first-child,
#incomeTable td.income-tk-cell,
#incomeFloatTable th:first-child,
#uikitIncomeTableDemo th:first-child,
#uikitIncomeTableDemo td:first-child,
#uikitIncomeTableDemo td.income-tk-cell,
#uikitIncomeFundsDemo th:first-child,
#uikitIncomeFundsDemo td:first-child,
#uikitIncomeFundsDemo td.income-tk-cell {
  text-align: left;
}
/* Preferreds: center by default; Symbol + Issuer left (headers match cells). */
#incomeTable.income-screener-prefs th,
#incomeTable.income-screener-prefs td,
#incomeFloatTable.income-screener-prefs th,
#incomeFloatTable.income-screener-prefs td,
#uikitIncomeTableDemo.income-screener-prefs th,
#uikitIncomeTableDemo.income-screener-prefs td {
  text-align: center;
}
#incomeTable.income-screener-prefs th.income-num,
#incomeTable.income-screener-prefs td.income-num,
#incomeFloatTable.income-screener-prefs th.income-num,
#incomeFloatTable.income-screener-prefs td.income-num,
#uikitIncomeTableDemo.income-screener-prefs th.income-num,
#uikitIncomeTableDemo.income-screener-prefs td.income-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#incomeTable.income-screener-prefs th:nth-child(1),
#incomeTable.income-screener-prefs td:nth-child(1),
#incomeTable.income-screener-prefs th:nth-child(2),
#incomeTable.income-screener-prefs td:nth-child(2),
#incomeTable.income-screener-prefs td.income-tk-cell,
#incomeTable.income-screener-prefs td.income-issuer-cell,
#incomeFloatTable.income-screener-prefs th:nth-child(1),
#incomeFloatTable.income-screener-prefs td:nth-child(1),
#incomeFloatTable.income-screener-prefs th:nth-child(2),
#incomeFloatTable.income-screener-prefs td:nth-child(2),
#incomeFloatTable.income-screener-prefs td.income-tk-cell,
#incomeFloatTable.income-screener-prefs td.income-issuer-cell,
#uikitIncomeTableDemo.income-screener-prefs th:nth-child(1),
#uikitIncomeTableDemo.income-screener-prefs td:nth-child(1),
#uikitIncomeTableDemo.income-screener-prefs th:nth-child(2),
#uikitIncomeTableDemo.income-screener-prefs td:nth-child(2),
#uikitIncomeTableDemo.income-screener-prefs td.income-tk-cell,
#uikitIncomeTableDemo.income-screener-prefs td.income-issuer-cell {
  text-align: left;
}
#incomeTable.income-screener-prefs td.income-tk-cell .tk-row,
#incomeFloatTable.income-screener-prefs td.income-tk-cell .tk-row,
#uikitIncomeTableDemo.income-screener-prefs td.income-tk-cell .tk-row {
  justify-content: flex-start;
}
/* Reference rating band colors (descriptive agency bands — not advice). */
#incomeTable td.income-rating--ig,
#uikitIncomeTableDemo td.income-rating--ig,
#uikitIncomeBondsDemo td.income-rating--ig {
  color: var(--good);
  font-weight: 600;
}
#incomeTable td.income-rating--spec,
#uikitIncomeTableDemo td.income-rating--spec,
#uikitIncomeBondsDemo td.income-rating--spec {
  color: var(--warn);
  font-weight: 600;
}
#incomeTable td.income-rating--high-spec,
#uikitIncomeTableDemo td.income-rating--high-spec,
#uikitIncomeBondsDemo td.income-rating--high-spec {
  color: color-mix(in srgb, var(--warn) 35%, var(--bad) 65%);
  font-weight: 600;
}
#incomeTable td.income-rating--distressed,
#uikitIncomeTableDemo td.income-rating--distressed,
#uikitIncomeBondsDemo td.income-rating--distressed {
  color: var(--bad);
  font-weight: 600;
}
td.income-flags-cell .income-flag-row {
  justify-content: center;
  width: 100%;
}
#incomeTable td.income-miss,
#uikitIncomeFundsDemo td.income-miss {
  white-space: nowrap !important;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  cursor: help;
}
/* Income metric tones — descriptive direction only (not a recommendation). */
#incomeTable td.income-num,
#uikitIncomeTableDemo td.income-num,
#uikitIncomeFundsDemo td.income-num,
#uikitIncomeBondsDemo td.income-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#incomeTable td.income-num--up,
#uikitIncomeTableDemo td.income-num--up,
#uikitIncomeFundsDemo td.income-num--up,
#uikitIncomeBondsDemo td.income-num--up {
  color: var(--good);
}
#incomeTable td.income-num--down,
#uikitIncomeTableDemo td.income-num--down,
#uikitIncomeFundsDemo td.income-num--down,
#uikitIncomeBondsDemo td.income-num--down {
  color: var(--bad);
}
#incomeTable td.income-num--warn,
#uikitIncomeTableDemo td.income-num--warn,
#uikitIncomeFundsDemo td.income-num--warn,
#uikitIncomeBondsDemo td.income-num--warn {
  color: var(--warn);
}
/* Bonds maturity terms quality — colored text, not pill badges */
#incomeTable td.income-maturity--official,
#uikitIncomeBondsDemo td.income-maturity--official {
  color: var(--good);
}
#incomeTable td.income-maturity--reference,
#uikitIncomeBondsDemo td.income-maturity--reference {
  color: var(--warn);
}
#incomeTable td.income-maturity--provisional,
#incomeTable td.income-maturity--unknown,
#uikitIncomeBondsDemo td.income-maturity--provisional,
#uikitIncomeBondsDemo td.income-maturity--unknown {
  color: var(--muted);
}
#incomeDetailModal .insight-block .fund-grid {
  margin-top: 8px;
}
#incomeDetailModal .fund-cell-span {
  grid-column: 1 / -1;
}
.income-dist-chart {
  margin-top: var(--space-md, 12px);
  padding: var(--space-md, 12px);
  border-radius: var(--radius-md, 8px);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 92%, transparent);
  /* Chart series — SVG inline attrs reference these (theme-aware). */
  --dist-chart-bar-up: var(--good);
  --dist-chart-bar-down: var(--warn);
  --dist-chart-mean: var(--ember);
  --dist-chart-ma: var(--good);
  --dist-chart-grid: var(--border);
  --dist-chart-axis: var(--muted);
  --dist-chart-band: var(--accent);
}
.income-dist-chart-box {
  width: 100%;
  margin-bottom: 0;
}
.income-dist-chart-box svg.income-dist-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-width: none;
}
#incomeDetailModal #incomeDetailDistBlock #incomeDetailDistChart.income-dist-chart {
  width: calc(100% + 28px);
  max-width: none;
  margin-left: -14px;
  margin-right: -14px;
  margin-bottom: -12px;
  border-radius: 0 0 var(--control-radius) var(--control-radius);
  border-left: none;
  border-right: none;
  box-sizing: border-box;
}
.income-dist-chart-box .hcol {
  cursor: crosshair;
}
.income-dist-chart-box .hcol:hover {
  fill: rgba(255, 255, 255, 0.05);
}
.income-dist-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 8px;
}
.income-dist-chart-legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}
.income-dist-chart-legend .swatch-mean { background: var(--dist-chart-mean, var(--ember)); }
.income-dist-chart-legend .swatch-band {
  background: color-mix(in srgb, var(--dist-chart-band, var(--accent)) 35%, transparent);
}
.income-dist-chart-legend .swatch-ma { background: var(--dist-chart-ma, var(--good)); }
.income-dist-chart-legend .swatch-above-mean {
  background: var(--dist-chart-bar-up, var(--good));
}
.income-dist-chart-legend .swatch-below-mean {
  background: var(--dist-chart-bar-down, var(--warn));
}
.income-dist-chart-legend .swatch-up { background: var(--good); }
.income-dist-chart-legend .swatch-down { background: var(--warn); }
.income-dist-chart-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  margin-top: 10px;
  align-items: stretch;
}
.income-dist-chart-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 4.5rem;
  gap: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.income-dist-chart-stat .k {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  min-height: 2.35em;
  line-height: 1.25;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex-shrink: 0;
}
.income-dist-chart-stat .k .hint {
  font-size: 10px;
  text-transform: none;
  letter-spacing: normal;
  flex-shrink: 0;
  margin-top: 0;
}
.income-dist-chart-stat .v {
  min-height: 2.35em;
  margin-top: auto;
  padding-top: 4px;
  font-size: 13px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.income-dist-chart-note,
.income-dist-chart-empty {
  margin: 8px 0 0;
}
#uikitIncomeDistChartDemo.income-dist-chart {
  max-width: 680px;
}
.income-holdings {
  margin-top: 4px;
}
.income-holdings-meta {
  margin: 0 0 8px;
}
.income-holdings-foot {
  margin: 8px 0 0;
}
.income-holdings-empty {
  margin: 4px 0 0;
}
.income-detail-loading {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 6px);
  border: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 88%, transparent);
}
.income-holdings-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.income-holdings-table {
  min-width: 520px;
}
.income-holdings-table th.income-num,
.income-holdings-table td.income-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.income-holdings-ticker {
  white-space: nowrap;
  font-weight: 600;
}
.income-holdings-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.income-holdings-good {
  color: var(--good);
}
.income-holdings-bad {
  color: var(--warn);
}
@media (max-width: 720px) {
  .income-holdings-table .hidden-sm {
    display: none;
  }
}
/* Preferred structure-flag icons (Nano Banana 2). */
.income-flag-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.income-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 88%, transparent);
  cursor: help;
  outline: none;
}
.income-flag:hover,
.income-flag:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.income-flag-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
td.income-flags-cell {
  white-space: nowrap !important;
  vertical-align: middle;
  min-width: 7rem;
}
/* Highlight screen — gold left rail + soft row wash (not a ticker chip).
   Can coexist with `.is-tk-exp--*` concentration chips on the same row. */
.recs tr.is-golden-row {
  background: linear-gradient(
    90deg,
    rgba(201, 162, 39, 0.16) 0%,
    rgba(201, 162, 39, 0.07) 28%,
    transparent 72%
  );
  box-shadow: inset 3px 0 0 #c9a227;
}
.recs tr.is-golden-row:hover {
  background: linear-gradient(
    90deg,
    rgba(201, 162, 39, 0.22) 0%,
    rgba(201, 162, 39, 0.10) 32%,
    rgba(255, 255, 255, 0.02) 72%
  );
}
/* Puts ticker-weight chips — chrome only; text color from unified --exp-* block above. */
.recs-ticker.is-tk-exp--light-green {
  border-color: color-mix(in srgb, var(--exp-light-green) 55%, transparent);
  background: color-mix(in srgb, var(--exp-light-green) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exp-light-green) 28%, transparent);
}
.recs-ticker.is-tk-exp--light-green:hover {
  border-color: color-mix(in srgb, var(--exp-light-green) 75%, transparent);
  color: color-mix(in srgb, var(--exp-light-green) 70%, white 30%);
}
.recs-ticker.is-tk-exp--green {
  border-color: color-mix(in srgb, var(--exp-green) 70%, transparent);
  background: color-mix(in srgb, var(--exp-green) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exp-green) 40%, transparent);
}
.recs-ticker.is-tk-exp--green:hover {
  border-color: var(--exp-green);
  color: var(--exp-green);
}
.recs-ticker.is-tk-exp--orange {
  border-color: var(--exp-heating);
  background: color-mix(in srgb, var(--exp-heating) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exp-heating) 45%, transparent);
}
.recs-ticker.is-tk-exp--orange:hover {
  border-color: color-mix(in srgb, var(--exp-heating) 70%, var(--bad) 30%);
  color: color-mix(in srgb, var(--exp-heating) 70%, var(--bad) 30%);
}
.recs-ticker.is-tk-exp--red {
  border-color: color-mix(in srgb, var(--exp-alert) 70%, transparent);
  background: color-mix(in srgb, var(--exp-alert) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exp-alert) 40%, transparent);
}
.recs-ticker.is-tk-exp--red:hover {
  border-color: var(--exp-alert);
  color: var(--exp-alert);
}
.recs-ticker.is-tk-exp--critical {
  border-color: var(--exp-critical-chrome);
  background: var(--exp-critical-fill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exp-critical-chrome) 75%, transparent);
}
.recs-ticker.is-tk-exp--critical:hover {
  border-color: #991b1b;
  color: var(--exp-alert);
}

/* ROI emphasis: green when strong, ember when moderate. */
.roi-strong { color: var(--good); font-weight: 700; }
.roi-mid { color: var(--ember); font-weight: 600; }
.roi-loss { color: var(--bad); font-weight: 700; }

/* Colored index membership badges. */
.index-chip.idx-sp500 { background: rgba(91, 140, 255, .18); border-color: rgba(91, 140, 255, .55); color: var(--idx-sp500); }
.index-chip.idx-ndx   { background: rgba(123, 97, 255, .18); border-color: rgba(123, 97, 255, .55); color: var(--idx-ndx); }
.index-chip.idx-dji   { background: rgba(47, 191, 113, .16); border-color: rgba(47, 191, 113, .5); color: var(--good-bright); }
.index-chip.idx-rut   { background: rgba(245, 166, 35, .16); border-color: rgba(245, 166, 35, .5); color: var(--warn-bright); }

/* Stock-analysis modal: links + fundamentals grid. */
/* Unified header → table/content spacing across every tab & sub-tab:
   22px above the subheader (separates it from the block above) and 12px
   below (gap to the table/chart that follows). Plain subheaders use
   .insight-h; header rows that also hold an action button keep the <h4> at
   margin:0 and put the same margin on the row via .section-head so the gaps
   stay identical everywhere. */
.insight-h { margin: 22px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
/* Closed panel for Analyst forecast (wheel insight + report popup) — same surface
   language as .fund-cell so the section reads as its own block. */
.insight-block {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 12px 14px;
  margin: 16px 0 0;
}
.insight-block .insight-h { margin: 0 0 10px; }
.insight-block .insight-analyst { margin: 0; }
.insight-block .insight-company-desc { margin: 0; }
.insight-company-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  max-height: min(28vh, 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.insight-company-desc.is-loading {
  min-height: 2.75em;
  max-height: none;
  overflow-y: hidden;
}
.insight-company-desc p { margin: 0; }
.insight-company-desc p + p { margin-top: 0.65em; }
.section-head { margin: 22px 0 12px; }

/* Collapsible sections (native <details>/<summary>). */
.collapsible { margin: 18px 0 0; }
.collapsible > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px;
  user-select: none; outline: none; margin: 0;
}
.collapsible[open] > summary { margin-bottom: 10px; }
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.collapsible[open] > summary::before { transform: rotate(45deg); }
.collapsible > summary:hover { color: var(--text); }
.collapsible > summary:hover::before { border-color: var(--accent); }
.collapsible > summary:focus-visible { color: var(--text); text-decoration: underline; }
/* Current-price line under the popup header (wheel analysis + report popup). */
.insight-price { font-size: 14px; color: var(--text); }
.insight-price .insight-price-k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin-right: 6px; }
.insight-price .insight-price-v { font-weight: 700; }
.insight-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.insight-links a, .insight-links button {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 9px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; box-shadow: none;
}
.insight-links a:hover, .insight-links button:hover { border-color: var(--accent); color: var(--ember); }
.fund-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 720px) { .fund-grid { grid-template-columns: repeat(2, 1fr); } }
.fund-cell {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--control-radius); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.fund-cell .fund-k { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.fund-cell .fund-v { font-size: 15px; font-weight: 700; color: var(--text); }
.fund-cell .fund-v.fund-good { color: var(--good); }
.fund-cell .fund-v.fund-bad { color: var(--bad); }
/* Exposure fund hues: see unified --exp-* block (sector-exp / fund-exp / fund-tk-exp / is-tk-exp). */
/* Missing values show a reason instead of a bare N/A. */
.fund-cell .fund-v.fund-na { font-size: 12px; font-weight: 500; font-style: italic; color: var(--muted); }
.fund-cell .fund-v.fund-na .fund-tax-settings-link {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fund-cell .fund-v.fund-na .fund-tax-settings-link:hover { color: var(--ember); }
.fund-cell .fund-sub {
  font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.2;
}
.fund-cell .fund-sub.fund-good { color: var(--good); }
.fund-cell .fund-sub.fund-bad { color: var(--bad); }
.fund-cell .fund-sub.fund-warn { color: var(--warn); }

/* Per-ticker stock transactions inside the insight popup. */
.insight-txns { margin-top: 6px; }
.insight-txns table.recs { margin: 0; }
.insight-txns th.acts, .insight-txns td.acts { width: 140px; text-align: right; white-space: nowrap; }

/* Analyst consensus + price target block. */
.insight-analyst { display: flex; flex-direction: column; gap: 8px; }
.analyst-head { display: flex; align-items: baseline; gap: 8px; }
.analyst-rating { font-size: 16px; font-weight: 800; color: var(--text); }
.analyst-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.analyst-bar span { height: 100%; display: inline-block; }
.seg-sbuy { background: var(--analyst-strong-buy); }
.seg-buy { background: var(--analyst-buy); }
.seg-hold { background: var(--analyst-hold); }
.seg-sell { background: var(--analyst-sell); }
.seg-ssell { background: var(--analyst-strong-sell); }
.analyst-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--muted); }
.analyst-legend span { display: inline-flex; align-items: center; gap: 4px; }
.analyst-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.analyst-pt { font-size: 14px; color: var(--text); }

/* Analyst price vs third-party target range (low–high band).
   Track = expanded domain (includes current price when outside the band).
   .analyst-pt-band = published low→high segment; outside stays muted. */
.analyst-pt-range { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.analyst-pt-track {
  position: relative; padding: 18px 0 0;
}
.analyst-pt-track-core {
  position: relative; height: 12px; border-radius: 6px; overflow: visible;
  background: var(--panel-2);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.analyst-pt-band {
  position: absolute; top: 0; bottom: 0; border-radius: 5px;
  background: linear-gradient(
    90deg,
    rgba(91, 140, 255, .35) 0%,
    rgba(47, 191, 113, .40) 50%,
    rgba(255, 122, 24, .32) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.analyst-pt-range--below .analyst-pt-track-core,
.analyst-pt-range--above .analyst-pt-track-core {
  background: color-mix(in srgb, var(--panel-2) 88%, var(--warn) 12%);
}
.analyst-pt-range--above .analyst-pt-track-core {
  background: color-mix(in srgb, var(--panel-2) 88%, var(--good) 12%);
}
.analyst-pt-avg {
  position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; z-index: 1;
  background: var(--ember); border-radius: 1px; opacity: .95;
  box-shadow: 0 0 0 1px rgba(10, 13, 18, .35);
}
.analyst-pt-pin {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none;
}
.analyst-pt-pin-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--text); border: 2px solid var(--steel);
  box-shadow: 0 0 0 2px rgba(10, 13, 18, .55), 0 2px 8px rgba(0, 0, 0, .35);
}
.analyst-pt-range--below .analyst-pt-pin-dot { border-color: var(--warn); }
.analyst-pt-range--above .analyst-pt-pin-dot { border-color: var(--good); }
.analyst-pt-pin-label {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap;
  padding: 2px 7px; border-radius: var(--radius-xs);
  background: rgba(20, 25, 34, .94); border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
/* Keep the Now chip inside the panel when the pin sits on either edge.
   Near-start: left edge lines up with the track / rating-legend (green square). */
.analyst-pt-pin--near-start .analyst-pt-pin-label {
  left: 50%; transform: none;
}
.analyst-pt-pin--near-end .analyst-pt-pin-label {
  left: 50%; transform: translateX(-100%);
}
.analyst-pt-scale {
  position: relative; height: 22px; margin-top: 4px;
}
.analyst-pt-tick {
  position: absolute; top: 0; display: flex; flex-direction: column; align-items: center;
  font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.2;
  pointer-events: none; white-space: nowrap;
}
.analyst-pt-tick i {
  display: block; width: 1px; height: 5px; background: var(--border-hover); margin-bottom: 2px;
}
.analyst-pt-tick b { font-weight: 600; color: var(--text-soft); }
.analyst-pt-tick--avg b { color: var(--ember); }
.analyst-pt-tick--now b { color: var(--text); }
.analyst-pt-tick--center { transform: translateX(-50%); }
.analyst-pt-tick--start { transform: translateX(0); align-items: flex-start; }
.analyst-pt-tick--end { transform: translateX(-100%); align-items: flex-end; }
.analyst-pt-range-note { margin: 0; line-height: 1.4; }

/* KPI hero cards (Performance + Analytics tabs). */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 6px; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 14px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.kpi-k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.kpi-v {
  font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15;
}
/* Secondary line under the hero number (month tag, $ split, share %). */
.kpi-sub {
  margin-top: auto; padding-top: 2px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Filter toolbar (Closed trades, etc.). Overrides the global input width:100%
   so controls keep a fixed size and align in a single wrapping row. */
/* Unified header → filter → table rhythm: every filter bar sits 12px below its
   header (collapses with the header's 12px bottom margin) and 12px above the
   table/content that follows, matching the plain header → table gap. Both
   .filter-bar and the compact .recs-filter-bar use the same values so the
   spacing is identical across My reports, Puts/Calls/Options, Analytics and
   Transaction history. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0 12px; }
.filter-field { display: flex; flex-direction: column; gap: 5px; }
.filter-field > label { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.filter-field input, .filter-field select, .filter-field .cs { width: 170px; }
.filter-field input[type="text"] { text-transform: uppercase; }

/* Unified filter-control sizing — every control inside a .filter-field (text
   inputs, native + custom selects, datepicker triggers and the segmented chip
   track) renders at the SAME height and typography, so each filter row lines up
   regardless of control type. Covers My reports, Put/Call screeners, Analytics
   and Transaction history (all use .filter-bar > .filter-field). 35px == the
   segmented-chip track height, so fields match the chips exactly. */
.filter-field input,
.filter-field select,
.filter-field .cs-trigger,
.filter-field .dp-trigger {
  box-sizing: border-box; height: 35px; min-height: 35px;
  padding: 0 12px; font-size: 13px; font-weight: 500; border-radius: var(--control-radius);
}
/* The chip track matches the field height when single-row, but may wrap (e.g. the
   DTE buckets), so use min-height — never a fixed height — to avoid clipping a
   second row of chips. */
.filter-field .year-chips {
  box-sizing: border-box; min-height: 35px; padding: 0 3px; align-items: center;
}
/* Wider search/text field inside a filter bar — grows on desktop, caps width. */
.filter-field-grow { flex: 1 1 200px; min-width: 180px; max-width: 280px; }
.filter-field-grow input,
.filter-field-grow select,
.filter-field-grow .cs { width: 100%; }

/* Admin · Operations center */
.ops-overall .ops-pill {
  display: inline-block; font-size: 15px; font-weight: 700; padding: 8px 16px;
  border-radius: var(--radius-pill); text-transform: capitalize;
}
.ops-pill.healthy { background: rgba(46, 160, 67, .18); color: var(--good); }
.ops-pill.degraded { background: rgba(255, 176, 32, .18); color: var(--warn); }
.ops-pill.critical { background: rgba(229, 72, 77, .18); color: var(--danger); }
.ops-pill.open { background: rgba(255, 176, 32, .14); color: var(--warn); }
.ops-pill.triaged { background: rgba(88, 166, 255, .14); color: var(--ops-info); }
.ops-pill.in_progress { background: rgba(88, 166, 255, .2); color: var(--ops-info-2); }
.ops-pill.resolved, .ops-pill.closed { background: rgba(46, 160, 67, .18); color: var(--good); }
.ops-pill.wont_fix { background: rgba(255, 255, 255, .06); color: var(--muted); }
.ops-bug-reports-counts { margin-top: 4px; }
.ops-bug-reports-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: rgba(255, 255, 255, .02);
}
.ops-bug-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.ops-bug-filter-field > .muted.small { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.ops-bug-filter-search { flex: 1 1 200px; min-width: 180px; }
.ops-bug-filter-search input { width: 100%; padding: 8px 11px; font-size: 13px; }
.ops-bug-filter-field select { width: 148px; padding: 8px 11px; font-size: 13px; }
.ops-bug-reports-count-label {
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ops-bug-reports-queue { margin-top: 10px; }
.ops-bug-reports-empty,
.ops-bug-reports-loading,
.ops-bug-reports-foot,
.ops-bug-reports-error { margin: 12px 0 0; }
.ops-bug-reports-table {
  table-layout: fixed;
  width: 100%;
}
.ops-bug-reports-table col.ops-bug-col-ref { width: 8%; }
.ops-bug-reports-table col.ops-bug-col-when { width: 15%; }
.ops-bug-reports-table col.ops-bug-col-account { width: 17%; }
.ops-bug-reports-table col.ops-bug-col-category { width: 10%; }
.ops-bug-reports-table col.ops-bug-col-status { width: 11%; }
.ops-bug-reports-table col.ops-bug-col-summary { width: 39%; }
.ops-bug-reports-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.ops-bug-reports-table th[data-sort]:hover { color: var(--text); }
.ops-bug-reports-table th .sort-ind,
.ops-bug-reports-table th[data-sort] .sort-ind {
  display: inline-block;
  width: 0.75em;
  margin-left: 2px;
  text-align: center;
  color: var(--accent);
  font-size: 10px;
}
.ops-bug-reports-table th.ops-bug-col-center,
.ops-bug-reports-table td.ops-bug-col-center { text-align: center; }
.ops-bug-reports-table th.ops-bug-col-left,
.ops-bug-reports-table td.ops-bug-col-left { text-align: left; }
.ops-bug-reports-table td.ops-bug-col-center .ops-pill { display: inline-block; }
.ops-bug-ref { font-size: 11px; }
.ops-bug-page { display: block; margin-top: 3px; word-break: break-word; font-size: 11px; }
.ops-bug-excerpt { display: block; line-height: 1.4; }
.ops-bug-col-when { white-space: nowrap; font-size: 11px; }
.ops-bug-col-account { word-break: break-word; font-size: 12px; }
.ops-bug-col-summary { vertical-align: top; }
@media (max-width: 900px) {
  .ops-bug-reports-toolbar { flex-direction: column; align-items: stretch; }
  .ops-bug-filter-field select,
  .ops-bug-filter-search { width: 100%; }
  .ops-bug-reports-count-label { margin-left: 0; align-self: flex-start; }
  .ops-bug-reports-table col.ops-bug-col-account { width: 22%; }
  .ops-bug-reports-table col.ops-bug-col-summary { width: 34%; }
}
.ops-sections { display: grid; gap: 14px; }
.ops-block { position: relative; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--control-radius); }
.ops-block h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.ops-block h3 .hint { margin-left: 4px; }

/* Heading row: title on the left, at-a-glance status pill on the right. */
.ops-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.ops-head h3 { margin: 0; }
.ops-subtitle { margin: -2px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 72ch; }
.ops-subtitle .ops-code, .ops-code { font-family: ui-monospace, monospace; font-size: 11px; padding: 1px 6px; border-radius: 5px; background: rgba(127,127,127,.14); color: var(--text); }

/* Status pill (Healthy / Attention / Degraded …) with a leading colour dot. */
.ops-status-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .01em;
  padding: 5px 10px 5px 8px; border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.ops-status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.ops-status-healthy { color: var(--good); background: rgba(46,160,67,.12); border-color: rgba(46,160,67,.30); }
.ops-status-attention { color: var(--warn); background: rgba(255,176,32,.12); border-color: rgba(255,176,32,.30); }
.ops-status-degraded { color: var(--warn); background: rgba(255,176,32,.16); border-color: rgba(255,176,32,.40); }
.ops-status-critical { color: var(--danger); background: rgba(229,72,77,.14); border-color: rgba(229,72,77,.38); }
.ops-status-info { color: var(--ops-info-2); background: rgba(88,166,255,.12); border-color: rgba(88,166,255,.28); }

/* A slim colour strip on the left edge of a block echoes its status pill. */
.ops-block--healthy { border-left: 3px solid rgba(46,160,67,.55); }
.ops-block--attention { border-left: 3px solid rgba(255,176,32,.55); }
.ops-block--degraded { border-left: 3px solid rgba(255,176,32,.75); }
.ops-block--critical { border-left: 3px solid rgba(229,72,77,.70); }
.ops-block--info { border-left: 3px solid rgba(88,166,255,.50); }

/* In-card manual controls (chain sync + job queue). */
#wheelChainManual,
.ops-sched-manual-slot {
  display: contents;
}
.ops-sched-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ops-sync-state-slot:not(:empty) {
  margin-top: 4px;
}
.ops-sync-state {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}
.ops-sync-state:not(.hidden) { color: var(--text); }
.ops-queue-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.ops-queue-toolbar-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.ops-queue-manual-slot { display: flex; justify-content: flex-end; }
.ops-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 0 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Credits usage meter inside a stat cell. */
.ops-stat-meter { min-width: 150px; }
.ops-meter { margin-top: 6px; height: 6px; border-radius: var(--radius-pill); background: rgba(127,127,127,.18); overflow: hidden; }
.ops-meter-fill { display: block; height: 100%; border-radius: var(--radius-pill); transition: width .4s ease; }
.ops-meter-healthy { background: var(--good); }
.ops-meter-attention { background: var(--warn); }
.ops-meter-degraded { background: var(--danger); }

/* Billing alert chips — rounded pills with a severity dot. */
.ops-alert-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.ops-alert-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  padding: 5px 11px 5px 9px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: var(--panel);
}
.ops-alert-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ops-alert-chip-warning { color: var(--warn); background: rgba(255,176,32,.12); border-color: rgba(255,176,32,.30); }
.ops-alert-chip-error { color: var(--danger); background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.34); }
.ops-alert-chip-critical { color: #fff; background: rgba(229,72,77,.85); border-color: rgba(229,72,77,.9); }
.ops-alert-chip-info { color: var(--ops-info-2); background: rgba(88,166,255,.12); border-color: rgba(88,166,255,.28); }
.ops-alert-chip .dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }

/* Provider OK-rate — equalizer-style segmented meter with % on the right. */
.ev-meter-cell { min-width: 190px; }
.ev-meter { display: flex; align-items: center; gap: 10px; }
.ev-meter-track {
  position: relative; flex: 1; min-width: 70px; height: 12px; border-radius: 4px;
  /* faint slats show the equalizer segments in the unfilled portion */
  background: repeating-linear-gradient(90deg, rgba(127,127,127,.16) 0 6px, transparent 6px 9px);
}
.ev-meter-fill {
  display: block; height: 100%; border-radius: 4px;
  /* mask the solid fill into equalizer bars */
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 9px);
  mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 9px);
  transition: width .5s ease;
}
.ev-fill-good { background: var(--good); }
.ev-fill-degraded { background: var(--warn); }
.ev-fill-critical { background: var(--danger); }
.ev-fill-unknown { background: rgba(127,127,127,.55); }
.ev-meter-pct { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; min-width: 46px; text-align: right; }
.ev-pct-good { color: var(--good); }
.ev-pct-degraded { color: var(--warn); }
.ev-pct-critical { color: var(--danger); }
.ev-pct-unknown { color: var(--muted); }
.ev-meter-sub { margin-top: 3px; font-size: 11px; }

/* Wheel settings field grid — compact responsive field grid used inside the
   Settings-tab section cards. (Admin → Chain fetch config was migrated off this
   onto the kit .filter-bar/.filter-field primitives; the Settings form still
   uses it inside .wheel-settings-section cards.) */
.wheel-config-form { margin-top: 10px; }
.wheel-config-grid {
  /* min(100%, 220px) keeps auto-fill from forcing a 200px track wider than the
     phone content box (that overflow clipped "Min open interest" and shoved
     Call min PoP / Min ROC off-screen to the right). */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px 16px;
  max-width: 900px;
}
.wcfg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wcfg-field > label {
  margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  /* Long labels + hint must wrap, not spill the column. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.wcfg-input { position: relative; display: flex; align-items: center; }
.wcfg-input input, .wcfg-input select { width: 100%; margin: 0; }
.wcfg-suffix, .wcfg-prefix {
  position: absolute; font-size: 12px; color: var(--muted); pointer-events: none;
}
.wcfg-suffix { right: 12px; }
.wcfg-prefix { left: 12px; }
.wcfg-input input.wcfg-has-prefix { padding-left: 22px; }
.wcfg-input:has(.wcfg-suffix) input { padding-right: 46px; }
.wheel-config-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* Kit helper — inline unit/currency adornment for a compact .filter-field input.
   Overlays a $ prefix or a "days"/unit suffix on top of the 35px control without
   changing its height, so admin/config fields stay pixel-consistent with every
   other .filter-bar. Reuse this instead of hand-rolling per-form affixes. */
.filter-affix { position: relative; display: inline-flex; align-items: center; }
.filter-affix > input { margin: 0; }
.filter-affix__prefix, .filter-affix__suffix {
  position: absolute; font-size: 12px; color: var(--muted); pointer-events: none;
}
.filter-affix__prefix { left: 12px; }
.filter-affix__suffix { right: 12px; }
.filter-affix > input.has-prefix { padding-left: 22px; }
.filter-affix:has(.filter-affix__suffix) > input { padding-right: 42px; }

/* Kit helper — inline unit/currency adornment for a compact .filter-field input.
   Overlays a $ prefix or a "days"/unit suffix on top of the 35px control without
   changing its height, so admin/config fields stay pixel-consistent with every
   other .filter-bar. Reuse this instead of hand-rolling per-form affixes. */
.filter-affix { position: relative; display: inline-flex; align-items: center; }
.filter-affix > input { margin: 0; }
.filter-affix__prefix, .filter-affix__suffix {
  position: absolute; font-size: 12px; color: var(--muted); pointer-events: none;
}
.filter-affix__prefix { left: 12px; }
.filter-affix__suffix { right: 12px; }
.filter-affix > input.has-prefix { padding-left: 22px; }
.filter-affix:has(.filter-affix__suffix) > input { padding-right: 42px; }

/* Wheel user settings — grouped cards (Screen thresholds / Liquidity / Capital).
   Each section is its own card so titles don't collide with the fields above. */
.wheel-settings-form { margin-top: 12px; }
.wheel-settings-sections {
  display: grid; gap: 16px; max-width: 900px;
}
/* Income → Settings: inputs left (stacked), bracket card right — full panel width. */
.wheel-settings-sections.income-tax-layout {
  max-width: none;
  width: 100%;
}
#incomeTaxForm.wheel-settings-form {
  width: 100%;
  max-width: none;
}
.income-tax-top-row {
  display: grid;
  grid-template-columns: minmax(280px, 22rem) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
.income-tax-inputs-col {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}
.income-tax-brackets-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.income-tax-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.income-tax-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.income-tax-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.income-tax-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.income-tax-stat.is-zero-band {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.income-tax-stat.is-zero-band .income-tax-stat-value {
  color: var(--accent);
}
.income-tax-field-note {
  margin: 4px 0 0;
  line-height: 1.35;
}
.income-tax-summary-foot {
  margin: 8px 0 0;
}
.income-tax-status[data-kind="ok"] {
  color: var(--green);
}
.income-tax-status[data-kind="error"] {
  color: var(--danger);
}
.income-tax-status {
  margin: 8px 0 0;
}
/* Bracket tables inside the Tax brackets card. */
.income-tax-brackets {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: none;
  flex: 1;
}
.income-tax-brackets-context,
.income-tax-brackets-note,
.income-tax-brackets-source,
.income-tax-brackets-empty {
  grid-column: 1 / -1;
}
.income-tax-brackets-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  grid-column: 1 / -1;
  width: 100%;
}
.income-tax-brackets-row--ordinary {
  align-items: stretch;
}
.income-tax-brackets-block--paired {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
}
.income-tax-brackets-header {
  flex: 0 0 auto;
  min-height: 3.25rem;
  margin-bottom: 6px;
}
.income-tax-brackets-header .income-tax-brackets-basis {
  margin: 0;
}
.income-tax-brackets-scroll--paired {
  flex: 1 1 auto;
  min-height: 13.5rem;
  max-height: 13.5rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--panel);
  width: 100%;
}
.income-tax-brackets-block--paired .income-tax-brackets-footnote {
  flex: 0 0 auto;
  min-height: 2.75rem;
  margin-top: 8px;
}
.income-tax-brackets-block--paired .income-tax-brackets-footnote:empty,
.income-tax-brackets-block--paired .income-tax-brackets-footnote[aria-hidden="true"] {
  visibility: hidden;
}
.income-tax-brackets-table--paired {
  table-layout: fixed;
}
.income-tax-brackets-table--paired th:first-child,
.income-tax-brackets-table--paired td:first-child {
  width: 18%;
}
.income-tax-brackets-table--paired th:last-child,
.income-tax-brackets-table--paired td:last-child {
  width: 24%;
}
.income-tax-brackets > .income-tax-brackets-block {
  grid-column: 1 / -1;
  width: 100%;
}
.income-tax-brackets-block { margin: 0; min-width: 0; }
.income-tax-brackets-context {
  margin: 0;
  font-weight: 600;
}
.income-tax-brackets-basis {
  margin: 0 0 6px;
  line-height: 1.35;
}
.income-tax-brackets-scroll {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--panel);
  width: 100%;
}
.income-tax-brackets-scroll.is-compact {
  max-height: none;
  overflow: visible;
  border: none;
  background: transparent;
  border-radius: 0;
}
.income-tax-brackets-scroll.is-compact .income-tax-brackets-table tr:last-child td {
  border-bottom: none;
}
.income-tax-brackets-scroll .income-tax-brackets-table thead th,
.income-tax-brackets-scroll--paired .income-tax-brackets-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
}
.income-tax-brackets-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.income-tax-brackets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.income-tax-brackets-table th,
.income-tax-brackets-table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}
.income-tax-brackets-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.income-tax-brackets-table td:first-child {
  white-space: nowrap;
  width: 3.5rem;
}
.income-tax-brackets-table td:nth-child(2) {
  width: auto;
}
.income-tax-brackets-table td:last-child {
  width: 4rem;
  white-space: nowrap;
}
.income-tax-brackets-table tr.is-current td {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--accent);
}
.income-tax-brackets-table tr.is-current td:first-child {
  font-size: 13px;
}
.income-tax-brackets-mark {
  width: 4rem;
  text-align: right;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.income-tax-brackets-note,
.income-tax-brackets-inline-note,
.income-tax-brackets-footnote,
.income-tax-brackets-source,
.income-tax-brackets-empty {
  margin: 0;
}
.income-tax-brackets-inline-note {
  margin-bottom: 6px;
}
.income-tax-brackets-footnote {
  margin-top: 6px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .income-tax-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .income-tax-brackets-row {
    grid-template-columns: 1fr;
  }
  .income-tax-brackets-scroll--paired {
    min-height: 11rem;
    max-height: 11rem;
  }
  .income-tax-top-row {
    grid-template-columns: 1fr;
  }
  .income-tax-summary-grid {
    grid-template-columns: 1fr;
  }
}
.wheel-settings-section {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 16px 18px;
}
.wheel-settings-section-title {
  margin: 0 0 14px; font-size: 13px; font-weight: 700;
  letter-spacing: .01em; color: var(--text);
}
/* Save button already sits below the cards; drop the extra top divider so it
   reads as a card group with a clear action row. */
.wheel-settings-form .wheel-config-actions {
  margin-top: 18px; padding-top: 0; border-top: 0;
}

@media (max-width: 768px) {
  /* Settings on phone: one field per row, full-width save, compact cards.
     Do not let the global `.hint { min-width: touch-min }` blow label rows. */
  .wheel-config-grid {
    grid-template-columns: 1fr;
  }
  .wheel-settings-sections {
    max-width: 100%;
    gap: 12px;
  }
  .wheel-settings-section {
    padding: 14px;
  }
  .wheel-settings-form .wheel-config-actions {
    width: 100%;
  }
  .wheel-settings-form .wheel-config-actions button {
    width: 100%;
  }
  .wcfg-field > label .hint,
  .wheel-settings-form h2 .hint,
  .wheel-settings-section-title .hint,
  [data-wheel-view="settings"] h2 .hint {
    min-width: 22px;
    min-height: 22px;
    flex: 0 0 auto;
  }
}

/* Rounded fact chips used for pipeline warning buckets. */
.ops-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ops-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--border);
}
.ops-chip-label { color: var(--text); }
.ops-chip-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }

/* Clickable bucket chip → opens the blip drill-down popup. */
.ops-chip--btn {
  cursor: pointer; align-items: center; font: inherit; text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.ops-chip--btn:hover { border-color: var(--accent); background: var(--panel-2); }
.ops-chip--btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ops-chip--btn:active { transform: translateY(1px); }
.ops-chip-go { color: var(--muted); font-size: 14px; line-height: 1; margin-left: 2px; }
.ops-chip--btn:hover .ops-chip-go { color: var(--accent); }

/* Blip drill-down popup: occurrence list. */
.ops-blip-list { display: flex; flex-direction: column; gap: 10px; }
.ops-blip-item {
  border: 1px solid var(--border); border-radius: var(--control-radius);
  background: var(--panel-2); padding: 10px 12px;
}
.ops-blip-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.ops-blip-when { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; }
.ops-blip-when .rel { color: var(--text); font-size: 12px; }
.ops-blip-msg {
  margin-top: 8px; font-size: 12px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere; word-break: break-word;
}
.ops-blip-meta { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* Inline category tag inside the "What happened" failure column. */
.ops-cat {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; margin-right: 2px;
  vertical-align: 1px; white-space: nowrap;
}
.ops-cat-healthy { color: var(--good); background: rgba(46,160,67,.14); }
.ops-cat-info { color: var(--ops-info-2); background: rgba(88,166,255,.14); }
.ops-cat-attention { color: var(--warn); background: rgba(255,176,32,.16); }
.ops-cat-degraded { color: var(--danger); background: rgba(229,72,77,.14); }
.ops-failures-table td.ops-msg { cursor: default; }

/* Recent failures — scannable incident feed (summary strip + rich rows). */
.ops-failures-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  color: var(--muted); font-size: 12px;
}
.ops-failures-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.ops-count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted);
}
.ops-fail-strip { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ops-fail-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ops-fail-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Fixed layout so the "What happened" column gets the remaining width instead of
   the browser inflating the narrow Ticker column (and the shared events-table
   `td.ops-msg { max-width:1px }` rule starving the message). */
.ops-failures-table { table-layout: fixed; }
.ops-failures-table th:nth-child(1),
.ops-failures-table td:nth-child(1) { width: 148px; }
.ops-failures-table th:nth-child(2),
.ops-failures-table td:nth-child(2) { width: 84px; }
.ops-failures-table th:nth-child(3),
.ops-failures-table td:nth-child(3) { width: auto; }
.ops-failures-table td.ops-msg { max-width: none; }
.ops-failures-table td.ops-when { white-space: nowrap; }
.ops-when-rel { display: block; color: var(--text); }
.ops-when-abs { display: block; color: var(--muted); font-size: 11px; }
.ops-ticker {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
.ops-reason { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ops-reason-text { color: var(--text); }
.ops-reason-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px;
}
.ops-meta-item { color: var(--muted); font-size: 11px; }
.ops-meta-item b { color: var(--text); font-weight: 600; }
.ops-raw { font-size: 11px; }
.ops-raw > summary {
  cursor: pointer; color: var(--muted); list-style: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.ops-raw > summary::-webkit-details-marker { display: none; }
.ops-raw > summary::before { content: "\203A"; display: inline-block; transition: transform .15s ease; }
.ops-raw[open] > summary::before { transform: rotate(90deg); }
.ops-raw > summary:hover { color: var(--text); }
.ops-raw-body {
  position: relative; margin-top: 6px;
  display: flex; align-items: flex-start; gap: 8px;
}
.ops-raw-body pre {
  flex: 1 1 auto; margin: 0; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.ops-copy-btn { flex: 0 0 auto; align-self: flex-start; }

/* Ops events explorer — severity badges, event tokens (filters use .filter-bar). */
.admin-events-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-events-table th { text-align: left; }
.admin-events-table td { vertical-align: top; }
.admin-events-table td.ops-msg { overflow-wrap: anywhere; word-break: break-word; }
.ops-ev-name { font-family: ui-monospace, monospace; font-size: 12px; }
.ops-ev-pretty { display: block; margin-top: 2px; }
.ops-sev {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}
.ops-sev-info { color: var(--ops-info-2); background: rgba(88,166,255,.14); }
.ops-sev-warning { color: var(--warn); background: rgba(255,176,32,.16); }
.ops-sev-error { color: var(--danger); background: rgba(229,72,77,.14); }
.ops-sev-critical { color: #fff; background: rgba(229,72,77,.85); }
.ops-stat .label { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.ops-events th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.ops-events th .hint { width: 13px; height: 13px; font-size: 9px; margin-left: 4px; }
.ops-grid { display: flex; flex-wrap: wrap; gap: 16px 22px; }
.ops-stat .label { font-size: 11px; color: var(--muted); }
.ops-stat .val { font-size: 16px; font-variant-numeric: tabular-nums; }

/* Platform panel — infra cards + microservice grid */
.ops-platform .ops-block-head { margin-bottom: 12px; }
.ops-infra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
}
.ops-infra-card {
  padding: 10px 12px;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .025);
  min-width: 0;
}
.ops-infra-card.good { border-color: rgba(46, 160, 67, .28); }
.ops-infra-card.warn { border-color: rgba(255, 176, 32, .35); }
.ops-infra-card.slow { border-color: rgba(255, 176, 32, .22); }
.ops-infra-card.down { border-color: rgba(229, 72, 77, .45); background: rgba(229, 72, 77, .06); }
.ops-infra-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ops-infra-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ops-infra-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ops-infra-sub { margin-top: 4px; line-height: 1.3; }

.ops-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: var(--muted);
}
.ops-dot.good { background: var(--good); box-shadow: 0 0 0 2px rgba(61, 214, 140, .18); }
.ops-dot.warn, .ops-dot.slow { background: var(--warn); box-shadow: 0 0 0 2px rgba(255, 176, 32, .18); }
.ops-dot.down { background: var(--danger); box-shadow: 0 0 0 2px rgba(229, 72, 77, .18); }
.ops-dot.unknown { background: var(--muted); }

.ops-worker-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}
.ops-worker-row-label { font-weight: 600; letter-spacing: .02em; }

.ops-identity-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 12px; background: rgba(255, 255, 255, .02); border: 1px solid var(--border);
}
.ops-identity-bar.bad { border-color: rgba(229, 72, 77, .35); }

.ops-services-panel { margin-top: 14px; }
.ops-services-panel > summary {
  cursor: pointer; list-style: none; padding: 8px 0;
  border-top: 1px solid var(--border);
}
.ops-services-panel > summary::-webkit-details-marker { display: none; }
.ops-services-sum { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ops-services-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ops-services-count { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-services-note { margin: 4px 0 10px; }

.ops-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 8px;
}
.ops-svc-card {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .03);
}
.ops-svc-card.good { border-color: rgba(46, 160, 67, .28); }
.ops-svc-card.warn { border-color: rgba(255, 176, 32, .3); }
.ops-svc-card.slow { border-color: rgba(255, 176, 32, .22); }
.ops-svc-card.down { border-color: rgba(229, 72, 77, .42); background: rgba(229, 72, 77, .05); }
.ops-svc-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ops-svc-name {
  font-size: 12px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ops-svc-meta { padding-left: 15px; }
.ops-svc-lat { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-svc-lat.good { color: var(--good); }
.ops-svc-lat.warn, .ops-svc-lat.slow { color: var(--warn); }
.ops-svc-err { font-size: 12px; font-weight: 700; color: var(--danger); }
.ops-svc-errdetail { padding-left: 15px; line-height: 1.3; word-break: break-word; }

/* Legacy svc chips (unused after platform refresh; kept for safety) */
.ops-svc { font-size: 12px; padding: 6px 8px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.ops-svc.ok { border-color: rgba(46,160,67,.35); }
.ops-svc.bad { border-color: rgba(229,72,77,.4); }
.ops-events { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.ops-failures-details.collapsible { margin-top: 10px; }
.ops-events td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-word; overflow-wrap: anywhere; }
.ops-events td.ops-msg { max-width: 1px; }
.ops-events .ev { font-family: ui-monospace, monospace; font-size: 11px; }
.ops-events .ev.good { color: var(--good); }
.ops-events .ev.degraded { color: var(--warn); }
.ops-events .ev.critical { color: var(--danger); }
.ops-events .ev.unknown { color: var(--muted); }
.ops-worker-stages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ops-stage-pill {
  font-size: 11px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  font-family: ui-monospace, monospace; text-transform: lowercase;
}
.ops-stage-pill.live { border-color: rgba(46,160,67,.45); color: var(--good); }
.ops-stage-pill.missing { border-color: rgba(229,72,77,.4); color: var(--danger); }
.ops-scheduler-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (min-width: 1080px) {
  .ops-scheduler-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ops-scheduler-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ops-scheduler-grid { grid-template-columns: 1fr; }
}
.ops-sched-card {
  position: relative;
  min-height: 128px;
  padding: 12px 14px 12px 16px;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .015) 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.ops-sched-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, .12);
}
.ops-sched-card--active::before,
.ops-sched-card--due::before { background: rgba(46, 160, 67, .75); }
.ops-sched-card--idle::before { background: rgba(88, 166, 255, .55); }
.ops-sched-card--disabled::before { background: rgba(255, 255, 255, .14); }
.ops-sched-card--paused::before,
.ops-sched-card--warn::before { background: rgba(255, 176, 32, .75); }
.ops-sched-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ops-sched-title {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  flex-wrap: wrap;
  max-width: calc(100% - 88px);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.25;
}
.ops-sched-state {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ops-sched-state.active,
.ops-sched-state.due {
  background: rgba(46, 160, 67, .14);
  color: var(--good);
  border-color: rgba(46, 160, 67, .28);
}
.ops-sched-state.disabled {
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  border-color: rgba(255, 255, 255, .08);
}
.ops-sched-state.paused,
.ops-sched-state.warn {
  background: rgba(255, 176, 32, .14);
  color: var(--warn);
  border-color: rgba(255, 176, 32, .28);
}
.ops-sched-state.idle {
  background: rgba(88, 166, 255, .10);
  color: var(--ops-info-2);
  border-color: rgba(88, 166, 255, .22);
}
.ops-sched-env {
  display: inline-block;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .06);
  word-break: break-all;
}
.ops-sched-detail {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.ops-sched-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.ops-sched-metric {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  color: var(--text);
}
.ops-sched-metric.warn {
  color: var(--warn);
  border-color: rgba(255, 176, 32, .28);
  background: rgba(255, 176, 32, .08);
}
.ops-sched-actions {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Year filter — a compact segmented control, deliberately distinct from the
   pill tabs (grouped in one inset track, smaller, accent-tinted selection). */
.year-chips {
  display: inline-flex; flex-wrap: wrap; gap: 2px; width: auto; align-self: flex-start;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--control-radius); padding: 3px;
}
.year-chip {
  background: transparent; border: 0; color: var(--muted);
  padding: 6px 13px; border-radius: 7px; font-weight: 600; font-size: 12.5px;
  width: auto; box-shadow: none; font-variant-numeric: tabular-nums;
  transition: background .12s ease, color .12s ease;
}
.year-chip:hover { filter: none; box-shadow: none; color: var(--text); background: rgba(255, 255, 255, .05); }
.year-chip.active {
  background: rgba(255, 122, 24, .16); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 24, .45);
}

/* Auto-refresh countdown chip: fixed width + tabular digits so the ticking
   "Auto 30s → 9s" number never reflows the adjacent Refresh button. */
#opsAutoRefreshChip {
  min-width: 92px; text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
}
#opsAutoRefreshChip.active { border-color: transparent; }

/* Global top progress bar — fixed, never reflows the page (replaces inline
   "Loading…" blocks that caused content to jump). Indeterminate while active,
   fades out when the in-flight request count returns to zero. */
.top-loader {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .25s ease;
}
.top-loader.active { opacity: 1; }
.top-loader::before {
  content: ""; position: absolute; top: 0; height: 100%; width: 35%; left: -35%;
  background: linear-gradient(90deg, transparent, var(--accent), var(--ember));
  box-shadow: 0 0 10px var(--accent);
}
.top-loader.active::before { animation: wfa-topload 1s linear infinite; }
@keyframes wfa-topload {
  0% { left: -35%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .top-loader.active::before { animation-duration: 2.4s; }
}
@media (max-width: 620px) {
  .filter-bar { gap: 8px; }
  .filter-field { flex: 0 0 auto; }
  .filter-field input, .filter-field select, .filter-field .cs { width: 100%; }
}

/* ---- Unified custom <select> (ui-select.js) — one dropdown design everywhere,
   replacing the OS-native menu so it always matches the dark theme. The real
   <select> is kept in the DOM (visually hidden) as the form/source-of-truth. ---- */
.cs { position: relative; width: 100%; }
.cs-native {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
  pointer-events: none;
}
.cs-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px; border-radius: var(--control-radius); font: inherit; line-height: 1.2;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-trigger:hover { border-color: var(--border-hover); }
.cs-trigger:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 24, .20);
}
.cs.cs-open .cs-trigger {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 24, .20);
}
.cs-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-value.cs-empty { color: var(--muted); }
.cs-caret {
  flex: 0 0 auto; color: var(--muted); font-size: 11px; transition: transform .15s ease;
}
.cs.cs-open .cs-caret { transform: rotate(180deg); }
.cs.cs-disabled { opacity: .5; }
.cs.cs-disabled .cs-trigger { cursor: not-allowed; }

.cs-menu {
  position: fixed; z-index: 300; margin: 0; padding: 5px; list-style: none;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--control-radius);
  box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; min-width: 120px;
}
.cs-option {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 7px;
  color: var(--text); font-size: 14px; white-space: nowrap; cursor: pointer;
}
.cs-option[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.cs-option[aria-selected="true"]::after { content: "\2713"; margin-left: auto; font-size: 12px; }
.cs-option.cs-active { background: rgba(255, 122, 24, .14); }
.cs-option[aria-disabled="true"] { color: var(--muted); opacity: .55; cursor: not-allowed; }

/* Sector filter exposure colors: unified --exp-* block above (with .sector-exp--*). */

/* Multi-select (ui-multi-select.js) — checkbox rows + pinned "All" row */
.cms-menu .cms-option { gap: 10px; }
.cms-menu .cms-option input[type="checkbox"] {
  flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--accent);
  pointer-events: none;
}
.cms-menu .cms-option.cms-all {
  font-weight: 600; border-bottom: 1px solid var(--border); margin-bottom: 2px;
  border-radius: 7px 7px 0 0;
}
.cms-menu .cms-option.cms-all[aria-selected="true"] { color: var(--accent); }
.cms-menu .cms-option.cms-all[aria-selected="true"]::after { content: "\2713"; margin-left: auto; font-size: 12px; }
.cms-menu .cms-option:not(.cms-all)[aria-selected="true"] { font-weight: 500; }
.cms-menu .cms-option:not(.cms-all)[aria-selected="true"]::after { content: none; }

/* Pinned header action (e.g. column reset) — gradient card row above checkbox options */
.cms-menu .cms-header-action {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 1px 0 5px;
  border-radius: var(--radius-sm); cursor: pointer; user-select: none;
  background: linear-gradient(135deg, rgba(255, 122, 24, .10), rgba(255, 61, 46, .06));
  border: 1px solid rgba(255, 122, 24, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.cms-menu .cms-header-action:hover {
  background: linear-gradient(135deg, rgba(255, 122, 24, .18), rgba(255, 61, 46, .11));
  border-color: rgba(255, 122, 24, .48);
  box-shadow: 0 2px 12px rgba(255, 122, 24, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.cms-menu .cms-header-action:active { transform: scale(.985); }
.cms-menu .cms-header-action-icon {
  flex: 0 0 28px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ember), var(--accent-2));
  color: var(--on-accent);
  box-shadow: 0 2px 10px rgba(255, 122, 24, .32);
}
.cms-menu .cms-header-action-body { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.cms-menu .cms-header-action-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text);
}
.cms-menu .cms-header-action-hint {
  display: block; font-size: 11px; color: var(--muted); margin-top: 1px;
}
.cms-menu .cms-header-divider {
  height: 1px; margin: 0 6px 6px; padding: 0; list-style: none;
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}

#historyTable .tgt-gap { font-size: 12px; font-weight: 600; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .cs-trigger, .cs-caret { transition: none; }
  .cms-menu .cms-header-action { transition: none; }
  .cms-menu .cms-header-action:active { transform: none; }
}

/* ---- Unified custom date picker (ui-datepicker.js) — one dark calendar
   everywhere, replacing the OS-native (light) date popup. The real
   <input type="date"> is kept in the DOM (visually hidden) as the form value. ---- */
.dp { position: relative; width: 100%; }
.dp-native {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
  pointer-events: none;
}
.dp-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px; border-radius: var(--control-radius); font: inherit; line-height: 1.2;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dp-trigger:hover { border-color: var(--border-hover); }
.dp-trigger:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 24, .20);
}
.dp.dp-open .dp-trigger {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 24, .20);
}
.dp-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-value.dp-empty { color: var(--muted); }
.dp-icon { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.dp.dp-disabled { opacity: .5; }
.dp.dp-disabled .dp-trigger { cursor: not-allowed; }

.dp-cal {
  position: fixed; z-index: 300; width: 268px; padding: 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--card-radius);
  box-shadow: var(--shadow); color: var(--text);
}
.dp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.dp-title { flex: 1; text-align: center; font-weight: 600; font-size: 14px; }
.dp-nav {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1; transition: background .12s ease, color .12s ease;
}
.dp-nav:hover { background: rgba(255, 122, 24, .14); color: var(--accent); }
.dp-nav:focus-visible { outline: none; border-color: var(--accent); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-size: 11px; color: var(--muted); padding: 4px 0 6px; }
.dp-day {
  aspect-ratio: 1 / 1; min-height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease;
}
.dp-day:hover:not(:disabled) { background: rgba(255, 122, 24, .14); }
.dp-day.dp-out { color: var(--muted); opacity: .45; }
.dp-day.dp-today { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-weight: 600; }
.dp-day.dp-selected { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.dp-day.dp-selected.dp-today { box-shadow: none; }
.dp-day:disabled { opacity: .25; cursor: not-allowed; }
.dp-day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ember); }
.dp-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.dp-link {
  background: none; border: 0; color: var(--steel); font: inherit; font-size: 13px;
  cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.dp-link:hover { text-decoration: underline; }
.dp-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ember); }
@media (prefers-reduced-motion: reduce) {
  .dp-trigger, .dp-nav, .dp-day { transition: none; }
}

/* Performance split cards. */
.perf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 720px) { .perf-split { grid-template-columns: 1fr; } }
.perf-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 14px 16px; }
.perf-card h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.perf-line { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; }
.perf-line:first-of-type { border-top: none; }
.perf-line span { color: var(--muted); }

/* Monthly P/L bar chart (dependency-free). */
.bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 210px; padding: 8px 0; width: 100%; }
.bar-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar-wrap { height: 170px; display: flex; align-items: flex-end; width: 100%; }
.bar { width: 78%; border-radius: 3px 3px 0 0; }
.bar-pos { background: var(--good); }
.bar-neg { background: var(--bad); }
.bar-zero { background: #3a4658; opacity: .5; }
.bar-lbl { font-size: 9px; color: var(--muted); transform: rotate(-45deg); white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; font-size: 12px; color: var(--muted); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.legend-item { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); cursor: pointer; user-select: none; border: 1px solid transparent; transition: background .12s ease, opacity .12s ease; }
.legend-item:hover { background: rgba(255, 255, 255, .06); }
.legend-item:focus-visible { outline: none; border-color: var(--accent); }
.legend-item.off { opacity: .45; text-decoration: line-through; }
.legend-item.off i { filter: grayscale(1); }
.chart-box { width: 100%; margin-bottom: 6px; position: relative; }
.chart-box svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 210; }
.chart-box .hcol { cursor: crosshair; }
.chart-box .hcol:hover { fill: rgba(255, 255, 255, .05); }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 120px; max-width: 240px;
  background: rgba(14, 20, 30, .96); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px;
  font-size: 12px; color: var(--text); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.chart-tip b { display: block; margin-bottom: 4px; color: var(--muted); font-weight: 600; }
.chart-tip div { display: flex; align-items: center; white-space: nowrap; line-height: 1.5; }
.chart-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

/* ---- Diversification donuts (Stocks / Options tabs) ---- */
.diversity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 4px; }
.diversity-grid-combined { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .diversity-grid-combined { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .diversity-grid { grid-template-columns: 1fr; }
  .diversity-grid-combined { grid-template-columns: 1fr; }
}
.diversity-combined { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.diversity-combined-h {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text);
}
.diversity-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 12px 14px; min-width: 0;
}
.diversity-card h5 {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted);
}
.diversity-card .div-empty { margin: 14px 0; text-align: center; }
.donut-wrap { display: flex; justify-content: center; margin: 2px 0 12px; }
svg.donut { width: 100%; max-width: 188px; height: auto; display: block; }
svg.donut circle { transition: opacity .12s ease; }
.donut-center-top { fill: var(--text); font-size: 19px; font-weight: 700; }
.donut-center-sub { fill: var(--muted); font-size: 10px; letter-spacing: .3px; }
.div-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.div-legend li {
  display: grid; grid-template-columns: 11px minmax(0, 1fr) auto auto;
  align-items: center; gap: 9px; font-size: 12px;
}
.div-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.div-legend .nm { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.div-legend .vl { color: var(--muted); font-variant-numeric: tabular-nums; }
.div-legend .pc {
  color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 46px; text-align: right;
}
/* Compact multi-column variant: every ticker's share. CSS multi-column flow lays
   items out COLUMN-MAJOR (down a column, then the next) and balances columns, so
   with the slices pre-sorted high→low the biggest shares fill the left column
   top-to-bottom, then continue at the top of the next column. Each item is
   "percent · color · ticker". */
.div-legend-cols {
  display: block; columns: 122px; column-gap: 16px;
}
.div-legend-cols li {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  margin-bottom: 4px; break-inside: avoid; -webkit-column-break-inside: avoid;
}
.div-legend-cols .pc {
  flex: 0 0 auto; min-width: 42px; text-align: right; color: var(--text);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.div-legend-cols .sw { flex: 0 0 auto; }
.div-legend-cols .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

/* Universal OI heatmap: dates as columns; dual call/put intensity per cell. */
table.heatmap-grid th { background: var(--panel); color: var(--muted); }
table.heatmap-grid td { color: var(--text); font-variant-numeric: tabular-nums; }
/* Dual markers: put (orange) + call (green) can both be present for one ticker. */
.heatmap-host .hm-rec-row-call { outline: 1px solid rgba(47, 191, 113, .55); outline-offset: -1px; }
.heatmap-host .hm-rec-row-put { outline: 1px solid rgba(255, 122, 24, .55); outline-offset: -1px; }
.heatmap-host .hm-rec-row-call.hm-rec-row-put {
  outline: 1px solid rgba(255, 122, 24, .55);
  box-shadow: inset 0 0 0 1px rgba(47, 191, 113, .55);
}
.heatmap-host .hm-rec-strike-call,
.heatmap-host .hm-rec-col-call { color: var(--good); font-weight: 700; }
.heatmap-host .hm-rec-strike-put,
.heatmap-host .hm-rec-col-put { color: var(--accent); font-weight: 700; }
.heatmap-host .hm-rec-legend-call { color: var(--good); }
.heatmap-host .hm-rec-legend-put { color: var(--accent); }
.heatmap-host .hm-rec-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 2px;
  border: 2px solid currentColor; box-sizing: border-box; flex: 0 0 auto;
}
.heatmap-host .hm-rec-swatch-call { border-color: var(--good); }
.heatmap-host .hm-rec-swatch-put { border-color: var(--accent); }
/* Half-cell highlight (selected put or call) — edge matches the cell border. */
.heatmap-host .hm-stack .hm-rec-half.hm-c {
  box-shadow: inset 0 0 0 2px var(--good);
}
.heatmap-host .hm-stack .hm-rec-half.hm-p {
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* Avg-cost line: cost basis drawn between bracketing strikes. */
.heatmap-host tr.hm-cost-line td {
  padding: 0; height: 0; position: relative;
  border-top: 2px dashed rgba(255, 122, 24, .85);
}
.heatmap-host .hm-cost-line-label {
  position: absolute; top: -9px; left: 8px; z-index: 1;
  background: var(--panel); color: var(--accent);
  font-size: 11px; font-weight: 700; line-height: 16px;
  padding: 0 6px; border-radius: 4px; border: 1px solid rgba(255, 122, 24, .45);
  white-space: nowrap;
}
.heatmap-host .hm-cost-legend { color: var(--accent); }
/* Inline "(i)" help — section headers (.hint), inline labels (.hint-col), and
   table column headers (data-tip on th, hover whole header). The styled bubble
   is a single JS-positioned floater (.wfa-tip on body). */
.hint, .hint-col {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border); color: var(--muted);
  font-style: normal; cursor: help; user-select: none;
  flex: 0 0 auto;
  /* vertical-align:middle aligns to the text x-height midpoint, which leaves the
     badge sitting visually low next to the (mostly uppercase) header/label text.
     Nudge it up 1px with relative positioning so it reads as centered on the
     cap height everywhere these icons appear (headers, labels, column heads). */
  vertical-align: middle; position: relative; top: -1px;
}
.hint {
  width: 15px; height: 15px; font: 700 10px/1 var(--font, inherit);
  margin-left: 7px;
}
.hint-col {
  width: 13px; height: 13px; font: 700 9px/1 var(--font, inherit);
  margin-left: 5px;
}
.hint:hover, .hint:focus-visible,
.hint-col:hover, .hint-col:focus-visible,
.hint.tip-on, .hint-col.tip-on {
  color: var(--accent); border-color: var(--accent); outline: none;
}
table.recs th[data-tip].tip-on { color: var(--text); }
table.recs th[data-tip] { overflow: visible; }
table.recs th[data-tip]:not([data-sort]) { cursor: help; }
/* Shared floating tooltip (appended to body by wheel.js). */
.wfa-tip {
  /* Above modals (200) and open dropdown menus (300) so header/field tips stay
     visible inside the trade dialogs. */
  position: fixed; z-index: 320; pointer-events: none;
  max-width: 300px; padding: 9px 11px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 400 12px/1.45 var(--font, inherit);
  letter-spacing: 0; text-transform: none; text-align: left;
  box-shadow: var(--shadow); white-space: normal;
}
.wfa-tip::before {
  content: ""; position: absolute; left: var(--tip-arrow-x, 50%);
  transform: translateX(-50%); border: 6px solid transparent;
}
.wfa-tip.above::before { bottom: -12px; border-top-color: var(--border); }
.wfa-tip.below::before { top: -12px; border-bottom-color: var(--border); }

.recs-filter-bar { margin: 12px 0 12px; align-items: flex-end; }
.recs-filter-bar .filter-field { flex: 0 0 auto; }
.recs-filter-bar .filter-field-columns { min-width: 168px; }
.recs-filter-note { margin: 0 0 8px; }
/* Compact numeric/text input — width only; height + typography come from the
   shared .filter-field sizing above so it matches the segmented chips exactly. */
.filter-input-compact { width: 118px; max-width: 118px; }
.recs-filter-bar .filter-input-compact { width: 118px; }
@media (max-width: 620px) {
  .recs-filter-bar .filter-input-compact { width: 100%; max-width: none; }
}
.heatmap-host .hm-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 10px; font-size: 12px; color: var(--muted);
}
.heatmap-host .hm-legend-item {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.heatmap-host .hm-bar {
  width: 90px; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,122,24,.12), rgba(255,122,24,.9));
  border: 1px solid var(--border);
}
/* Dual intensity strip (calls → puts) for the universal OI legend. */
.heatmap-host .hm-bar-dual {
  background: linear-gradient(90deg, rgba(47,191,113,.2), rgba(47,191,113,.8), rgba(255,122,24,.85));
}
.heatmap-host .hm-bar-call {
  background: linear-gradient(90deg, rgba(47,191,113,.12), rgba(47,191,113,.9));
}
.heatmap-host .hm-key {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid var(--border); margin-right: 0;
}
.heatmap-host .hm-key-call { background: rgba(47,191,113,.65); }
.heatmap-host .hm-key-put { background: rgba(255,122,24,.65); }
table.heatmap-dual td.hm-split {
  padding: 0;
  vertical-align: stretch;
  background: transparent;
}
table.heatmap-dual td.hm-split .hm-stack {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 36px;
}
table.heatmap-dual td.hm-split .hm-c,
table.heatmap-dual td.hm-split .hm-p {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 50%;
  padding: 3px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  box-sizing: border-box;
  /* Edge-to-edge fill: no gap between tint and cell border. */
  margin: 0;
  border-radius: 0;
}
table.heatmap-dual td.hm-split .hm-c { border-bottom: 1px solid var(--border); }
table.heatmap-dual td.hm-split .hm-empty { color: transparent; min-height: 14px; }
/* One-sided OI: tint fills the whole cell to the border (no empty half-gap). */
table.heatmap-dual td.hm-solo .hm-stack-solo .hm-solo-fill {
  flex: 1 1 100%;
  border-bottom: none;
  min-height: 36px;
}

/* Ticker combobox (transaction verification) */
.tc-wrap { position: relative; }
.tc-input { width: 100%; }
.tc-list {
  position: fixed; z-index: 12000; margin: 0; padding: 4px 0; list-style: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 240px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.tc-option { padding: 6px 10px; cursor: pointer; font-size: 13px; }
.tc-option.tc-active, .tc-option:hover { background: rgba(255,255,255,.06); }
.tc-name { display: block; font-size: 11px; color: var(--muted); }
.recs tr.pos-expired { border-left: 3px solid var(--warn); }
.recs tr.pos-expired td { background: rgba(255,180,60,.04); }
.pos-exp-wrap {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  max-width: 100%; line-height: 1.25;
}
.pos-flag {
  display: inline-block; margin-left: 0; padding: 1px 6px; border-radius: 4px;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--warn); border: 1px solid rgba(255,180,60,.35); white-space: nowrap;
}

/* ---- Mobile responsive UX (v1) ---- */
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
}
html:has(body.modal-open) {
  background: var(--bg);
}

.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
#auditTable { table-layout: fixed; width: 100%; }
#auditTable th, #auditTable td { vertical-align: top; }
#auditTable th:nth-child(1), #auditTable td:nth-child(1) { width: 15%; }  /* When */
#auditTable th:nth-child(2), #auditTable td:nth-child(2) { width: 20%; }  /* Action */
#auditTable th:nth-child(3), #auditTable td:nth-child(3) { width: 12%; }  /* Actor */
#auditTable th:nth-child(4), #auditTable td:nth-child(4) { width: 12%; }  /* Target */
#auditTable th:nth-child(5), #auditTable td:nth-child(5) { width: 41%; }  /* Detail */
/* Safety net: never let an unbreakable id string bleed into a neighbor cell. */
#auditTable td.audit-id-cell { overflow-wrap: anywhere; word-break: break-word; }
#auditTable td.audit-detail {
  word-break: break-word; overflow-wrap: anywhere;
  font-size: 12px; line-height: 1.4;
}
.audit-detail-text { white-space: normal; }
.audit-detail-expand { margin-top: 4px; }
.audit-detail-expand summary { cursor: pointer; color: var(--steel); font-size: 12px; }
.audit-detail-expand pre {
  margin: 6px 0 0; padding: 8px; background: var(--panel-2); border-radius: var(--radius-sm);
  white-space: pre-wrap; word-break: break-word; font-size: 11px; max-height: 200px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Compact, click-to-copy account-id chip (audit actor/target). */
.id-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.4; max-width: 100%;
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.id-chip::after {
  content: "\29C9"; margin-left: 5px; font-size: 11px; opacity: 0;
  transition: opacity .12s ease;
}
.id-chip:hover { border-color: var(--steel); }
.id-chip:hover::after { opacity: .6; }
.id-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.id-chip:active { transform: translateY(1px); }

/* Humanized, category-colored action badges. */
.audit-action {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; white-space: normal;
}
.audit-action-auth { background: rgba(91, 140, 255, .16); color: var(--steel); border-color: rgba(91, 140, 255, .28); }
.audit-action-security { background: rgba(245, 166, 35, .16); color: var(--warn); border-color: rgba(245, 166, 35, .28); }
.audit-action-billing { background: rgba(47, 191, 113, .16); color: var(--good); border-color: rgba(47, 191, 113, .28); }
.audit-action-telegram { background: rgba(42, 181, 201, .16); color: var(--telegram); border-color: rgba(42, 181, 201, .3); }
.audit-action-admin { background: rgba(123, 97, 255, .18); color: var(--admin); border-color: rgba(123, 97, 255, .3); }
.audit-action-default { background: var(--panel-2); color: var(--muted); border-color: var(--border); }

/* Chip-style audit filters (category + time window). */
.audit-filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px; margin: 10px 0 4px;
}
.chip-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-filter-group + .chip-filter-group {
  padding-left: 16px; border-left: 1px solid var(--border);
}
.chip-filter {
  font-size: 12px; font-weight: 500; line-height: 1;
  padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.chip-filter:hover { color: var(--text); border-color: var(--steel); }
.chip-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip-filter.active {
  font-weight: 600;
  background: rgba(91, 140, 255, .16); color: var(--accent); border-color: var(--accent);
}
/* Active category chips echo the action-badge palette. */
.chip-filter.chip-cat-auth.active { background: rgba(91, 140, 255, .16); color: var(--steel); border-color: rgba(91, 140, 255, .5); }
.chip-filter.chip-cat-security.active { background: rgba(245, 166, 35, .16); color: var(--warn); border-color: rgba(245, 166, 35, .5); }
.chip-filter.chip-cat-billing.active { background: rgba(47, 191, 113, .16); color: var(--good); border-color: rgba(47, 191, 113, .5); }
.chip-filter.chip-cat-telegram.active { background: rgba(42, 181, 201, .16); color: var(--telegram); border-color: rgba(42, 181, 201, .5); }
.chip-filter.chip-cat-admin.active { background: rgba(123, 97, 255, .18); color: var(--admin); border-color: rgba(123, 97, 255, .5); }

/* Readable key/value chips for JSON detail payloads. */
.audit-kv { display: flex; flex-wrap: wrap; gap: 6px; }
.audit-kv .kv {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 2px 8px;
}
.audit-kv .kv .k { color: var(--muted); font-size: 11px; }
.audit-kv .kv .v {
  color: var(--text); font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere; word-break: break-word;
}

/* Admin → CI/CD guide (collapsed panel at bottom of Admin view). */
.admin-guide { margin-top: var(--space-md); }
.admin-guide-meta { margin: 0 0 var(--space-md); }
.admin-guide-banner { margin-bottom: var(--space-lg); }
.admin-guide-section + .admin-guide-section { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.admin-guide-section-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-sm); }
.admin-guide-section h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.admin-guide-lead { margin: var(--space-sm) 0 var(--space-xs); font-size: 13px; color: var(--text); }
.admin-guide-note { margin: var(--space-sm) 0 0; }
.admin-guide-steps,
.admin-guide-bullets { margin: var(--space-sm) 0 0; padding-left: 1.25rem; font-size: 13px; line-height: 1.5; }
.admin-guide-steps li + li,
.admin-guide-bullets li + li { margin-top: var(--space-xs); }
.admin-guide .admin-table-wrap { margin-top: var(--space-sm); }
.admin-guide .admin-table-wrap table { font-size: 13px; }
.admin-guide .ops-pre { margin-top: var(--space-sm); white-space: pre-wrap; }
.admin-guide-kv { margin-top: var(--space-sm); }
#adminCicdGuideDetails > summary .admin-guide-summary-sub { font-weight: 400; color: var(--muted); margin-left: var(--space-sm); font-size: 13px; }

.data-card-list { display: none; }
.table-cards-host.table-cards-active .data-card-list { display: block; }
.table-cards-host.table-cards-active table { display: none; }
.data-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.data-card-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
.data-card-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0; }
.data-card-value { text-align: right; word-break: break-word; overflow-wrap: anywhere; }
.data-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }

.nav-label-short { display: none; }
.dash-nav-toggle { display: none; }
.dash-header-rest {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex-wrap: nowrap;
}
.wheel-tab-strip { gap: 6px; overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; max-width: 100%; }
.wheel-tab-strip button { scroll-snap-align: start; flex-shrink: 0; }

/* Wheel toolbar — sticky subnav while scrolling long tables (Item 9). */
.wheel-subnav-sentinel {
  height: 1px; margin: 0; pointer-events: none; visibility: hidden;
}
.wheel-subnav {
  position: sticky; top: 0; z-index: 15;
}
.wheel-subnav.is-stuck {
  background: var(--nav-backdrop); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
}
.wheel-subnav-toolbar {
  justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.wheel-subnav-meta { gap: 8px; align-items: center; }
@media (min-width: 1481px) {
  .wheel-subnav { top: var(--dash-header-height); }
}

/* Wheel ticker focus — one symbol across all tab filters. */
.wheel-focus-wrap { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; }
.wheel-focus-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; min-height: 0;
}
.wheel-focus-btn__icon { flex: 0 0 auto; display: block; }
.wheel-focus-btn__label {
  font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  max-width: 72px; overflow: hidden; text-overflow: ellipsis;
}
.wheel-focus-btn:not(.wheel-focus-btn--on) .wheel-focus-btn__label { display: none; }
/* ON state — match index/year chip glow, not the solid tab gradient. */
.wheel-focus-btn.wheel-focus-btn--on {
  background: rgba(255, 122, 24, .16); color: var(--accent);
  border-color: rgba(255, 122, 24, .45);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 24, .45), 0 0 10px rgba(255, 122, 24, .22);
}
.wheel-focus-btn.wheel-focus-btn--on:hover {
  background: rgba(255, 122, 24, .22); color: var(--accent);
  border-color: rgba(255, 122, 24, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 24, .55), 0 0 14px rgba(255, 122, 24, .28);
}
.wheel-focus-pop {
  position: fixed; z-index: 320; margin: 0;
  width: min(280px, calc(100vw - 24px));
  padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--control-radius); box-shadow: var(--shadow);
}
.wheel-focus-pop.hidden { display: none; }
.wheel-focus-pop__title { margin: 0 0 4px; font-weight: 700; font-size: 14px; color: var(--text); }
.wheel-focus-pop__hint { margin: 0 0 10px; line-height: 1.4; }
.wheel-focus-pop__row { gap: 8px; align-items: center; margin-top: 6px; flex-wrap: nowrap; }
.wheel-focus-pop__row .filter-input-compact { flex: 1 1 auto; width: auto; min-width: 0; }
.wheel-focus-pop__row .small.ghost { flex: 0 0 auto; min-width: 52px; }

.recs-wrap.has-scroll-hint::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none;
  background: linear-gradient(to left, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
}

.legal-wrap { padding: calc(20px + var(--safe-top)) calc(16px + var(--safe-left)) calc(24px + var(--safe-bottom)); }
.legal-back { min-height: var(--touch-min); display: inline-flex; align-items: center; }

/* Dashboard header drawer — burger + dropdown nav at ≤1480px (raised from 1301px
   so the top bar with the "Report a problem" button doesn't crowd/overflow). */
@media (max-width: 1480px) {
  header.top { position: relative; flex-wrap: nowrap; }
  .dash-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--touch-min); min-height: var(--touch-min);
    margin-left: auto;
    border: 1px solid var(--border); border-radius: var(--control-radius); cursor: pointer;
    background: var(--panel-2); color: var(--text);
    -webkit-tap-highlight-color: transparent;
    transition: border-color .18s ease, background-color .18s ease;
  }
  /* Touch taps must not leave a lingering orange focus halo; keep it for keyboard. */
  .dash-nav-toggle:focus { outline: none; }
  .dash-nav-toggle:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  .dash-nav-toggle .bars, .dash-nav-toggle .bars::before, .dash-nav-toggle .bars::after {
    content: ""; display: block; width: 18px; height: 2px; background: var(--text); position: relative;
    transition: transform .2s ease, opacity .15s ease, background-color .18s ease;
  }
  .dash-nav-toggle .bars::before { position: absolute; top: -6px; }
  .dash-nav-toggle .bars::after { position: absolute; top: 6px; }
  /* Open state: accent-tinted button + bars morph into an X. */
  body.dash-nav-open .dash-nav-toggle {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
    color: var(--accent);
  }
  body.dash-nav-open .dash-nav-toggle .bars { background: transparent; }
  body.dash-nav-open .dash-nav-toggle .bars::before,
  body.dash-nav-open .dash-nav-toggle .bars::after {
    background: var(--accent); top: 0;
  }
  body.dash-nav-open .dash-nav-toggle .bars::before { transform: rotate(45deg); }
  body.dash-nav-open .dash-nav-toggle .bars::after { transform: rotate(-45deg); }
  .dash-header-rest {
    display: none;
    position: absolute; left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right));
    top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 10px;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px; box-shadow: var(--shadow); z-index: 40;
  }
  body.dash-nav-open .dash-header-rest { display: flex; }
  body.dash-nav-open .dash-header-rest .spacer { display: none; }
  nav.tabs-main { flex-direction: column; width: 100%; }
  nav.tabs-main a { min-height: var(--touch-min); display: flex; align-items: center; padding: 10px 14px; }
  .dash-header-rest .dash-header-actions {
    flex-direction: column; width: 100%; gap: 10px;
  }
  .dash-header-rest .pill, .dash-header-rest button.nav-pill, .dash-header-rest .bug-report-btn {
    min-height: var(--touch-min); width: 100%;
    display: flex; align-items: center; justify-content: center; text-align: center;
  }
  /* Email pill: full-width like the other drawer rows (cap only applies inline in the bar). */
  .dash-header-rest #userPill { max-width: none; }
  .dash-header-rest .bug-report-btn {
    gap: 8px;
    height: auto; padding: 10px;
  }
  .dash-header-rest .bug-report-btn__label {
    display: inline;
    font-size: 13px;
    font-weight: 600;
  }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
}

@media (min-width: 1481px) {
  .dash-nav-toggle { display: none !important; }
  .dash-header-rest { display: flex !important; }
}

@media (max-width: 768px) {
  header.top {
    padding: calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) 10px calc(12px + var(--safe-left));
    gap: 10px;
  }
  table.recs-sticky-col [data-col="underlying_ticker"],
  table.recs-sticky-col td.tk-cell {
    position: sticky; left: 0; z-index: 2;
    background: var(--panel); box-shadow: 2px 0 4px rgba(0,0,0,.25);
  }
  .wrap { padding: calc(16px + var(--safe-top)) calc(14px + var(--safe-left)) calc(20px + var(--safe-bottom)); }
  .auth-wrap { padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); }
  .legal-wrap .panel { padding: 18px 16px; }
  input, select, textarea { font-size: 16px; }
  button, nav.tabs-main a, .pill, .tabs button { min-height: var(--touch-min); }
  .wheel-tab-strip button { min-height: var(--touch-min); }
  .modal { align-items: flex-end; padding: 0; }
  .modal-card {
    max-height: min(92dvh, 100%); border-radius: 16px 16px 0 0;
    padding-bottom: calc(18px + var(--safe-bottom)); margin: 0; width: 100%; max-width: 100%;
  }
  .modal-card.cycle-detail-modal {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(92dvh, 100%);
    padding: 18px 16px;
    padding-bottom: calc(18px + var(--safe-bottom));
  }
  .modal-card.sentiment-detail-modal {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(92dvh, 100%);
    padding: 18px 16px;
    padding-bottom: calc(18px + var(--safe-bottom));
  }
  .modal-card.income-detail-modal {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(92dvh, 100%);
    padding: 18px 16px;
    padding-bottom: calc(18px + var(--safe-bottom));
  }
  #incomeDetailModal #incomeDetailDistBlock #incomeDetailDistChart.income-dist-chart {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }
  .cycle-detail-block[open] > .cycle-detail-block-panel {
    max-height: min(48vh, 440px);
  }
  .cycle-gauge-legend {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .modal-card button[id$="Close"],
  .modal-card > .modal-close {
    top: calc(12px + var(--safe-top));
    right: calc(12px + var(--safe-right));
  }
  #toasts {
    left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right));
    bottom: calc(12px + var(--safe-bottom)); max-width: none;
  }
  .info, .hint, .hint-col {
    min-width: var(--touch-min); min-height: var(--touch-min);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .dash-foot { padding: calc(14px + var(--safe-bottom)) calc(16px + var(--safe-left)) !important; }
  /* Compact filter grid — avoid stretched fields (flex-grow) and single-column stack. */
  .filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: end;
    margin: 8px 0 10px;
  }
  .filter-field { flex: none; gap: 4px; min-width: 0; }
  .filter-field input, .filter-field select, .filter-field .cs { width: 100%; }
  .filter-field-grow { grid-column: 1 / -1; max-width: none; }
  .filter-field:has(.year-chips),
  .filter-field:has(select[multiple]) { grid-column: 1 / -1; }
  .filter-field > label .hint,
  .filter-field > label .info {
    min-width: 28px; min-height: 28px;
    width: 28px; height: 28px;
  }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
}

/* Preferred Income Quality — candidate class badges (UIKit + screener).
   Compact labels (Event / Pending / Error) — full class name in title. */
.income-class-badge {
  display: inline-block;
  max-width: 100%;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}
.income-class--income { border-color: var(--good); color: var(--good); }
.income-class--event { border-color: var(--warn); color: var(--warn); }
.income-class--pending { border-color: var(--muted); color: var(--muted); }
.income-class--error { border-color: var(--bad); color: var(--bad); }