/* Analysis theme — product name/version configured in deploy/app.conf.
   Light + blue by design: this is an intraday scanning tool read for hours
   at a stretch, so a bright, low-glare ground with a considered indigo-blue
   accent reads faster than a dark terminal look at a glance. */
:root {
  --bg: #f4f7fb; /* V2.1 app-bg */
  --surface: #ffffff;
  --surface2: #edf2f7; /* V2.1 surface-2: grouped sections, table headers */
  --surface3: #e8edf6;
  --border: #d7e0ea; /* dividers only (1.33:1); control edges use --border-control */
  --text: #172b4d; /* 14.10:1 on white */
  --muted: #52647a; /* 6.06:1 on white, 5.38:1 on --surface2 */
  --green: #18794e; /* 5.41:1 */
  --green-bg: rgba(20, 122, 61, 0.10);
  --green-row: rgba(20, 122, 61, 0.06);
  --red: #c62828; /* 5.62:1 */
  --red-bg: rgba(195, 34, 34, 0.10);
  --red-row: rgba(195, 34, 34, 0.06);
  --flat: #52647a;
  --flat-bg: rgba(92, 108, 130, 0.10);
  --unknown: #8592a6;
  --accent: #2457d6; /* 6.16:1: navigation, focus, the primary action */
  --accent-hover: #1b44aa;
  --accent-soft: rgba(36, 84, 224, 0.12);
  --warn: #946200; /* 5.24:1 */
  --warn-bg: rgba(154, 91, 10, 0.10);
  /* AA-safe darker variants of --green/--warn for small (~12px) bold badge
     text on their own tinted -bg — at that size/weight it doesn't qualify
     as WCAG "large text", so it needs the 4.5:1 normal-text threshold; the
     base --green/--warn tokens measured ~4.37-4.38:1 there (verified
     computationally), just under it. Scoped to badges only — the base
     tokens are unchanged everywhere else they're already used. */
  --green-strong: #146c45;
  --warn-strong: #7d5300;
  /* Translucent overlays for sticky/glass surfaces — kept as their own
     tokens (rather than var(--surface) at full opacity) since these sit
     over live page content behind a backdrop-blur. */
  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-bg-strong: rgba(255, 255, 255, 0.94);
  --scrim: rgba(16, 23, 38, 0.6);
  /* Heatmap buckets (Sectoral / stock tiles, sector matrix). Ink colours
     measured >= 4.5:1 on their own fill. */
  --heat-up-3: #15803d;
  --heat-up-2: #4ade80;
  --heat-up-1: #bbf7d0;
  --heat-flat: #f1f5f9;
  --heat-down-1: #fecaca;
  --heat-down-2: #f87171;
  --heat-down-3: #b91c1c;
  --heat-ink-up: #14532d;
  --heat-ink-down: #551111; /* 5.15:1 on --heat-down-2 (was #7f1d1d, 3.62:1) */
  --on-strong: #ffffff;
  /* V2.1 tokens (0.4.14 M1). Every text/fill pair is checked by tests/test_design_tokens.py. */
  --border-control: #7a8ca3; /* 3.44:1 on white: edges of inputs, selects, checkboxes */
  --critical: #b42318; /* 6.57:1: blocking or severe */
  --critical-bg: #fee4e2;
  --info: #175cd3; /* 5.99:1 */
  --info-bg: #e8f0fe;
  --green-tint: #e6f4ec; /* solid tints: text in its own colour stays >= 4.5:1 */
  --red-tint: #fdecec;
  --warn-tint: #fff4d6;
  --disabled: #667085; /* 4.97:1, unavailable controls */
  --radius: 10px;
  --shadow: 0 4px 20px rgba(16, 25, 43, 0.08);
  --shadow-modal: 0 16px 48px rgba(16, 25, 43, 0.16);
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, monospace;
  --header-h: 4.25rem;
  --glass-blur: blur(12px);

  /* ==========================================================================
     SEMANTIC DESIGN TOKENS (AIR v0.4.11 Design System)
     ========================================================================== */
  /* 0.4.14 U5: the v0.4.11 --color-* aliases were retired onto the core tokens above. */

  /* Font Stacks */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Fluid Typography Scale (clamp(min, preferred, max)) */
  --text-2xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);   /* 11px - 12px */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);      /* 12px - 13px */
  --text-sm: clamp(0.8125rem, 0.78rem + 0.25vw, 0.875rem);   /* 13px - 14px */
  --text-base: clamp(0.875rem, 0.84rem + 0.3vw, 1rem);       /* 14px - 16px */
  --text-lg: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);         /* 16px - 18px */
  --text-xl: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);     /* 18px - 22px */
  --text-2xl: clamp(1.375rem, 1.25rem + 0.75vw, 1.75rem);    /* 22px - 28px */

  /* Spacing Scale (4px base) */
  --space-3xs: 0.125rem;  /* 2px */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */

  /* Border Radii */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-full: 9999px;

  /* Transitions & Shadows */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Universal Text Overflow Containment */
p, h1, h2, h3, h4, h5, h6, span, a, td, th, li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Visually hidden but still available to assistive tech — used for header
   content (e.g. last-run timestamp) that's been moved into a tooltip to
   save header space, per explicit product direction, rather than dropped
   entirely. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  /* Sticky-footer layout: .page-footer sits at the true bottom of the
     viewport on short pages (e.g. logged-out with just the public
     summary) instead of floating mid-page under whichever column happens
     to be shortest. */
  display: flex;
  flex-direction: column;
}

.page-footer {
  margin-top: auto;
}

.num,
.price,
.change,
.pill-price,
.pill-change,
.pulse-item .val,
.picks-table td.num,
.ov-price,
.ov-chg {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* Sign colours everywhere (0.4.8): a + change is green, a − change red.
   Before this, .positive / .negative were only coloured inside a few
   components, so most dashboard tables showed changes in plain text.
   Single-class specificity: component rules (chips, bars) still win. */
.positive,
.pos { color: var(--green); }
.negative,
.neg { color: var(--red); }

.kbd-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0.1rem 0.35rem;
  font-family: var(--font-num);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
}

body.modal-open {
  overflow: hidden;
}

/* Only the app header. A bare `header` selector here made every <header>
   (hub title bar, table modal, position/ticket cards…) a sticky z-30 glass
   bar that covered the header dropdowns and stuck to the top on scroll. */
.app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  flex-shrink: 0;
  gap: 1px;
  line-height: 1;
}

.app-header h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1.15;
}

.build-ver {
  font-family: var(--font-num);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: nowrap;
}

.app-header .meta {
  color: var(--muted);
  font-size: 0.875rem;
}

.header-market {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.header-market::-webkit-scrollbar {
  display: none;
}

.header-market.hidden {
  display: none;
}

/* Market sessions bar (REQ-002: Real-time status chips for Crypto, Forex, US Equities, Commodity) */
.market-sessions-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space-3xs) 0;
}

.market-sessions-bar::-webkit-scrollbar {
  display: none;
}

.m-session-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.m-session-chip:hover {
  border-color: var(--accent);
}

.m-session-chip .m-session-label {
  font-weight: 600;
  color: var(--text);
}

.m-session-chip .m-session-sub {
  color: var(--muted);
  font-family: var(--font-num);
}

.m-session-chip .m-session-badge {
  font-weight: 600;
  padding: 1px var(--space-3xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
}

.m-session-chip[data-state="peak"] {
  border-color: var(--warn);
  background: var(--warn-bg);
}

.m-session-chip[data-state="peak"] .m-session-label {
  color: var(--warn-strong);
}

.m-session-chip[data-state="open"] {
  border-color: var(--green);
  background: var(--green-bg);
}

.m-session-chip[data-state="open"] .m-session-label {
  color: var(--green-strong);
}

.m-session-chip[data-state="pre"],
.m-session-chip[data-state="post"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.m-session-chip[data-state="pre"] .m-session-label,
.m-session-chip[data-state="post"] .m-session-label {
  color: var(--accent);
}

.m-session-chip[data-state="closed"] {
  border-color: var(--border);
  background: var(--surface2);
  opacity: 0.85;
}

.m-session-chip[data-state="closed"] .m-session-label {
  color: var(--muted);
}

/* Header data status (web/static/js/data-status.js): chip + Refresh + panel.
   Replaces the Align / Live / Analyze controls that sat 6px apart in the
   profile menu. Two separate buttons with a gap, each only its own size. */
.data-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.data-status.hidden {
  display: none;
}
.data-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.9rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}
.data-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.data-caret {
  color: var(--muted);
  font-size: 0.7rem;
}
.data-chip[data-state="live"] {
  border-color: rgba(20, 122, 61, 0.45);
  background: rgba(20, 122, 61, 0.1);
}
.data-chip[data-state="live"] .data-dot {
  background: var(--green);
}
.data-chip[data-state="older"] {
  border-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn-strong);
}
.data-chip[data-state="older"] .data-dot {
  background: var(--warn);
}
.data-chip[data-state="syncing"] .data-dot {
  background: var(--accent);
  animation: data-pulse 1.2s ease-in-out infinite;
}
@keyframes data-pulse {
  50% {
    opacity: 0.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .data-chip[data-state="syncing"] .data-dot {
    animation: none;
  }
}
.data-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.9rem;
  padding: 0.2rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.data-refresh:hover:not(:disabled) {
  background: var(--accent-hover);
}
.data-refresh:disabled,
.data-refresh.busy {
  opacity: 0.6;
  cursor: progress;
}
.data-chip:focus-visible, .data-refresh:focus-visible, .data-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.data-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(24rem, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.75rem 0.85rem;
  z-index: 45;
  max-height: calc(100dvh - var(--header-h) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 0.6rem;
  font-size: 0.8rem;
}
.data-panel.hidden {
  display: none;
}
.data-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.data-ds {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.3rem 0.6rem;
  align-items: center;
}
.data-ds .ds-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.data-ds .ds-state {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  text-align: center;
  background: var(--surface2);
  color: var(--muted);
}
.data-ds .s-fresh {
  background: var(--green-bg);
  color: var(--green);
}
.data-ds .s-lagging,
.data-ds .s-older,
.data-ds .s-missing {
  background: var(--warn-bg);
  color: var(--warn-strong);
}
.data-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.data-btn {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.data-btn.warn {
  border-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn-strong);
}
.data-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.data-confirm {
  border-top: 1px dashed var(--border);
  padding-top: 0.5rem;
  display: grid;
  gap: 0.45rem;
}
.data-panel-foot {
  margin: 0;
}
@media (max-width: 720px) {
  .data-refresh-label {
    display: none;
  }
}

/* Feeds indicator — three dots (bars / quotes / broker tick) in the header,
   with a hover/focus popover. Data from GET /api/market-data/source-status,
   polled every 30s by shell.js. */
.feed-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: default;
  outline-offset: 2px;
}
.feed-status.hidden {
  display: none;
}
.feed-status[data-worst="warn"] {
  border-color: rgba(154, 91, 10, 0.45);
  background: var(--warn-bg);
}
.feed-status[data-worst="down"] {
  border-color: rgba(195, 34, 34, 0.45);
  background: var(--red-bg);
}
.feed-status-k {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.feed-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.feed-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
  background: var(--flat);
}
.feed-dot.s-live {
  background: var(--green);
  --feed-pip: rgba(20, 122, 61, 0.4);
}
.feed-dot.s-warn {
  background: var(--warn);
}
.feed-dot.s-down {
  background: var(--red);
  --feed-pip: rgba(195, 34, 34, 0.45);
}
.feed-dot.s-off {
  background: transparent;
  border: 1.5px solid var(--unknown);
}
@media (prefers-reduced-motion: no-preference) {
  .feed-dots .feed-dot.s-live {
    animation: feed-pip 2.8s ease-in-out infinite;
  }
  .feed-dots .feed-dot.s-down {
    animation: feed-pip 1.1s ease-in-out infinite;
  }
}
@keyframes feed-pip {
  0%, 100% { box-shadow: 0 0 0 0 var(--feed-pip, rgba(0, 0, 0, 0)); }
  65% { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0); }
}
.feed-pop {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  width: 17rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.7rem 0.8rem;
  z-index: 40;
  display: none;
}
.feed-status:hover .feed-pop,
.feed-status:focus-within .feed-pop,
.feed-status:focus .feed-pop {
  display: block;
}
.feed-pop h4 {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.feed-pop-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
}
.feed-pop-row:first-of-type {
  border-top: 0;
}
.feed-pop-row .feed-dot {
  align-self: center;
}
.src-mark {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.2rem;
  border-radius: 50%;
  vertical-align: middle;
  box-sizing: border-box;
}
.src-mark.live {
  background: var(--green);
}
.src-mark.nse {
  border: 1.5px solid var(--unknown);
}
.feed-pop-t {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}
.feed-pop-m {
  grid-column: 2;
  font-size: 0.72rem;
  color: var(--muted);
}
.feed-pop-foot {
  margin: 0.5rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--unknown);
}

@media (max-width: 720px) {
  .feed-status-k {
    display: none;
  }
}

.header-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  justify-self: end;
}

.header-toggles {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
}

.header-toggles .toggle {
  width: auto;
  justify-content: flex-start;
}

.toggle-secondary .toggle-label {
  font-size: 0.75rem;
  font-weight: 500;
}

@media (max-width: 720px) {
  .app-header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.toggle-label {
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 600;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.2s;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.toggle input:checked + .toggle-track {
  background: rgba(36, 84, 224, 0.25);
  border-color: var(--accent);
}

.toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
  background: var(--accent);
}

.picks-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
}

@media (min-width: 1100px) {
  .picks-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.picks-grid > .picks-card {
  min-width: 0;
}

.picks-card {
  overflow: visible;
  min-width: 0;
}

.picks-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.picks-header h2 {
  margin: 0;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: -0.01em;
  flex: 1 1 12rem;
  min-width: 0;
}

.picks-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.hfoptscalp-ops {
  margin: 0 0 0.6rem;
  line-height: 1.45;
}

.hfoptscalp-pending {
  color: var(--warn, #c9892a);
}

.hfoptscalp-rules {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.hfoptscalp-rules summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.hfoptscalp-rules ol {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.hfoptscalp-params {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
}

.hfoptscalp-params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}

.hfoptscalp-params .secondary-btn {
  align-self: flex-start;
}

.hfoptscalp-save-status {
  margin-left: 0.5rem;
}

.hfoptscalp-checks {
  display: flex;
  gap: 0.2rem;
}

.hfoptscalp-check {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--muted);
}

.hfoptscalp-check.pass {
  background: #2fae5a;
}

.hfoptscalp-check.fail {
  background: #d64545;
}

.pdhpdl-rules {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.pdhpdl-rules summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.pdhpdl-rules ol {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.pdhpdl-params {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
}

.pdhpdl-params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}

.pdhpdl-params .secondary-btn {
  align-self: flex-start;
}

.pdhpdl-save-status {
  margin-left: 0.5rem;
}

/* --- Shared strategy chrome (1MT + Advanced Red Bar) -------------------- */
/* Two-column Rules | Pre-trade checklist row (shared.js::renderStrategyIntelRow),
   plus the collapsible Engine/Parameters details ARB wraps its params form in. */
.strategy-intel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  margin: 0 0 0.85rem;
  align-items: start;
}
@media (min-width: 900px) {
  .strategy-intel-row {
    grid-template-columns: 1fr 1fr;
  }
}
.strategy-intel {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 0;
}
.strategy-intel summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.strategy-intel ol,
.arb-checklist {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}
.strategy-engine {
  margin: 0 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.75rem 0.55rem;
}
.strategy-engine summary {
  cursor: pointer;
  font-weight: 600;
}
.strategy-table-toolbar {
  margin: 0 0 0.45rem;
}
.strategy-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
}
.arb-checklist {
  list-style: none;
  padding-left: 0;
}
.arb-checklist li {
  margin: 0.2rem 0;
}
.arb-checklist label {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  cursor: pointer;
}

.bfast-heat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin: 0 0 0.7rem;
}

/* One heatmap status (replaces the "09:20 freeze / Live" switch). */
.bfast-heat-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.bfast-heat-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--muted);
}

.bfast-heat-status[data-live="1"] {
  color: var(--green);
}

.bfast-heat-status[data-live="1"] .bfast-heat-dot {
  background: var(--green);
}

/* 09:20 value under each tile's live move; top-3 boards get an outline. */
.bfast-heat-tile .bfast-tile-freeze {
  font-family: var(--font-num);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.78;
}

.bfast-heat-tile.bfast-heat-top3 {
  box-shadow: inset 0 0 0 2px currentColor;
}

.bfast-heat-tile.bfast-heat-top3.bfast-heat-selected {
  box-shadow: inset 0 0 0 2px currentColor, 0 0 0 2px var(--text);
}

.bfast-asof {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.bfast-asof button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
  line-height: 1;
}

.bfast-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.7rem;
}

.bfast-legend span,
.bfast-legend button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.12rem 0.35rem;
  border: 0;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-num);
  cursor: pointer;
}

.bfast-heat-grid,
.bfast-stock-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.5rem;
}

