:root {
  color-scheme: light;
  --ink: #252722;
  --ink-soft: #4f5048;
  --muted: #6b665a;
  --paper: #e8deca;
  --paper-deep: #d5c5a7;
  --paper-light: #f8f2e6;
  --surface: rgba(248, 242, 230, 0.97);
  --line: #aa9b7e;
  --line-dark: #655d4e;
  --green: #2f6546;
  --green-bright: #397b50;
  --amber: #8a682d;
  --red: #914238;
  --purple: #704281;
  --blue: #3f6878;
  --navy: #29333b;
  --sea: #adc6cc;
  --focus: #f2c956;
  --layout-max: 1440px;
  --page-gutter: 32px;
  --section-gap: 24px;
  --card-gap: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --dock-height: 68px;
  --inspector-width: 420px;
  --radius: 3px;
  --text-scale: 1;
  --surface-shadow: 0 10px 28px rgba(48, 39, 25, 0.13);
  --inspector-shadow: 0 18px 48px rgba(32, 31, 27, 0.23);
  font-family: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

/* One lever for the whole interface. Everything below is in rem, so the text
   size control in the Game menu only has to move --text-scale. */
html {
  font-size: calc(106.25% * var(--text-scale));
  scroll-behavior: smooth;
}

html[data-text-scale="large"] {
  --text-scale: 1.15;
}

body {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(78, 63, 40, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 63, 40, 0.025) 1px, transparent 1px),
    var(--paper);
  background-size: 23px 23px;
}

/*
 * The desk scrolls inside this element, so the command dock below it is a real
 * bar rather than an overlay. Nothing ever sits underneath the dock.
 */
.app-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

[hidden] {
  display: none !important;
}

button,
input,
select {
  min-height: 44px;
  font: 700 0.875rem/1.2 Arial, sans-serif;
}

