/* ── DividendIQ — App Styles ──
   Theme: Slate/Midnight Gradient · Font: Inter · Density: Compact
   Responsive: Mobile-first, desktop-enhanced
   ────────────────────────────────────────── */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&family=Inter+Tight:wght@600;700;800&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --bg:          #080d1a;
  --surface:     #0e1628;
  --surface2:    #131e35;
  --surface3:    #1a2844;
  --surface4:    #1f3050;
  --border:      rgba(99,132,255,0.12);
  --border2:     rgba(99,132,255,0.22);
  --border3:     rgba(99,132,255,0.35);
  --accent:      #5b8def;
  --accent2:     #7c6fff;
  --accent-glow: rgba(91,141,239,0.20);
  --pos:         #22d3a0;
  --pos-bg:      rgba(34,211,160,0.10);
  --pos-rgb:     34,211,160;
  --neg:         #f55a6a;
  --neg-bg:      rgba(245,90,106,0.10);
  --neg-rgb:     245,90,106;
  /* engagement fix-ticker-a11y-color-contrast-h1: backfill --on-accent for
     the default Slate style. On --accent #5b8def (blue), #0a0a0a yields
     ~6.1:1 (passes AA 4.5:1 with margin). Used by .cal-scope-btn[aria-selected],
     .cal-view-toggle button[aria-pressed], and elsewhere via the token. */
  --on-accent:   #0a0a0a;
  --text:        #e8edf8;
  --text2:       #8fa3c8;
  --text3:       #4d6690;
  --text4:       #2d4266;
  --yellow:      #f5c842;
  --yellow-bg:   rgba(245,200,66,0.09);
  --yellow-border:rgba(245,200,66,0.25);
  --purple:      #a78bfa;
  --header-h:    54px;
  --radius:      10px;
  --radius-sm:   6px;
  --radius-lg:   14px;
  --space-1:     2px;
  --space-2:     4px;
  --space-3:     8px;
  --space-4:     12px;
  --space-5:     16px;
  --space-6:     24px;
  --page-gutter-mobile: 10px;
  --header-gap:  var(--space-4);
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:'Inter Tight', 'Inter', sans-serif;
  --shadow:      0 4px 24px rgba(0,0,0,0.4);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.25);
  /* ── Calendar event tokens (design § 5.4) ──
     --cal-event-ex / --cal-event-pay are aliases of existing tokens
     so they ride the active theme automatically.
     --cal-event-cut is a new semantic token — themes.css overrides per
     theme/style for WCAG AA against --surface. */
  --cal-event-ex:  var(--accent);
  --cal-event-pay: var(--text2);
  --cal-event-cut: #c0392b;
}

/* ── iOS Safari tap-latency floor (ios-hover-emulation-fix #286) ──
   Set touch-action: manipulation on all interactive element types so
   iOS Safari skips its historical ~300 ms double-tap-zoom delay
   heuristic on EVERY tap target — current and future. This is the
   belt-and-suspenders companion to the @media (hover: hover) wraps
   below; together they eliminate (a) the hover-emulation tap-suppression
   and (b) the 300 ms zoom-delay. Specificity is ≤ 0,1,1 (single element,
   single class, or attribute selector). Any later same-specificity rule
   wins on source order; any 0,2,0-or-higher per-element override
   (e.g. .panel .qty-editable { touch-action: none; }) wins on specificity.
   Supersedes the legacy spot-fix rule at #main-table tbody tr[data-ticker],
   #remove-ticker-btn, etc. (which is kept as redundant defence and
   historical PR-D / PR #277 / PR-1 traceability — see app.css:4488+).
   Selector list audit methodology: grep app.css for every selector with
   both `cursor: pointer` and an associated `:hover` rule, plus button-type
   element selectors (button, [role="button"], anchor-styled-as-button).
   See design §3.2 for the full per-selector rationale. */
button,
[role="button"],
a.btn,
a.nav-link,
a.macrolens-open-link,
.diq-pf-menu__item,
.diq-pf-acct-picker__popover li,
.qty-editable,
.col-picker-item,
.tks-option,
.import-file-zone,
.import-preset-override,
.mig-dropzone {
  touch-action: manipulation;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  /* iOS Safari ignores `body { overflow-x: hidden }` alone when a child
     (typically a sticky header with flex-shrink: 0 children) renders wider
     than the viewport. `overflow: clip` on html is the canonical fix —
     unlike `hidden`, it does NOT create a scroll container so sticky
     positioning still works. Fallback to `hidden` for ancient browsers
     via the @supports rule below. */
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

/* ── BASE ── */
body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

/* ── ATMOSPHERE ── */
.bg-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 15% -5%,  rgba(91,141,239,0.13) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 105%,  rgba(124,111,255,0.11) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50%  55%,  rgba(34,211,160,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 90%  10%,  rgba(245,200,66,0.03) 0%, transparent 40%);
}

.bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── LAYOUT ── */
.app { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.diq-smoke-session-badge {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 950;
  pointer-events: none;
  user-select: none;
  padding: 6px 10px;
  border: 2px solid #111827;
  border-radius: 999px;
  background: #facc15;
  color: #111827;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
.diq-smoke-session-badge[hidden] { display: none !important; }
/* Every <main> sits ABOVE the .bg-atmosphere and .bg-noise overlays so
   their low-opacity gradients can never paint over text. Pages that DON'T
   wrap content in `.app` (account.html, login.html, alerts.html,
   auth/verify.html, auth/oauth/*) used to render with atmosphere
   overlaying static-positioned content, washing every heading + body
   text into the cream background in light theme. `position: relative;
   z-index: 1` puts main in its own stacking context above the
   fixed-positioned atmosphere (z-index: 0), matching what the .app
   wrapper already does on index.html. Static main + fixed atmosphere is
   a recurring bug class — this rule is the universal floor. */
main {
  flex: 1;
  padding: 16px 20px 40px;
  padding-inline-start: max(20px, env(safe-area-inset-left));
  padding-inline-end: max(20px, calc(env(safe-area-inset-right) + 2px));
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* ── Top app header only (avoid styling section-level <header> blocks) ── */
header[role="banner"] {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
  padding-block: 0;
  padding-inline-start: max(20px, env(safe-area-inset-left));
  padding-inline-end: max(20px, calc(env(safe-area-inset-right) + 2px));
  background: rgba(8,13,26,0.88);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.025em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon {
  width: 35px; height: 35px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 0 18px rgba(91,141,239,0.40), inset 0 1px 0 rgba(255,255,255,0.15);
}

.logo-wordmark span { color: var(--accent); }

/* Nav */
nav.nav-priority {
  display: flex;
  flex-wrap: nowrap;          /* never wrap; overflow handled in JS */
  gap: 2px;
  /* PR-205-followup: post-relocation of the More button into .nav-aux,
     `flex: 1` left an empty gap on wide screens because nav-priority
     expanded to fill available space without any inline child filling
     the right edge. `flex: 0 1 auto` makes nav-priority hug its tab
     content on wide screens (no gap before nav-aux/Alerts/More) while
     still allowing it to shrink under header-flex pressure on narrow
     screens — at which point tabs past the shrunk nav.right get
     clipped and the Priority+ overflow machinery fires as before. */
  flex: 0 1 auto;
  justify-content: flex-start;/* ISSUE-003: right-edge is the canonical
                                 overflow boundary */
  min-width: 0;               /* allow shrink inside header flexbox */
  position: relative;
  overflow: clip;             /* ISSUE-003: prevent visual leak past the
                                 right edge before IO fires. `clip` is
                                 preferred over `hidden` because it does
                                 NOT create a scroll container. */
}
@supports not (overflow: clip) {
  nav.nav-priority { overflow: hidden; }
}

nav.nav-priority .nav-link[hidden] { display: none; }

.nav-more-btn[aria-expanded="true"] { background: var(--surface2); }

.nav-overflow {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); /* ISSUE-001: --radius-md is undefined */
  box-shadow: var(--shadow);
  list-style: none;
  padding: 4px;
  margin: 4px 0 0 0;
  min-width: 180px;
  z-index: 50;
}
.nav-overflow[hidden] { display: none; }

.nav-overflow li > button {
  display: block;
  width: 100%;
  text-align: left;
}

/* Aux nav slot (sibling of nav.nav-priority) for non-tab nav links
   like /alerts. See design § ISSUE-004.
   
   Also hosts the Priority+ overflow's More button + dropdown menu —
   nav-priority itself has `overflow: clip` (to prevent visual leak of
   un-shuffled tabs before IO fires), which also clips the dropdown when
   it's anchored INSIDE the nav. Hosting the menu in .nav-aux puts both
   the trigger AND the dropdown outside the clip and to the right of any
   non-tab links (e.g. Alerts), matching the conventional "More at the
   far right" pattern. `position: relative` is required so the dropdown's
   `position: absolute; top: 100%; right: 0` anchors here. */
.nav-aux {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  position: relative;
}

.nav-link {
  padding: 5px 13px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text3);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .nav-link:hover  { color: var(--text2); background: var(--surface2); }
}
.nav-link.active { color: var(--accent); background: rgba(91,141,239,0.12); }

/* ══════════════════════════════════════════════════════════════════════
   Mobile Hamburger Nav (Issue #177)
   See docs/design/nav-hamburger-mobile.md.

   Two mutually exclusive modes:
     * <768px : hamburger visible; nav.nav-priority + .nav-aux hidden.
     * >=768px: existing Priority+ behavior; hamburger hidden.

   Canonical breakpoint is `--breakpoint-md`; the JS mirror is
   `BREAKPOINT_MD_MAX` in nav-mobile.js. A test asserts they agree.
   CSS @media cannot use var() in its query, so the constant lives
   here only as documentation.
   ══════════════════════════════════════════════════════════════════════ */

:root { --breakpoint-md: 767.98px; }

.nav-hamburger-btn {
  /* CRITICAL: pin width via flex 0 0 auto + explicit 44px target.
     Without this, the parent <header>'s flex layout would let
     sibling flex pressure shrink the hamburger to 0 — the #171
     root cause this engagement exists to fix. */
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;

  display: none;          /* shown by @media (max-width: 767.98px) below */
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 31px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font);
}
/* iOS Safari fix (nav-menu-unresponsive): :hover is wrapped in
   @media (hover: hover) so it never applies on touch-only devices.
   On iOS Safari, a tap can leave a sticky :hover background on the
   tapped element AND can also cause the next click event to be
   silently dropped (hover-vs-click ambiguity for hovered elements).
   Pointer-capable input devices (mouse, trackpad) still get the
   hover affordance. */
@media (hover: hover) {
  .nav-hamburger-btn:hover { background: var(--surface2); }
}
.nav-hamburger-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-hamburger-btn[aria-expanded="true"] { background: var(--surface2); }

/* Mode A — Mobile (<768px): show hamburger, hide priority + aux. */
@media (max-width: 767.98px) {
  header[role="banner"] {
    padding-inline-start: max(var(--page-gutter-mobile), env(safe-area-inset-left));
    padding-inline-end: max(var(--page-gutter-mobile), calc(env(safe-area-inset-right) + 2px));
  }
  nav.nav-priority   { display: none; }
  .nav-aux           { display: none; }
  .nav-hamburger-btn {
    display: inline-flex;
    margin-right: calc(var(--space-1) - var(--header-gap));
  }
}
/* Mode B — Tablet+ (>=768px): hamburger hidden (belt + suspenders). */
@media (min-width: 768px) {
  .nav-hamburger-btn { display: none; }
}

/* Backdrop + sheet — JS-injected at end of <body>. */
.nav-mobile-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 998;
}
.nav-mobile-backdrop[hidden] { display: none; }

#nav-mobile-sheet {
  position: fixed; inset: 0;
  z-index: 999;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px;
  box-shadow: var(--shadow);
}
#nav-mobile-sheet[hidden] { display: none; }

.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.nav-mobile-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.nav-mobile-close {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0;
}
/* iOS Safari fix (nav-menu-unresponsive) — see note on
   .nav-hamburger-btn:hover above. */
@media (hover: hover) {
  .nav-mobile-close:hover { background: var(--surface2); }
}
.nav-mobile-close:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.nav-mobile-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.nav-mobile-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
}
/* iOS Safari fix (nav-menu-unresponsive) — see note on
   .nav-hamburger-btn:hover above. */
@media (hover: hover) {
  .nav-mobile-item:hover { background: var(--surface2); }
}
.nav-mobile-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.nav-mobile-item.is-active,
.nav-mobile-item[aria-current="page"] {
  font-weight: 700;
  color: var(--accent);
  background: rgba(91,141,239,0.12);
  border-left-color: var(--accent);
}
.nav-mobile-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
  list-style: none;
}

/* Mobile sheet — section label + action item (Issue #207).
   A section label is a presentational header (NOT a focusable item; the
   list omits .nav-mobile-item so it's skipped by arrow-key nav + focus
   trap). Action items live in the sheet at <640px to expose Refresh /
   Download / Import while their header counterparts are hidden. */
.nav-mobile-section-label {
  padding: 8px 12px 4px;
  font: 600 11px/1.2 var(--font);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
  list-style: none;
}
.nav-mobile-item--action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  font: 500 14px/1.2 var(--font);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
}
/* iOS Safari fix (nav-menu-unresponsive) — see note on
   .nav-hamburger-btn:hover above. */
@media (hover: hover) {
  .nav-mobile-item--action:hover:not(:disabled) { background: var(--surface2); }
}
.nav-mobile-item--action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.nav-mobile-item--action:disabled,
.nav-mobile-item--action[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.nav-mobile-item__icon { width: 18px; text-align: center; font-size: 16px; }

body.nav-mobile-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #nav-mobile-sheet, .nav-mobile-backdrop { transition: none !important; animation: none !important; }
}

/* Header right */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.update-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
}

.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 7px var(--pos);
  flex-shrink: 0;
  animation: statusPulse 2.5s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

/* ── IDENTITY MENU ──
   See docs/design/identity-indicator.md § 4, § 8, § 11.
   All colors come from CSS custom properties (theme system). The collapsed
   avatar uses --text on --surface2 (≥ 12 : 1 in every theme combo); the
   expanded state uses --on-accent on --accent (NEW token in themes.css). */

