/* ORBAT builder — dressed as the Deck it feeds.
 *
 * ## Why this file overrides the site's palette
 *
 * The builder is not a marketing page with a form on it. It is the authoring half of an operator
 * console, and the person using it will have the Deck open in the next tab. Two dark themes that
 * are *nearly* the same read as two products built by two teams — the exact impression a tool
 * chain is supposed to dispel — so the tokens below are the Deck's own, lifted from
 * `docs/05-ui/DESIGN-SYSTEM.md` §2 rather than approximated.
 *
 * ## The rules the Deck follows, and so does this
 *
 *   * **Five surface steps, no shadows for decoration.** Depth comes from elevation and hairlines.
 *     A drop shadow on a panel in a console reads as a web page.
 *   * **Accent is interaction only.** Nothing is blue because blue looks nice; blue means you can
 *     press it or it is selected. Affiliation colour is a separate vocabulary and is never mixed
 *     with it.
 *   * **Every value is monospaced.** Coordinates, digests, counts, ranges. Proportional digits in
 *     a column an operator scans is the fastest way to make a wrong number look right.
 *   * **Radii stay at 3–8px.** Instruments are not pill-shaped.
 *   * **Micro-labels are 9–10px uppercase with wide tracking.** They label, they do not compete.
 */

.editor-body {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;

  /* The Deck's tokens. Names kept short and scoped to the editor so they cannot leak into the
     marketing pages, which keep their own slightly warmer palette on purpose. */
  --s0: #0a0f1a;
  --s1: #0f172a;
  --s2: #151e33;
  --s3: #1e293b;
  --s4: #2a3a52;
  --t1: #f1f5f9;
  --t2: #a9b6ca;
  --t3: #6b7c96;
  --l1: rgba(255, 255, 255, 0.07);
  --l2: rgba(255, 255, 255, 0.13);
  --l3: rgba(255, 255, 255, 0.22);
  --acc: #3b82f6;
  --acc-hi: #60a5fa;
  --acc-dim: rgba(59, 130, 246, 0.16);
  --friend: #4fa3e3;
  --hostile: #e8515a;
  --ok: #4fc48a;
  --warn: #e5a94b;
  --crit: #e8515a;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  background: var(--s0);
  color: var(--t1);
  font-size: 13px;
  line-height: 1.5;
}

/* Re-point the shared tokens at the console palette, so every rule further down this file — and
   every rule inherited from styles.css — lands on the Deck's colours without being rewritten. */
.editor-body {
  --bg: var(--s0);
  --bg-raised: var(--s1);
  --bg-inset: #0b1220;
  --line: var(--l1);
  --line-bright: var(--l2);
  --text: var(--t1);
  --text-dim: var(--t2);
  --text-faint: var(--t3);
  --accent: var(--acc);
}

/* The console's own header. Tighter than the marketing nav — an operator tool gives its chrome as
   little vertical space as it can get away with. */
.editor-body .nav {
  background: var(--s1);
  border-bottom: 1px solid var(--l2);
}
.editor-body .nav-inner { min-height: 44px; }
.editor-body .brand { font-size: 0.95rem; letter-spacing: 0.01em; }

.editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* One orchestrated reveal on load rather than scattered micro-animations: the three panes and the
   status bar arrive in reading order, 40 ms apart, and then the interface stops moving. */
@media (prefers-reduced-motion: no-preference) {
  .editor .pane,
  .editor .toolbar,
  .editor .statusbar {
    animation: rise 0.36s var(--ease) both;
  }
  .editor .toolbar { animation-delay: 0.02s; }
  .editor .pane:nth-child(1) { animation-delay: 0.06s; }
  .editor .pane:nth-child(2) { animation-delay: 0.1s; }
  .editor .pane:nth-child(3) { animation-delay: 0.14s; }
  .editor .statusbar { animation-delay: 0.18s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


/* ── Toolbar ────────────────────────────────────────────────────────────── */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
  padding: 0.7rem clamp(0.75rem, 2vw, 1.15rem);
  border-bottom: 1px solid var(--l2);
  background: var(--s1);
  /* A single hairline of accent along the top edge. The Deck's command bar carries the same
     device; it is what makes a strip of dark blue read as an instrument rather than a div. */
  box-shadow: inset 0 1px 0 var(--l1);
}
.tb-group { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.tb-right { margin-left: auto; }

.fld { display: flex; flex-direction: column; gap: 0.25rem; }
.fld > span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t3);
}