button {
  padding: 0.65rem 0.9rem;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

/* Hover styling is for pointers only. On a touch screen a tapped element keeps
   :hover until you tap elsewhere, which repainted the header buttons cream on
   cream and made their labels vanish. */
@media (hover: hover) {
  button:hover:not(:disabled) {
    background: #fffaf0;
  }

  .quiet-button:hover:not(:disabled) {
    color: var(--navy);
  }
}

button:disabled,
button[aria-disabled="true"] {
  color: #625f57;
  background: #d7d0c2;
  border-color: #aaa291;
  cursor: not-allowed;
  opacity: 1;
}

input,
select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  color: var(--ink);
  background: #fffaf0;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex="0"]:focus-visible,
[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4,
p,
dl,
dd {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  line-height: 1.12;
}

h2 {
  font-size: clamp(2rem, 3vw, 2.35rem);
}

h3 {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
}

h4 {
  font-size: 1.125rem;
}

p,
li,
dd {
  font-size: 0.875rem;
  line-height: 1.45;
}

.shell-inner {
  width: min(
    var(--layout-max),
    calc(100% - (var(--page-gutter) * 2))
  );
  margin-right: auto;
  margin-left: auto;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 500;
  padding: 0.7rem 0.9rem;
  color: #fff;
  background: var(--navy);
  border: 2px solid var(--focus);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.project-region,
.popup-kicker,
.market-category,
.feed-kicker,
.portfolio-type,
.portfolio-institution {
  margin-bottom: var(--space-1);
  color: var(--muted);
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.positive,
.positive dd {
  color: var(--green);
}

.negative,
.negative dd {
  color: var(--red);
}

.surface {
  min-width: 0;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--surface-shadow);
}

.empty-state,
.policy-empty {
  margin: 0;
  padding: var(--space-4);
  color: var(--muted);
  background: rgba(232, 222, 202, 0.55);
  border: 1px dashed var(--line);
  font: 0.875rem/1.45 Arial, sans-serif;
}

.secondary-button {
  color: var(--navy);
  background: transparent;
  border-color: var(--line-dark);
}

.danger-button,
.restart-button {
  color: #fff;
  background: var(--red);
  border-color: #5d2923;
}

.danger-button:hover:not(:disabled),
.restart-button:hover:not(:disabled) {
  background: #78352e;
}

.icon-button {
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  padding: 0;
  place-items: center;
  background: transparent;
  font-size: 1.35rem;
}

/* Country header and utilities */

.country-bar {
  position: relative;
  z-index: 80;
  color: #f7f0df;
  background: var(--navy);
  border-bottom: 3px solid #917c56;
}

.country-bar-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(600px, 2.8fr) auto;
  gap: var(--space-4);
  align-items: center;
  min-height: 72px;
}

.country-identity h1 {
  margin: 0;
  font-size: clamp(2.1rem, 3vw, 2.5rem);
  letter-spacing: 0.025em;
}

/* The top bar carries the country, the date, and the Game menu. Nothing else. */
.country-date {
  min-width: 0;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: #cfc8b8;
  font: 400 1rem/1.2 Georgia, serif;
  letter-spacing: 0.02em;
}

.country-figure {
  position: relative;
  min-width: 0;
  padding: var(--space-1) var(--space-3);
  border-left: 1px solid #687179;
}

.country-figure dt {
  overflow: hidden;
  color: #c9c2b3;
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.country-figure dd {
  overflow: hidden;
  margin: var(--space-1) 0 0;
  font: 700 0.9375rem/1.2 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-bar .positive,
.country-bar .positive dd {
  color: #9edbb0;
}

.country-bar .negative,
.country-bar .negative dd {
  color: #ffafa3;
}

.country-bar-controls {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: end;
}

.country-details-toggle {
  display: none;
}

.game-menu-wrap {
  position: relative;
}

.quiet-button {
  color: inherit;
  background: transparent;
  border-color: currentColor;
}

.game-menu-button {
  min-width: 76px;
}

.game-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 120;
  width: min(410px, calc(100vw - (var(--page-gutter) * 2)));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: var(--space-4);
  color: var(--ink);
  background: var(--paper-light);
  border: 2px solid var(--line-dark);
  border-radius: var(--radius);
  box-shadow: var(--inspector-shadow);
}

.file-drawer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.file-drawer label {
  display: grid;
  gap: var(--space-1);
}

.file-drawer label span {
  color: var(--muted);
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.file-drawer button {
  min-width: 128px;
}

.game-menu-rule {
  height: 1px;
  margin: var(--space-4) 0;
  background: var(--line);
}

.restart-button {
  width: 100%;
}

.text-size-control {
  display: grid;
  gap: var(--space-2);
}

.text-size-control > span {
  color: var(--muted);
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.text-size-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.text-size-options button[aria-pressed="true"] {
  color: #fff;
  background: var(--green);
  border-color: #1d3d2a;
}

.developer-menu {
  margin-top: var(--space-3);
}

.cheat-toggle {
  width: 100%;
  border-style: dashed;
}

.cheat-panel {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: #e7dcc8;
  border: 1px dashed var(--line-dark);
}

.cheat-panel > strong {
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Orders, results, and monthly feedback */

.orders-ribbon {
  position: relative;
  z-index: 60;
  min-height: 44px;
  background: #d2c19f;
  border-bottom: 1px solid var(--line);
}

.orders-ribbon-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
}

.orders-ribbon-heading {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-mark {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 101, 70, 0.16);
}

.orders-ribbon-items {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.orders-ribbon-empty {
  overflow: hidden;
  color: var(--muted);
  font: 0.875rem/1.2 Arial, sans-serif;
  text-overflow: ellipsis;
}

.order-chip,
.orders-ribbon-chip,
.tracker-chip {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  min-height: 36px;
  padding: 0.4rem 0.65rem;
  color: var(--ink);
  background: rgba(248, 242, 230, 0.75);
  border: 1px solid #b3a483;
  border-radius: 2px;
  font: 700 0.8125rem/1.2 Arial, sans-serif;
}

button.order-chip,
button.orders-ribbon-chip,
button.tracker-chip {
  min-height: 44px;
}

.order-chip strong,
.orders-ribbon-chip strong,
.tracker-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-chip[data-status="blocked"],
.order-chip[data-status="attention"],
.orders-ribbon-chip[data-status="blocked"],
.orders-ribbon-chip[data-status="attention"] {
  border-left: 3px solid var(--red);
}

.order-chip[data-status="result"],
.orders-ribbon-chip[data-status="result"] {
  border-left: 3px solid var(--purple);
}

.order-chip.is-new,
.orders-ribbon-chip.is-new {
  animation: tracker-highlight 1.5s ease-out;
}

.ribbon-more-button {
  min-width: 88px;
  min-height: 44px;
  padding: 0.45rem 0.65rem;
  background: transparent;
  border-color: transparent;
}

.month-summary {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: #f4ecd9;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
}

.month-summary-heading {
  display: flex;
  gap: var(--space-4);
  align-items: start;
  justify-content: space-between;
}

.month-summary-heading h2 {
  margin-bottom: var(--space-3);
  font-size: 1.5rem;
}

.month-summary-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.month-summary-list li {
  min-height: 44px;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.33);
  border-top: 1px solid var(--line);
}

/* Desk navigation */

.desk-switcher {
  margin-top: var(--space-3);
}

.desk-switcher-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  background: #3d4644;
  border: 1px solid #242b29;
  border-radius: var(--radius);
}

.desk-switcher-tab {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.desk-switcher-tab {
  color: #ece7da;
  background: transparent;
  border-color: transparent;
}

.desk-switcher-tab[aria-selected="true"] {
  color: #fff;
  background: var(--green);
  border-color: #1d3d2a;
}

.desk-view {
  margin-top: var(--space-3);
}

/* Country Desk */

.state-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.125fr) minmax(400px, 1fr);
  gap: var(--section-gap);
  /* Each column is as tall as what it holds. Stretching them together left a
     map card with a field of empty paper under it whenever the sheet was long. */
  align-items: start;
}

.map-card {
  min-width: 0;
}

.section-heading,
.overview-section-heading,
.record-section-heading {
  display: flex;
  gap: var(--space-4);
  align-items: end;
  justify-content: space-between;
}

.section-heading {
  margin-bottom: var(--space-3);
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.compact-heading {
  align-items: center;
}

.map-tools {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-content: end;
}

.map-tools button {
  min-width: 44px;
  color: #f5efe2;
  background: #535c5f;
  border-color: #353b3c;
}

.map-tools button:hover:not(:disabled) {
  background: #41494b;
}

.map-frame {
  position: relative;
  overflow: hidden;
  height: clamp(340px, 52vh, 640px);
  background: var(--sea);
  border: 1px solid #69787a;
  touch-action: none;
}

.map-frame:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
}

.map-frame:fullscreen .world-map {
  height: 100vh;
}

.fullscreen-exit {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 12;
  display: none;
  color: #fff;
  background: #343d40;
  border-color: #151a1b;
}

.map-frame:fullscreen .fullscreen-exit {
  display: block;
}

.world-map {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  user-select: none;
}

.world-map:active {
  cursor: grabbing;
}

.sea {
  fill: var(--sea);
}

/* The paper's grain: meridians and parallels, barely there. */
.map-graticule line {
  stroke: rgba(94, 122, 128, 0.22);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* A shore, not an edge: a pale band of shallow water under the coastline. */
.coast-halo {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 8;
  vector-effect: non-scaling-stroke;
}

.region-shape {
  stroke: rgba(70, 66, 55, 0.42);
  stroke-linejoin: round;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  transition:
    filter 200ms ease,
    opacity 200ms ease;
  cursor: pointer;
}

.region-shape:hover,
.region-shape:focus {
  filter: brightness(1.06) saturate(1.05);
  outline: none;
}

.region-shape.selected {
  filter: brightness(1.12) saturate(1.1);
}

/* The heavy line: where a country ends, whether at a neighbour or at the sea. */
.country-outline {
  fill: none;
  stroke: #3a3529;
  stroke-linejoin: round;
  stroke-width: 2.4;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.country-outline.domestic {
  stroke: #24190f;
  stroke-width: 3.4;
}

/* The selected region is marked over the fills, so the outline stays clean. */
.region-shape.selected {
  stroke: #22261f;
  stroke-width: 2.6;
}

.region-shape.in-selected-country {
  stroke: rgba(34, 38, 31, 0.75);
  stroke-width: 1.4;
}

.capital-mark {
  pointer-events: none;
}

.capital-ring {
  fill: none;
  stroke: #3b382c;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.capital-dot {
  fill: #3b382c;
}

.capital-mark.domestic .capital-ring,
.capital-mark.domestic .capital-dot {
  stroke: #6f2f27;
  fill: #6f2f27;
}

.region-label {
  fill: #2c3029;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12.5px;
  font-weight: 600;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(247, 241, 226, 0.82);
  stroke-width: 3.5px;
  text-anchor: middle;
}

.country-label {
  fill: #23271f;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.country-label.domestic {
  fill: #5c2a22;
}

.water-label {
  fill: #4d6f77;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 3.2px;
  stroke: none;
}

.map-tooltip {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: var(--space-1);
  width: min(280px, calc(100% - 16px));
  padding: var(--space-3);
  color: #f7f1e3;
  background: rgba(29, 36, 36, 0.98);
  border: 1px solid #0f1414;
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(27, 30, 29, 0.3);
  pointer-events: none;
}

.map-tooltip strong {
  font-size: 1rem;
}

.map-tooltip span {
  color: #f0eadf;
  font: 0.875rem/1.4 Arial, sans-serif;
}

.state-detail-slot,
.institution-detail-slot {
  min-width: 0;
}

.state-detail-slot {
  display: grid;
  align-items: start;
}

.region-panel {
  align-self: stretch;
  min-width: 0;
  height: 100%;
  overflow: visible;
  padding: 0;
}

.empty-panel,
.region-header,
.region-panel-section,
.region-section {
  padding: var(--space-6);
}

.region-header {
  color: #f6f1e5;
  background: #33453a;
  border-bottom: 3px solid #8c7650;
}

.region-header h2 {
  margin-bottom: var(--space-1);
  font-size: 2rem;
}

.region-header .return-dateline,
.region-header .region-kicker {
  color: #cfd8d0;
}

.region-header p:last-child {
  margin: 0;
  color: #d5ddd6;
  font: 0.875rem/1.45 Arial, sans-serif;
}

.region-summary,
.region-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.region-summary > div,
.region-metric {
  min-width: 0;
  padding: var(--space-4) var(--space-2);
  text-align: center;
  border-right: 1px solid var(--line);
}

.region-summary > div:last-child,
.region-metric:last-child {
  border-right: 0;
}

.region-summary strong,
.region-metric strong {
  display: block;
  margin-bottom: var(--space-1);
  font: 700 1.25rem/1.1 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.region-summary span,
.region-metric span {
  color: var(--muted);
  font: 700 0.8125rem/1.25 Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.region-panel-section,
.region-section {
  border-bottom: 1px solid var(--line);
}

.region-panel-section h3,
.region-section > h3 {
  margin-bottom: var(--space-3);
  font-size: 1.125rem;
}

.infrastructure-card,
.region-context-action,
.region-key-issue {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: #e4dac5;
  border: 1px solid #b8a98c;
}

.infrastructure-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.infrastructure-card strong,
.infrastructure-card span {
  display: block;
}

.infrastructure-card span {
  margin-top: var(--space-1);
  color: var(--muted);
  font: 0.875rem/1.4 Arial, sans-serif;
}

.region-disclosures {
  display: grid;
}

.region-disclosures details {
  border-bottom: 1px solid var(--line);
}

.region-disclosures summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  font: 700 0.875rem/1.3 Arial, sans-serif;
  cursor: pointer;
}

.region-disclosures details[open] summary {
  background: #e7dcc7;
}

.region-disclosure-body {
  padding: 0 var(--space-6) var(--space-6);
}

.fact-list,
.local-price-grid,
.reports-grid {
  display: grid;
  gap: var(--space-2);
}

.local-price-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: var(--space-2) 0;
  border-top: 1px dotted #c4b79f;
}

.fact-row:first-child {
  border-top: 0;
}

.fact-row strong,
.fact-row small {
  display: block;
}

.fact-row strong {
  font-size: 0.875rem;
}

.fact-row span,
.fact-row small {
  color: var(--muted);
  font: 0.8125rem/1.35 Arial, sans-serif;
}

.fact-value {
  display: flex !important;
  gap: var(--space-1);
  align-items: center;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.report-card {
  padding: var(--space-4);
  background: #f1e9d9;
  border: 1px solid #c4b79f;
  border-left: 3px solid var(--green);
}

.report-card h3,
.report-card h4 {
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.report-card p {
  margin-bottom: var(--space-2);
  color: var(--ink-soft);
  font: 0.875rem/1.45 Arial, sans-serif;
}

.country-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--section-gap);
  margin-top: var(--section-gap);
}

.market-signals,
.state-project-summary {
  display: grid;
  gap: var(--space-2);
}

.market-signal,
.signal-row,
.state-project-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 52px;
  padding: var(--space-3);
  background: #f1e9d9;
  border: 1px solid #c4b79f;
}

.market-signal strong,
.signal-row strong {
  font-size: 1rem;
}

.market-signal span,
.signal-row span {
  color: var(--muted);
  font: 0.875rem/1.35 Arial, sans-serif;
}

/*
 * Work cards carry a decision, so they get room to be read: a real minimum
 * width and a capped track count, rather than as many columns as the desk is
 * wide. Five 260px columns turned "Local households" into three wrapped lines.
 */
.project-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--card-gap);
  max-width: 1180px;
  margin-top: var(--space-3);
}

/* Shared action and status components */

.action-card,
.policy-card,
.project-card,
.institution-card,
.institution-summary-card,
.portfolio-card,
.delegation-card,
.regional-policy-card {
  position: relative;
  min-width: 0;
  padding: var(--space-4);
  background: #f1e9d9;
  border: 1px solid #c4b79f;
  border-radius: var(--radius);
}

.action-card,
.policy-card,
.project-card {
  display: flex;
  min-height: 178px;
  flex-direction: column;
}

.action-card-header,
.policy-card-header,
.project-card-header,
.institution-card header,
.portfolio-card header,
.regional-policy-card header {
  display: flex;
  gap: var(--space-3);
  align-items: start;
  justify-content: space-between;
}

.action-card h4,
.policy-card h4,
.project-card h3,
.project-card h4,
.institution-card h4,
.portfolio-card h4,
.regional-policy-card h4 {
  margin-bottom: var(--space-2);
  font-size: 1.0625rem;
}

.action-card p,
.policy-card p,
.project-card p,
.institution-card p,
.portfolio-card p,
.delegation-card p,
.regional-policy-card p {
  color: var(--ink-soft);
  font: 0.875rem/1.45 Arial, sans-serif;
}

.action-card-summary,
.action-card-tradeoff {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.action-card-meta,
.project-card-meta,
.policy-card-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--muted);
  font: 700 0.8125rem/1.35 Arial, sans-serif;
}

.action-card-actions,
.project-card-actions,
.policy-card-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.action-card-actions button,
.project-card-actions button,
.policy-card-actions button,
.policy-command-button,
.commission-button {
  min-height: 44px;
  color: #fff;
  background: var(--green-bright);
  border-color: #214a31;
}

.action-card-actions button:hover:not(:disabled),
.project-card-actions button:hover:not(:disabled),
.policy-card-actions button:hover:not(:disabled),
.policy-command-button:hover:not(:disabled),
.commission-button:hover:not(:disabled) {
  background: var(--green);
}

.policy-status,
.project-status,
.lifecycle-status,
.result-status,
.unrest-badge {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  width: fit-content;
  padding: 0.25rem 0.4rem;
  color: #fff;
  background: #687167;
  border-radius: 2px;
  font: 700 0.8125rem/1.2 Arial, sans-serif;
}

.policy-status.active,
.policy-status.available,
.project-status.complete,
.lifecycle-status.active,
.lifecycle-status.completed {
  background: var(--green);
}

.policy-status.authorizing,
.policy-status.awaiting_funds,
.policy-status.implementing,
.project-status.active,
.lifecycle-status.ordered,
.lifecycle-status.implementing {
  background: var(--amber);
}

.policy-status.blocked,
.project-status.blocked,
.project-status.unaffordable,
.lifecycle-status.blocked,
.unrest-high,
.unrest-riot-reports {
  background: var(--red);
}

.result-status,
.policy-card-divergence {
  color: #fff;
  background: var(--purple);
}

/*
 * The divergence mark. It appears only when the state's own estimate stopped
 * matching the filed result and the state could actually perceive the gap.
 */
.divergence-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.35em;
  color: var(--purple);
  font: 700 0.95em/1 Arial, sans-serif;
  vertical-align: -0.1em;
}