.bfast-heat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.55rem 0.65rem 0.5rem;
  border: 0;
  border-radius: 8px;
  min-height: 4.4rem;
  width: 100%;
  color: var(--text);
  background: var(--surface2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bfast-heat-tile.bfast-heat-selected {
  box-shadow: 0 0 0 2px var(--text);
}

.bfast-heat-tile .bfast-tile-name {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.bfast-heat-tile .bfast-tile-last {
  font-family: var(--font-num);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bfast-heat-tile .bfast-tile-pct {
  font-family: var(--font-num);
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: auto;
}

.bfast-heat-tile .bfast-tile-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.bfast-heat-p5 { background: var(--heat-up-3); color: var(--on-strong); }
.bfast-heat-p3 { background: var(--heat-up-2); color: var(--heat-ink-up); }
.bfast-heat-p1 { background: var(--heat-up-1); color: var(--heat-ink-up); }
.bfast-heat-z { background: var(--heat-flat); color: var(--muted); }
.bfast-heat-m1 { background: var(--heat-down-1); color: var(--heat-ink-down); }
.bfast-heat-m3 { background: var(--heat-down-2); color: var(--heat-ink-down); }
.bfast-heat-m5 { background: var(--heat-down-3); color: var(--on-strong); }
.bfast-heat-unknown { background: var(--surface2); color: var(--muted); border: 1px dashed var(--border); }

.bfast-legend .bfast-heat-p5,
.bfast-legend .bfast-heat-m5 { color: var(--on-strong); }

.bfast-legend button.active {
  box-shadow: 0 0 0 2px var(--text);
}

.bfast-legend-dim {
  opacity: 0.38;
}

.bfast-print { margin: 0 0 var(--sp-2); }
.bfast-rs { font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }

.bfast-board-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.bfast-board-pair > section {
  min-width: 0;
}

.bfast-board-pair .picks-table:not(.breakout-preview-table):not(.breakout-table-full) {
  min-width: 0;
}

.bfast-sector-cell {
  max-width: 9.5rem;
}

.bfast-sector-name {
  display: inline-block;
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

/* Deterministic hash → one of 8 pastel tags, so two rows sharing a sector
   read as the same colour at a glance across the gainers/losers tables. */
.bfast-sector-c0 { background: #dbeafe; color: #1e3a8a; }
.bfast-sector-c1 { background: #dcfce7; color: #14532d; }
.bfast-sector-c2 { background: #fef3c7; color: #78350f; }
.bfast-sector-c3 { background: #fae8ff; color: #6b21a8; }
.bfast-sector-c4 { background: #ffe4e6; color: #881337; }
.bfast-sector-c5 { background: #e0f2fe; color: #0c4a6e; }
.bfast-sector-c6 { background: #fef9c3; color: #713f12; }
.bfast-sector-c7 { background: #e2e8f0; color: #1e293b; }

.picks-table th.bfast-sort-active {
  background: var(--accent);
  color: #fff;
}

/* Headers default to the browser's centered <th> text, which reads as
   misaligned against left-aligned Symbol/Sector cells and right-aligned
   numeric ones below them. Scoped to this section so other pages' tables
   are untouched. */
#breakfast-strategy-section .picks-table th {
  text-align: left;
}

#breakfast-strategy-section .picks-table th.num {
  text-align: right;
}

.bfast-stock-boards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.bfast-stock-board h3 {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.bfast-stock-board h3 .bfast-board-pct {
  font-family: var(--font-num);
  font-weight: 700;
}

.bfast-stock-mini {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.bfast-heat-tile.bfast-stock-tile {
  min-height: 3.6rem;
  padding: 0.45rem 0.5rem;
}

@media (max-width: 900px) {
  .bfast-stock-boards,
  .bfast-board-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .bfast-heat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.picks-table td.pos {
  color: var(--green);
}
.picks-table td.neg {
  color: var(--red);
}

.btn-view-all {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(36, 84, 224, 0.45);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.btn-view-all:hover {
  background: rgba(36, 84, 224, 0.12);
  border-color: var(--accent);
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  width: 100%;
  max-width: 100%;
}

.table-wrap-preview,
.table-wrap-modal {
  content-visibility: visible;
}

.picks-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.picks-table:not(.breakout-preview-table):not(.breakout-table-full) {
  min-width: 640px;
}

.picks-table th,
.picks-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.changes-matrix-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.changes-matrix-table th,
.changes-matrix-table td {
  white-space: normal;
  vertical-align: top;
  min-width: 11rem;
  width: 14rem;
}

.changes-matrix-table th:nth-child(1),
.changes-matrix-table td:nth-child(1) {
  min-width: 9rem;
  width: 9rem;
}

.changes-matrix-table th:nth-child(2),
.changes-matrix-table td:nth-child(2) {
  min-width: 14rem;
  width: 16rem;
}

.changes-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface2);
  box-shadow: 0 1px 0 var(--border);
}

.kr-ledger-cell {
  max-height: 12.5rem;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.4;
  -webkit-overflow-scrolling: touch;
}

.picks-table tbody tr.row-bull td {
  background: var(--green-row);
}

.picks-table tbody tr.row-bear td {
  background: var(--red-row);
}

.picks-table tbody tr.row-bull:hover td,
.picks-table tbody tr.row-bear:hover td {
  filter: brightness(1.08);
}

/* Rank-momentum highlight: which symbols climbed/fell since the last 60s
   snapshot (server/nse/rank_momentum.py). Applies for exactly one snapshot
   cycle — the backend only carries the most recent transition, so a row
   simply stops receiving a rank-* class once it settles. The transition is
   defined for when a row is patched in place; a full table re-render (this
   app's current rendering model) shows it as an instant swap instead. */
.picks-table tbody tr td {
  transition: background-color 1.5s ease;
}

.picks-table tbody tr.rank-climb-strong td {
  background: #15803d;
  color: #fff;
}

.picks-table tbody tr.rank-climb-mild td {
  background: var(--green-bg);
}

.picks-table tbody tr.rank-fall-strong td {
  background: #b91c1c;
  color: #fff;
}

.picks-table tbody tr.rank-fall-mild td {
  background: rgba(195, 34, 34, 0.14);
}

.picks-table tbody tr.rank-new td {
  background: rgba(37, 99, 235, 0.14);
}

.picks-table tbody tr.rank-dropped td {
  opacity: 0.4;
}

.rank-delta-badge {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  vertical-align: middle;
}

.rank-climb-strong .rank-delta-badge,
.rank-climb-mild .rank-delta-badge {
  color: var(--green);
}

.rank-fall-strong .rank-delta-badge,
.rank-fall-mild .rank-delta-badge {
  color: var(--red);
}

.rank-climb-strong .rank-delta-badge,
.rank-fall-strong .rank-delta-badge {
  color: #fff;
}

.rank-new .rank-delta-badge {
  color: #2563eb;
}

.picks-table .col-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
}

.picks-table thead .col-sticky {
  z-index: 4;
  background: var(--surface2);
}

.picks-table .symbol-copy {
  cursor: copy;
  user-select: none;
}

.picks-table .symbol-copy:hover strong {
  color: var(--accent);
}

.picks-table .symbol-copy:active {
  opacity: 0.7;
}

.picks-table th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.picks-table td.num {
  text-align: right;
}

.picks-table td.change-cell {
  font-size: 0.9375rem;
  font-weight: 600;
}

.picks-table td.ltp-cell {
  font-size: 1rem;
  font-weight: 700;
}

.picks-table tbody tr:last-child td {
  border-bottom: none;
}

.picks-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.picks-section {
  margin-top: 0.5rem;
}

main {
  width: 100%;
  max-width: none; /* Layout A (owner 2026-10-15): full device width; the shell grid sizes the work area */
  margin: 0 auto;
  padding: clamp(0.75rem, 2.5vw, 1.5rem);
}

.us-orb-head {
  margin-bottom: 0.35rem;
}

/* ISS-09: the session meta pill is a sentence, not a verdict: it wraps on a phone (was 415 px at 390). */
.us-orb-head .pill {
  max-width: 100%;
  white-space: normal;
}

#global-panel,
#global-grid,
#dashboard,
#breakout-section,
#mtf-section,
#fo-range-section,
#picks-section,
#us-orb-section,
#india-panel {
  width: 100%;
  min-width: 0;
}

#global-panel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

#us-orb-section {
  margin-top: 0.65rem;
  margin-bottom: 0.85rem;
}

#us-orb-section .orb-grid {
  margin-bottom: 0;
}

#picks-section {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.picks-grid-top20 .picks-card {
  min-width: 0;
}

.broker-session-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  margin: 0 -0.25rem 0.6rem;
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 0.8125rem;
  font-weight: 600;
}

.broker-session-alert .link-btn {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.sticky-dashboard-chrome {
  position: sticky;
  top: 0;
  z-index: 25;
  margin: 0 -0.25rem 0.75rem;
}

.pulse-bar,
.header-pulse-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.header-pulse-bar {
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.72rem;
}

.hp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  white-space: nowrap;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  line-height: 1.2;
}

.hp-chip .hp-k {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hp-chip .hp-v {
  font-weight: 700;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.hp-chip .hp-v.positive,
.hp-chip .hp-v .positive { color: var(--green); }
.hp-chip .hp-v.negative,
.hp-chip .hp-v .negative { color: var(--red); }
.hp-chip .hp-v.neutral { color: var(--flat); }
.hp-chip .hp-v.session-val.open { color: var(--green); }
.hp-chip .hp-v.session-val.closed,
.hp-chip .hp-v.session-val.pre_open { color: var(--muted); }
.hp-chip .ad-sep {
  color: var(--muted);
  margin: 0 0.22rem;
  font-weight: 600;
}

.hp-chip.hp-gate {
  font-weight: 700;
}

/* Two-line breadth chips: label over Adv/Dec/Unch (or Grn/Red/Flat).
   Uses the unused vertical room already in --header-h; does not grow it. */
.hp-chip.hp-chip-stack {
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 0.06rem;
  padding: 0.1rem 0.42rem 0.12rem;
  border-radius: 8px;
  line-height: 1.15;
}

.hp-chip.hp-chip-stack .hp-k {
  font-size: 0.55rem;
  letter-spacing: 0.05em;
}

.hp-tri {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.hp-n {
  display: inline-flex;
  align-items: baseline;
  gap: 0.16rem;
  padding: 0 0.38rem;
  line-height: 1.1;
}

.hp-n + .hp-n {
  border-left: 1px solid var(--border);
}

.hp-n:first-child {
  padding-left: 0;
}

.hp-n:last-child {
  padding-right: 0;
}

.hp-n .hp-l {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: inherit;
  opacity: 0.78;
}

.hp-n .hp-num {
  font-family: var(--font-num);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hp-n.positive { color: var(--green); }
.hp-n.negative { color: var(--red); }
.hp-n.flat { color: var(--flat); }
.hp-n.warn { color: var(--warn); }

.pulse-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.pulse-item .label {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pulse-item .val {
  font-weight: 700;
  font-size: 0.875rem;
}

.pulse-item .val.positive { color: var(--green); }
.pulse-item .val.negative { color: var(--red); }
.pulse-item .val.neutral { color: var(--flat); }

.pulse-divider {
  width: 1px;
  height: 1.1rem;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 1180px) {
  .hp-chip[data-priority="low"] {
    display: none;
  }
}

@media (max-width: 860px) {
  .app-header {
    grid-template-columns: auto auto;
    grid-template-areas:
      "brand actions"
      "market market";
  }
  .header-brand { grid-area: brand; }
  .header-actions { grid-area: actions; justify-self: end; }
  .header-market { grid-area: market; }
  .hp-chip[data-priority="mid"] {
    display: none;
  }
}

@media (max-width: 720px) {
  .hp-chip[data-priority="bank"] {
    display: none;
  }
}

.copy-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  padding: 0.45rem 0.85rem;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 300;
}

.copy-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
}

.pill.green { background: var(--green-bg); color: var(--green-strong); } /* 0.4.14 M8: axe contrast on tinted cards */
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.flat { background: var(--flat-bg); color: var(--flat); }
.pill.amber { background: var(--warn-bg); color: var(--warn-strong); }
.pill.unknown {
  background: var(--flat-bg);
  color: var(--muted); /* 0.4.14 M8: --unknown failed 4.5:1 on hatched cards (axe) */
}

/* Global markets — compact horizontal strip */
.global-strip,
.grid-global {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  width: 100%;
}

.global-strip-head {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.global-strip-head .note {
  margin: 0;
  font-size: 0.6875rem;
}

.session-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
}

.session-badge.open {
  color: var(--green);
  border-color: rgba(20, 122, 61, 0.4);
  background: var(--green-bg);
}

.session-badge.pre_open,
.session-badge.pre_market,
.session-badge.live {
  color: var(--warn);
  border-color: rgba(154, 91, 10, 0.45);
  background: rgba(154, 91, 10, 0.12);
}

.global-pill.session-pre_market,
.global-pill.session-pre_open,
.global-pill.session-live,
.global-pill.session-open {
  border-color: rgba(154, 91, 10, 0.35);
}

.session-badge.closed {
  color: var(--flat);
}

.session-badge.after_hours {
  color: var(--accent);
  border-color: rgba(36, 84, 224, 0.4);
}

.pulse-item .session-val.pre_open,
.pulse-item .session-val.pre_market {
  color: var(--warn);
}

.pulse-item .ad-sep {
  color: var(--muted);
  margin: 0 0.1rem;
}

.fno-ad-pulse .fno-ad-session {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: middle;
}

.fno-ad-pulse .fno-ad-session.pre_open {
  color: var(--warn);
}

.fno-ad-pulse .fno-ad-session.open,
.fno-ad-pulse .fno-ad-session.live {
  color: var(--green);
}

.fno-ad-pulse .fno-ad-session.closed {
  color: var(--flat);
}

.pulse-item .session-val.open,
.pulse-item .session-val.live {
  color: var(--green);
}

.pulse-item .session-val.closed {
  color: var(--flat);
}

.pill-region .session-badge {
  margin-left: 0.35rem;
  vertical-align: middle;
}

.global-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  flex: 1 1 9rem;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: default;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.global-pill:hover {
  border-color: rgba(36, 84, 224, 0.45);
}

.global-pill.extreme-move {
  animation: extreme-pulse 2s ease-in-out infinite;
}

@keyframes extreme-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36, 84, 224, 0); }
  50% { box-shadow: 0 0 0 2px rgba(36, 84, 224, 0.35); }
}

.pill-region {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1 1 100%;
}

.pill-price {
  font-size: 1rem;
  font-weight: 700;
}

.pill-change {
  font-size: 1rem;
  font-weight: 700;
}

.pill-change.positive { color: var(--green); }
.pill-change.negative { color: var(--red); }
.pill-change.neutral { color: var(--flat); }

.pill-regime {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.pill-regime.green { color: var(--green); background: var(--green-bg); }
.pill-regime.red { color: var(--red); background: var(--red-bg); }
.pill-regime.flat { color: var(--flat); background: var(--flat-bg); }
.pill-regime.unknown { color: var(--unknown); background: rgba(133, 146, 166, 0.12); }

/* Legacy grid-global fallback — unused in 0.2 */
.grid-global {
  display: flex;
}

/* Overview (0.4.8): compact Indices | Macro strip, one row on wide screens. */
.ov-gap {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  font-weight: 600;
}

.ov-gap.positive { background: var(--green-bg); color: var(--green); }
.ov-gap.negative { background: var(--red-bg); color: var(--red); }

.ov-grid { display: flex; flex-direction: column; gap: 0.45rem; }
.ov-group { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

/* Overview uses the Sector Pulse frame (.sp-mkts / .sp-mkt / .sp-mhead);
   India markets get the wider column, Market Breadth the narrower one. */
.ov { display: flex; flex-direction: column; gap: 0.6rem; }
.ov-mkts { grid-template-columns: minmax(0, 1.6fr) minmax(21rem, 1fr); }
.ov-mkts.ov-solo { grid-template-columns: minmax(0, 1fr); }
.ov-mkts .sp-mhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.ov-mkts .market-sessions-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.ov-gap { font-size: 0.75rem; }
.ov .hs-trail { height: 4.5rem; }

/* Breadth KPIs (0.4.8): verdict line, KPI rows x phase columns, each value
   with a coloured verdict word. */
.mb-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.5rem 0.7rem; border-radius: 8px; border-left: 4px solid var(--border); background: var(--bg); }
.mb-verdict strong { font-size: 1rem; }
.mb-verdict span { font-size: 0.8125rem; color: var(--muted); }
.mb-verdict.up { border-left-color: var(--green); background: var(--green-bg); }
.mb-verdict.up strong { color: var(--green); }
.mb-verdict.down { border-left-color: var(--red); background: var(--red-bg); }
.mb-verdict.down strong { color: var(--red); }
.mb-verdict.weak { border-left-style: dashed; }
.mb-verdict.flat { border-left-color: var(--warn); background: var(--warn-bg); }
.mb-verdict.flat strong { color: var(--warn-strong); }
.mb-alert { margin: 0; padding: 0.35rem 0.7rem; border-radius: 8px; background: var(--warn-bg); color: var(--warn-strong); font-size: 0.8125rem; font-weight: 700; }
.mb-kpis { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.mb-kpis th, .mb-kpis td { padding: 0.35rem 0.4rem; border-top: 1px solid var(--border); vertical-align: top; }
.mb-kpis thead th { border-top: 0; text-align: right; font-size: 0.75rem; font-weight: 700; color: var(--text); }
.mb-kpis tbody th { text-align: left; font-weight: 400; padding-left: 0; }
.mb-name { display: block; font-weight: 600; }
.mb-hint { display: block; font-size: 0.6875rem; font-weight: 400; color: var(--muted); }
.mb-cell { text-align: right; white-space: nowrap; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.mb-v { display: block; font-weight: 600; }
.mb-na { color: var(--muted); }
.mb-counts td { font-weight: 600; }
.mb-tag { display: inline-block; margin-top: 0.1rem; padding: 0 0.35rem; border-radius: 999px; font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600; }
.mb-tag.up { background: var(--green-bg); color: var(--green); }
.mb-tag.down { background: var(--red-bg); color: var(--red); }
.mb-tag.warn { background: var(--warn-bg); color: var(--warn-strong); }
.mb-tag.flat { background: var(--bg); color: var(--muted); }
.mb-tag.strong { font-weight: 800; box-shadow: inset 0 0 0 1px currentColor; }
.mb-tick { display: block; height: 3px; margin-top: 2px; border-radius: 2px; background: var(--border); }
.mb-tick.up { background: var(--green); }
.mb-tick.down { background: var(--red); }
.mb-tick.warn { background: var(--warn); }

.ov-glabel {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ov-tiles {
  display: grid;
  grid-template-columns: repeat(var(--ov-n, 4), minmax(0, 1fr));
  gap: 0.375rem;
}

.ov-tile {
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.ov-tile.pending { opacity: 0.6; }

.ov-lab {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.ov-name { overflow: hidden; text-overflow: ellipsis; }
.ov-unit { color: var(--muted); font-weight: 400; }
.ov-live { margin-left: auto; color: var(--green); font-size: 0.625rem; }
.ov-note .ov-live { margin: 0; }
.ov-price { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.ov-chg { font-size: 0.6875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-chg.positive { color: var(--green); }
.ov-chg.negative { color: var(--red); }
.ov-chg.neutral { color: var(--muted); }

@media (max-width: 1100px) {
  .ov-mkts { grid-template-columns: minmax(0, 1fr); }
  .ov-mkts .sp-mkt + .sp-mkt { padding: 0.75rem 0 0; border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 640px) {
  .ov-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.grid-india-headline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

.grid-india-macro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.grid-india-headline .index-card h2,
.grid-india-macro .index-card h2 {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.grid-india-headline .index-card .price,
.grid-india-macro .index-card .price {
  font-size: 1.125rem;
}

.grid-india-headline .index-card .change,
.grid-india-macro .index-card .change {
  font-size: 0.875rem;
}

.grid-india-headline .index-card .pill,
.grid-india-macro .index-card .pill {
  margin-top: 0.35rem;
  font-size: 0.625rem;
  padding: 0.15rem 0.4rem;
}

@media (max-width: 1280px) {
  .grid-india-headline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .grid-india-headline,
  .grid-india-macro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#india-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

#sector-momentum-section {
  margin-top: 0.2rem;
}

.sector-momentum-panel {
  padding: 0.65rem 0.75rem;
}

.sector-momentum-markets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 1100px) {
  .sector-momentum-markets {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sector-momentum-market {
  min-width: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
}

.sector-momentum-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.45rem;
}

.sector-momentum-head h2 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
}

.sector-momentum-tf {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.sector-momentum-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .sector-momentum-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sector-momentum-col {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.5rem;
}

.sector-momentum-note {
  margin: 0.5rem 0 0 !important;
  font-size: 0.625rem !important;
  line-height: 1.35;
}

.sector-matrix-table {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 280px;
  overflow: auto;
}

.sector-matrix-head,
.sector-matrix-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) minmax(6.5rem, auto) 2.75rem;
  gap: 0.35rem;
  align-items: center;
}

.sector-matrix-head {
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--border);
}

.sector-matrix-head .sector-matrix-heat {
  display: flex;
  gap: 0.2rem;
  justify-content: flex-end;
}

.sector-matrix-head .sector-matrix-heat span {
  width: 2.35rem;
  text-align: center;
}

.sector-matrix-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.sector-matrix-name {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere; /* owner 2026-10-02: sector names wrap, never end in "…" */
}

.sector-matrix-sym {
  margin-left: 0.2rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--muted);
}

.sector-matrix-quote {
  font-size: 0.625rem;
  color: var(--muted);
}

.sector-matrix-daily {
  margin-left: 0.25rem;
  font-weight: 700;
}

.sector-matrix-heat {
  display: flex;
  gap: 0.2rem;
  justify-content: flex-end;
}

.heat-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 1.35rem;
  border-radius: 4px;
  font-size: 0.5625rem;
  font-weight: 700;
  font-family: var(--font-num);
  line-height: 1;
  flex-shrink: 0;
}

.heat-up-strong {
  background: var(--heat-up-3);
  color: var(--on-strong);
}

.heat-up-weak {
  background: rgba(20, 122, 61, 0.22);
  color: var(--green);
}

.heat-down-strong {
  background: var(--heat-down-3);
  color: var(--on-strong);
}

.heat-down-weak {
  background: rgba(195, 34, 34, 0.2);
  color: var(--red);
}

.heat-flat {
  background: rgba(92, 108, 130, 0.18);
  color: var(--flat);
}

.heat-unknown {
  background: var(--surface2);
  color: var(--muted);
  border: 1px dashed var(--border);
}

.sector-sparkline {
  display: block;
  justify-self: end;
  opacity: 0.85;
}

.sector-sparkline-empty {
  width: 2.5rem;
  height: 0.875rem;
}

.matrix-empty {
  margin: 0.25rem 0;
  font-size: 0.6875rem;
}

.sector-group-title {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sector-group-title.gainers { color: var(--green); }
.sector-group-title.losers { color: var(--red); }

.sector-group-title .count {
  font-size: 0.625rem;
  color: var(--muted);
  font-weight: 600;
}

.both-bo.yes {
  color: var(--green);
  font-size: 1rem;
  font-weight: 700;
}

.both-bo.no {
  color: var(--muted);
}

.sort-hint {
  margin: 0 0 0.5rem;
}

.picks-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.picks-table th.sortable:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.picks-table td.pcr-view {
  font-size: 0.75rem;
  max-width: 140px;
  white-space: normal;
  line-height: 1.3;
}

.picks-table td.pcr-dir {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

#fo-range-section {
  margin-bottom: 0.85rem;
}

#mtf-section {
  margin-bottom: 0.85rem;
}

#breakout-section {
  margin-top: 0;
  margin-bottom: 0.85rem;
}

#picks-section {
  margin-top: 0;
}

.orb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: start;
  width: 100%;
}

@media (min-width: 1100px) {
  .orb-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Follow market shows one side: let it use the full width. */
  .orb-grid.one-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

.orb-panel {
  min-width: 0;
  width: 100%;
}

.breakout-preview-table {
  table-layout: auto;
}

.breakout-preview-table th,
.breakout-preview-table td {
  white-space: nowrap;
}

.orb-preview-hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
}

.breakout-table-full {
  min-width: max-content;
  table-layout: auto;
}

.breakout-table-full th,
.breakout-table-full td {
  white-space: nowrap;
}

.table-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 3vw, 1rem);
}

.table-modal.hidden {
  display: none;
}

.table-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.table-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  max-height: min(92vh, 920px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}

.table-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.table-modal-titles {
  min-width: 0;
  flex: 1;
}

.table-modal-header h2 {
  margin: 0;
  font-size: clamp(0.9375rem, 2.8vw, 1.0625rem);
  line-height: 1.35;
}

.table-modal-header .note {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
}

.table-modal-close {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.table-modal-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.table-modal-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 1rem 1rem;
  flex: 1;
  min-height: 0;
}

.table-modal-body .table-wrap {
  border: none;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .table-modal {
    padding: 0;
    align-items: stretch;
  }

  .table-modal-panel {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    height: 100%;
  }
}

.orb-panel .picks-header h2 {
  font-size: 0.875rem;
  line-height: 1.35;
}

.breakout-table .os-cell {
  font-weight: 700;
  white-space: nowrap;
}

.breakout-table .pcr-view {
  font-size: 0.6875rem;
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breakout-table td.breakout-side {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.breakout-card .pill.flat {
  font-size: 0.6875rem;
}

.breakout-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.breakout-table td.align-cell {
  font-weight: 700;
}

.scan-scope {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}

.scan-scope-partial {
  background: rgba(255, 176, 32, 0.08);
  border-left-color: #ffb020;
}

.scan-scope-full {
  background: rgba(46, 204, 113, 0.08);
  border-left-color: #2ecc71;
}

.spinner-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ffb020;
  animation: scan-pulse 1.2s ease-in-out infinite;
}

@keyframes scan-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.align-yes { color: var(--green); }
.align-no { color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(0.75rem, 2.5vw, 1rem) clamp(0.85rem, 2.5vw, 1.1rem);
  box-shadow: var(--shadow);
  min-width: 0;
}

.card h2 {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.card .benchmark {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.card .price {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.card .change {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.change.positive { color: var(--green); }
.change.negative { color: var(--red); }
.change.neutral { color: var(--flat); }

.sectors {
  margin-top: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.sectors h3 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sector-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 180px;
  overflow-y: auto;
}

.sector-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  gap: 0.5rem;
}

.sector-row .name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sector-row .pct {
  font-weight: 600;
  flex-shrink: 0;
}

.sector-row .pct.positive { color: var(--green); }
.sector-row .pct.negative { color: var(--red); }
.sector-row .pct.neutral { color: var(--flat); }

.sector-breadth-note {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
}

.sector-list-rich {
  max-height: none;
}

.sector-row-rich,
.sector-row.sector-head {
  display: grid;
  grid-template-columns: minmax(4.5rem, 1fr) 3.4rem minmax(6.5rem, 1.1fr);
  align-items: center;
  gap: 0.35rem;
}

.sector-row.sector-head {
  font-size: 0.625rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.15rem;
}

.sector-trends {
  display: inline-flex;
  justify-content: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.trend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  background: var(--surface);
}

.trend-icon.positive { color: var(--green); }
.trend-icon.negative { color: var(--red); }
.trend-icon.neutral { color: var(--flat); }

.sector-changes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem;
  font-size: 0.6875rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sector-row.sector-head .sector-changes {
  text-align: right;
}

.sector-changes .chg.positive { color: var(--green); }
.sector-changes .chg.negative { color: var(--red); }
.sector-changes .chg.neutral { color: var(--flat); }

@media (max-width: 520px) {
  .sector-row-rich,
  .sector-row.sector-head {
    grid-template-columns: minmax(3.5rem, 1fr) 2.8rem minmax(5.5rem, 1fr);
    font-size: 0.75rem;
  }
}

.picks-section h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

#picks-section {
  width: 100%;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th, td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (hover: hover) {
  tr:hover td {
    background: var(--surface2);
  }
}

.empty-state,
.error-banner,
.loading-overlay {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
}

.empty-state .empty-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-weight: 600;
  font-size: 1.05rem;
}

.empty-state .empty-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  animation: empty-pulse 1.4s ease-in-out infinite;
}

@keyframes empty-pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .empty-state .empty-dot { animation: none; }
}

.error-banner {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(195, 34, 34, 0.3);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  padding: 1rem;
  text-align: left;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  color: var(--text);
}

.loading-overlay #loading-message {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.loading-overlay .loading-sub {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.loading-overlay.hidden {
  display: none;
}

/* 8-pillar S6: the shell assembles behind the opaque boot overlay; keep it unpainted until the overlay
   lifts so it appears in its final place (moves under the overlay counted as layout shift, Home 0.11). */
body:has(> #loading:not(.hidden)) > .app-shell { visibility: hidden; }

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.note {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

footer a,
.footer-link {
  color: var(--accent);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

footer a:hover,
.footer-link:hover {
  text-decoration: underline;
}

.features-modal-panel {
  width: min(100%, 640px);
  max-height: min(88vh, 720px);
}

.features-modal-body {
  padding: 0.5rem 1rem 1.25rem;
}

.features-block {
  margin-bottom: 1rem;
}

.features-block:last-child {
  margin-bottom: 0;
}

.features-block h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.features-block ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
}

.features-block li + li {
  margin-top: 0.25rem;
}

.api-entry {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.api-entry:last-child {
  border-bottom: none;
}

.api-entry strong {
  display: block;
  font-size: 0.8125rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.api-entry .api-meta {
  font-size: 0.6875rem;
  color: var(--accent);
  font-family: ui-monospace, monospace;
  margin-bottom: 0.2rem;
  overflow-wrap: anywhere;
}

.api-entry p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.hidden {
  display: none !important;
}

/* Opening Momentum Report */

#omr-summary-section,
#omr-candidates-section,
#omr-decisions-section,
#omr-hf-section {
  margin-top: 0.65rem;
}

.omr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  min-width: 0;
  max-width: 100%;
}

.omr-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.omr-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 600px) {
  .omr-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .omr-head-meta {
    width: 100%;
  }
  .omr-head-meta a.omr-fno-csv,
  .omr-head-meta a.omr-nifty500-csv {
    white-space: normal;
  }
}

.omr-head-meta a.omr-fno-csv,
.omr-head-meta a.omr-nifty500-csv {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.omr-head-meta a.omr-fno-csv:hover,
.omr-head-meta a.omr-nifty500-csv:hover {
  border-color: var(--accent);
}

.omr-head-meta a.omr-fno-csv #omr-fno-asof,
.omr-head-meta a.omr-nifty500-csv #omr-nifty500-asof {
  color: var(--muted);
  font-weight: 400;
}

.omr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 900px) {
  .omr-grid {
    /* Layout A: sized by the work area, not the screen; 3 across only when each card fits its numbers */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
}
.omr-table .num { white-space: nowrap; } /* a figure never splits across lines */

/* Section 7 (HF 1min Strategy) is a single table, not a bullish/bearish
   pair like the other .orb-grid sections — always one full-width column. */
.omr-hf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.omr-summary-card h3 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.omr-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

/* Today's Analysis cards (0.4.8): table per card, bias chip in the head. */
.omr-summary-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.omr-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.omr-card-head h3 {
  margin: 0 auto 0 0;
  color: var(--text);
}

.omr-bias,
.omr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface2);
  color: var(--text);
  white-space: nowrap;
}

.omr-bias-up { background: var(--green-bg); color: var(--green); }
.omr-bias-down { background: var(--red-bg); color: var(--red); }
.omr-bias-mixed { background: var(--warn-bg); color: var(--warn-strong); }
.omr-chip.positive { background: var(--green-bg); }
.omr-chip.negative { background: var(--red-bg); }
.omr-chip.amber { background: var(--warn-bg); color: var(--warn-strong); }

.omr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.omr-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 0.3rem;
}

.omr-table td {
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
}

.omr-movers td {
  white-space: nowrap; /* REQ-004: a symbol or % never splits ("-3.0 / 6%") */
}

.omr-table .num,
.omr-tile .num,
.omr-ad-line .num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.omr-arrow {
  width: 1.5rem;
  text-align: center;
}

.omr-dna {
  color: var(--warn-strong);
}

.omr-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.omr-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: var(--surface2);
}

.omr-tile span,
.omr-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.omr-tile .num { text-align: left; }

.omr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.omr-ad-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--muted);
}

.omr-ad-line strong { color: var(--text); }

.omr-split {
  display: flex;
  height: 0.55rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface3);
}

.omr-split .adv { background: var(--green); }
.omr-split .unch { background: var(--surface3); }
.omr-split .dec { background: var(--red); }

.omr-movers {
  display: grid;
  /* U6 (1024 px audit): stack when the card is too narrow for two unbroken
     symbol + % tables, at any viewport width. */
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
}

.omr-asof {
  margin: auto 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.omr-override {
  position: relative;
}

.omr-override summary {
  list-style: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.omr-override summary::-webkit-details-marker { display: none; }

.omr-override[open] .omr-fii-dii-form {
  position: absolute;
  right: 0;
  top: 2.4rem;
  z-index: 20;
  width: min(20rem, 80vw);
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(16, 25, 43, 0.14);
}

.omr-summary-card .note {
  margin: 0.25rem 0;
}

.omr-fii-dii-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.omr-fii-dii-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.6875rem;
  color: var(--muted);
  gap: 0.15rem;
}

.omr-fii-dii-form input {
  width: 90px;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.8125rem;
}

.omr-fii-dii-form button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.pill.draft-badge {
  background: rgba(133, 146, 166, 0.18);
  color: var(--muted);
  font-style: italic;
  font-size: 0.625rem;
  padding: 0.1rem 0.4rem;
  text-transform: none;
}

.breakout-table td.positive { color: var(--green); }
.breakout-table td.negative { color: var(--red); }

/* App shell — sidebar (logged in) + main content + login panel (logged
   out). Replaces a full-screen blocking login gate: the dashboard itself
   needs no account (matches the original app's public/read-only intent);
   only broker/execution/admin actions do. Reuses existing tokens only —
   no new palette, per the light-theme-only requirement. */
.app-shell {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: none; /* full device width (owner 2026-10-15) */
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 2vw, 1rem) 1rem;
}

.main-content {
  flex: 1 1 auto;
  min-width: 0; /* flex items default to min-width:auto, which lets a wide
                   table force the column wider than intended */
}

.main-content main {
  padding-left: 0;
  padding-right: 0;
}

.app-sidebar {
  flex: 0 0 200px;
  position: sticky;
  top: 0.75rem;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.5rem;
  max-height: calc(100vh - 1.5rem);
  overflow-y: auto;
  transition: flex-basis 0.15s ease;
}

.app-sidebar.hidden {
  display: none;
}

.app-sidebar.collapsed {
  flex-basis: 48px;
  align-items: center;
}

.app-sidebar.collapsed .sidebar-heading,
.app-sidebar.collapsed .sidebar-link-label {
  display: none;
}

.app-sidebar.collapsed .sidebar-link {
  justify-content: center;
  width: auto;
}

.sidebar-toggle {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

.sidebar-toggle:hover {
  background: var(--surface2);
  color: var(--text);
}

.app-sidebar.collapsed .sidebar-toggle {
  align-self: center;
}

.app-sidebar.collapsed .sidebar-toggle-icon {
  display: inline-block;
  transform: rotate(180deg);
}

.sidebar-section + .sidebar-section {
  border-top: 1px solid var(--border);
  margin-top: 0.3rem;
  padding-top: 0.3rem;
}

.sidebar-heading {
  margin: 0.3rem 0.5rem 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.header-pulse {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: 0.5rem;
}

.archives-stub {
  padding: 1.5rem;
  max-width: 40rem;
}

.archives-stub h2 {
  margin-top: 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.sidebar-link:hover {
  background: var(--surface2);
}

.sidebar-link.active {
  background: var(--surface2);
  color: var(--text);
  font-weight: 600;
}

.sidebar-link.hidden {
  display: none;
}

.sidebar-link-icon {
  color: var(--accent);
  font-size: 0.6rem;
  width: 0.8rem;
  text-align: center;
  flex-shrink: 0;
}

/* Header Sign-In CTA (visible when guest, hidden when signed in) */
.header-signin-btn {
  background: var(--accent);
  color: var(--on-strong);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--sp-1) var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h-sm);
  transition: background var(--motion-fast), transform var(--motion-fast);
}

.header-signin-btn:hover {
  background: var(--accent-hover);
}

.header-signin-btn.hidden {
  display: none;
}

/* Modal Shell & Dialog */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.login-modal.hidden {
  display: none;
}

.login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.login-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 26rem;
  z-index: 1;
  animation: modal-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.login-panel {
  width: 100%;
  margin: 0;
  position: static;
}

.login-panel.hidden {
  display: none;
}

.login-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-sizing: border-box;
}

.login-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.login-card-title-group h2 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  line-height: var(--lh-heading);
}

