/* aedl-hub.css — 38th distinct surface flavor: FACTORY FLOOR.
   Industrial control-panel aesthetic. Cement slate ground, safety-
   yellow accents, signal-red warnings, ready-green for OK states.
   Pill-shaped metric cells suggest machined parts; hex-rivet bullets
   on station heads. Front door for the AEDLNET ops cluster. */

:root {
  --bg-floor:    #1c1f24;
  --bg-station:  #23272e;
  --bg-cell:     #2a2f37;
  --bg-deep:     #14171c;
  --ink:         #e8e4d6;
  --ink-2:       #b8b0a0;
  --ink-dim:     rgba(232, 228, 214, 0.62);
  --yellow:      #fcd34d;
  --yellow-2:    #c89e26;
  --red:         #ef4444;
  --red-2:       #8a2020;
  --green:       #22c55e;
  --green-2:     #157d3a;
  --blue:        #60a5fa;
  --line:        rgba(232, 228, 214, 0.10);
  --line-2:      rgba(232, 228, 214, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-floor);
  color: var(--ink);
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body.floor {
  /* Subtle diamond-plate-style texture via repeating gradient */
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 20px,
      rgba(252, 211, 77, 0.012) 20px,
      rgba(252, 211, 77, 0.012) 22px
    ),
    var(--bg-floor);
}

/* ───────────────────── MAST ───────────────────── */

.floor-mast {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 26px;
  border-bottom: 2px solid var(--yellow-2);
  background: var(--bg-deep);
  position: sticky;
  top: 0;
  z-index: 40;
}

.floor-mast-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.floor-callsign {
  font-family: "Chakra Petch", monospace;
  font-size: 18px;
  letter-spacing: 1.2px;
  color: var(--yellow);
}
.floor-slash { color: var(--ink-dim); font-family: "IBM Plex Mono", monospace; font-size: 14px; }
.floor-line {
  font-family: "Chakra Petch", monospace;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--ink);
  text-transform: uppercase;
}
.floor-line-sub {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--ink-dim);
  margin-left: 4px;
  letter-spacing: 0.4px;
}

.floor-mast-r { display: flex; gap: 14px; flex-wrap: wrap; }
.floor-mast-link {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-bottom: 1px dotted transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.floor-mast-link:hover { color: var(--yellow); border-bottom-color: var(--yellow-2); }
.floor-mast-link-warm {
  color: var(--bg-deep);
  background: var(--yellow);
  border-radius: 2px;
  font-weight: 600;
}
.floor-mast-link-warm:hover {
  background: var(--yellow-2);
  color: var(--bg-deep);
  border-bottom-color: transparent;
}

/* ───────────────────── STAGE ───────────────────── */

.floor-stage {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 26px 64px;
}

.floor-marquee {
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.floor-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--yellow);
  margin: 0 0 10px;
}

.floor-title {
  font-family: "Chakra Petch", monospace;
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1;
  margin: 0;
  letter-spacing: 1px;
  color: var(--ink);
}
.floor-title-thin {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 400;
  font-size: 0.4em;
  color: var(--ink-dim);
  letter-spacing: 1px;
}

.floor-blurb {
  font-size: 14.5px;
  max-width: 720px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 14px 0 0;
}

/* ───────────────────── OVERHEAD RAIL (TOTALS) ───────────────────── */

.floor-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
  padding: 16px;
  background: var(--bg-station);
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
}
.floor-rail::before {
  content: "";
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--yellow-2), var(--yellow), var(--yellow-2), transparent);
  border-radius: 1px;
}

.rail-cell {
  background: var(--bg-cell);
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.rail-cell-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.rail-cell-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.rail-cell-warn .rail-cell-num { color: var(--red); }

/* ───────────────────── STATIONS ───────────────────── */

.floor-station {
  margin-bottom: 26px;
  background: var(--bg-station);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.station-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-2);
}
.station-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--yellow);
  border-radius: 2px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  color: var(--bg-deep);
}
.station-tag-num {
  font-size: 10px;
  letter-spacing: 1px;
}
.station-tag-name {
  font-size: 11px;
  letter-spacing: 1.5px;
}
.station-title {
  flex-grow: 1;
  font-family: "Chakra Petch", monospace;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin: 0;
}
.station-deep {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--yellow);
  text-decoration: none;
  letter-spacing: 0.5px;
  border-bottom: 1px dotted var(--yellow-2);
  padding-bottom: 1px;
}
.station-deep:hover { color: var(--ink); border-bottom-color: var(--ink); }

.station-body { padding: 16px 18px; }
.station-body-2col {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;
}
@media (max-width: 820px) {
  .station-body-2col { grid-template-columns: 1fr; }
}

.station-side {
  background: var(--bg-deep);
  padding: 12px 14px;
  border-left: 2px solid var(--yellow-2);
  border-radius: 2px;
}

.station-sub {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 10px;
}

