/* Shared Apple-style surface, typography, and interaction layer. */
:root {
  --font-bbc: "BBC Reith Sans", "Reith Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-bbc);
  --font-display: var(--font-bbc) !important;
  --font-body: var(--font-bbc) !important;
  --font-sans: var(--font-bbc) !important;
  --font-hud: var(--font-bbc) !important;
  --font-number: var(--font-bbc) !important;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-space: 8px;
  --ui-focus: #0a84ff;
  --ui-shadow: 0 12px 40px rgba(0, 0, 0, .14);
  --ui-scrim: rgba(0, 0, 0, .55);
}

html, body, button, input, select, textarea, table, option {
  font-family: var(--font-ui) !important;
}

html[data-theme] body,
html[data-theme] body button,
html[data-theme] body input,
html[data-theme] body select,
html[data-theme] body textarea,
html[data-theme] body table,
html[data-theme] body option {
  font-family: var(--font-ui) !important;
}

/* Keep legacy inline and SVG labels on the shared BBC Reith stack. */
html[data-theme] body :where(h1,h2,h3,h4,h5,h6,p,span,a,label,button,input,select,textarea,table,th,td,li,small,strong,em) {
  font-family: var(--font-ui) !important;
}
html[data-theme] body svg text,
html[data-theme] body svg tspan,
html[data-theme] body [style*="font-family"] {
  font-family: var(--font-ui) !important;
}
/* Beat page-specific legacy selectors so no theme can silently switch back
   to Inter, Rajdhani, Segoe UI, SF Pro, or a monospace fallback. */
html[data-theme] body *[class],
html[data-theme] body *[id] {
  font-family: var(--font-ui) !important;
}

body {
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 68%, transparent);
  outline-offset: 3px;
}

:where(button, .btn, .nav-link, .dropdown-item, .tab-btn, .compare-nav-btn) {
  min-height: 44px;
  border-radius: var(--ui-radius-sm);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

:where(.glass-card, .profile-card, .cmp-card, .modal-content, .side-panel, .bottom-panel, .dock-panel, .intel-panel, .culture-card, .rankings-container) {
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow);
}