.login-subtitle {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--lh-tight);
}

.login-close-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-pill);
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
  flex-shrink: 0;
}

.login-close-btn:hover {
  background: var(--surface3);
  color: var(--text);
}

/* Google OAuth Button & Divider */
.google-auth-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-1);
}

.google-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--control-h);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.google-signin-btn:hover {
  background: var(--surface2);
  border-color: var(--border-strong);
}

.google-signin-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.google-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border);
}

.auth-divider span {
  padding: 0 var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Fields & Inputs */
.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 500;
}

.login-field input {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  min-height: var(--control-h);
  box-sizing: border-box;
}

.login-field input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrap input {
  width: 100%;
  padding-right: calc(var(--sp-6) + var(--sp-2));
}

.password-toggle-btn {
  position: absolute;
  right: var(--sp-2);
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: var(--sp-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}

.password-toggle-btn:hover {
  color: var(--text);
}

.login-error {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--warn);
  background: var(--warn-bg);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  line-height: var(--lh-tight);
}

.login-error.success {
  color: var(--green);
  background: var(--green-bg);
}

.login-error.hidden {
  display: none;
}

.login-submit-btn,
#login-submit,
#force-password-submit {
  background: var(--accent);
  color: var(--on-strong);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-4);
  min-height: var(--control-h);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: background var(--motion-fast);
  width: 100%;
}

.login-submit-btn:hover,
#login-submit:hover,
#force-password-submit:hover {
  background: var(--accent-hover);
}

.login-submit-btn:disabled,
#login-submit:disabled,
#force-password-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.login-footer-note {
  text-align: center;
  margin: var(--sp-1) 0 0;
}

.btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--on-strong);
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

.btn-spinner.hidden {
  display: none;
}

.secondary-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.secondary-btn:hover {
  color: var(--text);
  border-color: var(--muted);
}

.profile-menu {
  position: relative;
}

.profile-menu.hidden {
  display: none;
}

.profile-menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.profile-menu-toggle:hover {
  background: var(--surface3);
}

.profile-menu-caret {
  color: var(--muted);
  font-size: 0.65rem;
}

.profile-menu-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.65rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.profile-menu-panel.hidden {
  display: none;
}

.profile-menu-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.profile-menu-label {
  color: var(--muted);
}

.profile-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0.2rem 0;
}

.profile-menu-logout {
  margin-top: 0.15rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.profile-menu-logout:hover {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red);
}

@media (max-width: 960px) {
  .app-shell {
    flex-direction: column;
  }

  .app-sidebar {
    position: static;
    flex-basis: auto;
    width: 100%;
    max-height: none;
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .login-modal {
    align-items: flex-end;
    padding: 0;
  }

  .login-modal-dialog {
    max-width: 100%;
    animation: sheet-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .login-modal-dialog .login-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--sp-4);
  }

  @keyframes sheet-enter {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/* Kill switch — server-authoritative, sits next to the data chip. */
.kill-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
}

.kill-switch[data-armed="true"] {
  color: var(--green-strong);
  background: var(--green-bg);
  border-color: var(--green);
}

.kill-switch[data-armed="false"] {
  color: var(--warn-strong);
  background: var(--warn-bg);
  border-color: var(--warn);
}

/* Broker Management — full page (not a modal), ordinary page scroll (see
   the .content-page:has(.kr-page) comment below for why it no longer
   shares Knowledge Repo's bounded-viewport shell). */
.brokers-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.7rem;
}

.brokers-page-lead {
  margin: 0;
  max-width: 52rem;
}

#brokers-page-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* KPI strip + expandable rows ("Overview + Expandable Rows" — chosen from
   three prototyped Broker Management layouts, chat request 2026-09-13).
   Replaces the earlier card-grid + summary-table + always-open detail
   panel, which showed the same single broker three times over, each in
   its own fixed-height scrollbox. */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  background: var(--surface);
}

.kpi-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.kpi-value {
  margin-top: 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-num);
}

.kpi-value.good { color: var(--green-strong); }
.kpi-value.bad { color: var(--red); }
.kpi-value.warn { color: var(--warn-strong); }

.exp-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.exp-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.exp-row-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}

.exp-row-head:hover {
  background: var(--surface2);
}

.exp-row .chev {
  color: var(--muted);
  font-size: 0.7rem;
  transition: transform 0.15s;
  flex: none;
}

.exp-row.open .chev {
  transform: rotate(90deg);
}

.exp-row-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.exp-row-body {
  display: none;
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid var(--border);
}

.exp-row.open .exp-row-body {
  display: block;
  padding-top: 0.85rem;
}

.exp-tabs {
  display: flex;
  gap: 0.2rem;
  margin: -0.1rem 0 0.75rem;
  border-bottom: 1px solid var(--border);
}

.exp-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.exp-tab:hover {
  color: var(--text);
}

.exp-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.exp-panel {
  display: none;
}

.exp-panel.active {
  display: block;
}

.chartink-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0 0.3rem;
}

.chartink-section-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.brokers-desk-monitor {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.6rem;
}

.brokers-desk-monitor label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.brokers-desk-monitor input {
  font: inherit;
  font-size: 0.85rem;
  font-family: var(--font-num);
  width: 5.5rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

.pill-live {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red);
}

.pill-paper {
  background: var(--warn-bg);
  color: var(--warn-strong);
}

.broker-detail-stats {
  margin: 0 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.broker-section-title {
  margin: 0.85rem 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.broker-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.broker-status[data-status="connected"] { color: var(--green-strong); background: var(--green-bg); }
.broker-status[data-status="expired"] { color: var(--warn-strong); background: var(--warn-bg); }
.broker-status[data-status="error"],
.broker-status[data-status="not_configured"] { color: var(--red); background: var(--red-bg); }

.broker-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.55rem 0.75rem;
}

.broker-form.broker-form-login {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  width: 100%;
}

.broker-form.broker-form-login label {
  flex: 1 1 auto;
  min-width: 0;
}

.broker-form.broker-form-login button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.broker-form.broker-form-login button.primary {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  min-height: var(--control-h-sm);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-strong);
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: opacity var(--motion-fast), background var(--motion-fast);
}

.broker-form.broker-form-login button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.broker-form.broker-form-login button.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.broker-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.broker-form input {
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
}

.broker-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.85rem;
}

.broker-actions button,
.broker-login-actions button,
.brokers-desk-monitor button {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
}

.broker-actions button.primary,
.broker-login-actions button.primary,
.brokers-desk-monitor button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.broker-actions button.primary:hover,
.broker-login-actions button.primary:hover,
.brokers-desk-monitor button.primary:hover {
  background: var(--accent-hover);
}

.broker-actions button[disabled],
.broker-login-actions button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.broker-toggles {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.6rem;
}

.broker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.broker-toggle input[disabled] {
  cursor: not-allowed;
}

.broker-feedback {
  margin: 0.55rem 0 0;
}

/* ChartInk postback card — each strategy's paste/local URLs need to be
   read in full and copied reliably; the bare <input> this used to render
   with no width/font rule truncated to browser-default sizing (~20
   chars), which is what made the card unreadable. */
.chartink-postback-help {
  margin: 0.5rem 0 0.85rem;
}

.chartink-strategy-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.chartink-strategy-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: var(--surface2);
}

.chartink-url-row {
  margin-top: 0.55rem;
}

.chartink-url-row:first-of-type {
  margin-top: 0.7rem;
}

.chartink-url-label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.chartink-url-copy {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}

.chartink-url-field {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  text-overflow: ellipsis;
}

.chartink-url-copy button {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.chartink-url-copy button.copied {
  color: var(--green);
  border-color: var(--green);
}

.chartink-create-details {
  margin-top: 1rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.75rem;
}

.chartink-create-details summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

.chartink-create-details .broker-form {
  margin-top: 0.75rem;
}

.chartink-login-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  background: var(--surface2);
  margin-bottom: 1rem;
}

.chartink-fetch-row {
  margin-top: 0.55rem;
}

.chartink-fetch-result {
  margin-top: 0.5rem;
}

.chartink-fetch-result table {
  width: 100%;
}

.chartink-screener-list {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chartink-screener-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  background: var(--surface2);
}

.chartink-screener-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chartink-screener-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

.chartink-screener-add {
  margin-top: 0.6rem;
}

.chartink-screener-label-input {
  font-size: 0.85rem;
}

.danger-outline {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
}

.danger-outline:hover {
  background: var(--red);
  color: #fff;
}

/* Admin Settings → Features tab: infra/integration endpoint checklist. */
.endpoint-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  background: var(--surface2);
  margin-bottom: 0.6rem;
}

.endpoint-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.endpoint-path {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--muted);
  word-break: break-all;
}

.endpoint-row .note {
  margin: 0.3rem 0 0;
}

@media (max-width: 620px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Admin Settings — a proper in-app page (replaces the dashboard in
   #main-content while active), not a modal, per explicit product
   direction: user/role management and public-home-page section config
   both need real page real estate, not a cramped overlay. */
.content-page.hidden {
  display: none;
}

/* Knowledge Repo needs its own viewport so the Release Ledger can
   scroll on both axes without the body (overflow-x: hidden) clipping
   the 9-column matrix or stretching rows off-screen. Admin Settings
   does not use .kr-page, so it keeps ordinary page scroll — and so does
   Broker Management (.brokers-page) since its "Overview + Expandable
   Rows" layout has no internal bounded scroll pane of its own; forcing it
   into this fixed-height/overflow-hidden shell was what produced the
   nested-scrollbox-in-a-scrollbox page a 2026-09-13 redesign fixed. */
.content-page:not(.hidden):has(.kr-page) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: calc(100dvh - var(--header-h) - 1.25rem);
  max-height: calc(100dvh - var(--header-h) - 1.25rem);
}

.content-page:has(.kr-page) .admin-page-head {
  flex: 0 0 auto;
}

.content-page:has(.kr-page) #content-page-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-page-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.admin-page-back {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.admin-page-back:hover {
  background: var(--surface3);
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0.25rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.admin-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
}

.admin-tab:hover {
  color: var(--text);
  background: var(--surface);
}

.admin-tab.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}

.admin-tab.hidden {
  display: none;
}

.admin-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.admin-block.hidden {
  display: none;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table.admin-grid th,
.admin-table.admin-grid td {
  vertical-align: top;
}

.admin-table.admin-grid th.col-check,
.admin-table.admin-grid td.col-check {
  text-align: center;
  white-space: nowrap;
  width: 4.2rem;
}

.admin-table .cell-title,
.data-table .cell-title {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.35;
  margin-bottom: var(--space-3xs);
}

.admin-table .cell-desc,
.data-table .cell-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
  max-width: 42ch;
}

/* ==========================================================================
   PRODUCTION DATA TABLE & CARD TRANSFORMATION SYSTEM
   ========================================================================== */
.table-container {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin: var(--space-sm) 0;
}

.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--border-control) transparent;
}

.table-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-control);
  border-radius: var(--radius-full);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-sm);
}

.data-table th {
  background-color: var(--surface2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-control);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.data-table tbody tr:nth-child(even) {
  background-color: var(--surface2);
}

.data-table tbody tr:hover {
  background-color: var(--info-bg);
  transition: background-color var(--transition-fast);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-success {
  background-color: var(--green-tint);
  color: var(--green);
  border-color: var(--green-bg);
}

.badge-neutral {
  background-color: var(--surface2);
  color: var(--muted);
  border-color: var(--border);
}

.checkbox-cell {
  text-align: center;
  width: 48px;
  vertical-align: middle;
}

.checkbox-touch-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

.checkbox-touch-target input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}

.worker-code {
  font-family: var(--font-family-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

@media (max-width: 767px) {
  .admin-tab {
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
  }

  .data-table-responsive,
  .data-table-responsive tbody,
  .data-table-responsive tr,
  .data-table-responsive td {
    display: block;
    width: 100%;
  }

  .data-table-responsive thead {
    display: none;
  }

  .data-table-responsive tr {
    margin-bottom: var(--space-md);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    box-shadow: var(--shadow-sm);
  }

  .data-table-responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
  }

  .data-table-responsive td:last-child {
    border-bottom: none;
    padding-top: var(--space-sm);
  }

  .data-table-responsive td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--muted);
    padding-right: var(--space-sm);
    flex-shrink: 0;
  }

  .data-table-responsive td.cell-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }
}

.admin-menu-select,
.admin-menu-order {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}

.admin-menu-order {
  width: 4rem;
}

/* Knowledge Repo (formerly the Info sidebar block) — one full page with
   five internal tabs (API Reference/Feature Guides/Tech Stack/Release
   Ledger/Knowledge Base) plus a client-side search box that searches all
   five at once. No external search service — everything is already loaded
   client-side once the page opens. */
.kr-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.kr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex: 0 0 auto;
}

.kr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.kr-tab {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
}

.kr-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.kr-search {
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 360px;
}

.kr-results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kr-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  text-align: left;
  font: inherit;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.kr-result:hover {
  border-color: var(--accent);
}

.kr-result strong {
  font-size: 0.85rem;
}

#kr-tab-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#kr-tab-content:has(.kr-ledger),
#kr-tab-content:has(.kr-ledger-table-pane) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kr-ledger-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
  flex: 0 0 auto;
}

.kr-ledger-count {
  margin: 0;
}

.kr-ledger-views {
  display: flex;
  gap: 0.35rem;
}

.kr-ledger-view {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
}