.divergence-note {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  color: #3e2a48;
  background: #ece1f0;
  border-left: 3px solid var(--purple);
  font: 0.875rem/1.45 Arial, sans-serif;
}

.divergence-note .divergence-mark {
  flex: 0 0 auto;
}

.policy-blocked-reason,
.action-blocked-reason,
.inline-error {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  color: #5e2d27;
  background: #f0d9d2;
  border-left: 3px solid var(--red);
  font: 0.875rem/1.4 Arial, sans-serif;
}

.no-change-reason {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  color: var(--muted);
  background: #e2dccf;
  border-left: 3px solid #8e887c;
  font: 0.875rem/1.4 Arial, sans-serif;
}

.policy-fact {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(132, 128, 115, 0.45);
}

.policy-fact dt {
  color: var(--muted);
  font: 700 0.8125rem/1.35 Arial, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.policy-fact dd {
  margin: 0;
  font: 0.875rem/1.4 Arial, sans-serif;
  text-align: right;
}

.policy-rate-control {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: #e8deca;
  border: 1px solid var(--line);
}

.policy-rate-control label {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  font: 700 0.875rem/1.3 Arial, sans-serif;
}

.policy-rate-control output {
  font-variant-numeric: tabular-nums;
}

.policy-rate-input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--green);
  cursor: pointer;
}

.policy-progress {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0;
}

.policy-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 0.8125rem/1.3 Arial, sans-serif;
}

.policy-progress progress,
.institution-status-item progress {
  width: 100%;
  height: 8px;
  accent-color: var(--green);
}

.policy-divergence {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  color: #f7ebfa;
  background: #573562;
  border: 1px solid #38203f;
}

.policy-divergence p,
.policy-divergence small {
  grid-column: 2;
  margin: 0;
  color: inherit;
  font: 0.875rem/1.4 Arial, sans-serif;
}

/* Institution Desk */

.institution-heading {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  color: #f6f1e5;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 45%),
    #303d3b;
  border: 1px solid #202927;
  border-bottom: 3px solid #9a8057;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--surface-shadow);
}

.institution-heading h2 {
  margin: 0;
}

/* One status-row shape for every real desk. Wraps rather than squeezing. */
.desk-status-row,
.institution-status-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  min-height: 60px;
  margin-top: var(--space-2);
  background: #e7dcc7;
  border: 1px solid var(--line);
}

