/*
 * Page styling for the MFD and the configuration panel.
 *
 * Nothing here draws: the canvas is sized by `sizeCanvas` from its CSS box, and every pixel inside it comes from
 * `src/main/mfd.js`. The CSS therefore owns two things only — the box the canvas occupies, and the panel's columns.
 * Keeping layout out of the HTML and out of the JavaScript is what lets the canvas be resized by one observable
 * rather than by a handler per element.
 */

:root {
  color-scheme: dark;
  --ink: #cfd8e3;
  --dim: #6f8199;
  --panel: #0a0f15;
  --edge: #1d2733;
  --accent: #7fb2e5;
  --danger: #ff6b6b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #05070a;
  color: var(--ink);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.app {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 420px);
  gap: 12px;
  padding: 12px;
  min-height: 100vh;
  align-items: start;
}

.mfd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* A square canvas: a radar picture on stretched axes has an anisotropic scale, and every bearing on it is a lie. */
#mfd {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #04070b;
  border: 1px solid var(--edge);
}

.status {
  margin: 0;
  color: var(--dim);
  white-space: pre-wrap;
  min-height: 1.5em;
}

.status.error {
  color: var(--danger);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding-right: 4px;
}

.panel-section {
  border: 1px solid var(--edge);
  background: var(--panel);
  padding: 8px 10px;
}

.panel-section h2 {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The three categories are coloured differently on purpose: a reader must be able to tell a run identity field
   from a display setting from something fixed without reading the fine print. */
.panel-model h2 {
  color: var(--accent);
}

.panel-view h2 {
  color: #8fbf8f;
}

/* Scenario file I/O is a fourth category: it hands the whole scenario back to the user as a file rather than
   editing a field in it, so it must not read as a run-identity field. The dashed edge echoes the drop affordance
   the page already shows, so "this section is about files" lands before the hint is read. */
.panel-io {
  border-style: dashed;
}

.panel-io h2 {
  color: #b9a0e0;
}

.panel-fixed h2,
.panel-fixed .fixed {
  color: var(--dim);
}

.field {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
}

.field-label {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

.field input,
.field select {
  background: #0e151d;
  color: var(--ink);
  border: 1px solid var(--edge);
  padding: 2px 4px;
  font: inherit;
  width: 100%;
}

.field input.wide {
  grid-column: 1 / -1;
}

.note,
.hint,
.fixed {
  margin: 6px 0 0;
  color: var(--dim);
  font-size: 11px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.button-row input {
  width: 68px;
  background: #0e151d;
  color: var(--ink);
  border: 1px solid var(--edge);
  padding: 2px 4px;
  font: inherit;
}

button {
  background: #16202b;
  color: var(--ink);
  border: 1px solid #263442;
  padding: 3px 10px;
  font: inherit;
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--accent);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button.primary {
  border-color: var(--accent);
  color: var(--accent);
}

button.danger {
  border-color: #5a1e1e;
  color: var(--danger);
}

.run-state {
  display: inline-block;
  margin-bottom: 6px;
  padding: 1px 6px;
  border: 1px solid var(--edge);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.run-state.state-RUNNING {
  color: #8fbf8f;
  border-color: #2b4a2b;
}

.run-state.state-PAUSED {
  color: #d8c26a;
  border-color: #4a442b;
}

.run-state.state-HALTED {
  color: var(--danger);
  border-color: #4a2b2b;
}

/* The drop target is the page, so the highlight is on the page: a dashed edge is the one affordance that says
   "a file can land here" without adding another element to the layout. */
.dragging {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}

.drop-hint {
  margin: 6px 0 0;
  color: var(--dim);
  font-size: 11px;
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }

  .panel {
    max-height: none;
  }
}