.kr-ledger-view.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.kr-ledger {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.kr-ledger-list {
  overflow: auto;
  min-height: 0;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
}

.kr-ledger-item {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  font: inherit;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.kr-ledger-item:hover {
  border-color: var(--accent);
}

.kr-ledger-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.kr-ledger-date {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--font-num);
}

.kr-ledger-item strong {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

.kr-ledger-detail {
  overflow: auto;
  min-height: 0;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  padding: 0.9rem 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.kr-ledger-field {
  margin: 0 0 0.9rem;
}

.kr-ledger-field:last-child {
  margin-bottom: 0;
}

.kr-ledger-field h4 {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.kr-ledger-field p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kr-ledger-table-pane {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
}

.kr-ledger-table-pane .changes-matrix-table {
  margin: 0;
}

.changes-matrix-table tbody tr.active td {
  background: var(--surface);
}

.tech-stack {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-bottom: 1rem;
}

.tech-stack-lead {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text);
  max-width: 52rem;
}

.tech-stack-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.35rem 0 0.5rem;
  background: var(--bg);
}

.tech-stack-toc-link {
  appearance: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.tech-stack-toc-link:hover {
  border-color: var(--accent);
  color: var(--text);
}

.tech-stack-group h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 0.65rem;
  margin-top: 0.55rem;
}

.tech-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  min-width: 0;
}

.tech-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.tech-card-head strong {
  font-size: 0.84rem;
  line-height: 1.3;
}

.tech-card .api-meta {
  font-size: 0.6875rem;
  color: var(--accent);
  font-family: var(--font-num);
  margin-bottom: 0.35rem;
  overflow-wrap: anywhere;
}

.tech-card p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.tech-card-where {
  margin-top: 0.4rem !important;
  font-size: 0.7rem !important;
  color: var(--text) !important;
  font-family: var(--font-num);
}

@media (max-width: 860px) {
  .kr-ledger {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(10rem, 32%) minmax(0, 1fr);
  }

  .content-page:not(.hidden):has(.kr-page) {
    height: calc(100dvh - var(--header-h) - 0.75rem);
    max-height: calc(100dvh - var(--header-h) - 0.75rem);
  }
}

.kb-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.kb-entries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kb-entry-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.kb-entry-head strong {
  font-size: 0.9rem;
  flex: 1 1 auto;
}

.kb-entry-actions {
  display: flex;
  gap: 0.4rem;
}

.kb-entry-tags {
  margin: 0 0 0.5rem;
}

.kb-entry-body {
  font-size: 0.85rem;
  color: var(--text);
  white-space: pre-wrap;
  margin: 0 0 0.5rem;
}

.kb-entry-meta {
  margin: 0;
}

.kb-entry-screenshot,
.kb-screenshot-preview img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 0 0 0.6rem;
}

.kb-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.kb-form textarea {
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  resize: vertical;
}

.kb-form-actions {
  display: flex;
  gap: 0.5rem;
}

.kb-screenshot-preview.hidden {
  display: none;
}

.admin-block h3 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.82rem;
}

.admin-table th {
  text-align: left;
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.admin-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-table select {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}

.admin-table button {
  font-size: 0.75rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
}

.admin-table button:hover {
  background: var(--surface3);
}

.admin-table button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.admin-inline-form input,
.admin-inline-form select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}

.admin-inline-form button.primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.admin-inline-form button.primary:hover {
  background: var(--accent-hover);
}

.admin-perm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.6rem 0 0.8rem;
}

.admin-perm-toolbar input[type="search"] {
  flex: 1 1 200px;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}

.admin-perm-toolbar button {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.admin-perm-toolbar button:hover {
  background: var(--surface3);
}

.admin-perm-toolbar button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-perm-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.admin-perm-group summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--surface2);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-perm-group summary::-webkit-details-marker {
  display: none;
}

.admin-perm-group summary::before {
  content: "\25b8";
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.12s ease;
}

.admin-perm-group[open] summary::before {
  transform: rotate(90deg);
}

.admin-perm-group-body {
  padding: 0 0.7rem;
}

.admin-perm-group-body .section-toggle-row:last-child {
  border-bottom: none;
}

.perm-row-flash {
  box-shadow: inset 3px 0 0 var(--green);
}

.perm-row-error {
  box-shadow: inset 3px 0 0 var(--warn);
}

.section-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid var(--border);
}

.section-toggle-row:last-child {
  border-bottom: none;
}

.section-toggle-copy strong {
  display: block;
  font-size: 0.82rem;
}

.section-toggle-copy span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
}

.section-toggle-row select {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  flex-shrink: 0;
}

.admin-section-label-input {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 220px;
}

.section-role-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.section-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.section-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  white-space: nowrap;
}

.section-role-chip input {
  margin: 0;
}

/* Dashboard section frame — a thin, unstyled wrapper (no box model of its
   own) around each existing <section>, purely so the toolbar below can
   survive that section's own innerHTML refresh on every data poll. See
   the matching comment in index.html. */
.section-frame {
  width: 100%;
  min-width: 0;
}

.section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.1rem;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.section-toolbar-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.section-toolbar-actions {
  display: flex;
  gap: 0.25rem;
}

.section-toolbar-btn {
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
}

.section-toolbar-btn:hover {
  background: var(--surface3);
  color: var(--text);
}

/* Reordering is a signed-in, per-user preference (server/routers/layout.py)
   — an anonymous visitor always sees the static registry order, so the
   move controls are hidden rather than shown-but-403ing. */
#dashboard:not(.can-reorder) .section-toolbar-btn[data-move-up],
#dashboard:not(.can-reorder) .section-toolbar-btn[data-move-down] {
  display: none;
}

.section-frame.collapsed > section {
  display: none;
}

.section-frame.collapsed .section-toolbar-btn[data-collapse-toggle] {
  transform: rotate(-90deg);
}

/* SWG scan grid (swg-strategy.js): wide rule table scrolls inside its card
   instead of widening the page on phones. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* AIR Portfolio (web/static/js/features/portfolio.js). Scoped .pf-* on the
   app tokens; bucket colours differ in lightness as well as hue. */
.pf-page [hidden] { display: none !important; }
.pf-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.pf-head h2 { margin: 0.1rem 0 0.25rem; }
.pf-head .note { margin: 0; max-width: 62ch; }
.pf-eyebrow { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pf-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-pos { color: var(--green); }
.pf-neg { color: var(--red); }
.pf-error { color: var(--red); }
.pf-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 3px; vertical-align: 0.05em; }
.pf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.pf-between { justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.pf-mt { margin-top: 1rem; }
.pf-block { margin-top: 1.5rem; }
.pf-block > h3, .pf-panel h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.pf-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin: 1.25rem 0 0.6rem; }
.pf-section-head h3 { margin: 0; font-size: 1rem; }

.pf-flash { margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: 0.875rem; }
.pf-flash.ok { background: var(--green-bg); color: var(--green-strong); }
.pf-flash.info { background: var(--flat-bg); color: var(--text); }
.pf-flash.error { background: var(--red-bg); color: var(--red); }

.pf-btn { min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: 600 0.875rem var(--font-ui); cursor: pointer; }
.pf-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pf-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pf-btn.primary:hover:not(:disabled) { background: var(--accent-hover); color: #fff; }
.pf-btn.danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.pf-btn.small { min-height: 2rem; padding: 0 0.6rem; font-size: 0.8rem; }
.pf-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pf-btn:focus-visible, .pf-option:focus-visible, .pf-field input:focus-visible, .pf-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pf-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.pf-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.pf-field label { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.pf-field input, .pf-field select { min-height: 2.5rem; padding: 0 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: 0.9rem var(--font-ui); }
.pf-controls .pf-field select { min-width: 11rem; }
.pf-field .note { font-size: 0.72rem; }
.pf-inline { flex-direction: row; align-items: center; gap: 0.5rem; }
.pf-actions { margin-left: auto; }

.pf-summary { display: grid; grid-template-columns: minmax(14rem, auto) 1fr; gap: 0.75rem; margin-top: 1rem; }
.pf-total { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1.1rem; border-radius: var(--radius); background: var(--text); color: var(--surface); }
.pf-total .note { color: inherit; opacity: 0.8; }
.pf-total strong { font: 600 1.9rem var(--font-num); }
.pf-total .pf-num { opacity: 0.85; font-size: 0.85rem; }
.pf-notice { padding: 0.9rem 1.1rem; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-strong); }
.pf-notice p, .pf-notice ul { margin: 0.3rem 0 0; }
.pf-notice.warn { margin-top: 1rem; }
.pf-notice.warn li { margin: 0.15rem 0; }

.pf-bar { display: flex; gap: 3px; height: 1.1rem; border-radius: 999px; overflow: hidden; }
.pf-bar span { display: block; height: 100%; }
.pf-buckets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.9rem; }
.pf-bucket { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.9rem; border: 1px solid var(--border); border-top: 5px solid var(--pf-c); border-radius: var(--radius); background: var(--surface); }
.pf-bucket h3 { margin: 0; font-size: 0.95rem; min-height: 2.4em; }
.pf-bucket .note { margin: 0; font-size: 0.78rem; line-height: 1.45; }
.pf-bucket-top { display: flex; justify-content: space-between; align-items: center; }
.pf-code { font: 600 0.9rem var(--font-num); }
.pf-big { font: 600 1.6rem var(--font-num); }
.pf-big .note { font: 400 0.75rem var(--font-ui); }

.pf-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.pf-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.pf-panel { padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.pf-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.pf-kv:last-child { border-bottom: 0; }
.pf-kv > div { display: flex; flex-direction: column; gap: 0.1rem; }
.pf-kv .note { font-size: 0.72rem; }
.pf-stack { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.pf-inset { padding: 0.6rem; border-radius: 8px; background: var(--bg); }
.pf-flow { margin: 0.55rem 0; }
.pf-flow-top { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem; }
.pf-meter { height: 0.55rem; border-radius: 999px; background: var(--bg); overflow: hidden; }
.pf-meter span { display: block; height: 100%; }

.pf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.pf-kpi { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pf-kpi strong { font: 600 1.35rem var(--font-num); }
.pf-kpi .note { font-size: 0.75rem; margin: 0; }

.pf-table td { vertical-align: top; }
.pf-row-actions { white-space: nowrap; text-align: right; }
.pf-row-actions .pf-btn + .pf-btn { margin-left: 0.3rem; }
.pf-table td.pf-drift-cell { min-width: 11rem; vertical-align: middle; }
.pf-drift { position: relative; height: 1rem; border-radius: 999px; background: var(--bg); }
.pf-drift-band { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border-radius: 999px; background: var(--green-bg); border: 1px solid var(--green); }
.pf-drift-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
.pf-drift-actual { position: absolute; top: 50%; width: 0.8rem; height: 0.8rem; margin: -0.4rem 0 0 -0.4rem; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--text); }
.pf-past td { color: var(--muted); }

.pf-event { margin-bottom: 0.9rem; padding: 0.9rem; border: 1px solid var(--warn); border-radius: var(--radius); background: var(--surface); }
.pf-event h4 { margin: 0; font-size: 0.95rem; }
.pf-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0.75rem 0; }
.pf-option { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.75rem; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 0.85rem var(--font-ui); cursor: pointer; }
.pf-option.on { border: 2px solid var(--accent); padding: calc(0.75rem - 1px); }
.pf-option .pf-kv { padding: 0.3rem 0; }
.pf-option-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; }
.pf-history { list-style: none; padding: 0; margin: 0; }
.pf-history li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }

/* Portfolio › Risk (MTF 360) and the Holdings bucket filter */
.pf-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: 0.875rem; background: var(--flat-bg); color: var(--text); }
.pf-strip .note { color: inherit; opacity: 0.85; margin: 0; }
.pf-strip.ok { background: var(--green-bg); color: var(--green-strong); }
.pf-strip.warn { background: var(--warn-bg); color: var(--warn-strong); }
.pf-strip.error { background: var(--red-bg); color: var(--red); }
.pf-kpi-amber { border-color: var(--warn); background: var(--warn-bg); }
.pf-kpi-red { border-color: var(--red); background: var(--red-bg); }
.pf-more { margin-top: 0.6rem; }
.pf-more summary { cursor: pointer; font-size: 0.85rem; color: var(--accent); padding: 0.2rem 0; }
.pf-more[open] summary { margin-bottom: 0.6rem; }
.pf-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pf-seg button { min-height: 2rem; padding: 0 0.75rem; border: 0; border-right: 1px solid var(--border); background: var(--surface); color: var(--muted); font: 600 0.8rem var(--font-ui); cursor: pointer; }
.pf-seg button:last-child { border-right: 0; }
.pf-seg button.on { background: var(--accent); color: #fff; }
.pf-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pf-rk-table tr[data-rk-open] { cursor: pointer; }
.pf-rk-table tr[data-rk-open]:hover, .pf-rk-table tr[data-rk-open].on { background: var(--flat-bg); }
.pf-rk-table tr[data-rk-open]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pf-rk-table td { vertical-align: middle; }
.pf-rk-detail > td { padding: 0.75rem 0.5rem 1rem; background: var(--bg); }
.pf-runway-cell { min-width: 14rem; }
.pf-runway { position: relative; height: 2.6rem; min-width: 12rem; }
.pf-runway span { position: absolute; }
.pf-runway-trk { left: 0; right: 0; top: 0.75rem; height: 6px; border-radius: 3px; background: var(--flat-bg); }
.pf-runway-z1 { left: 0; top: 0.75rem; height: 6px; border-radius: 3px 0 0 3px; background: var(--red); }
.pf-runway-z2 { top: 0.75rem; height: 6px; background: var(--warn); }
.pf-runway-exit { top: 1.05rem; transform: translateX(-50%); font-size: 0.6rem; line-height: 1; color: var(--text); }
.pf-runway-dot { top: 0.55rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--text); border: 2px solid var(--surface); transform: translateX(-50%); }
.pf-runway-l, .pf-runway-r { top: 1.65rem; font: 0.7rem var(--font-num); color: var(--muted); white-space: nowrap; }
.pf-runway-l { left: 0; }
.pf-runway-l em { font-style: normal; opacity: 0.8; }
.pf-runway-r { right: 0; }
.pf-spark { width: 100%; max-width: 360px; height: auto; display: block; }
.pf-spark .g { stroke: var(--border); }
.pf-spark .l { fill: none; stroke: var(--red); stroke-width: 2; }
.pf-spark .p { fill: var(--red); }
.pf-spark text { fill: var(--muted); font: 10px var(--font-num); }
.pf-muted td { opacity: 0.65; }
.pf-grow { flex: 1 1 14rem; }
.pf-grow input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 0; padding: 0; border: 0; }
.tx-block { padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tx-table th.tx-cur, .tx-table td.tx-cur { background: var(--flat-bg); }
.tx-table tr.tot td { font-weight: 700; border-top: 2px solid var(--text); }
.tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.6rem; }
.tx-warn { margin: 0.75rem 0; }
.tx-warn li { display: flex; gap: 0.5rem; align-items: baseline; }
.pf-barrow { display: grid; grid-template-columns: minmax(5rem, 9rem) 1fr 3.5rem; gap: 0.5rem; align-items: center; font-size: 0.82rem; padding: 0.2rem 0; }
.pf-barrow > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-hbar { height: 0.55rem; border-radius: 999px; background: var(--flat-bg); overflow: hidden; }
.pf-hbar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cp-text { width: 100%; min-height: 6rem; font: 0.8rem var(--font-num); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; background: var(--surface); color: var(--text); }
.pf-page h4 { margin: 1rem 0 0.4rem; font-size: 0.9rem; }
.pf-past { opacity: 0.6; }

.pf-form { margin-top: 1rem; padding: 0.9rem; border: 1px dashed var(--border); border-radius: var(--radius); }
.pf-form h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.pf-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.pf-span2 { grid-column: span 2; }
.pf-list { margin: 0.4rem 0; padding-left: 1.1rem; }

.pf-rules { margin: 0; padding-left: 1.3rem; }
.pf-rules li { margin: 0.45rem 0; line-height: 1.5; }
.pf-gates { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.pf-gates li { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.82rem; }
.pf-gate-n { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--accent); color: #fff; font: 600 0.7rem var(--font-num); }

@media (max-width: 1100px) {
  .pf-buckets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-grid3 { grid-template-columns: minmax(0, 1fr); }
  .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pf-summary, .pf-grid2, .pf-options, .pf-buckets { grid-template-columns: minmax(0, 1fr); }
  .pf-kpis { grid-template-columns: 1fr 1fr; }
  .pf-form-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-span2 { grid-column: auto; }
  .pf-controls .pf-field { flex: 1 1 100%; }
  .pf-controls .pf-field select, .pf-controls .pf-field input { min-width: 0; width: 100%; }
  .pf-actions { margin-left: 0; }
  .pf-actions .pf-btn { width: 100%; }
}

/* Admin → Menu master → Left menu sections (order of sidebar headings) */
.admin-subheading {
  margin: 1.1rem 0 0.35rem;
  font-size: 0.95rem;
}
.admin-menu-groups {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  max-width: 28rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.admin-menu-group-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
}
.admin-menu-group-row + .admin-menu-group-row {
  border-top: 1px solid var(--border);
}
.admin-menu-group-row.is-fixed {
  opacity: 0.65;
}
.admin-menu-group-pos {
  width: 1.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted, inherit);
}
.admin-menu-group-label {
  flex: 1;
  font-weight: 600;
}
.admin-menu-group-input {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}
.admin-menu-group-row .secondary-btn {
  min-width: 2.25rem;
  padding: 0.2rem 0.5rem;
}
.admin-menu-group-row .secondary-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* -- Section hub shell (web/static/js/hub.js; docs/platform/hub-and-agent-sdlc-plan.md §1a)
   Chips and tabs keep a ≥44px hit area; the chip row scrolls rather than
   shrinking when a hub has more strategies than fit. */
.hub { display: flex; flex-direction: column; gap: 12px; }
.hub-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 56px; padding: 8px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.hub-title { margin: 0; font-size: 1.2rem; }
.hub-sub { margin: 2px 0 0; }
.hub-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.hub-chip {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.hub-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.hub-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.hub-tab {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--muted); font: inherit; cursor: pointer;
}
.hub-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.hub-chip:focus-visible, .hub-tab:focus-visible, .hub-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hub-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.hub-fresh { margin: 0; }
.hub-quiet { margin: 0; }
.hub-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hub-stat { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.hub-stat p { margin: 0 0 4px; }
.hub-stat strong { font-size: 1.15rem; }

/* Intraday Hub Institutional Cockpit & Strategy Table (REQ-003 / ARCH-001) */
.int-kpi-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.int-kpi-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.int-kpi-title { margin: 0; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.int-kpi-main { display: flex; align-items: baseline; gap: var(--space-xs); }
.int-kpi-val { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; }
.int-kpi-sub { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-2xs); padding: 0; text-align: left; font-size: var(--text-xs); color: var(--muted); } /* not the page footer's padding/centring */
.int-kpi-item { display: inline-flex; align-items: baseline; gap: var(--space-2xs); }
.int-kpi-item b { font-weight: 600; color: var(--text); }
.int-score-pill { display: inline-block; min-width: 2rem; padding: var(--space-3xs) var(--space-xs); text-align: center; font-weight: 700; border-radius: var(--radius-full); font-size: var(--text-xs); }
.int-score-high { background: var(--green-bg); color: var(--green); }
.int-score-mid { background: var(--warn-bg); color: var(--warn-strong); }
.int-score-low { background: var(--red-bg); color: var(--red); }
.int-actions-cell { display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; }
/* 0.4.14 M0: the All strategies table scrolls inside its box instead of
   crushing columns until words split letter by letter (owner screenshot). */
.int-strategies th, .int-strategies td { overflow-wrap: normal; word-break: normal; }
.int-strategies td:first-child { min-width: calc(var(--sp-6) * 5); }
.int-strategies td[data-label="Status"] { min-width: calc(var(--sp-6) * 5); }
.int-strategies .pill, .int-kpi-head .pill { white-space: nowrap; }
.int-kpi-wide { flex-wrap: wrap; }
.int-act-btn { padding: var(--space-3xs) var(--space-xs); font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; }
.int-act-btn:hover { background: var(--bg); border-color: var(--accent); }
.int-act-btn.warn { color: var(--warn-strong); }
.int-act-btn.danger { color: var(--red); }
.int-breaker-badge { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--warn-strong); }

/* Swing Hub cockpit (0.4.8): one shape for every swing strategy — pipeline
   tiles, today's candidates, folds closed by default, rules drawer. */
