/* Match the homepage's visual language without importing its page layout.
   Status colors, crew identities, queue dimensions, and map controls remain semantic. */
:root {
  --ink: #1a1a1a;
  --muted: #666;
  --paper: #f5f5f5;
  --line: #ddd;
  --panel: #f5f5f5;
  --accent: #5b45d9;
  --mono: 'Space Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;
  --display: 'Doto', monospace;
}
button:hover { filter: none; }
:is(button, a, input, select, canvas, summary):focus-visible { outline-color: var(--accent); }
.topbar { background: #f5f5f5; }
.brand { font: 700 12px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; gap: 7px; }
.brand::before { content: '['; color: #777; }
.brand b { font: inherit; }
.brand b::after { content: ' ]'; color: #777; }
.brand > span { color: #666; font-size: 8px; letter-spacing: .6px; }
.city-title h1 { font-weight: 400; }
.city-tag, #save-state { color: #666; }
.live-dot { background: var(--accent); box-shadow: 0 0 0 4px #5b45d90b; }
.icon-button { color: var(--ink); border-color: var(--line); }
.exit-link { text-transform: uppercase; letter-spacing: .08em; }
.sidebar { color: var(--ink); border-right: 1px solid var(--line); scrollbar-color: #aaa #eee; }
.queue-sidebar-header .eyebrow { color: #666; }
.queue-sidebar-header .eyebrow::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--accent); }
.sidebar .queue-sidebar-header h2, .cleanup-mode .sidebar .queue-sidebar-header h2 { font-weight: 300; }
#queue-count { color: var(--ink); background: #fff; border-color: #ccc; border-radius: 999px; }
.sidebar .orders-panel, .cleanup-mode .sidebar .orders-panel { color: var(--ink); }
.sidebar #queue-mode { color: #666; }
.sidebar #queue-impact { color: #444; background: #ececec; border-left-color: var(--accent); }
.sidebar #work-queue, .cleanup-mode .sidebar #work-queue { scrollbar-color: #aaa #e9e9e9; }
.order-row, .sidebar .order-row { color: var(--ink); background: white; border-color: #d6d6d6; }
.order-row:hover, .sidebar .order-row:hover { border-color: #888; }
.order-row small { color: #666; }
.sidebar #work-queue .order-row[aria-pressed=true] { outline-color: var(--accent); }
.sidebar #queue-all { color: #444; border-top-color: var(--line); }
.order-badges .neutral, .sidebar #work-queue .crew-assignment { color: #555; background: #eaeaea; }
/* Yellow, red, and green row/marker states keep their existing meanings. */
.world { background: #eceeef; }
.map-menu { background: #fafafaf7; border-color: #d5d5d5; box-shadow: 0 6px 24px #00000018; }
.map-menu > summary { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .025em; }
.map-menu-clock { color: #666; font-size: 8px; }
.map-key p, .map-caption, .map-caption > span:last-child { color: #626262; }
.map-key > strong { font-weight: 500; }
.world .map-menu .map-caption, .world.night .map-menu .map-caption { background: #eee; border-color: #ddd; color: #666; }
.world.night .map-menu .map-caption > span:last-child { color: #555; }
.location-badge, .time-controls { background: #f5f5f5; border-color: #ddd; }
.badge-divider { color: #aaa; }
#city-rank, .time-controls button, .map-tools button, .map-tools output { color: #555; }
.time-controls button { border-radius: 999px; }
.time-controls button.selected { background: #1a1a1a; color: white; }
.time-controls button:hover:not(.selected), .map-tools button:hover { background: #e7e7e7; }
.map-layers label, #layer-legend, .world .map-menu .world-footer, .world.night .map-menu .world-footer { color: #666; }
.map-layers select { color: var(--ink); }
.world-footer i { background: var(--accent); }
.world .aerbits-callout { background: #fff; color: var(--ink); border-color: #cfcfcf; border-top: 2px solid var(--accent); box-shadow: 0 4px 20px #00000014; }
.world .aerbits-callout:has(input:checked) { background: #f2efff; border-color: #bcb0ef; border-top-color: var(--accent); }
.world .aerbits-cta .coverage-icon { color: var(--accent); }
.world .aerbits-cta strong { font-weight: 500; }
.world .aerbits-cta small, .world .aerbits-callout .coverage-caption { color: #626262; }
.world .aerbits-cta .switch { background: #aaa; }
.world .aerbits-cta .switch::after { background: white; }
.world .aerbits-cta input:checked + .switch { background: var(--accent); }
.world .aerbits-cta input:checked + .switch::after { background: white; }
.world .aerbits-cta:focus-within, .coverage-control input:focus-visible + .switch { outline-color: var(--accent); }
.fleet-panel { background: #fff; color: var(--ink); border-color: #ddd; }
.fleet-panel summary::before, .fleet-panel summary > span { color: #666; }
.fleet-row { background: #f5f5f5; border-color: #ddd; color: var(--ink); }
.fleet-row[aria-pressed=true] { background: #f2efff; border-color: var(--accent); }
.fleet-row small, #traffic-status, .route-legend, .fleet-footer, .fleet-footer button { color: #626262; }
.fleet-row progress, .fleet-row progress::-webkit-progress-bar { background: #ddd; }
.fleet-row progress { height: 6px; mask-image: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 11px); }
.inspector { background: #fffffff5; border-color: #d5d5d5; box-shadow: 0 10px 35px #0000001a; }
.inspector .eyebrow, .inspector button, .inspector p, .inspector #evidence-time, .inspector #evidence-card small { color: #626262; }
.inspector #evidence-card { border-color: #ddd; }
.toast { background: #1a1a1a; color: #fff; border-color: #444; box-shadow: 0 6px 25px #00000020; }
#stop-follow { background: #fff; border-color: #bbb; color: #333; border-radius: 999px; }
.world .map-menu .operations-summary { background: #eee; color: #222; border-color: #d5d5d5; }
.operations-summary, .section-heading > span, .evidence-stats, .operations-grid span { color: #626262; }
.evidence-stats b { color: #222; }
.operations-grid strong, .operations-grid div:last-child strong, .cleanup-mode .operations-grid strong { font-family: var(--display); font-weight: 700; color: var(--ink); }
.review-button { background: #fff; border-color: #ccc; border-radius: 999px; color: #333; }
.review-button b { background: #eee; color: #333; }
#guide-story { background: #eee; border-color: #ccc; }
#guide-phase { color: var(--accent); }
#guide-progress, #guide-metrics span { color: #626262; }
#guide-metrics strong { font-family: var(--display); font-size: 20px; line-height: 1.15; font-weight: 700; color: #222; }
#guide-inspect { color: var(--accent); }
.sidebar-footer { color: #666; }
.sidebar-footer button { color: #333; }
.news-ticker { background: #191919; color: #ccc; border-color: #333; }
.news-label { color: #e1d9ff; }
.news-label::before { background: #aa94ff; }
.fiction-note { color: #aaa; }
dialog { background: #fafafa; border-color: #ccc; box-shadow: 0 30px 100px #00000033; }
dialog::backdrop { background: #11111180; }
dialog h2 { font-weight: 300; }
.dialog-heading, .dialog-heading button, dialog p, .help-steps, #report-history, .review-site small { color: #626262; }
.help-steps strong { color: #222; }
.primary-button { background: #1a1a1a; color: white; border-color: #1a1a1a; border-radius: 999px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.dialog-actions > button:not(.primary-button), .review-site button { background: #eee; color: #333; border-color: #ccc; border-radius: 999px; }
.tax-control input { accent-color: var(--accent); }
.budget-lines > div, .review-site { border-color: var(--line); }
/* The optional builder retains its zone colors; neutral chrome stays legible. */
.builder-dashboard :is(.stat-label, .sidebar-intro, .weather, .mayor-heading, .stat-pair small, .demand-row, .demand-row b, .advisor p, .advisor-heading div > span, .goal > span) { color: #666; }
.builder-dashboard :is(.city-stats, .demand-section, .stat-pair > div + div, .advisor, .goal, .budget-button) { border-color: #ddd; }
.builder-dashboard .advisor { background: #eee; }
.builder-dashboard .positive { color: #31713d; }
.builder-dashboard .negative { color: #a53f31; }
.builder-dashboard .budget-button { color: #333; }
.build-tray { background: #fafafaf5; border-color: #ccc; }
.tool-description { border-color: #ddd; }
.build-tools > button { color: #555; }
.build-tools > button.active { background: #ece8fa; color: #33246e; border-color: #b9ade2; }
.build-tools > button.active::after { background: var(--accent); }
.build-tools > button:hover { background: #eee; }
@media (max-width: 560px) {
  .brand { font-size: 10px; gap: 4px; letter-spacing: .7px; }
  .brand img { width: 23px; height: 23px; }
  .map-menu > summary { font-size: 10px; }
}