html[data-theme="ww2"], body[data-theme="ww2"] { --ui-focus: #8fa8c2; --ui-shadow: 0 16px 44px rgba(0,0,0,.32); }
html[data-theme="gold-black"], body[data-theme="gold-black"] { --ui-focus: #d4af37; --ui-shadow: 0 16px 44px rgba(0,0,0,.38); }
html[data-theme="black-white"], body[data-theme="black-white"] { --ui-focus: #fff; --ui-shadow: 0 16px 44px rgba(0,0,0,.5); }
html[data-theme="pure-white"], body[data-theme="pure-white"] { --ui-focus: #0071e3; --ui-shadow: 0 14px 36px rgba(0,0,0,.10); }

/* Reliable tutorial surface. */
.wmp-tour-overlay { position:fixed; inset:0; z-index:100000; background:var(--ui-scrim); display:grid; align-items:end; justify-items:end; padding:24px; pointer-events:none; }
.wmp-tour-card { width:min(520px, 100%); color:var(--color-text-primary); background:var(--bg-card, #fff); border:1px solid var(--border-color); border-radius:var(--ui-radius-lg); box-shadow:0 24px 90px rgba(0,0,0,.35); padding:28px; }
.wmp-tour-card { pointer-events:auto; }
.wmp-tour-progress { height:4px; border-radius:999px; background:var(--panel-highlight); overflow:hidden; margin:16px 0 22px; }
.wmp-tour-progress > span { display:block; height:100%; width:25%; background:var(--color-cyan, #0071e3); transition:width .25s ease; }
.wmp-tour-kicker { color:var(--color-text-secondary); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.wmp-tour-icon { width:54px; height:54px; display:grid; place-items:center; margin:4px 0 16px; border:1px solid color-mix(in srgb, var(--color-cyan) 52%, transparent); border-radius:16px; color:var(--color-cyan); background:color-mix(in srgb, var(--color-cyan) 12%, transparent); font-size:1.65rem; font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.14); }
.wmp-tour-card h2 { margin:0 0 10px; color:var(--color-text-primary); font-size:clamp(1.45rem, 3vw, 2rem); letter-spacing:-.035em; }
.wmp-tour-card p { color:var(--color-text-secondary); line-height:1.55; margin:0; }
.wmp-tour-action { display:flex; align-items:center; gap:9px; margin-top:20px; padding:11px 13px; border:1px solid color-mix(in srgb, var(--color-cyan) 28%, var(--border-color)); border-radius:12px; color:var(--color-text-primary); background:color-mix(in srgb, var(--color-cyan) 8%, transparent); font-size:.9rem; font-weight:700; }
.wmp-tour-action-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--color-cyan); box-shadow:0 0 0 4px color-mix(in srgb, var(--color-cyan) 18%, transparent); }
.wmp-tour-status { min-height:18px; margin-top:10px; color:var(--color-text-secondary); font-size:.78rem; }
.wmp-tour-status.is-done { color:var(--color-cyan); font-weight:700; }
.wmp-tour-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:26px; flex-wrap:wrap; }
.wmp-tour-actions button { border:1px solid var(--border-color); padding:0 16px; color:var(--color-text-primary); background:var(--control-bg, transparent); cursor:pointer; }
.wmp-tour-actions .primary { border-color:transparent; color:#fff; background:var(--color-cyan, #0071e3); }
.wmp-tour-actions .primary.is-ready { box-shadow:0 0 0 4px color-mix(in srgb, var(--color-cyan) 22%, transparent); }
.wmp-tour-step-target { position:relative; z-index:100001; box-shadow:0 0 0 5px var(--color-cyan, #0071e3), 0 0 0 9999px rgba(0,0,0,.52) !important; border-radius:var(--ui-radius-sm); }
@media (max-width: 600px) { .wmp-tour-overlay { padding:14px; align-items:end; } .wmp-tour-card { padding:22px; } .wmp-tour-actions { justify-content:stretch; } .wmp-tour-actions button { flex:1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Elite Apple polish, applied consistently without changing each theme's
   identity or palette. */
html[data-theme] body {
  background: var(--bg-primary) !important;
  color: var(--color-text-primary) !important;
  -webkit-font-smoothing: antialiased;
}
html[data-theme] body .top-nav,
html[data-theme] body header,
html[data-theme] body .nav-header {
  background: color-mix(in srgb, var(--header-bg, var(--bg-secondary)) 86%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.14) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
html[data-theme] body .glass-card,
html[data-theme] body .profile-card,
html[data-theme] body .cmp-card,
html[data-theme] body .team-top,
html[data-theme] body .modal-content,
html[data-theme] body .side-panel,
html[data-theme] body .bottom-panel,
html[data-theme] body .dock-panel,
html[data-theme] body .intel-panel,
html[data-theme] body .culture-card,
html[data-theme] body .rankings-container {
  background: var(--bg-card) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent) !important;
  border-radius: var(--ui-radius-md) !important;
  box-shadow: var(--ui-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
html[data-theme] body .control-pill,
html[data-theme] body .side-btn,
html[data-theme] body .tab-btn,
html[data-theme] body .filter-btn,
html[data-theme] body .profile-tab-btn,
html[data-theme] body .compare-nav-btn,
html[data-theme] body .btn,
html[data-theme] body .dropdown-item {
  border-radius: var(--ui-radius-sm) !important;
}
html[data-theme] body input,
html[data-theme] body select,
html[data-theme] body textarea,
html[data-theme] body .map-search-input,
html[data-theme] body .search-input,
html[data-theme] body .preset-input {
  border-radius: var(--ui-radius-sm) !important;
  border-color: color-mix(in srgb, var(--border-color) 92%, transparent) !important;
  background: color-mix(in srgb, var(--control-bg, var(--bg-secondary)) 88%, transparent) !important;
}
html[data-theme] body button:active,
html[data-theme] body .btn:active,
html[data-theme] body .control-pill:active {
  transform: scale(.98);
}

/* HQ selected-country workspace: compact, scannable Apple-style data cards. */
html[data-theme] body .selected-countries-card {
  padding: 0 !important;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-card) 94%, transparent) !important;
  border-radius: 18px !important;
}
html[data-theme] body .selected-card-header {
  min-height: 58px;
  padding: 0 18px !important;
  background: color-mix(in srgb, var(--color-cyan) 7%, var(--bg-card)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
}
html[data-theme] body .selected-card-header .card-title {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: .86rem !important;
  letter-spacing: .1em !important;
}
html[data-theme] body .selected-badge-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-cyan) !important;
  color: var(--bg-primary) !important;
  font-size: .74rem;
  font-weight: 800;
}
html[data-theme] body .selected-card-body { padding: 16px 18px !important; }
html[data-theme] body .selected-countries-controls { margin-bottom: 14px !important; }
html[data-theme] body .selected-item {
  min-height: 64px;
  padding: 12px 14px !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent) !important;
  border-left: 3px solid var(--color-cyan) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--bg-secondary) 86%, transparent) !important;
}
html[data-theme] body .selected-item:hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--color-cyan) 55%, var(--border-color)) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.16) !important;
}

html[data-theme] body #intel-details-panel {
  margin-top: 22px;
  padding: clamp(18px, 2.5vw, 30px) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
}
html[data-theme] body #intel-details-panel > [data-i18n="intel_title"] {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: 0 0 12px !important;
  color: var(--color-text-primary) !important;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -.02em;
}
html[data-theme] body #intel-details-panel > [data-i18n="intel_title"]::before {
  content: "";
  width: 4px;
  height: 22px;
  margin-right: 11px;
  border-radius: 99px;
  background: var(--color-cyan);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-cyan) 70%, transparent);
}
html[data-theme] body #intel-details-panel .intel-section-label {
  margin: 0 0 18px !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--color-cyan) 7%, transparent) !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
}
html[data-theme] body #intel-details-panel .intel-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
html[data-theme] body #intel-details-panel .intel-col {
  width: auto !important;
  min-width: 0 !important;
  padding: 18px !important;
  gap: 16px !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
}
html[data-theme] body #intel-details-panel .intel-col-title {
  min-height: 30px;
  padding-bottom: 11px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent) !important;
  font-family: var(--font-ui) !important;
  font-size: .82rem !important;
  letter-spacing: .1em !important;
}
html[data-theme] body #intel-details-panel .intel-col-body {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}
html[data-theme] body #intel-details-panel .intel-data-list {
  gap: 5px !important;
}
html[data-theme] body #intel-details-panel .intel-stat-row {
  padding: 8px 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
}
html[data-theme] body #intel-details-panel .intel-stat-heading {
  gap: 10px;
  font-size: .78rem !important;
}
html[data-theme] body #intel-details-panel .intel-data-label {
  color: var(--color-text-secondary) !important;
  line-height: 1.35;
}
html[data-theme] body #intel-details-panel .intel-data-val {
  color: var(--color-text-primary) !important;
  font-size: .86rem !important;
  white-space: nowrap;
}
html[data-theme] body #intel-details-panel .intel-progress-track {
  height: 6px !important;
  border-radius: 99px !important;
  background: color-mix(in srgb, var(--border-color) 74%, transparent) !important;
}
html[data-theme] body #intel-details-panel .intel-progress-fill { border-radius: 99px !important; box-shadow: none !important; }
html[data-theme] body #intel-details-panel .intel-progress-pct { font-size: .68rem !important; }
/* Calm data motion: resources and naval graphics should read as ambient
   instrumentation, never as a flashing arcade HUD. */