.sh-cockpit { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.sh-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sh-head h3 { margin: 0; font-size: 1.05rem; }
.sh-links { display: flex; gap: 1rem; margin-left: auto; font-size: 0.8125rem; }
.sh-links .hub-link { text-decoration: none; font-weight: 600; }
.sh-src { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 6px; padding: 0.05rem 0.4rem; background: rgba(36, 84, 224, 0.08); color: var(--accent); }
.sh-src.ci { background: rgba(107, 63, 176, 0.1); color: #6b3fb0; }
.sh-sum { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.sh-sum b { font-weight: 700; }
.sh-warn { color: var(--warn-strong); }
.sh-pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.sh-step { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.sh-n { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sh-step strong { font-size: 0.875rem; }
.sh-d { font-size: 0.6875rem; color: var(--muted); }
.sh-step.ok { background: var(--green-bg); border-color: transparent; }
.sh-step.ok strong { color: var(--green); }
.sh-step.bad { background: var(--red-bg); border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.sh-step.bad strong { color: var(--red); }
.sh-step.warn { background: var(--warn-bg); border-color: transparent; }
.sh-step.warn strong { color: var(--warn-strong); }
.sh-act { align-self: flex-start; margin-top: 0.25rem; font: inherit; font-size: 0.6875rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.sh-act.primary { background: var(--text); color: var(--surface); border-color: var(--text); }
.sh-cands-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.sh-cands-head h4 { margin: 0; font-size: 0.9375rem; }
.sh-cands-head .note { font-size: 0.75rem; }
/* Add & check + stock validation list (0.4.8). */
.sh-add { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.7rem 0.8rem; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg); }
.sh-add.drag { border-color: var(--accent); background: rgba(36, 84, 224, 0.06); }
.sh-add-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.sh-add-head h4 { margin: 0; font-size: 0.9375rem; }
.sh-add-head .note { font-size: 0.75rem; }
.sh-inp { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.sh-inp:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(36, 84, 224, 0.15); }
.sh-inp input { flex: 1 1 10rem; min-width: 8rem; border: 0; outline: 0; font: inherit; font-size: 0.875rem; background: transparent; }
.sh-toks { display: contents; }
.sh-tok { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.2rem 0.1rem 0.5rem; border-radius: 999px; background: var(--bg); color: var(--muted); }
.sh-tok button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 0.875rem; line-height: 1; padding: 0 0.2rem; }
.sh-tok.ok { background: var(--green-bg); color: var(--green); }
.sh-tok.bad { background: var(--red-bg); color: var(--red); }
.sh-tok.warn { background: var(--warn-bg); color: var(--warn-strong); }
.sh-prog { margin: 0; min-height: 1.1rem; font-size: 0.8125rem; }
.sh-issues { margin: 0; font-size: 0.8125rem; }
.sh-issues:empty { display: none; }
.sh-busy { color: var(--warn-strong); font-weight: 600; }
.sh-act:disabled { opacity: 0.45; cursor: not-allowed; }
.sh-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sh-seg button { border: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.7rem; cursor: pointer; }
.sh-seg button + button { border-left: 1px solid var(--border); }
.sh-seg button.on { background: var(--text); color: var(--surface); }
.sh-seg.sm button { padding: 0.2rem 0.55rem; }
.sh-list td { vertical-align: middle; }
.sh-row { cursor: pointer; }
.sh-row:hover td, .sh-row.open td { background: var(--bg); }
.sh-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sh-caret { width: 1rem; color: var(--muted); }
.sh-score.na b { color: var(--muted); }
.sh-strip { display: inline-flex; gap: 2px; margin-right: 0.45rem; vertical-align: middle; }
.sh-strip i { width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.sh-strip i.bad { background: var(--red); }
.sh-strip i.na { background: var(--border); }
.sh-detail td { padding: 0 0.5rem 0.6rem; background: var(--bg); }
.sh-grps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem 1rem; padding: 0.5rem 0.25rem; }
.sh-grp { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; }
.sh-grp > b { font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sh-chk { display: flex; justify-content: space-between; gap: 0.5rem; }
.sh-val { font-family: var(--font-num); color: var(--muted); text-align: right; }
.sh-val i { font-style: normal; opacity: 0.8; }
.sh-score { display: inline-flex; align-items: center; gap: 0.4rem; }
.sh-score b { font-family: var(--font-num); min-width: 1.6rem; text-align: right; }
.sh-score i { display: inline-block; width: 3.5rem; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.sh-score i span { display: block; height: 4px; background: var(--muted); }
.sh-score.up b { color: var(--green); } .sh-score.up i span { background: var(--green); }
.sh-score.warn b { color: var(--warn-strong); } .sh-score.warn i span { background: var(--warn); }
.sh-v { display: inline-block; font-size: 0.6875rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.5rem; }
.sh-v.up { background: var(--green-bg); color: var(--green); }
.sh-v.warn { background: var(--warn-bg); color: var(--warn-strong); }
.sh-v.down { background: var(--red-bg); color: var(--red); }
.sh-v.flat { background: var(--bg); color: var(--muted); }
.sh-why { font-size: 0.75rem; max-width: 22rem; }
.sh-sub { display: block; color: var(--muted); }
.sh-empty { margin: 0; }
.sh-fold { border: 1px solid var(--border); border-radius: var(--radius); }
.sh-fold > summary { padding: 0.55rem 0.75rem; cursor: pointer; font-weight: 600; font-size: 0.875rem; }
.sh-fold[open] > summary { border-bottom: 1px solid var(--border); }
.sh-fold-body { padding: 0.5rem 0.75rem; }
.sh-fold-body:empty { display: none; }
.sh-bars { display: inline-flex; gap: 3px; }
.sh-bars i { display: inline-block; width: 1.3rem; height: 6px; border-radius: 3px; background: var(--border); }
.sh-bars i.ok { background: var(--green); } .sh-bars i.bad { background: var(--red); } .sh-bars i.warn { background: var(--warn); }
.sh-need { color: var(--red); text-decoration: none; font-weight: 600; }
.sh-drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(28rem, 100vw); padding: 1rem 1.25rem; border: 0; border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(21, 23, 28, 0.12); overflow-y: auto; }
.sh-drawer::backdrop { background: rgba(21, 23, 28, 0.25); }
.sh-drawer header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.sh-drawer h3 { margin: 0; font-size: 1rem; }
.sh-drawer ol { padding-left: 1.2rem; font-size: 0.8125rem; line-height: 1.6; }
@media (max-width: 1100px) { .sh-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sh-pipe { grid-template-columns: minmax(0, 1fr); }
  .sh-links { margin-left: 0; }
  .sh-why { max-width: none; }
}
.hub-pnl.green, td.green { color: var(--green); }
.hub-pnl.red, td.red { color: var(--red); }
.hub-alert { border-left: 4px solid var(--red); }
.hub-alert ul { margin: 6px 0 0; padding-left: 18px; }
.hub-card h3 { margin-top: 0; }
.hub-pos-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.hub-pos { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.hub-pos header, .ops-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hub-pos header .hub-pnl, .hub-pos header .pill:last-child { margin-left: auto; }
.hub-pos p { margin: 6px 0 0; }
.hub-empty { border-style: dashed; background: transparent; text-align: center; }
.hub-acc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.hub-acc > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.hub-rules { margin: 6px 0; padding-left: 22px; }
.hub-rules li { margin: 4px 0; }
.hub-more > summary { cursor: pointer; color: var(--accent); min-height: 32px; }
@media (max-width: 720px) {
  .hub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-top { padding: 8px 12px; }
}

/* Intraday daily banner / MIS countdown (features/intraday-hub.js) */
.hub-banner { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); }
.hub-banner.green { background: var(--green-bg); border-color: var(--green); color: var(--green-strong); }
.hub-banner.red { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.hub-banner.amber { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-strong); }
.hub-banner.flat { background: var(--flat-bg); color: var(--muted); }
.hub-banner span { color: var(--text); }
.hub-mis { font-variant-numeric: tabular-nums; }

/* Auto-Ops board (features/auto-ops.js) */
.ops-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ops-col { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.ops-col h3 { margin: 0; font-size: 0.95rem; }
.ops-card { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 44px; }
.ops-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ops-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ops-empty { text-align: center; margin: 8px 0; }
.ops-detail h3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ops-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ops-form { display: flex; flex-direction: column; gap: 10px; }
.ops-field { display: flex; flex-direction: column; gap: 4px; }
.ops-field input, .ops-field select, .ops-field textarea { font: inherit; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.ops-swot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .ops-swot { grid-template-columns: minmax(0, 1fr); } }
/* Auto-Ops Dev Factory: What now?, Ideas, Providers, ticket "Agents" block (tokens only). */
.ops-plan { display: flex; flex-direction: column; gap: var(--sp-3); }
.ops-status, .ops-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; min-width: 0; }
.ops-row h3 { margin: 0; }
.ops-spacer { flex: 1 1 auto; }
.ops-check { display: inline-flex; gap: var(--sp-2); align-items: center; min-height: var(--control-h-sm); }
.ops-need { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); }
.ops-need > div { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.ops-list { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
.ops-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Auto-Ops Telegram card + link code (Door 2) */
.ops-steps { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); max-width: 72ch; }
.ops-link-code { padding: 0 var(--sp-3) var(--sp-3); border-color: var(--accent); margin-top: var(--sp-3); }
.ops-code { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); letter-spacing: 0.2em; margin: var(--sp-2) 0; }
/* Auto-Ops Door 1: Idea button on every page + capture dialog */
.idea-fab { position: fixed; right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index: 900;
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); padding: 0 var(--sp-4);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-modal); background: var(--accent); color: var(--on-strong); border: 0; }
@media (hover: hover) { .idea-fab:hover { background: var(--accent-hover); } }
.idea-fab:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.idea-fab[hidden] { display: none; }
.idea-dialog { width: min(560px, calc(100vw - 2 * var(--sp-4))); max-height: calc(100vh - 2 * var(--sp-5)); overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-modal); }
.idea-dialog::backdrop { background: var(--scrim); }
.idea-form { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.idea-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.idea-head h2 { margin: 0; font-size: var(--fs-lg); }
.idea-ctx { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
@media print { .idea-fab { display: none; } }
.ops-factory { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.ops-factory h4 { margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; min-height: 0; }
.linklike:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Intraday Hub overview: F&O Tracker + Sectoral heatmap below the table. */
.hub-block { margin-top: 18px; }

/* ---- Home dashboard sections (0.4.8: features/home-sections.js) ---- */
.home-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 6rem;
}

.hs-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.hs-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.hs-meta,
.hs-when,
.hs-foot,
.hs-empty,
.hs-missing {
  font-size: 0.75rem;
  color: var(--muted);
}

.hs-empty { margin: 0; }
.hs-foot { margin: 0.25rem 0 0; }

.hs-label {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.hs-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.5rem;
}

.hs-grid-2.tight {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.hs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.hs-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.4rem 0.35rem 0;
}

.hs-table td,
.hs-table tbody th {
  padding: 0.5rem 0.4rem 0.5rem 0;
  border-top: 1px solid var(--border);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.875rem;
  color: var(--text);
}

.hs-table .num {
  text-align: right;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.hs-phase { display: block; font-weight: 600; }
.hs-when { display: block; font-weight: 400; }
.hs-bar-cell { width: 28%; padding-left: 0.75rem !important; }

.hs-trail {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 9rem;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}

.hs-trail-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.hs-trail-up,
.hs-trail-dn {
  flex: 1 1 0;
  display: flex;
}

.hs-trail-up { align-items: flex-end; border-bottom: 1px solid var(--text); }
.hs-trail-dn { align-items: flex-start; }
.hs-trail-up span { width: 100%; background: var(--green); border-radius: 3px 3px 0 0; }
.hs-trail-dn span { width: 100%; background: var(--red); border-radius: 0 0 3px 3px; }

.hs-trail-axis {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--muted);
  padding-top: 0.25rem;
}

/* Sector Pulse (0.4.8): one card for NSE + NYSE sector chips and stock movers. */
.sp { display: flex; flex-direction: column; gap: 0.9rem; }
.sp-head { flex-wrap: wrap; }
.sp-seg {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.sp-seg button {
  min-height: 36px;
  padding: 0 0.8rem;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.sp-seg button:first-child { border-left: 0; }
.sp-seg button.on { background: var(--text); color: var(--surface); }
.sp-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-phone { display: none; }
.sp-mkts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-mkt { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding-right: 1.5rem; }
.sp-mkt + .sp-mkt { padding: 0 0 0 1.5rem; border-left: 1px solid var(--border); }
.sp-mhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.sp-mhead h3 { margin: 0; font-size: 1rem; }
.sp-status {
  margin-left: auto;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}
.sp-status.live { background: var(--green-bg); color: var(--green); }
.sp-lbl { margin: 0.25rem 0 0; font-size: 0.75rem; font-weight: 600; }
.sp-lbl span { margin-left: 0.25rem; color: var(--muted); font-weight: 500; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 30px;
  padding: 0 0.625rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
}
.sp-rk, .sp-cp { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.sp-rk { font-size: 0.6875rem; opacity: 0.8; }
.sp-cp { font-size: 0.75rem; }
.sp-mo {
  padding: 0 0.375rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 0.6875rem;
  font-weight: 700;
}
.sp-up2 { background: var(--green); color: #fff; }
.sp-up1 { background: var(--green-bg); color: var(--green); border-color: var(--green-bg); }
.sp-dn2 { background: var(--red); color: #fff; }
.sp-dn1 { background: var(--red-bg); color: var(--red); border-color: var(--red-bg); }
.sp-flat { background: var(--surface2); color: var(--muted); border-color: var(--border); }
.sp-up1 .sp-mo, .sp-dn1 .sp-mo { background: var(--surface); }
.sp-stocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.25rem; }
.sp-movers .hs-when { font-size: 0.75rem; }

/* Strategy desk (0.4.8): Intraday | Swing panes in one card. */
.sd-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-single .sd-split { grid-template-columns: minmax(0, 1fr); }
.sd-pane { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding-right: 1.25rem; }
.sd-pane + .sd-pane { padding: 0 0 0 1.25rem; border-left: 1px solid var(--border); }
.sd-ph { display: flex; align-items: center; gap: 0.5rem; }
.sd-ph h3 { margin: 0; font-size: 0.9375rem; }
.sd-hub { margin-left: auto; font-size: 0.75rem; font-weight: 600; }

.sd-chip {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
}

.sd-chip.ok { background: var(--green-bg); color: var(--green); }
.sd-chip.neg { background: var(--red-bg); color: var(--red); }
.sd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }

.sd-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: var(--surface2);
  min-width: 0;
}

.sd-sl { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sd-stat strong { font-family: var(--font-num); font-size: 0.9375rem; }
.sd-warn { color: var(--warn); }
.sd-bar { display: block; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.sd-bar span { display: block; height: 4px; background: var(--green); }
.sd-bar span.sd-warn { background: var(--warn); }
.sd-bar span.negative { background: var(--red); }
.sd-more { font-size: 0.75rem; font-weight: 600; }

@media (max-width: 860px) {
  .hs-grid-2,
  .hs-grid-2.tight,
  .omr-movers {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sector Pulse on a phone: one market and one movers side at a time. */
  .sp-phone { display: flex; margin-left: 0; }
  .sp-phone button { flex: 1 1 0; min-height: 44px; }
  .sp-head .sp-seg { margin-left: 0; }
  .sp-mkts, .sp-stocks { grid-template-columns: minmax(0, 1fr); }
  .sp-mkt, .sp-mkt + .sp-mkt { padding: 0; border-left: 0; }
  .sp:not(.sp-show-us) .sp-mkt[data-sp-market="us"],
  .sp.sp-show-us .sp-mkt[data-sp-market="nse"],
  .sp:not(.sp-show-losers) .sp-movers.sp-losers,
  .sp.sp-show-losers .sp-movers.sp-gainers { display: none; }

  .sd-split { grid-template-columns: minmax(0, 1fr); }
  .sd-pane, .sd-pane + .sd-pane { padding: 0; border-left: 0; }
  .sd-pane + .sd-pane { padding-top: 0.75rem; border-top: 1px solid var(--border); }
  .hs-bar-cell { display: none; }
}

/* ---- Knowledge Repo release grouping (0.4.8) ---- */
.kr-release-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
}

.kr-release-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.kr-release-chip.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.kr-release-n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  opacity: 0.7;
}

.kr-release-group + .kr-release-group {
  margin-top: 1.5rem;
}

.kr-release-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}

.kr-release-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  background: var(--surface3);
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
}

.kr-ledger-release {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.kr-ledger-release:first-child { margin-top: 0; }

/* Multi-market hubs: market switcher + IST session timeline (hub.js). */
.hub-markets { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; align-self: flex-start; background: var(--surface); }
.hub-mk { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.9rem; border-left: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 0.8125rem; min-width: 0; }
.hub-mk:first-child { border-left: 0; }
.hub-mk small { font-size: 0.6875rem; color: var(--muted); white-space: nowrap; }
.hub-mk.active { background: var(--text); color: var(--surface); }
.hub-mk.active small { color: inherit; opacity: 0.75; }
a.hub-mk:hover, a.hub-mk:focus-visible { background: var(--surface2); }
.hub-mk-dot { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--green); margin-right: 0.3rem; vertical-align: middle; }
.hub-tl { list-style: none; margin: 0; padding: 0; display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 0.75rem; }
.hub-tl-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.6rem; border-left: 1px solid var(--border); color: var(--muted); }
.hub-tl-step:first-child { border-left: 0; }
.hub-tl-step b { color: var(--text); font-size: 0.75rem; }
.hub-tl-step.now { background: var(--warn-bg); box-shadow: inset 0 -3px 0 var(--warn-strong); }
.hub-tl-step.now b, .hub-tl-step.now small { color: var(--warn-strong); }
.sh-pipe.hub-pipe4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .hub-markets { width: 100%; }
  .hub-mk { flex: 1 1 50%; border-top: 1px solid var(--border); }
  .hub-tl { flex-direction: column; }
  .hub-tl-step { border-left: 0; border-top: 1px solid var(--border); }
  .hub-tl-step:first-child { border-top: 0; }
  .sh-pipe.hub-pipe4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Control plane (web/static/js/control.js): risk lights, Needs you, Order Log, timeline. */
.hub-control { display: flex; flex-direction: column; gap: 0.6rem; }
.cp-lights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 0.5rem; }
.cp-light { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.cp-light strong { font-size: 0.8125rem; }
.cp-l { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cp-h { display: block; font-size: 0.6875rem; color: var(--muted); }
.cp-light.ok { background: var(--green-bg); border-color: transparent; } .cp-light.ok strong { color: var(--green); }
.cp-light.warn { background: var(--warn-bg); border-color: transparent; } .cp-light.warn strong { color: var(--warn-strong); }
.cp-light.bad { background: var(--red-bg); border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); } .cp-light.bad strong { color: var(--red); }
.cp-verdict { display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.5rem 0.8rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.cp-verdict span { font-size: 0.6875rem; color: var(--muted); }
.cp-verdict.bad { background: var(--text); color: var(--surface); border-color: var(--text); } .cp-verdict.bad span { color: inherit; opacity: 0.8; }
.cp-verdict.ok strong { color: var(--green); }
.cp-needs { border: 1px solid var(--red); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cp-needs header { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; padding: 0.5rem 0.8rem; background: var(--red-bg); color: var(--red); font-weight: 700; font-size: 0.8125rem; }
.cp-needs header span { font-weight: 500; font-size: 0.75rem; }
.cp-needs ul { list-style: none; margin: 0; padding: 0; }
.cp-need { display: grid; grid-template-columns: 1.4rem minmax(9rem, auto) 1fr auto; gap: 0.6rem; align-items: center; padding: 0.5rem 0.8rem; border-top: 1px solid var(--border); font-size: 0.8125rem; }
.cp-need-ic { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.6875rem; font-weight: 700; background: var(--warn-strong); }
.cp-need.bad .cp-need-ic { background: var(--red); }
.cp-need-d { color: var(--muted); min-width: 0; }
.cp-chip { display: inline-block; font-size: 0.6875rem; font-weight: 700; border-radius: 10px; padding: 0.05rem 0.5rem; background: var(--surface2); color: var(--muted); }
.cp-chip.ok { background: var(--green-bg); color: var(--green); } .cp-chip.bad { background: var(--red-bg); color: var(--red); }
.cp-chip.warn { background: var(--warn-bg); color: var(--warn-strong); } .cp-chip.info { background: rgba(36, 84, 224, 0.08); color: var(--accent); }
.cp-page { display: flex; flex-direction: column; gap: 0.75rem; }
.cp-page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; } .cp-page-head h2 { margin: 0; }
.cp-fold summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; padding: 0.4rem 0; }
.cp-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; align-self: flex-start; }
.cp-seg-b { font: inherit; font-size: 0.75rem; padding: 0.3rem 0.75rem; border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; }
.cp-seg-b:first-child { border-left: 0; } .cp-seg-b.on { background: var(--text); color: var(--surface); }
.cp-table-wrap { overflow-x: auto; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.cp-table th { text-align: left; font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 0.3rem 0.4rem; }
.cp-table td { padding: 0.45rem 0.4rem; border-top: 1px solid var(--border); vertical-align: top; }
.cp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-table tbody tr[data-cp-order] { cursor: pointer; } .cp-table tbody tr[data-cp-order]:hover, .cp-table tbody tr[data-cp-order]:focus-visible { background: var(--surface2); }
.cp-why { color: var(--muted); } .cp-diff td { background: var(--warn-bg); }
.cp-dialog { width: min(34rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; background: var(--surface); color: var(--text); }
.cp-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.cp-close { float: right; font: inherit; border: 0; background: none; cursor: pointer; color: var(--muted); }
.cp-tl-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .cp-tl-head h3 { margin: 0; font-size: 1rem; }
.cp-tl { list-style: none; margin: 0.75rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cp-tl li { display: grid; grid-template-columns: 4.5rem 0.8rem 1fr; gap: 0.6rem; align-items: start; font-size: 0.8125rem; }
.cp-t { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.75rem; }
.cp-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-top: 0.2rem; background: var(--muted); }
.cp-tl li.ok .cp-dot { background: var(--green); } .cp-tl li.bad .cp-dot { background: var(--red); } .cp-tl li.warn .cp-dot { background: var(--warn-strong); } .cp-tl li.info .cp-dot { background: var(--accent); }
@media (max-width: 900px) { .cp-lights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-verdict { grid-column: 1 / -1; order: -1; } }
@media (max-width: 640px) { .cp-need { grid-template-columns: 1.4rem 1fr; } .cp-need .cp-need-d, .cp-need .sh-act, .cp-need .cp-need-acts { grid-column: 2; } }
.cp-need-acts { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.cp-halt-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin-top: 0.6rem; font-size: 0.75rem; }
.cp-halt-form label { display: flex; flex-direction: column; gap: 0.15rem; color: var(--muted); }
.cp-halt-form input, .cp-halt-form select { font: inherit; font-size: 0.8125rem; padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.cp-halt-form .cp-grow { flex: 1 1 14rem; } .cp-halt-form .cp-grow input { width: 100%; box-sizing: border-box; }
.cp-ladder { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.4rem; }
.cp-rung { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.75rem; color: var(--muted); }
.cp-rung strong { font-size: 0.8125rem; color: var(--muted); }
.cp-rung.done { background: var(--green-bg); border-color: transparent; } .cp-rung.done strong { color: var(--green); }
.cp-rung.now { background: var(--warn-bg); border-color: var(--warn-strong); box-shadow: inset 0 -3px 0 var(--warn-strong); } .cp-rung.now strong { color: var(--warn-strong); }

/* ==== Mobile + consistency layer (0.4.8) ====================================
   One place for the rules every page shares, appended last so it only fills
   gaps: most selectors use :where() (zero specificity), so any component
   rule above still wins. Fixes found on phones: text cut off by nowrap /
   ellipsis, tables clipped by body { overflow-x: hidden } because ~30 tables
   had no scroll wrapper, iOS zooming into small inputs. */
:root {
  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  /* Radii: --radius (10px) stays the card radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  /* Type scale: fluid between phone and desktop */
  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  --fs-xl: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
  --fs-2xl: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  /* Tables */
  --th-bg: var(--surface2);
  --row-alt: color-mix(in srgb, var(--surface2) 50%, var(--surface));
  --border-strong: color-mix(in srgb, var(--border) 75%, var(--muted));
  --lh-tight: 1.2;
  --lh-heading: 1.25;
  --cell-pad-y: var(--sp-2);
  --cell-pad-x: var(--sp-2);
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
  --motion-fast: 0.15s ease;
  /* Controls: one height for inputs, selects and buttons in a row; 44 px
     minimum touch target on phones (WCAG 2.5.5). */
  --control-h: 2.5rem;
  --control-h-sm: 2rem;
  --tap-min: 2.75rem;
  /* Breakpoints (media queries cannot read custom properties; reference
     only): phone <= 720px, tablet <= 960px, compact header <= 860px. */
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Long words wrap instead of running out of their box (does not change a
   table's minimum width, so numbers never split). */
body {
  overflow-wrap: break-word;
}

:where(img, video, canvas) {
  max-width: 100%;
}

:where(img) {
  height: auto;
}

/* Grid / flex children may shrink below their content width. */
:where(.card, section, article, .hub-block, .home-section) {
  min-width: 0;
}

/* Headings: one fluid hierarchy for pages without their own heading rule. */
:where(h1, h2, h3, h4) {
  line-height: var(--lh-heading);
  overflow-wrap: break-word;
}
:where(h1) { font-size: var(--fs-2xl); }
:where(h2) { font-size: var(--fs-xl); }
:where(h3) { font-size: var(--fs-lg); }
:where(h4) { font-size: var(--fs-md); }

/* Tables: one look everywhere. Highlighted header, zebra rows, tabular
   numbers. Row-state colours (.row-bull {
  font-variant-numeric: tabular-nums;
}
:where(thead th) {
  background: var(--th-bg);
  vertical-align: bottom;
}
/* Header distinction: stronger rule under the header row (0,0,2 beats the
   base `th` border; component table rules still win). */
thead th {
  border-bottom-color: var(--border-strong);
}
:where(tbody tr:nth-child(even) > td, tbody tr:nth-child(even) > th) {
  background: var(--row-alt);
}
:where(td code, td pre) {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Sectoral / stock heatmap tiles: show the whole index name. Ellipsis made
   "NIFTY FINANCIAL …" appear twice with no way to tell them apart on a phone. */
.bfast-heat-tile .bfast-tile-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.bfast-heat-tile {
  border-radius: var(--radius-md);
  transition: box-shadow var(--motion-fast), filter var(--motion-fast);
}
.bfast-heat-tile:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
@media (hover: hover) {
  button.bfast-heat-tile:hover {
    filter: brightness(0.96);
  }
}
button.bfast-heat-tile:active {
  filter: brightness(0.92);
}
.bfast-heat-tile .bfast-tile-row {
  flex-wrap: wrap;
  row-gap: 0;
  margin-top: auto;
}

@media (max-width: 720px) {
  /* Every table scrolls inside its own box: the page never scrolls sideways
     and nothing is clipped. Covers tables with no wrapper of their own. */
  div:has(> table),
  section:has(> table),
  article:has(> table),
  form:has(> table),
  details:has(> table),
  li:has(> table),
  td:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }

  th,
  td {
    padding: var(--cell-pad-y) var(--cell-pad-x);
  }

  :where(table) {
    font-size: var(--fs-sm);
  }

  /* The table scrolls now, so code / JSON cells keep a readable width. */
  :where(td:has(> code), td:has(> pre)) {
    min-width: calc(var(--sp-6) * 7);
  }

  /* Wrapping toolbars instead of overflowing rows. */
  :where(.picks-header, .section-toolbar, .hub-top, .pf-head, .hs-head) {
    flex-wrap: wrap;
  }

  .bfast-heat-tile .bfast-tile-last {
    font-size: var(--fs-md);
  }
}

/* iOS zooms into any input under 16px and leaves the page zoomed. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      font-size: 1rem !important; /* 16px: iOS zoom threshold */
    }
  }
}

/* ---- R&D Idea2Live (features/rnd-idea2live.js) — tokens only ---- */
.i2l-intake { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.i2l-intake-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 2fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto; gap: var(--sp-2); align-items: end; }
.i2l-fld { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.i2l-fld input, .i2l-fld select, .i2l-detail textarea, .i2l-paste textarea { font: inherit; font-size: var(--fs-sm); font-weight: 400; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-2); width: 100%; }
.i2l-detail textarea { font-family: var(--font-num); font-size: var(--fs-xs); }
.i2l-check { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); }
.i2l-needs { margin-bottom: var(--sp-3); }
.i2l-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.i2l-list tbody tr { cursor: pointer; }
.i2l-list tbody tr.active td { background: var(--surface2); }
.i2l-list tbody tr.active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.i2l-fld[hidden] { display: none; }
.i2l-list .pill, .i2l-rank .pill { white-space: nowrap; }
.i2l-list tbody tr:focus-visible, .i2l-rank tbody tr:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }
.i2l-rank tbody tr { cursor: pointer; }
.i2l-detail { display: flex; flex-direction: column; gap: var(--sp-3); }
.i2l-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
.i2l-head h3 { margin: 0; }
.i2l-lanes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--sp-1); }
.i2l-lane { padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--fs-xs); text-align: center; color: var(--muted); }
.i2l-lane.done { background: var(--green-bg); border-color: transparent; color: var(--green-strong); }
.i2l-lane.now { background: var(--warn-bg); border-color: var(--warn-strong); color: var(--warn-strong); box-shadow: inset 0 -3px 0 var(--warn-strong); }
.i2l-lane.err { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.i2l-meter, .i2l-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-2); }
.i2l-meter > div, .i2l-kpis > div { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface2); font-size: var(--fs-xs); color: var(--muted); }
.i2l-meter strong, .i2l-kpis strong { font-family: var(--font-num); font-size: var(--fs-md); color: var(--text); }
.i2l-bar { display: block; height: var(--sp-1); border-radius: var(--radius-pill); background: var(--surface3); overflow: hidden; }
.i2l-bar b { display: block; height: 100%; background: var(--accent); }
.i2l-gate { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface2); }
.i2l-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.i2l-q { display: block; font-style: italic; color: var(--text); border-left: 3px solid var(--accent); padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1); background: var(--surface2); border-radius: var(--radius-sm); }
.i2l-q em { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.i2l-q.none { border-left-color: var(--warn-strong); color: var(--warn-strong); font-style: normal; }
.i2l-edit summary, .i2l-prompts summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.i2l-edit form { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.i2l-difflist { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-xs); }
.i2l-difflist del { color: var(--red); } .i2l-difflist ins { color: var(--green); text-decoration: none; }
.i2l-errs { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
.i2l-transcript { list-style: none; margin: 0; padding: 0; max-height: 28rem; overflow: auto; font-size: var(--fs-sm); }
.i2l-transcript li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); }
.i2l-transcript em { font-family: var(--font-num); font-style: normal; color: var(--muted); font-size: var(--fs-xs); }
.i2l-paste { display: flex; flex-direction: column; gap: var(--sp-2); }
.i2l-settings { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 46rem; }
.i2l-prompts pre { white-space: pre-wrap; font-size: var(--fs-xs); background: var(--surface2); padding: var(--sp-2); border-radius: var(--radius-sm); max-height: 20rem; overflow: auto; }
.i2l-versions { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-sm); }
@media (max-width: 960px) {
  .i2l-intake-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .i2l-intake-row .i2l-wide { grid-column: 1 / -1; }
  .i2l-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .i2l-intake-row { grid-template-columns: minmax(0, 1fr); }
  .i2l-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.i2l-have summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent); }