.institution-status-item {
  display: grid;
  gap: var(--space-1);
  align-content: center;
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  border-right: 1px solid var(--line);
}

.institution-status-item:last-child {
  border-right: 0;
}

.institution-status-item span {
  overflow: hidden;
  color: var(--muted);
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.institution-status-item strong {
  overflow: hidden;
  font: 700 1rem/1.2 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.institution-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  margin-top: var(--space-3);
  background: #d8cbb2;
  border: 1px solid var(--line-dark);
}

.institution-tabs button {
  min-height: 44px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
}

.institution-tabs button:last-child {
  border-right: 0;
}

.institution-tabs button[aria-selected="true"] {
  color: #fff;
  background: var(--green);
  box-shadow: inset 0 -3px 0 #d6b56e;
}

.institution-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--section-gap);
  align-items: start;
  margin-top: var(--space-3);
}

.institution-panel-stack {
  min-width: 0;
}

.institution-detail-slot:empty {
  display: none;
}

/* The detail column has a real width only while it is carrying something. */
.institution-detail-slot {
  width: clamp(360px, 30vw, 460px);
}

.institution-panel {
  min-width: 0;
}

.institution-panel:focus {
  outline: none;
}

.overview-grid {
  display: grid;
  grid-template-areas:
    "attention progress"
    "available institutions";
  grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
  gap: var(--section-gap);
  align-items: start;
}

.overview-attention {
  grid-area: attention;
}

/*
 * Nothing needing attention is not news. When the list is empty the panel
 * collapses to one quiet line instead of spending the largest part of the
 * overview saying nothing.
 */
.overview-section.is-quiet {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
}

.overview-section.is-quiet .overview-section-heading {
  margin-bottom: 0;
}

.overview-section.is-quiet h3 {
  font-size: 1rem;
}

.overview-section.is-quiet .compact-list {
  min-width: 0;
}

.overview-section.is-quiet .empty-state {
  margin: 0;
}

.overview-progress {
  grid-area: progress;
}

.overview-available {
  grid-area: available;
}

.overview-institution-status {
  grid-area: institutions;
}

.overview-section {
  padding: var(--space-6);
}

.overview-section-heading {
  align-items: start;
  margin-bottom: var(--space-3);
}

.overview-section-heading h3 {
  margin: 0;
}

.compact-list {
  display: grid;
  gap: var(--space-2);
}

.compact-row,
.attention-row,
.progress-row,
.institution-summary-row,
.order-record-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 64px;
  padding: var(--space-2) var(--space-3);
  background: #f1e9d9;
  border: 1px solid #c4b79f;
  border-left: 3px solid #687a6e;
}

.attention-row {
  border-left-color: var(--red);
}

.progress-row {
  border-left-color: var(--amber);
}

.compact-row-copy {
  min-width: 0;
}

.compact-row-copy strong,
.compact-row-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-row-copy strong {
  font-size: 1rem;
}

.compact-row-copy span {
  margin-top: var(--space-1);
  color: var(--muted);
  font: 0.8125rem/1.3 Arial, sans-serif;
}

.compact-row button,
.attention-row button,
.progress-row button,
.institution-summary-row button {
  min-width: 64px;
}

.overview-action-grid,
.action-catalog,
.institution-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--card-gap);
}

.overview-action-grid,
.action-catalog {
  max-width: 1120px;
}

.institution-panel > .action-filters {
  margin-bottom: var(--space-4);
}

.action-filters {
  display: flex;
  flex-wrap: wrap;
}

.action-filters button {
  min-width: 92px;
  border-radius: 0;
  border-right-width: 0;
}

.action-filters button:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.action-filters button:last-child {
  border-right-width: 1px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.action-filters button[aria-pressed="true"] {
  color: #fff;
  background: var(--green);
}

.show-all-button {
  display: block;
  min-width: 200px;
  margin: var(--space-4) auto 0;
}

.institution-card {
  min-height: 168px;
  border-top: 3px solid #586961;
}

.institution-capability {
  min-width: 80px;
  padding: var(--space-2);
  color: #f8f3e8;
  background: #3e5149;
  text-align: center;
}

.institution-capability strong,
.institution-capability span {
  display: block;
}

.institution-capability strong {
  font-size: 1.125rem;
}

.institution-capability span {
  margin-top: var(--space-1);
  font: 700 0.8125rem/1.2 Arial, sans-serif;
}

.records-panel {
  display: grid;
  gap: var(--section-gap);
}

.record-section {
  box-shadow: none;
}

.record-section h4 {
  margin-bottom: var(--space-3);
}

.record-section-heading {
  align-items: center;
}

.record-section-heading span,
#desk-feed-count {
  color: var(--muted);
  font: 700 0.8125rem/1.2 Arial, sans-serif;
}

.regional-policy-reports,
.desk-feed,
.policy-treasury-ledger,
.records-orders {
  display: grid;
  gap: var(--card-gap);
}

.regional-policy-reports {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.desk-feed {
  max-height: none;
  overflow: visible;
}

.desk-feed-entry {
  padding: var(--space-4);
  background: #f1e9d9;
  border: 1px solid #c4b79f;
  border-left: 3px solid #6a7a6f;
}

.desk-feed-entry.headline-moment {
  background: #e9dfc8;
  border-left-color: var(--amber);
}

.desk-feed-entry h4 {
  margin-bottom: var(--space-2);
}

.desk-feed-entry p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font: 0.875rem/1.45 Arial, sans-serif;
}

.treasury-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) 0;
  border-top: 1px dotted #c4b79f;
}

/*
 * One inspector, and on a desk it is a SHEET rather than a window: it belongs
 * to its detail column, shares the desk's paper, and carries no drop shadow to
 * make it look dropped on top of the page. It grows with its content — reading
 * a card must not mean scrolling inside it — and anything long goes to the
 * full-page detail view instead.
 */
.shared-inspector {
  display: grid;
  grid-template-rows: auto auto auto;
  align-self: start;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--line-dark);
  border-top: 4px solid var(--green);
}

.inspector-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-4);
  background: #e5dac5;
  border-bottom: 1px solid var(--line);
}

.inspector-close {
  grid-column: 2;
  grid-row: 1;
  color: var(--navy);
}

.inspector-heading {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.inspector-heading h2 {
  margin-bottom: var(--space-2);
  font-size: 1.75rem;
}

/* What this sheet belongs to, so an open inspector is never orphaned. */
.inspector-context {
  margin: 0 0 var(--space-1);
  color: var(--muted);
  font: 700 0.8125rem/1.25 Arial, sans-serif;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.inspector-context:empty {
  display: none;
}

.inspector-status {
  margin: 0;
  color: var(--muted);
  font: 700 0.875rem/1.35 Arial, sans-serif;
}

.inspector-body {
  min-height: 0;
  padding: var(--space-6);
}

.inspector-body > :last-child {
  margin-bottom: 0;
}

.inspector-body p,
.inspector-body li {
  font: 0.9375rem/1.5 Arial, sans-serif;
}

.inspector-section {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.inspector-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.inspector-footer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: #e5dac5;
  border-top: 1px solid var(--line-dark);
}

.inspector-footer:empty {
  display: none;
}

.inspector-footer button {
  width: 100%;
}

/* The third depth: a deliberate full page, reached from the inspector. */

.detail-view {
  margin-top: var(--space-3);
}

.detail-view-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--line-dark);
}

.detail-view-titles {
  min-width: 0;
}