.btn-identity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .btn-identity:hover { border-color: var(--accent); }
}
.btn-identity:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-identity[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-identity[aria-expanded="true"] .identity-avatar__letter {
  color: var(--on-accent);
}

.identity-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.identity-avatar__letter {
  font: 600 13px/1 var(--font);
  color: var(--text);
  text-transform: uppercase;
  transition: color 0.15s;
}
.btn-identity[data-state="loading"] .identity-avatar__letter,
.btn-identity[data-state="degraded"] .identity-avatar__letter {
  color: var(--text3);
}

/* Defensive: keep the topbar buttons from shrinking under width pressure
   so the logo wordmark compresses first. See design § 8. */
.header-right > .btn,
.header-right > .btn-identity {
  flex-shrink: 0;
}

/* Panel */
.identity-menu {
  position: fixed;
  top: calc(var(--header-h) + 6px);
  right: 12px;
  width: min(280px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 1000;
}
.identity-menu[hidden] { display: none; }

.identity-menu__header { padding: 10px 12px 8px; }
.identity-menu__label {
  font: 500 11px/1.2 var(--font);
  color: var(--text3);
  margin-bottom: 4px;
}
.identity-menu__email-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.identity-menu__email {
  font: 500 13px/1.3 var(--font);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.identity-menu__copy {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  font: inherit;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus-visible per design §2.3.1. The :focus-visible branch stays
   OUTSIDE the @media wrap so keyboard focus styling still applies on
   touch + external-keyboard devices (e.g. iPad with Magic Keyboard).
   See top-of-file tap-latency utility comment for the broader rationale. */
@media (hover: hover) {
  .identity-menu__copy:hover {
    color: var(--accent);
    outline: none;
  }
}
.identity-menu__copy:focus-visible {
  color: var(--accent);
  outline: none;
}
.identity-menu__copy-confirm {
  font: 500 11px/1.2 var(--font);
  color: var(--text3);
  flex-shrink: 0;
}
.identity-menu__unavailable {
  font: 500 12px/1.3 var(--font);
  color: var(--text3);
  margin-top: 4px;
}

.identity-menu__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.identity-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font: 500 13px/1.2 var(--font);
  color: var(--text2);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus-visible per design §2.3.1. See note on .identity-menu__copy
   above. */
@media (hover: hover) {
  .identity-menu__item:hover {
    background: var(--surface2);
    color: var(--text);
    outline: none;
  }
}
.identity-menu__item:focus-visible {
  background: var(--surface2);
  color: var(--text);
  outline: none;
}
.identity-menu__item--logout { color: var(--text2); }
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .identity-menu__item--logout:hover { color: var(--accent); }
}
.identity-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
  font-size: 20px;
  font-variant-emoji: text;
  line-height: 1;
  color: currentColor;
  background: transparent;
  text-align: center;
}
/* Text-presentation glyphs (gear U+2699, return-arrow U+21AA) under-fill the
   22px box compared with color-emoji glyphs (person/bell/chat) at the same
   font-size. Bump the font-size on those two rows so apparent glyph size
   matches the others without changing the wrapper box. Prior values
   (28px / 26px) still rendered slightly smaller than the color emoji on
   mobile Safari; bumped to 31px / 29px, then gear further to 33px (~5%)
   because the gear glyph still trailed the others on staging. */
#identity-settings .identity-menu__icon { font-size: 34px; }
#identity-signout  .identity-menu__icon { font-size: 29px; }

@media (prefers-reduced-motion: reduce) {
  .btn-identity { transition: none; }
  .identity-avatar__letter { transition: none; }
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, opacity 0.15s;
  user-select: none;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

.btn-ghost {
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .btn-ghost:hover:not(:disabled) {
    background: var(--surface3);
    color: var(--text);
    border-color: var(--border2);
    transform: translateY(-1px);
  }
}

.diviq-admin-toggle {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}
.diviq-admin-toggle[aria-expanded="true"] {
  color: var(--text);
  background: var(--surface3);
  border-color: var(--accent);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  box-shadow: 0 2px 14px rgba(91,141,239,0.35);
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(91,141,239,0.50);
  }
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 6px;
}

/* ── BACK LINK (page chrome) ──
   New shape (see docs/design/ticker-page-feedback-batch-fix.md § 3.3).
   Used by /ticker/<S> (this engagement) and /tax-profile (deferred
   follow-up) to give the user a visible "back" affordance. NOT a
   button — semantically an <a>; back is navigation. Tokens only;
   no hex. */
.diq-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  user-select: none;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus-visible per design §2.3.1. Keyboard focus styling stays
   outside the @media wrap so it still applies on touch + external-
   keyboard devices (e.g. iPad with Magic Keyboard). */
@media (hover: hover) {
  .diq-back-link:hover {
    color: var(--text);
    border-color: var(--border2);
    background: var(--surface2);
    outline: none;
  }
}
.diq-back-link:focus-visible {
  color: var(--text);
  border-color: var(--border2);
  background: var(--surface2);
  outline: none;
}
.diq-back-link__icon {
  font-size: 1.05em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.diq-back-link__label { line-height: 1.2; }

/* Page-nav row container (margin only — does not own any visual chrome).
   Lives at the top of /ticker and /tax-profile pages. */
.tk-page-nav,
.tax-page-nav {
  margin: 0 0 12px 0;
}

/* Refresh icon spin */
.spinning { animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── LOADING BAR ── */
.loading-bar {
  height: 2px;
  border-radius: 2px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent2) 70%, transparent 100%);
  background-size: 300% 100%;
  opacity: 0;
  transition: opacity 0.25s;
}
.loading-bar.active {
  opacity: 1;
  animation: loadSlide 1.3s ease-in-out infinite;
}
@keyframes loadSlide {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── STAT CARDS ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  animation: fadeSlideUp 0.5s ease both;
}

.stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px 11px;
  overflow: hidden;
  cursor: default;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .stat-card:hover {
    border-color: var(--border2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
}

/* Top accent bar */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0.7;
}
.stat-card.accent::before  { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.stat-card.green::before   { background: linear-gradient(90deg, var(--pos), #18b885); }
.stat-card.yellow::before  { background: linear-gradient(90deg, var(--yellow), #d4a008); }
.stat-card.purple::before  { background: linear-gradient(90deg, var(--purple), var(--accent2)); }

.stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 5px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text3);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.badge.pos { background: var(--pos-bg);  color: var(--pos); }
.badge.neg { background: var(--neg-bg);  color: var(--neg); }
.badge.muted { background: var(--surface3); color: var(--text3); }

/* ── TOOLBAR ── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  animation: fadeSlideUp 0.5s 0.08s ease both;
  position: relative;
  z-index: 20;
}

.toolbar-left  { display: flex; gap: 7px; flex: 1; flex-wrap: wrap; }
.toolbar-right { display: flex; gap: 7px; flex-shrink: 0; }

/* Search */
.search-wrap {
  position: relative;
  min-width: 180px;
  flex: 1;
  max-width: 240px;
}

.search-icon {
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text3);
  pointer-events: none;
}

.search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px 6px 30px;
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input::placeholder { color: var(--text4); }
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,141,239,0.12);
}

/* Select filters */
.filter-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 26px 6px 10px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text2);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6H0z' fill='%234d6690'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.15s, color 0.15s;
}
.filter-select:focus  { border-color: var(--accent); color: var(--text); }
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .filter-select:hover  { border-color: var(--border2); color: var(--text); }
}

/* ── COLUMN PICKER ── */
.col-picker-wrap {
  position: relative;
}
.col-picker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 120;
  padding: 6px 0;
}
.col-picker[hidden] { display: none !important; }
.col-picker-header {
  padding: 6px 12px 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.col-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--text2);
  cursor: pointer;
  transition: background 0.12s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .col-picker-item:hover {
    background: var(--hover);
  }
}
.col-picker-item input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
}

/* ── ROW COUNT BAR ── */
.row-count-bar {
  font-size: 11.5px;
  color: var(--text4);
  padding: 2px 2px 6px;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.holdings-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.holdings-view-btn {
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
}

.holdings-view-btn.active {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.holdings-group-row td {
  background: var(--surface2);
  border-top: 1px solid var(--border2);
  font-size: 11px;
  letter-spacing: 0.03em;
}
.holdings-group-name { font-weight: 700; color: var(--text); }
.holdings-group-type {
  margin-left: 10px;
  color: var(--text3);
  text-transform: uppercase;
}

/* ── TABLE WRAPPER ── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: fadeSlideUp 0.5s 0.12s ease both;
  box-shadow: var(--shadow);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

@media (pointer: fine) {
  .table-scroll { cursor: grab; }
}

.table-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* Scroll hint fade on mobile */
@media (max-width: 639px) {
  .table-scroll::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to left, var(--surface), transparent);
    pointer-events: none;
  }
  .table-wrap { position: relative; }
}

/* ── TABLE ── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ── THEAD ── */
thead tr {
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}

th {
  padding: 8px 11px;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, background 0.15s;
  position: sticky;
  top: 0;
  background: var(--surface2);
  z-index: 10;
}

th:first-child { text-align: left; padding-left: 14px; }
th:nth-child(2) { text-align: left; }

/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  th:hover { color: var(--text2); background: var(--surface3); }
}
th.sorted { color: var(--accent); }

/* Column-specific header colors */
.col-price  th, th.col-price  { color: #c084fc; }
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .col-price th:hover, th.col-price:hover { color: #d8b4fe; }
}
th.col-mktval { color: var(--accent); }
th.col-yield  { color: var(--pos); }
th.col-cagr   { color: var(--yellow); }

.sort-arrow {
  display: inline-block;
  margin-left: 3px;
  font-size: 9px;
  opacity: 0.45;
  vertical-align: middle;
  transition: opacity 0.15s;
}
th.sorted .sort-arrow { opacity: 1; }
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. NOTE: this selector ends
   in a descendant (`.sort-arrow`) but is hover-dependent (the `:hover`
   modifier on the ancestor). The Test 3 positive assertion accepts
   "contains :hover" not "ends in :hover" specifically to handle this
   legitimate hover-descendant pattern — see design §2.4 enumeration
   and impl note Design Issues Found § 1. */
@media (hover: hover) {
  th:hover .sort-arrow  { opacity: 0.7; }
}

/* ── TBODY ── */
tbody tr {
  border-bottom: 1px solid rgba(99,132,255,0.055);
  transition: background 0.12s;
  animation: rowSlideIn 0.35s ease both;
}

@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

tbody tr:last-child { border-bottom: none; }
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  tbody tr:hover { background: rgba(91,141,239,0.055); }
}

/* Highlighted positions */
tbody tr.highlight {
  background: var(--yellow-bg);
  border-bottom-color: rgba(245,200,66,0.08);
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  tbody tr.highlight:hover { background: rgba(245,200,66,0.13); }
}

td {
  padding: 6px 11px;
  text-align: right;
  color: var(--text2);
  white-space: nowrap;
  vertical-align: middle;
}

td:first-child { text-align: left; padding-left: 14px; }
td:nth-child(2) { text-align: left; }

/* ── CELL TYPES ── */
.ticker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.01em;
}

.ticker-wrap { display: flex; align-items: center; gap: 5px; }

.watch-badge {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(91,141,239,0.15);
  color: var(--accent);
  vertical-align: middle;
}

.sample-badge {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(245,200,66,0.18);
  color: #b68900;
  vertical-align: middle;
}