.i2l-tr { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.i2l-tr textarea { font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-2); width: 100%; }
.i2l-file { cursor: pointer; }
/* Idea2Live: 8-section analysis, claim checks, signal decisions, hub card (tokens only) */
.i2l-sections { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.i2l-sections h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
.i2l-points { margin: 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); line-height: var(--lh-tight); }
.i2l-points .pill { vertical-align: baseline; }
.i2l-qs { margin-top: var(--sp-1); }
.i2l-claim { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.i2l-claim input { flex: 1 1 calc(var(--sp-6) * 4); min-width: 0; }
.i2l-sigacts { margin-top: var(--sp-1); }
.i2l-manual summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.i2l-manual { margin-top: var(--sp-3); }
.i2l-hubcard h3 { margin: 0 0 var(--sp-1); }
/* Architecture blueprints (Knowledge Repo › Architecture): drawn from the same definition as the Mermaid code; tokens only */
.bp-group { display: flex; flex-direction: column; gap: var(--sp-3); }
.bp-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.bp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bp-svg { display: block; max-width: 100%; height: auto; margin: 0 auto; font-family: inherit; }
@media (max-width: 720px) { .bp-svg { max-width: none; width: calc(var(--sp-6) * 22); } }
.bp-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.bp-code summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.bp-code pre { overflow-x: auto; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2); font-family: var(--font-num); font-size: var(--fs-xs); }
.i2l-manual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-6) * 12)), 1fr)); gap: var(--sp-3); }
.i2l-tr strong { font-size: var(--fs-sm); }
.i2l-intake-row .i2l-fld input, .i2l-intake-row .i2l-fld select { height: var(--control-h); padding-block: 0; }
.i2l-intake-row > .pf-btn { height: var(--control-h); }
.i2l-empty ol { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); line-height: var(--lh-tight); }

/* Idea2Live intake feedback, rank groups (tokens only) */
.i2l-opt { font-style: normal; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.i2l-start-msg { margin: var(--sp-1) 0 0; min-height: var(--sp-4); font-size: var(--fs-sm); color: var(--accent); }
.i2l-start-msg.bad, [data-i2l-dmsg].bad { color: var(--red); font-weight: 600; }
.i2l-srcnote { margin: var(--sp-1) 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--warn-strong); background: var(--warn-bg); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.i2l-rank .i2l-grp th { text-align: left; background: var(--surface2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.i2l-rank tr.i2l-bt td { color: var(--muted); }
.i2l-rank tr.i2l-bt td strong { color: var(--text); }
.i2l-today { max-width: calc(var(--sp-6) * 8); white-space: normal; font-size: var(--fs-xs); }
.i2l-waiting { margin-top: var(--sp-3); }
.i2l-waiting ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-1); }

/* Idea2Live Monitor tab (plan §9; tokens only) */
.i2l-mbar { flex-direction: row; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.i2l-dot { display: inline-block; width: var(--sp-2); height: var(--sp-2); border-radius: var(--radius-pill); background: var(--muted); margin-right: var(--sp-1); }
.i2l-dot.on { background: var(--green-strong); }
.i2l-grow { flex: 1 1 auto; }
.i2l-mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--sp-6) * 7.5)), 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.i2l-mcard { display: flex; flex-direction: column; gap: var(--sp-2); text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); cursor: pointer; min-width: 0; }
.i2l-mcard.sel { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.i2l-mcard.dim { opacity: .65; cursor: default; }
.i2l-mcard:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.i2l-mcard .pill { white-space: normal; }
.i2l-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.i2l-mrow h3 { margin: 0; font-size: var(--fs-lg); }
.i2l-mnums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); }
.i2l-mnums > span { display: flex; flex-direction: column; background: var(--surface2); border-radius: var(--radius-md); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.i2l-mnums b { font-size: var(--fs-lg); color: var(--text); font-family: var(--font-num); }
.i2l-mnums .ex b { color: var(--green-strong); }
.i2l-mnums .wa b { color: var(--warn-strong); }
.i2l-mmain { display: flex; flex-direction: column; gap: var(--sp-3); }
.i2l-mini-gap { display: inline-block; margin-left: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--warn-strong); font-family: var(--font-num); }
.i2l-rr-select { font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 600; }
.i2l-mmain > .card { min-width: 0; }
.i2l-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1); font-size: var(--fs-sm); margin: var(--sp-2) 0; }
.i2l-legend span { background: var(--surface2); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2); }
.i2l-legend b { margin-right: var(--sp-1); font-family: var(--font-num); }
.i2l-monitor-scroll { margin-top: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.i2l-monitor-table { min-width: 62rem; table-layout: auto; }
.i2l-monitor-table th { padding: var(--sp-2) var(--sp-3); white-space: nowrap; background: var(--surface2); border-bottom: 1px solid var(--border); }
.i2l-monitor-table td { padding: var(--sp-2) var(--sp-3); vertical-align: middle; }
.i2l-monitor-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface2) 48%, transparent); }
.i2l-monitor-table tbody tr:hover { background: var(--surface2); }
.i2l-monitor-table td:first-child { font-weight: 650; white-space: nowrap; }
.i2l-monitor-table td:nth-child(2), .i2l-monitor-table td:nth-last-child(2) { white-space: nowrap; }
.i2l-monitor-table .i2l-ok { color: var(--green-strong); font-weight: 700; }
.i2l-monitor-table .i2l-no { color: var(--red); font-weight: 700; }
.i2l-monitor-table .i2l-acts { min-width: 11rem; }
.i2l-monitor-table .i2l-acts .pf-btn { margin: 0 var(--sp-1) var(--sp-1) 0; }
.i2l-lr, .i2l-gap { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); white-space: nowrap; font-family: var(--font-num); }
.i2l-gap { color: var(--warn-strong); font-weight: 600; }
.i2l-msearch { height: var(--control-h-sm); width: calc(var(--sp-6) * 4); }
.i2l-mlog h3 { margin: 0; font-size: var(--fs-lg); }
.i2l-mlog ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.i2l-mlog li { display: grid; grid-template-columns: calc(var(--sp-6) * 1.5) minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.i2l-mlog li .note { display: block; }
.i2l-mlog time { color: var(--muted); font-family: var(--font-num); }
@media (max-width: 900px) { .i2l-mmain { grid-template-columns: minmax(0, 1fr); } }
.i2l-q.mine { border-left-style: dashed; border-left-color: var(--warn-strong); background: var(--warn-bg); }
.i2l-q.mine em { color: var(--warn-strong); }

/* ==== App shell on phones (UI standards 2026-10-02) ============================
   Found by scripts/ui_mobile_audit.py at 390 px: the header grid kept three
   columns (flex-direction had no effect on display:grid), so the market strip
   and actions ran 120 px past the screen on every page; the sidebar stacked
   ~60 links above every page. */
.sidebar-toggle-label { display: none; }
@media (max-width: 960px) {
  .app-sidebar { padding: var(--sp-2); gap: 0; }
  .app-sidebar .sidebar-toggle { align-self: stretch; display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); padding: 0 var(--sp-3); font-size: var(--fs-md); font-weight: 600; color: var(--text); }
  .app-sidebar .sidebar-toggle-icon { transform: rotate(-90deg); transition: transform var(--motion-fast); }
  .app-sidebar.m-open .sidebar-toggle-icon { transform: rotate(90deg); }
  .sidebar-toggle-label { display: inline; }
  .app-sidebar:not(.m-open) > :not(.sidebar-toggle) { display: none; }
  /* The desktop icon rail does not apply to the drawer. */
  .app-sidebar.collapsed { align-items: stretch; }
  .app-sidebar.collapsed .sidebar-heading, .app-sidebar.collapsed .sidebar-link-label { display: revert; }
  .app-sidebar.collapsed .sidebar-link { justify-content: flex-start; width: 100%; }
  .app-sidebar .sidebar-link { min-height: var(--tap-min); }
}
@media (max-width: 720px) {
  .app-header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand actions" "market market";
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }
  .header-brand { grid-area: brand; }
  .header-market { grid-area: market; }
  .header-actions { grid-area: actions; width: auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-1) var(--sp-2); }
  .data-refresh-label { display: none; }
  /* Dropdown inside a <details>: in the flow on phones, never past the edge. */
}
/* Nothing a trader reads is cut off, at any width: index names, changes and
   sector names wrap instead of ending in "…" (audit 2026-10-02: "-198.50
   -0.8…", "NIFTY PRIVATE B…", even "Brent" at 1280 px). */
.ov-chg, .ov-name, .bfast-sector-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  /* Touch targets: at least 32 px tall on phones (WCAG 2.5.8 asks 24; 44 for
     primary actions via --tap-min). Zero specificity: a component that sets
     its own min-height still wins. */
  :where(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), [role="tab"]) { min-height: var(--control-h-sm); }
  :where(.pf-btn.primary, .sidebar-link, .hub-tab) { min-height: var(--tap-min); }
  .section-toolbar-btn, .data-chip, .data-refresh, .kill-switch, .profile-menu-toggle, .btn-view-all, .cp-seg-b, .admin-tab { min-height: var(--control-h-sm); }
}

/* ==== UI standard primitives (skill: .claude/skills/air-ui-standards) ========
   .table-scroll  wide table scrolls inside its card; edge fade hints there is more
   .table-stack   on phones each row becomes a labelled card (td[data-label])
   .text-block    readable prose: measure, wrapping, rhythm */
.table-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-scroll > table { min-width: 100%; }
@media (max-width: 720px) {
  table.table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; width: 100%; }
  table.table-stack tr { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
  table.table-stack tbody tr:nth-child(even) > td { background: transparent; }
  table.table-stack td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); border: 0; padding: var(--sp-1) 0; text-align: right; }
  table.table-stack td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
  table.table-stack td[data-label=""]::before, table.table-stack td:not([data-label])::before { content: none; }
}

/* Universal responsive table utility and word-wrap prevention */
.responsive-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.responsive-table-wrapper th,
.responsive-table-wrapper td,
.table-scroll th,
.table-scroll td,
.sp-table th,
.sp-table td {
  white-space: nowrap;
}
.pill,
.badge,
.m-session-chip,
.sp-chip,
.hp-chip,
.status-pill,
.symbol-copy {
  white-space: nowrap;
  word-break: keep-all;
}
.text-block { max-width: 72ch; overflow-wrap: break-word; line-height: 1.55; font-size: var(--fs-md); }
.text-block > * + * { margin-top: var(--sp-3); }
.text-block :where(code, a) { overflow-wrap: anywhere; }
.i2l-provider { display: flex; flex-direction: column; gap: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3); margin: 0; min-width: 0; }
.i2l-provider legend { font-size: var(--fs-sm); font-weight: 600; padding: 0 var(--sp-1); }
/* Idea2Live rule builder + pattern drafts (plan §10) */
.i2l-h { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); font-weight: 600; }
.i2l-pats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-2); }
.i2l-pat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.i2l-pat-rules { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: var(--sp-1); }
.i2l-pat-rules code { overflow-wrap: anywhere; }
.i2l-bld { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.i2l-bld-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--sp-2); align-items: end; }
.i2l-bld input, .i2l-bld select { font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: var(--control-h-sm); padding: 0 var(--sp-1); min-width: 0; }
.i2l-bld textarea { font: inherit; font-size: var(--fs-sm); }
.i2l-opnd { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.i2l-opnd select { flex: 1 1 120px; }
.i2l-opnd label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--muted); flex: 0 0 auto; }
.i2l-opnd input { width: 4.5em; }
.i2l-bld-rules td { vertical-align: top; }
.i2l-bld-rules input[name="text"] { width: 100%; min-width: 10em; }
.i2l-bld-rules input[name="quotes"] { width: 6em; }
.i2l-preview { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--surface2); font-size: var(--fs-sm); line-height: 1.5; }
.i2l-keys, .i2l-universe { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.i2l-universe { margin-bottom: var(--sp-3); }
.i2l-keys textarea { width: 100%; font-family: var(--font-num); font-size: var(--fs-sm); }
.i2l-bld-rules td[data-label="Type"] select { display: block; width: 100%; }
.i2l-bld-rules td[data-label="Type"] select + select { margin-top: var(--sp-1); }
tr.i2l-base td { background: var(--accent-soft); }
/* Idea2Live › Manage. Form rules from Learn N Grow: labels stay on one line, a short hint sits under the input, * marks required. */
.i2l-mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-3); align-items: start; margin-top: var(--sp-2); }
.i2l-mform { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.i2l-frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--sp-2); align-items: start; }
.i2l-f { min-width: 0; }
.i2l-flabel { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i2l-req { color: var(--red); margin-left: 2px; }
.i2l-hint { display: block; min-width: 0; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i2l-manage .i2l-acts .note.bad, .i2l-mform .note.bad { color: var(--red); }
@media (max-width: 640px) {
  .i2l-opnd label { flex: 1 1 calc(25% - var(--sp-1)); }
  .i2l-opnd input { width: 100%; }
  .i2l-bld-rules input[name="quotes"], .i2l-bld-rules input[name="text"] { width: 100%; }
}

/* Form standard (web/static/js/form-standard.js, owner feedback 2026-10-04): labels on one line,
   extra words behind an i tip that opens as a popover (no layout shift), red * on required fields. */
label[data-fs] { min-width: 0; } /* in a flex row the one-line label shrinks (ellipsis + tooltip) instead of pushing its input out */
.fs-head { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; max-width: 100%; vertical-align: bottom; }
.fs-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-req { color: var(--red); font-weight: 700; }
.fs-tip { flex: none; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface2); color: var(--muted); font: italic 700 var(--fs-xs) / 1 var(--font-ui); cursor: pointer; }
.fs-tip:hover, .fs-tip[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.fs-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-tipbox { position: absolute; top: calc(100% + var(--sp-1)); left: 0; z-index: 40; width: max-content; max-width: min(22rem, calc(100vw - 2rem)); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); color: var(--text); font-size: var(--fs-sm); font-weight: 400; font-style: normal; line-height: 1.45; white-space: normal; text-transform: none; letter-spacing: normal; }
.fs-tipbox[hidden] { display: none; }

/* Idea2Live Enhancements: Delete Button, 5k R:R Compounding, AI Provider Keys, Architecture Tenets */
.i2l-top-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.i2l-top-bar-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.i2l-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.i2l-head-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.i2l-auto-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); background: color-mix(in srgb, var(--surface2) 65%, transparent); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--fs-xs); align-items: center; }
.i2l-auto-opt { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px 8px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-weight: 550; color: var(--text); }
.i2l-auto-opt b { color: var(--green-strong); font-weight: 700; }

.i2l-compound-card { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); display: flex; flex-direction: column; gap: var(--sp-3); }
.i2l-compound-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2); }
.i2l-compound-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 650; }
.i2l-compound-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--sp-2); }
.i2l-compound-kpi { padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); display: flex; flex-direction: column; gap: 3px; }
.i2l-compound-kpi span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.i2l-compound-kpi strong { font-size: var(--fs-md); font-family: var(--font-num); font-weight: 650; color: var(--text); }
.i2l-compound-kpi strong.pos { color: var(--green-strong); }
.i2l-compound-kpi strong.neg { color: var(--red); }
.i2l-compound-insights { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-left: 3px solid var(--accent); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }
.i2l-compound-insights ul { margin: 0; padding-left: var(--sp-3); display: flex; flex-direction: column; gap: 4px; }

.i2l-modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: var(--scrim); backdrop-filter: var(--glass-blur); display: flex; align-items: center; justify-content: center; padding: var(--sp-3); animation: i2lFadeIn 0.15s ease-out; }
.i2l-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.i2l-modal-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2); }
.i2l-modal-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 650; }
.i2l-modal-close { background: none; border: none; font-size: var(--fs-lg); cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: var(--radius-sm); }
.i2l-modal-close:hover { color: var(--text); background: var(--surface2); }
.i2l-modal-body { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); }
.i2l-modal-acts { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-2); }

