/* ============================================================
   ARUS — WAVE 00
   Design Tokens, Core Visual Foundation & Reusable Components

   Table of contents:
     1. Tokens
        1.1 Color — background, surface, text, brand, semantic
        1.2 Color — activity states
        1.3 Color — rotation states
        1.4 Typography
        1.5 Spacing
        1.6 Border & radius
        1.7 Shadow
        1.8 Layout
     2. Reset / Base
     3. Typography
     4. Layout
     5. Controls
     6. Reusable Components
     7. Foundation Preview (temporary token/component validation)
     8. Responsive
   ============================================================ */

/* 1. TOKENS ------------------------------------------------- */

:root {
  /* 1.1 Color — background / surface / text / brand / semantic — LIGHT */
  --color-bg-primary: #f8f9fb;
  --color-bg-secondary: #f1f5f9;
  --color-bg-tertiary: #eef2f7;

  --color-surface-1: #ffffff;
  --color-surface-2: #f8fafc;
  --color-surface-hover: #f1f5f9;
  --color-surface-elevated: #ffffff;

  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-text-disabled: #94a3b8;

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-active: #1e40af;
  --color-primary-ring: rgba(37, 99, 235, 0.14);
  --color-cyan: #06b6d4;
  --color-focus: #2563eb;
  --color-on-primary: #ffffff;

  --color-positive: #059669;
  --color-negative: #dc2626;
  --color-warning: #d97706;
  --color-info: #2563eb;
  --color-neutral: #64748b;

  /* 1.2 Activity states (calm → extreme) */
  --activity-calm: #64748b;
  --activity-normal: #2563eb;
  --activity-active: #06b6d4;
  --activity-high: #d97706;
  --activity-extreme: #dc2626;

  /* 1.3 Rotation states */
  --rotation-emerging: #0891b2;
  --rotation-building: #2563eb;
  --rotation-leading: #0d9488; /* teal — leadership, not Buy */
  --rotation-cooling: #d97706; /* amber — moderating momentum */
  --rotation-fading: #94a3b8;

  /* Scrollbar — light */
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  /* 1.4 Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* 1.5 Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* 1.6 Border & radius */
  --border-width: 1px;
  --border-color: #e2e8f0;
  --border-color-strong: #cbd5e1;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* 1.7 Shadow — soft light, restrained (no heavy shadows) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* 1.8 Layout */
  --content-max-width: 80rem;
  --sidebar-width: 16rem;
  --header-height: 4rem;
  --mobile-nav-height: 3.5rem;

  --z-overlay: 1000;

  --transition-fast: 120ms ease;
  --transition-base: 160ms ease;
}

/* 2. RESET / BASE ------------------------------------------- */

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

html {
  margin: 0;
  padding: 0;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

hr {
  margin: var(--space-6) 0;
  border: 0;
  border-top: var(--border-width) solid var(--border-color);
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
}

ul,
ol {
  margin: 0;
  padding-left: var(--space-5);
}

.list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

::selection {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Visible keyboard focus for all interactive elements. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Light scrollbars (WebKit + Firefox). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

/* 3. TYPOGRAPHY --------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-size-2xl);
}
h2 {
  font-size: var(--font-size-xl);
}
h3 {
  font-size: var(--font-size-lg);
}
h4 {
  font-size: var(--font-size-md);
}
h5 {
  font-size: var(--font-size-sm);
}
h6 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

p {
  margin: 0 0 var(--space-3);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

/* Section / card titles */
.section-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.surface__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* Text utilities */
.text-primary {
  color: var(--color-text-primary);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-disabled {
  color: var(--color-text-disabled);
}
.text-positive {
  color: var(--color-positive);
}
.text-negative {
  color: var(--color-negative);
}
.text-warning {
  color: var(--color-warning);
}

/* Market numbers / tickers */
.nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.mono {
  font-family: var(--font-mono);
}
.ticker {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* 4. LAYOUT ------------------------------------------------- */

/* Reusable centered frame. The app root shares these rules. */
.app-container,
.app-root {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: clamp(var(--space-3), 4vw, var(--space-6));
}

.app-root {
  min-height: 100vh;
  padding-block: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.page-container {
  padding-block: var(--space-6);
}

/* Generic responsive grid for card/module layouts. */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-4);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stack-lg {
  gap: var(--space-5);
}

/* Lightweight hide helpers (no utility framework). */
.hide {
  display: none !important;
}

@media (max-width: 47.99rem) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 48rem) and (max-width: 74.99rem) {
  .hide-tablet {
    display: none !important;
  }
}

@media (min-width: 75rem) {
  .hide-desktop {
    display: none !important;
  }
}

.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.row--between {
  justify-content: space-between;
}

.row--center {
  justify-content: center;
}

/* Surfaces */
.surface {
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.surface--elevated {
  background: var(--color-surface-elevated);
  border-color: var(--border-color-strong);
  box-shadow: var(--shadow-md);
}

/* 4.1 SHELL HEADER — W01 PART 01 ----------------------------- */
/* Top application header: brand left, nav center, actions right.
   Light theme only. Sticky with subtle border; no heavy shadow. */

.shell-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface-1);
  border-bottom: var(--border-width) solid var(--border-color);
}

.shell-header__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: clamp(var(--space-3), 4vw, var(--space-6));
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.shell-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  text-decoration: none;
  flex: 0 0 auto;
  padding-block: var(--space-2);
}

.shell-brand:hover {
  text-decoration: none;
}

.shell-brand__name {
  font-size: 1.35rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-primary);
  line-height: 1;
}

.shell-brand__sub {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1;
}

/* Primary navigation (desktop) */

.shell-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.shell-nav__list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}

.shell-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.78rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.shell-nav__link:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-2);
  text-decoration: none;
}

.shell-nav__link:focus-visible {
  outline-offset: 2px;
}

/* Active state: blue accent + soft background + underline bar.
   Not color-only: underline + background + font-weight. */
.shell-nav__link.is-active,
.shell-nav__link[aria-current="page"] {
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.08);
  font-weight: var(--font-weight-semibold);
}

.shell-nav__link.is-active::after,
.shell-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -9px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 999px;
}

/* Header actions */

.shell-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: 999px;
  color: var(--color-text-secondary);
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.icon-btn:hover {
  background: var(--color-surface-2);
  border-color: var(--border-color-strong);
  color: var(--color-text-primary);
}

.icon-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.icon-btn__dot {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-negative);
  border: 2px solid var(--color-surface-1);
  border-radius: 999px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* 4.2 PAGE SHELL — W01 PART 01 ------------------------------ */
/* Reusable desktop page container beneath shell header. */

.page-shell {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: clamp(var(--space-3), 4vw, var(--space-6));
  padding-block: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: calc(100vh - var(--header-height));
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-color);
}

.page-header__title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.page-header__subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .page-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Foundation toggle (keeps W00 preview accessible but secondary) */
.foundation-toggle {
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.foundation-toggle[open] {
  padding-block-end: var(--space-5);
}

.foundation-toggle > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.foundation-toggle > summary::-webkit-details-marker {
  display: none;
}

.foundation-toggle > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
  flex: 0 0 auto;
}

.foundation-toggle[open] > summary::before {
  transform: rotate(45deg);
}

/* 4.3 MOBILE NAVIGATION — W01 PART 03 ----------------------- */
/* Fixed bottom nav: clean, lightweight, one-hand friendly.
   Hidden on desktop, visible <768px. */

.mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: none;
  background: var(--color-surface-1);
  border-top: var(--border-width) solid var(--border-color);
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* subtle top shadow, not heavy */
  box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.04);
}

.mobile-nav__list {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.mobile-nav__item {
  flex: 1 1 0;
  min-width: 0;
}

.mobile-nav__link,
.mobile-nav__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  width: 100%;
  min-height: var(--mobile-nav-height);
  padding: 0.35rem 0.25rem 0.4rem;
  font-size: 0.66rem;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-nav__link svg,
.mobile-nav__action svg {
  width: 1.22rem;
  height: 1.22rem;
  flex: 0 0 auto;
}

.mobile-nav__link:hover,
.mobile-nav__action:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-2);
  text-decoration: none;
}

.mobile-nav__link.is-active,
.mobile-nav__link[aria-current="page"],
.mobile-nav__action.is-active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.mobile-nav__link.is-active svg,
.mobile-nav__link[aria-current="page"] svg,
.mobile-nav__action.is-active svg {
  color: var(--color-primary);
}

/* 4.4 SEARCH / NOTIFICATION / PROFILE — W01 PART 03 -------- */

.search-overlay__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.search-field {
  position: relative;
}

.search-field__input {
  padding-left: 2.5rem;
}

.search-field__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 22rem;
  overflow-y: auto;
}

.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-3);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.search-result:hover {
  background: var(--color-surface-2);
  border-color: var(--border-color-strong);
}

.search-result__ticker {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.search-result__name {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.search-result__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-width: 0;
}

.search-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

/* Notification & profile lists */

.notification-list,
.profile-list,
.more-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.notification-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.notification-item:hover {
  background: var(--color-surface-2);
  border-color: var(--border-color-strong);
}

.notification-item--unread {
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.04);
}

.notification-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.notification-item__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.notification-item__time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.notification-item__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}

.profile-card__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.profile-card__avatar {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.profile-card__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.profile-card__env {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.profile-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.profile-meta__item {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.profile-meta__label {
  display: block;
  font-size: 0.66rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.profile-meta__value {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.profile-actions button {
  justify-content: flex-start;
}

.more-list__link,
.more-list__action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.more-list__link:hover,
.more-list__action:hover {
  background: var(--color-surface-2);
  border-color: var(--border-color-strong);
  color: var(--color-text-primary);
  text-decoration: none;
}

.more-list__link.is-active {
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.18);
  font-weight: var(--font-weight-semibold);
}

.more-list__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.more-list__link.is-active .more-list__icon {
  color: var(--color-primary);
}

/* 5. CONTROLS ----------------------------------------------- */

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  margin: 0;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-text-primary);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

button:hover,
.btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
  text-decoration: none;
}

button:active,
.btn:active {
  background: var(--color-bg-tertiary);
}

button:disabled,
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: transparent;
  color: var(--color-on-primary);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

/* Inputs / selects / textareas */
label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-primary);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-bg-secondary);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238695ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-color: var(--color-surface-1);
}

/* Accessibility helpers */
.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;
}

/* 6. REUSABLE COMPONENTS ------------------------------------ */
/* Generic, token-driven presentation components. No ARUS
   market-intelligence logic lives here — these are visual
   primitives that later Waves will compose into product screens. */

/* 6.1 Surface Card (.card) --------------------------------- */