input, select {
  background: var(--bg-inset);
  border: 1px solid var(--l2);
  border-radius: var(--r-md);
  color: var(--t1);
  font: inherit;
  font-size: 0.84rem;
  padding: 0.38rem 0.55rem;
  min-height: 32px;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}
input:hover, select:hover { border-color: var(--l3); }
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
  border-color: transparent;
}
/* Values are monospaced wherever one is entered, not only where one is displayed — the field an
   author types a latitude into and the row that shows it back must line up digit for digit. */
input[type="number"], input[type="datetime-local"], .insp-grid input { font-family: var(--mono); }
input[type="search"] { width: 100%; }

.btn.sm {
  padding: 0.36rem 0.75rem;
  min-height: 32px;
  font-size: 0.8rem;
  border-radius: var(--r-md);
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease), color 0.14s var(--ease);
}
.editor .btn-ghost { border-color: var(--l2); color: var(--t2); background: transparent; }
.editor .btn-ghost:hover:not([disabled]) { border-color: var(--l3); color: var(--t1); background: var(--s2); }
.editor .btn-primary { background: var(--acc); border-color: var(--acc); color: #061020; font-weight: 600; }
.editor .btn-primary:hover:not([disabled]) { background: var(--acc-hi); border-color: var(--acc-hi); }

/* ── Panes ──────────────────────────────────────────────────────────────── */

.panes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.15fr) minmax(320px, 1.35fr);
}
.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--l2);
  background: var(--s0);
  padding: 0;
}
/* The laydown sits one step lower than the lists beside it. Elevation is how the Deck says
   "this is the picture and those are the panels over it", and the same reading applies here. */
.pane:last-child { border-right: none; background: var(--s0); }
.pane:nth-child(1), .pane:nth-child(2) { background: var(--s1); }

.pane-h {
  font-size: 0.66rem;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t2);
  margin: 0;
  padding: 0.65rem 0.85rem 0.6rem;
  border-bottom: 1px solid var(--l2);
  background: var(--s2);
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}
.pane-note {
  color: var(--t3);
  font-size: 0.64rem;
  font-family: var(--mono);
  letter-spacing: 0.06em;
}

.pane-tools {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--l1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.35rem; }

/* Scrollbars, matching the Deck's. A default macOS/Windows scrollbar inside a dark console is the
   single most conspicuous tell that a panel is a web page. */
.pane-body::-webkit-scrollbar, .library::-webkit-scrollbar { width: 9px; height: 9px; }
.pane-body::-webkit-scrollbar-track, .library::-webkit-scrollbar-track { background: transparent; }
.pane-body::-webkit-scrollbar-thumb, .library::-webkit-scrollbar-thumb {
  background: var(--s4);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.pane-body::-webkit-scrollbar-thumb:hover, .library::-webkit-scrollbar-thumb:hover {
  background: var(--l3);
  background-clip: content-box;
}
.pane-foot {
  margin: 0;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-faint);
  word-break: break-all;
}

.hint { font-size: 0.75rem; color: var(--text-faint); }

/* ── Chips ──────────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  min-height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--l2);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.chip:hover { border-color: var(--l3); color: var(--t1); }
/* Selected is a TINT plus a bright edge, not a solid fill. A solid accent block for every active
   filter would put more saturated colour on screen than the units do, and the units are the
   thing being looked at. */
.chip[aria-pressed="true"] { background: var(--acc-dim); border-color: var(--acc); color: var(--acc-hi); }
.chip.side-blue[aria-pressed="true"] {
  background: rgba(79, 163, 227, 0.18); border-color: var(--friend); color: var(--friend);
}
.chip.side-red[aria-pressed="true"] {
  background: rgba(232, 81, 90, 0.16); border-color: var(--hostile); color: var(--hostile);
}

/* ── Catalogue rows ─────────────────────────────────────────────────────── */