.station-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.station-table th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-2);
}
.station-table th.num { text-align: right; }
.station-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}
.station-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.station-empty {
  color: var(--ink-dim);
  text-align: center;
  padding: 20px;
  font-style: italic;
}

.state-pill {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 600;
}
.state-pill-ok { color: var(--green); background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.4); }
.state-pill-warn { color: var(--yellow); background: rgba(252, 211, 77, 0.12); border: 1px solid rgba(252, 211, 77, 0.4); }
.state-pill-fail { color: var(--red); background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.4); }
.state-pill-dim { color: var(--ink-dim); border: 1px solid var(--line); }

.station-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 8px;
  margin-bottom: 10px;
  background: var(--bg-floor);
  border-radius: 4px;
  border: 1px dashed var(--line-2);
}
.station-gate-state {
  font-family: "Chakra Petch", monospace;
  font-size: 28px;
  letter-spacing: 1px;
  color: var(--ink-dim);
}
.station-gate-state.gate-open { color: var(--green); }
.station-gate-state.gate-closed { color: var(--red); }
.station-gate-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-top: 6px;
}

.station-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 0;
}

/* ── LAUNCH SECTION ── */

.launch-overall {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: var(--bg-floor);
  border-radius: 4px;
  border-left: 3px solid var(--yellow);
}
.launch-overall-state {
  font-family: "Chakra Petch", monospace;
  font-size: 22px;
  color: var(--ink-dim);
  letter-spacing: 1px;
}
.launch-overall-state.ok { color: var(--green); }
.launch-overall-state.fail { color: var(--red); }
.launch-overall-state.warn { color: var(--yellow); }
.launch-overall-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.4px;
}

.launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.launch-cell {
  background: var(--bg-cell);
  padding: 10px 14px;
  border-radius: 3px;
  border-left: 2px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.launch-cell-k {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.launch-cell-v {
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.launch-cell.is-ok   { border-left-color: var(--green); }
.launch-cell.is-warn { border-left-color: var(--yellow); }
.launch-cell.is-fail { border-left-color: var(--red); }
.launch-cell.is-ok .launch-cell-v   { color: var(--green); }
.launch-cell.is-warn .launch-cell-v { color: var(--yellow); }
.launch-cell.is-fail .launch-cell-v { color: var(--red); }

/* ── G82 SECTION ── */

.g82-lifecycle {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 540px) {
  .g82-lifecycle { grid-template-columns: repeat(3, 1fr); }
}

.g82-life-cell {
  background: var(--bg-cell);
  padding: 12px 8px;
  border-radius: 3px;
  text-align: center;
  border-top: 2px solid var(--line-2);
}
.g82-life-cell[data-state="birth"]   { border-top-color: var(--blue); }
.g82-life-cell[data-state="active"]  { border-top-color: var(--green); }
.g82-life-cell[data-state="koma"]    { border-top-color: var(--yellow); }
.g82-life-cell[data-state="revival"] { border-top-color: var(--green-2); }
.g82-life-cell[data-state="death"]   { border-top-color: var(--red); }

.g82-life-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block;
}
.g82-life-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

.g82-trans {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}
.g82-trans li {
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-2);
}
.g82-trans li:last-child { border-bottom: none; }
.g82-trans .trans-state {
  color: var(--yellow);
  display: inline-block;
  min-width: 60px;
}
.g82-trans .trans-when { color: var(--ink-dim); float: right; }

.g82-pitch {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.g82-cta {
  display: inline-block;
  padding: 8px 14px;
  background: var(--yellow);
  color: var(--bg-deep);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 2px;
}
.g82-cta:hover { background: var(--yellow-2); }

/* ───────────────────── LEGACY ───────────────────── */

.floor-legacy {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 22px;
  background: var(--bg-deep);
  border-left: 3px solid var(--ink-dim);
  border-radius: 2px;
}
.floor-legacy-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.floor-legacy-text {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 12px;
  color: var(--ink-2);
  flex-grow: 1;
}
.floor-legacy-text code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--yellow);
}
.floor-legacy-link {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--line-2);
  padding-bottom: 1px;
}
.floor-legacy-link:hover { color: var(--yellow); border-bottom-color: var(--yellow-2); }

/* ───────────────────── FOOT ───────────────────── */

.floor-foot {
  border-top: 1px solid var(--line-2);
  padding: 16px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-deep);
  flex-wrap: wrap;
  gap: 10px;
}
.floor-foot-l, .floor-foot-r {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--ink-dim);
}
.floor-foot-stamp { color: var(--ink-2); }
.floor-foot-sep { color: var(--line-2); }
.floor-foot-meta { color: var(--ink-dim); }
.floor-foot-link {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--line-2);
  padding-bottom: 1px;
}
.floor-foot-link:hover { color: var(--yellow); border-bottom-color: var(--yellow-2); }
.floor-foot-tag { color: var(--yellow); }