/* styles/cockpit.css — cockpit-only styles per TERMINAL_DOCTRINE §6 */

/* ── TodaysBrief ── */
.brief2 {
  display: flex; flex-direction: column;
  height: 100%; padding: 12px 18px;
  gap: 6px; min-height: 0;
  overflow: hidden;
  min-width: 0;
}
.brief2__h {
  display: flex; align-items: center; justify-content: space-between;
}
.brief2__h-l { display: flex; align-items: center; gap: 10px; }
.brief2__icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid rgba(201,165,92,0.42);
  border-radius: 4px;
  background: radial-gradient(circle at 30% 30%, rgba(230,201,136,0.38), transparent 70%);
  color: var(--gold-bright); font-size: 11px;
}
.brief2__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.24em; color: var(--gold-bright);
}
.brief2__ask {
  background: none; border: 1px solid var(--hairline-2); color: var(--txt-2);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
  padding: 4px 10px; border-radius: 3px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.brief2__ask:hover { color: var(--gold-bright); border-color: rgba(201,165,92,0.45); background: rgba(201,165,92,0.06); }
.brief2__ask-k { font-size: 9px; color: var(--gold); }
.brief2__headline {
  font-family: var(--font-serif-display);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.25;
  color: var(--txt-1);
  text-wrap: balance;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
  /* Defensive overflow: long headlines (long URLs, large numbers, runaway AI synth) must wrap inside the panel */
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  min-width: 0;
  display: block;
  hyphens: auto;
}
.brief2__paras {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px; line-height: 1.6;
  color: var(--txt-2);
  /* flex:1 lets paras absorb all leftover vertical space inside the brief panel.
   * min-height guards mobile / auto-sized grid rows where flex:1 0 would otherwise
   * collapse paras to 0px (no explicit parent height to distribute).
   * 64px = 3 lines of 13/1.6 text — enough for the lede of paragraph 1 to land.
   * !important defends against responsive.css's stale `.brief2 { overflow-y: auto }`
   * scroll-rescue rule that, combined with a constrained panel, otherwise collapsed
   * paras to 0px when content exceeded the row share. */
  flex: 1 1 64px !important;
  overflow-y: auto;
  min-height: 64px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,165,92,0.32) transparent;
}
.brief2__paras::-webkit-scrollbar { width: 4px; }
.brief2__paras::-webkit-scrollbar-thumb { background: rgba(201,165,92,0.35); border-radius: 2px; }
.brief2__paras p { margin: 0; }
.brief2__paras strong { color: var(--gold-bright); font-weight: 600; }
.brief2__paras code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: rgba(201,165,92,0.08);
  padding: 1px 5px; border-radius: 3px;
  color: var(--gold-bright);
  border: 1px solid rgba(201,165,92,0.16);
}
.brief2__watch {
  /* Single horizontal strip: "WATCH ── Jun 18 FOMC ● │ Live SPX +0.62% ● │ 24h BTC −1.47% ●"
   * Stacked rows cost ~84px of brief panel; inline costs ~24px. The freed vertical
   * space goes to brief2__paras (the AI narrative), which is the higher-information cell.
   */
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; gap: 4px 12px;
  flex-shrink: 0;
  font-size: 11px;
}
.brief2__watch-h {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.22em; color: var(--gold);
  margin: 0;
  flex-shrink: 0;
}
.brief2__watch-row {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; font-size: 11px;
  white-space: nowrap;
}
.brief2__watch-row + .brief2__watch-row::before {
  content: '│';
  color: rgba(255,255,255,0.12);
  margin-right: 6px;
}
.brief2__watch-t { color: var(--gold-bright); letter-spacing: 0.06em; }
.brief2__watch-ev { color: var(--txt-1); }
.brief2__watch-dot {
  width: 7px; height: 7px; border-radius: 50%;
  justify-self: center;
}
.brief2__watch-dot--gold { background: var(--gold); box-shadow: 0 0 6px rgba(201,165,92,0.65); }
.brief2__watch-dot--up   { background: var(--up);   box-shadow: 0 0 6px rgba(52,211,153,0.55); }
.brief2__watch-dot--flat { background: rgba(255,255,255,0.25); }
.brief2__foot {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; color: var(--txt-4);
}

