/* LANDFALL console — Anduril-inspired: near-black, hairlines, mono microlabels, lime signal */

:root {
  --bg: #010101;
  --surface: #0A0B0A;
  --surface-2: #101210;
  --ink: #E8ECE9;
  --ink-2: #8E9291;
  --ink-3: #6C6E6B;
  --olive: #505544;
  --lime: #DFF140;
  --lime-dim: #86AB1F;
  --hairline: #232523;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mono { font-family: var(--mono); }

a { color: var(--ink); text-decoration-color: var(--olive); text-underline-offset: 3px; }
a:hover { color: var(--lime); }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
}

.brand { display: flex; align-items: baseline; gap: 10px; }

.brand-mark {
  width: 10px; height: 10px;
  background: var(--lime);
  display: inline-block;
  align-self: center;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}

.brand-name {
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: 15px;
}

.brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-3);
}

.runmeta { display: flex; align-items: center; gap: 18px; font-size: 11px; }
.meta-item { display: flex; gap: 7px; white-space: nowrap; }
.meta-k { color: var(--ink-3); letter-spacing: 0.14em; }

.statusdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--olive);
}
.statusdot.live { background: var(--lime); box-shadow: 0 0 6px rgba(223, 241, 64, 0.6); }
.statusdot.err  { background: #C4574A; }

/* ---------- headline strip ---------- */

.headline {
  padding: 6px 20px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--lime);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.headline-tick { animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .headline-tick { animation: none; } }

/* ---------- console layout ---------- */

.console {
  flex: 1;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 320px;
  min-height: 0;
}

/* field rail */

.fieldrail {
  border-right: 1px solid var(--hairline);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fieldbtn {
  appearance: none;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-align: left;
  padding: 10px 14px;
  cursor: pointer;
}
.fieldbtn:hover { color: var(--ink); background: var(--surface); }
.fieldbtn.active {
  color: var(--lime);
  border-left-color: var(--lime);
  background: var(--surface);
}
.fieldbtn .fb-sub {
  display: block;
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* ---------- map stage ---------- */

.mapstage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  gap: 14px;
}

.mapframe {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 181;
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

#map-canvas, #overlay-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#overlay-canvas { cursor: crosshair; }

/* corner ticks */
.corner {
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--lime);
  border-style: solid;
  border-width: 0;
  opacity: 0.85;
  pointer-events: none;
}
.c-tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.c-tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.c-bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.c-br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.readout {
  position: absolute;
  top: 10px; left: 12px;
  padding: 5px 9px;
  background: rgba(1, 1, 1, 0.82);
  border: 1px solid var(--hairline);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  pointer-events: none;
}
.readout-sep { color: var(--ink-3); margin: 0 4px; }
#readout-val { color: var(--lime); }

.validtime {
  position: absolute;
  bottom: 10px; right: 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  background: rgba(1, 1, 1, 0.82);
  border: 1px solid var(--hairline);
  padding: 5px 9px;
  pointer-events: none;
}

.loadstate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink-3);
  background: var(--surface);
}
.loadstate[hidden] { display: none; }

/* ---------- under-stage: colorbar + timeline ---------- */

.understage { display: flex; flex-direction: column; gap: 14px; }

.colorbar-wrap { max-width: 420px; }
.colorbar-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  margin-bottom: 6px;
}
#colorbar {
  width: 100%;
  height: 8px;
  display: block;
  border: 1px solid var(--hairline);
}
.colorbar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 4px;
}

.timeline {
  display: flex;
  align-items: center;
  gap: 14px;
}

.playbtn {
  appearance: none;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.playbtn:hover { border-color: var(--lime-dim); color: var(--lime); }
.playbtn.playing { border-color: var(--lime); color: var(--lime); }

.scrub-wrap { flex: 1; min-width: 0; }

#scrub {
  width: 100%;
  appearance: none;
  height: 2px;
  background: var(--hairline);
  outline-offset: 4px;
}
#scrub::-webkit-slider-thumb {
  appearance: none;
  width: 4px; height: 16px;
  background: var(--lime);
  cursor: ew-resize;
}
#scrub::-moz-range-thumb {
  width: 4px; height: 16px;
  background: var(--lime);
  border: none; border-radius: 0;
  cursor: ew-resize;
}

.scrub-days {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 6px;
}

.leadtime {
  font-size: 12px;
  color: var(--lime);
  letter-spacing: 0.12em;
  min-width: 58px;
  text-align: right;
}

/* ---------- side panel ---------- */

.sidepanel {
  border-left: 1px solid var(--hairline);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.panel {
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: 14px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: 4px;
}
.panel-unit { color: var(--ink-3); font-size: 10px; }

.panel-note {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.panel-text { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.panel-text:last-child { margin-bottom: 0; }

.disclaimer {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--olive);
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}

/* chart */

.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }

.chart .gridline { stroke: var(--hairline); stroke-width: 1; }
.chart .axis-label { fill: var(--ink-3); font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; }
.chart .series { stroke: var(--lime); stroke-width: 2; fill: none; }
.chart .series-area { fill: rgba(223, 241, 64, 0.07); }
.chart .cursor-line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .step-marker { fill: var(--lime); }
.chart .hover-dot { fill: var(--lime); stroke: var(--bg); stroke-width: 2; }

.chart-tip {
  position: absolute;
  padding: 4px 8px;
  background: rgba(1, 1, 1, 0.92);
  border: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink);
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}
.chart-tip b { color: var(--lime); font-weight: 400; }

.datatable-wrap { margin-top: 10px; }
.datatable-wrap summary {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
}
.datatable-wrap summary::before { content: "+ "; color: var(--lime-dim); }
.datatable-wrap[open] summary::before { content: "− "; }
.datatable-scroll { max-height: 180px; overflow-y: auto; margin-top: 8px; }

#shear-table { width: 100%; border-collapse: collapse; font-size: 10px; }
#shear-table th, #shear-table td {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
  font-weight: 400;
}
#shear-table th { color: var(--ink-3); letter-spacing: 0.12em; }
#shear-table td:last-child { text-align: right; color: var(--ink); }

/* ---------- footer ---------- */

.foot {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--hairline);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.foot-sep { color: var(--olive); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .console { grid-template-columns: 120px minmax(0, 1fr); }
  .sidepanel {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--hairline);
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sidepanel .panel { flex: 1 1 300px; }
}

@media (max-width: 640px) {
  .console { grid-template-columns: 1fr; }
  .fieldrail {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding: 0;
  }
  .fieldbtn { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .fieldbtn.active { border-bottom-color: var(--lime); }
  .fieldbtn .fb-sub { display: none; }
  .mapstage { padding: 12px; }
  .runmeta { display: none; }
  .timeline { flex-wrap: wrap; }
  .scrub-days span:nth-child(even) { display: none; }
}