.detail-view-kicker {
  margin: 0 0 var(--space-1);
  color: var(--muted);
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-view-heading h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.detail-view-body {
  display: grid;
  gap: var(--section-gap);
}

.detail-table {
  display: grid;
  gap: 0;
}

.detail-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: baseline;
  min-height: 44px;
  padding: var(--space-2) 0;
  border-bottom: 1px dotted #c4b79f;
}

.detail-table-row strong {
  font-size: 1rem;
}

.detail-table-row span,
.detail-table-row small {
  color: var(--muted);
  font: 0.875rem/1.4 Arial, sans-serif;
}

/* The Civil Desk */

.civil-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: var(--section-gap);
  align-items: start;
  margin-top: var(--space-3);
}

.civil-list {
  display: grid;
  gap: var(--card-gap);
}

.civil-body-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 64px;
  padding: var(--space-3);
  background: #f1e9d9;
  border: 1px solid #c4b79f;
  border-left: 3px solid #687a6e;
}

.civil-body-row.is-pressing {
  border-left-color: var(--amber);
}

.civil-body-copy {
  min-width: 0;
}

.civil-body-copy strong {
  display: block;
  font-size: 1rem;
}

.civil-body-copy span {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font: 0.875rem/1.35 Arial, sans-serif;
}

.civil-filings {
  display: grid;
  gap: var(--space-3);
}

.civil-filing {
  padding-bottom: var(--space-3);
  border-bottom: 1px dotted #c4b79f;
}

.civil-filing:last-child {
  border-bottom: 0;
}

.civil-filing strong {
  display: block;
  margin-bottom: var(--space-1);
}

.civil-filing p {
  margin: 0;
  color: var(--ink-soft);
  font: 0.9375rem/1.5 Arial, sans-serif;
}

/* A public showdown, while one is running */

.showdown-card {
  margin-top: var(--space-3);
  border-left: 4px solid var(--amber);
}

.showdown-stage {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-2);
  color: #563f16;
  background: #efdfb8;
  border-left: 3px solid var(--amber);
  font: 700 0.8125rem/1.35 Arial, sans-serif;
}

.showdown-copy {
  max-width: 68ch;
  margin: 0 0 var(--space-3);
  font: 1rem/1.55 Arial, sans-serif;
}

.showdown-responses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--card-gap);
  max-width: 1120px;
  margin-top: var(--space-4);
}

.showdown-response {
  display: flex;
  min-height: 148px;
  flex-direction: column;
  padding: var(--space-4);
  background: #f1e9d9;
  border: 1px solid #c4b79f;
}

.showdown-response h4 {
  margin-bottom: var(--space-2);
}

.showdown-response p {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font: 0.9375rem/1.5 Arial, sans-serif;
}

.showdown-response button {
  width: 100%;
  margin-top: auto;
}

.relationship-tag {
  display: inline-block;
  padding: 2px var(--space-2);
  color: var(--ink-soft);
  background: #ded5c5;
  font: 700 0.75rem/1.5 Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.relationship-tag.is-influenced {
  color: #563f16;
  background: #efdfb8;
}

.relationship-tag.is-dependent {
  color: #662f29;
  background: #efd9d3;
}

/* Exact contracts for the client-side renderer. */

.ui-icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  color: var(--green);
  font: 700 1rem/1 Arial, sans-serif;
  text-align: center;
}

.icon-alert {
  color: var(--red);
}

.icon-progress {
  color: var(--amber);
}

.icon-result {
  color: var(--purple);
}

.icon-complete,
.icon-active {
  color: var(--green);
}

.country-figure-button {
  width: 100%;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: transparent;
  border: 0;
  font: 700 0.9375rem/1.2 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-figure-button:hover:not(:disabled) {
  color: #fff;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.map-marker {
  cursor: pointer;
  pointer-events: all;
}

.map-marker circle {
  fill: var(--green);
  stroke: rgba(0, 0, 0, 0.001);
  stroke-width: 22px;
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 2px rgba(24, 27, 25, 0.35));
}

.map-marker.marker-infrastructure circle {
  fill: var(--amber);
}

.map-marker path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  pointer-events: none;
}

.map-marker:focus-visible circle {
  stroke: var(--focus);
  stroke-width: 6px;
}

.return-register .summary-metric {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
  padding: var(--space-2);
  background: rgba(120, 110, 92, 0.08);
  border-radius: var(--radius);
}

.return-register .summary-metric strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font: 700 1.0625rem/1.25 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.return-register .summary-metric span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font: 700 0.6875rem/1.3 Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary-metric small {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font: 0.8125rem/1.3 Arial, sans-serif;
}

.context-action {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: #e4dac5;
  border-bottom: 1px solid var(--line);
}

.context-action-heading {
  display: flex;
  gap: var(--space-3);
  align-items: start;
  justify-content: space-between;
}

.context-action-heading strong {
  display: block;
  font-size: 1rem;
}

.context-action > p:not(.lifecycle) {
  margin: 0;
  color: var(--ink-soft);
  font: 0.875rem/1.45 Arial, sans-serif;
}

.region-project-line {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  color: var(--ink);
  background: #efe2bf;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
}

.region-project-line:hover:not(:disabled) {
  background: #e7d49f;
}

.region-disclosures {
  border-top: 0;
}

.disclosure-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
}

.disclosure-button:hover:not(:disabled),
.disclosure-button[aria-expanded="true"] {
  background: #e7dcc7;
}

.disclosure-symbol {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--green);
  font-size: 1.1rem;
}

.region-disclosure-content {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-6) var(--space-6);
  background: #f4eddf;
  border-bottom: 1px solid var(--line);
}

.evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) 0;
  border-top: 1px dotted #c4b79f;
}

.evidence-row:first-child {
  border-top: 0;
}

.evidence-row > span,
.evidence-row > strong {
  font: 0.875rem/1.35 Arial, sans-serif;
}

.evidence-open,
.assignment-link {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2);
  color: var(--green);
  background: transparent;
  border: 0;
  text-align: left;
}

.evidence-open:hover:not(:disabled),
.assignment-link:hover:not(:disabled) {
  background: #e7dcc7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.report-evidence-row > span {
  color: var(--muted);
  text-align: right;
}

.market-neutral {
  margin: 0;
  padding: var(--space-4);
  color: var(--muted);
  background: #f1e9d9;
  border: 1px dashed var(--line);
  font: 0.875rem/1.45 Arial, sans-serif;
}

.market-signal {
  grid-template-columns: 22px minmax(0, 1fr);
  width: 100%;
  min-height: 56px;
  text-align: left;
}