html[data-theme] body #intel-details-panel .intel-col-resources .donut-segment-45,
html[data-theme] body #intel-details-panel .intel-col-navy .donut-segment-45 {
  animation-duration: 3.8s !important;
}
html[data-theme] body #intel-details-panel .intel-col-resources [style*="hudRotate"] {
  animation-duration: 52s !important;
}
html[data-theme] body #intel-details-panel .intel-col-navy [style*="sonarSweep"] {
  animation-duration: 12s !important;
}
html[data-theme] body #intel-details-panel .intel-col-navy [style*="radarPulse"] {
  animation-duration: 7s !important;
}
html[data-theme] body #intel-details-panel .intel-col-resources .intel-progress-fill,
html[data-theme] body #intel-details-panel .intel-col-navy .intel-progress-fill {
  transition-duration: 2.2s !important;
}
@media (max-width: 900px) {
  html[data-theme] body #intel-details-panel .intel-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  html[data-theme] body #intel-details-panel { padding: 14px !important; border-radius: 16px; }
  html[data-theme] body #intel-details-panel .intel-col-body { grid-template-columns: 1fr !important; }
  html[data-theme] body #intel-details-panel .intel-col { padding: 14px !important; border-radius: 15px !important; }
}

/* Comparison bars are intentionally clean: no pseudo-element dust, stars, or
   particle overlays on any surface. Losing bars retain their team colour and
   normal brightness. */
