/* OFFENSIVE LABS TECHNOLOGIES - offensivelabs.tech | css/home.css
   Homepage-only layer, loads AFTER css/main.css (DESIGN.md §1, §11).
   Hue ban (§4): NO color literals in this file — tokens and shared
   component classes only. Budget: <= 10KB. Gate: hue-audit rule
   (chroma <= 16/255) applies to anything added here.
   v5: vibrancy comes from the inversion accent defined in main.css
   (solid .btn-primary, .accent-serif word, inverted chips/hovers);
   this layer only shapes homepage-specific layout. */

/* ----- 1. CONSOLE MOCK — full-width variant + honest caption (§9.5) ----- */
/* main.css centers .console-stage at 66rem; the homepage proof section
   lets the console span the container. Tilt still drops < 880px (main.css). */
.console-stage--wide {
  max-width: none;
}

/* Font recipe (mono 10px / 0.18em / uppercase) comes from the shared
   .mono-micro group in main.css; only the placement differs here. */
.console-caption {
  color: var(--ink-faint);
  margin: var(--space-5) auto 0;
  text-align: center;
}

/* Console section gets a touch more air under the status band. */
.section--flush-top .console-stage--wide { margin-top: var(--space-7); }

/* ----- 2. ENGINE INDEX — vertical list, full-width hover-lit rows (§9.8) -----
   Not a card grid: hairline-divided rows, one engine per line, index in
   mono, honest status chip per row. Whole row is the link. */
.engine-index {
  border-top: 1px solid var(--line);
}

.engine-row {
  display: grid;
  grid-template-columns: 4.5rem 8.5rem minmax(0, 1fr) auto 2.25rem;
  grid-template-areas: "num name line status arrow";
  align-items: center;
  column-gap: var(--space-5);
  padding: 1.35rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}

.engine-row:hover,
.engine-row:focus-visible {
  background: var(--wash);
}

.engine-num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-index);
  color: var(--ink-faint);
}

.engine-name {
  grid-area: name;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}

.engine-line {
  grid-area: line;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-muted);
}

/* Honest per-engine maturity chip — outlined mono, never a trust claim.
   Chip base (mono/10px/0.12em/uppercase/ink-muted/line border) comes from
   the shared .chip group in main.css; grid placement + nowrap stay here. */
.engine-status {
  grid-area: status;
  white-space: nowrap;
}

.engine-arrow {
  grid-area: arrow;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  text-align: right;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.engine-row:hover .engine-name { color: var(--accent); }
.engine-row:hover .engine-arrow,
.engine-row:focus-visible .engine-arrow {
  transform: translateX(4px);
  color: var(--ink);
}

/* Spec link after the index — quiet, right of the list. */
#engines .actions {
  margin-top: var(--space-5);
  justify-content: flex-end;
}

/* Rows stack: index+name+arrow on one line, description and status below. */
@media (max-width: 899px) {
  .engine-row {
    grid-template-columns: 3.25rem minmax(0, 1fr) 2rem;
    grid-template-areas:
      "num name arrow"
      "line line line"
      "status status status";
    row-gap: var(--space-2);
    column-gap: var(--space-3);
    padding: 1.1rem 0.4rem;
  }
  .engine-status { justify-self: start; }
}

/* Narrow phones: tighten row gutters; spec link returns to the left edge. */
@media (max-width: 559px) {
  .engine-row { padding-inline: 0.15rem; }
  #engines .actions { justify-content: flex-start; }
}

/* ----- 2b. DELIVERABLES closing row — table ends at the footer contact
   anchor (v5 CTA spine). Not a button: a hairline-lifted row carrying a
   .card-link, which main.css inverts fully on hover (§9.15). ----- */
.deliverables-close td {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.deliverables-close .card-link {
  font-size: var(--fs-md);
}

/* ----- 3. Reduced motion — row transitions stop with everything else ----- */
@media (prefers-reduced-motion: reduce) {
  .engine-row,
  .engine-name,
  .engine-arrow { transition: none; }
}