/* ── PinnedMovers ── */
.movers2 { display: flex; flex-direction: column; padding: 0; }
.movers2__card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 2px 14px;
  border-bottom: 1px solid rgba(201,165,92,0.06);
  position: relative;
  transition: background 180ms;
  cursor: pointer;
}
.movers2__card::before {
  content: ''; position: absolute;
  left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--gold);
}
.movers2__card--up::before { background: var(--up); }
.movers2__card--dn::before { background: var(--dn); }
.movers2__card:hover { background: rgba(201,165,92,0.04); }
.movers2__card:last-child { border-bottom: 0; }
.movers2__l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.movers2__head {
  display: flex; align-items: baseline; gap: 8px;
}
.movers2__tag {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.22em; color: var(--gold);
  padding: 1px 5px;
  border: 1px solid rgba(201,165,92,0.28);
  border-radius: 2px;
}
.movers2__sub { font-size: 8.5px; letter-spacing: 0.18em; color: var(--txt-4); }
.movers2__headline {
  font-size: 11.5px; font-weight: 500;
  color: var(--txt-1); line-height: 1.3;
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.movers2__detail { display: none; }
.movers2__r {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end;
  gap: 2px; min-width: 88px;
}
.movers2__metric {
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ── TodaysCalendar ── */
.cal2 { display: flex; flex-direction: column; height: 100%; padding: 0; }
.cal2__h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(201,165,92,0.10);
  background: linear-gradient(180deg, rgba(201,165,92,0.04), transparent);
}
.cal2__date { font-size: 11px; letter-spacing: 0.18em; color: var(--gold-bright); font-weight: 600; }
.cal2__count { font-size: 9.5px; letter-spacing: 0.18em; }
.cal2__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }
.cal2__row {
  display: grid;
  grid-template-columns: 44px 50px 1fr auto 36px;
  gap: 8px; align-items: center;
  padding: 7px 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(201,165,92,0.04);
}
.cal2__row:hover { background: rgba(201,165,92,0.04); }
.cal2__row--past { opacity: 0.42; }
.cal2__t { font-size: 11px; color: var(--gold-bright); letter-spacing: 0.06em; }
.cal2__cat {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.18em; padding: 2px 5px;
  border-radius: 2px; text-align: center;
}
.cal2__cat--macro { color: var(--gold-bright); background: rgba(201,165,92,0.10); border: 1px solid rgba(201,165,92,0.22); }
.cal2__cat--earn  { color: var(--info);        background: rgba(147,197,253,0.10); border: 1px solid rgba(147,197,253,0.22); }
.cal2__cat--chain { color: var(--up);          background: rgba(52,211,153,0.10);  border: 1px solid rgba(52,211,153,0.22); }
.cal2__ev { color: var(--txt-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal2__exp { font-size: 11px; }
.cal2__imp { font-size: 10px; letter-spacing: 0.04em; text-align: right; }
.cal2__imp--3 { color: var(--gold-bright); }
.cal2__imp--2 { color: var(--gold); }
.cal2__imp--1 { color: var(--txt-4); }

/* ── UnifiedTape ── */
.tape2 { display: flex; flex-direction: column; padding: 0; }
.tape2__row {
  display: grid;
  grid-template-columns: 44px 56px 38px 1fr auto;
  gap: 10px; align-items: center;
  padding: 4px 14px;
  font-size: 11.5px;
  border-bottom: 1px solid rgba(201,165,92,0.04);
  transition: background 180ms;
}
.tape2__row:hover { background: rgba(201,165,92,0.04); }
.tape2__t { font-size: 11px; color: var(--gold-bright); letter-spacing: 0.06em; }
.tape2__kind {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.20em; padding: 2px 5px;
  border-radius: 2px; text-align: center;
}
.tape2__kind--news  { color: var(--txt-2);      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); }
.tape2__kind--flow  { color: var(--gold);       background: rgba(201,165,92,0.10); border: 1px solid rgba(201,165,92,0.22); }
.tape2__kind--whale { color: var(--info);       background: rgba(147,197,253,0.10); border: 1px solid rgba(147,197,253,0.22); }
.tape2__kind--liq   { color: var(--dn);         background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.22); }
.tape2__src { font-size: 9.5px; color: var(--txt-4); letter-spacing: 0.14em; text-align: right; }
.tape2__body { color: var(--txt-1); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape2__val { font-size: 11px; font-weight: 600; letter-spacing: -0.01em; min-width: 60px; text-align: right; }

/* ── TopPredict ── */
.pred2 { display: flex; flex-direction: column; gap: 1px; padding: 0; height: 100%; }
.pred2__card {
  padding: 2px 12px;
  background: linear-gradient(180deg, rgba(201,165,92,0.03), transparent);
  border-bottom: 1px solid rgba(201,165,92,0.06);
  display: flex; flex-direction: column; gap: 1px;
}
.pred2__card:last-child { border-bottom: 0; }
.pred2__card:hover { background: rgba(201,165,92,0.06); }
.pred2__q {
  font-size: 11px; line-height: 1.32;
  color: var(--txt-1); font-weight: 500;
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pred2__row { display: flex; justify-content: space-between; align-items: baseline; }
.pred2__yes { font-size: 14px; font-weight: 600; color: var(--gold-bright); letter-spacing: -0.01em; }
.pred2__chg { font-size: 10px; letter-spacing: 0.04em; }
.pred2__bar {
  height: 3px; background: rgba(255,255,255,0.06);
  border-radius: 2px; overflow: hidden;
}
.pred2__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright));
  border-radius: 2px;
}
.pred2__meta { display: flex; justify-content: space-between; }
.pred2__vol  { font-size: 9.5px; letter-spacing: 0.14em; }
.pred2__src  { font-size: 9.5px; letter-spacing: 0.14em; }