.i2l-provider-card { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface2); display: flex; flex-direction: column; gap: var(--sp-2); }
.i2l-provider-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.i2l-provider-input-row { display: flex; gap: var(--sp-2); align-items: center; }
.i2l-provider-input-row input { flex: 1; min-width: 0; font-family: var(--font-num); font-size: var(--fs-sm); padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.i2l-tenet-item { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); display: flex; flex-direction: column; gap: 3px; }
.i2l-tenet-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: var(--fs-sm); }

.i2l-rank-compare { display: flex; flex-direction: column; gap: var(--sp-2); }
.i2l-rank-sort { all: unset; display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--sp-1); cursor: pointer; font: inherit; color: inherit; }
.i2l-rank-sort:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.i2l-rank tfoot td { border-top: 2px solid var(--border-strong); font-weight: 600; background: var(--surface2); }
.i2l-rank-scroll { max-height: min(70vh, 680px); overflow: auto; }
.i2l-rank-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--th-bg); }
.i2l-rank-sort { all: unset; display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--sp-1); cursor: pointer; font: inherit; color: inherit; }
.i2l-rank-sort:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.i2l-rank tfoot td { border-top: 2px solid var(--border-strong); font-weight: 600; background: var(--surface2); }
.i2l-rank-scroll { max-height: min(70vh, 680px); overflow: auto; }
.i2l-rank-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--th-bg); }
.i2l-rank-compare-table tbody tr { cursor: pointer; transition: background 0.12s ease; }
.i2l-rank-compare-table tbody tr:hover td { background: var(--surface2); }
.i2l-rank-compare-table tbody tr:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset)); }
.i2l-central-pools-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.i2l-pool-group { background: var(--surface); border-radius: var(--radius-md); }
.i2l-pool-chip { transition: border-color 0.15s ease; }
.i2l-pool-chip:hover { border-color: var(--accent); }
.i2l-pool-table td, .i2l-pool-table th { vertical-align: middle; }
.i2l-pool-add input, .i2l-pool-add textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }

@keyframes i2lFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- REQ-004 (0.4.13) Data table standard: one look for Intraday, Swing
   and F&O tables. Builds on .cp-table / .table-scroll / .pill (no Tailwind).
   Low-specificity :where() so row-state colours (.row-bull, .table-wrap, .cp-table-wrap) > table:not(.table-stack) thead th {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-table.sticky-first td,
.data-table.sh-matrix td { vertical-align: middle; }

/* Pinned key column (Symbol / Strategy) while the rest scrolls sideways.
   Phones and tablets only: on a desktop the table usually fits. */
@media (max-width: 960px) {
  :where(.table-scroll, .table-wrap, .cp-table-wrap) > table:not(.table-stack):not(.no-sticky) > :is(thead, tbody) > tr > :first-child:not([colspan]) {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: inset -1px 0 0 var(--border-strong);
  }
  :where(.table-scroll, .table-wrap, .cp-table-wrap) > table:not(.table-stack):not(.no-sticky) > tbody > tr > td:first-child:not([colspan]) {
    background: var(--surface);
  }
  :where(.table-scroll, .table-wrap, .cp-table-wrap) > table:not(.table-stack):not(.no-sticky) > tbody > tr:nth-child(even) > td:first-child:not([colspan]) {
    background: var(--row-alt);
  }
  :where(.table-scroll, .table-wrap, .cp-table-wrap) > table:not(.table-stack):not(.no-sticky) > thead > tr > th:first-child {
    z-index: 2;
    background: var(--th-bg);
  }
}

/* 48 px rows where fingers do the tapping (WCAG 2.5.5 + REQ-004). */
@media (pointer: coarse) {
  :where(.table-scroll, .table-wrap, .cp-table-wrap) > table:not(.table-stack) > tbody > tr > td {
    height: calc(var(--tap-min) + var(--sp-1));
  }
}

/* Rupee and P&L cells: tabular numbers that never split. */
.inr { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Filter bars: one row of pills that scrolls sideways on phones instead of
   wrapping into a multi-line grid (F&O Tracker, 1MT, Swing verdict filter). */
@media (max-width: 720px) {
  .sh-seg:not(.sm), .pill-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    max-width: 100%;
    scrollbar-width: thin;
  }
  .sh-seg:not(.sm) > button, .pill-scroll > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .sh-seg:not(.sm) > button { min-height: var(--control-h-sm); }
}
.pill-scroll { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* ---- Swing hub: shared Add box (REQ-002) and ChartInk webhook line (BUG-003) ---- */
.sh-universe .sh-presets { margin: var(--sp-2) 0; }
.sh-preset {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-3);
  min-height: var(--control-h-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.sh-preset[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.sh-preset:disabled { opacity: 0.6; cursor: progress; }
.sh-preset:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (hover: hover) { .sh-preset:hover:not(:disabled) { border-color: var(--accent); } }
.sh-targets { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0; padding: 0; border: 0; min-width: 0; }
.sh-targets legend { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: var(--sp-1); }
.sh-targets label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); min-height: var(--control-h-sm); }
.sh-per { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }
.sh-per li { overflow-wrap: anywhere; }
.sh-matrix .sh-v { white-space: nowrap; }
.sh-matrix .sh-cell-score { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted); margin-left: var(--sp-1); }
.sh-hook {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface2);
  font-size: var(--fs-sm);
}
.sh-hook code { font-family: var(--font-num); overflow-wrap: anywhere; min-width: 0; }
.sh-hook.warn { border-color: var(--warn); background: var(--warn-bg); }
.sh-hook .sh-auto { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: auto; }

/* A scroller is the containing block for anything absolute inside it (an
   .sr-only header label escaped .table-scroll and widened the Swing page to
   756 px at 390). */
:where(.table-scroll, .table-wrap, .cp-table-wrap) { position: relative; }

/* Swing stock list and matrix: symbols, verdicts and prices never split
   ("ADANIGRE EN", "412.4 / 0" at every width); the rules column wraps and
   the table scrolls on phones instead. */
:is(.sh-list, .sh-matrix) td > strong,
:is(.sh-list, .sh-matrix) .sh-v,
:is(.sh-list, .sh-matrix) .num { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 720px) {
  .sh-list .sh-why { min-width: calc(var(--sp-6) * 7); }
}

/* The Market header's CSV links: the phone rule above is overridden by the
   later nowrap base rule (same specificity), so the "NSE 500 list (CSV) ·
   updated …" pill pushed #/home, #/market and #/breadth to 478 px at 390. */
@media (max-width: 720px) {
  .omr-head-meta a.omr-fno-csv,
  .omr-head-meta a.omr-nifty500-csv {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
}

/* Admin › Brokers: ChartInk intake switch (0.4.13). */
.chartink-intake {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface2);
}
.chartink-intake .note { min-width: 0; overflow-wrap: anywhere; }
.chartink-intake button { min-height: var(--control-h-sm); }

/* Datatables: toolbar, search, limit segment, meta, and sortable headers across Swing, Intraday, and Idea2Live */
:is(.sh-table-toolbar, .dt-table-toolbar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
:is(.sh-table-meta, .dt-table-meta) {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}
:is(.sh-limit-seg, .dt-limit-seg) {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-1);
  background: var(--surface);
}
:is(.sh-limit-seg, .dt-limit-seg) .note {
  font-size: var(--fs-xs);
  padding: 0 var(--sp-1);
}
:is(.sh-limit-seg, .dt-limit-seg) button {
  border: 0;
  background: transparent;
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--radius-sm);
  min-height: var(--control-h-sm);
}
:is(.sh-limit-seg, .dt-limit-seg) button.on {
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
}
:is(.sh-search-wrap, .dt-search-wrap) {
  position: relative;
  display: inline-flex;
  align-items: center;
}
:is(.sh-search-input, .dt-search-input) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-xs);
  padding: 0 calc(var(--sp-4) * 1.2) 0 var(--sp-2);
  min-height: var(--control-h-sm);
  outline: none;
  width: 11rem;
}
:is(.sh-search-input, .dt-search-input):focus {
  border-color: var(--accent);
}
:is(.sh-search-clear, .dt-search-clear) {
  position: absolute;
  right: var(--sp-1);
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: var(--sp-1);
}
:is(.sh-search-clear, .dt-search-clear):hover {
  color: var(--text);
}
.sh-caret-th {
  width: 1.5rem;
}
:is(.sh-list, .sh-matrix, .data-table, .cp-table) th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
:is(.sh-list, .sh-matrix, .data-table, .cp-table) th.sortable:hover {
  color: var(--text);
  background: var(--surface2);
}
:is(.sh-list, .sh-matrix, .data-table, .cp-table) th.sort-active {
  color: var(--accent);
}
/* 0.4.14 M0: a sortable header is a real button (keyboard, aria-sort on the th). */
.th-sort {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
}
.th-sort:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ==== 0.4.14 M1: environment mode, session state, HALTED (V2.1 §12) ==========
   The badge, HALTED and the feed chip are never hidden, at any width. */
.env-mode,
#header-market,
.header-market {
  display: none !important;
}
.session-chip {
  display: inline-flex;
  flex-direction: column;
  line-height: var(--lh-tight);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.session-chip b { color: var(--text); font-weight: 600; white-space: nowrap; }
.session-chip span { font-family: var(--font-num); white-space: nowrap; }
.session-chip[data-state="ENTRY_WINDOW"] b { color: var(--green-strong); }
.session-chip[data-state="MANAGE_ONLY"] b, .session-chip[data-state="SQUARE_OFF"] b { color: var(--warn-strong); }
.halt-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-2) var(--sp-4) 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--critical);
  border-radius: var(--radius-md);
  background: var(--critical-bg);
  color: var(--critical);
  font-size: var(--fs-sm);
}
.halt-banner strong { letter-spacing: 0.06em; }
.halt-banner span { color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.halt-banner .note { color: var(--muted); }
.kill-switch { cursor: default; }
.profile-autoexec { flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.profile-autoexec .note { flex-basis: 100%; }
/* Control edges are visible (WCAG 1.4.11): inputs, selects and textareas use --border-control. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea {
  border-color: var(--border-control);
}
@media (max-width: 720px) {
  .session-chip span { display: none; }
  .env-mode { padding: var(--sp-1); }
}

/* SIMULATED mode: a watermark on data panels so synthetic data is never
   mistaken for live (V2.1 Part A §5). Only the local build is SIMULATED. */
body[data-env-mode="SIMULATED"] :is(.card, .int-kpi-card, .hub-stats, .table-scroll) {
  background-image: repeating-linear-gradient(-45deg, transparent 0 var(--sp-6), var(--info-bg) var(--sp-6) calc(var(--sp-6) + var(--sp-1)));
}

/* Portfolio: the other-currency equivalent under the investable value (2026-10-11). */
.pf-fx-sub { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }

/* 0.4.14 M5.1: step-up password dialog (web/static/js/stepup.js). */
.stepup-dialog { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--sp-5); background: var(--surface); color: var(--text); max-width: min(92vw, 420px); width: 100%; }
.stepup-dialog::backdrop { background: var(--scrim); }
.stepup-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.stepup-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 0.4.14 M6 Platform hub (web/static/js/features/platform.js). */
#platform-section .pf-kpis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin-bottom: var(--sp-3); }
.pf-list { margin: 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.pf-list li { overflow-wrap: anywhere; }

/* Home > Global trading sessions: scroll inside .table-scroll on phones instead of
   squeezing the headers letter by letter (seen at 390 px, 2026-10-11). */
.ov-sessions-table { min-width: calc(var(--sp-6) * 17.5); }
.ov-sessions-table th { white-space: nowrap; }

/* 0.4.14 Top-Down (TD8): the shared market table (web/static/js/market-table.js).
   Side = stripe + pill + word (never colour alone); Neutral rows muted. */
.mt-head, .mt-toolbar, .mt-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
/* Top-Down icon actions (owner 2026-10-17): square, pushed to the row's end. */
.td-ico-row { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
/* Top-Down 2026-10-29: a view-only timeframe is underlined dotted (no "·v" suffix) */
.td-view { text-decoration: underline dotted; text-underline-offset: 3px; }
/* Sector rotation panel: number cells hold numbers + one fixed-width marker, so rows line up */
.td-rot { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 100%; gap: var(--sp-2); margin: var(--sp-3) 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.td-rot > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); min-height: var(--control-h-sm); cursor: pointer; }
.td-rot-head { margin: 0; font-size: var(--fs-md); line-height: var(--lh-heading); max-width: 90ch; overflow-wrap: anywhere; }
.td-mk { display: inline-block; width: 1.4em; text-align: right; font-size: var(--fs-xs); }
.td-read { display: inline-block; min-width: 14rem; max-width: 40rem; white-space: normal; overflow-wrap: anywhere; }
/* Home performance fold (2026-10-29): closed = one line; open = the usual cards */
.ps-fold > summary { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-2); min-height: var(--control-h-sm); cursor: pointer; list-style: none; }
.ps-fold > summary::-webkit-details-marker { display: none; }
.ps-fold:not([open]) > summary { justify-content: space-between; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ps-fold-line { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ps-fold[open] .ps-fold-line, .ps-fold[open] .ps-fold-show, .ps-fold:not([open]) .ps-fold-hide { display: none; }
.pf-btn.td-ico { min-width: var(--control-h-sm); padding-inline: var(--sp-2); justify-content: center; font-size: var(--fs-md); text-decoration: none; }
.pf-btn.td-ico[aria-busy="true"] { opacity: 0.6; }
.td-ico .ico { display: block; }
.td-ico .ico-main { stroke: var(--accent); }
.td-ico .ico-tray { stroke: var(--muted); }
.td-ico .ico-fill { fill: var(--accent); }
@media (hover: hover) { .pf-btn.td-ico:hover .ico-main { stroke: var(--accent-hover); } .pf-btn.td-ico:hover .ico-fill { fill: var(--accent-hover); } }
.td-ico[aria-busy="true"] .ico-spin { animation: td-spin 0.9s linear infinite; }
@keyframes td-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .td-ico[aria-busy="true"] .ico-spin { animation: none; } }
@media (pointer: coarse) { .pf-btn.td-ico { min-width: var(--tap-min); min-height: var(--tap-min); } }
.mt-lab { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.mt-search input { height: var(--control-h-sm); min-width: 0; width: min(100%, calc(var(--sp-6) * 6)); }
.mt-table tr.mt-gainer td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.mt-table tr.mt-loser td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.mt-table tr.mt-neutral td:first-child { box-shadow: inset 3px 0 0 var(--border-strong); }
.mt-table tr.mt-neutral td { color: var(--muted); }
/* 0.4.14 Platform · Idea2Live: the shared data table on every list (gridHtml) */
.mt-grid { min-width: 0; }
.mt-table tr.mt-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.mt-table tr.mt-mute td:first-child { box-shadow: inset 3px 0 0 var(--border-strong); }
.mt-table tr.active td { background: var(--accent-soft); }
.sa-acts { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.mt-table .sa-acts { flex-wrap: nowrap; }
.sa-dialog { width: min(100% - var(--sp-5), calc(var(--sp-6) * 15)); border: 1px solid var(--border-strong); padding: var(--sp-4); }
.sa-dialog::backdrop { background: var(--scrim); }
.sa-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.sa-form h3 { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.pf-horizons { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-6) * 5)), 1fr)); }
/* Decision-first P&L summary (pnl-summary.js, UI skill §6b; owner brief 2026-10-18: quiet, one
   restrained selected period, the P&L dominant, indicators subordinate, no nested cards) */
.ps-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); }
.ps-status-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.ps-status-alert { border-bottom-color: var(--red); }
.ps-dot { color: var(--muted); }
.ps-mode { font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.06em; padding: 2px var(--sp-2); border-radius: var(--radius-pill); border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); }
.ps-mode-live { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.ps-section { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ps-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ps-row h3 { margin: 0; font-size: var(--fs-md); }
.ps-right, .ps-row .ps-tag { margin-left: auto; }
.ps-row .ps-tag + .ps-tag, .ps-row .ps-tag + .ps-right { margin-left: 0; }
.ps-tag { font-size: var(--fs-xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--radius-pill); background: var(--surface2); color: var(--muted); }
.ps-periods { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--radius-md); background: var(--surface2); }
.ps-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); flex: 3 1 calc(var(--sp-6) * 8); min-width: 0; }
.ps-fy { display: flex; flex: 1 1 calc(var(--sp-6) * 5); min-width: 0; }
.ps-fy select { width: 100%; min-height: var(--tap-min); padding: 0 var(--sp-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.ps-fy.on select { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 600; }
.ps-period { min-height: var(--tap-min); padding: var(--sp-1) var(--sp-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.ps-period[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 600; }
@media (hover: hover) { .ps-period:hover:not([aria-checked="true"]) { color: var(--text); } }
.ps-label { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.ps-big { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); font-weight: 600; white-space: nowrap; line-height: var(--lh-tight); }
.ps-meta { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.ps-exposure { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-6) * 5)), 1fr)); gap: var(--sp-2) var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.ps-exposure > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-exposure b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-md); }
.ps-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-6) * 5)), 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0; }
.ps-kv dt { font-size: var(--fs-xs); color: var(--muted); }
.ps-kv dd { margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-md); font-weight: 600; }
.ps-details { border-top: 1px solid var(--border); padding-top: var(--sp-2); }
.ps-details summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); cursor: pointer; font-size: var(--fs-sm); }
.ps-details summary b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ps-attention { border: 1px solid var(--red); background: var(--red-bg); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); }
.ps-attention h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.ps-attention ul { margin: 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); overflow-wrap: anywhere; }
.sa-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.mt-table th small, .mt-sub { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.mt-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.mt-ok { color: var(--green-strong); font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-no { color: var(--red); font-weight: 600; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.mt-pages { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.mt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--sp-6) * 6)), 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.mt-tile { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.mt-tile strong { font-size: var(--fs-lg); }
/* Performance (0.4.14 TD7, wireframe TDPerformance): Platform › Performance and Top-Down › Performance. */
.pf-perf-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
.pf-perf-field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
.pf-perf-field select { height: var(--control-h); min-width: calc(var(--sp-6) * 4); }
.pf-perf-asof { margin-left: auto; }
.pf-perf-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-6) * 14)), 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; align-items: start; }
.pf-perf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.pf-eq { width: 100%; height: auto; display: block; }
.pf-eq-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.pf-eq-dd { fill: var(--red-bg); }
.pf-perf-axis { display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.pf-chosen td { background: var(--green-bg); }
.pill.pf-pi { text-transform: none; } /* uppercase would turn π into Π */
/* Scanner (0.4.14, wireframe ScanA): grouped plain-condition filters, two tables. */
.sc-panel { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--sp-2); }
.sc-panel > * { width: 100%; }
.sc-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.sc-group { display: grid; grid-template-columns: minmax(0, calc(var(--sp-6) * 3.5)) minmax(0, 1fr); gap: var(--sp-2); align-items: center; justify-items: start; text-align: left; }
.sc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.sc-active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-2); }
.sc-drop { border: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); text-transform: none; }
.sc-saved select { height: var(--control-h-sm); max-width: calc(var(--sp-6) * 9); }
.sc-table { margin: var(--sp-3) 0; }
.sc-thead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.sc-thead h3 { margin: 0; }
.sc-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-6) * 10)), 1fr)); gap: var(--sp-3); }
.sc-panel-head .mt-fend, .sc-thead .mt-fend { flex-wrap: wrap; justify-content: flex-end; }
.sc-panel-head .pf-btn, .sc-thead .sh-seg button { white-space: nowrap; }
.sc-groups { display: flex; flex-direction: column; gap: var(--sp-2); }
.sc-groups > summary { display: none; }
@media (max-width: 720px) {
  .sc-group { grid-template-columns: minmax(0, 1fr); }
  .sc-panel-head .mt-fend { margin-left: 0; justify-content: flex-start; }
  .sc-saved { flex: 1 1 100%; min-width: 0; }
  .sc-saved select { width: 100%; max-width: 100%; }
  .sc-groups > summary { display: list-item; cursor: pointer; font-weight: 600; min-height: var(--tap-min); line-height: var(--tap-min); }
  .sc-groups:not([open]) > .sc-group { display: none; }
}
.pf-cap-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0; font-size: var(--fs-sm); }
.pf-cap-track { height: var(--sp-2); border-radius: var(--radius-pill); background: var(--surface2); overflow: hidden; }
.pf-cap-fill { display: block; height: 100%; background: var(--accent); }
.pf-cap-fill.idle { background: var(--muted); }
.pf-gloss { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-6) * 7)), 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.pf-gloss dt { font-weight: 600; }
.pf-gloss dd { margin: 0; color: var(--muted); }
/* 0.4.14 Top-Down: condition filter chips and the row-details panel. */
.mt-fchip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-pill); min-height: var(--control-h-sm); padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.mt-fchip.on { background: var(--accent); border-color: var(--accent); color: var(--on-strong); }
/* Filter bar (filter-UX standard 2026-10-17): separate group, clear status, stable layout. */
.mt-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); }
.mt-filterbar.active { border-color: var(--accent); }
.mt-fchip.on.ok { background: var(--green-bg); border-color: var(--green); color: var(--green-strong); }
.mt-fchip.on.no { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.mt-fcount { display: inline-block; min-width: 1.5em; padding: 0 var(--sp-1); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-strong); text-align: center; font-size: var(--fs-xs); }
.mt-fsep { width: 1px; align-self: stretch; background: var(--border-strong); }
.mt-fend { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.mt-detail td { background: var(--surface2); }
.mt-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--sp-6) * 9)), 1fr)); gap: var(--sp-3); }
.mt-detail-grid h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
.mt-conds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* 0.4.14 ISS-06: pin a page to my Home / customise my Home */
.pin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.pin-picker { margin: var(--sp-2) 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--sp-2) var(--sp-3); }
.pin-picker > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); min-height: var(--control-h-sm); display: flex; align-items: center; }
.pin-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--sp-2); }
.pin-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.pin-list li > span { min-width: 0; overflow-wrap: anywhere; }
.section-toolbar-btn[data-pin-key] { white-space: nowrap; }
/* Long uppercase meta pills wrap instead of widening the page (ORB meta at 390 px). */
.breakout-meta .pill { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

/* ISS-0.4.14-07 broker card: icon chips for status; keys, token and login buttons in one row; Save / Test below. */
.broker-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-3); }
.broker-chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--control-h-sm); padding: 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface2); color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.broker-chip.ok { color: var(--green-strong); background: var(--green-bg); border-color: var(--green-bg); }
.broker-chip.warn { color: var(--warn-strong); background: var(--warn-bg); border-color: var(--warn-bg); }
button.broker-chip { cursor: pointer; }
button.broker-chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.broker-cred-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); }
.broker-cred-row > label { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 calc(var(--sp-6) * 5); min-width: 0; font-size: var(--fs-xs); color: var(--muted); }
.broker-cred-row > label[hidden] { display: none; }
.broker-cred-row input:not([type="checkbox"]) { font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); height: var(--control-h); padding: 0 var(--sp-2); min-width: 0; }
.broker-login-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.broker-login-actions button { min-height: var(--control-h); white-space: nowrap; }
.broker-login-actions button[hidden] { display: none; }
.broker-manual-toggle { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text); min-height: var(--control-h); cursor: pointer; white-space: nowrap; }

