/* Monitor space belongs to the theater and comparisons, not stretched prose.
 * The ordinary narrow-screen rules remain in the existing panel stylesheets.
 * Queries use the available command area, including browser zoom, rather than
 * assigning a layout from a monitor's advertised resolution. */

.procurement-overview,
.procurement-status-bank,
.formation-register,
.diplomatic-treaty-register,
.government-console {
  min-width: 0;
}

@media (max-width: 480px) {
  .diplomatic-treaty-register .treaty-row { flex-wrap: wrap; }
  .diplomatic-treaty-register .treaty-row > div { min-width: 0; }
}

@media (min-width: 1440px) {
  .shell {
    width: min(calc(100% - 48px), 3600px);
    max-width: none;
    grid-template-columns: 184px minmax(0, 1fr);
  }

  .main {
    padding: 24px clamp(24px, 1.2vw, 40px) 40px;
    container-type: inline-size;
    container-name: command-area;
  }

  .topbar,
  .classification-bar {
    padding-inline: max(24px, calc((100% - 3600px) / 2 + 24px));
  }

  .page-heading { align-items: flex-start; }
  .page-heading p,
  .card-copy,
  .note,
  .force-description,
  .build-card > p,
  .nation-description,
  .dispatch-item p,
  .encounter-card p { max-width: 68ch; }

  .resources-strip { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .resource { padding: 9px 8px; }
  .resource-reading { max-width: 175px; }
  .resource-stock .resource-value { font-size: 18px; }
  .resource-stock .resource-flow { font-size: 9px; }

  .radar-station .map-canvas {
    height: clamp(460px, 56dvh, 820px);
    min-height: 460px;
    max-height: none;
  }

  .radar-workbench.has-target {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: 20px;
  }

  .targeting-panel { top: 16px; max-height: calc(100dvh - 32px); }
  .target-summary { right: auto; width: min(660px, calc(100% - 24px)); }
  .target-ready-choices { max-height: clamp(180px, 25dvh, 360px); }
  .contact-register { max-height: clamp(240px, 31dvh, 450px); }

  .island-command {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  }

  .island-model-canvas { height: clamp(400px, 42dvh, 620px); min-height: 400px; }
  .island-inspection { margin-top: 20px; }
  .engineering-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .engineering-readout > div { min-width: 0; }
  .engineering-readout strong { overflow-wrap: anywhere; }

  #content[data-view="build"] > .content-grid,
  .force-family > .content-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .build-card,
  .force-card { padding: 17px; }
  .force-card .cost,
  .build-card .cost { gap: 5px 10px; }
  .force-tools { grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) minmax(180px, 250px); }
  .tier-tools { grid-template-columns: minmax(0, 1fr) 160px minmax(220px, 320px); }

  .procurement-overview {
    display: grid;
    grid-template-columns: minmax(360px, .85fr) minmax(520px, 1.15fr);
    align-items: start;
    gap: 20px;
    margin-bottom: 22px;
  }

  .procurement-overview .production-stockpiles { margin: 0; }
  .procurement-status-bank > :last-child { margin-bottom: 0; }
  .production-queue-items { grid-template-columns: minmax(0, 1fr); }
  .procurement-facility-register { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
  .procurement-facilities > button { margin-top: 8px; }

  .resource-command-layout {
    grid-template-columns: minmax(360px, .85fr) minmax(560px, 1.15fr);
    gap: 20px;
  }

  .resource-command-layout .stock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #content[data-view="economy"] > .section-grid {
    grid-template-columns: minmax(440px, .85fr) minmax(540px, 1.15fr);
    gap: 20px;
  }

  .supply-chain-panel { container-type: inline-size; container-name: supply-register; }
  .resource-command-layout .energy-grid table { font-size: 11px; }
  .resource-command-layout .energy-grid th,
  .resource-command-layout .energy-grid td { padding: 9px 7px; }

  #content[data-view="market"] > .section-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    align-items: start;
    gap: 20px;
    max-width: 2080px;
  }

  #content[data-view="market"] .table-wrap td:last-child { width: 1%; }
  #content[data-view="market"] .treaty-row { max-width: 1120px; }

  .research-bureau { gap: 14px; }
  .research-toolbar { grid-template-columns: minmax(240px, 440px) minmax(200px, 340px) auto; justify-content: start; }
  .research-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 20px; }
  .research-layout.no-selection { grid-template-columns: minmax(0, 1fr); }
  .research-graph-scroll { height: clamp(450px, 61dvh, 1000px); }
  .research-node-detail { top: 16px; }
  .research-queue-row { grid-template-columns: minmax(0, 1fr) minmax(140px, 240px); }

  .organization-layout {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
    gap: 20px;
  }

  .organization-form { position: sticky; top: 16px; }
  .organization-form .division-unit-choices { max-height: clamp(320px, 42dvh, 650px); }
  .organization-layout .division-card .diplomat-actions { max-width: 660px; }
  .forces-operations {
    grid-template-columns: minmax(380px, .85fr) minmax(480px, 1.15fr);
    gap: 20px;
  }

  .unit-group > button { margin-left: auto; }
  .officer-top-grid {
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    max-width: 2160px;
    align-items: start;
    gap: 20px;
  }

  .officer-register {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: clamp(270px, 35dvh, 520px);
  }

  .officer-brief { max-width: 1200px; }
  .officer-assignment-form { max-width: 860px; }
  .officer-skill-tree { max-width: 2200px; gap: 18px; }

  .diplomatic-map-shell { height: clamp(360px, 52dvh, 760px); }
  .nation-profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .nation-profile .nation-description { max-width: 52ch; }
  .diplomatic-treaty-register { max-width: 1440px; }
  .government-console { max-width: 3000px; }
  .government-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .government-card { padding: 14px; }

  #content[data-view="intel"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(450px, 620px);
    gap: 0 20px;
    align-items: start;
  }

  #content[data-view="intel"] > :not(.radar-workbench):not(.intelligence-control) { grid-column: 1 / -1; }
  #content[data-view="intel"] > .radar-workbench { grid-column: 1; }
  #content[data-view="intel"] > .intelligence-control { grid-column: 2; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #content[data-view="intel"] > .intelligence-operations {
    grid-template-columns: minmax(0, 1fr) minmax(450px, 620px);
    gap: 20px;
  }

  .intel-archive > .content-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .intel-command-console .note { max-width: 58ch; }
  .intel-market-row { max-width: 1040px; }
  .intel-control-bank { gap: 12px; }
  #content[data-view="intel"] > .section-grid:not(.intelligence-control):not(.intelligence-operations) {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
    max-width: 2240px;
  }

  #content[data-view="journal"] > .section-grid {
    grid-template-columns: minmax(380px, .85fr) minmax(600px, 1.15fr);
    gap: 20px;
    align-items: start;
  }

  .journal-list .dispatch-item { max-width: 940px; }
  .encounter-library { container-type: inline-size; container-name: encounter-library; }
  .encounter-library > .encounter-card { max-width: 940px; }
  .encounter-library .recorded-combat-assessments { max-width: 940px; }
}