html[data-theme] body .bar-fl::before,
html[data-theme] body .bar-fl::after,
html[data-theme] body .bar-sd::before,
html[data-theme] body .bar-sd::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
html[data-theme] body .bar-fl.is-loser {
  opacity: 1 !important;
  filter: none !important;
}

/* Shared top navigation: a restrained, tactile Apple-style icon dock.
   This overrides the older per-theme button shapes while preserving each
   existing theme's own palette. */
html[data-theme] body .top-nav {
  min-height: 72px !important;
  height: auto !important;
  padding: 10px clamp(14px, 2.1vw, 28px) !important;
  gap: 16px;
  overflow: visible !important;
}
html[data-theme] body .nav-right { gap: 12px !important; overflow: visible !important; }
html[data-theme] body .apple-nav-dock,
html[data-theme] body .apple-control-dock {
  display: flex;
  align-items: center;
  gap: 4px !important;
  height: 52px !important;
  padding: 4px !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--bg-secondary, var(--bg-card)) 70%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.11) !important;
}
html[data-theme] body .top-nav .nav-link,
html[data-theme] body .top-nav .control-pill,
html[data-theme] body .top-nav .dropdown-trigger {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: var(--color-text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-decoration: none !important;
  position: relative;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
html[data-theme] body .top-nav .control-pill.premium-dropdown { overflow: visible !important; }
html[data-theme] body .top-nav .dropdown-trigger { appearance: none; font: inherit; outline: 0; }
html[data-theme] body .top-nav .nav-icon {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.9px !important;
  transform: none !important;
  filter: none !important;
}
html[data-theme] body .top-nav .nav-link:hover,
html[data-theme] body .top-nav .control-pill:hover,
html[data-theme] body .top-nav .control-pill:focus-within {
  color: var(--color-text-primary) !important;
  border-color: color-mix(in srgb, var(--color-cyan) 28%, transparent) !important;
  background: color-mix(in srgb, var(--color-cyan) 11%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.13) !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}
html[data-theme] body .top-nav .nav-link.active {
  color: var(--color-text-primary) !important;
  border-color: color-mix(in srgb, var(--color-cyan) 34%, var(--border-color)) !important;
  border-bottom-color: color-mix(in srgb, var(--color-cyan) 34%, var(--border-color)) !important;
  background: color-mix(in srgb, var(--color-cyan) 17%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 15px color-mix(in srgb, var(--color-cyan) 14%, transparent) !important;
}
html[data-theme] body .top-nav .nav-link.active::after {
  content: "" !important;
  position: absolute;
  width: 14px;
  height: 2px;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--color-cyan) !important;
  box-shadow: none !important;
}
html[data-theme] body .top-nav .premium-dropdown.open > .dropdown-trigger {
  color: var(--color-text-primary) !important;
  border-color: color-mix(in srgb, var(--color-cyan) 38%, transparent) !important;
  background: color-mix(in srgb, var(--color-cyan) 15%, transparent) !important;
}
html[data-theme] body .top-nav .nav-link:hover .nav-icon,
html[data-theme] body .top-nav .nav-link.active .nav-icon { transform: none !important; filter: none !important; }
html[data-theme] body .top-nav .nav-brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-primary) !important;
  text-shadow: none !important;
}
html[data-theme] body .top-nav .nav-brand .brand-logo,
html[data-theme] body .top-nav .nav-brand:hover .brand-logo { transform: none !important; filter: none !important; }
html[data-theme] body .top-nav .premium-dropdown .dropdown-menu {
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}
html[data-theme] body .top-nav .premium-dropdown.icon-only .dropdown-menu { min-width: 64px !important; padding: 6px !important; }
html[data-theme] body .top-nav .premium-dropdown.icon-only .dropdown-item { min-height: 44px; border-radius: 10px !important; }
@media (max-width: 760px) {
  html[data-theme] body .top-nav { padding: 8px 10px !important; gap: 8px; }
  html[data-theme] body .top-nav .nav-brand span { display: none; }
  html[data-theme] body .top-nav .nav-right { gap: 6px !important; }
  html[data-theme] body .apple-nav-dock,
  html[data-theme] body .apple-control-dock { gap: 2px !important; padding: 3px !important; }
  html[data-theme] body .top-nav .nav-link,
  html[data-theme] body .top-nav .control-pill,
  html[data-theme] body .top-nav .dropdown-trigger {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }
}