.market-signal > span:not(.ui-icon) {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.market-signal > span > strong {
  overflow: hidden;
  color: var(--ink);
  font: 700 0.9375rem/1.25 Arial, sans-serif;
  text-overflow: ellipsis;
}

.market-signal > span > span {
  overflow: hidden;
  color: var(--muted);
  font: 0.875rem/1.35 Arial, sans-serif;
  text-overflow: ellipsis;
}

.state-project-summary {
  min-height: 44px;
  padding: var(--space-3);
  color: var(--ink-soft);
  background: #e7dcc7;
  border-left: 3px solid var(--amber);
  font: 700 0.875rem/1.4 Arial, sans-serif;
}

.decision-card {
  display: flex;
  min-width: 0;
  min-height: 178px;
  flex-direction: column;
  padding: var(--space-4);
  background: #f1e9d9;
  border: 1px solid #c4b79f;
  border-radius: var(--radius);
}

.decision-card-heading {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.decision-card-heading h3 {
  margin-bottom: var(--space-2);
  font-size: 1.0625rem;
}

.card-category {
  margin-bottom: var(--space-1);
  color: var(--muted);
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-outcome,
.lifecycle {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: var(--space-1) 0 var(--space-3);
  padding: var(--space-1) var(--space-2);
  color: var(--ink-soft);
  background: #ded5c5;
  border-left: 3px solid #858074;
  font: 700 0.8125rem/1.35 Arial, sans-serif;
}

.lifecycle-authorizing,
.lifecycle-awaiting_funds,
.lifecycle-implementing,
.lifecycle-active {
  color: #563f16;
  background: #efdfb8;
  border-left-color: var(--amber);
}

.lifecycle-complete,
.lifecycle-spent {
  color: #214931;
  background: #dce9df;
  border-left-color: var(--green);
}

.lifecycle-blocked,
.lifecycle-unaffordable {
  color: #662f29;
  background: #efd9d3;
  border-left-color: var(--red);
}

.lifecycle.has-result {
  color: #4f2d5a;
  background: #e6d9eb;
  border-left-color: var(--purple);
}

.decision-card.status-authorizing,
.decision-card.status-awaiting_funds,
.decision-card.status-implementing,
.decision-card.status-active {
  border-left: 3px solid var(--amber);
}

.decision-card.status-complete,
.decision-card.status-spent {
  border-left: 3px solid var(--green);
}

.decision-card.status-blocked,
.decision-card.status-unaffordable {
  border-left: 3px solid var(--red);
}

.decision-metadata,
.institution-summary-facts,
.record-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: auto 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.decision-metadata > div,
.institution-summary-facts > div,
.record-facts > div {
  min-width: 0;
}

.decision-metadata dt,
.institution-summary-facts dt,
.record-facts dt {
  color: var(--muted);
  font: 700 0.8125rem/1.25 Arial, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.decision-metadata dd,
.institution-summary-facts dd,
.record-facts dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  font: 0.875rem/1.35 Arial, sans-serif;
}

.card-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--space-2);
  align-items: stretch;
  margin-top: var(--space-3);
}

.primary-action,
.secondary-action,
.blocked-action,
.destructive-action {
  min-height: 44px;
  white-space: normal;
}

.primary-action {
  color: #fff;
  background: var(--green-bright);
  border-color: #214a31;
}

.primary-action:hover:not(:disabled) {
  color: #fff;
  background: var(--green);
}

.secondary-action {
  color: var(--navy);
  background: transparent;
  border-color: var(--line-dark);
}

.blocked-action {
  grid-column: 1 / -1;
  width: 100%;
  color: #625f57;
  background: #d7d0c2;
  border-color: #aaa291;
}

.destructive-action {
  color: #fff;
  background: var(--red);
  border-color: #5d2923;
}

.destructive-action:hover:not(:disabled) {
  color: #fff;
  background: #78352e;
}

.primary-action:disabled,
.secondary-action:disabled,
.blocked-action:disabled,
.destructive-action:disabled {
  color: #625f57;
  background: #d7d0c2;
  border-color: #aaa291;
}

.blocked-reason,
.inline-command-error {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  color: #662f29;
  background: #efd9d3;
  border-left: 3px solid var(--red);
  font: 0.875rem/1.45 Arial, sans-serif;
}

.inline-command-error {
  grid-column: 1 / -1;
}

.compact-status-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 64px;
  padding: var(--space-2) var(--space-3);
  background: #f1e9d9;
  border: 1px solid #c4b79f;
  border-left: 3px solid #687a6e;
}

.compact-status-row > div {
  min-width: 0;
}

.compact-status-row strong,
.compact-status-row span,
.compact-status-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-status-row > div > strong {
  font: 700 0.9375rem/1.25 Arial, sans-serif;
}

.compact-status-row > div > span,
.compact-status-row > div > small {
  margin-top: var(--space-1);
  color: var(--muted);
  font: 0.8125rem/1.3 Arial, sans-serif;
}

.row-action {
  min-width: 72px;
}

.desk-status-item {
  display: grid;
  gap: var(--space-1);
  align-content: center;
  min-width: 0;
  min-height: 60px;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
}

.desk-status-item:last-child {
  border-right: 0;
}

.desk-status-item:hover:not(:disabled) {
  background: #ded1b8;
}

.desk-status-item span,
.desk-status-item strong,
.desk-status-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desk-status-item span {
  color: var(--muted);
  font: 700 0.8125rem/1.2 Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.desk-status-item strong {
  font: 700 1rem/1.2 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.desk-status-item small {
  color: var(--muted);
  font: 0.8125rem/1.2 Arial, sans-serif;
}

.institution-card h3 {
  margin-bottom: var(--space-2);
  font-size: 1.0625rem;
}

.institution-capacity {
  display: inline-grid;
  min-width: 52px;
  min-height: 44px;
  flex: 0 0 auto;
  place-items: center;
  padding: var(--space-2);
  color: #fff;
  background: #3e5149;
  font: 700 1rem/1 Arial, sans-serif;
}

.institution-mandate {
  min-height: 2.9em;
  margin: var(--space-3) 0;
}

.institution-summary-facts,
.record-facts {
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}

.institution-summary-facts > div,
.record-facts > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px dotted #c4b79f;
}

.institution-summary-facts dd,
.record-facts dd {
  margin: 0;
  text-align: right;
}

.institution-card > .primary-action {
  width: 100%;
  margin-top: var(--space-3);
}

.treasury-reconciliation,
.treasury-totals {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: #e7dcc7;
  border: 1px solid var(--line);
}

.treasury-totals > strong {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.treasury-totals p,
.treasury-totals small {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font: 0.875rem/1.4 Arial, sans-serif;
}

.inspector-facts {
  margin: 0;
}

.inspector-facts .policy-fact:first-child {
  border-top: 0;
}

.evidence-disclosure {
  margin-top: var(--space-4);
  border: 1px solid var(--line);
}

.evidence-disclosure summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3);
  background: #e7dcc7;
  font: 700 0.875rem/1.35 Arial, sans-serif;
  cursor: pointer;
}

.evidence-disclosure-body {
  padding: var(--space-4);
  border-top: 1px solid var(--line);
}

.evidence-disclosure-body strong {
  display: block;
  margin-top: var(--space-3);
  font: 700 0.875rem/1.3 Arial, sans-serif;
}

.evidence-disclosure-body strong:first-child {
  margin-top: 0;
}

.evidence-disclosure-body p {
  margin: var(--space-1) 0 0;
}

