/* ==========================================================================
   AG NOVA — 03 COMPONENTS (SUBSET)

   The shared hardware vocabulary of N.O.V.A. OS, trimmed to exactly what this
   instrument uses. Missions, dossiers, logs, signals, feeds and taskbars have
   no meaning here and are not carried along as dead weight.

   The rules that remain are unchanged from the parent system, so a visitor
   who knows the main terminal recognises this as the same machine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PANEL — the fundamental unit of the interface
   -------------------------------------------------------------------------- */

.nova-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--nova-panel);
  border: var(--border-structural) solid var(--nova-border);
  clip-path: polygon(
    0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer))
  );
  box-shadow:
    inset 0 1px 0 0 var(--nova-highlight),
    inset 0 4px 16px var(--nova-recess);
  min-width: 0;
}

/* Faint internal grid so panel interiors read as machined surfaces */
.nova-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--nova-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nova-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.16;
}

.nova-panel > * { position: relative; z-index: 1; }

.nova-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--nova-panel-alt);
  border-bottom: var(--border-thin) solid var(--nova-border);
}

.nova-panel__code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  color: var(--nova-cyan);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nova-panel__state {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  color: var(--nova-text-diagnostic);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

.nova-panel__body {
  padding: var(--sp-4);
  flex: 1;
  min-width: 0;
}
.nova-panel__body--tight { padding: var(--sp-3); }
.nova-panel__body--flush { padding: 0; }

.nova-panel__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-top: var(--border-thin) dashed var(--nova-grid);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  color: var(--nova-text-diagnostic);
  text-transform: uppercase;
  flex-wrap: wrap;
}

.nova-panel--cyan   { border-color: var(--nova-cyan-line); }
.nova-panel--orange { border-color: var(--nova-orange-line); }
.nova-panel--ivory  { border-color: var(--nova-ivory-line); }

.nova-panel--cyan   > .nova-panel__head { box-shadow: inset 0 -1px 0 var(--nova-cyan-line); }
.nova-panel--orange > .nova-panel__head { box-shadow: inset 0 -1px 0 var(--nova-orange-line); }
.nova-panel--orange > .nova-panel__head .nova-panel__code { color: var(--nova-orange); }
.nova-panel--ivory  > .nova-panel__head .nova-panel__code { color: var(--nova-ivory); }

/* --------------------------------------------------------------------------
   ACTION BUTTON — mechanical press
   The key detail: the button sits proud of the chassis with a hard bottom
   lip, and pressing it removes the lip while adding an inner shadow. That is
   what reads as a switch bottoming out rather than a soft UI fade.
   -------------------------------------------------------------------------- */

.nova-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--nova-panel);
  border: var(--border-structural) solid var(--nova-border);
  clip-path: polygon(
    0 0, calc(100% - var(--chamfer-sm)) 0, 100% var(--chamfer-sm),
    100% 100%, var(--chamfer-sm) 100%, 0 calc(100% - var(--chamfer-sm))
  );
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  color: var(--nova-text-secondary);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(243, 243, 238, 0.07),
    0 2px 0 0 #0a1420;
  transition:
    transform var(--t-press) var(--ease-mechanical),
    box-shadow var(--t-press) var(--ease-mechanical),
    background-color var(--t-hover) var(--ease-snap),
    color var(--t-hover) var(--ease-snap),
    border-color var(--t-hover) var(--ease-snap);
}

.nova-btn:hover {
  border-color: var(--nova-cyan-line);
  color: var(--nova-cyan-bright);
  background: var(--nova-panel-alt);
}

.nova-btn:active {
  transform: translateY(2px) scale(0.985);
  box-shadow: inset 0 2px 5px rgba(8, 17, 27, 0.85);
}

/* A latched switch. Pressed and backlit, exactly like the taskbar keys on the
   main terminal. */
.nova-btn[aria-pressed="true"] {
  background: var(--nova-cyan);
  border-color: var(--nova-cyan-bright);
  color: var(--nova-space);
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(8, 17, 27, 0.32),
    0 0 0 1px var(--nova-cyan-dim);
}

.nova-btn--primary {
  background: var(--nova-cyan);
  border-color: var(--nova-cyan-bright);
  color: var(--nova-space);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   STATUS CHIP — hard rectangle, no soft pills
   -------------------------------------------------------------------------- */

.nova-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border: var(--border-thin) solid currentColor;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}

.nova-chip--live { color: var(--nova-cyan); background: var(--nova-cyan-dim); }
.nova-chip--warn { color: var(--nova-orange); background: var(--nova-orange-dim); }

/* --------------------------------------------------------------------------
   DATA ROWS — dense label/value telemetry
   -------------------------------------------------------------------------- */

.nova-data {
  display: flex;
  flex-direction: column;
}

.nova-data__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: var(--border-thin) dashed var(--nova-grid);
}
.nova-data__row:last-child { border-bottom: 0; }

.nova-data__label {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  color: var(--nova-text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}

.nova-data__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-tiny);
  letter-spacing: var(--ls-data);
  color: var(--nova-text-primary);
  margin-left: auto;
  text-align: right;
  overflow-wrap: anywhere;
}

.nova-data__value--nominal  { color: var(--nova-cyan); }
.nova-data__value--elevated { color: var(--nova-orange); }
.nova-data__value--critical { color: var(--nova-danger); }

/* --------------------------------------------------------------------------
   TELEMETRY READOUT — header strip
   -------------------------------------------------------------------------- */

.nova-readout {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  color: var(--nova-text-diagnostic);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   N.O.V.A. VOICE BLOCK — her commentary, visually distinct from content
   -------------------------------------------------------------------------- */

.nova-voice {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  background: var(--nova-ivory-dim);
  border-left: var(--border-heavy) solid var(--nova-ivory);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--nova-ivory);
  font-style: italic;
}

.nova-voice__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  font-style: normal;
  letter-spacing: var(--ls-wider);
  color: var(--nova-text-muted);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   OBJECTIVE LIST
   -------------------------------------------------------------------------- */

.nova-objectives {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.nova-objectives li {
  display: flex;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-tiny);
  color: var(--nova-text-secondary);
  letter-spacing: var(--ls-data);
  line-height: 1.5;
}

.nova-objectives li::before {
  content: "\25B8";
  color: var(--nova-cyan);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   PROSE
   -------------------------------------------------------------------------- */

.nova-prose p {
  max-width: 76ch;
  margin-bottom: var(--sp-3);
  color: var(--nova-text-secondary);
  font-size: var(--fs-small);
}

.nova-prose h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wider);
  color: var(--nova-text-primary);
}
.nova-prose h3:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */

.nova-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-tiny);
  letter-spacing: var(--ls-wider);
  color: var(--nova-text-diagnostic);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   HEADER STRIP
   -------------------------------------------------------------------------- */

.nova-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding: 0 var(--sp-4);
  background: var(--nova-chassis);
  border: var(--border-structural) solid var(--nova-border);
  clip-path: polygon(
    0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer))
  );
}

.nova-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.nova-header__mark { width: 26px; height: 26px; flex-shrink: 0; }

.nova-header__titles {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nova-header__os {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  color: var(--nova-text-primary);
  text-transform: uppercase;
}

.nova-header__sub {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  color: var(--nova-text-diagnostic);
  text-transform: uppercase;
}

.nova-header__divider {
  width: var(--border-thin);
  align-self: stretch;
  margin: var(--sp-2) 0;
  background: var(--nova-grid);
  flex-shrink: 0;
}

.nova-header__telemetry {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
  flex-shrink: 0;
}