/* Dense terminal cockpit. Presentation-only overrides.

   Readability contract (2026-08-21): no font-size on this page renders below
   11px (0.69rem). The cockpit stays dense through spacing, not through type —
   panels are sized so their content reads, and the page scrolls to reach the
   dock's second row instead of compressing everything into one viewport. */

body.c-ready { overflow-x: hidden; overflow-y: auto; }
/* The bar stays in normal flow — the auto-hide hover-reveal was dropped
   2026-08-21: a nav you have to know to summon reads as a missing nav. */
.tab-nav { border: 0; box-shadow: none; background: var(--bg-card); }
.tab-nav .nav-caret { font-size: .69rem; }
.tab-nav > .auth-nav-slot > .theme-toggle { display: none !important; }
.hero { display: none; }
.c-marketbar {
  position: relative; z-index: 80; height: 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 0 12px;
  border: 0; background: var(--bg-card);
}
.c-marketbar .hero-indices {
  grid-column: 1; width: 100%; height: 58px; min-height: 58px;
  overflow-x: auto; border: 0; margin: 0; background: transparent;
  gap: 6px;
}
.c-marketbar .hidx {
  flex: 1 1 92px; min-width: 92px; min-height: 54px; padding: 4px 8px;
  flex-direction: column; justify-content: center; gap: 2px;
  border: 1px solid var(--border-soft); border-radius: 7px;
  background: var(--bg-panel);
}
.c-marketbar .hidx + .hidx { border-left: 1px solid var(--border-soft); }
.c-marketbar .hidx-label { font-size: .69rem; }
.c-marketbar .hidx-price { font-size: .9rem; }
.c-marketbar .hidx-chg { font-size: .72rem; }
/* The hero search box is re-parented in here by cockpit.js for small
   screens — the nav bar hides its own search below 960px and the hero is
   display: none, which left mobile with no visible search at all. */
.c-marketbar .search { display: none; }
.c-market-controls {
  grid-column: 2; display: flex; justify-content: flex-end; align-items: center;
  gap: 6px; min-width: 0;
}
.c-market-control {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
  padding: 0 10px; border: 1px solid var(--border-soft); border-radius: 7px;
  background: var(--bg-panel); color: var(--muted); cursor: pointer;
  font: 500 .7rem/1 var(--font-ui); white-space: nowrap;
}
.c-market-control:hover { color: var(--text); border-color: var(--border); }
.c-market-control .c-key { border: 0; min-width: auto; height: auto; padding: 0; background: none; }
.hero-indices {
  width: 100%; max-width: none; height: 42px; min-height: 42px;
  margin: 0; border: 0; border-block: 1px solid var(--border); border-radius: 0; box-shadow: none;
}
.hidx { min-height: 40px; padding: 2px 13px; flex-direction: row; gap: 8px; }
.hidx-label { font-size: .69rem; }
.hidx-price, .hidx-chg { font-family: var(--font-mono); font-size: .76rem; }

.c-key {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 21px;
  padding: 0 6px; border: 1px solid var(--border); background: var(--bg-panel);
  color: var(--text-soft); font: 600 .69rem/1 var(--font-mono);
}