.company-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Sector badges */
.sector-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sector-energy    { background: rgba(251,146,60,0.14);  color: #fb923c; }
.sector-staples   { background: rgba(34,211,160,0.12);  color: var(--pos); }
.sector-disc      { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.sector-health    { background: rgba(96,165,250,0.14);  color: #60a5fa; }
.sector-financial { background: rgba(167,139,250,0.14); color: var(--purple); }
.sector-tech      { background: rgba(91,141,239,0.14);  color: var(--accent); }
.sector-industrial{ background: rgba(245,200,66,0.12);  color: var(--yellow); }
.sector-utility   { background: rgba(245,90,106,0.12);  color: var(--neg); }
.sector-reit      { background: rgba(251,113,133,0.12); color: #fb7185; }
.sector-materials { background: rgba(52,211,153,0.12);  color: #34d399; }
.sector-etf       { background: rgba(99,102,241,0.14);  color: #818cf8; }

/* Price column */
.price-val { color: #c084fc; font-weight: 600; }
td.col-price.stale .price-val { opacity: 0.5; }

/* Quantity */
.qty-cell { color: var(--accent); font-weight: 500; }

/* Changes */
.pos-val { color: var(--pos); font-weight: 500; }
.neg-val { color: var(--neg); font-weight: 500; }

/* Market value */
.col-mktval { color: var(--accent); font-weight: 500; }

/* Yield */
.yield-val { color: var(--pos); font-weight: 600; }
.yield-hi  {
  background: rgba(34,211,160,0.12);
  padding: 2px 7px;
  border-radius: 4px;
}

/* CAGR */
.cagr-val { color: var(--yellow); font-weight: 600; }

/* Muted */
.text-muted { color: var(--text4); }

/* ── ACTIONS COLUMN ── */
.col-actions {
  width: 40px;
  text-align: center !important;
  padding: 4px 6px !important;
}

.diq-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: rgba(245,90,106,0.12);
  color: var(--neg);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus-visible per design §2.3.1. The :focus-visible branch stays
   OUTSIDE the @media wrap so keyboard focus styling still applies on
   touch devices. */
@media (hover: hover) {
  .diq-delete-btn:hover {
    background: rgba(245,90,106,0.28);
    color: #fff;
  }
}
.diq-delete-btn:focus-visible {
  background: rgba(245,90,106,0.28);
  color: #fff;
}

/* ── INLINE QTY EDIT ── */
.qty-editable {
  cursor: pointer;
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .qty-editable:hover {
    background: rgba(91,141,239,0.08);
    border-radius: 4px;
  }
}

.qty-inline-input {
  width: 80px;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text1);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: right;
  outline: none;
}

.qty-inline-input:focus {
  box-shadow: 0 0 0 2px rgba(91,141,239,0.3);
}

/* ── DELETE CONFIRMATION TOOLTIP ── */
.diq-confirm-tip {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  white-space: nowrap;
  z-index: 100;
  animation: diq-fade-in 0.12s ease-out;
}

@keyframes diq-fade-in {
  from { opacity: 0; transform: translateY(-50%) scale(0.95); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

.diq-confirm-msg {
  font-size: 0.82rem;
  color: var(--text2);
}

.diq-confirm-yes,
.diq-confirm-no {
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}

.diq-confirm-yes {
  background: var(--neg);
  color: #fff;
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .diq-confirm-yes:hover { background: #e9404f; }
}

.diq-confirm-no {
  background: rgba(255,255,255,0.08);
  color: var(--text3);
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .diq-confirm-no:hover { background: rgba(255,255,255,0.15); }
}

/* Hide actions column on mobile */
@media (max-width: 639px) {
  .col-actions { display: none; }
}

/* ── LOGO COLUMN ── */
.col-logo { text-align: center !important; width: 56px; padding: 4px 6px !important; }
.col-ticker { width: 1%; }  /* shrink-to-fit: column sizes to header or widest symbol, never claims spare width */

/* ── STICKY TICKER COLUMN (left-pin on horizontal scroll) ──
   Pins the TICKER column to the left edge of .table-scroll so row
   identity stays visible when the user scrolls right through the
   wide column set. Header cell also pins on BOTH axes so the
   TICKER label stays in the top-left corner. */

/* Body cells: pin left, opaque base layer so cells from columns
   to the right cannot bleed through when they scroll under. */
td.col-ticker {
  position: sticky;
  left: 0;
  z-index: 2;
  /* Opaque base — matches the table background so non-tinted rows
     read identically to before. Tint classes layer ON TOP via
     background-image (see below) so the tint alpha composites
     over this opaque base instead of over the scrolling cells. */
  background-color: var(--surface);
}

/* Header cell: sticky on BOTH axes (top from existing th rule +
   left here). z-index above body sticky col so the corner cell
   wins both stacking contests. */
th.col-ticker {
  left: 0;
  z-index: 11;
}

/* Pronounced palette (Settings toggle): same layering trick.
   IMPORTANT — keep BOTH `background-color: var(--surface)` AND
   `background-image: linear-gradient(...)` on every rule below.
   The default-palette rule [data-ticker-highlight="pronounced"] .ticker-*
   uses the `background:` shorthand, which resets background-image to
   none AND sets a transparent background-color. Its specificity is
   (0,2,0). The rules below are (0,3,1) and so win on both properties —
   but only because we explicitly set both. Drop the background-color
   half and (0,2,0) wins on background-color, re-introducing the
   bleed-through. */
[data-ticker-highlight="pronounced"] td.col-ticker.ticker-up {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(0, 200, 100, 0.45),
                                    rgba(0, 200, 100, 0.45));
}
[data-ticker-highlight="pronounced"] td.col-ticker.ticker-up-strong {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(0, 220, 80, 0.70),
                                    rgba(0, 220, 80, 0.70));
}
[data-ticker-highlight="pronounced"] td.col-ticker.ticker-down {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(220, 50, 50, 0.45),
                                    rgba(220, 50, 50, 0.45));
}
[data-ticker-highlight="pronounced"] td.col-ticker.ticker-down-strong {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(240, 30, 30, 0.70),
                                    rgba(240, 30, 30, 0.70));
}

/* Highlighted-row state (HIGHLIGHT_TICKERS): opaque surface base +
   yellow gradient layer so the sticky cell stays bleed-free. */
tbody tr.highlight td.col-ticker {
  background-color: var(--surface);
  background-image: linear-gradient(var(--yellow-bg), var(--yellow-bg));
}

/* Ticker movement tints on sticky cell. Prefix with tbody tr so these
   selectors tie the highlighted-row sticky selector at (0,2,3) and win
   by source order because they appear after it. */
tbody tr td.col-ticker.ticker-up {
  background-image: linear-gradient(rgba(0, 200, 100, 0.10),
                                    rgba(0, 200, 100, 0.10));
}
tbody tr td.col-ticker.ticker-up-strong {
  background-image: linear-gradient(rgba(0, 220, 80, 0.18),
                                    rgba(0, 220, 80, 0.18));
}
tbody tr td.col-ticker.ticker-down {
  background-image: linear-gradient(rgba(220, 50, 50, 0.10),
                                    rgba(220, 50, 50, 0.10));
}
tbody tr td.col-ticker.ticker-down-strong {
  background-image: linear-gradient(rgba(240, 30, 30, 0.18),
                                    rgba(240, 30, 30, 0.18));
}

/* tfoot totals row — match the totals surface while keeping the cell pinned. */
tfoot td.col-ticker {
  background-color: var(--surface2);
  position: sticky;
  left: 0;
  z-index: 2;
}

.logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--logo-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--logo-border, rgba(255,255,255,0.08));
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. NOTE: this selector ends
   in a descendant (`.logo-wrap`) but is hover-dependent (the `:hover`
   modifier on the ancestor `tr`). The Test 3 positive assertion accepts
   "contains :hover" not "ends in :hover" specifically to handle this
   legitimate hover-descendant pattern — see impl note Design Issues
   Found § 1. */
@media (hover: hover) {
  tr:hover .logo-wrap {
    background: var(--logo-bg-hover, rgba(255,255,255,0.10));
    border-color: var(--logo-border-hover, rgba(255,255,255,0.14));
  }
}

.logo-wrap img {
  width: 28px; height: 28px;
  object-fit: contain;
  display: block;
}

.logo-fallback {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--accent);
  line-height: 1;
  text-align: center;
  padding: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34px;
}

/* ── FLASH ANIMATIONS (price refresh) ── */
@keyframes flashPos {
  0%   { background: rgba(34,211,160,0.22); }
  100% { background: transparent; }
}
@keyframes flashNeg {
  0%   { background: rgba(245,90,106,0.22); }
  100% { background: transparent; }
}
.flash-pos { animation: flashPos 1.5s ease forwards; }
.flash-neg { animation: flashNeg 1.5s ease forwards; }

/* ── TFOOT ── */
tfoot tr {
  background: var(--surface2);
  border-top: 1px solid var(--border2);
}

tfoot td {
  padding: 7px 11px;
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}

tfoot td:first-child { padding-left: 14px; font-size: 10px; letter-spacing: 0.05em; color: var(--text3); text-transform: uppercase; }

.totals-cell strong { color: var(--text); }

/* ── TICKER COLUMN — PRICE-MOVEMENT BACKGROUND ── */
/* Default = soft tint. The pronounced palette is opt-in via
   data-ticker-highlight="pronounced" on <html>, set by Settings. */
.ticker-up          { background: rgba(0, 200, 100, 0.10); }
.ticker-up-strong   { background: rgba(0, 220, 80,  0.18); }
.ticker-down        { background: rgba(220, 50, 50, 0.10); }
.ticker-down-strong { background: rgba(240, 30, 30, 0.18); }

[data-ticker-highlight="pronounced"] .ticker-up          { background: rgba(0, 200, 100, 0.45); }
[data-ticker-highlight="pronounced"] .ticker-up-strong   { background: rgba(0, 220, 80,  0.70); }
[data-ticker-highlight="pronounced"] .ticker-down        { background: rgba(220, 50, 50, 0.45); }
[data-ticker-highlight="pronounced"] .ticker-down-strong { background: rgba(240, 30, 30, 0.70); }

/* ── DIVIQ SCORE TABLE ── */
.q-held .ticker { color: var(--pos); }

.q-high { color: var(--pos); font-weight: 600; }
.q-mid  { color: var(--yellow); font-weight: 500; }
.q-low  { color: var(--neg); font-weight: 500; }

.diviq-green { color: var(--pos);    font-weight: 700; font-size: 13px; }
.diviq-amber { color: var(--yellow); font-weight: 700; font-size: 13px; }
.diviq-red   { color: var(--neg);    font-weight: 700; font-size: 13px; }

.main-table--diviq-consumer { table-layout: fixed; }
.main-table--diviq-consumer .col-ticker { width: 5.5rem; }
.main-table--diviq-consumer .col-diviq-score { width: 7rem; text-align: right; }
.main-table--diviq-consumer .col-company { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.main-table--diviq-consumer .company-name { max-width: none; width: 100%; }

/* ── EMPTY STATE ── */
/* engagement: holdings-group-by-empty-phase3 (FIX-1) — light-theme contrast
   hardening. `--text3` was borderline-readable on the light-theme empty-state;
   bump to `--text2` (medium-emphasis) and wrap the block in a subtle CARD so
   it reads as content, not as page background. Helps every render path that
   reaches the rich empty-state markup regardless of which root-cause
   hypothesis (H1-α/β/ζ/...) turns out to be correct. */
.empty-state {
  text-align: center !important;
  padding: 48px 20px !important;
  color: var(--text2);
  font-size: 13px;
  min-height: 200px;
}

.holdings-empty {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.holdings-empty__icon { font-size: 26px; line-height: 1; }
.holdings-empty__title { color: var(--text); font-weight: 700; font-size: 15px; }
.holdings-empty__copy { max-width: 420px; color: var(--text2); }

.btn-clear-sample {
  border-color: rgba(245,200,66,0.4);
  color: #d5a300;
}

.tri-cta-picker { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tri-cta-btn {
  justify-content: flex-start;
  gap: 8px;
}

/* ── FOOTER ── */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text4);
  animation: fadeSlideUp 0.5s 0.3s ease both;
}

.source-pills { display: flex; gap: 5px; flex-wrap: wrap; }

.source-pill {
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text3);
  text-decoration: none;
}

@media (hover: hover) {
  a.source-pill:hover {
    color: var(--text1);
    border-color: var(--text3);
  }
}

.build-stamp {
  font-size: 9px;
  color: var(--text3);
  opacity: 0.5;
  margin-top: 6px;
  font-family: monospace;
}

/* ── PAGE LOAD ANIMATIONS ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SCROLLBARS ── */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--surface4); border-radius: 3px; }
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover { background: var(--border2); }
}

/* ── FOCUS RINGS (accessibility) ── */
.btn:focus-visible,
.nav-link:focus-visible,
.search-input:focus-visible,
.filter-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (640–1023px)
   ═══════════════════════════════════════════ */