/* ── Predict · Politics duo (two CandLists side-by-side in one panel) ── */
.poli2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.poli2__col { display: flex; flex-direction: column; gap: 6px; }
.poli2__hd { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid rgba(201,165,92,0.10); }
.poli2__t { font-size: 12px; color: var(--txt-1); font-weight: 500; }
.poli2__sub { font-size: 9.5px; letter-spacing: 0.14em; }
.poli2__list { display: flex; flex-direction: column; gap: 4px; }

/* ── Cockpit page-specific grid override ── */
/* Cockpit has 4 content rows; rebalance so stance row doesn't dominate.
 * Doctrine §4.5 — Cockpit-specific because stance cards (~250px content) need
 * MORE room than typical Row 4 vital-signs strips (~80px). Rebalance to make
 * the 4 rows visually rhythmic instead of last-row-dominant. */
.main--cockpit {
  grid-template-rows:
    minmax(140px, 1.0fr)   /* Row 1 hero + AI take */
    minmax(0, 1.3fr)        /* Row 2 brief + movers */
    minmax(0, 1.3fr)        /* Row 3 calendar + pulse + predict */
    minmax(0, 1.1fr);       /* Row 4 stance — slightly larger than hero to fit 4 cards' body */
}


/* ── StanceBoard — Row 4 cockpit-exclusive tactical view ──────── */
.stance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  height: 100%;
}
.stance__card {
  display: flex; flex-direction: column;
  padding: 10px 14px;
  gap: 5px;
  border-right: 1px solid rgba(201,165,92,0.08);
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.stance__card:last-child { border-right: none; }
.stance__card::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px; width: 2px;
}
.stance__card--high::before { background: var(--gold-bright); box-shadow: 0 0 8px rgba(255,231,166,0.5); }
.stance__card--med::before  { background: var(--gold); }
.stance__card--low::before  { background: rgba(255,255,255,0.18); }
.stance__head {
  display: flex; align-items: center; justify-content: space-between;
}
.stance__asset {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.22em; color: var(--gold-bright);
}
.stance__conv {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.16em; padding: 1px 5px; border-radius: 2px;
}
.stance__conv--high { color: var(--gold-bright); background: rgba(201,165,92,0.14); border: 1px solid rgba(201,165,92,0.36); }
.stance__conv--med  { color: var(--gold);        background: rgba(201,165,92,0.06); border: 1px solid rgba(201,165,92,0.20); }
.stance__conv--low  { color: var(--txt-3);       background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); }
.stance__stance {
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  color: var(--txt-1); letter-spacing: 0.02em;
  margin-top: 2px;
}
.stance__tilt {
  font-family: var(--font-mono); font-size: 10px; color: var(--gold);
  letter-spacing: 0.08em;
}
.stance__thesis {
  font-size: 11.5px; line-height: 1.42; color: var(--txt-2);
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px;
  flex: 1;
  min-height: 0;
}
/* Base stance__foot definition — MUST come BEFORE the narrow-height @media
 * blocks below. Source-order bug discovered in v45: when this unconditional
 * rule lives AFTER the ≤800h `.stance__foot { display: none }` rule, it wins
 * the cascade (same specificity, later in source) and the hide never fires.
 * Result: at user's actual 1422×639 viewport, foot stayed `display: grid`
 * and crushed the flex-1 stance__thesis to height: 0 — making the entire
 * analyst thesis paragraph invisible. The fix is purely source-order. */
