/* EQUITY TERMINAL page — compact chrome (2026-08-19, Manu: "even in terminal tab also fonts are
   big, fix them").
   Loaded ONLY by index.html, so the ORB pages (intraday*.html) keep their original sizing — they
   share style.css but not this file. Same treatment already applied to screener.css.
   The aim is to give the stock list and the chart the vertical space the pulse header was taking. */

body{font-size:12px}

/* ---- header ---- */
header{padding:5px 12px;gap:10px}
.brand{font-size:13px;letter-spacing:1.4px}
header button{padding:4px 9px;font-size:11px}
.badge{padding:2px 8px;font-size:11px}
.capwrap .lbl{font-size:9px}
#capital{padding:4px 7px;width:98px}
#search{padding:4px 8px;width:200px}

/* ---- pulse strip: the big numbers were the worst offender ---- */
.cell{padding:5px 12px}
.lbl{font-size:9px;letter-spacing:1.4px}
.big{font-size:16px}
.sub{font-size:10px;line-height:1.4}

/* ---- calendar cell ---- */
.calhd button{font-size:11px}
.cdow{font-size:7.5px}
.cday{font-size:9px;padding:1px 0}
.calft{font-size:8px}

/* ---- tabs + list ---- */
#tabs button,#subtabs button{padding:6px 4px;font-size:10.5px}
#subtabs button{padding:5px 4px;font-size:9.5px}
.row{padding:5px 10px;gap:8px}
.row .sym{width:104px}
.row .chg{font-size:11px}
.row .rs{font-size:10px}

/* ---- detail pane: more chart, less scrolling ---- */
#chart{height:38vh;min-height:260px}

/* ---- CATALYST: directional lean + the tap-to-open explanation (2026-08-19) ---- */
.cbias{width:14px;text-align:center;flex-shrink:0;font-size:11px}
.cbias.up{color:var(--green)}
.cbias.dn{color:var(--red)}
button.cwhy{border:1px solid var(--line);background:transparent;color:var(--dim);
  padding:0 6px;font-size:11px;line-height:1.5;letter-spacing:0;flex-shrink:0;margin-left:auto}
button.cwhy:hover{color:var(--amber);border-color:var(--amber)}
.cexp{padding:8px 12px 10px 30px;border-bottom:1px solid #14181e;background:#0b0e13;
  font-size:10.5px;line-height:1.6;display:flex;flex-direction:column;gap:4px}
.cexp b{color:var(--amber2);font-weight:normal}
.cexp-h{color:var(--txt);padding-bottom:4px;border-bottom:1px solid #14181e;margin-bottom:2px}
.cexp-b{color:var(--txt)}
.cexp-t{color:var(--blue)}
.cexp-f{padding-top:4px;border-top:1px solid #14181e;margin-top:2px;font-size:9.5px}
.cexp a{color:var(--amber2)}

/* ============================ MOBILE (2026-08-19) ============================
   The desktop layout is a fixed-height flex column with a 460px sidebar beside the detail pane,
   and body{overflow:hidden} — on a 390px phone that puts the chart and the why-panel off-screen
   with no way to scroll to them. Below 820px the whole thing becomes one scrollable column:
   list on top (capped so it can't push the detail off the page), detail beneath it.
   app.js scrolls the detail into view when a row is tapped, so it behaves like master/detail
   without needing a router. */
@media (max-width: 820px) {
  html,body{height:auto}
  body{overflow-y:auto;overflow-x:hidden;font-size:12px}
  #scanlines{display:none}          /* the CRT overlay costs paint budget and reads as blur on a phone */

  /* Header: 3 wrapped rows measured at 127px. Brand shares its row with the capital box, search
     gets its own full-width row, and the buttons sit beside the capital box. */
  header{flex-wrap:wrap;gap:5px 8px;padding:5px 10px}
  .brand{font-size:11px;letter-spacing:1px;flex:1 1 auto}
  #scstoretxt{flex:1 1 100%;max-width:none;font-size:9px}
  .searchwrap{flex:1 1 100%;order:10}
  #search{width:100%}
  .capwrap{flex:0 0 auto}
  #capital{width:84px}
  header button{padding:3px 7px;font-size:10px}
  header .spacer{display:none}

  /* Pulse strip. Measured at 458px on a 375x812 phone — more than half the screen before a single
     stock was visible. The three scalar tiles now share one row, the calendar is dropped, and
     Stage-0's second prose line goes: it repeats what the dial and the sizing line already say.
     Net ~458px -> ~190px. The calendar is still there on desktop, where it belongs. */
  #pulse{flex-wrap:wrap}
  .cell{flex:1 1 30%;min-width:0;padding:5px 8px}     /* FROM ATH / ADVANCING / STAGE-2: one row */
  .cell.wide{flex:1 1 100%;padding:6px 10px}
  .cell.cal{display:none}
  #s0staging{display:none}
  .big{font-size:15px}
  .cell:not(.wide) .big{font-size:14px}

  /* stack the two panes */
  main{flex-direction:column;min-height:0}
  #left{width:100%;border-right:0;border-bottom:1px solid var(--line)}
  #stocklist{max-height:46vh}       /* keeps the list scrollable without burying the detail */
  #detail{width:100%;min-width:0}

  #stockhead{flex-wrap:wrap;gap:6px}
  #stockhead .spacer{display:none}
  #chart{height:38vh;min-height:200px}
  #lower{flex-direction:column}
  #metrics{grid-template-columns:repeat(2,1fr)}
  #tabs button,#subtabs button{min-width:0;flex:1 1 auto}
  #subtabs{flex-wrap:wrap}          /* 3 tier + 4 state buttons will not fit one 375px row */
  .row{padding:7px 10px}            /* back up a little: 5px rows are hard to hit with a thumb */
  /* the "?" measured 20x19 — too small for a thumb, and it is the only way to read the
     explanation on a phone since there is no hover */
  button.cwhy{padding:5px 13px;font-size:13px}
  .cexp{padding:8px 12px 10px 14px;font-size:11px}
  .row .sym{width:92px}
  footer{padding:8px 10px;font-size:9px}
}