/* cogitator/codex.css v2 */
/* Codex Datasheet Viewer — shell layout (#/codex). DevAgent15 - 2026-06-02 */

/* DevAgent15 - 2026-06-02
   What: v2 — Column header chrome (.codex-col__header) lightened relative to the
         top page header so the column band reads as a sub-level (color-mix of
         var(--banner) toward white, with a literal fallback).
   Why:  Jérôme review — differentiate column headers from the top header. */

/* DevAgent15 - 2026-06-02
   What: v1 — Shell for the Codex viewer: full-height flex column (charcoal header
         bar + 3-column body, 25/25/50). Column headers are ALWAYS the charcoal
         banner (var(--banner)) — faction-independent, unlike the Army Builder
         columns. Placeholder/empty styles for the Col2/Col3 bodies (used this
         gate; CodexCol2/Col3 land in Gates 4/5). Col1/Col2/Col3 content styles
         live in codex-col1/2/3.css.
   Why:  Codex viewer is a new top-level section reached via the hamburger nav. */

/* ── Root — fills the viewport (it is the whole page) ── */
.codex {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* ── Header bar — charcoal, hosts the hamburger nav ── */
.codex__header {
  background: var(--banner);
  color: var(--banner-text);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  flex-shrink: 0;
}

/* ── Three-column body — fills remaining height ── */
.codex-columns {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Base column — flex:1 1 N% so each is bounded by the container and its body
   can scroll (same pattern as the Army Builder columns). */
.codex-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--bg);
  border-right: 2px solid #444444;
}

.codex-col:last-child {
  border-right: none;
}

/* Proportions — 25 / 25 / 50 */
.codex-col--1 { flex: 1 1 25%; width: 25%; max-width: 25%; }
.codex-col--2 { flex: 1 1 25%; width: 25%; max-width: 25%; background: var(--surface); }
.codex-col--3 { flex: 1 1 50%; width: 50%; max-width: 50%; background: var(--surface); }

/* ── Column header — charcoal banner, centred title, ALWAYS faction-independent.
   A touch LIGHTER than the top page header (.codex__header / var(--banner)) so the
   column band reads as a sub-level. color-mix lightens the actual banner colour;
   the literal is a fallback for browsers without color-mix. ── */
.codex-col__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  background: #3a3a3a;
  background: color-mix(in srgb, var(--banner) 82%, #ffffff 18%);
  border-bottom: 1px solid #444444;
}

.codex-col__title {
  font-family: var(--font-heading);
  font-size: calc(var(--text-base) * 1.3225);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--banner-text);
  text-align: center;
}

/* ── Column body — scrollable region beneath the header ── */
.codex-col__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Placeholder / empty state (Col2 + Col3 bodies) ── */
.codex-col__placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.5;
}