/* Metro dashboard — Option A tile grammar (Stage 56) */
/* Consistent severity chips + trend arrows + composite strip */
/* Reused across all 20 metro pages */

.tile.severity-high { border-left-color: #e04b4a; }
.tile.severity-med { border-left-color: #d4a843; }
.tile.severity-low { border-left-color: #97c459; }
.tile.severity-crit { border-left-color: #a32d2d; }
.tile.tile-tier { background: rgba(212,168,67,0.08); }

.tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 0.6rem;
  flex-wrap: nowrap;
}
.tile-header h3 { margin: 0 !important; flex: 1; min-width: 0; }

.tile-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.tile-chip.chip-high { background: rgba(224,75,74,0.15); color: #f09595; }
.tile-chip.chip-med { background: rgba(212,168,67,0.15); color: #e6c570; }
.tile-chip.chip-low { background: rgba(151,196,89,0.15); color: #c0dd97; }
.tile-chip.chip-crit { background: rgba(224,75,74,0.28); color: #f7c1c1; }
.tile-chip.chip-tier { background: rgba(212,168,67,0.18); color: #e6c570; border: 1px solid rgba(212,168,67,0.45); }

.tile-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 0.5rem;
  flex-wrap: wrap;
}
.tile-num {
  font-size: 1.3rem;
  font-weight: 500;
  color: #e6c570;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.2;
}
.tile-num-serif {
  font-size: 1.15rem;
  font-weight: 500;
  color: #e6c570;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  line-height: 1.2;
}
.tile-trend {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
}
.tile-trend.trend-down { color: #f09595; }
.tile-trend.trend-up { color: #c0dd97; }
.tile-trend.trend-flat { color: #a89988; }

.dashboard-composite {
  background: rgba(212,168,67,0.08);
  border: 1px solid rgba(212,168,67,0.28);
  padding: 12px 16px;
  border-radius: 4px;
  margin: 1.4rem 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-composite-label {
  font-family: 'Philosopher', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--accent-light, #d4a843);
  text-transform: uppercase;
  font-weight: 500;
}
.dashboard-composite-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: #e6c570;
  letter-spacing: 0.06em;
}