.card {
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.card--compact {
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
}

.card--elevated {
  background: var(--color-surface-elevated);
  border-color: var(--border-color-strong);
  box-shadow: var(--shadow-md);
}

.card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.card__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.card__subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.card__body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.card__body p:last-child {
  margin-bottom: 0;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* 6.2 Section Header (.section-header) --------------------- */

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.section-header__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.section-header__support {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.section-header__action {
  flex: 0 0 auto;
}

/* 6.3 Status Badge (.status-badge) ------------------------- */

.status-badge {
  --_badge-bg: var(--color-surface-2);
  --_badge-fg: var(--color-text-secondary);
  --_badge-border: var(--border-color-strong);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.15rem var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--_badge-fg);
  background: var(--_badge-bg);
  border: var(--border-width) solid var(--_badge-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.status-badge .status-badge__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Semantic variants */
.status-badge--neutral {
  --_badge-bg: rgba(147, 160, 181, 0.14);
  --_badge-fg: var(--color-neutral);
  --_badge-border: rgba(147, 160, 181, 0.3);
}

.status-badge--info {
  --_badge-bg: rgba(90, 160, 245, 0.14);
  --_badge-fg: var(--color-info);
  --_badge-border: rgba(90, 160, 245, 0.3);
}

.status-badge--positive {
  --_badge-bg: rgba(13, 148, 136, 0.14);
  --_badge-fg: var(--color-positive);
  --_badge-border: rgba(13, 148, 136, 0.3);
}

.status-badge--warning {
  --_badge-bg: rgba(247, 183, 63, 0.14);
  --_badge-fg: var(--color-warning);
  --_badge-border: rgba(247, 183, 63, 0.3);
}

.status-badge--negative {
  --_badge-bg: rgba(242, 97, 119, 0.14);
  --_badge-fg: var(--color-negative);
  --_badge-border: rgba(242, 97, 119, 0.3);
}

/* Activity variants (reuse activity tokens) */
.status-badge--calm {
  --_badge-bg: rgba(92, 122, 158, 0.14);
  --_badge-fg: var(--activity-calm);
  --_badge-border: rgba(92, 122, 158, 0.3);
}
.status-badge--normal {
  --_badge-bg: rgba(76, 141, 246, 0.14);
  --_badge-fg: var(--activity-normal);
  --_badge-border: rgba(76, 141, 246, 0.3);
}
.status-badge--active {
  --_badge-bg: rgba(43, 199, 222, 0.14);
  --_badge-fg: var(--activity-active);
  --_badge-border: rgba(43, 199, 222, 0.3);
}
.status-badge--high {
  --_badge-bg: rgba(247, 183, 63, 0.14);
  --_badge-fg: var(--activity-high);
  --_badge-border: rgba(247, 183, 63, 0.3);
}
.status-badge--extreme {
  --_badge-bg: rgba(242, 97, 119, 0.14);
  --_badge-fg: var(--activity-extreme);
  --_badge-border: rgba(242, 97, 119, 0.3);
}

/* Rotation variants (reuse rotation tokens) */
.status-badge--emerging {
  --_badge-bg: rgba(91, 200, 230, 0.14);
  --_badge-fg: var(--rotation-emerging);
  --_badge-border: rgba(91, 200, 230, 0.3);
}
.status-badge--building {
  --_badge-bg: rgba(76, 141, 246, 0.14);
  --_badge-fg: var(--rotation-building);
  --_badge-border: rgba(76, 141, 246, 0.3);
}
.status-badge--leading {
  --_badge-bg: rgba(13, 148, 136, 0.14);
  --_badge-fg: var(--rotation-leading);
  --_badge-border: rgba(13, 148, 136, 0.3);
}
.status-badge--cooling {
  --_badge-bg: rgba(217, 119, 6, 0.14);
  --_badge-fg: var(--rotation-cooling);
  --_badge-border: rgba(217, 119, 6, 0.3);
}
.status-badge--fading {
  --_badge-bg: rgba(134, 149, 173, 0.14);
  --_badge-fg: var(--rotation-fading);
  --_badge-border: rgba(134, 149, 173, 0.3);
}

/* 6.4 Metric Tile (.metric-tile) --------------------------- */

.metric-tile {
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metric-tile__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.metric-tile__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}

.metric-tile__change {
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.metric-tile__helper {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* 6.5 Score Block (.score-block) --------------------------- */

.score-block {
  --_score-color: var(--activity-normal);

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 6rem;
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--_score-color);
  border-radius: var(--radius-lg);
}

.score-block__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--_score-color);
  font-variant-numeric: tabular-nums;
}

.score-block__state {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.score-block__trend {
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

/* Score color variants (token-driven, no inline styles). */
.score-block--calm { --_score-color: var(--activity-calm); }
.score-block--normal { --_score-color: var(--activity-normal); }
.score-block--active { --_score-color: var(--activity-active); }
.score-block--high { --_score-color: var(--activity-high); }
.score-block--extreme { --_score-color: var(--activity-extreme); }
.score-block--positive { --_score-color: var(--color-positive); }
.score-block--negative { --_score-color: var(--color-negative); }
.score-block--warning { --_score-color: var(--color-warning); }

/* 6.6 Progress / Intensity Bar (.intensity-bar) ------------ */

.intensity-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.intensity-bar__track {
  width: 100%;
  height: 0.5rem;
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.intensity-bar__fill {
  height: 100%;
  width: 0;
  background: var(--color-primary);
  border-radius: inherit;
  transition: width var(--transition-base);
}

.intensity-bar--positive .intensity-bar__fill {
  background: var(--color-positive);
}
.intensity-bar--warning .intensity-bar__fill {
  background: var(--color-warning);
}
.intensity-bar--negative .intensity-bar__fill {
  background: var(--color-negative);
}
.intensity-bar--active .intensity-bar__fill {
  background: var(--activity-active);
}
.intensity-bar--high .intensity-bar__fill {
  background: var(--activity-high);
}
.intensity-bar--extreme .intensity-bar__fill {
  background: var(--activity-extreme);
}

.intensity-bar__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* 6.7 Change Indicator (.change-indicator) ----------------- */

.change-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.change-indicator__arrow {
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/* Arrow shape carries direction; color reinforces (not color-only). */
.change-indicator--up {
  color: var(--color-positive);
}
.change-indicator--down {
  color: var(--color-negative);
}
.change-indicator--flat {
  color: var(--color-text-muted);
}

/* 6.8 Empty State (.empty-state) --------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
}

.empty-state__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: 999px;
  background: var(--color-surface-2);
}

.empty-state__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.empty-state__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.empty-state__text {
  margin: 0;
  max-width: 22rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.empty-state__action {
  margin-top: var(--space-1);
}

/* 6.9 Loading State (.skeleton) ---------------------------- */

.skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: arus-skeleton 1.4s ease-in-out infinite;
}

@keyframes arus-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.skeleton--text {
  height: 0.85rem;
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}

.skeleton--text:last-child {
  width: 70%;
}

.skeleton--metric {
  height: 1.75rem;
  width: 60%;
  border-radius: var(--radius-sm);
}

.skeleton--card {
  height: 8rem;
  border-radius: var(--radius-lg);
}

/* 6.10 Overlay / Modal / Drawer ---------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  background: rgba(5, 9, 18, 0.6);
  padding: var(--space-6);
  opacity: 1;
  transition: opacity var(--transition-base);
}

.overlay[hidden] {
  display: none;
}

.overlay.is-closing {
  opacity: 0;
}

.overlay__panel {
  position: relative;
  background: var(--color-surface-elevated);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-height: calc(100dvh - 2 * var(--space-6));
  overflow-y: auto;
}

.overlay--modal {
  align-items: center;
  justify-content: center;
}

.overlay--modal .overlay__panel {
  width: 100%;
  max-width: 32rem;
  margin: auto;
}

.overlay--drawer {
  justify-content: flex-end;
  padding: 0;
}

.overlay--drawer .overlay__panel {
  width: min(24rem, 100%);
  height: 100%;
  max-height: none;
  border-radius: 0;
  border-inline-start: var(--border-width) solid var(--border-color-strong);
  /* For drawer, transitions translate; modal uses opacity. */
  transform: translateX(0);
  transition: transform var(--transition-base);
}

.overlay--drawer.is-closing .overlay__panel {
  transform: translateX(100%);
}

.overlay__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  display: grid;
  place-items: center;
}

.overlay__title {
  margin: 0 var(--space-8) var(--space-2) 0;
}

.overlay__body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* 7. FOUNDATION PREVIEW ------------------------------------- */
/* Temporary token/component validation surface. Not a product
   screen. Restructure or remove once real screens land. */

.app-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.app-brand {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  line-height: 1;
  color: var(--color-text-primary);
}

.app-tagline {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.runtime {
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.runtime__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.runtime__list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
}

.runtime__list dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.runtime__list dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.runtime__list dd.nums,
.runtime__list dd .nums {
  color: var(--color-text-primary);
}

.foundation-preview__intro {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.swatch-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-3);
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.swatch__chip {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color-strong);
  box-shadow: var(--shadow-sm);
}

.swatch__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  word-break: break-all;
}

/* Swatch color modifiers (token-driven, no inline styles). */
.swatch-chip--primary { background: var(--color-primary); }
.swatch-chip--cyan { background: var(--color-cyan); }
.swatch-chip--positive { background: var(--color-positive); }
.swatch-chip--warning { background: var(--color-warning); }
.swatch-chip--negative { background: var(--color-negative); }
.swatch-chip--neutral { background: var(--color-neutral); }
.swatch-chip--calm { background: var(--activity-calm); }
.swatch-chip--normal { background: var(--activity-normal); }
.swatch-chip--active { background: var(--activity-active); }
.swatch-chip--high { background: var(--activity-high); }
.swatch-chip--extreme { background: var(--activity-extreme); }
.swatch-chip--emerging { background: var(--rotation-emerging); }
.swatch-chip--building { background: var(--rotation-building); }
.swatch-chip--leading { background: var(--rotation-leading); }
.swatch-chip--cooling { background: var(--rotation-cooling); }
.swatch-chip--fading { background: var(--rotation-fading); }

.swatch-group-label {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.swatch-group-label:first-child {
  margin-top: 0;
}

.type-brand {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  line-height: 1;
}

.market-number {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
}

.market-number .ticker {
  color: var(--color-text-secondary);
}

.market-number .value {
  color: var(--color-text-primary);
}

.market-number .change {
  font-size: var(--font-size-sm);
  /* Plus/minus sign carries meaning; color reinforces it (not color-only). */
}

.surface-demo {
  display: grid;
  gap: var(--space-3);
}

.surface-demo__block {
  min-height: 4.5rem;
  padding: var(--space-4);
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color);
  font-size: var(--font-size-sm);
}

.surface-demo__block span {
  color: var(--color-text-muted);
}

.surface-demo__block--base {
  background: var(--color-bg-primary);
}

.surface-demo__block--surface {
  background: var(--color-surface-1);
  border-color: var(--border-color-strong);
}

.surface-demo__block--elevated {
  background: var(--color-surface-elevated);
  border-color: var(--border-color-strong);
  box-shadow: var(--shadow-md);
}

.controls-demo {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-color);
}

.controls-demo__label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.app-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-text-disabled);
  font-size: var(--font-size-xs);
}

.app-footer p {
  margin: 0;
}

/* Preview-section rhythm (replaces one-off margin-top inline styles). */
.preview-section {
  margin-top: var(--space-6);
}

.preview-section:first-child {
  margin-top: 0;
}

.preview-block + .preview-block {
  margin-top: var(--space-4);
}

.preview-split {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.preview-split__scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

.preview-split__bars {
  flex: 1 1 20rem;
  min-width: 16rem;
}

/* Responsive validation swatches */
.breakpoint-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
}

.breakpoint-card {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.breakpoint-card__label {
  display: block;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.breakpoint-card__range {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.breakpoint-card__indicator {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-positive);
}

/* Only the active breakpoint's indicator is visible (CSS-only). */
.breakpoint-indicator {
  display: none;
}

/* 8. RESPONSIVE --------------------------------------------- */
/* Breakpoints: mobile < 768px, tablet 768–1199px, desktop ≥1200px. */

/* Shell header tablet preparation — tighten spacing, keep actions visible */
@media (max-width: 63.99rem) {
  .shell-header__inner {
    gap: var(--space-3);
  }

  .shell-nav__link {
    padding: 0 0.6rem;
    font-size: 0.8125rem;
  }

  .shell-brand__name {
    font-size: 1.2rem;
  }
}

@media (max-width: 47.99rem) {
  /* Mobile: compact top header — brand + actions only, desktop nav hidden */
  .shell-header__inner {
    flex-wrap: nowrap;
    padding-block: 0;
    min-height: 3.5rem;
    gap: var(--space-3);
  }

  .shell-nav {
    display: none !important;
  }

  .mobile-nav {
    display: block;
  }

  .page-shell {
    padding-block: var(--space-4) var(--space-6);
    gap: var(--space-4);
    padding-bottom: calc(var(--mobile-nav-height) + var(--space-6) + env(safe-area-inset-bottom, 0));
  }

  .page-header__title {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 47.99rem) {
  html,
  body {
    overflow-x: hidden;
  }

  .app-root {
    padding-block: var(--space-6);
    gap: var(--space-5);
  }

  .app-brand,
  .type-brand {
    font-size: var(--font-size-2xl);
  }

  .runtime__list {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .runtime__list dd {
    margin-bottom: var(--space-3);
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  /* Section header: action wraps below on narrow screens. */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Preview split stacks; metric values stay readable. */
  .preview-split {
    flex-direction: column;
  }

  .preview-split__scores {
    justify-content: flex-start;
  }

  .metric-tile__value {
    font-size: var(--font-size-xl);
    word-break: break-word;
  }

  /* On mobile the drawer becomes a bottom sheet. */
  .overlay--drawer {
    align-items: flex-end;
  }

  .overlay--drawer .overlay__panel {
    width: 100%;
    height: auto;
    max-height: 88dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-inline-start: 0;
    border-top: var(--border-width) solid var(--border-color-strong);
    transform: translateY(0);
  }

  .overlay--drawer.is-closing .overlay__panel {
    transform: translateY(100%);
  }

  .overlay--modal {
    padding: var(--space-3);
  }

  /* Active breakpoint indicator: mobile. */
  .breakpoint-card--mobile {
    border-color: var(--color-positive);
  }
  .breakpoint-indicator--mobile {
    display: inline-block;
  }
}

/* Tablet: 768–1199px */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .breakpoint-card--tablet {
    border-color: var(--color-positive);
  }
  .breakpoint-indicator--tablet {
    display: inline-block;
  }
}

/* Desktop: >= 1200px */
@media (min-width: 75rem) {
  .breakpoint-card--desktop {
    border-color: var(--color-positive);
  }
  .breakpoint-indicator--desktop {
    display: inline-block;
  }
}

/* Touch targets: 44px minimum on coarse pointers. */
@media (pointer: coarse) {
  button,
  .btn,
  input,
  select,
  textarea {
    min-height: 2.75rem;
  }

  .overlay__close {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Prevent the skeleton shimmer from rendering a frozen highlight. */
  .skeleton::after {
    display: none;
  }
}

/* 9. W02 PART 01 — IDX Reference Data dev preview ---------- */

.reference-view__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.reference-view__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.ref-dl {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.ref-dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--border-color);
}

.ref-dl > div:last-child {
  border-bottom: 0;
}

.ref-dl dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.ref-dl dd {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.ref-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  align-content: start;
}

.ref-errors {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  color: var(--color-negative);
  font-size: var(--font-size-sm);
}

.ref-table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.ref-table th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--border-color);
  white-space: nowrap;
}

.ref-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--border-color);
  color: var(--color-text-primary);
  vertical-align: top;
}