.terminal.c-terminal {
  display: block; width: 100%; max-width: none;
  height: auto; padding: 8px 8px 0; overflow: visible;
}
.gt-footer { margin-top: 0; }
.c-workspace {
  /* Same 4-column grid (and gap) as the dock below, so every vertical border
     lines up: Movers/Internals over Earnings This Week, the map over Wire +
     Leaderboard, Live Wire over Treasury Yields. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(300px, 1fr)); gap: 8px;
  height: max(660px, calc(100vh - 220px));
}
.c-workspace #bm-movers { grid-column: 1; grid-row: 1; }
.c-workspace #bm-value { grid-column: 1; grid-row: 2; }
.c-workspace #homemap { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.c-workspace #bm-wire { grid-column: 4; grid-row: 1; }
.c-workspace #col-feed { grid-column: 4; grid-row: 2; }
.c-dock {
  margin-top: 8px; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 330px); gap: 8px;
}
.c-dock > * { height: 100%; overflow: hidden; }
.c-dock .bmod-body,
.c-workspace .bmod-body {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.c-dock .bmod-body::-webkit-scrollbar,
.c-workspace .bmod-body::-webkit-scrollbar { width: 6px; }
.c-dock .bmod-body::-webkit-scrollbar-thumb,
.c-workspace .bmod-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.c-orphans { display: none !important; }
.term-feed { position: static; height: auto; min-height: 0; }
#col-feed .pane { height: 100%; min-height: 0; }
.homemap-area { height: auto; flex: 1; min-height: 0; }
.highlight-row > .bmod-feature, .activity-panels > .bmod { height: auto; }

.bmod, .pane {
  min-width: 0; min-height: 0; border-radius: 0; box-shadow: none;
  border-color: var(--border-soft); background: var(--bg-card);
}
/* Tokens, not hardcoded greys: the map header must match the other panel
   titles in both themes (the old #d6d6d6/#a8a8a8 were invisible on the light
   theme's near-white header band). Title color falls through to .pane-title. */
.homemap .pane-header { background: var(--bg-card); border-bottom-color: var(--border-soft); }
.homemap .seg { background: transparent; border-color: var(--border); }
.homemap .seg button { border-left-color: var(--border); font-size: .72rem; min-height: 28px; }
.homemap .seg button:hover { background: var(--bg-chip); color: var(--text-strong); }
.homemap-link { color: var(--muted); font-size: .72rem; }
.bmod-feature::before { display: none; }
.bmod-head, .pane-header {
  min-height: 36px; height: 36px; padding: 0 12px; background: var(--bg-card);
}
.bmod-head h3, .pane-title {
  color: var(--muted); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
}
.bmod-chip { padding: 0; border: 0; background: none; font: 500 .69rem/1 var(--font-mono); }
.bmod-body { padding: 6px 12px; overflow-y: auto; }
.bmod-link { min-height: 32px; padding: 8px 12px; font-size: .72rem; color: var(--muted); }
.brow { min-height: 30px; padding: 4px 0; gap: 8px; font-size: .8rem; }
.b-tick, .b-price, .b-val, .b-sub, .activity-detail { font-family: var(--font-mono); }
.b-tick { min-width: 48px; font-size: .78rem; }
.b-name, .b-price, .b-val { font-size: .76rem; }
.btabs { margin: 3px 0 6px; gap: 4px; }
.btab { min-height: 26px; padding: 3px 9px; border-radius: 0; font-size: .7rem; }
.activity-row { min-height: 44px; padding: 6px 0; }
.activity-title { font-size: .78rem; }
.activity-detail { font-size: .7rem; }
.smart-intro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smart-row {
  display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 0;
}
.smart-row .b-tick { min-width: 45px; padding: 0; }
.smart-issuer { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smart-funds { min-width: 48px; text-align: right; white-space: nowrap; }
.smart-held { min-width: 48px; text-align: right; white-space: nowrap; }
.fund-tabs { margin-bottom: 3px; }
.top-fund-row { color: inherit; text-decoration: none; }
.top-fund-row:hover .fund-name { color: var(--text-strong); }
.fund-rank { flex: 0 0 24px; }
.fund-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fund-aum { flex: 0 0 52px; text-align: right; white-space: nowrap; }
.fund-return { flex: 0 0 48px; text-align: right; white-space: nowrap; font-family: var(--font-mono); }
.fund-status { padding: 10px 0; }
.insider-intro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insider-row {
  display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 0;
}
.insider-row .b-tick { min-width: 45px; padding: 0; }
.insider-buyers { flex: 0 0 auto; min-width: 62px; white-space: nowrap; }
.insider-role { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insider-value { min-width: 52px; text-align: right; white-space: nowrap; }
.wire-edition { margin: 6px 0 2px; font-size: .7rem; }
.wire-bullets li { padding: 5px 0 5px 12px; font-size: .78rem; line-height: 1.45; }
.feed-item { padding: 10px 12px; grid-template-columns: 26px 1fr; gap: 9px; }
.feed-avatar { width: 26px; height: 26px; border-radius: 3px; }
.feed-meta { font-size: .7rem; margin-bottom: 3px; }
.feed-headline { font-size: .8rem; line-height: 1.38; margin: 0 0 3px; }
.feed-summary { font-size: .72rem; line-height: 1.4; -webkit-line-clamp: 2; }
.gauge-wrap svg { height: 96px; }
.gauge-num { margin-top: -34px; font: 650 1.6rem/1 var(--font-mono); }
.mood-spark { margin: 8px 0; padding-bottom: 4px; }
.mood-spark-svg { max-height: 120px; }
.fg-comp { min-height: 28px; padding: 0; }

/* Match Index Pulse's light-mode reading weight for primary market data.
   Semantic up/down/flat values keep their directional colors. */
html.light .c-marketbar .hidx-price,
html.light .c-terminal .b-tick,
html.light .c-terminal .b-name,
html.light .c-terminal .b-sub,
html.light .c-terminal .b-price,
html.light .c-terminal .b-val:not(.pos):not(.neg):not(.flat),
html.light .c-terminal .gauge-num,
html.light .c-terminal .gauge-delta,
html.light .c-terminal .gauge-label,
html.light .c-terminal .fgc-label,
html.light .c-terminal .fgc-val,
html.light .c-terminal .activity-title,
html.light .c-terminal .activity-detail:not(.pos):not(.neg),
html.light .c-terminal .wire-edition,
html.light .c-terminal .wire-edition-time,
html.light .c-terminal .wire-bullets li,
html.light .c-terminal .feed-headline,
html.light .c-terminal .feed-summary {
  color: var(--text);
}

.c-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-start; justify-content: center;
  padding-top: min(16vh, 140px); background: rgba(0,0,0,.68);
}
.c-overlay.open { display: flex; }
.c-help {
  /* 620px was inherited from a fuller dialog; with two shortcut rows it left a
     long dead gap between each label and its key. Sized to the content instead. */
  width: min(460px, calc(100vw - 28px)); max-height: 66vh; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow-3);
  padding: 18px 20px 20px;
}
.c-help h2 {
  margin: 0 0 6px; font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft);
}
.c-help-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 9px 0; font-size: .76rem; color: var(--text);
}
.c-help-row .c-key { flex: none; }
/* Rules go BETWEEN rows, not under every row: a trailing border under the
   last shortcut sat directly above .c-help-foot's own top border and read
   as a double line. */
