worldmonitor/src/styles/country-deep-dive.css

.country-deep-dive {
  position: fixed;
  top: 0;
  right: 0;
  width: 430px;
  height: 100vh;
  z-index: 5000;
  border-left: 1px solid var(--border);
  background: var(--panel-bg);
  box-shadow: -8px 0 32px color-mix(in srgb, var(--overlay-heavy) 65%, transparent);
  transform: translateX(calc(100% + 30px));
  transition: transform 0.28s ease;
  will-change: transform;
  contain: layout paint;
}

.country-deep-dive[aria-hidden="true"] {
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
  visibility: hidden;
}

.country-deep-dive.active {
  transform: none;
  transition: transform 0.28s ease;
  visibility: visible;
}

.country-deep-dive.maximized {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  right: 0;
  transform: none;
  z-index: 10000;
  border-left: none;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: none;
  transition: none;
}

.country-deep-dive.maximized .panel-content {
  width: 960px;
  max-width: 96vw;
  margin: 32px auto;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px color-mix(in srgb, var(--overlay-heavy) 65%, transparent);
}

.country-deep-dive.maximized .cdp-grid {
  grid-template-columns: 1fr 1fr;
}

.country-deep-dive.maximized .cdp-summary-grid {
  grid-template-columns: 1fr 1fr;
}

.cdp-expanded-only {
  display: none;
}

.country-deep-dive.maximized .cdp-expanded-only {
  display: block;
}

.country-deep-dive.maximized .cdp-summary-only {
  display: none;
}

.cdp-maximize-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 6px;
  font-size: 14px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cdp-maximize-btn:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.cdp-market-volume {
  color: var(--text-faint);
  font-size: 10px;
}

.cdp-market-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.cdp-market-bar-yes {
  background: var(--semantic-normal);
  height: 100%;
}

.cdp-market-bar-no {
  background: var(--semantic-critical);
  height: 100%;
}

.cdp-port-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.cdp-port-name {
  color: var(--text-secondary);
  font-size: 12px;
}

.cdp-port-meta {
  color: var(--text-faint);
  font-size: 10px;
  text-align: right;
}

.country-deep-dive-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.country-deep-dive .panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  z-index: 4;
}

.country-deep-dive .panel-content {
  height: 100%;
  overflow-y: auto;
  padding: 12px;
}

.cdp-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

.cdp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-right: 46px;
}

.cdp-header-left {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cdp-flag {
  font-size: 26px;
  line-height: 1;
}

.cdp-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cdp-country-name {
  margin: 0;
  font-size: 18px;
  color: var(--text);
  line-height: 1.2;
}

.cdp-country-subtitle {
  color: var(--text-muted);
  font-size: 11px;
}

.cdp-header-right {
  display: flex;
  gap: 6px;
}

.cdp-action-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 6px;
  font-size: 11px;
  padding: 0 8px;
  height: 32px;
  cursor: pointer;
}

.cdp-action-btn:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.cdp-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
}

.cdp-card {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px;
}