@media (max-width: 1023px) {
  main {
    padding: 12px 14px 32px;
    padding-inline-start: max(14px, env(safe-area-inset-left));
    padding-inline-end: max(14px, calc(env(safe-area-inset-right) + 2px));
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .logo-wordmark { font-size: 17px; }

  /* Hide less-critical columns on tablet */
  th.col-company, td.col-company,
  th.col-sector,  td.col-sector  { display: none; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET HEADER (640–1023px, Issue #207)
   Icon-only action toolbar, status badge hidden, chip hidden inside
   trigger, selector trigger tightened to 160px to give nav-priority
   enough room at 768px (AC6 ≥2 tabs + More). header-right is allowed
   to shrink in this band (was flex-shrink: 0 at ≥640).
   ═══════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 1023px) {
  header[role="banner"] {
    padding-block: 0;
    padding-inline-start: max(12px, env(safe-area-inset-left));
    padding-inline-end: max(12px, calc(env(safe-area-inset-right) + 2px));
  }
  .header-right { min-width: 0; flex-shrink: 1; gap: 6px; }
  .diq-pf-selector { min-width: 0; flex-shrink: 1; }
  .diq-pf-selector__trigger { max-width: 160px; min-width: 0; }
  .diq-pf-selector__name    { max-width: 100px; }
  .diq-pf-selector__trigger [data-mobile-hide] { display: none !important; }
  .update-status { display: none; }
  #refresh-btn  .btn-label,
  #download-btn .btn-label,
  #import-btn   .btn-label { display: none; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE (< 640px)
   ═══════════════════════════════════════════ */
@media (max-width: 639px) {
  :root { --header-h: 50px; }
  main {
    padding: var(--page-gutter-mobile) var(--page-gutter-mobile) 24px;
    padding-inline-start: max(var(--page-gutter-mobile), env(safe-area-inset-left));
    padding-inline-end: max(var(--page-gutter-mobile), calc(env(safe-area-inset-right) + 2px));
  }

  header[role="banner"] { min-width: 0; }

  .logo-icon { width: 30px; height: 30px; font-size: 14px; }
  .logo-wordmark { font-size: 16px; }

  /* Mobile-header fit (iOS Safari overflow-class fix companion).
     `flex-shrink: 0` on header-right + logo + nav-priority + their
     descendants stacks up wider than the viewport at 320px (logo +
     hamburger + portfolio-selector trigger + refresh + download + upload
     + identity avatar ≈ 350-400px). Even with `html, body { overflow-x:
     clip }` clipping, having content render OFF-screen is poor UX. So at
     the mobile breakpoint we let the right-side cluster shrink and
     ellipsize the portfolio-selector name. */
  .header-right        { gap: 5px; min-width: 0; flex-shrink: 1; }
  .diq-pf-selector     { min-width: 0; flex-shrink: 1; }
  .diq-pf-selector__trigger { max-width: 100%; min-width: 0; }
  .diq-pf-selector__name    { max-width: 100px; }
  .update-status { display: none; }

  /* Hide selector chip in trigger (still visible inside the bottom-sheet
     listbox rows — Issue #207 AC2). */
  .diq-pf-selector__trigger [data-mobile-hide] { display: none !important; }

  .btn { padding: 5px 10px; font-size: 11.5px; }
  /* Hide Refresh at <640px — surfaced in the mobile sheet "Actions" section
     instead (AC11, nav-mobile.js::rebuildSheetContents). Download/Import
     were RELOCATED into the portfolio-selector menu (see
     body[data-pf-menu-available] rule below — that gates both desktop AND
     mobile visibility for those two buttons). */
  #refresh-btn { display: none; }

  .btn-identity { width: 28px; height: 28px; }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-bottom: 10px;
  }

  .stat-card { padding: 10px 12px 9px; }
  .stat-value { font-size: 18px; }
  .stat-meta  { font-size: 10px; }

  .toolbar { gap: 6px; }
  .toolbar-left { gap: 6px; }
  .search-wrap  { max-width: 100%; min-width: 120px; }

  /* On mobile, hide some filters to save space */
  .filter-select.hide-mobile { display: none; }

  /* Mobile table: only key columns visible */
  table { font-size: 12px; }
  th, td { padding: 6px 8px; }
  th:first-child, td:first-child { padding-left: 10px; }

  .stat-value { font-size: 17px; }

  /* Tighter logo */
  .col-logo { width: 44px; }
  .logo-wrap { width: 30px; height: 30px; border-radius: 7px; }
  .logo-wrap img { width: 22px; height: 22px; }

  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 10px;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — XS PHONES (< 400px, Issue #207)
   Collapse logo to icon-only and tighten selector caps so the full
   action cluster (selector + ⚙ + avatar) fits with ≥36px margin at
   320px and ≥56px at 360px. Source-ordered AFTER the <640px block so
   max-width:399.98 overrides the <640 selector name cap.
   ═══════════════════════════════════════════ */
@media (max-width: 399.98px) {
  .logo-wordmark { display: none; }
  .diq-pf-selector__trigger { max-width: 120px; }
  .diq-pf-selector__name    { max-width: 80px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — LARGE DESKTOP (> 1400px)
   ═══════════════════════════════════════════ */
@media (min-width: 1400px) {
  main {
    padding: 18px 32px 48px;
    padding-inline-start: max(32px, env(safe-area-inset-left));
    padding-inline-end: max(32px, calc(env(safe-area-inset-right) + 2px));
  }
  .stats-grid { gap: 12px; }
  .stat-value { font-size: 23px; }
}

/* ═══════════════════════════════════════════
   SENSITIVITY VIEW (DDM Analysis)
   ═══════════════════════════════════════════ */
.sensitivity-view { padding: 0; }

.sens-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.sens-stock-select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 14px;
  min-width: 280px;
}

.sens-current-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
}

.sens-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sens-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sens-input-group label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sens-input-group input {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--font);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}

.sens-input-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Sensitivity grid table */
.sens-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.sens-grid {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.sens-grid th {
  background: var(--surface2);
  color: var(--text2);
  font-weight: 600;
  padding: 10px 14px;
  text-align: center;
  border: 1px solid var(--border);
  white-space: nowrap;
  font-size: 12px;
}

.sens-grid th.sens-corner {
  background: var(--surface);
  color: var(--text3);
  font-size: 10px;
}

.sens-grid td {
  padding: 10px 14px;
  text-align: center;
  border: 1px solid var(--border);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s;
}

.sens-grid .sens-row-header {
  background: var(--surface2);
  color: var(--text2);
  font-weight: 600;
  text-align: right;
  font-size: 12px;
}

/* Color coding */
.sens-undervalued {
  background: var(--pos-bg);
  color: var(--pos);
}

.sens-overvalued {
  background: var(--neg-bg);
  color: var(--neg);
}

.sens-na {
  color: var(--text3);
  font-style: italic;
}

.sens-base-case {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  font-weight: 700;
}

.sens-unreliable {
  opacity: 0.5;
  border-left: 2px dashed var(--text3);
}
.sens-unreliable-flag {
  font-size: 10px;
  vertical-align: super;
  cursor: help;
}

/* Legend */
.sens-legend {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text2);
}

.sens-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sens-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.sens-empty {
  padding: 40px;
  text-align: center;
  color: var(--text3);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   Newbie-Friendly UX — Info Tooltips & How It Works
   Reusable across all tabs. See copilot-instructions.md § Newbie-Friendly UX
   ═══════════════════════════════════════════════════════════════════ */

/* ── Info Tooltip (ⓘ) ── */
.diq-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-alt, var(--surface));
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  position: relative;
  vertical-align: middle;
  margin-left: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: background 0.15s;
  line-height: 1;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus per design §2.3.1. The :focus branch stays OUTSIDE the @media
   wrap so the tooltip "focused" affordance still applies on touch + key-
   board navigation. */
@media (hover: hover) {
  .diq-info:hover {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
  }
}
.diq-info:focus {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Balloon — handled by global #diq-tooltip, CSS pseudo-elements disabled */
.diq-info::after,
.diq-info::before { display: none; }

/* Global tooltip balloon (position: fixed, escapes overflow containers) */
.diq-tooltip {
  display: none;
  position: fixed;
  background: var(--card-bg, var(--surface));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 300px;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: opacity 0.15s;
}
.diq-tooltip.visible { opacity: 1; }

/* ── How It Works Expandable ── */
.diq-how-it-works {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  overflow: hidden;
}
.diq-how-it-works summary {
  padding: 12px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  list-style: none;
}
.diq-how-it-works summary::-webkit-details-marker { display: none; }
.diq-how-it-works summary::before {
  content: '\25B6';
  font-size: 9px;
  transition: transform 0.2s;
}
.diq-how-it-works[open] summary::before {
  transform: rotate(90deg);
}
.diq-how-it-works .diq-hiw-body {
  padding: 0 18px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text2);
}
.diq-how-it-works .diq-hiw-body p {
  margin: 0 0 10px;
}
.diq-how-it-works .diq-hiw-body strong {
  color: var(--text);
}
.diq-how-it-works .diq-hiw-body .diq-example {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin: 10px 0;
  font-size: 12px;
}
.diq-how-it-works .diq-hiw-body .diq-formula {
  font-family: 'Courier New', monospace;
  background: color-mix(in srgb, var(--surface) 80%, var(--accent));
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
  margin: 6px 0;
  font-size: 13px;
  color: var(--text);
}

/* ═══════════════════════════════════════════
   PORTFOLIO IMPORT
   ═══════════════════════════════════════════ */
.import-overlay .settings-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
}

.import-file-zone {
  padding: 1.5rem;
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  text-align: center;
  margin: 16px 0;
  transition: border-color 0.2s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .import-file-zone:hover {
    border-color: var(--accent);
  }
}
.import-file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  user-select: none;
  white-space: nowrap;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .import-file-label:hover {
    background: var(--surface3);
    color: var(--text);
    border-color: var(--border2);
    transform: translateY(-1px);
  }
}
.import-file-zone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.import-file-name {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text3);
}

.import-error {
  color: var(--neg);
  background: var(--neg-bg);
  border: 1px solid var(--neg);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin: 10px 0;
}

.import-warning {
  color: var(--yellow);
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin: 10px 0;
}

.import-sheet-note {
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  margin: 8px 0;
}

.import-mode-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 14px 0;
  font-size: 13px;
  color: var(--text);
}
.import-mode-label {
  color: var(--text2);
  font-weight: 500;
}
.import-radio-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.import-radio-label input[type="radio"] {
  accent-color: var(--accent);
}

.import-preview {
  max-height: 400px;
  overflow-y: auto;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.import-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.import-table th {
  background: var(--surface2);
  color: var(--text2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.import-th-check {
  width: 36px;
}
.import-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.import-table tr:last-child td {
  border-bottom: none;
}

.import-row-valid .import-status { color: var(--pos); }
.import-row-invalid .import-status { color: var(--neg); }
.import-row-invalid { opacity: 0.6; }
.import-row-duplicate .import-status { color: var(--yellow); }
.import-row-pending .import-status { color: var(--text3); }
.import-row-validating .import-status { color: var(--text2); }

.import-ticker {
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.02em;
}
.import-company {
  color: var(--text2);
  font-size: 12px;
}

.import-progress-wrap {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.import-progress {
  flex: 1;
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
}
.import-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 0%;
}
.import-progress-text {
  font-size: 12px;
  color: var(--text2);
  white-space: nowrap;
}

.import-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
  gap: 12px;
}

.import-confirm-panel {
  background: var(--neg-bg);
  border: 1px solid var(--neg);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 13px;
  color: var(--text);
}
.import-confirm-panel p {
  margin-bottom: 12px;
}
.import-confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.import-btn-destructive {
  background: var(--neg);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .import-btn-destructive:hover {
    opacity: 0.85;
  }
}

.import-success {
  text-align: center;
  padding: 40px 20px;
}
.import-success-icon {
  font-size: 48px;
  color: var(--pos);
  margin-bottom: 16px;
}
.import-success-text {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 20px;
}

/* Mobile responsive — sensitivity */
@media (max-width: 768px) {
  .sens-header {
    flex-direction: column;
    align-items: stretch;
  }
  .sens-stock-select { min-width: 100%; }
  .sens-inputs {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .sens-inputs {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════
   ADD TICKER MODAL
   ═══════════════════════════════════════════ */

/* Lookup row */
.atm-lookup-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.atm-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.atm-input::placeholder { color: var(--text4); }
.atm-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,141,239,0.12);
}

/* Number input — themed spinner */
.atm-input[type="number"] { max-width: 200px; }

/* Hide default browser spinner arrows */
.atm-input[type="number"]::-webkit-outer-spin-button,
.atm-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.atm-input[type="number"] { -moz-appearance: textfield; }

/* ── TICKER SEARCH (typeahead dropdown) ── */
.tks-listbox {
  position: relative;
  list-style: none;
  margin: 4px 0 0 0;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 320px;
  overflow-y: auto;
  z-index: 10;
}
.tks-listbox[hidden] { display: none; }

.tks-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   the state-class (.tks-option--active) and state-attribute
   ([aria-selected="true"]) members per design §2.3.1 (canonical
   R2-HIGH-01 evidence). The state branches stay OUTSIDE the @media wrap
   so the "this typeahead option is currently selected" affordance still
   fires on touch — without this split, the active/selected option would
   be visually indistinguishable from inactive options on iPhone Safari,
   operationally indistinguishable from "the listbox is broken." */
@media (hover: hover) {
  .tks-option:hover {
    background: var(--surface2);
    border-left-color: var(--accent);
    color: var(--text);
  }
}
.tks-option--active,
.tks-option[aria-selected="true"] {
  background: var(--surface2);
  border-left-color: var(--accent);
  color: var(--text);
}
.tks-option[aria-disabled="true"] {
  cursor: default;
  color: var(--text3);
  background: transparent;
  border-left-color: transparent;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .tks-option[aria-disabled="true"]:hover {
    background: transparent;
  }
}

.tks-ticker {
  font-weight: 700;
  color: var(--text);
  font-family: var(--font);
  min-width: 56px;
}
.tks-company {
  flex: 1;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tks-exchange {
  font-size: 11px;
  color: var(--text3);
  background: var(--surface3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.tks-empty,
.tks-error {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text3);
  font-style: italic;
}
.tks-error {
  color: var(--neg);
  font-style: normal;
}

/* Status region uses the existing .sr-only utility (defined later in
   this file) to be visually hidden but discoverable to screen readers. */

/* Mobile: dropdown takes the modal body width on narrow viewports. */
@media (max-width: 480px) {
  .tks-listbox {
    max-height: 240px;
  }
  .tks-company {
    font-size: 12px;
  }
}

/* Error message */
.atm-error {
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--neg-bg);
  color: var(--neg);
  border: 1px solid rgba(245,90,106,0.25);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

/* "Did you mean..." fallback inside .atm-error (FR-4 / UC-8) */
.atm-error-msg {
  /* baseline message — no extra rules; inherits from .atm-error */
}

.atm-suggest-label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  text-transform: none;
}

.atm-suggest-list {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.atm-suggest-list li {
  margin: 0;
  padding: 0;
}

.atm-suggest-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus per design §2.3.1. The :focus branch stays OUTSIDE the @media
   wrap so keyboard-focus styling still applies on touch + external-key-
   board devices. Note: a separate .atm-suggest-row:focus-visible rule
   already exists below (standalone, NOT mixed) and is left untouched. */
@media (hover: hover) {
  .atm-suggest-row:hover {
    background: var(--surface3);
    border-color: var(--accent);
    outline: none;
  }
}
.atm-suggest-row:focus {
  background: var(--surface3);
  border-color: var(--accent);
  outline: none;
}

.atm-suggest-row:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.atm-suggest-ticker {
  font-weight: 700;
  color: var(--text);
}

.atm-suggest-company {
  flex: 1;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atm-suggest-exchange {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Validation result */
.atm-result {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--pos-bg);
  border: 1px solid rgba(34,211,160,0.25);
  border-radius: 10px;
}

.atm-valid-icon {
  font-size: 22px;
  color: var(--pos);
  font-weight: 700;
  flex-shrink: 0;
}

.atm-valid-info { flex: 1; }

.atm-valid-company {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.atm-valid-detail {
  font-size: 13px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Radio group */
.atm-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.atm-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .atm-radio-label:hover {
    border-color: var(--border2);
    background: var(--surface2);
  }
}

.atm-radio-label input[type="radio"] {
  accent-color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   GROWTH MIGRATION — Stepper, Upload, Config, Results
   ═══════════════════════════════════════════════════ */

.migration-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

/* ── Stepper ── */
.mig-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.mig-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 0.5rem 1rem;
  transition: color 0.2s;
  font-family: var(--font);
  font-size: 0.85rem;
}
.mig-step-indicator:disabled { cursor: default; opacity: 0.5; }
.mig-step-indicator.active { color: var(--accent); }
.mig-step-indicator.done   { color: var(--pos); }

.mig-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  border: 2px solid var(--border2);
  transition: all 0.2s;
}
.mig-step-indicator.active .mig-step-num {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}
.mig-step-indicator.done .mig-step-num {
  border-color: var(--pos);
  background: var(--pos);
  color: var(--bg);
}
.mig-step-label { white-space: nowrap; }

.mig-step-connector {
  width: 40px; height: 2px;
  background: var(--border2);
  flex-shrink: 0;
  margin: 0 0.25rem;
  align-self: center;
  margin-bottom: 1.2rem;
}
.mig-step-connector.done { background: var(--pos); }

/* ── Upload Area ── */
.mig-upload-area { text-align: center; padding: 2rem 0; }
.mig-upload-area h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--text); }
.mig-subtitle { color: var(--text2); margin-bottom: 1rem; font-size: 0.95rem; }

.mig-dropzone {
  border: 2px dashed var(--border2);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--surface);
  max-width: 500px;
  margin: 0 auto;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus-visible and state-class (.mig-dragover) per design §2.3.1
   (canonical 3-rule worked example). The :focus-visible branch stays
   OUTSIDE so keyboard focus styling fires on touch+keyboard; the
   state-class branch stays OUTSIDE so drag-active visual feedback
   fires on iPhone Safari drag-drop of a CSV file. */
@media (hover: hover) {
  .mig-dropzone:hover {
    border-color: var(--accent);
    background: var(--surface2);
    box-shadow: 0 0 20px var(--accent-glow);
  }
}
.mig-dropzone:focus-visible,
.mig-dropzone.mig-dragover {
  border-color: var(--accent);
  background: var(--surface2);
  box-shadow: 0 0 20px var(--accent-glow);
}
.mig-dropzone-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.mig-dropzone-text { color: var(--text2); }
.mig-browse-link { color: var(--accent); text-decoration: underline; cursor: pointer; }

.mig-error {
  background: var(--neg-bg);
  color: var(--neg);
  border: 1px solid rgba(245,90,106,0.3);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.mig-loading { color: var(--text2); padding: 1rem; text-align: center; }

/* ── Tables ── */
.mig-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.mig-table th {
  background: var(--surface2);
  color: var(--text2);
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border2);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mig-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .mig-table tbody tr:hover { background: var(--surface2); }
}
.mig-total-row td {
  border-top: 2px solid var(--border2);
  font-weight: 600;
  background: var(--surface);
}
.mig-highlight-row { background: rgba(91,141,239,0.06) !important; }
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .mig-highlight-row:hover { background: rgba(91,141,239,0.12) !important; }
}

/* ── Navigation Buttons ── */
.mig-nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Mode Toggle ── */
.mig-mode-toggle,
.mig-alloc-toggle,
.mig-view-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}
.mig-mode-btn,
.mig-view-btn {
  padding: 0.6rem 1.25rem;
  background: var(--surface);
  color: var(--text2);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.9rem;
  transition: all 0.2s;
  white-space: nowrap;
}
.mig-mode-btn:not(:last-child),
.mig-view-btn:not(:last-child) {
  border-right: 1px solid var(--border2);
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .mig-mode-btn:hover,
  .mig-view-btn:hover { background: var(--surface2); color: var(--text); }
}
.mig-mode-btn.active,
.mig-view-btn.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

/* ── Config Cards ── */
.mig-config-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.mig-config-card h4 {
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

/* ── Slider ── */
.mig-slider-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mig-slider {
  flex: 1;
  accent-color: var(--accent);
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface3);
  border-radius: 3px;
  outline: none;
}
.mig-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
  box-shadow: 0 0 6px var(--accent-glow);
}
.mig-slider-value {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.mig-input-sm {
  width: 70px;
  padding: 0.4rem 0.5rem;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  text-align: center;
}
.mig-input-sm:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.mig-proceeds-preview {
  margin-top: 0.75rem;
  color: var(--text2);
  font-size: 0.95rem;
}
.mig-proceeds-preview strong { color: var(--accent); }

.mig-alloc-desc { font-size: 0.9rem; margin-top: 0.5rem; }

/* ── Custom Allocations ── */
.mig-custom-allocs { margin-top: 0.75rem; }
.mig-alloc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.mig-alloc-select {
  min-width: 100px;
  padding: 0.4rem 0.5rem;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
}
.mig-alloc-select:focus {
  outline: none;
  border-color: var(--accent);
}
.mig-alloc-remove {
  background: none;
  border: none;
  color: var(--neg);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .mig-alloc-remove:hover { opacity: 1; }
}
.mig-alloc-total {
  font-size: 0.85rem;
  margin-top: 0.25rem;
  color: var(--text2);
}
.mig-add-alloc { margin-top: 0.5rem; font-size: 0.85rem; }
.mig-warning-inline { color: var(--neg); font-size: 0.85rem; }

/* ── Tax Section ── */
.mig-tax-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-top: 1.25rem;
}
.mig-tax-section h4 { margin-bottom: 0.75rem; }
.mig-tax-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.mig-tax-note { color: var(--text3); font-size: 0.85rem; }
.mig-warning {
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  color: var(--yellow);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

/* ── Advanced Config ── */
.mig-advanced-grid { display: flex; flex-direction: column; gap: 1rem; }
.mig-adv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.mig-adv-header { margin-bottom: 0.5rem; }
.mig-adv-sell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.mig-adv-slider { max-width: 200px; }
.mig-adv-proceeds {
  color: var(--accent);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.mig-adv-allocs {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* ── Summary Cards ── */
.mig-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.mig-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.mig-summary-card.accent { border-color: rgba(91,141,239,0.3); }
.mig-summary-card.yellow { border-color: var(--yellow-border); }
.mig-summary-card.green  { border-color: rgba(34,211,160,0.3); }
.mig-summary-card.purple { border-color: rgba(167,139,250,0.3); }

.mig-sc-label {
  color: var(--text2);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}
.mig-sc-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-display);
}
.mig-summary-card.accent .mig-sc-value { color: var(--accent); }
.mig-summary-card.yellow .mig-sc-value { color: var(--yellow); }
.mig-summary-card.green .mig-sc-value  { color: var(--pos); }
.mig-summary-card.purple .mig-sc-value { color: var(--purple); }

.mig-sc-meta { color: var(--text2); font-size: 0.85rem; margin-top: 0.25rem; }

/* ── Post-Tax Controls ── */
.mig-posttax-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ── Results table specific ── */
.mig-results-table .pos-val { color: var(--pos); }
.mig-combined-table .pos-val { color: var(--pos); }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .migration-view { padding: 1rem 0.5rem; }

  .mig-stepper { gap: 0; justify-content: space-between; }
  .mig-step-indicator { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
  .mig-step-num { width: 26px; height: 26px; font-size: 0.8rem; }
  .mig-step-connector { width: 20px; margin-bottom: 1rem; }

  .mig-dropzone { padding: 2rem 1rem; }
  .mig-dropzone-icon { font-size: 2rem; }

  .mig-mode-toggle,
  .mig-alloc-toggle,
  .mig-view-toggle { width: 100%; }
  .mig-mode-btn,
  .mig-view-btn { flex: 1; padding: 0.5rem 0.5rem; font-size: 0.8rem; }

  .mig-slider-row { flex-wrap: wrap; }
  .mig-adv-sell { flex-wrap: wrap; }
  .mig-adv-slider { max-width: 100%; flex: 1; }

  .mig-summary-cards { grid-template-columns: repeat(2, 1fr); }
  .mig-sc-value { font-size: 1.1rem; }

  .mig-tax-row { flex-direction: column; align-items: flex-start; }

  .mig-nav-buttons { flex-direction: column; }
  .mig-nav-buttons .btn { width: 100%; text-align: center; }

  .mig-alloc-row { flex-wrap: wrap; }
  .mig-alloc-select { min-width: 80px; flex: 1; }

  .mig-table { font-size: 0.8rem; }
  .mig-table th, .mig-table td { padding: 0.4rem 0.5rem; }
}

@media (max-width: 480px) {
  .mig-summary-cards { grid-template-columns: 1fr; }
  .mig-step-label { display: none; }
}

/* Submit button */
.atm-submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  margin-top: 16px;
  justify-content: center;
}

/* Add Ticker button in toolbar */
.btn-add-ticker {
  font-size: 12.5px;
}

@media (max-width: 639px) {
  .btn-add-ticker .btn-label { display: none; }
}

/* ── Monte Carlo View ── */
.montecarlo-view { padding: 0 24px 24px; }

.mc-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.mc-mode-toggle {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.mc-mode-btn {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  transition: all 0.2s;
}

.mc-mode-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .mc-mode-btn:hover:not(.active) {
    border-color: var(--border2);
    background: var(--surface3);
  }
}

.mc-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mc-input-group label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
}