.c-help-row + .c-help-row { border-top: 1px solid var(--border-soft); }
/* Contact prompt under the shortcut list — the overlay is where someone lands
   when they are stuck, so it is the one place a support link is actually
   looked for. The footer link covers every other page (and mobile, where
   .c-market-controls is hidden and only the "?" key opens this). */
.c-help-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border);
  font-size: .74rem; line-height: 1.45; color: var(--text-soft);
}
.c-help-cta {
  flex: none; padding: 7px 16px; border: 1px solid var(--accent); border-radius: 8px;
  background: transparent; color: var(--accent); text-decoration: none;
  font: 600 .74rem/1.4 var(--font-ui); white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.c-help-cta:hover { background: var(--accent); color: var(--bg); }
@media (max-width: 520px) {
  .c-help-foot { flex-direction: column; align-items: stretch; text-align: center; }
}

@media (max-width: 980px) {
  body.c-ready { overflow: auto; }
  /* Flatten the desktop workspace/dock wrappers into one mobile reading flow. */
  .terminal.c-terminal {
    height: auto; overflow: visible; display: flex; flex-direction: column; gap: 8px;
  }
  .c-marketbar { grid-template-columns: minmax(0, 1fr); }
  .c-market-controls { display: none; }
  .c-workspace, .c-dock { display: contents; }
  #bm-movers { order: 1; }
  #bm-value { order: 2; }
  #homemap { order: 3; }
  /* the flex-column workspace gives #homemap no height — size the map body
     explicitly or it collapses to 0 and the treemap never shows */
  .homemap-area { height: clamp(340px, 90vw, 460px); flex: none; }
  #bm-breadth { order: 4; }
  #bm-wire { order: 5; }
  #col-feed { order: 6; height: 520px; }
  #bm-earnings { order: 7; }
  #bm-insiders { order: 8; }
  #bm-mood { order: 9; }
  #bm-yields { order: 10; }
  #bm-smart { order: 11; }
  #bm-top-funds { order: 12; }
  #bm-leaderboard { order: 13; }
  .c-workspace > *, .c-dock > * { height: auto; min-height: 280px; }
}

/* 960px matches nav.css's cutoff for hiding the nav search — below it the
   marketbar's copy takes over, above it the nav's is the only one. */
@media (max-width: 960px) {
  .c-marketbar { height: auto; padding: 8px 12px 10px; }
  .c-marketbar .search {
    display: block; grid-column: 1; grid-row: 1; width: 100%; max-width: none;
    margin: 0;
  }
}

@media (max-width: 700px) {
  .c-marketbar {
    height: auto; grid-template-columns: 1fr; gap: 6px; padding: 6px 8px;
  }
  .c-marketbar .hero-indices { grid-column: 1; }
  /* Wrap the 5 tiles into a grid (3+2) instead of a horizontal scroll */
  .c-marketbar .hero-indices {
    height: auto; min-height: 0; overflow: visible;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
  .c-marketbar .hidx { min-width: 0; }
}