.cdp-card-title {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.cdp-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cdp-china-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cdp-china-summary-group {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.cdp-china-summary-group--partial,
.cdp-china-summary-group--stale {
  border-color: color-mix(in srgb, var(--semantic-warning, #f59e0b) 50%, var(--border-subtle));
}

.cdp-china-summary-group--unavailable {
  border-color: color-mix(in srgb, var(--semantic-critical) 42%, var(--border-subtle));
}

.cdp-china-summary-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.cdp-china-summary-title,
.cdp-china-summary-signal-label {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
}

.cdp-china-summary-state {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cdp-china-summary-signal + .cdp-china-summary-signal {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.cdp-china-summary-signal[data-stale="true"] .cdp-china-summary-signal-value {
  color: var(--semantic-warning, #f59e0b);
}

.cdp-china-summary-signal-value {
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.cdp-china-summary-attribution,
.cdp-china-summary-empty,
.cdp-china-summary-note {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cdp-china-summary-note {
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

.cdp-china-summary-source-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 2px;
}

.cdp-china-summary-source-link:hover {
  text-decoration-color: currentColor;
}

.cdp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  contain: layout paint;
}

.cdp-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  contain: layout paint;
}

.cdp-score-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.cdp-score-label {
  font-size: 12px;
  color: var(--text-muted);
}

.cdp-updated {
  font-size: 10px;
  color: var(--text-faint);
}

.cdp-score-value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
}

.cdp-score-value.cii-stable {
  color: var(--semantic-normal);
}

.cdp-score-value.cii-elevated {
  color: var(--semantic-elevated);
}

.cdp-score-value.cii-high {
  color: var(--semantic-high);
}

.cdp-score-value.cii-critical {
  color: var(--semantic-critical);
}

.cdp-trend {
  color: var(--text-dim);
  font-size: 11px;
}

/* Maritime Activity Table */
.cdp-maritime-scroll {
  max-height: 260px;
  overflow-y: auto;
}
.cdp-maritime-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
}

.cdp-maritime-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-bg, #0a0a0a);
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.cdp-maritime-table td {
  padding: 6px 8px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.cdp-maritime-table tbody tr:hover {
  background: var(--surface-hover);
}

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

.cdp-maritime-port {
  font-weight: 500;
  color: var(--text);
}

.cdp-maritime-anomaly {
  margin-left: 4px;
  color: var(--semantic-warning);
  font-size: 12px;
}

.cdp-maritime-trend.cdp-trend-up {
  color: var(--semantic-positive, #22c55e);
  font-weight: 600;
}

.cdp-maritime-trend.cdp-trend-down {
  color: var(--semantic-critical, #ef4444);
  font-weight: 600;
}

/* Energy Donut Charts */
.cdp-energy-donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.cdp-energy-donut {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.cdp-energy-donut svg {
  transform: rotate(-90deg);
}

.cdp-energy-donut-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
  white-space: pre;
}

.cdp-energy-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.cdp-energy-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

.cdp-energy-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cdp-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cdp-components {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

.cdp-comp-icon {
  width: 18px;
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
}

.cdp-comp-label {
  width: 72px;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.cdp-comp-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cdp-comp-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.cdp-comp-val {
  width: 28px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}

.cdp-signal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.cdp-signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cdp-signal-chip.chip-conflict {
  color: var(--semantic-critical);
  background: color-mix(in srgb, var(--semantic-critical) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-critical) 35%, transparent);
}

.cdp-signal-chip.chip-military {
  color: var(--semantic-high);
  background: color-mix(in srgb, var(--semantic-high) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-high) 35%, transparent);
}

.cdp-signal-chip.chip-outage {
  color: var(--semantic-elevated);
  background: color-mix(in srgb, var(--semantic-elevated) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-elevated) 35%, transparent);
}

.cdp-signal-chip.chip-climate {
  color: var(--semantic-elevated);
  background: color-mix(in srgb, var(--semantic-elevated) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-elevated) 35%, transparent);
}

.cdp-signal-chip.chip-quake {
  color: var(--semantic-high);
  background: color-mix(in srgb, var(--semantic-high) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-high) 35%, transparent);
}

.cdp-signal-chip.chip-displacement {
  color: var(--text-dim);
  background: var(--overlay-subtle);
  border-color: var(--border);
}

.cdp-signal-chip.chip-protest {
  color: var(--semantic-high);
  background: color-mix(in srgb, var(--semantic-high) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-high) 35%, transparent);
}

.cdp-signal-chip.chip-advisory {
  color: var(--semantic-elevated);
  background: color-mix(in srgb, var(--semantic-elevated) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-elevated) 35%, transparent);
}

.cdp-signal-chip.chip-stock {
  color: var(--text-dim);
  background: var(--overlay-subtle);
  border-color: var(--border);
}

.cdp-signal-breakdown,
.cdp-military-grid,
.cdp-infra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.cdp-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cdp-metric-label {
  color: var(--text-muted);
  font-size: 11px;
}

.cdp-metric-value {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.cdp-chip-neutral {
  color: var(--text-dim);
  background: var(--overlay-subtle);
  border-color: var(--border);
}

.cdp-chip-success {
  color: var(--semantic-normal);
  background: color-mix(in srgb, var(--semantic-normal) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-normal) 35%, transparent);
}

.cdp-chip-warn {
  color: var(--semantic-high);
  background: color-mix(in srgb, var(--semantic-high) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-high) 35%, transparent);
}

.cdp-chip-danger {
  color: var(--semantic-critical);
  background: color-mix(in srgb, var(--semantic-critical) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-critical) 35%, transparent);
}

.cdp-signal-item,
.cdp-news-item,
.cdp-market-item,
.cdp-economic-item {
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.cdp-news-item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cdp-news-item:hover {
  border-color: var(--text-faint);
}

.cdp-signal-line,
.cdp-news-top,
.cdp-market-top,
.cdp-economic-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cdp-news-title,
.cdp-market-title {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.cdp-news-meta,
.cdp-signal-time,
.cdp-market-meta,
.cdp-economic-source,
.cdp-assessment-meta {
  color: var(--text-faint);
  font-size: 10px;
}

.cdp-signal-desc,
.cdp-market-prob,
.cdp-economic-value,
.cdp-base-name {
  color: var(--text-secondary);
  font-size: 12px;
}

.cdp-type-badge,
.cdp-severity-badge,
.cdp-tier-badge,
.cdp-state-badge {
  font-size: 10px;
  border-radius: 999px;
  padding: 2px 6px;
  border: 1px solid transparent;
}

.cdp-type-badge {
  color: var(--text);
  background: var(--overlay-medium);
  border-color: var(--border);
}

.cdp-tier-badge {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.cdp-state-badge {
  color: var(--semantic-high);
  background: color-mix(in srgb, var(--semantic-high) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-high) 35%, transparent);
}

.cdp-severity-badge.sev-critical {
  color: var(--semantic-critical);
  background: color-mix(in srgb, var(--semantic-critical) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-critical) 35%, transparent);
}

.cdp-severity-badge.sev-high {
  color: var(--semantic-high);
  background: color-mix(in srgb, var(--semantic-high) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-high) 35%, transparent);
}

.cdp-severity-badge.sev-medium {
  color: var(--semantic-elevated);
  background: color-mix(in srgb, var(--semantic-elevated) 12%, transparent);
  border-color: color-mix(in srgb, var(--semantic-elevated) 35%, transparent);
}

.cdp-severity-badge.sev-low,
.cdp-severity-badge.sev-info {
  color: var(--text-dim);
  background: var(--overlay-subtle);
  border-color: var(--border);
}

.cdp-market-link {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
}

.cdp-infra-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--overlay-subtle);
  color: var(--text);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 8px;
  cursor: pointer;
}