.mc-input-group input,
.mc-input-group select {
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
}

.mc-input-group input:focus,
.mc-input-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.mc-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.mc-ticker-select { grid-column: 1 / -1; }

.mc-target-group { }

.mc-run-btn { grid-column: 1 / -1; margin-top: 8px; }

.mc-cagr-hint {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
}

.mc-chart-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.mc-chart-container h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}

.mc-chart-container canvas {
  width: 100%;
  display: block;
}

.mc-chart-subtitle {
  font-size: 12px;
  color: var(--text3);
  margin: -10px 0 14px 0;
  font-style: italic;
}

.mc-drip-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.mc-drip-scroll canvas {
  display: block;
}

/* DRIP % widget */
.mc-drip-pct-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.mc-drip-pct-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
}
.mc-drip-pct-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mc-drip-pct-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .mc-drip-pct-btn:hover {
    border-color: var(--accent);
    color: var(--text);
  }
}
.mc-drip-pct-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.mc-drip-pct-custom {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  font-size: 12px;
  color: var(--text2);
}
.mc-drip-pct-input {
  width: 48px;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  text-align: center;
}
.mc-drip-pct-input:focus {
  border-color: var(--accent);
  outline: none;
}

.mc-drip-milestones {
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.mc-drip-milestones.mc-drag-active {
  cursor: grabbing;
}

.mc-drip-table {
  border-collapse: collapse;
  font-size: 13px;
  min-width: max-content;
}

.mc-drip-table th,
.mc-drip-table td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.mc-drip-table th {
  color: var(--text2);
  font-weight: 600;
  font-size: 12px;
}

.mc-drip-table td {
  color: var(--text);
}

.mc-drip-label, .mc-drip-label-col {
  text-align: left !important;
  font-weight: 600;
  color: var(--text2) !important;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  min-width: 100px;
}

.mc-drip-val-pos {
  color: var(--pos) !important;
}

.mc-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.mc-summary table {
  width: 100%;
  border-collapse: collapse;
}

.mc-summary th,
.mc-summary td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.mc-summary th { color: var(--text2); font-weight: 500; }
.mc-summary td { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/*
 * Narrow viewports (<=480px): stack label-above-value so long currency values
 * like "$522,156.78" render fully without clipping against the page edge.
 * The label/value pair becomes a two-line block per row; the row separator
 * (border-bottom) is moved off the th onto the td to avoid an internal hairline
 * between the label and its own value.
 */
@media (max-width: 480px) {
  .mc-summary table,
  .mc-summary tbody,
  .mc-summary tr {
    display: block;
    width: 100%;
  }
  .mc-summary th,
  .mc-summary td {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border-bottom: none;
    text-align: left;
  }
  .mc-summary th {
    padding-top: 12px;
    padding-bottom: 2px;
    font-size: 11px;
  }
  .mc-summary td {
    padding-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    word-break: break-word;
  }
  .mc-summary tr:last-child td { border-bottom: none; }
}

.mc-progress {
  grid-column: 1 / -1;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  height: 24px;
  overflow: hidden;
  position: relative;
}

.mc-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-sm);
  transition: width 0.3s;
  width: 0%;
}

.mc-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
}

.mc-warning {
  padding: 12px 16px;
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  border-radius: var(--radius-sm);
  color: var(--yellow);
  font-size: 12px;
  grid-column: 1 / -1;
}

.mc-error {
  padding: 12px 16px;
  background: var(--neg-bg);
  border: 1px solid var(--neg);
  border-radius: var(--radius-sm);
  color: var(--neg);
  font-size: 12px;
  grid-column: 1 / -1;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Monte Carlo — Responsive */
@media (max-width: 768px) {
  .montecarlo-view { padding: 0 12px 12px; }
  .mc-controls {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

/* ── Macro Lens ── */
.macrolens-view { padding: 0 24px 24px; }
.macrolens-wrap { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.macrolens-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--card-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 8px;
}
.macrolens-label { font-size: 0.875rem; color: var(--text2); }
.macrolens-select {
  background: var(--input-bg, rgba(0,0,0,0.3));
  color: var(--text, #eaeaea);
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.9rem;
  min-width: 240px;
}
.macrolens-hint { font-size: 0.8rem; color: var(--yellow); }
.macrolens-viewer {
  width: 100%;
  height: calc(100vh - 320px);
  min-height: 480px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.macrolens-viewer embed,
.macrolens-viewer .macrolens-iframe { width: 100%; height: 100%; border: 0; }
.macrolens-skeleton, .macrolens-empty {
  padding: 32px;
  text-align: center;
  color: var(--text2);
  background: var(--card-bg, rgba(255,255,255,0.02));
  border: 1px dashed var(--border-color, rgba(255,255,255,0.10));
  border-radius: 8px;
}
.macrolens-empty p { margin: 6px 0; }
.macrolens-mobile { padding: 24px; text-align: center; }
.macrolens-open-link {
  display: inline-block; padding: 12px 20px;
  background: var(--accent, #c87a3a); color: #fff;
  border-radius: 6px; text-decoration: none; font-weight: 600;
}
.macrolens-mobile-note { margin-top: 12px; color: var(--text2); font-size: 0.85rem; }
@media (max-width: 768px) {
  .macrolens-view { padding: 0 12px 12px; }
  .macrolens-viewer { height: 60vh; min-height: 360px; }
}

/* Macro Lens owner token row in settings */
.ml-owner-row {
  display: flex; flex-direction: column; gap: 10px;
}
.ml-owner-info { display: flex; flex-direction: column; gap: 2px; }
.ml-owner-name { font-weight: 600; }
.ml-owner-desc { font-size: 0.85rem; color: var(--text2); }
.ml-owner-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-owner-input {
  flex: 1 1 220px;
  background: var(--input-bg, rgba(0,0,0,0.3));
  color: var(--text, #eaeaea);
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   Income Replacement Plan (tab: income)
   Token-only colors. Mobile-first. Theme-safe.
   ═══════════════════════════════════════════════════════════════════ */
.ir-page { padding: 16px 18px 32px; max-width: 1200px; margin: 0 auto; }
.ir-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.ir-subtitle { color: var(--text2); font-size: 13px; margin-bottom: 18px; }

.ir-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ir-control-group { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 200px; }
.ir-control-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text3);
  display: inline-flex; align-items: center; gap: 4px;
}

/* Segmented control: tooltips placed as siblings of buttons via .ir-control-label,
   never as children of buttons. Prevents nested-interactive a11y bugs. */
.ir-segmented {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
  flex-wrap: wrap;
}
.ir-seg {
  background: transparent;
  border: 0;
  color: var(--text2);
  padding: 7px 14px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .ir-seg:hover { color: var(--text); }
}
.ir-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ir-seg.active {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text);
}
.ir-segmented-sm .ir-seg { padding: 5px 10px; font-size: 11px; }

.ir-forms { margin-bottom: 18px; }
.ir-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.ir-form[hidden] { display: none; }
.ir-field { display: flex; flex-direction: column; gap: 6px; }
.ir-field-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text3);
  display: inline-flex; align-items: center; gap: 4px;
}
.ir-field input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
}
.ir-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.ir-result-card,
.ir-empty-card {
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.ir-result-mode-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  margin-bottom: 4px;
}
.ir-result-headline {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.ir-result-detail { color: var(--text); font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.ir-result-meta {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 12px; color: var(--text2);
}
.ir-result-meta strong { color: var(--text); }
.ir-result-subtitle {
  flex-basis: 100%;
  color: var(--text2);
}
.ir-attribution-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px;
}
.ir-attribution-table th,
.ir-attribution-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 6px;
  text-align: left;
}
.ir-attribution-table th {
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.ir-empty-card h3 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.ir-empty-card p { color: var(--text2); font-size: 13px; margin-bottom: 14px; }

.ir-chart-wrap {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 18px;
}
.ir-chart-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.ir-chart-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text3);
  display: inline-flex; align-items: center; gap: 4px;
}
.ir-chart-title #ir-chart-horizon { color: var(--accent); font-weight: 700; }
.ir-chart-subtitle {
  font-size: 12px;
  color: var(--text2);
  margin: -4px 0 12px 0;
}
.ir-chart {
  width: 100%;
  min-height: 260px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#ir-chart { position: relative; }
.ir-chart * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.ir-chart svg { display: block; width: 100%; height: 280px; }
.ir-chart-hover { cursor: crosshair; }
.ir-chart-tooltip {
  position: absolute;
  pointer-events: none;
  inset: 0 auto auto 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font);
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  z-index: 5;
  display: none;
}
.ir-chart-tooltip.visible { display: block; }
.ir-chart-tooltip-year {
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.ir-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1.5;
}
.ir-chart-tooltip-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.ir-chart-tooltip-label { color: var(--text3); }
.ir-chart-tooltip-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ════════════════════════════════════════════════════════════════════
 * MULTI-PORTFOLIO SELECTOR + ACCOUNT CRUD (Chunk B, Issue #140)
 * Design: docs/design/multi-portfolio-chunk-b.md §6 + §7.
 * Tokens-only — no hardcoded hex per .github/copilot-instructions.md.
 * ════════════════════════════════════════════════════════════════════ */

/* Visually-hidden helper used by the announcement region (§6.2). */
.diq-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Account-type chip palette (§6.5) ──
   Seven mutually distinct chip variants in muted tones consistent with the
   existing palette. Background opacity at 12 %, border at 22 %, text at the
   accent color itself — guarantees WCAG AA contrast in light + dark themes
   (the variant colors are saturated mid-tones, text is on a 12 %-tint of
   that mid-tone). Manual checklist row §13.4 enforces ISSUE-305. */
.diq-pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--surface3);
  color: var(--text);
  white-space: nowrap;
}
.diq-pf-chip--taxable   { color: var(--accent);  background: var(--accent-glow); border-color: var(--accent); }
.diq-pf-chip--ira       { color: var(--text2);   background: var(--surface3);    border-color: var(--border2); }
.diq-pf-chip--roth      { color: var(--accent2); background: rgba(124,111,255,0.16); border-color: var(--accent2); }
.diq-pf-chip--401k      { color: var(--yellow);  background: var(--yellow-bg);   border-color: var(--yellow-border); }
.diq-pf-chip--hsa       { color: var(--pos);     background: var(--pos-bg);      border-color: rgba(var(--pos-rgb),0.30); }
.diq-pf-chip--brokerage { color: var(--purple);  background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.30); }
.diq-pf-chip--other     { color: var(--text2);   background: var(--surface3);    border-color: var(--border2); }