.stance__foot {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: baseline; gap: 8px;
  padding-top: 5px; border-top: 1px dashed rgba(201,165,92,0.08);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em;
}

/* Short-laptop compression: tighten stance row at narrow viewports so Row 4
 * doesn't dominate the cockpit visual rhythm (Doctrine §4.5).
 * Strategy: at narrow heights, prioritize stance label + thesis body (the
 * editorial content) over foot stats (HORIZON · since X — secondary info
 * already implied by panel header timestamp). */
@media (min-width: 900px) and (max-height: 800px) {
  .stance__card { padding: 6px 10px; gap: 2px; }
  .stance__head { gap: 4px; }
  .stance__asset { font-size: 9px; }
  .stance__conv { font-size: 7.5px; padding: 1px 4px; }
  .stance__stance { font-size: 13px; margin-top: 0; letter-spacing: 0.01em; }
  .stance__tilt { font-size: 9.5px; }
  .stance__thesis { font-size: 10.5px; line-height: 1.32; -webkit-line-clamp: 2; }
  .stance__foot { display: none; }  /* hide HORIZON foot — info in panel header timestamp */
}
@media (min-width: 900px) and (max-height: 700px) {
  .stance__card { padding: 4px 9px; gap: 1px; }
  .stance__stance { font-size: 12px; }
  .stance__tilt { font-size: 9px; }
  .stance__thesis { font-size: 10px; -webkit-line-clamp: 2; line-height: 1.28; }
}
/* v48/v49/v57 — Narrow heights (4K@300% Windows, 1422×639-701 zone):
 *   v48 set thesis to 1-line clamp but flex parent budget still squeezed.
 *   v49: also compress head/stance/tilt siblings so thesis has room.
 *   v57: threshold widened 660 → 720 because user's actual viewport varies
 *   in 637-701 range — ≤660 was missing the 661-701 band where thesis still
 *   clipped 11px. Card budget ~61px; siblings cost head 10 + stance 12 +
 *   tilt 9 + 3 gaps + 8 pad = 42px → thesis gets 19px (fits 1-line + buffer). */