.cdp-infra-card:hover {
  border-color: var(--accent);
}

.cdp-infra-label {
  font-size: 11px;
  color: var(--text-dim);
}

.cdp-infra-count {
  font-size: 14px;
  color: var(--text);
}

.cdp-subtitle {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
}

.cdp-base-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cdp-base-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.cdp-base-distance {
  color: var(--text-faint);
  font-size: 10px;
}

.cdp-trend-token {
  font-size: 13px;
  font-weight: 700;
}

.cdp-trend-token.trend-up {
  color: var(--semantic-high);
}

.cdp-trend-token.trend-down {
  color: var(--semantic-critical);
}

.cdp-trend-token.trend-flat {
  color: var(--text-dim);
}

.cdp-trend-token.trend-market-up {
  color: var(--semantic-success, #22c55e);
}

.cdp-trend-token.trend-market-down {
  color: var(--semantic-critical);
}

.cdp-trend-token.trend-market-flat {
  color: var(--text-dim);
}

.cdp-assessment-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.cdp-loading,
.cdp-loading-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cdp-loading-title,
.cdp-loading-text,
.cdp-empty {
  color: var(--text-muted);
  font-size: 11px;
}

.cdp-loading-line {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-faint) 20%, transparent);
  animation: cdp-pulse 1.6s ease-in-out infinite;
}