/* Mirror the .diq-pf-selector[hidden] pattern (frontend/css/app.css:3821)
   onto the chip so chipEl.hidden = true in portfolio-selector.js
   renderTriggerLabel() actually hides the chip. Without this rule,
   .diq-pf-chip { display: inline-flex } at (0,1,0) specificity beats
   the UA-default [hidden]{display:none} at (0,0,1), and the chip leaks
   into the selector trigger when scope is "all".
   (engagement: grouped-by-portfolio-bug Change 2.) */
.diq-pf-chip[hidden] { display: none; }

/* ── Top-bar selector trigger ── */
.diq-pf-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.diq-pf-selector[hidden] { display: none; }

.diq-pf-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  max-width: 220px;
}
/* iOS Safari fix (portfolio-selector-ios-defensive-fix): :hover is wrapped in
   @media (hover: hover) so it never applies on touch-only devices.
   On iOS Safari, a tap can leave a sticky :hover background on the
   tapped element AND can also cause the next click event to be
   silently dropped (hover-vs-click ambiguity for hovered elements).
   Pointer-capable input devices (mouse, trackpad) still get the
   hover affordance. Same defense pattern as PR #277 (nav-mobile). */
@media (hover: hover) {
  .diq-pf-selector__trigger:hover { background: var(--surface2); }
}
.diq-pf-selector__trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.diq-pf-selector__trigger[data-single-portfolio="true"] {
  opacity: 0.55;
  cursor: pointer;
}
.diq-pf-selector__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.diq-pf-selector__chev { flex-shrink: 0; }

/* ── Menu (desktop / wide) ── */
.diq-pf-selector__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 80;
}
.diq-pf-selector__menu[hidden] { display: none; }
.diq-pf-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
}
/* iOS Safari fix (portfolio-selector-ios-defensive-fix) — see note on
   .diq-pf-selector__trigger:hover above. */
@media (hover: hover) {
  .diq-pf-menu__item:hover { background: var(--surface3); }
}
.diq-pf-menu__item:focus-visible,
.diq-pf-menu__item.is-active {
  background: var(--surface3);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.diq-pf-menu__item[aria-selected="true"] { background: var(--accent-glow); }
.diq-pf-menu__check { width: 14px; color: var(--accent); visibility: hidden; }
.diq-pf-menu__item[aria-selected="true"] .diq-pf-menu__check { visibility: visible; }
.diq-pf-menu__label { flex: 1; }
.diq-pf-menu__sep {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
  list-style: none;
}
.diq-pf-menu__item--action { color: var(--accent); }
/* Long Export labels (e.g., "Download <very-long-portfolio-name>.xlsx") must
   not wrap the action row — the menu width is constrained, so clip with an
   ellipsis. Scoped to action rows so live-portfolio rows keep their existing
   layout (they already use the chip + check + label flex layout). ISSUE-002. */
.diq-pf-menu__item--action .diq-pf-menu__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* At-cap state: the row IS clickable (it opens the upgrade-or-delete
   modal), so `cursor: pointer` is the truthful affordance. Earlier this
   used `aria-disabled="true"` + `cursor: not-allowed`, but that signalled
   "this does nothing" while the click was actually actionable — same
   anti-pattern we previously fixed on the dashboard portfolio selector
   trigger. The label still flags the cap via "(N of N — Upgrade)". */
.diq-pf-menu__item--action[data-at-cap="true"] {
  color: var(--text2);
  cursor: pointer;
}
/* iOS Safari fix (portfolio-selector-ios-defensive-fix) — see note on
   .diq-pf-selector__trigger:hover above. */
@media (hover: hover) {
  .diq-pf-menu__item--action[data-at-cap="true"]:hover {
    background: var(--surface3);
    color: var(--text);
  }
}
.diq-pf-menu__cap-hint { font-size: 0.75rem; color: var(--text2); }

/* Hide the page-header Download/Import buttons whenever the portfolio
   selector menu offers them (≥2 portfolios). Toggled from
   portfolio-selector.js::visibilityRender; the attribute is NEVER set on
   pages that don't render the selector at all (root === null), so this
   rule only fires on those pages where the menu IS the canonical
   placement. Refresh stays in the header — it isn't relocated. */
body[data-pf-menu-available] #download-btn,
body[data-pf-menu-available] #import-btn {
  display: none;
}

/* ── Mobile bottom-sheet (§6.3) ── */
.diq-pf-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  max-height: 70vh;
  width: 100%;
  padding: 12px 12px 24px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
}
.diq-pf-sheet:not([open]) { display: none; }
.diq-pf-sheet::backdrop { background: rgba(0,0,0,0.45); }
.diq-pf-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 4px auto 12px;
  border-radius: 2px;
  background: var(--border3);
}
.diq-pf-sheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.diq-pf-sheet__list .diq-pf-menu__item { padding: 12px 10px; }
.diq-pf-sheet__backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 79;
}

/* CSS-only desktop/mobile swap (§6.3). */
@media (max-width: 640px) {
  .diq-pf-selector__menu { display: none !important; }
}
@media (min-width: 641px) {
  .diq-pf-sheet, .diq-pf-sheet__backdrop { display: none !important; }
}

/* Scope banner (§12.2 #4). */
.diq-scope-banner {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: var(--text2);
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  margin-left: 8px;
}
.diq-scope-banner[hidden] { display: none; }

/* Scope row — page-level portfolio scope indicator. */
.diq-scope-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-3);
  width: 100%;
  margin: 0 0 var(--space-4) 0;
  padding: 0;
  min-width: 0;
}