.cat-group {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  padding: 0.75rem 0.55rem 0.3rem;
  position: sticky;
  top: 0;
  /* Sticky, because the catalogue is long and a domain heading that scrolls away leaves the
     author reading a list of names with no idea which domain they are in. */
  background: linear-gradient(var(--s1) 72%, transparent);
  z-index: 1;
}
.cat-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 0.42rem 0.55rem;
  cursor: pointer;
  color: var(--t1);
  font: inherit;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}
.cat-item:hover {
  background: var(--s2);
  border-color: var(--l1);
  border-left-color: var(--acc);
}
.cat-name { font-size: 0.82rem; font-weight: 550; letter-spacing: -0.005em; }
.cat-meta {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--t3);
  margin-top: 0.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* ── ORBAT rows ─────────────────────────────────────────────────────────── */

.orbat-side {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.7rem 0.55rem 0.3rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  position: sticky;
  top: 0;
  background: linear-gradient(var(--s1) 72%, transparent);
  z-index: 1;
}
/* Affiliation colour, from MIL-STD-2525 / APP-6 as the Deck reads it — not a decorative blue and
   a decorative red. The same two values light the symbols on the laydown. */
.orbat-side.blue { color: var(--friend); }
.orbat-side.red  { color: var(--hostile); }

.unit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.55rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}
.unit:hover { background: var(--s2); border-left-color: var(--l3); }
.unit[data-selected="true"] {
  background: var(--acc-dim);
  border-color: var(--l1);
  border-left-color: var(--acc);
}
/* A 2525 frame in miniature: friend is a rounded rectangle, hostile is a rotated square. Shape
   carries affiliation independently of colour, which is the whole point of the standard and the
   reason the palette question is not an accessibility answer on its own. */
/* A frame with a translucent fill, exactly as the laydown draws it — NOT a hollow outline. An
   empty box at the start of a row reads as a checkbox, and a list of units is not a list of
   things to tick. */
.unit-swatch {
  width: 9px; height: 9px; flex-shrink: 0;
  border: 1.5px solid currentColor;
  background: color-mix(in srgb, currentColor 30%, transparent);
}
.unit-swatch.blue { color: var(--friend); border-radius: 2px; }
.unit-swatch.red  { color: var(--hostile); transform: rotate(45deg); border-radius: 1px; }
/* Two lines, not one run of text. The designation is what an operator says out loud and the class
   is what it is; on one line they read as a single garbled token — "VIPER 11f-16a-adf". */
.unit-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.05rem; }
.unit-desig {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-cls {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-del {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.3rem 0.4rem;
  min-height: 30px;
  min-width: 30px;
  border-radius: 4px;
}
.unit-del:hover { color: var(--hostile); background: rgba(232, 81, 90, 0.12); }

.empty { padding: 1.5rem 1rem; color: var(--t3); font-size: 0.8rem; text-align: center; }

/* ── Issues ─────────────────────────────────────────────────────────────── */

.issues {
  border-top: 1px solid var(--l2);
  /* A left rule in the critical colour rather than a tinted block. The Deck marks a problem at the
     edge of the panel it belongs to; a full red wash reads as an error page. */
  border-left: 2px solid var(--crit);
  padding: 0.6rem 0.85rem;
  background: rgba(232, 81, 90, 0.07);
  font-size: 0.76rem;
  color: var(--t2);
  max-height: 30%;
  overflow-y: auto;
}
.issues b { color: var(--crit); display: block; margin-bottom: 0.3rem; font-size: 0.6rem;
            font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.issues ul { margin: 0; padding-left: 1.1rem; }
.issues li { margin-bottom: 0.2rem; }

/* ── Plot ───────────────────────────────────────────────────────────────── */

.plot-wrap { padding: 0.6rem; border-bottom: 1px solid var(--l2); position: relative; }
#plot {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--l2);
  border-radius: var(--r-md);
  background: #060b14;
  touch-action: none;         /* the canvas handles drag itself */
  cursor: crosshair;
}
.plot-hint {
  margin: 0.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t3);
  text-align: center;
}

/* ── Inspector ──────────────────────────────────────────────────────────── */

.inspector { flex: 1; min-height: 0; overflow-y: auto; padding: 0.75rem 0.85rem 1.5rem; }
.insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.insp-grid .fld.wide { grid-column: 1 / -1; }
.insp-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t2);
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--l1);
}
.insp-checks { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.8rem; }
.insp-checks label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.84rem; color: var(--text-dim); cursor: pointer; min-height: 30px;
}
.insp-checks input[type="checkbox"] { min-height: 0; width: 15px; height: 15px; accent-color: var(--acc); }