/* ==== 0.4.14 U1: UI governance v2.2 §9, keyboard and phone drawer ============ */
/* One focus ring for every focusable element; component rules above may refine it. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#main-content:focus { outline: none; } /* programmatic target of the skip link */
.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 1100;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-strong); font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }
/* Keyboard focus never lands under the sticky header. */
html { scroll-padding-top: calc(var(--header-h) + var(--sp-2)); }
/* 8-pillar S6: reserve the scrollbar's space so the page never slides sideways when it grows past the window
   (Home CLS 0.125 at first paint: overlay text, header actions and main all moved ~8 px). */
html { scrollbar-gutter: stable; }
@media (max-width: 720px) { html { scroll-padding-top: 7.5rem; } } /* two-row phone header, 113 px */
@media (max-width: 960px) {
  /* The open drawer is a modal panel over the page, with a scrim. */
  .app-sidebar.m-open {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: min(20rem, 88vw); max-height: none; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 0 0 100vmax var(--scrim);
  }
}
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ==== 0.4.14 U3: one state panel (shared.js stateHtml) ======================== */
.state-panel { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.state-panel p { margin: 0; overflow-wrap: anywhere; }
.state-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--text); }
.state-detail { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-tight); }
.state-scope { white-space: normal; }
.state-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--disabled); flex: none; }
.state-error { border-color: var(--critical); background: var(--critical-bg); }
.state-error .state-dot { background: var(--critical); }
.state-stale { border-color: var(--warn); background: var(--warn-tint); }
.state-stale .state-dot { background: var(--warn); }
.state-conflict { border-color: var(--info); background: var(--info-bg); }
.state-conflict .state-dot { background: var(--info); }
.state-denied { background: var(--surface2); }
td > .state-empty { border: 0; background: transparent; padding: var(--sp-2) 0; }
/* 0.4.14 UX v2.2 Step 1: price source label (shared.js feedLabelHtml); words, not colour alone */
.feed-label { display: inline-block; max-width: 100%; font-size: var(--fs-xs); font-weight: 600; border-radius: var(--radius-sm); padding: 0.05rem 0.4rem; background: var(--surface2); color: var(--muted); overflow-wrap: anywhere; }
.feed-label.ok { background: var(--green-tint); color: var(--green-strong); }
.feed-label.info { background: var(--info-bg); color: var(--info); }
.feed-label.warn { background: var(--warn-tint); color: var(--warn-strong); }
.home-arranging > [data-frame-key] { visibility: hidden; } /* shell.js mountHome: no reorder jump (CLS) */
/* Layout shift: the menu's space is reserved (invisible) until the sign-in check answers. */
html.air-signed-in-hint #app-sidebar.hidden { display: flex !important; visibility: hidden; } /* beats .hidden { display: none !important } */
html.air-signed-in-hint.air-collapsed-hint #app-sidebar.hidden { width: var(--nav-rail-w); }
@media (max-width: 960px) { html.air-signed-in-hint #app-sidebar.hidden > :not(.sidebar-toggle) { display: none !important; } }
/* Layout shift: the "· updated <date>" stamps arrive late; hold their width so the header never re-wraps. */
:is(#omr-fno-asof, #omr-nifty500-asof):empty::before { content: " · updated 0000-00-00"; visibility: hidden; }
.section-feed { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-width: 0; margin-left: auto; margin-right: var(--sp-2); }
.section-feed .note { font-size: var(--fs-xs); }
.section-toolbar { flex-wrap: wrap; } /* room for the feed label on phones */

/* ==== 0.4.14 Layout A (owner 2026-10-15): light themes + three-column shell ===
   Themes change only the frame (ground, accent, menu highlight, focus colour).
   Gain / loss / warn / order-outcome / feed colours are never themed.
   Contrast (accent on white / on its tint): neutral 6.16 / 5.30 · blue 8.99 /
   7.63 · mint 5.47 / 4.66 · lotus 6.89 / 5.74. Default: neutral (today). */
:root {
  --theme-neutral: #2457d6; --theme-blue: #1f3bb3; --theme-mint: #0f766e; --theme-lotus: #8e3b78;
  --aside-w: 18.75rem; --nav-w: 15rem; --nav-rail-w: 5rem; /* menu 240 px expanded (owner 2026-10-15: "a little more wide") */ /* rail 80 px (owner 2026-10-15: 48 px was too thin) */
}
:root[data-theme="blue"] { --bg: #f4f5f7; --accent: #1f3bb3; --accent-hover: #16298a; --accent-soft: rgba(31, 59, 179, 0.12); }
:root[data-theme="mint"] { --bg: #f1f8f6; --accent: #0f766e; --accent-hover: #0b5a54; --accent-soft: rgba(15, 118, 110, 0.12); }
:root[data-theme="lotus"] { --bg: #fbf6f8; --accent: #8e3b78; --accent-hover: #6e2c5d; --accent-soft: rgba(142, 59, 120, 0.12); }

/* Shell: menu · work area · optional right sub-section (#app-aside). */
.app-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nav head" "nav main"; grid-template-rows: auto 1fr; align-items: start; }
.app-shell > .page-head { grid-area: head; }
/* The right column exists only while it holds a visible card (no empty column for a viewer without access). */
/* (0.4.14 2026-10-16) the right section floats inside the work area; no third grid column. */
.app-shell:not(.expects-aside) .app-aside:not(:has(> .aside-card:not(.hidden))) { display: none; } /* expects-aside: space held while its cards load (no layout shift) */
.app-aside .cp-lights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-aside .cp-verdict { grid-column: 1 / -1; order: -1; }
.app-shell > .app-sidebar { grid-area: nav; width: var(--nav-w); }
.app-shell > .app-sidebar.collapsed { width: var(--nav-rail-w); }
.app-shell > .main-content { grid-area: main; }
.app-aside { grid-area: aside; position: sticky; top: calc(var(--header-h) + var(--sp-2)); max-height: calc(100vh - var(--header-h) - var(--sp-4)); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.app-aside .aside-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.app-aside .aside-card h2 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
@media (max-width: 1100px) {
  /* The sub-section moves above the work area: what needs action comes first. */
  .app-aside { position: static; max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
}
@media (max-width: 960px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "head" "main"; grid-template-rows: none; }
  .app-shell > .app-sidebar, .app-shell > .app-sidebar.collapsed { width: 100%; }
}

/* Page head: title, one line of context, key figures (Home). */
.page-head { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-3); min-width: 0; }
.page-head h1 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; line-height: var(--lh-heading); overflow-wrap: anywhere; }
.page-head p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.page-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.page-kpis:empty { display: none; }
.page-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-kpi span { font-size: var(--fs-xs); color: var(--muted); }
.page-kpi b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; }
.page-kpi i { font-style: normal; font-family: var(--font-num); font-size: var(--fs-xs); }

/* Menu: icon per row, rounded active pill in the theme accent. */
.sidebar-link { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; min-height: 2.25rem; }
.sidebar-link.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar-link-icon { width: 1.1rem; height: 1.1rem; display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-size: var(--fs-xs); }
.sidebar-link-icon svg { width: 1.05rem; height: 1.05rem; }
.sidebar-link:not(.active) .sidebar-link-icon { color: var(--muted); }

/* Theme picker (profile menu). */
.theme-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); }
.theme-swatch { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--control-h-sm); padding: 0 var(--sp-2); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.theme-swatch::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 50%; flex: none; }
.theme-swatch[data-theme-pick="neutral"]::before { background: var(--theme-neutral); }
.theme-swatch[data-theme-pick="blue"]::before { background: var(--theme-blue); }
.theme-swatch[data-theme-pick="mint"]::before { background: var(--theme-mint); }
.theme-swatch[data-theme-pick="lotus"]::before { background: var(--theme-lotus); }
.theme-swatch[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }

/* Kit (L6): softer cards and taller table rows, everywhere. */
.card { border-radius: var(--radius-lg); }
.cp-table td { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.form-h { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr) minmax(8rem, max-content) minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; }
@media (max-width: 960px) { .form-h { grid-template-columns: minmax(0, 1fr); } }
/* Needs you in the narrow right sub-section: icon + text, the detail and actions under the title. */
.app-aside .cp-need { grid-template-columns: 1.4rem minmax(0, 1fr); align-items: start; }
.app-aside .cp-need > .cp-need-d, .app-aside .cp-need > .cp-need-acts { grid-column: 2; }
.app-aside .cp-need-acts { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.int-kpi-item b, .hub-stat b, .int-kpi-val { white-space: nowrap; } /* Layout A: narrower work area must not split a ₹ figure */

/* Collapsed menu = icon rail (owner 2026-10-15): 72 px, large centred icons, a clear
   active tile, thin scrollbar; the page name is each link's tooltip and accessible name. */
.app-sidebar.collapsed { padding: var(--sp-2) var(--sp-1); scrollbar-width: thin; align-items: stretch; }
.app-sidebar.collapsed .sidebar-link { justify-content: center; width: 100%; min-height: 2.75rem; padding: 0; border-radius: var(--radius-md); }
.app-sidebar.collapsed .sidebar-link-icon, .app-sidebar.collapsed .sidebar-link-icon svg { width: 1.375rem; height: 1.375rem; }
.app-sidebar.collapsed .sidebar-link.active { box-shadow: inset 0 0 0 1px var(--accent); }
.app-sidebar.collapsed .sidebar-link:not(.active) .sidebar-link-icon { color: var(--text); }
.app-sidebar.collapsed .sidebar-toggle { align-self: center; min-height: 2.25rem; min-width: 2.75rem; }
.app-sidebar.collapsed .sidebar-section + .sidebar-section { margin-top: var(--sp-2); padding-top: var(--sp-2); }
/* Rail labels: a short line under each icon so rows are told apart at a glance (full name in the tooltip). */
.app-sidebar.collapsed .sidebar-link { flex-direction: column; gap: 2px; padding: var(--sp-1) 2px; min-height: 3.25rem; }
.app-sidebar.collapsed .sidebar-link-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; font-size: var(--fs-xs); line-height: 1.15; text-align: center; white-space: normal; overflow: hidden; overflow-wrap: anywhere; }
.app-sidebar.collapsed .sidebar-link:not(.active) .sidebar-link-label { color: var(--muted); }

/* Right section P&L (owner 2026-10-15): accent hero card, then Needs you, insights, activity. */
.pnl-hero { display: flex; flex-direction: column; gap: var(--sp-1); }
.pnl-hero-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pnl-hero h2 { margin: 0; font-size: var(--fs-md); color: var(--on-strong); }
.pnl-modes { margin-left: auto; display: inline-flex; border: 1px solid var(--on-strong); border-radius: var(--radius-pill); overflow: hidden; }
.pnl-mode { font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 2px var(--sp-2); min-height: 1.6rem; background: transparent; color: var(--on-strong); border: 0; cursor: pointer; }
.pnl-mode[aria-pressed="true"] { background: var(--on-strong); color: var(--accent); }
.pnl-mode:focus-visible { outline-color: var(--on-strong); }
.pnl-big { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); font-weight: 600; white-space: nowrap; }
.pnl-sub { font-size: var(--fs-xs); opacity: 0.92; overflow-wrap: anywhere; }
.pnl-notes { margin: 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); line-height: var(--lh-tight); }
.pnl-by summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; min-height: var(--control-h-sm); display: flex; align-items: center; }
.pnl-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pnl-activity li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-2); padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-left: 2px solid var(--border); position: relative; font-size: var(--fs-sm); }
.pnl-activity li::before { content: ""; position: absolute; left: -6px; top: 0.85rem; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.pnl-activity .num { font-family: var(--font-num); white-space: nowrap; }
.pnl-activity time { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--muted); }
.pnl-by-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pnl-by-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pnl-by-figs { font-size: var(--fs-xs); }
.pnl-by-figs .num { font-family: var(--font-num); white-space: nowrap; }
.pnl-mode:disabled { opacity: 0.7; cursor: not-allowed; }
/* P&L horizontal (owner 2026-10-15, StarAdmin reference): strip, then hero + daily chart. */
.page-pnl { display: flex; flex-direction: column; gap: var(--sp-3); }
/* 8-pillar S6 (2026-10-18): header bands that fill after a fetch are held from the first frame (shell.js
   holdBand: last settled height for this width, inline). These are the first-visit defaults, measured:
   P&L 1280: 452 px, 768: 565, 390: 709; index KPIs one row. Home CLS was 0.39. */
.page-pnl.band-wait { min-height: calc(var(--sp-6) * 14); }
.hub-control.band-wait:empty, .hub-markets.band-wait:empty { display: block; }
.page-kpis.band-wait:empty { display: grid; min-height: calc(var(--sp-6) * 2.7); }
@media (max-width: 960px) { .page-pnl.band-wait { min-height: calc(var(--sp-6) * 17.5); } }
@media (max-width: 720px) { .page-pnl.band-wait { min-height: calc(var(--sp-6) * 22); } }
.pnl-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.pnl-strip .page-kpi i { color: var(--muted); }
.pnl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: var(--sp-3); align-items: stretch; }
@media (max-width: 1100px) { .pnl-row { grid-template-columns: minmax(0, 1fr); } }
.pnl-hero-card { background: var(--accent); color: var(--on-strong); border-radius: var(--radius-lg); padding: var(--sp-4); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pnl-chart-card { min-width: 0; gap: var(--sp-2); }
.pnl-chart-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pnl-chart-head h2 { margin: 0; font-size: var(--fs-md); }
.pnl-legend { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.pnl-key { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; }
.pnl-key.up { background: var(--green); }
.pnl-key.down { background: var(--red); }
.pnl-key.line { height: 2px; background: var(--accent); }
.pnl-chart { width: 100%; height: 10.5rem; display: block; }
.pnl-bar.up { fill: var(--green); }
.pnl-bar.down { fill: var(--red); }
.pnl-zero { stroke: var(--border-control); stroke-width: 1; }
.pnl-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pnl-axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); font-family: var(--font-num); }
.pnl-strip .page-kpi b { font-size: var(--fs-md); } /* six P&L figures fit one row in the work area */
.app-shell > .page-head { padding: 0 clamp(0.75rem, 2.5vw, 1.5rem); min-width: 0; }
.app-shell > .page-head.hidden + .main-content { grid-row: head-start / main-end; } /* no head: the work area starts at the top */
.app-aside { align-self: start; }
/* Left of the chart: the accent card above a quality card (win-rate ring, profit factor), like the reference. */
.pnl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.pnl-left { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.pnl-quality { display: flex; align-items: center; justify-content: space-around; gap: var(--sp-3); flex-wrap: wrap; }
.pnl-q { display: flex; align-items: center; gap: var(--sp-2); }
.pnl-q span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.pnl-q b { font-family: var(--font-num); font-size: var(--fs-lg); font-weight: 600; }
.pnl-ring { width: 2.75rem; height: 2.75rem; flex: none; }
.pnl-ring-track { fill: none; stroke: var(--surface3); stroke-width: 4; }
.pnl-ring-val { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.app-shell > .page-head:not(.hidden) + .main-content { padding-top: 0; } /* no double gap under the full-width head */
@media (max-width: 1100px) { .pnl-row { grid-template-columns: minmax(0, 1fr); } } /* hero, quality and chart stack on tablets and phones */
/* Symmetry (owner 2026-10-16): the right section uses the same outer inset as the head and the work
   area, starts level with the work area, and the risk strip (its own boxes) is not boxed twice. */
.app-aside { padding: 0 clamp(0.75rem, 2.5vw, 1.5rem) var(--sp-4) 0; }
.app-aside > [data-aside-owner$="-control"] { padding: 0; border: 0; background: transparent; }
@media (max-width: 1100px) { .app-aside { padding: 0 clamp(0.75rem, 2.5vw, 1.5rem); } }
.app-aside { position: static; max-height: none; overflow: visible; } /* scrolls with the page: no inner scrollbar, right edge level with the head */
/* Right section as a float (owner 2026-10-16): beside the first Home cards, then the cards below use
   the full width. Each Home card is its own formatting context (flow-root), so it narrows beside the
   float and widens after it; the float never overlaps a card. */
.main-content .app-aside { float: right; width: var(--aside-w); margin: 0 0 var(--sp-3) var(--sp-4); padding: 0; position: static; max-height: none; overflow: visible; }
.app-shell.expects-aside .app-aside:not(:has(> .aside-card:not(.hidden))) { min-height: 24rem; } /* held while its cards load */
.dashboard > .section-frame, #workspace-chrome > .pin-picker { display: flow-root; width: auto; }
@media (max-width: 1100px) {
  .main-content .app-aside { float: none; width: auto; margin: 0 0 var(--sp-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
}
/* P&L sign colours (owner 2026-10-16): gains green, losses red; arrows stay. */
.pnl-up { color: var(--green); }
.pnl-down { color: var(--red); }
.pnl-hero .pnl-up, .pnl-hero .pnl-down { color: inherit; } /* small hero lines stay white on the accent (contrast) */
.pnl-chip { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius-md); background: var(--on-strong); color: var(--text); }
.pnl-hero .pnl-chip.pnl-up { background: var(--green-tint); color: var(--green-strong); }
.pnl-hero .pnl-chip.pnl-down { background: var(--red-tint); color: var(--red); }
/* A card that only starts beside the right section's last few pixels clears it and takes the full width
   (shell.js balanceAside). */
.dashboard > .section-frame.clear-aside { clear: right; }
/* A tall card crossing the right section's bottom flows around it (2026-10-29): the frame and its
   section stop being their own formatting context, so each inner block (its own context: flex, grid,
   table scroller) narrows beside the float and takes the full width below it. */
.dashboard > .section-frame.wrap-aside, .dashboard > .section-frame.wrap-aside > section { display: block; }

/* Swing Hub › All (owner 2026-10-17): P&L and actions visible without a sideways scroll at 1280. */
.sh-all th, .sh-all td { padding-inline: var(--sp-2); }
.sh-all td:first-child { white-space: normal; min-width: calc(var(--sp-6) * 5); max-width: calc(var(--sp-6) * 7); }
.sh-all td:first-child .sh-need { display: block; white-space: normal; text-align: left; }
.sh-all .int-actions-cell { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
.sh-all .mt-sub { white-space: normal; }
.sh-all th { white-space: normal; vertical-align: bottom; } /* short headers wrap; sub-lines carry the detail */

/* Database & Cache Connection Manager (Admin Settings) */
.db-connections-container {
  display: flex;
  min-height: 600px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--sp-3);
}

.db-conn-sidebar {
  width: 280px;
  min-width: 260px;
  background: var(--surface2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  gap: var(--sp-3);
}

.db-conn-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.db-conn-count {
  background: var(--surface3);
  color: var(--text);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}

.db-conn-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  overflow-y: auto;
  flex: 1;
}

.db-conn-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s ease;
}

.db-conn-item:hover {
  background: var(--surface3);
}

.db-conn-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.db-conn-item-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.db-conn-item-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-conn-item-sub {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-family-mono);
}

.db-conn-badge {
  font-size: var(--fs-xs);
  font-family: var(--font-family-mono);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface3);
  color: var(--muted);
  border: 1px solid var(--border);
  text-transform: uppercase;
}

.db-conn-badge.postgres { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.db-conn-badge.redis { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.db-conn-badge.sqlite { background: var(--green-bg); color: var(--green-strong); border-color: var(--green); }
.db-conn-badge.mariadb { background: var(--warn-bg); color: var(--warn-strong); border-color: var(--warn); }

.db-conn-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 6px;
}

.db-conn-status-dot.active { background: var(--green); box-shadow: 0 0 6px var(--green); }
.db-conn-status-dot.idle { background: var(--muted); }

.db-conn-editor {
  flex: 1;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--surface);
  overflow-y: auto;
}

.db-conn-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-3);
}

.db-conn-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 680px;
}

.db-conn-form .form-row {
  display: flex;
  gap: var(--sp-3);
}

.db-conn-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.db-conn-form .form-group.grow { flex: 1; }
.db-conn-form .form-group.w-32 { width: 110px; }

.db-conn-form label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
}

.db-conn-form input[type="text"],
.db-conn-form input[type="number"],
.db-conn-form input[type="password"],
.db-conn-form select,
.db-conn-form textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text);
  font-size: var(--fs-sm);
  outline: none;
}

.db-conn-form input:focus,
.db-conn-form select:focus,
.db-conn-form textarea:focus {
  border-color: var(--accent);
}

.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrap input {
  width: 100%;
  padding-right: 36px;
}

.btn-toggle-eye {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
}

.btn-toggle-eye:hover { color: var(--text); }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  cursor: pointer;
}

.form-actions-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.form-actions-row.justify-end { justify-content: flex-end; }

.db-test-console {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  font-family: var(--font-family-mono);
  font-size: var(--fs-xs);
  white-space: pre-wrap;
  line-height: 1.5;
}

.db-test-console.success {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-bg);
}

.db-test-console.error {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-bg);
}

.db-profile-save-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.db-profile-save-box legend {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  padding: 0 var(--sp-2);
}

.db-callout {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  color: var(--warn-strong);
  font-size: var(--fs-xs);
}

.db-modal {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.db-modal.hidden { display: none; }

.db-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  width: 90%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-modal);
}

.db-modal-card textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  color: var(--text);
  font-family: var(--font-family-mono);
  font-size: var(--fs-xs);
}

.db-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

@media (max-width: 900px) {
  .db-connections-container { flex-direction: column; }
  .db-conn-sidebar { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--border); }
  .db-conn-form .form-row { flex-direction: column; }
  .db-conn-form .form-group.w-32 { width: 100%; }
}

/* Rollover Puts / Calls (0.4.14, owner 2026-10-27): status chips, settings grid, ranking detail row. */
.rps-status { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-2) 0; }
.rps-status .chip { white-space: normal; overflow-wrap: anywhere; }
.rps-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.rps-form .i2l-fld { min-width: 0; }
.rps-detail { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.rps-detail dt { color: var(--muted); }
.rps-detail dd { margin: 0; overflow-wrap: anywhere; }
.sh-del-why { display: block; max-width: 280px; white-space: normal; color: var(--muted); }