/* Hallmark · Taste · Open Design final calibration for the sector workspace.
   Direction: flat, calm, market-aware and information-dense. */

:root {
  --tw-canvas: #f3f5f7;
  --tw-surface: #ffffff;
  --tw-surface-soft: #f7f8fa;
  --tw-surface-muted: #eef1f4;
  --tw-line: #d8dee6;
  --tw-line-strong: #bdc7d3;
  --tw-text: #1d2633;
  --tw-muted: #626f80;
  --tw-faint: #8792a1;
  --tw-accent: #2f74b7;
  --tw-accent-soft: #e4f0fb;
  --tw-radius-panel: 14px;
  --tw-radius-control: 10px;
  --tw-radius-small: 8px;
  --tw-shadow-chrome: 0 1px 2px rgba(24, 36, 52, .04), 0 8px 24px rgba(24, 36, 52, .055);
}

body,
body[data-market="us"] {
  --tw-accent: #2f74b7;
  --tw-accent-soft: #e4f0fb;
}

body[data-market="a"] {
  --tw-accent: #8662ae;
  --tw-accent-soft: #f0e9f8;
}

html,
body,
body .page {
  background: var(--tw-canvas) !important;
  background-image: none !important;
}

body .page {
  width: min(100%, 1840px) !important;
  padding: 14px 22px 46px !important;
}

html body .page > .topbar {
  position: sticky !important;
  top: 10px !important;
  z-index: 20 !important;
  margin-bottom: 12px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: var(--tw-radius-panel) !important;
  background: var(--tw-surface) !important;
  box-shadow: var(--tw-shadow-chrome) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .page > .topbar h1 {
  color: var(--tw-text) !important;
  font-size: clamp(25px, 2.2vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

html body .page > .topbar .subtitle { color: var(--tw-muted) !important; }

body .switch-row {
  border: 1px solid var(--tw-line) !important;
  border-radius: var(--tw-radius-control) !important;
  background: var(--tw-surface-soft) !important;
  box-shadow: none !important;
}

body .seg {
  border-radius: var(--tw-radius-small) !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

body .seg:hover {
  border-color: var(--tw-line-strong) !important;
  background: var(--tw-surface-muted) !important;
}

body .seg.active {
  border-color: var(--tw-accent) !important;
  background: var(--tw-accent-soft) !important;
  color: var(--tw-accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tw-accent) 16%, transparent) !important;
}

body :where(button, a, input, select):focus-visible {
  outline: 2px solid var(--tw-accent) !important;
  outline-offset: 2px !important;
}

body .card {
  border: 1px solid var(--tw-line) !important;
  border-radius: var(--tw-radius-panel) !important;
  background: var(--tw-surface) !important;
  box-shadow: none !important;
}

body .card-head {
  min-height: 54px;
  padding: 12px 16px !important;
  border-bottom-color: var(--tw-line) !important;
  background: var(--tw-surface-soft) !important;
}

body .card-title {
  color: var(--tw-text) !important;
  font-size: 16px !important;
  font-weight: 680 !important;
}

body .heatmap-grid {
  gap: 8px !important;
  padding: 12px !important;
  background: transparent !important;
}

body .heatmap-sector,
body button.heatmap-sector {
  position: relative;
  min-height: 188px !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: var(--tw-radius-control) !important;
  background: var(--tw-surface-soft) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 160ms ease, border-color 160ms ease !important;
}

body .heatmap-sector::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

body .heatmap-sector:hover {
  border-color: var(--tw-line-strong) !important;
  background: var(--tw-surface-muted) !important;
}

body .heatmap-sector.active,
body button.heatmap-sector.active {
  border-color: var(--tw-accent) !important;
  background: var(--tw-accent-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tw-accent) 14%, transparent) !important;
}

body .heatmap-sector.active::before { background: var(--tw-accent); }
body .heatmap-sector.is-index { background: var(--tw-surface-muted) !important; }
body .heat-leader { border-radius: var(--tw-radius-small) !important; }

body .content {
  gap: 12px !important;
  margin-top: 12px !important;
}

body .theme-body { background: var(--tw-surface) !important; }

body .prosperity-panel,
body .kpi,
body .group,
body .leader {
  border-color: var(--tw-line) !important;
  border-radius: var(--tw-radius-control) !important;
  background: var(--tw-surface-soft) !important;
  box-shadow: none !important;
}

body .group .group-head { background: var(--tw-surface-muted) !important; }

@media (max-width: 980px) {
  html body .page > .topbar {
    top: 8px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body .switches { min-width: 0 !important; }
}

@media (max-width: 760px) {
  body .page { padding: 8px 10px 28px !important; }
  html body .page > .topbar { padding: 12px !important; }
  body .switch-row { overflow: hidden; }
  body .market-switch { overflow-x: auto; scrollbar-width: none; }
  body .market-switch::-webkit-scrollbar { display: none; }
  body .seg { flex: 0 0 auto !important; min-width: 92px !important; min-height: 40px !important; }
  body .heatmap-sector, body button.heatmap-sector { min-height: 168px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}