.rate-decision {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.rate-decision > label {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  font: 700 0.875rem/1.3 Arial, sans-serif;
}

.rate-decision output {
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.rate-endpoints {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font: 0.8125rem/1.2 Arial, sans-serif;
}

.rate-decision-facts {
  display: grid;
}

.action-error {
  margin: 0;
  padding: var(--space-3);
  color: var(--ink-soft);
  background: #e2dccf;
  border-left: 3px solid #8e887c;
  font: 0.875rem/1.4 Arial, sans-serif;
}

.inspector-commit {
  min-height: 52px;
}

.exact-price-list {
  display: grid;
  gap: var(--space-1);
}

.exact-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  background: #f1e9d9;
  border-color: #c4b79f;
  text-align: left;
}

.exact-price-row > span:first-child {
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
}

.exact-price-row > small {
  grid-column: 1;
  grid-row: 2;
  color: var(--muted);
  font: 0.8125rem/1.2 Arial, sans-serif;
}

.exact-price-row > strong {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.exact-price-row > span:last-child {
  grid-column: 2;
  grid-row: 2;
  color: var(--muted);
  font: 0.8125rem/1.2 Arial, sans-serif;
  text-align: right;
}

.price-up {
  color: var(--purple) !important;
}

.price-down {
  color: var(--blue) !important;
}

.delegation-summary {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: #e7dcc7;
  border: 1px solid var(--line);
}

.delegation-summary p {
  margin: 0;
}

.assignment-link + .assignment-link {
  margin-top: var(--space-1);
}

.headline-copy {
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

.order-empty {
  overflow: hidden;
  color: var(--muted);
  font: 0.875rem/1.2 Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast {
  display: flex;
  gap: var(--space-3);
  align-items: start;
}

.toast-success {
  background: #33453a;
  border-left-color: #80b58e;
}

.toast-error {
  background: #71362f;
  border-left-color: #efaa9f;
}

.toast .ui-icon {
  color: #fff;
}

.institution-detail-slot:not(:has(> .shared-inspector:not([hidden]))) {
  display: none;
}

.state-detail-slot:has(> .shared-inspector:not([hidden])) > .region-panel {
  display: none !important;
}

/* Turn dock and non-blocking feedback */

.command-dock {
  flex: 0 0 auto;
  z-index: 70;
  min-height: var(--dock-height);
  background: rgba(237, 228, 210, 0.98);
  border-top: 1px solid var(--line-dark);
  box-shadow: 0 -8px 22px rgba(48, 39, 25, 0.14);
}

.command-dock-inner {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(180px, 220px);
  gap: var(--space-6);
  align-items: center;
  min-height: var(--dock-height);
}

.dock-work-summary,
.dock-next-month {
  margin: 0;
  font: 0.875rem/1.35 Arial, sans-serif;
}

.dock-work-summary {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.dock-work-summary strong {
  color: var(--green);
}

.dock-work-summary span,
.dock-next-month span {
  color: var(--muted);
}

.dock-next-month {
  display: grid;
  gap: 2px;
  text-align: right;
}

.dock-next-month strong {
  font-size: 1rem;
}

.advance-button {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  min-width: 180px;
  min-height: 52px;
  color: #fff;
  background: #294c37;
  border-color: #1c3827;
  font-size: 1rem;
}

.advance-button:hover:not(:disabled) {
  background: #203e2c;
}

.toast-region {
  position: fixed;
  right: max(var(--page-gutter), 16px);
  bottom: calc(var(--dock-height) + 16px);
  z-index: 160;
  display: grid;
  gap: var(--space-2);
  width: min(380px, calc(100vw - (var(--page-gutter) * 2)));
  pointer-events: none;
}

.toast {
  padding: var(--space-4);
  color: #f7f3e8;
  background: #33453a;
  border: 1px solid #1d2d24;
  border-left: 4px solid #80b58e;
  border-radius: var(--radius);
  box-shadow: var(--inspector-shadow);
  font: 0.875rem/1.45 Arial, sans-serif;
  pointer-events: auto;
  animation: toast-enter 220ms ease-out;
}

.toast.error {
  background: #71362f;
  border-left-color: #efaa9f;
}

.error-banner {
  position: fixed;
  right: max(var(--page-gutter), 16px);
  bottom: calc(var(--dock-height) + 16px);
  z-index: 170;
  width: min(430px, calc(100vw - (var(--page-gutter) * 2)));
  padding: var(--space-4);
  color: #fff4ec;
  background: #7a342b;
  border: 2px solid #4a1e18;
  border-radius: var(--radius);
  box-shadow: var(--inspector-shadow);
  font: 700 0.875rem/1.45 Arial, sans-serif;
}

/* The only static modal is an irreversible restart confirmation. */

.confirmation-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: var(--space-6);
  color: var(--ink);
  background: var(--paper-light);
  border: 2px solid #403a30;
  border-top: 5px solid var(--red);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(20, 23, 22, 0.48);
}

.confirmation-dialog::backdrop {
  background: rgba(22, 27, 26, 0.72);
}

.confirmation-dialog h2 {
  margin-bottom: var(--space-3);
  font-size: 1.75rem;
}

.confirmation-dialog p {
  color: var(--ink-soft);
  font: 0.9375rem/1.5 Arial, sans-serif;
}

.confirmation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@keyframes tracker-highlight {
  0% {
    background: #f4dfa4;
    box-shadow: 0 0 0 3px rgba(138, 104, 45, 0.25);
  }
  100% {
    background: rgba(248, 242, 230, 0.75);
    box-shadow: none;
  }
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 960-1279: 24px gutters and a truthful 340px minimum side column. */

@media (max-width: 1279px) {
  :root {
    --page-gutter: 24px;
  }

  .country-bar-inner {
    grid-template-columns: minmax(170px, 0.6fr) minmax(500px, 2.4fr) auto;
  }

  .state-primary-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.58fr);
  }

  /* The whole stage must be visible at rest, so the heading and the tools
     stay on one row instead of pushing the map below the fold. */
  .map-card .section-heading {
    align-items: center;
  }

  .map-card .section-heading h2 {
    font-size: 1.375rem;
  }

  .map-tools button {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
    font-size: 0.875rem;
  }

  .map-frame,
  .world-map {
    min-height: 380px;
  }

  .map-frame {
    height: clamp(320px, 44vh, 560px);
  }

  .overview-grid {
    grid-template-areas:
      "attention"
      "progress"
      "available"
      "institutions";
    grid-template-columns: 1fr;
  }

  .overview-action-grid {
    max-width: none;
  }
}

/* Below 960: one page column and the inspector becomes a bottom sheet. */

@media (max-width: 959px) {
  .country-bar-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) 0;
  }

  .country-figures {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .state-primary-grid,
  .country-secondary-grid,
  .civil-grid {
    grid-template-columns: 1fr;
  }

  .region-panel {
    height: auto;
  }

  .map-frame,
  .world-map {
    min-height: 420px;
  }

  .institution-status-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .institution-status-item:nth-child(2),
  .desk-status-item:nth-child(2) {
    border-right: 0;
  }

  .institution-status-item:nth-child(-n + 2),
  .desk-status-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .institution-workspace {
    grid-template-columns: 1fr;
  }

  .institution-detail-slot {
    width: auto;
    min-width: 0;
  }

  /*
   * Below the tablet breakpoint the sheet leaves the column and covers the
   * viewport, which is the one place an inner scroll is right: it is the whole
   * surface, not a card inside one.
   */
  .shared-inspector,
  .institution-detail-slot > .shared-inspector {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 85vh;
    overflow: hidden;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--inspector-shadow);
  }

  .inspector-body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .inspector-header {
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
  }

  .inspector-body,
  .inspector-footer {
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
  }

}

/* Below 640: 12px gutters, one-column cards, and a full-screen inspector. */

@media (max-width: 639px) {
  :root {
    --page-gutter: 12px;
  }

  /* Mobile-safe: the title shares one row with the controls and is allowed to
     shrink and wrap. It must never be able to paint over a button. */
  .country-bar-inner {
    min-height: 68px;
    align-items: start;
  }

  .country-identity {
    min-width: 0;
    overflow: hidden;
  }

  .country-identity h1 {
    font-size: clamp(1.375rem, 6.5vw, 2rem);
    overflow-wrap: anywhere;
  }

  .country-bar-controls {
    flex-wrap: wrap;
    justify-content: end;
  }

  .country-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .country-figure {
    padding: var(--space-2);
  }

  /* Date and Treasury stay; debt and population sit behind the disclosure. */
  .country-details-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    font-size: 0.8125rem;
  }

  .country-figure-secondary {
    display: none;
  }

  .country-bar[data-details="open"] .country-figure-secondary {
    display: block;
  }

  /* Player-relevant labels wrap instead of truncating. */
  .desk-status-item span,
  .desk-status-item strong,
  .desk-status-item small,
  .institution-status-item span,
  .institution-status-item strong,
  .institution-status-item small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .game-menu {
    position: fixed;
    top: 76px;
    right: var(--page-gutter);
    left: var(--page-gutter);
    width: auto;
    max-height: calc(100vh - 88px);
  }

  .file-drawer {
    grid-template-columns: 1fr;
  }

  .file-drawer button {
    width: 100%;
  }

  .orders-ribbon-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .orders-ribbon-heading {
    display: none;
  }

  .orders-ribbon-items {
    grid-column: 1;
  }

  .orders-ribbon-items > :nth-child(n + 2) {
    display: none;
  }

  .ribbon-more-button {
    grid-column: 2;
  }

  .month-summary {
    padding: var(--space-4);
  }

  .desk-switcher-tabs {
    display: grid;
    width: 100%;
  }

  .surface,
  .overview-section {
    padding: var(--space-4);
    box-shadow: none;
  }

  .section-heading {
    display: grid;
    align-items: start;
  }

  .compact-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .map-tools {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
  }

  .map-tools button {
    min-width: 0;
    padding-right: var(--space-1);
    padding-left: var(--space-1);
  }

  .map-frame,
  .world-map {
    min-height: 280px;
  }

  .region-label {
    font-size: 15px;
  }

  .region-header,
  .region-panel-section,
  .region-section,
  .empty-panel {
    padding: var(--space-4);
  }

  .region-disclosures summary {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .region-disclosure-body {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .region-summary strong,
  .region-metric strong {
    font-size: 1rem;
  }

  .local-price-grid,
  .project-actions,
  .overview-action-grid,
  .action-catalog,
  .institution-cards,
  .showdown-responses,
  .regional-policy-reports {
    grid-template-columns: 1fr;
  }

  .detail-table-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .detail-view-heading {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .detail-view-back {
    justify-self: start;
  }

  .institution-heading {
    padding: var(--space-4);
  }

  .institution-heading h2 {
    font-size: 2rem;
  }

  .institution-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .institution-tabs button:nth-child(2) {
    border-right: 0;
  }

  .institution-tabs button:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .overview-grid {
    gap: var(--space-3);
  }

  .action-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-filters button,
  .action-filters button:first-child,
  .action-filters button:last-child {
    min-width: 0;
    border: 1px solid var(--line-dark);
    border-radius: 0;
  }

  .action-filters button:nth-child(1) {
    border-radius: var(--radius) 0 0 0;
  }

  .action-filters button:nth-child(2) {
    border-radius: 0 var(--radius) 0 0;
  }

  .action-filters button:nth-child(3) {
    border-radius: 0 0 0 var(--radius);
  }

  .action-filters button:nth-child(4) {
    border-radius: 0 0 var(--radius) 0;
  }

  .policy-fact {
    grid-template-columns: minmax(100px, 0.42fr) minmax(0, 1fr);
  }

  .shared-inspector,
  .institution-detail-slot > .shared-inspector {
    top: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-top: 4px solid var(--green);
    border-radius: 0;
  }

  .inspector-header {
    padding: var(--space-3);
  }

  .inspector-body,
  .inspector-footer {
    padding: var(--space-4);
  }

  .command-dock-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .dock-work-summary {
    display: none;
  }

  .dock-next-month {
    text-align: left;
  }

  .advance-button {
    min-width: 0;
  }

  /* The dock is not sticky at this width, so reserving its height floated the
     toast into the middle of the page and covered a card. Sit on the real
     bottom edge instead, clear of the phone's gesture bar. */
  .toast-region,
  .error-banner {
    right: var(--page-gutter);
    bottom: max(env(safe-area-inset-bottom), var(--page-gutter));
    left: var(--page-gutter);
    width: auto;
  }

  .confirmation-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================ 4.00: the stage
   Six permanent desks, the provincial return, the Market Desk, and the
   External Desk. Everything here stacks rather than squeezes, every text child
   sets min-width: 0, and no hover state carries meaning.
   ========================================================================== */

/* The shared status-row shape now belongs to every real desk, not one. */
.desk-heading {
  margin-top: var(--space-3);
}

.desk-heading h2 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

/* A desk whose systems do not exist yet keeps the header and shows nothing.
   That is deliberate scaffolding, recorded in PROJECT.md. */
.desk-empty-body {
  min-height: 40vh;
}

/* ---------------------------------------------------- the provincial return */

.return-dateline {
  margin: 0 0 var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font: italic 400 0.875rem/1.4 Georgia, serif;
}

.region-kicker {
  margin: 0 0 var(--space-1);
  color: var(--ink-soft);
  font: 700 0.75rem/1.3 Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.return-section {
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.return-section h3 {
  margin: 0 0 var(--space-2);
  color: var(--ink-soft);
  font: 700 0.8125rem/1.3 Arial, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.return-section p {
  margin: 0 0 var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
  font: 0.9375rem/1.5 Georgia, serif;
}

.return-standing {
  color: var(--ink-soft);
  font-style: italic;
}

.return-register {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}

/* A state that measures badly is told so plainly. It never gets invented detail. */
.return-thin {
  padding: var(--space-2);
  background: rgba(120, 110, 92, 0.12);
  border-left: 3px solid #8e8672;
  color: var(--ink-soft);
  font-style: italic;
}

.return-filing {
  display: grid;
  gap: 2px;
  margin-bottom: var(--space-2);
  min-width: 0;
}

.return-filing-kind {
  color: var(--ink-soft);
  font: 700 0.6875rem/1.3 Arial, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.return-filing p {
  margin: 0;
}

.return-action {
  border-top: 1px solid var(--line);
}

.region-note {
  margin: var(--space-2) 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font: 0.9375rem/1.5 Georgia, serif;
}

/* -------------------------------------------------------- the Market Desk */

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--section-gap);
  margin-top: var(--section-gap);
}

.market-section {
  min-width: 0;
}

.market-rows {
  display: grid;
  gap: var(--space-2);
}

.market-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: #f1e9d9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}

.market-row > div {
  display: grid;
  min-width: 0;
}

.market-row strong,
.market-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.market-row small {
  color: var(--ink-soft);
}

.market-figure {
  min-width: 0;
  font: 700 0.9375rem/1.3 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right;
}

.market-row-button {
  cursor: pointer;
}

.market-position {
  margin: 0 0 var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
  font: 0.9375rem/1.5 Georgia, serif;
}

.market-subheading {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--ink-soft);
  font: 700 0.75rem/1.3 Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------ the External Desk */

.external-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: var(--section-gap);
  margin-top: var(--section-gap);
}

.external-list-card,
.external-belief-card {
  min-width: 0;
}

.external-list {
  display: grid;
  gap: var(--space-1);
  max-height: 62vh;
  overflow-y: auto;
}

.external-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: #f1e9d9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
}

.external-row > div {
  display: grid;
  min-width: 0;
}

.external-row strong,
.external-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.external-row strong .relationship-tag {
  margin-left: var(--space-2);
}

.external-row small {
  color: var(--ink-soft);
}

.external-row.selected {
  background: #e6dcc4;
  border-color: #8b826f;
}

/* One awareness number, and only one. Never a percentage or a rank. */
.external-awareness {
  min-width: 2.2em;
  font: 700 1.0625rem/1.2 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.external-belief-header h4 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1.1875rem;
}

.external-statement {
  margin: var(--space-2) 0 var(--space-3);
  min-width: 0;
  overflow-wrap: anywhere;
  font: 0.9375rem/1.55 Georgia, serif;
}

.external-line {
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  min-width: 0;
  border-top: 1px solid var(--line);
}

.external-line h5 {
  margin: 0 0 2px;
  color: var(--ink-soft);
  font: 700 0.6875rem/1.3 Arial, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.external-line p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font: 0.9375rem/1.5 Georgia, serif;
}

/* Stack, do not shrink. Below the tablet breakpoint everything is one column. */
@media (max-width: 900px) {
  .external-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .external-list {
    max-height: 34vh;
  }
}

@media (max-width: 639px) {
  .desk-switcher-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .market-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .return-register {
    grid-template-columns: minmax(0, 1fr);
  }
}