/* Blue atlas interface. Keep this last: presentation only, never map artwork. */
:root {
  --ink: #061528;
  --panel: #0c2843;
  --panel-raised: #163d5c;
  --line: #426b8a;
  --paper: #f1f7fc;
  --cream: #ffffff;
  --muted: #bfd3e5;
  --gold: #7fc5ee;
  --gold-light: #bce8ff;
  --green: #91d7b1;
  --red: #ffb4a7;
  --ui-border: #507c9c;
  --ui-border-bright: #96d8ff;
  --ui-deep: #081e34;
  --ui-surface: linear-gradient(135deg, #153c5b 0%, #0c2945 55%, #091f36 100%);
  --ui-header: linear-gradient(180deg, #225372 0%, #143956 48%, #102d48 100%);
  --ui-card: linear-gradient(145deg, #173d5a, #102d47 65%, #0c253e);
  --ui-button: linear-gradient(180deg, #255779 0%, #183f5e 48%, #12344f 100%);
  --ui-selected: linear-gradient(180deg, #337ca4, #235d84 52%, #194869);
  --ui-shadow: inset 0 1px 0 #c0e6ff18, 0 8px 24px #020c1940;
  --ui-radius: 5px;
}

body {
  color: var(--cream);
  background: radial-gradient(ellipse at 25% 0, #17497080, transparent 65%),
    repeating-linear-gradient(115deg, transparent 0 119px, #8ccfff05 120px 121px), #061528;
}
::selection { color: #fff; background: #356f96; }
.shell { gap: 12px; }
.topbar {
  padding: 10px 14px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-header);
  box-shadow: var(--ui-shadow);
}
.brand h1 { color: #fff; letter-spacing: .035em; }
.brand h1 { white-space: nowrap; font-size: 23px; }
.brand .eyebrow { color: #c1e2f6; letter-spacing: .2em; }
.brand-mark {
  color: #fff;
  border-color: #8bc7e8;
  background: radial-gradient(circle at 35% 20%, #38799e, #102f4c 75%);
  box-shadow: inset 0 0 0 3px #102f4c, inset 0 0 0 4px #8bc7e878, 0 2px 10px #04132280;
  transform: none;
}
.resource, .resource:last-child { border-color: #9dcff52b; }
.realm-resources .resource b { color: #fff; font-size: 13px; }
.realm-resources .resource small { color: var(--muted); font-size: 10px; }
.world-time span { color: var(--muted); }
.world-time b { color: #fff; }
.resource-icon { text-shadow: 0 1px 3px #000; }

/* Framed navigation and clearly separated work areas. */
.primary-nav {
  padding: 6px;
  gap: 6px;
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
  background: linear-gradient(180deg, #133854, #091f35);
  box-shadow: var(--ui-shadow);
}
.primary-nav :is(.nav-item, .wiki-nav-link) {
  min-height: 52px;
  border: 1px solid #3e6788;
  border-radius: 4px;
  color: #e6f1fb;
  background: linear-gradient(180deg, #1c4564, #102e49);
  box-shadow: inset 0 1px 0 #b6dfff0e;
}
.primary-nav :is(.nav-item, .wiki-nav-link) > b { font-size: 10px; }
.primary-nav :is(.nav-item, .wiki-nav-link) > span { color: #c8eaff; }
.primary-nav .nav-item.active {
  color: #fff;
  border-color: var(--ui-border-bright);
  background: var(--ui-selected);
  box-shadow: inset 3px 0 0 #c4ecff, inset 0 1px 0 #d5f3ff38, 0 0 12px #4da8db18;
}
.nav-badge.warning { color: #fff; background: #8c3f46; }
.map-panel { border-color: var(--ui-border); border-radius: var(--ui-radius); }
.sidebar, .command-center, .command-center.city-active {
  color: var(--cream);
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.realm-card, .command-header {
  border-bottom-color: var(--ui-border);
  background: var(--ui-header);
  box-shadow: inset 0 1px 0 #c0e6ff18;
}
.realm-card { padding: 17px 16px 14px; }
.realm-card-heading h2 { color: #fff; font-size: 21px; }
.heraldry { color: #fff; background: linear-gradient(135deg, #367fa6 50%, #1b4a70 50%); }
.sidebar-tabs { border-color: var(--ui-border); }
.sidebar-tabs .sidebar-tab { color: var(--muted); background: #0a223b; border-color: var(--line); font-size: 11px; }
.sidebar-tabs .sidebar-tab.active { color: #fff; background: var(--ui-button); }
.sidebar-tab.active::after { background: #a7dfff; }
.sidebar-tab span { color: #fff; background: #376b8b; }
.sidebar-panel { padding: 16px; }
.sidebar-panel, .command-body, .settings-content { scrollbar-color: #527f9e #091f35; }
.command-header h2 { letter-spacing: .025em; }
.command-header > div > p:last-child { color: var(--muted); font-family: inherit; font-size: 12px; }
.command-body { background: radial-gradient(ellipse at top right, #28648d1f, transparent 65%); }

/* Readable white copy with a quieter, still high-contrast secondary tier. */
.shell :is(h2, h3, h4), dialog :is(h2, h3, h4) { color: #fff; }
:is(.sidebar, .command-center, .settings-dialog, .neighbours-dialog, .order-review, .city-placement)
  :is(p, small, label, dt, li, blockquote, .data-row span, .card-kicker, .city-navigation-status) { color: var(--muted); }
:is(.sidebar, .command-center, .settings-dialog, .neighbours-dialog, .order-review, .city-placement)
  :is(b, strong, h2, h3, h4) { color: #fff; }
.shell .eyebrow, dialog .eyebrow { color: #abd9f5; }
.sidebar :is(.metrics span, .living-metrics span, .prosperity, .tile-heading p,
  .queue-heading > span, .timeline time, .activity-list time, .order-list time) { color: var(--muted); }
.sidebar :is(.living-world-card > p, .activity-list b, .order-list b, .need-list > div,
  .legend-item, .queue-rule, .council-note > span) { font-size: 11px; line-height: 1.5; }
.sidebar :is(.activity-list small, .order-list small, .metrics span, .living-metrics span,
  .realm-card-heading p:last-child, .need-list b, .prosperity, .queue-heading > span) { font-size: 10px; }
.sidebar :is(.metrics strong, .living-metrics b) { color: #fff; font-size: 12px; }
.sidebar .tile-lore { color: var(--muted); }
.command-center :is(.summary-stat span, .summary-lead span, .summary-stat p, .summary-lead p,
  .data-row small, .bar-list div, .portrait span, .timeline p) { color: var(--muted); }
.command-center :is(.summary-stat b, .summary-lead strong, .stock-strip b, .data-row b,
  .portrait b, .timeline b) { color: #fff; }
.command-center .city-stats span, .command-center .city-stock span { color: var(--muted); }

/* Shared cards, lists, and input wells. */
:is(.living-world-card, .command-card, .city-card, .summary-lead, .summary-stat, .person-card,
  .succession-stage, .session-history, .settings-note, .supply-stock-node, .portrait,
  .city-supply-goal-material, .city-supply-goal-sources > li, .city-project-card,
  .metrics > div, .city-stats > div, .city-stock > div, .city-tech-branch) {
  border-color: var(--line);
  border-radius: var(--ui-radius);
  background: var(--ui-card);
  box-shadow: inset 0 1px 0 #c0e6ff0d;
}
.summary-lead, .current-person { border-color: #78b6da; }
.city-card h3 { padding-bottom: 10px; border-bottom: 1px solid #4a73935c; }
.city-more, .city-placement .placement-site-scan { border-color: var(--line); background: #0b243c; }
.city-more > summary { color: #fff; }
.city-tabs { gap: 6px; }
.city-current-section { padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: #0b243c; }
.city-navigation-groups h3 { color: #c4e9ff; }
.city-notice { color: #fff; border-color: #a1d9fa; background: #204966; }
.city-workspace :is(.city-muted, .city-limitations, .city-list span, .city-empty),
.sidebar :is(.city-pulse > span, .city-pulse-link, .city-overlay-work, .city-overlay-priorities) { color: var(--muted); }
.sidebar .city-overlay-work summary { color: #e3f4ff; }
.sidebar :is(.city-overlay-work, .city-overlay-priorities) { border-color: var(--line); }
.sample-label { color: #c3e4fa; }
.living-metrics span, .stock-strip span { color: var(--muted); border-color: var(--line); background: #0a223a; }
.control-banner, .queue-rule { color: var(--paper); border-color: #85c7ee; background: #173f5a; }
.control-banner span { color: var(--muted); }
.attention-card { border-color: #b67c6e; border-left-color: #efb79c; background: linear-gradient(130deg, #343b50, #182e46); }
.severity { color: #ffe0ca; border-color: #bc8873; }
.overview-section, .legend-card, .data-row, .activity-list li + li, .order-list li + li,
.setting-row, .settings-session-info div, .supply-instance + .supply-instance,
.city-placement .placement-site-scan li, .city-placement .placement-site-group,
.city-placement .placement-operation, .kin-branch { border-color: #527d9a59; }
.city-supply-goal-materials, .city-supply-goal-sources { border-color: var(--line); }
.city-card:is([data-supply-details], [data-production-details], [data-governor-details]) summary { color: #f1f7fc; }
.city-tech-track { border-color: var(--line); }
.city-tech-track li::before { background: #abdfff; }
.city-tech-track button[data-knowledge-map] { background: var(--ui-button); }
:is(.command-center, dialog, .city-placement) :is(.city-ready, .terrain-fit.suitable) { color: #b7eccb; }
:is(.command-center, dialog, .city-placement) .city-blocked { color: #ffdab4; }
.order-review .review-error { color: #ffc3b8; }
.activity-icon, .order-index, .person-seal, .portrait i {
  color: #d0edff;
  border-color: #638fae;
  background: radial-gradient(circle at 40% 20%, #295e80, #102b45);
}
.flow-steps span { color: #fff; border-color: var(--line); background: #10304a; }
.flow-steps span::before { color: #bce8ff; }
.timeline::before { background: var(--line); }
.timeline li::before { border-color: #163b59; background: #a4dcff; box-shadow: 0 0 0 1px #699aba; }
.action-points > i, .prosperity i, .need-list em, .order-list li div > i, .bar-list i { background: #061a2e; }
.action-points em, .prosperity em, .need-list em i, .order-list em, .bar-list i em { background: linear-gradient(90deg, #357ca8, #9edfff); }

/* Every action has a visible edge; selected actions are brighter blue. */
:is(.shell, dialog) :is(button, .command-action, .map-view-link) {
  color: #fff;
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-button);
  text-shadow: 0 1px 2px #04152480;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.shell :is(.command-action, .primary, .icon-button), dialog .command-action {
  min-height: 36px;
  height: auto;
  padding: 8px 12px;
  line-height: 1.4;
  font-size: 12px;
}
:is(.shell, dialog) :is(.text-button, .inline-action) {
  padding: 6px 9px;
  border: 1px solid var(--ui-border);
  font-size: 11px;
}
:is(.shell, dialog) :is(button, .command-action, .map-view-link):hover:not(:disabled),
.primary-nav .wiki-nav-link:hover {
  color: #fff;
  border-color: #b4e4ff;
  background: linear-gradient(180deg, #34799e, #205476);
  box-shadow: inset 0 1px 0 #e4f6ff30, 0 0 0 1px #75c6f21a;
  filter: none;
}
:is(.shell, dialog) :is(.primary, .primary-order, .is-current),
.city-tabs .is-current, .city-navigation .is-current,
.settings-navigation button[aria-current], .map-panel button[aria-pressed="true"],
.map-panel .map-view-switcher button.active {
  color: #fff;
  border-color: var(--ui-border-bright);
  background: var(--ui-selected);
  box-shadow: inset 0 1px 0 #d5f3ff38, inset 0 -2px 0 #88cefa70;
}
:is(.shell, dialog) button:disabled {
  color: #a8bed1;
  border-color: #3c5971;
  background: #122c44;
  box-shadow: none;
  opacity: .65;
  cursor: not-allowed;
  text-shadow: none;
}
:is(.shell, dialog) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #d4f1ff;
  outline-offset: 3px;
}
:is(.shell, dialog) :is(input:not([type="checkbox"]), select, textarea) {
  color: #fff;
  border: 1px solid #648ba8;
  border-radius: 4px;
  background: #091f35;
}
:is(.shell, dialog) option { color: #fff; background: #102e48; }
.city-workspace :is(select, input, textarea),
.city-workspace [data-career-panel] :is(input, select),
.city-card :is(input[type="number"], input[data-district-field]) { color: #fff; border-color: #648ba8; background: #091f35; }
:is(.shell, dialog) input::placeholder { color: #b5ccdf; }
:is(.shell, dialog) input[type="checkbox"] { accent-color: #559dca; }
.shell .action-points { border-color: #6599bb; background: var(--ui-button); }
.action-points b { color: #fff; }
.action-points span { color: var(--paper); }

/* Map overlays get the same frame; canvases and terrain keep their own colors. */
.map-panel .map-view-switcher, .map-panel .map-options-content,
.map-panel .tile-metadata-detail, .map-panel .city-placement,
.overview, .settings-popover { color: #fff; border-color: var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.map-panel .map-view-switcher button { min-height: 44px; border: 1px solid #527e9d; margin: 2px 0; }
.map-panel .map-view-switcher button b { color: #fff; font-size: 10px; }
.map-panel :is(.map-tools button, .global-map-options, .map-options-content button,
  .map-view-link, .local-site) { color: #fff; border: 1px solid var(--ui-border); background: var(--ui-button); }
.map-panel .map-view-switcher { top: 12px; }
.map-panel .map-tools { top: 174px; }
.map-panel .global-map-options { top: 322px; }
.map-panel[data-map-view] .map-view-context {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 10px 13px;
  border: 1px solid #78a5c66b;
  border-left: 2px solid #a3daff;
  border-radius: 4px;
  background: linear-gradient(110deg, #09233de8, #123c5bd9);
  text-shadow: 0 1px 2px #000;
}
.map-panel .map-view-context strong { color: #fff; font: 600 15px/1.25 Georgia, serif; }
.map-panel .map-view-context .eyebrow { color: #c2e6ff; font-size: 9px; }
.map-panel .map-options-content .map-information,
.map-panel .map-information .map-settlement-context,
.map-panel :is(.local-site small, .hex-detail-note span, .selection-summary small) { color: var(--muted); }
.map-panel .map-hint { color: #fff; text-shadow: 0 1px 4px #000, 0 0 8px #041422; }
.map-panel .selection-buttons button span, .map-panel .selection-summary b { color: #fff; }
.map-panel .city-placement .screen-actions { background: #0b2741; }
.map-panel .prototype-bar span, .status-pill { color: var(--paper); border-color: var(--line); background: #0c2b46; }
.map-options-content .selection-actions { border-color: var(--line); }
.toast { color: #fff; border-color: #79b8de; border-left-color: #bce8ff; background: var(--ui-surface); }
.toast i { color: #c5eaff; }

/* Dialogs use an inset navy body and a lighter title bar. */
dialog, .settings-dialog, .neighbours-dialog, .order-review {
  color: #fff;
  border: 1px solid #7aa8c8;
  border-radius: 6px;
  background: var(--ui-surface);
  box-shadow: inset 0 0 0 3px #091f3580, 0 28px 100px #010a18b3;
}
dialog::backdrop, .neighbours-dialog::backdrop, .order-review::backdrop { background: #030e20b8; backdrop-filter: blur(4px); }
.settings-heading { border-color: var(--ui-border); background: var(--ui-header); }
.settings-navigation, .settings-footer { border-color: var(--line); background: #0a223b; }
.settings-content { background: linear-gradient(130deg, #12334f, #0b2741); }
.settings-dialog .settings-navigation button { border: 1px solid #3d6481; background: var(--ui-button); }
.settings-dialog .settings-navigation button[aria-current] { border-color: #96d8ff; background: var(--ui-selected); }
.settings-navigation button span, .settings-note b { color: #e3f4ff; }
.settings-note kbd { color: #fff; border-color: #648ba8; background: #081e34; }
.settings-navigation a, dialog .library-link { color: #c5e9ff; }
.settings-footer p, .settings-heading p:last-child, dialog > p:not(.eyebrow) { color: var(--muted); }
.settings-dialog .primary { color: #fff; border-color: #a4dbfb; background: var(--ui-selected); }
.connection-status, .settings-dialog .connection-status { color: var(--paper); border-color: var(--line); background: #091f35; }
.settings-dialog .connection-status.online { color: #c2f2d3; border-color: #7abfa6; }
.settings-dialog .setting-row input[readonly] { color: var(--muted); }

/* Keep the existing mobile flow, with a larger desktop navigation rail. */
@media (min-width: 901px) {
  .shell { grid-template-columns: 94px minmax(0, 1fr); grid-template-rows: 78px minmax(0, 1fr); min-height: 620px; }
  .topbar { grid-template-columns: 270px minmax(0, 1fr) auto; gap: 12px; }
  .resource { min-width: 80px; padding: 0 10px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 338px; gap: 12px; }
  .command-center { top: 102px; right: 362px; left: 118px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .topbar { grid-template-columns: 240px minmax(0, 1fr) auto; }
  .brand h1 { font-size: 20px; }
  .resource { min-width: 66px; padding: 0 7px; }
  .resource small { max-width: 80px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 310px; }
  .command-center { right: 334px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; padding: 10px; }
  .realm-resources { display: none; }
  .turn-status { position: static; }
  .primary-nav { padding: 4px; }
  .primary-nav .nav-item > b { font-size: 9px; }
}
@media (max-width: 640px) {
  .shell { gap: 7px; }
  .topbar { padding: 8px; }
  .brand h1 { font-size: 16px; letter-spacing: 0; }
  .brand .eyebrow { font-size: 7px; letter-spacing: .05em; }
  .brand-mark { width: 28px; height: 28px; font-size: 18px; }
  .primary-nav { padding: 4px; gap: 4px; }
  .primary-nav :is(.nav-item, .wiki-nav-link) { min-width: 62px; min-height: 50px; }
  .primary-nav .nav-item.active { box-shadow: inset 0 -2px 0 #c4ecff; }
  .command-center { top: 149px; }
  .sidebar-panel { padding: 13px; }
  .map-panel .map-view-context { padding: 7px 9px; }
  .map-panel .map-view-context strong { font-size: 13px; }
  .map-panel .map-view-context .eyebrow { font-size: 8px; }
}
@media (max-width: 360px) {
  .brand-mark { display: none; }
  .topbar { padding: 7px; }
  .turn-status { gap: 5px; }
}
@media (max-height: 600px) and (min-width: 641px) {
  .map-panel .map-tools { top: 12px; }
  .map-panel .global-map-options { top: 160px; }
}
html[data-high-contrast="true"] {
  --line: #97c9e8;
  --ui-border: #b3dfff;
  --muted: #e4f3ff;
  --paper: #fff;
  --cream: #fff;
}
html[data-high-contrast="true"] :is(.shell, dialog) :is(p, small, label, dt, .eyebrow) { color: #e4f3ff; }
html[data-high-contrast="true"] :is(.shell, dialog) :is(button, input, select) { border-color: #b3dfff; }
@media (prefers-reduced-motion: reduce) {
  :is(.shell, dialog) :is(button, .command-action, .map-view-link) { transition: none; }
}