.diq-scope-row__tab {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
  font: 600 14px/1.2 var(--font-display);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diq-scope-row__sep {
  flex: 0 0 auto;
  color: var(--text3);
  font: 600 14px/1.2 var(--font-display);
  user-select: none;
}

.diq-scope-row .diq-pf-selector {
  display: block;
  position: relative;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

.diq-scope-row .diq-scope-banner {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font: 500 12px/1.3 var(--font);
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diq-scope-row .diq-scope-banner[hidden] { display: none; }

.diq-pf-selector__trigger--page {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 600 14px/1.2 var(--font-display);
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* iOS Safari fix (portfolio-selector-ios-defensive-fix) — see note on
   .diq-pf-selector__trigger:hover above. */
@media (hover: hover) {
  .diq-pf-selector__trigger--page:hover {
    background: var(--surface3);
    border-color: var(--border2);
  }
}

.diq-pf-selector__trigger--page:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.diq-pf-selector__trigger--page[aria-expanded="true"] {
  background: var(--surface3);
  border-color: var(--accent);
}

.diq-pf-selector__trigger--page .diq-pf-selector__name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diq-pf-selector__trigger--page .diq-pf-chip,
.diq-pf-selector__trigger--page .diq-pf-selector__chev {
  flex: 0 0 auto;
}

.diq-pf-selector__trigger--page .diq-pf-selector__chev {
  margin-left: var(--space-2);
}

.diq-pf-selector__trigger--page[data-pf-scope="all"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-glow);
}

/* Menu anchoring in the .diq-scope-row context.
 *
 * The base .diq-pf-selector__menu rules (line ~4235) anchor with
 * `right: 0` because the original site placed the trigger near the
 * right edge of the top bar. In the page-level scope-row, however,
 * the trigger sits on the LEFT side (after "<Tab> ·"), so `right: 0`
 * forces a 240px-min-width menu to extend leftward past the viewport
 * — the production bug captured by DesignTeam on 2026-05-30 ("portfolio
 * dropdown left edge outside the left browser boundary").
 *
 * Fix: in scope-row context, anchor LEFT and clamp width so the menu
 * can never exceed the viewport on either side. Regression covered by
 * playwright/portfolio-selector-menu-overflow.js across the 5-profile
 * DesignTeam matrix × every SPA tab. */
.diq-scope-row .diq-pf-selector__menu {
  left: 0;
  right: auto;
  max-width: calc(100vw - 16px);
}

@media (max-width: 767.98px) {
  .diq-scope-row {
    margin-top: var(--space-3);
  }
  /* Hide the static tab anchor + its separator on mobile —
     the .diq-scope-banner already shows "<tab> — <portfolio>",
     and on portrait the redundant label squeezes the picker
     name to a hard ellipsis. Desktop keeps both. */
  .diq-scope-row__tab,
  .diq-scope-row__sep {
    display: none;
  }
  .diq-pf-selector__trigger--page {
    min-height: 44px;
    width: auto;
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * account.html Portfolios section (§7)
 * ════════════════════════════════════════════════════════════════════ */
.diq-account__portfolios {
  margin: 24px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.diq-account__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.diq-account__section-head h2 { margin: 0; }
.diq-account__hint {
  font-size: 0.85rem;
  color: var(--text2);
  margin: 0;
}
.diq-account__hint a { color: var(--accent); text-decoration: underline; }
.diq-how-it-works {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-size: 0.85rem;
}
.diq-how-it-works summary { cursor: pointer; color: var(--text); font-weight: 600; }
.diq-how-it-works p { margin-top: 6px; }

.diq-pf-create-row {
  margin: 12px 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.diq-pf-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}
.diq-pf-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 6px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
}
.diq-pf-row[data-pf-grabbed="true"] {
  outline: 2px solid var(--accent);
  background: var(--accent-glow);
}
.diq-pf-row__drag {
  font-size: 1rem;
  color: var(--text2);
  background: transparent;
  border: 0;
  cursor: grab;
  padding: 4px;
  border-radius: 4px;
}
.diq-pf-row__drag:focus-visible { outline: 2px solid var(--accent); }
.diq-pf-row__name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.diq-pf-row__name > [data-pf-name] {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diq-pf-row__rename {
  font-size: 0.9rem;
  background: transparent;
  border: 0;
  color: var(--text2);
  cursor: pointer;
  padding: 4px;
}
/* iOS Safari fix (portfolio-selector-ios-defensive-fix) — see note on
   .diq-pf-selector__trigger:hover above. */
@media (hover: hover) {
  .diq-pf-row__rename:hover { color: var(--accent); }
}
.diq-pf-rename-input {
  font: inherit;
  padding: 4px 6px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 4px;
  max-width: 180px;
}
.diq-pf-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.diq-pf-row__count {
  font-size: 0.8rem;
  color: var(--text3);
}
.diq-pf-row__actions { display: flex; gap: 6px; }
.diq-pf-row__conflict {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 0.8rem;
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  border-radius: 4px;
  color: var(--text);
}
.diq-pf-row__conflict button {
  margin-left: 6px;
  font-size: 0.8rem;
  background: transparent;
  color: var(--accent);
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Account-type chip picker popover (§7.4) */
.diq-pf-acct-picker__popover {
  position: absolute;
  z-index: 90;
  min-width: 240px;
  padding: 4px;
  list-style: none;
  margin: 0;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.diq-pf-acct-picker__popover li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
/* iOS Safari fix (portfolio-selector-ios-defensive-fix) — see note on
   .diq-pf-selector__trigger:hover above. The is-active variant stays
   outside the @media wrapper so JS-driven "is active" highlighting
   still works on touch devices; only the bare :hover branch is
   touch-gated. */
@media (hover: hover) {
  .diq-pf-acct-picker__popover li:hover { background: var(--surface3); }
}
.diq-pf-acct-picker__popover li.is-active { background: var(--surface3); }
.diq-pf-acct-picker__desc { font-size: 0.75rem; color: var(--text2); }
.diq-pf-chip--picker { cursor: pointer; }

.diq-pf-trash {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.diq-pf-trash summary { cursor: pointer; font-weight: 600; }
.diq-pf-trash__count { color: var(--text3); font-weight: 400; margin-left: 6px; }
.diq-pf-row--trash { opacity: 0.85; grid-template-columns: 1fr auto auto; }


.ir-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 10px;
  font-size: 12px;
}
.ir-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface2) 50%, transparent);
  color: var(--text2);
  opacity: 0.65;
}
.ir-legend-item.active { opacity: 1; color: var(--text); border: 1px solid var(--border2); }
.ir-legend-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.ir-legend-meta { color: var(--text2); }
.ir-legend-meta strong { color: var(--text); }
.ir-legend-na { color: var(--text3); font-style: italic; }

@media (max-width: 600px) {
  .ir-result-headline { font-size: 28px; }
  .ir-page { padding: 12px 12px 24px; }
  .ir-segmented { width: 100%; }
  .ir-seg { flex: 1; }
}

/* ── Ticker Highlight settings swatch (preview chip pair) ── */
.hl-swatch {
  width: 48px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.hl-swatch > span { flex: 1 1 50%; display: block; }
.hl-swatch[data-hl="soft"] > .hl-up   { background: rgba(0, 220, 80,  0.18); }
.hl-swatch[data-hl="soft"] > .hl-down { background: rgba(240, 30, 30, 0.18); }
.hl-swatch[data-hl="pronounced"] > .hl-up   { background: rgba(0, 220, 80,  0.70); }
.hl-swatch[data-hl="pronounced"] > .hl-down { background: rgba(240, 30, 30, 0.70); }
[data-theme="light"] .hl-swatch { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10); }


/* ═══════════════════════════════════════════
   PR-D: Remove Ticker UX
   - Selected-row state (RowSelect-owned)
   - Toolbar Remove button
   - Confirm dialog (shared singleton)
   See docs/design/remove-ticker-ux.md § HTML / CSS Additions.
   ═══════════════════════════════════════════ */

/* Selected-row state. Applied to <td> not <tr> because <tr> box-shadow
   is unreliable across engines (iOS Safari 14 drops it; border-collapse:
   collapse ignores <tr> background). The existing project pattern (e.g.
   .ticker-up-strong, .qty-editable, .col-actions) also targets <td>. */
tr.is-row-focusable { outline: none; }
tr.is-row-focusable:focus-visible td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-glow);
}
tr.is-selected td {
  background-color: var(--accent-glow);
  /* DO NOT use the `background:` shorthand here — it resets background-image
     to none AND the original background-color on sticky <td>s (col-ticker
     at app.css:1344-1353), causing the col-mktval cell to bleed through the
     now-transparent sticky cell during horizontal scroll. See
     docs/design/stock-actions-menu.md §1.2 + §5.7. */
}
/* Sticky col-ticker on a selected row: composite the accent-glow on top of
   the opaque surface base via background-image, so the underlying layer
   model (app.css:1394-1419) survives selection. Mirrors the established
   tbody tr.highlight td.col-ticker pattern at app.css:1394-1399. */
tr.is-selected td.col-ticker {
  background-color: var(--surface);
  background-image: linear-gradient(var(--accent-glow), var(--accent-glow));
}
tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
tr.is-selected:focus-visible td:first-child {
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--border3);
}

/* Toolbar Remove button. */
.btn-remove-ticker { font-size: 12.5px; }
.btn-remove-ticker[disabled],
.btn-remove-ticker[aria-disabled="true"] {
  color: var(--text3);
  cursor: not-allowed;
}
.btn-remove-ticker:not([disabled]) .diq-info-disabled-only { display: none; }
.btn-remove-ticker[disabled] .diq-info-disabled-only       { display: inline; }
@media (max-width: 639px) {
  .btn-remove-ticker .btn-label { display: none; }
}

/* PR-D follow-up #74: declare touch-action: manipulation on tap targets
   added by PR-D so iOS Safari (project baseline ≥14) skips the historical
   ~300ms double-tap-zoom delay heuristic. Belt-and-suspenders even on
   modern iOS where the page <meta viewport> already short-circuits it.
   Extended (portfolio-selector-ios-defensive-fix) to cover the
   portfolio-selector trigger, sheet, and menu items — the "multi-tap
   makes it work" symptom on iPhone Safari is the textbook 300ms
   double-tap-zoom-delay fingerprint. Mirror of PR #277 defenses for
   the same iOS Safari touch-eventing bug family. */
#main-table tbody tr[data-ticker],
#remove-ticker-btn,
.diq-pf-selector__trigger,
.diq-pf-sheet,
.diq-pf-menu__item {
  touch-action: manipulation;
}

/* Confirm dialog. */
.diq-cd-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 900;
  animation: diq-cd-fade 0.12s ease-out;
}
.diq-cd {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  z-index: 901;
  animation: diq-cd-pop 0.14s ease-out;
}
.diq-cd-title   { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.diq-cd-message { color: var(--text2); font-size: 13px; line-height: 1.45; margin-bottom: 10px; }
.diq-cd-error   { color: var(--neg); background: var(--neg-bg); border: 1px solid var(--neg-bg); padding: 6px 8px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 10px; }
.diq-cd-actions { display: flex; gap: 8px; justify-content: flex-end; }
.diq-cd-confirm {
  background: var(--neg);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.diq-cd-confirm[aria-busy="true"]::before {
  content: '';
  display: inline-block;
  width: 11px; height: 11px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}
.diq-cd-confirm:disabled,
.diq-cd-cancel:disabled { opacity: 0.6; cursor: not-allowed; }

/* Background interaction lock while dialog is open (iOS Safari 14 has
   no inert support). Lock covers BOTH <main> and <header role="banner">
   so the user cannot click a tab or other header chrome through the
   backdrop. pointer-events: none does NOT suppress aria-live
   announcements — the #update-status region inside <header> continues
   to announce normally (CSSWG pointer-events spec). The dialog and
   backdrop opt back in via the second rule. */
body.diq-cd-locks-bg main[role="main"],
body.diq-cd-locks-bg header[role="banner"] { pointer-events: none; }
body.diq-cd-locks-bg .diq-cd,
body.diq-cd-locks-bg .diq-cd-backdrop { pointer-events: auto; }

@keyframes diq-cd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes diq-cd-pop  { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }

@media (prefers-reduced-motion: reduce) {
  .diq-cd, .diq-cd-backdrop { animation: none; }
}

.diq-income-history-btn {
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — see top-of-file
   tap-latency utility comment for rationale. */
@media (hover: hover) {
  .diq-income-history-btn:hover { border-color: var(--accent); color: var(--accent); }
}

.ih-panel {
  margin-top: 18px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}
.ih-header h3 { margin: 0 0 6px; font-size: 20px; }
.ih-header p { margin: 0 0 10px; color: var(--text2); font-size: 13px; }
.ih-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.ih-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text2); }
.ih-filters input, .ih-filters select, .ih-filters button, .ih-form input, .ih-form select, .ih-form textarea, .ih-form button {
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  padding: 7px 8px;
}
.ih-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.ih-kpi { border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--surface2); padding: 8px; }
.ih-kpi span { display: block; font-size: 11px; color: var(--text2); margin-bottom: 3px; }
.ih-kpi strong { font-size: 16px; color: var(--text); }
.ih-retention { margin: 0 0 12px; font-size: 12px; color: var(--text2); }
.ih-grid-wrap { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 12px; }
.ig-card { border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 8px; background: var(--surface2); }
.ig-card h4 { margin: 0 0 8px; font-size: 13px; }
.ig-scroll { overflow-x: auto; }
.ig-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ig-table th, .ig-table td { border-bottom: 1px solid var(--border); padding: 5px 6px; text-align: left; }
.ig-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.ig-empty { color: var(--text2); font-size: 12px; margin: 0; }
.ih-ledger h4, .ih-mutate h4 { margin: 0 0 8px; font-size: 14px; }
.ih-scroll { overflow: auto; }
.ih-ledger table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ih-ledger th, .ih-ledger td { border-bottom: 1px solid var(--border); padding: 6px; text-align: left; }
.ih-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.ih-actions { white-space: nowrap; }
.ih-actions button { margin-left: 4px; border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--surface2); color: var(--text); padding: 3px 6px; }
.ih-empty { text-align: center; color: var(--text2); }
.ih-empty-body { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ih-optional { color: var(--text2); font-weight: normal; opacity: 0.7; font-size: 11px; }
.ih-filter-help { margin: 0 0 10px; font-size: 11px; color: var(--text2); font-style: italic; }
.ih-filters.ih-loading { opacity: 0.85; }
.ih-apply[disabled], .ih-apply.ih-loading {
  cursor: progress;
  opacity: 0.7;
}
.ih-loading-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--text2);
  padding: 0 8px;
}
.ih-retention-notice {
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--border2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text2);
  font-size: 12px;
  text-align: left;
  max-width: 520px;
}
.ih-mutate { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 12px; }
.ih-form { border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 10px; background: var(--surface2); display: grid; gap: 8px; }
.ih-help { margin: 0; font-size: 12px; color: var(--text2); }
.ih-message { margin: 10px 0 0; font-size: 12px; color: var(--accent); }
/* ── CSV import presets (#143 — broker auto-detection) ─────────────── */
/* All colors come from CSS custom properties so themes/styles take effect
   without overrides. BEM-ish naming. */

.import-preset-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.75rem 0 0.5rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--text);
}

.import-preset-badge strong {
  color: var(--accent);
}

.import-preset-badge .diq-info {
  margin-left: auto;
  cursor: help;
}

.import-preset-override {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.85rem;
  cursor: pointer;
}

/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus per design §2.3.1. */
@media (hover: hover) {
  .import-preset-override:hover {
    border-color: var(--accent);
  }
}
.import-preset-override:focus {
  border-color: var(--accent);
}

.import-preset-caveat,
.import-preset-info,
.import-preset-warning {
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.import-preset-caveat {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  color: var(--text);
}

.import-preset-info {
  background: var(--surface);
  border-left: 3px solid var(--border);
  color: var(--text2);
}

.import-preset-warning {
  background: var(--surface);
  border-left: 3px solid var(--neg);
  color: var(--text);
}

.import-tier-gate {
  padding: 1.25rem;
  margin: 1rem 0;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
}

.import-tier-gate h3 {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: 1.1rem;
}

.import-tier-gate p {
  margin: 0 0 1rem;
  color: var(--text);
  line-height: 1.5;
}

.import-tier-gate__ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.import-tier-gate__cta--upgrade,
.import-tier-gate__cta--manual {
  /* inherit .btn / .btn-primary / .btn-ghost from existing button styles */
  text-decoration: none;
}

/* ── Drift-resilience banners (#143 follow-up) ─────────────────────── */

/* Plain-English fallthrough banner above the generic mapping UI.
   Reason: detection found no candidates / low confidence / ambiguous /
   apply-mapping error / empty-after-mapping. */
.import-no-preset-banner {
  padding: 0.625rem 0.875rem;
  margin: 0.75rem 0 0.5rem;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.45;
}

/* Per-row mapping errors banner (preset detected, but N rows failed to map).
   Shows top-3 reason strings + a collapsible <details> with first 20 row
   indices. */
.import-preset-row-errors {
  padding: 0.625rem 0.875rem;
  margin: 0.5rem 0;
  background: var(--surface);
  border-left: 3px solid var(--neg);
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.45;
}

.import-preset-row-errors__summary {
  margin: 0 0 0.4rem;
}

.import-preset-row-errors__details {
  margin-top: 0.4rem;
}

.import-preset-row-errors__details summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
}

.import-preset-row-errors__details ul {
  margin: 0.4rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.825rem;
  color: var(--text2);
}

/* Skipped-row info banner (cash positions / footer totals / options /
   empty rows — by design, not errors). */
.import-preset-row-info {
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  background: var(--surface);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text2);
  line-height: 1.45;
}

/* Registry-load failure banner — one or more preset JSONs returned 404 or
   failed validation. Indicates a deployment issue, not user-facing format
   drift. */
.import-preset-registry-fail {
  padding: 0.625rem 0.875rem;
  margin: 0.75rem 0;
  background: var(--surface);
  border-left: 3px solid var(--neg);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.45;
}


/* ── Upcoming Income tab (Issue #183) ───────────────────────────── */
/* Uses the .ui-* namespace to avoid any collision with .ig-* or */
/* .ih-* classes from the existing income grids.                   */
.upcoming-income-view {
  padding: 12px 0;
  color: var(--text);
}
.upcoming-income-view .ui-header h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  color: var(--text);
}
.upcoming-income-view .ui-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 12px 0;
}
.upcoming-income-view .ui-hide-zero {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.upcoming-income-view .ui-export {
  background: var(--surface3);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus per design §2.3.1. */
@media (hover: hover) {
  .upcoming-income-view .ui-export:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}
.upcoming-income-view .ui-export:focus {
  border-color: var(--accent);
  color: var(--accent);
}
.upcoming-income-view .ui-cap-banner {
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  margin: 8px 0;
  color: var(--text);
}
.upcoming-income-view .ui-cap-fallback {
  border-left-color: var(--yellow);
}
.upcoming-income-view .ui-status {
  padding: 12px;
  color: var(--text2);
}
.upcoming-income-view .ui-error {
  color: var(--neg);
}
.upcoming-income-view .ui-empty {
  padding: 24px;
  text-align: center;
  color: var(--text2);
}
.upcoming-income-view .ui-table-scroll {
  overflow-x: auto;
  scrollbar-gutter: stable;
  border: 1px solid var(--border2);
  border-radius: 4px;
}
.upcoming-income-view .ui-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.upcoming-income-view .ui-table thead th {
  background: var(--surface3);
  color: var(--text);
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border2);
  font-weight: 600;
  white-space: nowrap;
}
.upcoming-income-view .ui-table thead th.ui-row-label,
.upcoming-income-view .ui-table tbody th.ui-row-label {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface3);
  z-index: 1;
  box-shadow: 4px 0 4px -4px rgba(0,0,0,0.2);
}
.upcoming-income-view .ui-table thead th.ui-row-total-header,
.upcoming-income-view .ui-table tbody td.ui-cell-row-total {
  position: sticky;
  right: 0;
  background: var(--surface3);
  z-index: 1;
  box-shadow: -4px 0 4px -4px rgba(0,0,0,0.2);
}
.upcoming-income-view .ui-table thead th.ui-row-total-header {
  background: var(--surface3);
  z-index: 2;
}
.upcoming-income-view .ui-table tbody td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border1);
  color: var(--text);
  white-space: nowrap;
}
.upcoming-income-view .ui-table tbody th {
  padding: 6px 10px;
  color: var(--text);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.upcoming-income-view .ui-table tbody th.ui-row-label[data-ticker] {
  cursor: pointer;
}
.upcoming-income-view .ui-cell-zero {
  color: var(--text2);
}
.upcoming-income-view .ui-cell-total {
  font-weight: 600;
  color: var(--accent);
}
.upcoming-income-view .ui-row.ui-other th,
.upcoming-income-view .ui-row.ui-other td {
  background: var(--surface3);
  font-style: italic;
}
.upcoming-income-view .ui-row.ui-sold th,
.upcoming-income-view .ui-row.ui-sold td {
  background: var(--surface3);
  border-top: 1px solid var(--border2);
}
.upcoming-income-view .ui-row.ui-totals th,
.upcoming-income-view .ui-row.ui-totals td {
  background: var(--surface2);
  font-weight: 700;
  border-top: 2px solid var(--accent);
}
.upcoming-income-view .ui-table .ui-row.ui-totals th.ui-row-label,
.upcoming-income-view .ui-table .ui-row.ui-totals td.ui-cell-row-total {
  background: var(--surface2);
}
.upcoming-income-view .ui-table .ui-row.ui-other th.ui-row-label,
.upcoming-income-view .ui-table .ui-row.ui-other td.ui-cell-row-total,
.upcoming-income-view .ui-table .ui-row.ui-sold th.ui-row-label,
.upcoming-income-view .ui-table .ui-row.ui-sold td.ui-cell-row-total {
  background: var(--surface3);
}
.upcoming-income-view .ui-special-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 3px;
  color: var(--accent2);
  background: rgba(124,111,255,0.16);
  border: 1px solid var(--accent2);
  cursor: help;
}
.upcoming-income-view .ui-special-chip:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}


