/* VERSION: v0.1.8 */
/* command-chrome-v0.1.8.css — + bh-num/chips Board Command signature (NFL v0.2.26)
 * v0.1.0 — 2026-07-11
 *
 * The chrome-only layer of the NFL command arc: replaces the flat
 * .page-header on the light pages (injuries / schedule / archive / teams /
 * rankings / refs / settings) with the chassis command hero (eyebrow +
 * 64px hero-canon title + mono sub) and a READ strip. Full per-page
 * command treatments (KPI grids etc.) land tier-by-tier; this keeps the
 * surface visually uniform meanwhile. players-command.css carries the
 * players page's full treatment and supersedes this file there.
 * Consumes nfl.css tokens only.
 */

.nflc-hero {
  padding: 30px 0 26px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
@media (max-width: 900px) { .nflc-hero { padding: 20px 0; } }

.nflc-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-pos);
  margin-bottom: 10px;
}

.nflc-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.94;
}
@media (max-width: 900px) { .nflc-title { font-size: 48px; } }

.nflc-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 640px;
  margin-top: 12px;
}
.nflc-sub code {
  font-family: var(--font-mono);
  color: var(--text-primary);
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.nflc-read {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--accent-pos-border);
  background: var(--accent-pos-dim);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.nflc-read-icon { color: var(--accent-pos); font-size: 14px; flex-shrink: 0; }
.nflc-read-label { color: var(--accent-pos); font-weight: 700; letter-spacing: 0.12em; flex-shrink: 0; white-space: nowrap; }
.nflc-read a { color: var(--accent-pos); }


/* ── v0.1.1: command card (props Board Command anatomy) ── */
.nflc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(410px, 0.82fr);
  gap: 44px;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
      linear-gradient(180deg, rgba(255,255,245,0.026), rgba(255,255,245,0.006)),
      var(--bg-elev-1);
  padding: 24px;
  margin-bottom: 28px;
}
.nflc-card-copy { align-self: center; }
.nflc-card .nflc-side { align-self: stretch; }
@media (max-width: 900px) { .nflc-card { grid-template-columns: 1fr; gap: 22px; padding: 20px; } }
.nflc-card .nflc-hero { border: 0; padding: 0; margin: 0; }
.nflc-card .nflc-read { margin: 18px 0 0; }
.nflc-card .nflc-sub { margin-top: 12px; }
.nflc-card-copy { min-width: 0; }

/* NFL players page rides the same card (its own hero grid supplies the KPI side) */
.players-command-hero.nflc-card { border: 1px solid var(--border); border-radius: 14px; padding: 24px; background: linear-gradient(180deg, rgba(255,255,245,0.026), rgba(255,255,245,0.006)), var(--bg-elev-1); margin-bottom: 28px; grid-template-columns: minmax(0, 1fr) minmax(410px, 0.82fr); align-items: stretch; }
.players-command-hero.nflc-card .players-command-hero-copy { align-self: center; background: transparent; border: 0; box-shadow: none; }
.players-command-hero.nflc-card .players-command-kpis { align-self: stretch; }
.players-command-hero.nflc-card .players-command-read { margin: 18px 0 0; border: 1px solid var(--accent-pos-border); background: var(--accent-pos-dim); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--text-secondary); }
.players-command-hero.nflc-card .players-command-read-icon { color: var(--accent-pos); flex-shrink: 0; }
.players-command-hero.nflc-card .players-command-read-label { color: var(--accent-pos); font-weight: 700; letter-spacing: 0.12em; flex-shrink: 0; white-space: nowrap; }


/* ── v0.1.2: KPI side grid (right table on every card) ── */
.nflc-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 1px;
  background: var(--divider);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  align-self: center;
}
.nflc-side-cell { background: var(--bg-elev-1); padding: 16px 20px; min-width: 0; }
.nflc-side-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 7px; }
.nflc-side-v { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nflc-side-v.nflc-accent { color: var(--accent-pos); }
.nflc-side-s { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-tertiary); margin-top: 4px; }
@media (max-width: 900px) { .nflc-side { width: 100%; } }


/* ── v0.1.4: canonical side-cell anatomy (matches chassis .bh-side) ── */
.nflc-side-cell { padding: 14px 18px; }
.nflc-side-k { font-size: 9px; margin-bottom: 6px; }
.nflc-side-v { font-size: 19px; }
.players-command-hero.nflc-card .players-command-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--divider);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.players-command-hero.nflc-card .players-command-kpi {
    background: var(--bg-elev-1);
    padding: 14px 18px;
    display: block;
    border: 0;
    border-radius: 0;
}
.players-command-hero.nflc-card .players-command-kpi-icon { display: none; }
.players-command-hero.nflc-card .players-command-kpi-label { font-size: 9px; margin-bottom: 6px; display: block; }
.players-command-hero.nflc-card .players-command-kpi strong { font-size: 19px; }


/* ── v0.1.5: side-cell vertical centering (parity with chassis flow-shell) ── */
.nflc-side-cell,
.players-command-hero.nflc-card .players-command-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}


/* ── v0.1.6: bh-num + chips (chassis Board Command parity) ──
   The signature big count + chip row from the chassis bh-hero
   (styles-append-bh-hero-v0.1.0.css), NFL-tokened. Replaces the
   64px .nflc-title on pages that adopt the count (title rules stay
   for any page not yet converted). Values match chassis verbatim. */
.nflc-num { font-family: var(--font-display); font-size: 64px; font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; color: var(--text-primary); }
.nflc-num small { font-size: 24px; font-weight: 700; color: var(--text-secondary); margin-left: 12px; letter-spacing: -0.01em; }
.nflc-chips { margin-top: 11px; display: flex; gap: 9px; flex-wrap: wrap; }
.nflc-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 99px; }
.nflc-chip-mint { color: var(--accent-pos); background: var(--accent-pos-dim); border: 1px solid var(--accent-pos-border); }
.nflc-chip-gray { color: var(--text-primary); background: var(--bg-elev-2); border: 1px solid var(--border-strong); }
@media (max-width: 900px) {
    .nflc-num { font-size: 48px; }
    .nflc-num small { font-size: 18px; }
}


/* ── v0.1.7: side-cell sub-lines (chassis .bh-s parity) ── */
.nflc-side-s { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-tertiary); margin-top: 4px; }


/* ── v0.1.8: read strip → chassis bh-read treatment (slim, green left edge) ──
   Values verbatim from flow-shell v0.1.8.27 `.tt-flow-main .bh-read`.
   Tail override wins on cascade; icon hidden (chassis read has none).
   Applies NFL-wide — every command page shares .nflc-read. */
.nflc-read {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent-pos);
    border-radius: 10px;
    padding: 9px 12px;
    background: linear-gradient(90deg, rgba(0,217,122,0.065), rgba(255,255,245,0.012));
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 100%;
    display: block;
}
.nflc-read-icon { display: none; }
.nflc-read-label {
    color: var(--accent-pos);
    font-weight: 700;
    letter-spacing: 0.09em;
    margin-right: 8px;
    white-space: nowrap;
}