.cdp-loading-line.cdp-loading-line-short {
  width: 70%;
}

@keyframes cdp-pulse {
  0% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.95;
  }
  100% {
    opacity: 0.35;
  }
}

.cdp-geo-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
}

.cdp-geo-error-icon {
  font-size: 28px;
}

.cdp-geo-error-msg {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.resilience-widget {
  gap: 8px;
}

.resilience-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.resilience-widget__title {
  margin: 0;
}

.resilience-widget__help {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
}

.resilience-widget__body,
.resilience-widget__locked {
  gap: 10px;
}

.resilience-widget__overall {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resilience-widget__bar-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.resilience-widget__bar-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-faint) 14%, transparent);
  overflow: hidden;
}

.resilience-widget__bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.45s ease;
}

.resilience-widget__overall-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.resilience-widget__overall-score {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.resilience-widget__overall-level,
.resilience-widget__overall-trend {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.resilience-widget__overall-trend {
  color: var(--text-muted);
}

.resilience-widget__domains {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resilience-widget__domain-row {
  display: grid;
  grid-template-columns: minmax(88px, 104px) minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
}

.resilience-widget__domain-label {
  font-size: 11px;
  color: var(--text-muted);
}

.resilience-widget__domain-score {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

/* T1.6 Phase 1 of the country-resilience reference-grade upgrade plan:
   per-dimension confidence grid. Renders a compact 2-column grid of the
   19 scorer dimensions between the 6-domain bars and the footer.
   Each cell shows a short label, a coverage bar, and a percentage.
   Status modifiers (--observed, --partial, --imputed, --absent) tint
   the bar fill so analysts can see provenance at a glance. */
.resilience-widget__dimension-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.resilience-widget__dimension-cell {
  display: grid;
  /* label | coverage-bar | imputation-icon | percentage | freshness-dot */
  grid-template-columns: minmax(56px, 72px) minmax(0, 1fr) 12px 28px 10px;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.resilience-widget__dimension-label {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resilience-widget__dimension-bar-track {
  height: 4px;
  background: var(--bar-track, rgba(255, 255, 255, 0.06));
  border-radius: 2px;
  overflow: hidden;
}

.resilience-widget__dimension-bar-fill {
  height: 100%;
  background: var(--text-faint);
  border-radius: 2px;
  transition: width 0.25s ease-out;
}

/* Status modifiers tint the fill so the provenance class is legible
   even when the cell label is truncated. Colors reuse the existing
   resilience visual-level palette from resilience-widget-utils.ts so
   the grid stays in the same chromatic family as the domain bars. */
.resilience-widget__dimension-cell--observed .resilience-widget__dimension-bar-fill {
  background: #84cc16;
}

.resilience-widget__dimension-cell--partial .resilience-widget__dimension-bar-fill {
  background: #eab308;
}

.resilience-widget__dimension-cell--imputed .resilience-widget__dimension-bar-fill {
  background: #f97316;
}

.resilience-widget__dimension-cell--absent .resilience-widget__dimension-bar-fill {
  background: var(--text-faint);
  opacity: 0.35;
}

.resilience-widget__dimension-cell--absent .resilience-widget__dimension-label,
.resilience-widget__dimension-cell--absent .resilience-widget__dimension-pct {
  opacity: 0.55;
}

.resilience-widget__dimension-pct {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* T1.6 full grid: imputation class icon column between the coverage
   bar and the percentage. Rendered as a single glyph (checkmark,
   question mark, exclamation, em-dash) tinted per class. Empty span
   when the dimension has observed data or the scorer has not tagged
   the class. Tooltip is carried on the parent cell's `title`. */
.resilience-widget__dimension-imputation {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--text-muted);
  cursor: help;
}

.resilience-widget__dimension-imputation--stable-absence { color: #84cc16; }
.resilience-widget__dimension-imputation--unmonitored { color: #eab308; }
.resilience-widget__dimension-imputation--source-failure { color: #ef4444; }
.resilience-widget__dimension-imputation--not-applicable { color: var(--text-faint); }

/* T1.5 propagation: freshness glyph at the far right. Shape and color
   both mirror the fresh/aging/stale staleness levels from the
   classifier. Empty span when freshness is unknown so the grid column
   reserves its 10px slot and rows stay aligned. */
.resilience-widget__dimension-freshness {
  font-size: 9px;
  line-height: 1;
  text-align: center;
  cursor: help;
}

.resilience-widget__dimension-freshness--fresh { color: #22c55e; }
.resilience-widget__dimension-freshness--aging { color: #eab308; }
.resilience-widget__dimension-freshness--stale { color: #ef4444; }

.resilience-widget__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.resilience-widget__confidence,
.resilience-widget__delta {
  font-size: 11px;
  color: var(--text-faint);
}

.resilience-widget__confidence--low {
  color: var(--semantic-elevated);
}

.resilience-widget__preview {
  filter: blur(4px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.resilience-widget__gate-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.resilience-widget__cta,
.resilience-widget__retry {
  align-self: flex-start;
}

.resilience-widget__error {
  align-items: flex-start;
}

@media (max-width: 560px) {
  .resilience-widget__bar-block {
    grid-template-columns: 1fr;
  }

  .resilience-widget__overall-meta {
    justify-content: flex-start;
  }

  .resilience-widget__domain-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .resilience-widget__domain-score {
    text-align: left;
  }

  .resilience-widget__dimension-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* T1.6 full grid on narrow widths: tighten the label column and
     shrink the inter-column gap so all five cells stay on one row
     without wrapping. The imputation / freshness slots stay at their
     12px / 10px intrinsic widths. */
  .resilience-widget__dimension-cell {
    grid-template-columns: minmax(48px, 64px) minmax(0, 1fr) 12px 24px 10px;
    gap: 4px;
  }
}

.cdp-geo-error-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.cdp-geo-error-retry,
.cdp-geo-error-close {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.cdp-geo-error-retry:hover,
.cdp-geo-error-close:hover {
  background: color-mix(in srgb, var(--text-faint) 15%, transparent);
}

.cdp-geo-error-retry {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

.cdp-timeline-mount {
  min-height: 80px;
}

@media (max-width: 767px) {
  .country-deep-dive {
    width: 100vw;
    transform: translateX(100%);
  }

  .country-deep-dive.maximized .panel-content {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    border: none;
  }

  .country-deep-dive.maximized .cdp-grid {
    grid-template-columns: 1fr;
  }

  .cdp-signal-breakdown,
  .cdp-military-grid,
  .cdp-infra-grid {
    grid-template-columns: 1fr;
  }

  .cdp-china-summary-grid {
    grid-template-columns: 1fr;
  }
}

.cdp-facts-thumbnail { float: right; max-width: 100px; border-radius: 6px; margin: 0 0 8px 12px; }
.cdp-facts-summary { font-size: 0.82rem; color: var(--cdp-muted); line-height: 1.5; margin-bottom: 8px; }
.cdp-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cdp-facts-grid .cdp-fact-item { font-size: 0.78rem; }

.cdp-card-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: 0.375rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0.5;
  cursor: help;
  vertical-align: middle;
  padding: 0;
}

.cdp-card-help:hover {
  opacity: 1;
}
.cdp-facts-grid .cdp-fact-label { color: var(--cdp-muted); text-transform: uppercase; font-size: 0.65rem; }

.cdp-vuln-index { font-size: 13px; color: #94a3b8; margin-bottom: 8px; }
.cdp-section-sublabel { font-size: 10px; color: #64748b; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.cdp-trade-exposure-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
.cdp-trade-exposure-table th { color: #64748b; font-weight: 500; padding: 3px 0; text-align: left; border-bottom: 1px solid rgba(100,116,139,0.15); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.cdp-trade-exposure-table th.cdp-exposure-score-header { text-align: right; }
.cdp-chokepoint-name { color: #cbd5e1; padding: 3px 0; }
.cdp-sector-label { color: #e2e8f0; padding: 3px 0; font-weight: 500; }
.cdp-exposure-score { text-align: right; padding: 3px 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cdp-trade-exposure-table tbody tr { border-bottom: 1px solid rgba(100,116,139,0.08); }
.cdp-exposure-bar-wrap { width: 40%; padding: 3px 6px; }
.cdp-exposure-bar { height: 6px; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 3px; min-width: 2px; }
.cdp-exposure-pct { color: #64748b; text-align: right; font-size: 11px; white-space: nowrap; }
.cdp-dep-badge { display: inline-block; font-size: 9px; padding: 1px 5px; border-radius: 3px; margin-left: 4px; font-weight: 600; vertical-align: middle; letter-spacing: 0.02em; }
.cdp-dep-critical { background: rgba(220,38,38,0.12); color: #f87171; }
.cdp-dep-compound { background: rgba(220,38,38,0.18); color: #ef4444; }
.cdp-dep-ok { background: rgba(34,197,94,0.12); color: #4ade80; }
.cdp-card-footer { font-size: 10px; color: #475569; margin-top: 6px; }

.cdp-pro-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  color: var(--text-dim);
  font-size: 11px;
}

.cdp-pro-lock-icon {
  font-size: 20px;
  opacity: 0.5;
}

.cdp-pro-lock-text {
  text-align: center;
}

.cdp-pro-section-group {
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle, var(--border));
  padding-top: 8px;
}

.cdp-pro-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cdp-pro-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cdp-pro-metric-box {
  padding: 8px;
  border-radius: 6px;
  background: var(--surface, var(--panel-bg));
  border: 1px solid var(--border);
}

.cdp-pro-metric-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.cdp-pro-metric-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.cdp-pro-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.cdp-pro-badge-normal { background: color-mix(in srgb, var(--semantic-normal) 20%, transparent); color: var(--semantic-normal); }
.cdp-pro-badge-elevated { background: color-mix(in srgb, var(--semantic-elevated) 20%, transparent); color: var(--semantic-elevated); }
.cdp-pro-badge-high { background: color-mix(in srgb, var(--semantic-high) 20%, transparent); color: var(--semantic-high); }
.cdp-pro-badge-critical { background: color-mix(in srgb, var(--semantic-critical) 20%, transparent); color: var(--semantic-critical); }

.cdp-pro-flow-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.cdp-pro-flow-table th {
  text-align: left;
  font-weight: 600;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.cdp-pro-flow-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.cdp-pro-trend-up { color: var(--semantic-normal); }
.cdp-pro-trend-down { color: var(--semantic-critical); }

.cdp-pro-exposure-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}

.cdp-pro-exposure-item:last-child {
  border-bottom: none;
}

.cdp-pro-exposure-name {
  color: var(--text);
}

.cdp-pro-exposure-score {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.cdp-trade-exposure-table tbody tr.cdp-sector-row {
  cursor: pointer;
  transition: background 0.15s;
}
.cdp-trade-exposure-table tbody tr.cdp-sector-row:hover {
  background: rgba(100, 160, 255, 0.06);
}
.cdp-trade-exposure-table tbody tr.cdp-sector-row--selected {
  background: rgba(100, 160, 255, 0.1);
}
.cdp-route-detail {
  padding: 10px 0;
  border-top: 1px solid rgba(100, 116, 139, 0.12);
}
.cdp-route-path {
  font-size: 12px;
  color: #e2e8f0;
  font-family: var(--mono-font, 'JetBrains Mono', monospace);
  padding: 6px 8px;
  background: rgba(100, 116, 139, 0.06);
  border-radius: 4px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.cdp-route-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 10px;
}
.cdp-route-stats span { color: #e2e8f0; font-weight: 500; }
.cdp-bypass-heading {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.cdp-sector-detail-row td {
  padding: 0 4px 8px;
}

.cdp-product-selector {
  position: relative;
  margin-bottom: 8px;
}

.cdp-product-search {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text);
  font-size: 12px;
  outline: none;
}

.cdp-product-search:focus {
  border-color: var(--accent, #3b82f6);
}

.cdp-product-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  max-height: 200px;
  overflow-y: auto;
}

.cdp-product-list:empty {
  display: none;
}

.cdp-product-item {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.cdp-product-item:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

.cdp-product-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}

.cdp-product-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
}

.cdp-product-value {
  font-weight: 600;
  font-size: 12px;
  color: var(--accent, #3b82f6);
  white-space: nowrap;
}

.cdp-product-suppliers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.cdp-product-suppliers-table th {
  text-align: left;
  font-weight: 600;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.cdp-product-suppliers-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.cdp-product-supplier {
  white-space: nowrap;
}

.cdp-product-share {
  min-width: 80px;
}

.cdp-product-share-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 2px;
}

.cdp-product-share-bar {
  height: 100%;
  background: var(--accent, #3b82f6);
  border-radius: 2px;
  min-width: 2px;
}

.cdp-product-share-bar.cdp-product-share-high {
  background: var(--warning, #f59e0b);
}

.cdp-product-val {
  text-align: right;
  white-space: nowrap;
}

.cdp-product-risk {
  white-space: nowrap;
}

.cdp-risk-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.cdp-risk-safe {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}

.cdp-risk-at-risk {
  background: rgba(249,115,22,0.12);
  color: #fb923c;
}

.cdp-risk-critical {
  background: rgba(220,38,38,0.15);
  color: #ef4444;
}

.cdp-risk-unknown {
  background: rgba(100,116,139,0.1);
  color: #94a3b8;
}

.cdp-risk-chokepoints {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

.cdp-recommendations {
  margin-top: 10px;
  padding: 8px;
  background: rgba(100,116,139,0.06);
  border-radius: 6px;
  font-size: 11px;
}

.cdp-recommendations:empty {
  display: none;
}

.cdp-recommendation-item {
  padding: 4px 0;
  color: #cbd5e1;
  line-height: 1.5;
}

.cdp-recommendation-safe {
  color: #4ade80;
}

.cdp-recommendation-warn {
  color: #fb923c;
}

.cdp-recommendation-critical {
  color: #ef4444;
}

/* ── Phase 5: Cost Shock Calculator ───────────────────────────────────── */
.cdp-cost-shock-calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

.cdp-cost-shock-calc-tier {
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warning, #f59e0b) 20%, transparent);
  color: var(--warning, #fb923c);
  font-weight: 500;
}

.cdp-cost-shock-calc-slider-wrap {
  margin: 10px 0 14px;
}

.cdp-cost-shock-calc-slider-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 6px;
}

.cdp-cost-shock-calc-duration-value {
  color: var(--text, #e2e8f0);
  font-weight: 600;
}

.cdp-cost-shock-calc-slider {
  width: 100%;
  accent-color: var(--accent, #60a5fa);
  cursor: pointer;
}

.cdp-cost-shock-calc-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
}

.cdp-cost-shock-calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.cdp-cost-shock-calc-table th {
  text-align: left;
  font-weight: 500;
  padding: 4px 6px;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted, #475569) 25%, transparent);
}

.cdp-cost-shock-calc-cost-col {
  text-align: right;
}

.cdp-cost-shock-calc-row td {
  padding: 4px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-muted, #334155) 15%, transparent);
}

.cdp-cost-shock-calc-sector {
  color: var(--text, #e2e8f0);
}

.cdp-cost-shock-calc-cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text, #e2e8f0);
  font-weight: 500;
}

.cdp-cost-shock-calc-cost--zero {
  color: var(--text-muted, #64748b);
  font-weight: 400;
}

.cdp-cost-shock-calc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 6px 6px;
  border-top: 2px solid color-mix(in srgb, var(--accent, #60a5fa) 40%, transparent);
  margin-top: 4px;
  font-weight: 600;
  font-size: 13px;
}

.cdp-cost-shock-calc-total-label {
  color: var(--text-muted, #94a3b8);
}

.cdp-cost-shock-calc-total-value {
  color: var(--accent, #60a5fa);
  font-variant-numeric: tabular-nums;
}