.ref-table tbody tr:last-child td {
  border-bottom: 0;
}

.ref-table tbody tr:nth-child(even) {
  background: var(--color-surface-2);
}

/* 9.1 W03 PART 03 — compact simulation playback control ------- */

.simulation-control {
  min-width: 0;
  overflow: hidden;
}

.simulation-control__header {
  align-items: flex-start;
  justify-content: space-between;
}

.simulation-control__summary {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(8rem, 0.5fr) minmax(15rem, 1.2fr);
  gap: var(--space-4);
  align-items: end;
  margin-top: var(--space-4);
}

.simulation-control__summary > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.simulation-control__time {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.simulation-control__id {
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.simulation-control__timeline {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-1) var(--space-1) var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.simulation-control__checkpoint {
  flex: 0 0 5.8rem;
  min-height: 3.75rem;
  padding: var(--space-2) var(--space-3);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-1);
  text-align: left;
  background: var(--color-surface-2);
  border-color: var(--border-color);
}

.simulation-control__checkpoint:hover,
.simulation-control__checkpoint:focus-visible {
  border-color: var(--color-primary);
}

.simulation-control__checkpoint.is-past {
  color: var(--color-text-secondary);
}

.simulation-control__checkpoint.is-future {
  color: var(--color-text-muted);
}

.simulation-control__checkpoint.is-active {
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.09);
  border-color: rgba(37, 99, 235, 0.46);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.simulation-control__checkpoint-time {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
}

.simulation-control__checkpoint-state {
  color: currentColor;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.simulation-control__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.simulation-control__actions .btn {
  min-width: 6.5rem;
}

@media (max-width: 47.99rem) {
  .simulation-control__header {
    flex-direction: column;
  }

  .simulation-control__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .simulation-control__summary > div:last-child {
    grid-column: 1 / -1;
  }

  .simulation-control__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .simulation-control__actions .btn {
    width: 100%;
    min-width: 0;
  }
}

/* 10. W04 PART 01 — Today / Market Command View ------------ */

.today-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* Compact provider-backed context sits above the primary market story. */
.today-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.today-context__items {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.today-context__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-inline: var(--space-4);
  border-inline-start: var(--border-width) solid var(--border-color);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.today-context__item:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.today-context__item strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.today-context__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.today-context__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.today-context__pulse {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  background: var(--color-primary);
  border: 2px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* IHSG is deliberately larger than every later W04 module. */
.today-hero {
  --today-direction-color: var(--color-text-muted);
  position: relative;
  gap: var(--space-6);
  min-width: 0;
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  overflow: hidden;
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
}

.today-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--color-primary);
}

.today-hero--up {
  --today-direction-color: var(--color-positive);
}

.today-hero--down {
  --today-direction-color: var(--color-negative);
}

.today-hero--flat {
  --today-direction-color: var(--color-text-muted);
}

.today-hero__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.today-hero__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.today-hero__identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.today-hero__identity h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
}

.today-hero__identity span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.today-hero__snapshot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.today-hero__snapshot strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-normal);
}

.today-hero__content {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.55fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: end;
  min-width: 0;
}

.today-hero__quote,
.today-hero__chart {
  min-width: 0;
}