/* A short desktop still gets the same functional grouping. Screens yield
 * vertical space before controls, text or authored equipment icons shrink. */
@media (min-width: 1440px) and (max-height: 900px) {
  .main { padding-top: 18px; }
  .page-heading { margin-bottom: 14px; }
  .radar-station .map-canvas { height: clamp(380px, 54dvh, 520px); min-height: 380px; }
  .diplomatic-map-shell { height: clamp(330px, 46dvh, 520px); }
  .research-graph-scroll { height: clamp(350px, 55dvh, 520px); }
  .island-model-canvas { height: 350px; min-height: 350px; }
  .organization-form { position: static; }
}

@container command-area (min-width: 1950px) {
  #content[data-view="build"] > .content-grid,
  .force-family > .content-grid,
  .intel-archive > .content-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .nation-profiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .officer-register { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .research-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .research-layout.no-selection { grid-template-columns: minmax(0, 1fr); }
  .research-graph-scroll { height: clamp(500px, 65dvh, 1050px); }
  .government-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .production-queue-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .formation-register {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0 22px;
  }

  .formation-register > :is(.card-heading, .empty) { grid-column: 1 / -1; }
  .formation-register .division-card { min-width: 0; border-top: 1px solid #445c4b; padding-top: 14px; }
  .formation-register .division-card:first-of-type { margin-top: 14px; }
  .encounter-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .encounter-library > :not(.encounter-card) { grid-column: 1 / -1; }
  .encounter-library > .encounter-card { max-width: none; margin-top: 0; }
}

@container command-area (min-width: 2200px) {
  .resource-command-layout .stock-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .resource-command-layout .energy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px 18px;
  }

  .resource-command-layout .energy-grid > :is(.card-heading, .card-copy) { grid-column: 1 / -1; }
  .resource-command-layout .energy-grid > .grid-island { min-width: 0; margin-top: 0; }
  #content[data-view="overview"] .radar-main:has(> .radar-tracks) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 20px;
    align-items: start;
  }

  #content[data-view="overview"] .radar-tracks { margin-top: 0; }
  #content[data-view="overview"] .radar-tracks .contact-register {
    grid-template-columns: minmax(0, 1fr);
    max-height: clamp(320px, 43dvh, 620px);
  }

  #content[data-view="overview"] .radar-track-header { align-items: flex-start; flex-direction: column; gap: 7px; }
}

@container command-area (min-width: 2700px) {
  #content[data-view="build"] > .content-grid,
  .force-family > .content-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .nation-profiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .intel-archive > .content-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .organization-layout { grid-template-columns: minmax(0, 1fr) minmax(460px, 520px); }
  .formation-register { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container supply-register (min-width: 780px) {
  .resource-flow-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
}

/* Preserve natural scrolling and visible keyboard focus. No layout animation,
 * DOM ordering, permanent viewport override or additional motion is introduced. */
@media (min-width: 1440px) and (prefers-reduced-motion: reduce) {
  .main { scroll-behavior: auto; }
}