/* ── Scenario library ───────────────────────────────────────────────────
   A drawer under the toolbar rather than a fourth pane: it is consulted at the start and end of
   a session, not while laying units down, and a permanent column would cost the laydown width
   every minute of the work in between. */

.library {
  border-bottom: 1px solid var(--l2);
  background: var(--s2);
  padding: 0.7rem 0.9rem 0.8rem;
  max-height: 42vh;
  overflow-y: auto;
  animation: drawer 0.22s var(--ease) both;
}
@keyframes drawer {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.lib-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.lib-head h2 {
  font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--t2); margin: 0;
}
.lib-note { font-size: 0.72rem; color: var(--t3); margin: 0; }
.lib-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.65rem; }

.lib-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--l1);
  border-left: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 0.5rem 0.7rem;
  background: var(--s1);
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.lib-row:hover { border-color: var(--l2); }
/* The running exercise is marked the way the Deck marks a selection: an accent edge and a tint,
   never a heavier border all round — the row must not look like a modal. */
.lib-row.active { background: var(--acc-dim); border-left-color: var(--acc); }
.lib-meta { min-width: 0; flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.lib-name { font-family: var(--mono); font-size: 0.84rem; font-weight: 550; color: var(--t1); }
.lib-sub {
  font-family: var(--mono); font-size: 0.64rem; color: var(--t3);
  flex-basis: 100%;
}
.lib-problem { flex-basis: 100%; font-size: 0.7rem; color: var(--crit); }
.lib-badge {
  font-family: var(--mono);
  font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.08rem 0.35rem; border-radius: var(--r-sm); border: 1px solid currentColor;
}
.lib-badge.on { color: var(--acc-hi); }
.lib-badge.bad { color: var(--crit); }
.lib-acts { display: flex; gap: 0.35rem; }
.lib-acts .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn.danger:not([disabled]):hover { border-color: var(--hostile); color: var(--hostile); }

.lib-status {
  font-family: var(--mono);
  font-size: 0.7rem; margin: 0.65rem 0 0; min-height: 1.1em; color: var(--t3);
}
.lib-status.ok { color: var(--ok); }
.lib-status.warn { color: var(--warn); }
.lib-status.bad { color: var(--crit); }
.lib-link { color: var(--acc-hi); text-decoration: underline; }

/* ── Status bar ─────────────────────────────────────────────────────────
   The Deck ends in one and so does this. It is not chrome: it answers the three questions an
   author asks without being able to see the simulation — which dataset am I building against,
   what have I actually placed, and is the Gateway there to save it to. */

.statusbar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.3rem 0.9rem;
  border-top: 1px solid var(--l2);
  background: var(--s1);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
  color: var(--t3);
  min-height: 26px;
}
.sb-item { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.sb-label { letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); opacity: 0.75; }
.sb-value { color: var(--t2); }
.sb-value.blue { color: var(--friend); }
.sb-value.red { color: var(--hostile); }
.sb-value.ok { color: var(--ok); }
.sb-value.bad { color: var(--crit); }
.sb-sep { width: 1px; height: 12px; background: var(--l2); }
.sb-right { margin-left: auto; }
/* A live dot, sized so it registers peripherally and no larger. */
.sb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); }
.sb-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(79, 196, 138, 0.16); }
.sb-dot.bad { background: var(--crit); box-shadow: 0 0 0 3px rgba(232, 81, 90, 0.16); }

/* ── Narrow screens: stack the panes and scroll the page ────────────────── */

@media (max-width: 1000px) {
  .editor-body { overflow: auto; height: auto; }
  .panes { grid-template-columns: 1fr; }
  .pane { border-right: none; border-bottom: 1px solid var(--l2); }
  .pane-body { max-height: 45vh; }
  .tb-right { margin-left: 0; }
}