.today-hero__value {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(2.65rem, 5vw, 4.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.today-hero__movement {
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.today-hero__movement .change-indicator__arrow {
  width: 1.65rem;
  height: 1.65rem;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: var(--border-width) solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
}

.today-hero__direction-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.today-hero__change {
  padding-inline-start: var(--space-2);
  border-inline-start: var(--border-width) solid var(--border-color-strong);
}

.today-hero__percent {
  padding: 0.15rem var(--space-2);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-radius: var(--radius-sm);
}

.today-hero__helper {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-hero__reference {
  margin: var(--space-6) 0 0;
}

.today-hero__reference > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 17rem;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-color);
}

.today-hero__reference dt,
.today-hero__reference dd {
  margin: 0;
  font-size: var(--font-size-xs);
}

.today-hero__reference dt {
  color: var(--color-text-muted);
}

.today-hero__reference dd {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.today-hero__chart {
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}

.today-hero__chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.today-hero__chart-header h3 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.today-hero__chart-header p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-hero__observed {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-sparkline {
  display: block;
  width: 100%;
  height: clamp(8.5rem, 16vw, 11.5rem);
  overflow: visible;
}

.today-sparkline__grid-line {
  stroke: var(--border-color);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.today-sparkline__reference-line {
  stroke: var(--color-text-disabled);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}

.today-sparkline__area {
  fill: color-mix(in srgb, var(--today-direction-color) 9%, transparent);
}

.today-sparkline__line {
  fill: none;
  stroke: var(--today-direction-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.today-sparkline__point {
  fill: var(--color-surface-1);
  stroke: var(--today-direction-color);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.today-sparkline__point.is-current {
  fill: var(--today-direction-color);
  stroke: var(--color-surface-1);
  stroke-width: 3;
}

.today-sparkline__timeline {
  display: grid;
  grid-template-columns: repeat(var(--today-point-count), minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: var(--space-2) 0 0;
  border-top: var(--border-width) solid var(--border-color);
  list-style: none;
}

.today-sparkline__timeline li {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.today-sparkline__timeline li:first-child {
  text-align: left;
}

.today-sparkline__timeline li:last-child {
  text-align: right;
}

.today-sparkline__timeline li:only-child {
  text-align: left;
}

.today-sparkline__timeline li.is-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.today-overview__header {
  margin-bottom: var(--space-3);
}

.today-overview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* W04 PART 02 — provider-derived breadth and participation. */
.today-metric-card {
  min-width: 0;
  min-height: 20rem;
  gap: var(--space-5);
  padding: clamp(var(--space-4), 2.2vw, var(--space-6));
  box-shadow: var(--shadow-sm);
}

.today-metric-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.today-metric-card__header > div {
  min-width: 0;
}

.today-metric-card__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.today-metric-card__support {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-metric-card__unavailable {
  display: grid;
  flex: 1 1 auto;
  min-height: 10rem;
  place-items: center;
  padding: var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
  background: var(--color-surface-2);
  border: var(--border-width) dashed var(--border-color-strong);
  border-radius: var(--radius-md);
}

.today-metric-card__unavailable p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.today-breadth__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.today-breadth__metric {
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.today-breadth__metric-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.today-breadth__metric-label span:first-child {
  font-size: var(--font-size-sm);
  line-height: 1;
}

.today-breadth__metric--advancing .today-breadth__metric-label {
  color: var(--color-positive);
}

.today-breadth__metric--declining .today-breadth__metric-label {
  color: var(--color-negative);
}

.today-breadth__metric-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.today-breadth__metric-value strong {
  color: var(--color-text-primary);
  font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-3xl));
  line-height: 1;
}

.today-breadth__metric-value span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-breadth__bar {
  display: flex;
  width: 100%;
  height: 0.7rem;
  overflow: hidden;
  background: var(--color-bg-tertiary);
  border: var(--border-width) solid var(--border-color);
  border-radius: 999px;
}

.today-breadth__segment {
  display: block;
  height: 100%;
  min-width: 0;
}

.today-breadth__segment--advancing {
  background: var(--color-positive);
}

.today-breadth__segment--declining {
  background: var(--color-negative);
}

.today-breadth__segment--unchanged {
  background: var(--color-neutral);
}

.today-breadth__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-color);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-breadth__footer p {
  margin: 0;
}

.today-breadth__footer > span {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.today-participation__summary {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}

.today-participation__value {
  margin: 0;
  color: var(--color-primary);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.today-participation__label {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.today-participation__count {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-participation__bar .intensity-bar__track {
  height: 0.7rem;
  border-radius: 999px;
}

.today-participation__bar .intensity-bar__fill {
  transition: width var(--transition-base);
}

.today-participation__helper {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.today-participation__basis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-color);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-participation__basis span:last-child {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-align: end;
}

.today-unavailable {
  border-radius: var(--radius-lg);
}

.today-loading {
  min-height: 22rem;
  padding: var(--space-6);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
}

.today-loading__head {
  max-width: 18rem;
  margin-bottom: var(--space-6);
}

/* Tablet keeps the two-column overview while giving the chart more room. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .today-context {
    align-items: flex-start;
  }

  .today-context__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 auto;
    gap: var(--space-3) var(--space-5);
  }

  .today-context__item,
  .today-context__item:first-child {
    padding: 0;
    border: 0;
  }

  .today-hero__content {
    grid-template-columns: minmax(13rem, 0.65fr) minmax(0, 1.35fr);
    gap: var(--space-5);
  }
}

/* Mobile is a deliberate vertical market story, not a squeezed dashboard. */
@media (max-width: 47.99rem) {
  .today-view {
    gap: var(--space-5);
  }

  .today-context {
    align-items: flex-start;
    padding: var(--space-4);
  }

  .today-context__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 auto;
    gap: var(--space-4);
  }

  .today-context__item,
  .today-context__item:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: 0;
    border: 0;
  }

  .today-context__item--time {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
  }

  .today-context__item--time strong {
    font-size: var(--font-size-lg);
  }

  .today-context__state {
    display: none;
  }

  .today-hero {
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .today-hero__header {
    flex-direction: column;
  }

  .today-hero__snapshot {
    display: none;
  }

  .today-hero__identity {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .today-hero__content {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .today-hero__value {
    font-size: clamp(2.7rem, 14vw, 3.75rem);
  }

  .today-hero__movement {
    margin-top: var(--space-3);
    font-size: var(--font-size-md);
  }

  .today-hero__reference {
    margin-top: var(--space-5);
  }

  .today-hero__reference > div {
    max-width: none;
  }

  .today-hero__chart {
    margin-inline: calc(var(--space-1) * -1);
    padding: var(--space-3);
  }

  .today-hero__chart-header {
    align-items: flex-end;
  }

  .today-hero__chart-header p {
    display: none;
  }

  .today-sparkline {
    height: 9rem;
  }

  .today-sparkline__timeline li {
    font-size: 0.62rem;
  }

  .today-overview__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-metric-card {
    min-height: 0;
  }

  .today-breadth { order: 1; }
  .today-participation { order: 2; }
}

@media (max-width: 28rem) {
  .today-metric-card__header {
    flex-direction: column;
  }

  .today-breadth__metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-breadth__metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .today-breadth__metric-value {
    min-width: 6.5rem;
    margin-top: 0;
  }

  .today-breadth__metric-value strong {
    font-size: var(--font-size-2xl);
  }

  .today-breadth__footer,
  .today-participation__basis {
    flex-direction: column;
    gap: var(--space-1);
  }

  .today-participation__basis span:last-child {
    text-align: start;
  }
}

@media (max-width: 24.99rem) {
  .today-context__items {
    gap: var(--space-3);
  }

  .today-context__item:last-child strong {
    white-space: normal;
  }

  .today-hero__movement {
    gap: var(--space-1) var(--space-2);
  }

  .today-hero__change {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .today-sparkline__timeline li:not(:first-child):not(:last-child) time {
    font-size: 0;
  }

  .today-sparkline__timeline li:not(:first-child):not(:last-child) time::after {
    content: "•";
    font-size: 0.7rem;
  }
}

/* 11. W04 PART 03 — sector, change, active-name intelligence */

.today-market-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) var(--space-6);
  color: var(--color-text-primary);
  background: var(--color-surface-1);
  border: var(--border-width) solid rgba(37, 99, 235, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.today-market-summary__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.08);
  border: var(--border-width) solid rgba(37, 99, 235, 0.18);
  border-radius: var(--radius-md);
}

.today-market-summary__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.today-market-summary__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.today-market-summary h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.today-market-summary__text {
  max-width: 68rem;
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.today-detail-card {
  min-width: 0;
  min-height: 28rem;
  gap: var(--space-4);
  padding: clamp(var(--space-4), 2.2vw, var(--space-6));
  box-shadow: var(--shadow-sm);
}

.today-detail-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.today-detail-card__header > div {
  min-width: 0;
}

.today-detail-card__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.today-detail-card__support {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.today-detail-card__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.today-detail-card__footnote {
  margin: auto 0 0;
  padding-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  border-top: var(--border-width) solid var(--border-color);
}

/* Sector rows deliberately stay list-like, not a heatmap or rotation map. */
.today-sector__list,
.today-changes__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-sector__list {
  display: flex;
  flex-direction: column;
}

.today-sector__row {
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-color);
}

.today-sector__row:first-child {
  padding-top: 0;
}

.today-sector__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.today-sector__primary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.today-sector__identity {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.today-sector__rank {
  flex: 0 0 auto;
  padding-top: 0.08rem;
  color: var(--color-text-disabled);
  font-size: var(--font-size-xs);
}

.today-sector__identity > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.today-sector__name {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-sector__label {
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

.today-sector__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 0 calc(1.25rem + var(--space-3));
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

.today-sector__meta strong {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.today-sector__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.today-sector__trend--up {
  color: var(--color-positive);
}

.today-sector__trend--down {
  color: var(--color-negative);
}

.today-sector__trend--flat {
  color: var(--color-text-muted);
}

.today-sector__trend--opening {
  color: var(--color-primary);
}

/* What Changed is a short comparison list, intentionally not a feed. */
.today-changes__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.today-what-changed.is-opening .today-changes__list {
  flex: 1 1 auto;
  justify-content: center;
}

.today-changes__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.today-changes__icon {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.today-changes__item--up .today-changes__icon {
  color: var(--color-positive);
  border-color: rgba(5, 150, 105, 0.28);
}

.today-changes__item--down .today-changes__icon {
  color: var(--color-negative);
  border-color: rgba(220, 38, 38, 0.24);
}

.today-changes__item p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

/* Active Now uses clickable intelligence rows, never trading-table density. */
.today-active-now {
  grid-column: 1 / -1;
  min-height: 0;
}

.today-active__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.today-active__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.today-active__row:hover {
  color: inherit;
  background: var(--color-surface-1);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: var(--shadow-sm);
}

.today-active__row:focus-visible {
  border-color: var(--color-primary);
}

.today-active__quote {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.today-active__quote > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.today-active__ticker {
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.today-active__company {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-active__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

.today-active__meta strong {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.today-active__label {
  flex-basis: 100%;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .today-active__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .today-market-summary {
    padding: var(--space-4);
  }

  .today-market-summary__text {
    font-size: var(--font-size-sm);
  }

  .today-detail-card {
    min-height: 0;
  }

  .today-what-changed { order: 3; }
  .today-sector-activity { order: 4; }
  .today-active-now {
    grid-column: auto;
    order: 5;
  }

  .today-active__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 28rem) {
  .today-market-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-market-summary__icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .today-detail-card__header {
    flex-direction: column;
  }

  .today-sector__primary {
    align-items: center;
  }

  .today-sector__meta {
    margin-left: 0;
    padding-left: calc(1.25rem + var(--space-3));
  }

  .today-changes__item {
    padding: var(--space-3);
  }
}

/* 12. W05 PART 03 — Market State + Why explanation ----------- */

.market-state {
  margin-top: var(--space-6);
}

.market-state__header {
  margin-bottom: var(--space-3);
}

.market-state__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.market-state-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}

.market-state-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.market-state-card__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.market-state-card__support {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  max-width: 30rem;
}

.market-state-card__actions {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
}

.market-state-card__unavailable {
  padding: var(--space-6) 0;
}

.market-state-card__unavailable p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Temperature card — activity/intensity colors only. */

.temperature-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.temperature-card__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.temperature-card__value {
  font-size: 3.25rem;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.temperature-card__denominator {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

.temperature-card__state {
  margin-left: auto;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.temperature-card--calm .temperature-card__state { color: var(--activity-calm); }
.temperature-card--normal .temperature-card__state { color: var(--activity-normal); }
.temperature-card--active .temperature-card__state { color: var(--activity-active); }
.temperature-card--hot .temperature-card__state { color: var(--activity-high); }
.temperature-card--extreme .temperature-card__state { color: var(--activity-extreme); }

/* Temperature scale — five configured states, text + color. */

.temperature-scale {
  width: 100%;
}

.temperature-scale__track {
  position: relative;
  display: flex;
  gap: 2px;
  height: 0.5rem;
  border-radius: 999px;
  overflow: visible;
}

.temperature-scale__segment {
  flex: 1 1 0;
  border-radius: 999px;
  opacity: 0.55;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.temperature-scale__segment--calm { background: var(--activity-calm); }
.temperature-scale__segment--normal { background: var(--activity-normal); }
.temperature-scale__segment--active { background: var(--activity-active); }
.temperature-scale__segment--hot { background: var(--activity-high); }
.temperature-scale__segment--extreme { background: var(--activity-extreme); }

.temperature-scale__segment.is-active {
  opacity: 1;
  transform: scaleY(1.4);
}

.temperature-scale__marker {
  position: absolute;
  top: -0.375rem;
  bottom: -0.375rem;
  width: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  pointer-events: none;
}

.temperature-scale__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.temperature-scale__label.is-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

/* Temperature trend — direction-neutral wording. */

.temperature-trend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.temperature-trend__arrow {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-weight: var(--font-weight-bold);
}

.temperature-trend--rising .temperature-trend__arrow {
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-info);
}

.temperature-trend--falling .temperature-trend__arrow {
  background: rgba(100, 116, 139, 0.14);
  color: var(--color-text-secondary);
}

.temperature-trend--stable .temperature-trend__arrow,
.temperature-trend--opening .temperature-trend__arrow {
  background: rgba(100, 116, 139, 0.14);
  color: var(--color-text-secondary);
}

/* Regime card. */

.regime-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.regime-card__label {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.regime-card__explanation {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.regime-card--broad-advance .regime-card__label { color: var(--color-positive); }
.regime-card--broad-decline .regime-card__label { color: var(--color-negative); }
.regime-card--narrow-advance .regime-card__label { color: var(--color-info); }
.regime-card--rotation .regime-card__label { color: var(--rotation-emerging); }
.regime-card--high-volatility .regime-card__label { color: var(--activity-high); }
.regime-card--compression .regime-card__label { color: var(--activity-calm); }
.regime-card--mixed .regime-card__label { color: var(--color-text-secondary); }

.regime-strength {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.regime-strength__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.regime-strength__head strong {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.regime-strength__note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.regime-previous {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.regime-previous__arrow {
  font-weight: var(--font-weight-bold);
  color: var(--color-info);
}

.regime-previous__label {
  color: var(--color-text-muted);
}

.regime-previous strong {
  color: var(--color-text-primary);
}

/* Why explanation overlay content. */

.why-overlay__body {
  padding-bottom: var(--space-2);
}

.why-intro {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.why-reason {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-inline-start: 3px solid var(--color-info);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
}

.why-section-title {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.why-components {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.why-component {
  padding: var(--space-3);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.why-component__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.why-component__name {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.why-component__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.why-component__head strong {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.why-component__meta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.why-component__bar {
  margin-top: var(--space-2);
}

.why-observations {
  margin: 0;
  padding: var(--space-3);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.why-observation {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.why-observation dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.why-observation dd {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.why-classification {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-inline-start: 3px solid var(--color-info);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
}

.why-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.why-checks li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.why-check__mark {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.why-checks li.is-matched .why-check__mark {
  background: rgba(5, 150, 105, 0.12);
  color: var(--color-positive);
}

.why-checks li.is-not-matched .why-check__mark {
  background: rgba(100, 116, 139, 0.12);
  color: var(--color-text-muted);
}

.why-note {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-color);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.why-unavailable {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

/* What Changed — regime/temperature accents. */

.today-changes__item--regime .today-changes__icon {
  color: var(--color-info);
}

.today-changes__item--temperature .today-changes__icon {
  color: var(--activity-high);
}

/* Responsive: Market State stacks below desktop. */

@media (max-width: 47.99rem) {
  .market-state__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-state-card {
    padding: var(--space-4);
  }

  .temperature-card__value {
    font-size: 2.75rem;
  }

  .regime-card__label {
    font-size: var(--font-size-xl);
  }
}

/* ============================================================
   16. MARKET RADAR — SECTOR ACTIVITY MAP (W06 PART 02)

   Activity intensity encoding, light premium theme.
   Colour scale (state, never buy/sell):
     QUIET      light slate
     NORMAL     blue-gray
     ACTIVE     cyan / blue
     HIGH       amber
     VERY HIGH  deeper amber / orange
   State and direction are ALWAYS rendered as text as well, so
   colour is never the only encoding.
   ============================================================ */

.radar-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- Activity state tones ---- */
.activity-tile--quiet,
.activity-rank__row--quiet,
.radar-preview--quiet {
  --_activity-color: #94a3b8;
  --_activity-soft: #f1f5f9;
  --_activity-border: #e2e8f0;
}

.activity-tile--normal,
.activity-rank__row--normal,
.radar-preview--normal {
  --_activity-color: #64748b;
  --_activity-soft: #eef2f7;
  --_activity-border: #dbe3ec;
}

.activity-tile--active,
.activity-rank__row--active,
.radar-preview--active {
  --_activity-color: #0891b2;
  --_activity-soft: #ecfeff;
  --_activity-border: #a5e8f2;
}

.activity-tile--high,
.activity-rank__row--high,
.radar-preview--high {
  --_activity-color: #d97706;
  --_activity-soft: #fffbeb;
  --_activity-border: #fcd9a1;
}

.activity-tile--very-high,
.activity-rank__row--very-high,
.radar-preview--very-high {
  --_activity-color: #c2410c;
  --_activity-soft: #fff7ed;
  --_activity-border: #fbc39a;
}

/* ---- Context strip ---- */
.radar-context {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.radar-context__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.radar-context__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.radar-context__label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.radar-context__item strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.radar-context__note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ---- Map header ---- */
.radar-map {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.radar-map__header {
  margin-bottom: 0;
}

/* ---- Treemap-style tile field ----
   Deterministic 12-column grid. Tile span/height come from the
   activity size tier, so the layout is identical for identical
   data. No true treemap algorithm and no chart library needed. */
.activity-map {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
  grid-auto-flow: dense;
}

.activity-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4);
  text-align: left;
  font: inherit;
  color: var(--color-text-primary);
  background: var(--_activity-soft);
  border: var(--border-width) solid var(--_activity-border);
  border-inline-start: 4px solid var(--_activity-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease,
    border-color 160ms ease;
}

.activity-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.activity-tile:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.activity-tile.is-selected {
  border-color: var(--_activity-color);
  box-shadow: 0 0 0 2px var(--_activity-color) inset, var(--shadow-md);
}

/* Size tiers — higher activity is visually dominant. */
.activity-tile--xl {
  grid-column: span 6;
  min-height: 11rem;
}

.activity-tile--lg {
  grid-column: span 4;
  min-height: 9rem;
}

.activity-tile--md {
  grid-column: span 3;
  min-height: 7.5rem;
}

.activity-tile--sm {
  grid-column: span 2;
  min-height: 6.5rem;
}

.activity-tile__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.activity-tile--xl .activity-tile__name,
.activity-tile--lg .activity-tile__name {
  font-size: var(--font-size-md);
}

.activity-tile__value {
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--_activity-color);
}

.activity-tile--xl .activity-tile__value {
  font-size: 3rem;
}

.activity-tile--lg .activity-tile__value {
  font-size: 2.5rem;
}

.activity-tile--md .activity-tile__value {
  font-size: 2rem;
}

.activity-tile__state {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--_activity-color);
}

.activity-tile__direction {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.activity-tile__price {
  margin-top: auto;
  font-size: var(--font-size-xs);
  opacity: 0.85;
}

.activity-tile--sm .activity-tile__price {
  display: none;
}

/* ---- Legend ---- */
.activity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.activity-legend__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid rgba(15, 23, 42, 0.08);
}

.activity-legend__swatch--quiet { background: #cbd5e1; }
.activity-legend__swatch--normal { background: #94a3b8; }
.activity-legend__swatch--active { background: #22d3ee; }
.activity-legend__swatch--high { background: #f59e0b; }
.activity-legend__swatch--very-high { background: #ea580c; }

/* ---- Ranking + preview grid ---- */
.radar-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* ---- Ranked sector list ---- */
.activity-rank__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.activity-rank__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-2);
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  border-top: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 140ms ease;
}

.activity-rank__item:first-child .activity-rank__row {
  border-top: 0;
}

.activity-rank__row:hover {
  background: var(--color-surface-hover);
}

.activity-rank__row:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.activity-rank__row.is-selected {
  background: var(--_activity-soft);
  box-shadow: inset 3px 0 0 var(--_activity-color);
}

.activity-rank__position {
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-disabled);
}

.activity-rank__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.activity-rank__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-rank__direction {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.activity-rank__metrics {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.activity-rank__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--_activity-color);
}

.activity-rank__price {
  font-size: var(--font-size-xs);
}

.activity-rank__bar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  margin-top: var(--space-1);
  background: var(--color-bg-tertiary);
  border-radius: 999px;
  overflow: hidden;
}

.activity-rank__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--_activity-color);
}

/* Desktop shows the top sectors; mobile reveals the full ranking. */
.activity-rank__item--overflow {
  display: none;
}

/* ---- Selected sector preview ---- */
.radar-preview__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-3);
}

.radar-preview__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.radar-preview__value {
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--_activity-color);
}

.radar-preview__denominator {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.radar-preview__state {
  margin-inline-start: auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--_activity-color);
}

.radar-preview__direction {
  margin: 0;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border-inline-start: 3px solid var(--_activity-color);
  border-radius: var(--radius-md);
}

.radar-preview__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.radar-preview__metrics > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.radar-preview__metrics dt {
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.radar-preview__metrics dd {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.radar-preview__note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* ---- Notes / unavailable ---- */
.radar-unavailable-note,
.radar-method-note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.radar-unavailable {
  padding: var(--space-6);
}

/* ---- Intensity bar tones used by the Why drawer ---- */
.intensity-bar--quiet .intensity-bar__fill { background: #94a3b8; }
.intensity-bar--normal .intensity-bar__fill { background: #64748b; }
.intensity-bar--very-high .intensity-bar__fill { background: #c2410c; }

/* ---- Status badge tones for W06 states ---- */
.status-badge--quiet {
  --_badge-bg: rgba(148, 163, 184, 0.16);
  --_badge-fg: #475569;
  --_badge-border: rgba(148, 163, 184, 0.32);
}

.status-badge--very-high {
  --_badge-bg: rgba(194, 65, 12, 0.12);
  --_badge-fg: #c2410c;
  --_badge-border: rgba(194, 65, 12, 0.28);
}

/* ============================================================
   Radar responsive behaviour.
   Tablet: fewer, larger tiles; detail stacks.
   Mobile: NO miniature treemap — ranked rows carry the meaning.
   ============================================================ */

/* Small desktop / large tablet — reduce the tier spread. */
@media (max-width: 74.99rem) {
  .activity-tile--xl { grid-column: span 6; }
  .activity-tile--lg { grid-column: span 6; }
  .activity-tile--md { grid-column: span 4; }
  .activity-tile--sm { grid-column: span 4; }

  /* The shell's tablet range runs to 74.99rem. Ranking + detail side by
     side gets cramped below desktop, so the detail stacks under the map
     across the whole tablet range (governance §32), not just <64rem. */
  .radar-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tablet — 2–3 columns, detail stacks below, labels stay readable. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .radar-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .activity-tile--xl,
  .activity-tile--lg {
    grid-column: span 6;
    min-height: 9rem;
  }

  .activity-tile--md,
  .activity-tile--sm {
    grid-column: span 4;
    min-height: 7rem;
  }

  .activity-tile--xl .activity-tile__value {
    font-size: 2.5rem;
  }

  .radar-preview__metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Mobile — the map becomes ranked rows. Meaning is preserved,
   desktop geometry is not forced into a cramped grid. */
@media (max-width: 47.99rem) {
  .radar-view {
    gap: var(--space-5);
  }

  .radar-context {
    padding: var(--space-4);
  }

  .radar-context__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  /* The tile field is hidden; the ranked list is the map on mobile. */
  .radar-map {
    display: none;
  }

  .radar-detail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  /* Every sector is reachable on mobile, not just the top six. */
  .activity-rank__item--overflow {
    display: block;
  }

  .activity-rank__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    /* Comfortable touch target. */
    min-height: 3.25rem;
    padding: var(--space-3) var(--space-2);
  }

  .activity-rank__price {
    grid-column: 2 / -1;
    margin-top: -2px;
  }

  .activity-rank__value {
    font-size: var(--font-size-xl);
  }

  .radar-preview__value {
    font-size: 2.5rem;
  }

  .radar-preview__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radar-preview .btn,
  .market-state-card__actions .btn {
    width: 100%;
    min-height: 2.75rem;
  }
}

@media (max-width: 28rem) {
  .radar-context__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .radar-preview__metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   17. RADAR — SECTOR DRILL-DOWN & STOCK ACTIVITY (W06 PART 03)
   Activity components + "Stocks Driving Activity".
   Light theme only; activity remains the primary meaning and
   price direction stays restrained secondary context.
   ============================================================ */

/* ---- Activity component breakdown ---- */
.activity-components {
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border-color);
}

.activity-components__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.activity-components__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.activity-component__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.activity-component__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.activity-component__flag {
  padding: 1px var(--space-2);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  border-radius: 999px;
}

.activity-component__flag--strong {
  color: var(--_activity-color, var(--color-primary));
  background: var(--_activity-soft, var(--color-bg-secondary));
}

.activity-component__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.activity-component__weight {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* ---- Stocks Driving Activity ---- */
.radar-stocks {
  display: block;
}

.activity-stock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.activity-stock__row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-2);
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  border-top: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 140ms ease;
}

.activity-stock__item:first-child .activity-stock__row {
  border-top: 0;
}

.activity-stock__row:hover {
  background: var(--color-surface-hover);
}

.activity-stock__row:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.activity-stock__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.activity-stock__ticker {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.activity-stock__company {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-stock__quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.activity-stock__price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.activity-stock__volume {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-stock__volume-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.activity-stock__volume strong {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* Descriptor: activity language, restrained neutral styling —
   deliberately NOT a green/red buy-sell signal. */
.activity-stock__descriptor {
  justify-self: end;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  border-radius: 999px;
  color: #475569;
  background: #f1f5f9;
  border: var(--border-width) solid #e2e8f0;
}

.activity-stock__descriptor--elevated {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fbc39a;
}

.activity-stock__descriptor--active {
  color: #b45309;
  background: #fffbeb;
  border-color: #fcd9a1;
}

.activity-stock__descriptor--moderate {
  color: #0e7490;
  background: #ecfeff;
  border-color: #a5e8f2;
}

/* ---- Tablet ---- */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .activity-stock__row {
    grid-template-columns: minmax(7rem, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--space-2);
  }
}

/* ---- Mobile: compact vertical rows, no wide table ---- */
@media (max-width: 47.99rem) {
  .activity-stock__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "identity quote"
      "volume descriptor";
    gap: var(--space-2) var(--space-3);
    min-height: 3.25rem;
    padding: var(--space-3) var(--space-2);
  }

  .activity-stock__identity { grid-area: identity; }
  .activity-stock__quote {
    grid-area: quote;
    align-items: flex-end;
  }
  .activity-stock__volume {
    grid-area: volume;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
  }
  .activity-stock__descriptor {
    grid-area: descriptor;
    justify-self: end;
  }

  .activity-components__list {
    gap: var(--space-3);
  }

  /* Bottom sheet must clear the mobile navigation bar. */
  .overlay--drawer .overlay__panel {
    padding-bottom: calc(
      var(--space-6) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0)
    );
  }
}

@media (max-width: 28rem) {
  .activity-stock__descriptor {
    font-size: 0.6875rem;
    padding: 2px var(--space-2);
  }
}

/* Today -> Market Radar entry point (W06 PART 04, governance §42).
   A link only: the full Activity Map is never duplicated on Today. */
.today-sector__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.today-sector__footer .today-detail-card__footnote {
  flex: 1 1 16rem;
  margin: 0;
}

.today-sector__link {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 47.99rem) {
  .today-sector__link {
    width: 100%;
    min-height: 2.75rem;
  }
}

/* ============================================================
   ARUS — W07 PART 02
   Sector Rotation Radar — sub-view tabs, lifecycle columns,
   sector cards, opening state, summary. Light theme, follows the
   existing radar design system. Lifecycle color is always paired
   with text; color is never the only encoding.
   ============================================================ */

/* ---- Radar sub-view tabs (segmented control) ---- */
.radar-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: fit-content;
  max-width: 100%;
}

.radar-tabs__button {
  appearance: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) - var(--space-1));
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.radar-tabs__button:hover {
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.06);
}

.radar-tabs__button[aria-selected="true"] {
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.radar-tabs__button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.radar-subview[hidden] {
  display: none !important;
}

/* ---- Rotation view ---- */
.rotation-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.rotation-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}

.rotation-header__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.rotation-header__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.rotation-header__support {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rotation-header__context {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* ---- Lifecycle summary pills ---- */
.rotation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rotation-summary__pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--color-surface-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rotation-summary__pill strong {
  font-size: var(--font-size-md);
  color: var(--color-text);
}

.rotation-summary__pill--emerging { border-color: rgba(8, 145, 178, 0.35); }
.rotation-summary__pill--building { border-color: rgba(37, 99, 235, 0.35); }
.rotation-summary__pill--leading { border-color: rgba(13, 148, 136, 0.4); }
.rotation-summary__pill--cooling { border-color: rgba(217, 119, 6, 0.4); }
.rotation-summary__pill--fading { border-color: rgba(148, 163, 184, 0.5); }
.rotation-summary__pill--opening { border-color: rgba(100, 116, 139, 0.4); }

/* ---- Current leaders ---- */
.rotation-leaders__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rotation-leader-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(13, 148, 136, 0.35);
  border-radius: 999px;
  background: rgba(13, 148, 136, 0.06);
  color: #0f766e;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.rotation-leader-chip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rotation-leading);
}

/* ---- Lifecycle columns (desktop: five) ---- */
.rotation-radar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.rotation-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.rotation-column--emerging {
  --_rot: var(--rotation-emerging);
  --_rot-soft: #ecfeff;
  --_rot-border: #a5e8f2;
}

.rotation-column--building {
  --_rot: var(--rotation-building);
  --_rot-soft: #eff6ff;
  --_rot-border: #bfdbfe;
}

.rotation-column--leading {
  --_rot: var(--rotation-leading);
  --_rot-soft: #f0fdfa;
  --_rot-border: #99f6e4;
}

.rotation-column--cooling {
  --_rot: var(--rotation-cooling);
  --_rot-soft: #fffbeb;
  --_rot-border: #fde68a;
}

.rotation-column--fading {
  --_rot: var(--rotation-fading);
  --_rot-soft: #f8fafc;
  --_rot-border: #e2e8f0;
}

.rotation-column--leading {
  border-color: var(--_rot-border);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.12), var(--shadow-sm);
}

.rotation-column__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
}

.rotation-column__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--_rot);
}

.rotation-column--leading .rotation-column__name {
  font-size: var(--font-size-lg);
}

.rotation-column__count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rotation-column__count::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--_rot);
  margin-right: var(--space-2);
  vertical-align: middle;
}

.rotation-column__meaning {
  grid-column: 1 / -1;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.rotation-column__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---- Sector card ---- */
.rotation-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--color-surface-1);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--_rot);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rotation-card:hover {
  border-color: var(--_rot-border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.rotation-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.rotation-card.is-selected {
  border-color: var(--_rot);
  box-shadow: 0 0 0 2px var(--_rot-soft), 0 0 0 3px var(--_rot);
}

.rotation-card--leading {
  background: var(--_rot-soft);
}

.rotation-card--leading .rotation-card__score .nums {
  font-size: 1.6rem;
}

.rotation-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.rotation-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.rotation-card__lifecycle {
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  color: var(--_rot);
  text-transform: uppercase;
  white-space: nowrap;
}

.rotation-card__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.rotation-card__score .nums {
  font-size: 1.35rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.rotation-card__unit {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rotation-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rotation-card__rank strong {
  color: var(--color-text);
}

.rotation-card__direction {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.rotation-card__price {
  margin-left: auto;
}

.rotation-card__transition {
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: var(--space-1) var(--space-2);
  width: fit-content;
}

/* ---- Opening banner ---- */
.rotation-opening__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.rotation-opening__text {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rotation-opening__note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- Rotation preview ---- */
.rotation-preview--leading { border-color: rgba(13, 148, 136, 0.35); }

.rotation-rank-change {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rotation-preview__explanation {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.55;
}

/* Why reasons list */
.why-reasons {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.why-reasons li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.why-reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ---- Responsive: rotation radar ----
   Desktop (>=75rem): five lifecycle columns (base rule above).
   Tablet wide 64–74.99rem: three columns.
   Tablet 48–63.99rem: two columns.
   Mobile (<48rem): stacked lifecycle groups in importance order
   (LEADING → BUILDING → EMERGING → COOLING → FADING — same as DOM
   order). At 09:00 the Opening state renders first. */

@media (max-width: 74.99rem) {
  .rotation-radar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .rotation-radar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .rotation-radar {
    grid-template-columns: minmax(0, 1fr);
  }

  .radar-tabs {
    width: 100%;
  }

  .radar-tabs__button {
    flex: 1 1 0;
    text-align: center;
    padding: var(--space-2) var(--space-2);
    font-size: var(--font-size-xs);
  }

  .rotation-header__title-row {
    flex-direction: column;
  }

  .rotation-preview__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   ARUS — W07 PART 03
   Rotation timeline & sector detail — lifecycle timeline,
   activity/rank history, sparkline, Why this stage?, component
   context. Light theme; lifecycle color always paired with text.
   ============================================================ */

.rotation-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---- Recent Change ---- */
.rotation-recent-change__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.rotation-recent-change__opening {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rotation-recent-change__list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.rotation-recent-change__list div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.rotation-recent-change__list dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rotation-recent-change__list dd {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* ---- Lifecycle timeline (vertical, current point marked) ---- */
.rotation-timeline {
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.rotation-timeline__step {
  --_rot: var(--color-neutral);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  position: relative;
}

.rotation-timeline__step:last-child {
  padding-bottom: 0;
}

.rotation-timeline__step--emerging { --_rot: var(--rotation-emerging); }
.rotation-timeline__step--building { --_rot: var(--rotation-building); }
.rotation-timeline__step--leading { --_rot: var(--rotation-leading); }
.rotation-timeline__step--cooling { --_rot: var(--rotation-cooling); }
.rotation-timeline__step--fading { --_rot: var(--rotation-fading); }
.rotation-timeline__step--opening { --_rot: var(--color-neutral); }

.rotation-timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
  width: 1.25rem;
}

.rotation-timeline__rail::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: -0.75rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--border-color-strong);
}

.rotation-timeline__step:last-child .rotation-timeline__rail::before {
  display: none;
}

.rotation-timeline__dot {
  position: relative;
  z-index: 1;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--_rot);
  border: 2px solid var(--color-surface-1);
  box-shadow: 0 0 0 1px var(--_rot);
  margin-top: 0.2rem;
}

.rotation-timeline__step.is-current .rotation-timeline__dot {
  box-shadow: 0 0 0 3px var(--_rot), 0 0 0 4px rgba(15, 23, 42, 0.12);
}

.rotation-timeline__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.rotation-timeline__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rotation-timeline__head time {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.rotation-timeline__current {
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 999px;
  padding: var(--space-1) var(--space-2);
}

.rotation-timeline__metrics {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.rotation-timeline__metrics strong {
  color: var(--color-text);
}

.rotation-timeline__sep {
  color: var(--color-text-disabled);
}

/* ---- Activity & Rank History ---- */
.rotation-history {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
}

.rotation-history__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  align-items: baseline;
}

.rotation-history__row:first-child {
  border-top: 0;
}

.rotation-history__row time {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.rotation-history__cell {
  color: var(--color-text-muted);
}

.rotation-history__cell strong {
  color: var(--color-text);
}

/* ---- Sparkline ---- */
.rotation-sparkline-wrap {
  padding: var(--space-3) var(--space-4) var(--space-1);
}

.rotation-sparkline {
  display: block;
  width: 100%;
  height: auto;
}

.rotation-sparkline polyline {
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rotation-sparkline circle {
  fill: var(--color-primary);
}

/* ---- Why this stage? (inline) ---- */
.rotation-why-card__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rotation-why-card__summary {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.55;
}

/* ---- Component context ---- */
.rotation-components .activity-components {
  padding: 0 var(--space-4) var(--space-4);
}

.rotation-components .activity-components__title {
  padding: var(--space-3) var(--space-4) 0;
}

/* ---- Mobile: detail stacks, history rows compact ---- */
@media (max-width: 47.99rem) {
  .rotation-timeline {
    padding: var(--space-3);
  }

  .rotation-history__row {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
  }

  .rotation-recent-change__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   ARUS — W08 Stock Activity score state badges & progress bars
   ============================================================ */
.status-badge--low {
  --_badge-bg: rgba(148, 163, 184, 0.16);
  --_badge-fg: #64748b;
  --_badge-border: rgba(148, 163, 184, 0.32);
}
.status-badge--exceptional {
  --_badge-bg: rgba(13, 148, 136, 0.16);
  --_badge-fg: #0d9488;
  --_badge-border: rgba(13, 148, 136, 0.32);
}

.intensity-bar--low .intensity-bar__fill {
  background: #94a3b8;
}
.intensity-bar--exceptional .intensity-bar__fill {
  background: #0d9488;
}
.intensity-bar--volume .intensity-bar__fill {
  background: var(--color-primary);
}
.intensity-bar--intensity .intensity-bar__fill {
  background: #0ea5e9;
}
.intensity-bar--range .intensity-bar__fill {
  background: #f59e0b;
}
.intensity-bar--volatility .intensity-bar__fill {
  background: #8b5cf6;
}
.intensity-bar--movement .intensity-bar__fill {
  background: #ec4899;
}
.intensity-bar--acceleration .intensity-bar__fill {
  background: #10b981;
}


/* 13. W09 PART 03 — Broker Intelligence UI ------------------- */
/* Stock Detail sub-view tabs (Activity | Broker) and the Broker
   Intelligence panel. Light theme only: white surfaces, dark navy
   type, blue/cyan accents, restrained positive/negative net-value
   colour. No dark order-flow terminal styling. */

.stock-detail-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  margin-bottom: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: fit-content;
  max-width: 100%;
}

.stock-detail-tabs__button {
  appearance: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) - var(--space-1));
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.stock-detail-tabs__button:hover {
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.06);
}

.stock-detail-tabs__button[aria-selected="true"] {
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.stock-detail-tabs__button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.stock-detail-panel[hidden] {
  display: none !important;
}

/* ---- Panel header / disclosure ---- */
.broker-panel__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.broker-panel__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.broker-panel__support {
  margin: 2px 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.broker-panel__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.broker-panel__disclosure {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
}

.broker-tag {
  display: inline-block;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  color: var(--color-text);
}

/* ---- Summary cards ---- */
.broker-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.broker-summary-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.broker-summary-card__label {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.broker-summary-card__value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.25;
}

.broker-summary-card__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ---- Sections ---- */
.broker-section {
  margin-bottom: var(--space-5);
}

.broker-section__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.broker-section__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.broker-section__head .broker-section__title {
  margin-bottom: 0;
}

.broker-section__support {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.broker-empty {
  margin: 0;
  padding: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.broker-subtle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.broker-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Concentration bar ---- */
.broker-conc-bar {
  display: flex;
  width: 100%;
  height: 10px;
  overflow: hidden;
  background: var(--color-surface-2);
  border-radius: 999px;
  border: 1px solid var(--border-color);
}

.broker-conc-bar__seg {
  display: block;
  height: 100%;
}

.broker-conc-bar__seg--top3 {
  background: var(--color-primary);
}

.broker-conc-bar__seg--next {
  background: #38bdf8;
}

.broker-conc-bar__seg--rest {
  background: #cbd5e1;
}

.broker-conc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.broker-conc-legend strong {
  color: var(--color-text);
}

.broker-conc-legend__key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: middle;
}

.broker-conc-legend__key--top3 {
  background: var(--color-primary);
}

.broker-conc-legend__key--next {
  background: #38bdf8;
}

.broker-conc-legend__key--rest {
  background: #cbd5e1;
}

.broker-why-line {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.broker-why-line__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* ---- Consensus counts ---- */
.broker-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.broker-count {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.broker-count dt {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.broker-count dd {
  margin: 2px 0 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* ---- Dominant buying / selling ---- */
.broker-dominant {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.broker-dominant__item {
  position: relative;
  padding: var(--space-3);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.broker-dominant__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.broker-code {
  font-family: var(--font-family-mono, inherit);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.broker-name {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.broker-dominant__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.broker-dominant__metrics dt,
.broker-detail__metrics dt {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.broker-dominant__metrics dd,
.broker-detail__metrics dd {
  margin: 2px 0 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* ---- Net value accents (restrained, never the only encoding) ---- */
.broker-net--positive {
  color: var(--color-positive);
}

.broker-net--negative {
  color: var(--color-negative);
}

.broker-net--flat {
  color: var(--color-text);
}

/* ---- Behaviour changes ---- */
.broker-changes {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.broker-changes li + li {
  margin-top: var(--space-1);
}

/* ---- Broker activity table ---- */
.broker-table-wrap {
  overflow-x: auto;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.broker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.broker-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: var(--border-width) solid var(--border-color);
  white-space: nowrap;
}

.broker-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  color: var(--color-text);
}

.broker-table th.nums,
.broker-table td.nums {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

.broker-table__row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.broker-table__row:hover {
  background: rgba(37, 99, 235, 0.05);
}

.broker-table__row.is-selected {
  background: rgba(37, 99, 235, 0.09);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.broker-table__row:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.broker-table td .broker-subtle {
  display: block;
}

.broker-table--compact td,
.broker-table--compact th {
  padding: var(--space-1) var(--space-3);
}

/* ---- Broker cards (mobile) ---- */
.broker-cards {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
}

.broker-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  font: inherit;
  padding: var(--space-3);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.broker-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.broker-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.broker-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.broker-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.broker-card__metrics > span {
  display: flex;
  flex-direction: column;
}

.broker-card__label {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.broker-card__cta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* ---- Broker detail preview ---- */
.broker-detail {
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-md);
}

.broker-detail:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.broker-detail__close {
  appearance: none;
  font: inherit;
  font-size: var(--font-size-lg);
  line-height: 1;
  min-width: 32px;
  min-height: 32px;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.broker-detail__close:hover {
  color: var(--color-text);
  background: var(--color-surface-1);
}

.broker-detail__close:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.broker-detail__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.broker-detail__subtitle {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* ---- Why section ---- */
.broker-why__sides,
.broker-why__source {
  margin-top: var(--space-3);
}

.broker-why__reasons {
  margin-top: var(--space-3);
}

.broker-why__note {
  margin-top: var(--space-3);
}

/* ---- Compact broker indicator (Today / Discover) ---- */
.broker-indicator {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.broker-indicator__label {
  font-weight: var(--font-weight-semibold);
}

.broker-indicator__value {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* ---- Responsive: tablet ---- */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .broker-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 47.99rem) {
  .broker-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .broker-counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  /* Broker rows become cards; the wide table is never shown. */
  .broker-desktop-only {
    display: none !important;
  }

  .broker-cards {
    display: flex;
  }

  .broker-card {
    min-height: 44px;
  }

  .broker-detail__close {
    min-width: 44px;
    min-height: 44px;
  }

  .stock-detail-tabs {
    width: 100%;
  }

  .stock-detail-tabs__button {
    flex: 1 1 0;
    min-height: 44px;
  }
}

@media (min-width: 48rem) {
  .broker-mobile-only {
    display: none !important;
  }
}

@media (max-width: 28rem) {
  .broker-summary-grid {
    grid-template-columns: 1fr;
  }

  .broker-card__metrics {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ARUS — W14 PART 01C — Prediction UI Component Foundation
   Presentation only. Components consume PredictionUIReadModel values;
   no prediction or probability logic is defined in CSS.
   ============================================================ */
.prediction-ui-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.prediction-ui-field__label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.prediction-ui-field__value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
}

.prediction-ui-field__value--probability {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}

.prediction-ui-field__support {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.prediction-ui-field--tone-positive {
  border-color: rgba(5, 150, 105, 0.35);
}

.prediction-ui-field--tone-warning {
  border-color: rgba(217, 119, 6, 0.35);
}

.prediction-ui-field--tone-neutral {
  border-color: var(--border-color);
}

.prediction-ui-probability {
  font-variant-numeric: tabular-nums;
}

.prediction-ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.prediction-ui-status__dot {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.prediction-ui-field--tone-positive .prediction-ui-status {
  color: var(--color-positive);
}

.prediction-ui-field--tone-warning .prediction-ui-status {
  color: var(--color-warning);
}

.prediction-ui-field--tone-neutral .prediction-ui-status {
  color: var(--color-neutral);
}

@media (max-width: 47.99rem) {
  .prediction-ui-field {
    padding: var(--space-3);
  }

  .prediction-ui-field__value--probability {
    font-size: var(--font-size-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prediction-ui-field,
  .prediction-ui-status {
    transition: none;
  }
}

/* ============================================================
   ARUS — W14 PART 02A — Today Prediction Intelligence
   Layout only. Ranking and prediction data remain upstream.
   ============================================================ */
.today-prediction-intelligence {
  min-width: 0;
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}

.today-prediction-intelligence__header {
  margin-bottom: var(--space-3);
}

.today-prediction-intelligence__view-all {
  flex: 0 0 auto;
  white-space: nowrap;
}

.today-prediction-intelligence__top-label {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.today-prediction-intelligence__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.today-prediction-intelligence__meta .prediction-ui-field {
  min-width: 0;
}

.today-prediction-intelligence__data-status {
  flex: 0 1 auto;
  min-width: 12rem;
}

.today-prediction-intelligence__data-status .prediction-ui-field {
  padding: var(--space-2) var(--space-3);
}

.today-prediction-intelligence__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-3);
}

a.today-prediction-card {
  color: inherit;
  text-decoration: none;
}

a.today-prediction-card:hover {
  color: inherit;
  text-decoration: none;
}

a.today-prediction-card:hover,
a.today-prediction-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

a.today-prediction-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.today-prediction-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.today-prediction-card__header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.today-prediction-card__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.today-prediction-card__rank {
  flex: 0 0 auto;
  padding: 0.15rem var(--space-2);
  color: var(--color-primary);
  background: var(--color-primary-ring);
  border: var(--border-width) solid rgba(37, 99, 235, 0.24);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.today-prediction-card__company {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-prediction-card__probability .prediction-ui-field {
  background: var(--color-surface-1);
}

.today-prediction-card__context,
.today-prediction-card__statuses {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.today-prediction-card__statuses {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.today-prediction-card__context .prediction-ui-field,
.today-prediction-card__statuses .prediction-ui-field {
  min-width: 0;
  padding: var(--space-2);
}

.today-prediction-card__statuses .prediction-ui-field__label,
.today-prediction-card__context .prediction-ui-field__label {
  font-size: 0.65rem;
}

.today-prediction-card__statuses .prediction-ui-field__value,
.today-prediction-card__context .prediction-ui-field__value {
  font-size: var(--font-size-xs);
}

.today-prediction-intelligence__state {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-md);
}

.today-prediction-intelligence__state strong {
  color: var(--color-text-primary);
}

.today-prediction-intelligence__state span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.today-prediction-intelligence__state--loading {
  border-style: solid;
}

.today-prediction-intelligence__state--stale {
  border-color: rgba(217, 119, 6, 0.45);
  background: rgba(217, 119, 6, 0.06);
}

@media (max-width: 63.99rem) {
  .today-prediction-card__statuses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .today-prediction-intelligence {
    margin-top: var(--space-4);
    padding: var(--space-3);
  }

  .today-prediction-intelligence__meta,
  .today-prediction-card__context,
  .today-prediction-card__statuses {
    grid-template-columns: 1fr;
  }

  .today-prediction-intelligence__data-status {
    flex-basis: 100%;
    min-width: 0;
  }

  .today-prediction-intelligence__view-all {
    width: 100%;
    text-align: center;
  }

  .today-prediction-card__header {
    flex-direction: column;
  }
}

@media (max-width: 28rem) {
  .today-prediction-intelligence__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   ARUS — W14 PART 03A — Predictions Page Shell
   Shell/context presentation only; no full ranking table yet.
   ============================================================ */
.predictions-page {
  min-width: 0;
  width: 100%;
}

.predictions-page__shell {
  max-width: 64rem;
  margin-inline: auto;
}

.predictions-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.predictions-page__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.predictions-page__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-3xl);
}

.predictions-page__identity {
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.predictions-page__probability {
  max-width: 24rem;
  margin-bottom: var(--space-4);
}

/* Shared page-level prediction context: metadata that is common to every
   ranked prediction is shown once here instead of on each ranking card. */
.predictions-page__shared-context {
  min-width: 0;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.predictions-page__shared-context-header {
  margin-bottom: var(--space-3);
}

.predictions-page__shared-context-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-md);
}

.predictions-page__shared-context-support {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.predictions-page__context,
.predictions-page__statuses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.predictions-page__context + .predictions-page__statuses {
  margin-top: var(--space-3);
}

.predictions-page__context .prediction-ui-field,
.predictions-page__statuses .prediction-ui-field {
  min-width: 0;
}

.predictions-page__state {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
}

.predictions-page__state strong {
  color: var(--color-text-primary);
}

.predictions-page__state span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.predictions-page__state--loading {
  border-style: solid;
}

.predictions-page__state--stale {
  border-color: rgba(217, 119, 6, 0.45);
  background: rgba(217, 119, 6, 0.06);
}

.predictions-page__boundary {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-color);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

@media (max-width: 47.99rem) {
  .predictions-page__shell {
    padding: var(--space-4);
  }

  .predictions-page__header {
    margin-bottom: var(--space-4);
  }

  .predictions-page__title {
    font-size: var(--font-size-2xl);
  }

  .predictions-page__shared-context {
    padding: var(--space-3);
  }

  .predictions-page__context,
  .predictions-page__statuses {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ARUS — W14 PART 03B — Full Prediction Ranking
   Shared ranked collection from PredictionRankingService only.
   ============================================================ */
.predictions-page__ranking {
  max-width: 80rem;
  margin: var(--space-5) auto 0;
  padding: var(--space-5);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}

.predictions-page__ranking-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.predictions-page__ranking-header h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-xl);
}

.predictions-page__ranking-header p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.predictions-page__count {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.predictions-page__table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.predictions-page__table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  text-align: left;
}

.predictions-page__table th {
  padding: var(--space-3);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: var(--border-width) solid var(--border-color-strong);
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.predictions-page__table td {
  padding: var(--space-3);
  color: var(--color-text-secondary);
  border-bottom: var(--border-width) solid var(--border-color);
  vertical-align: middle;
}

.predictions-page__table-row:last-child td {
  border-bottom: 0;
}

.predictions-page__table-row:hover td,
.predictions-page__table-row:focus-within td {
  background: var(--color-surface-2);
}

.predictions-page__rank {
  width: 4rem;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.predictions-page__identity-cell {
  min-width: 12rem;
}

.predictions-page__row-link {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--color-text-primary);
  text-decoration: none;
}

.predictions-page__row-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.predictions-page__row-link:focus-visible {
  border-radius: var(--radius-sm);
  outline-offset: 3px;
}

.predictions-page__company {
  max-width: 14rem;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.predictions-page__component-cell {
  min-width: 10rem;
}

.predictions-page__component-cell .prediction-ui-field {
  min-width: 8rem;
  padding: 0;
  background: transparent;
  border: 0;
}

.predictions-page__component-cell .prediction-ui-field__support {
  display: none;
}

.predictions-page__component-cell .prediction-ui-field__value--probability {
  font-size: var(--font-size-md);
}

.predictions-page__sector {
  min-width: 10rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.predictions-page__same-as-page {
  color: var(--color-text-muted);
}

.predictions-page__detail-cell {
  min-width: 9rem;
  white-space: nowrap;
}

.predictions-page__detail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
}

.predictions-page__detail-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.predictions-page__detail-link:focus-visible {
  border-radius: var(--radius-sm);
  outline-offset: 3px;
}

.predictions-page__mobile-list {
  display: none;
}

.predictions-page__mobile-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  color: inherit;
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.predictions-page__mobile-card:hover {
  color: inherit;
  text-decoration: none;
  border-color: var(--color-primary);
}

.predictions-page__mobile-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.predictions-page__mobile-card-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.predictions-page__mobile-rank {
  padding: 0.15rem var(--space-2);
  color: var(--color-primary);
  background: var(--color-primary-ring);
  border: var(--border-width) solid rgba(37, 99, 235, 0.24);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* Probability stays visually prominent on the compact ranking card while
   per-card support text is reserved for the shared context section. */
.predictions-page__mobile-probability {
  min-width: 0;
}

.predictions-page__mobile-probability .prediction-ui-field {
  min-width: 0;
  padding: 0;
  gap: var(--space-1);
  background: transparent;
  border: 0;
}

.predictions-page__mobile-probability .prediction-ui-field__support {
  display: none;
}

.predictions-page__mobile-probability .prediction-ui-field__value--probability {
  font-size: var(--font-size-2xl);
}

/* Record-specific metadata renders on a card only when it differs from the
   shared page context; identical values are never repeated here. */
.predictions-page__card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width) dashed var(--border-color-strong);
  border-radius: var(--radius-sm);
}

.predictions-page__card-meta-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.predictions-page__card-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-2);
}

.predictions-page__card-meta .prediction-ui-field {
  min-width: 0;
  padding: var(--space-2);
}

.predictions-page__card-meta .prediction-ui-field__support {
  display: none;
}

.predictions-page__mobile-sector {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.predictions-page__mobile-detail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: 0.4rem var(--space-3);
  background: var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-on-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
}

.predictions-page__mobile-detail::after {
  content: "\2192";
  font-size: var(--font-size-sm);
  line-height: 1;
}

.predictions-page__mobile-card:hover .predictions-page__mobile-detail,
.predictions-page__mobile-card:focus-visible .predictions-page__mobile-detail {
  background: var(--color-primary-hover);
}

.predictions-page__state--partial {
  border-color: rgba(217, 119, 6, 0.45);
  background: rgba(217, 119, 6, 0.06);
}

@media (max-width: 63.99rem) {
  .predictions-page__ranking {
    padding: var(--space-4);
  }
}

@media (max-width: 47.99rem) {
  .predictions-page__ranking {
    margin-top: var(--space-4);
    padding: var(--space-3);
  }

  .predictions-page__ranking-header {
    flex-direction: column;
    gap: var(--space-2);
  }

  .predictions-page__table-wrap {
    display: none;
  }

  .predictions-page__mobile-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .predictions-page__card-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ARUS — W14 PART 03C — Prediction Search & View Filters
   View filtering only. No alternate sort or production threshold.
   ============================================================ */
.predictions-page__filters {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.predictions-page__filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.predictions-page__filters-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
}

.predictions-page__clear {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
}

.predictions-page__filter-grid {
  display: grid;
  grid-template-columns: minmax(12rem, 1.5fr) repeat(3, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.predictions-page__filter-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.predictions-page__filter-field input,
.predictions-page__filter-field select {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: var(--font-weight-regular);
}

.predictions-page__filter-field input:focus-visible,
.predictions-page__filter-field select:focus-visible,
.predictions-page__clear:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.predictions-page__filter-note,
.predictions-page__filter-count {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.predictions-page__filter-count {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.predictions-page__no-match {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-md);
}

.predictions-page__no-match span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

@media (max-width: 74.99rem) {
  .predictions-page__filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .predictions-page__filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .predictions-page__filters-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .predictions-page__clear {
    width: 100%;
  }
}

/* ============================================================
   ARUS — W14 PART 04A — Stock Prediction Detail Foundation
   Prediction-only panel; no explainability or market context here.
   ============================================================ */
.stock-prediction {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding-top: var(--space-2);
}

.stock-prediction__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.stock-prediction__header h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
}

.stock-prediction__header p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.stock-prediction__metadata {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.stock-prediction__context,
.stock-prediction__statuses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.stock-prediction__statuses {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.stock-prediction__context .prediction-ui-field,
.stock-prediction__statuses .prediction-ui-field {
  min-width: 0;
}

.stock-prediction__state {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-md);
}

.stock-prediction__state strong {
  color: var(--color-text-primary);
}

.stock-prediction__state span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.stock-prediction__state--loading {
  border-style: solid;
}

.stock-prediction__state--stale {
  border-color: rgba(217, 119, 6, 0.45);
  background: rgba(217, 119, 6, 0.06);
}

.stock-prediction__state--error {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.05);
}

@media (max-width: 63.99rem) {
  .stock-prediction__statuses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .stock-prediction__context,
  .stock-prediction__statuses {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ARUS — W14 PART 04B — Model Contribution Explanation
   Actual PredictionEngine.explainLogistic output only.
   ============================================================ */
.stock-prediction__explanation {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-color);
}

.stock-prediction__explanation-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.stock-prediction__explanation h4,
.stock-prediction__factor-group h5 {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.stock-prediction__explanation h4 {
  font-size: var(--font-size-md);
}

.stock-prediction__factor-group h5 {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

.stock-prediction__explanation-header p,
.stock-prediction__explanation-note,
.stock-prediction__explanation-disclosure,
.stock-prediction__explanation-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.stock-prediction__explanation-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.stock-prediction__factors {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stock-prediction__factor {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-left: 3px solid var(--color-neutral);
  border-radius: var(--radius-md);
}

.stock-prediction__factors--positive .stock-prediction__factor {
  border-left-color: var(--color-positive);
}

.stock-prediction__factors--negative .stock-prediction__factor {
  border-left-color: var(--color-warning);
}

.stock-prediction__factor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.stock-prediction__factor-name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.stock-prediction__factor-contribution {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.stock-prediction__factor-direction,
.stock-prediction__factor-value,
.stock-prediction__factor-description {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.stock-prediction__factor-direction {
  text-transform: capitalize;
}

.stock-prediction__explanation-note {
  margin-top: var(--space-3);
}

.stock-prediction__explanation-disclosure {
  margin-top: var(--space-3);
  padding: var(--space-3);
  color: var(--color-warning);
  background: rgba(217, 119, 6, 0.06);
  border: var(--border-width) solid rgba(217, 119, 6, 0.28);
  border-radius: var(--radius-md);
}

.stock-prediction__explanation-empty {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-md);
}

@media (max-width: 47.99rem) {
  .stock-prediction__explanation-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .stock-prediction__factor-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================================
   ARUS — W14 PART 04C — Supporting Market/Sector/Broker Context
   Existing W04–W09 outputs only; context never changes probability.
   ============================================================ */
.stock-prediction__supporting-context {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-color);
}

.stock-prediction__context-section {
  min-width: 0;
}

.stock-prediction__context-section h4 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.stock-prediction__context-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.stock-prediction__context-metric {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.stock-prediction__context-metric dt {
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.stock-prediction__context-metric dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.stock-prediction__context-empty {
  margin: 0;
  padding: var(--space-3);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

@media (max-width: 47.99rem) {
  .stock-prediction__context-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   ARUS — W14 PART 04D — Stored Prediction History
   W13 ledger records only; no historical prediction regeneration.
   ============================================================ */
.stock-prediction__history {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-color);
}

.stock-prediction__history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.stock-prediction__history-header h4 {
  margin: 0 0 var(--space-1);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
}

.stock-prediction__history-header p,
.stock-prediction__history-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.stock-prediction__history-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.stock-prediction__history-table {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  text-align: left;
}

.stock-prediction__history-table th {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: var(--border-width) solid var(--border-color-strong);
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.stock-prediction__history-table td {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  border-bottom: var(--border-width) solid var(--border-color);
  vertical-align: middle;
  font-size: var(--font-size-xs);
}

.stock-prediction__history-table tr:last-child td {
  border-bottom: 0;
}

.stock-prediction__history-component .prediction-ui-field {
  min-width: 7rem;
  padding: 0;
  background: transparent;
  border: 0;
}

.stock-prediction__history-component .prediction-ui-field__support {
  display: none;
}

.stock-prediction__outcome {
  display: inline-flex;
  padding: 0.15rem var(--space-2);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.stock-prediction__outcome--positive {
  color: var(--color-positive);
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.28);
}

.stock-prediction__outcome--negative {
  color: var(--color-negative);
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.25);
}

.stock-prediction__outcome--pending,
.stock-prediction__outcome--unavailable {
  color: var(--color-neutral);
  background: var(--color-surface-2);
}

.stock-prediction__history-mobile {
  display: none;
}

.stock-prediction__history-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.stock-prediction__history-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.stock-prediction__history-date {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.stock-prediction__history-card .prediction-ui-field {
  padding: var(--space-2);
}

.stock-prediction__history-card .prediction-ui-field__support {
  display: none;
}

.stock-prediction__history-model {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.stock-prediction__history-empty {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-md);
}

@media (max-width: 47.99rem) {
  .stock-prediction__history-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .stock-prediction__history-table-wrap {
    display: none;
  }

  .stock-prediction__history-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ============================================================
   ARUS — W15 PART 07 / PART 08 — Replay Page
   Presentation only. Replay composes existing engine outputs;
   no scoring, thresholds, or intelligence logic lives in CSS.
   ============================================================ */
.replay-page {
  min-width: 0;
  width: 100%;
}

.replay-page__shell {
  max-width: 64rem;
  margin-inline: auto;
}

.replay-page__header {
  margin-bottom: var(--space-4);
}

.replay-page__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.replay-page__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-3xl);
}

.replay-page__notice {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: rgba(217, 119, 6, 0.08);
  border: var(--border-width) solid rgba(217, 119, 6, 0.35);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.replay-page__controls {
  min-width: 0;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.replay-page__controls-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-md);
}

.replay-page__controls-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.replay-page__nav-btn {
  min-width: 0;
  padding: 0.4rem var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.replay-page__nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.replay-page__timestamp {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.replay-page__session-select {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.replay-page__session-select span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.replay-page__session-select select {
  min-width: 0;
  max-width: 100%;
  padding: 0.45rem var(--space-3);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.replay-page__controls-hint {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.replay-page__controls-hint code {
  padding: 0 0.25rem;
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

/* CR-W15-01: IDX market phase rendered separately from the replay timestamp. */
.replay-page__phase {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-1);
  border: var(--border-width) dashed var(--border-color-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.replay-page__phase strong {
  color: var(--color-text-primary);
}

.replay-page__timeline {
  min-width: 0;
  margin-bottom: var(--space-4);
}

.replay-page__timeline-list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.replay-page__chip {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: var(--space-1);
  padding: 0.35rem var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.replay-page__chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

.replay-page__chip:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.replay-page__chip--current {
  background: var(--color-primary-ring);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.replay-page__chip-meta {
  color: var(--color-text-muted);
  font-size: 0.65rem;
}

.replay-page__boundary {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-color);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.replay-page__boundary-inline {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.replay-page__section {
  max-width: 80rem;
  margin: var(--space-5) auto 0;
  padding: var(--space-5);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
}

.replay-page__section .section-header {
  margin-bottom: var(--space-4);
}

.replay-page__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.replay-page__metric {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.replay-page__metric dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.replay-page__metric dd {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.replay-page__metric-support {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

.replay-page__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
}

.replay-page__note {
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.replay-page__note--muted {
  color: var(--color-text-secondary);
}

.replay-page__note--warning {
  border-color: rgba(217, 119, 6, 0.35);
}

.replay-page__note strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-primary);
}

.replay-page__note span {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.replay-page__note h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
}

.replay-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.replay-page__table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  text-align: left;
}

.replay-page__table th {
  padding: var(--space-3);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: var(--border-width) solid var(--border-color-strong);
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.replay-page__table td {
  padding: var(--space-3);
  color: var(--color-text-secondary);
  border-bottom: var(--border-width) solid var(--border-color);
  vertical-align: middle;
}

.replay-page__table tr:last-child td {
  border-bottom: 0;
}

.replay-page__score {
  font-weight: var(--font-weight-bold);
}

.replay-page__muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.replay-page__card-list {
  display: none;
}

.replay-page__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.replay-page__card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.replay-page__card p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.replay-page__card-meta {
  color: var(--color-text-muted);
}

.replay-page__card--unavailable {
  border-style: dashed;
}

.replay-page__direction {
  font-weight: var(--font-weight-bold);
}

.replay-page__direction--up { color: var(--color-positive); }
.replay-page__direction--down { color: var(--color-negative); }
.replay-page__direction--flat { color: var(--color-neutral); }

.replay-page__score-badge {
  padding: 0.15rem var(--space-2);
  background: var(--color-primary-ring);
  border: var(--border-width) solid rgba(37, 99, 235, 0.24);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.replay-page__comparison,
.replay-page__whatchanged {
  margin-top: var(--space-4);
}

.replay-page__comparison h3,
.replay-page__whatchanged h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
}

.replay-page__changes {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.replay-page__changes li {
  margin-bottom: var(--space-1);
}

.replay-page__change--up { color: var(--color-positive); }
.replay-page__change--down { color: var(--color-negative); }
.replay-page__change--flat { color: var(--color-text-secondary); }

.replay-page__story {
  min-width: 0;
}

.replay-page__sentences {
  margin: 0 0 var(--space-3);
  padding-left: 1.2rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.replay-page__movers p {
  margin: 0 0 var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.replay-page__elevated,
.replay-page__quality {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.replay-page__quality {
  margin-bottom: var(--space-1);
}

.replay-page__unavailable {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 64rem;
  margin: var(--space-5) auto 0;
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
}

.replay-page__unavailable strong {
  color: var(--color-text-primary);
}

.replay-page__unavailable span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

@media (max-width: 63.99rem) {
  .replay-page__section {
    padding: var(--space-4);
  }
}

@media (max-width: 47.99rem) {
  .replay-page__shell {
    padding: var(--space-4);
  }

  .replay-page__title {
    font-size: var(--font-size-2xl);
  }

  .replay-page__controls {
    padding: var(--space-3);
  }

  .replay-page__controls-row {
    justify-content: center;
  }

  .replay-page__timestamp {
    flex: 1 0 100%;
    order: 3;
    text-align: center;
  }

  .replay-page__session-select {
    flex-direction: column;
    align-items: stretch;
  }

  .replay-page__section {
    margin-top: var(--space-4);
    padding: var(--space-3);
  }

  .replay-page__metrics,
  .replay-page__notes {
    grid-template-columns: 1fr;
  }

  .replay-table-wrap {
    display: none;
  }

  .replay-page__card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ============================================================
   W16 PART 07 — My Radar page
   Mobile-first. Base rules target the phone; wider viewports
   progressively enhance to denser multi-column layouts.
   ============================================================ */

.my-radar-page {
  min-width: 0;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}

/* --- shared page-level context (rendered once, never per card) --- */

.my-radar-context {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.my-radar-context__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.my-radar-context__timing,
.my-radar-context__note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.my-radar-context__snapshot {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.my-radar-context__market {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.my-radar-context__market-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.my-radar-context__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.my-radar-context__subtitle {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.my-radar-context__prediction {
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-color);
}

.my-radar-context__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.my-radar-context__meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.my-radar-context__meta dt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.my-radar-context__meta dd {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- watchlist summary tiles --- */

.my-radar-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
}

.my-radar-summary__tile {
  min-width: 0;
}

/* --- card list --- */

.my-radar-list-section {
  min-width: 0;
}

.my-radar-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.my-radar-list__item {
  min-width: 0;
}

.my-radar-card {
  display: grid;
  gap: var(--space-3);
  height: 100%;
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--border-color);
  border-left: 3px solid var(--color-neutral);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Needs Attention is the loudest state in the hierarchy; Watch is
   quieter; Normal carries no accent at all. */
.my-radar-card[data-my-radar-priority="NEEDS_ATTENTION"] {
  border-left-color: var(--color-warning);
}

.my-radar-card[data-my-radar-priority="WATCH"] {
  border-left-color: var(--color-info);
}

.my-radar-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.my-radar-card__identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.my-radar-card__rank {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  flex: 0 0 auto;
}

.my-radar-card__names {
  min-width: 0;
}

.my-radar-card__ticker {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-text-primary);
}

.my-radar-card__company {
  margin: 0.1rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.my-radar-card__priority {
  flex: 0 0 auto;
}

/* --- Probability of Upside: the prominent value on mobile --- */

.my-radar-card__probability {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  min-width: 0;
}

.my-radar-card__probability-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.my-radar-card__probability-value {
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-text-primary);
}

.my-radar-card__probability-none {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.my-radar-card__probability-reason,
.my-radar-card__probability-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* --- context chips --- */

.my-radar-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.my-radar-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.my-radar-card__chip-detail {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

/* --- what changed --- */

.my-radar-card__section-title {
  margin: 0 0 0.35rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.my-radar-card__change-list {
  margin: 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.25rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.my-radar-card__change-list li {
  overflow-wrap: anywhere;
}

.my-radar-card__more,
.my-radar-card__muted {
  margin: 0.3rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.my-radar-card__muted {
  margin-top: 0;
}

/* --- alert readiness --- */

.my-radar-card__alert {
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-color);
  min-width: 0;
}

.my-radar-card__alert-flag {
  display: inline-flex;
}

.my-radar-card__alert-reason {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.my-radar-card__alert-note {
  margin: 0.3rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

/* --- actions --- */

.my-radar-card__actions {
  display: flex;
  justify-content: flex-end;
}

/* Full-width, comfortably tappable target on phones. */
.my-radar-card__detail {
  width: 100%;
  min-height: 2.75rem;
}

.my-radar-page__footnote {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  text-align: center;
}

/* --- TABLET: denser two-column grid, inline action --- */

@media (min-width: 48rem) {
  .my-radar-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .my-radar-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-radar-context__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-radar-card__detail {
    width: auto;
  }
}

/* --- DESKTOP: three columns --- */

@media (min-width: 75rem) {
  .my-radar-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .my-radar-context__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- very narrow phones: keep the header readable, never overflow --- */

@media (max-width: 24.99rem) {
  .my-radar-card {
    padding: var(--space-3);
  }

  .my-radar-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .my-radar-card__probability-value {
    font-size: 1.5rem;
  }
}