@media (min-width: 900px) and (max-height: 720px) {
  .stance__card { gap: 0; padding: 3px 8px; }
  .stance__head { line-height: 1.05; }
  .stance__asset { font-size: 8px; }
  .stance__conv { font-size: 7px; padding: 0 3px; }
  .stance__stance { font-size: 11px; line-height: 1.1; }
  .stance__tilt { font-size: 8.5px; line-height: 1.05; }
  .stance__thesis { -webkit-line-clamp: 1; font-size: 10px; line-height: 1.25; min-height: 13px; }
}
.stance__horizon { color: var(--txt-3); }
.stance__delta { color: var(--gold-bright); font-size: 11px; text-align: center; }
.stance__since { color: var(--txt-4); text-align: right; }

/* Cockpit hero strip AI take — a single AISynthLine that sits to the bottom of the
 * hero row, spanning all 4 cards. Doctrine §3.4.0 — the daily one-line take. */
.hero-strip__ai-take {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 0;
}
.hero-strip__ai-take .ai-synth-line {
  border-bottom: none;
  border-top: 1px solid rgba(201,168,106,0.12);
  padding: 6px 14px 4px;
  background: linear-gradient(180deg, transparent 0%, rgba(201,168,106,0.04) 100%);
  font-size: 12.5px;
}

/* ── Cockpit density floors (4-row grid, doctrine §2.1) ──────── */
/* These floors keep the brief panel content under tight grid-row heights. The
 * math at 1280×800 (laptop tier, panel ~196px):
 *   pad(8+8) + head(22) + headline(26) + paras(min 64) + watch-inline(26) + foot(12)
 *   + 4 gaps × 4px = 16 + 152 = 168px — fits within 196px row share with 28px slack. */
.brief2 { padding: 8px 14px; gap: 4px; }
.brief2__headline { font-size: 18px; line-height: 1.22; padding-bottom: 4px; margin-bottom: 0; }
.brief2__paras { font-size: 12px; line-height: 1.5; gap: 6px; }
.brief2__paras code { font-size: 11.5px; }
/* DO NOT set gap to a single value here — it would override the 4px-row / 12px-col
 * gap defined in the inline-strip layout above (line ~74) and squeeze the items. */
.brief2__watch { padding-top: 4px; }
.brief2__watch-h { margin: 0; font-size: 9px; }
.brief2__watch-row { padding: 0; font-size: 11px; }

/* Short laptop viewports (~700px usable) — tighten brief2 so watch list
 * fits within the squeezed Row 2 panel. Doctrine §4.5 sub-tweak. */
@media (min-width: 900px) and (max-height: 800px) {
  .brief2 { padding: 8px 14px; gap: 4px; }
  .brief2__headline { font-size: 18px; padding-bottom: 3px; }
  .brief2__paras { flex: 1 1 40px !important; min-height: 40px !important; font-size: 12px; line-height: 1.5; gap: 6px; }
  .brief2__watch { padding-top: 3px; }
  .brief2__watch-h { font-size: 8.5px; }
  .brief2__watch-row { font-size: 10.5px; padding: 2px 0; }
  .brief2__foot { font-size: 9.5px; padding-top: 4px; }
}

/* ≤730h brief2 compression moved to responsive.css §4.5.6 ultra-short block.
 * That block already had .brief2 rules and is loaded AFTER cockpit.css, which
 * is required to win the !important race with responsive.css:1076's
 * `.brief2__foot { display: flex !important }`. Keep this comment as a
 * pointer for future audits — don't re-add the rules here. */

/* GMG_STANDARDS §5 mobile typography floor */
@media (max-width: 899px) {
  .tape2__src, .tape2__kind, .cal2__cat, .cal2__imp,
  .quote__chg-abs, .stance__asset, .stance__conv,
  .movers2__tag, .movers2__sub,
  .brief2__eyebrow, .brief2__ask-k,
  .ai-take__lbl, .hero-mini__lbl { font-size: 11px !important; line-height: 1.25 !important; }
  .quote__sym, .quote__name, .quote__chg,
  .stance__sym, .brief2__p, .brief2__h,
  .cal2__ev, .movers2__sym, .movers2__chg
  { font-size: 13px !important; line-height: 1.3 !important; }
}