/* ── PAYOUT HISTORY WHAT-IF ── */
.payout-history-view { width: 100%; }
.ih-row--whatif { background: var(--surface2); color: var(--text2); font-style: italic; }
.ih-badge--whatif { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--text); border: 1px solid var(--border2); }
.whatif-panel { margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.whatif-panel h3 { margin: 0 0 4px; color: var(--text); }
.whatif-panel p { margin: 0 0 12px; color: var(--text2); }
.whatif-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.whatif-form label { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--text2); }
.whatif-form input[type="date"] { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; }
.whatif-panel button[disabled] { opacity: 0.55; cursor: not-allowed; }
.whatif-status { margin-top: 8px; color: var(--text2); font-size: 13px; }


/* ════════════════════════════════════════════════════════════════════
 * STOCK ACTIONS — per-row trigger + bottom-sheet menu
 * Issue: stock-actions-menu
 * Design: docs/design/stock-actions-menu.md §6 (R1)
 * Tokens-only; no hardcoded hex (sole exceptions: rgba(0,0,0,.45/.55)
 * for backdrop dim — mirrors existing .diq-pf-sheet::backdrop and
 * .diq-cd-backdrop precedents at app.css and is the project convention
 * for modal dim layers).
 * ════════════════════════════════════════════════════════════════════ */

/* Trigger surface — the colored ticker cell on Holdings + Universe IS
 * the per-row Stock Actions trigger; no separate button element. See
 * docs/design/remove-ticker-row-dropdown.md §6.2. The cell-trigger
 * rules below replaced the prior .diq-row-actions-btn rule block (which
 * styled a child <button>). The .diq-row-actions-sheet* rules below
 * still style the shared bottom-sheet dialog. */

/* ── Ticker-cell trigger (per-row Stock Actions opener) ──
 * The colored ticker cell on Holdings + Universe IS the trigger; no
 * separate button element. Affordance via cursor + focus outline + hover
 * ring + aria-expanded ring + ::before hit-extender. Background-color
 * is reserved for the ticker-up / ticker-up-strong / ticker-down /
 * ticker-down-strong tint and the row-selection composite (selection
 * rules elsewhere in this file); do NOT modify background here.
 * Design: docs/design/remove-ticker-row-dropdown.md §6.2.
 * Tokens-only; no hardcoded hex. */
td.col-ticker[role="button"] {
  cursor: pointer;
  /* DO NOT declare `position: relative` here.
   * The base td.col-ticker rule already declares `position: sticky`.
   * `position: sticky` IS a positioning context for descendants and
   * pseudo-elements (CSS Position L3 § 6) — the ::before hit-extender
   * below will anchor against the sticky cell correctly. Redeclaring
   * `position: relative` would BREAK the sticky offset and regress the
   * selection composite. */
  /* touch-action: manipulation is already provided by the shared group
   * via the [role="button"] selector at the top of this file. Do not
   * duplicate. */
}

/* R-01 fix — 44×44 WCAG 2.5.5 AAA hit-extender ported from the deleted
 * .diq-row-actions-btn::before { inset: -8px } pattern onto the cell.
 * Vertical-only inset (-8px 0) extends the hit area 8px above + 8px
 * below the cell WITHOUT spilling horizontally into the adjacent
 * .col-company on horizontal scroll. Cell baseline ≈ 30px → with
 * extender ≈ 46px, passing the 44px AAA bar deterministically (asserted
 * statically by test-stock-actions-trigger-44px.js). */
td.col-ticker[role="button"]::before {
  content: '';
  position: absolute;
  inset: -8px 0;
  /* No background; this is a transparent hit-target extender only. */
}

@media (prefers-reduced-motion: no-preference) {
  td.col-ticker[role="button"] {
    transition: box-shadow 0.12s ease, outline-color 0.12s ease;
  }
}

/* Hover affordance — wrapped per PR #287 ios-hover-emulation-fix. */
@media (hover: hover) {
  td.col-ticker[role="button"]:hover {
    box-shadow: inset 0 0 0 1px var(--accent);
  }
}

td.col-ticker[role="button"]:focus-visible {
  /* outline-offset: -2px keeps the focus ring INSIDE the cell so it does
   * not clip against the table grid line (col-ticker is sticky and the
   * adjacent col-company starts immediately to its right). */
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

td.col-ticker[role="button"][aria-expanded="true"] {
  /* Sheet-open accent ring — thicker than hover so the two states are
   * visually distinct when both apply (e.g. desktop pointer-hover while
   * sheet is open). */
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* ── R-04 fix — composite box-shadow on combined selectors ──
 * box-shadow values DO NOT layer across cascading rules the way
 * (background-color + background-image) layer. The cascade-winner
 * REPLACES the loser. Without these combined-selector rules, the new
 * cell-trigger box-shadows above would clobber the row-selection accent
 * stripe (`tr.is-selected td:first-child { box-shadow: inset 3px 0 0
 * var(--accent) }`). These rules explicitly compose BOTH signals via
 * multi-value box-shadow so a user who selects a row AND opens its
 * sheet sees both the 3px left stripe AND the trigger ring.
 *
 * Specificity:
 *   tr.is-selected td.col-ticker[role="button"][aria-expanded="true"]
 *     = (0,4,2)  — wins over cell-only (0,3,1)
 *   tr.is-selected td.col-ticker[role="button"]:hover    = (0,4,2)
 *   tr.is-selected td.col-ticker[role="button"]:focus-visible = (0,4,2) */
tr.is-selected td.col-ticker[role="button"][aria-expanded="true"] {
  box-shadow: inset 3px 0 0 var(--accent),   /* selection stripe preserved */
              inset 0 0 0 2px var(--accent); /* sheet-open ring added */
}
@media (hover: hover) {
  tr.is-selected td.col-ticker[role="button"]:hover {
    box-shadow: inset 3px 0 0 var(--accent),
                inset 0 0 0 1px var(--accent);
  }
}
tr.is-selected td.col-ticker[role="button"]:focus-visible {
  /* outline paints the focus indicator separately from box-shadow;
   * preserve the selection stripe via box-shadow here. */
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Bottom-sheet — visual sibling of .diq-pf-sheet (app.css:3905-3937).
 * Single shared singleton dialog; opens for any row via JS API. */
.diq-row-actions-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  max-height: 70vh;
  width: 100%;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: var(--shadow);
  z-index: 80;
}
.diq-row-actions-sheet:not([open]) { display: none; }
.diq-row-actions-sheet::backdrop   { background: rgba(0, 0, 0, 0.45); }

.diq-row-actions-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 8px auto 12px;
  border-radius: 2px;
  background: var(--border3);
}

.diq-row-actions-sheet__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 16px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.diq-row-actions-sheet__ticker {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}
.diq-row-actions-sheet__sep   { color: var(--text3); }
.diq-row-actions-sheet__price {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.diq-row-actions-sheet__stale {
  font-size: 11px;
  color: var(--text3);
  background: var(--surface3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: 4px;
}

.diq-row-actions-sheet__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.diq-row-actions-sheet__list li { margin: 0; }
.diq-row-actions-sheet__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus-visible per design §2.3.1. The :focus-visible branch stays
   OUTSIDE the @media wrap so keyboard focus styling still applies on
   touch + external-keyboard devices. Note: the SECOND .__item:focus-
   visible rule below (box-shadow only) is left untouched as a stand-
   alone :focus-visible rule that cascades over this sibling rule by
   source order — same visual outcome as the original. */
@media (hover: hover) {
  .diq-row-actions-sheet__item:hover {
    background: var(--surface3);
    outline: none;
  }
}
.diq-row-actions-sheet__item:focus-visible {
  background: var(--surface3);
  outline: none;
}
.diq-row-actions-sheet__item:focus-visible {
  box-shadow: inset 3px 0 0 var(--accent);
}
.diq-row-actions-sheet__item--danger { color: var(--neg); }
/* iOS Safari fix (ios-hover-emulation-fix #286) — :hover SPLIT from
   :focus-visible per design §2.3.1. */
@media (hover: hover) {
  .diq-row-actions-sheet__item--danger:hover {
    background: var(--neg-bg);
  }
}
.diq-row-actions-sheet__item--danger:focus-visible {
  background: var(--neg-bg);
}
.diq-row-actions-sheet__item-glyph {
  flex: 0 0 24px;
  font-size: 16px;
  line-height: 1;
  color: var(--text3);
}
.diq-row-actions-sheet__item--danger .diq-row-actions-sheet__item-glyph { color: var(--neg); }

/* Per-item sample-data disablement (R1 I-002). Applied to Edit + Remove
 * menuitems only when STOCK_UNIVERSE entry has source === 'sample'. */
.diq-row-actions-sheet__item[aria-disabled="true"],
.diq-row-actions-sheet__item[disabled],
.diq-row-actions-sheet__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--text3);
}
.diq-row-actions-sheet__item--danger[aria-disabled="true"],
.diq-row-actions-sheet__item--danger[disabled],
.diq-row-actions-sheet__item--danger.diq-row-actions-sheet__item--disabled {
  color: color-mix(in srgb, var(--neg) 60%, var(--text3));
}
/* iOS Safari fix (ios-hover-emulation-fix #286) — 6-selector mixed-rule
   SPLIT per design §2.3.1 row 12. The 3 :hover selectors (state-attr +
   state-class disabled variants) go INSIDE the @media wrap as one comma-
   list; the 3 :focus-visible selectors stay OUTSIDE as a sibling comma-
   list so the "disabled, but I focused you" affordance still applies on
   touch + external-keyboard devices. */
@media (hover: hover) {
  .diq-row-actions-sheet__item[aria-disabled="true"]:hover,
  .diq-row-actions-sheet__item[disabled]:hover,
  .diq-row-actions-sheet__item--disabled:hover {
    background: transparent;
    outline: none;
    box-shadow: none;
  }
}
.diq-row-actions-sheet__item[aria-disabled="true"]:focus-visible,
.diq-row-actions-sheet__item[disabled]:focus-visible,
.diq-row-actions-sheet__item--disabled:focus-visible {
  background: transparent;
  outline: none;
  box-shadow: none;
}

/* iOS Safari 14 fallback backdrop (matches .diq-pf-sheet__backdrop pattern). */
.diq-row-actions-sheet__backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 79;
}

@media (prefers-reduced-motion: reduce) {
  .diq-row-actions-sheet { animation: none; transition: none; }
}

/* ── Edit Quantity mini-dialog — visual sibling of .diq-cd ── */
.diq-eqd-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 900;
  animation: diq-cd-fade 0.12s ease-out;
}
.diq-eqd {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  z-index: 901;
  animation: diq-cd-pop 0.14s ease-out;
}
.diq-eqd-title  { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.diq-eqd-help   { color: var(--text2); font-size: 13px; line-height: 1.45; margin: 0 0 12px; }
.diq-eqd-field  { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.diq-eqd-label  { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); }
.diq-eqd-input  {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
}
.diq-eqd-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.diq-eqd-error {
  color: var(--neg);
  background: var(--neg-bg);
  border: 1px solid var(--neg);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 10px;
}
.diq-eqd-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Background-interaction lock — same pattern as .diq-cd at app.css:4405-4408. */
body.diq-eqd-locks-bg main[role="main"],
body.diq-eqd-locks-bg header[role="banner"] { pointer-events: none; }
body.diq-eqd-locks-bg .diq-eqd,
body.diq-eqd-locks-bg .diq-eqd-backdrop    { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .diq-eqd, .diq-eqd-backdrop { animation: none; transition: none; }
}

/* ── iOS Safari debug tracer (ios-touch-event-tracer) ───────────────
   The DiqIosTrace module mounts a single floating button to <body>
   ONLY when the URL flag is set (?debug=ios or #debug=ios) — without
   the flag this selector matches nothing and contributes no layout.
   Tokenized to var(--yellow / --bg / --text) so the theme-matrix lint
   (tests/frontend/test-stock-actions-theme-matrix.js) stays green and
   so the button still respects user theme switching during a debug
   session. The yellow surface + dark text + bright border combination
   is deliberately distinct from every production surface so the button
   is unmistakable during real-device testing.
   See docs/impl/ios-touch-event-tracer-impl.md §Class Reuse Audit. */
[data-iostrace-button] {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 9999;
  padding: 6px 10px;
  background: var(--yellow);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: 4px;
  font: 600 12px/1 system-ui, sans-serif;
  cursor: pointer;
}