/* ==========================================================================
   Trade X — MARKET ANALYSIS terminal.

   A Bloomberg-style workstation panel: dense monospace grids, amber section
   headers, diverging red/green heat. The reference is a terminal screenshot,
   so what is borrowed is the INFORMATION DESIGN — panel chrome, the <GO> code
   in each header, tabular figures, a scrolling tape. No Bloomberg mark, name,
   or asset appears anywhere; "<GO>" is generic terminal grammar and the codes
   below are this product's own.

   Tokens are scoped to #view-analysis so the terminal skin cannot leak into
   the rest of the exchange. It is deliberately dark in both site themes — a
   trading terminal reads as an instrument, and inverting it to parchment would
   lose the one thing the density depends on, which is contrast. Under the
   light theme it lifts off pure black so it sits on the page as a panel rather
   than a hole.
   ========================================================================== */
#view-analysis{
  --t-bg:#000; --t-panel:#0a0a0a; --t-panel2:#111; --t-panel3:#161616;
  --t-line:#262626; --t-line2:#363636;
  --t-amber:#ff8c00; --t-amber2:#ffb000; --t-amber-dim:rgba(255,140,0,.14);
  --t-ink:#e8e8e8; --t-ink2:#a9a9a9; --t-ink3:#6f6f6f;
  --t-up:#22c55e; --t-down:#ef4444;
  --t-up-dim:rgba(34,197,94,.14); --t-down-dim:rgba(239,68,68,.14);
  --t-flash:#ffd400;
  --t-heat-pos:30,158,74; --t-heat-neg:209,52,56; --t-heat-mid:28,28,28;
  --t-gap:4px;
  font-family:var(--ff-mono);
  font-size:12px; line-height:1.25;
}
.tx-light #view-analysis{
  --t-bg:#0d1117; --t-panel:#12171f; --t-panel2:#171d27; --t-panel3:#1c232e;
  --t-line:#2a323d; --t-line2:#3a4450; --t-heat-mid:34,40,49;
}

#view-analysis .an-wrap{
  background:var(--t-bg); color:var(--t-ink);
  border:1px solid var(--t-line); border-radius:3px;
  padding:var(--t-gap); display:flex; flex-direction:column; gap:var(--t-gap);
  min-width:0;
}
#view-analysis .num{font-variant-numeric:tabular-nums}
#view-analysis .up{color:var(--t-up)} #view-analysis .down{color:var(--t-down)}
#view-analysis .flat{color:var(--t-ink2)} #view-analysis .muted{color:var(--t-ink3)}

/* ---------- panel chrome ---------- */
#view-analysis .apanel{
  background:var(--t-panel); border:1px solid var(--t-line); border-radius:2px;
  display:flex; flex-direction:column; min-height:0; min-width:0;
}
#view-analysis .ahead{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:5px 8px; border-bottom:1px solid var(--t-line);
  background:linear-gradient(to bottom,var(--t-panel2),var(--t-panel));
  color:var(--t-amber); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  /* the header is one line of chrome; a long translation wraps rather than
     pushing the panel wider than its column */
  flex-wrap:wrap; row-gap:2px;
}
#view-analysis .ahead .code{color:var(--t-ink3);font-weight:500;letter-spacing:.06em;white-space:nowrap}
#view-analysis .abody{padding:6px 8px;overflow:auto;min-height:0;flex:1;
  scrollbar-width:thin;scrollbar-color:var(--t-line2) transparent}
#view-analysis .abody::-webkit-scrollbar{width:8px;height:8px}
#view-analysis .abody::-webkit-scrollbar-thumb{background:var(--t-line2);border-radius:4px}

/* ---------- header strip ---------- */
#view-analysis .ahdr{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; row-gap:8px;
  background:var(--t-panel); border:1px solid var(--t-line); border-radius:2px;
  padding:7px 10px;
}
#view-analysis .abrand{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
#view-analysis .abrand .nm{color:var(--t-amber);font-weight:700;letter-spacing:.12em;font-size:13px}
#view-analysis .abrand .tg{color:var(--t-ink3);font-size:10px;letter-spacing:.06em}
#view-analysis .aclocks{display:flex;gap:12px;flex-wrap:wrap;row-gap:6px}
#view-analysis .aclock{display:flex;flex-direction:column;gap:1px;min-width:74px}
#view-analysis .aclock .tz{color:var(--t-ink3);font-size:9.5px;letter-spacing:.12em}
#view-analysis .aclock .t{font-size:15px;font-weight:600;letter-spacing:.02em}
#view-analysis .aclock .d{color:var(--t-ink3);font-size:9.5px}
#view-analysis .aclock.open .t{color:var(--t-up)}
#view-analysis .aclock.closed .t{color:var(--t-ink2)}
#view-analysis .pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:2px;
  border:1px solid var(--t-line2);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;color:var(--t-ink2)
}
#view-analysis .pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
#view-analysis .pill.live{color:var(--t-up);border-color:rgba(34,197,94,.35);background:var(--t-up-dim)}
#view-analysis .pill.warn{color:var(--t-amber2);border-color:rgba(255,176,0,.35);background:var(--t-amber-dim)}
#view-analysis .pill.dead{color:var(--t-down);border-color:rgba(239,68,68,.35);background:var(--t-down-dim)}
#view-analysis .akpi{display:flex;flex-direction:column;gap:1px}
#view-analysis .akpi .l{color:var(--t-ink3);font-size:9.5px;letter-spacing:.1em}
#view-analysis .akpi .v{font-size:14px;font-weight:600}

/* ---------- tape ---------- */
#view-analysis .atape{
  display:flex; gap:1px; overflow-x:auto; background:var(--t-line);
  border:1px solid var(--t-line); border-radius:2px;
  /* a visible bar is the affordance that more exists — the pair-bar lesson */
  scrollbar-width:thin; scrollbar-color:var(--t-line2) transparent;
}
#view-analysis .atape::-webkit-scrollbar{height:7px}
#view-analysis .atape::-webkit-scrollbar-thumb{background:var(--t-line2)}
#view-analysis .atape-cell{
  flex:0 0 auto;min-width:132px;padding:5px 9px;background:var(--t-panel);
  display:flex;flex-direction:column;gap:2px;transition:background .3s
}
#view-analysis .atape-cell .sym{color:var(--t-ink2);font-size:10px;letter-spacing:.09em}
#view-analysis .atape-cell .px{font-size:13px;font-weight:600}
#view-analysis .atape-cell .chg{font-size:10.5px}
#view-analysis .atape-cell.tick-up{background:var(--t-up-dim)}
#view-analysis .atape-cell.tick-down{background:var(--t-down-dim)}

/* ---------- main grid ---------- */
/* Fixed row heights with the overflow inside each panel — the defining habit
   of a terminal. Without them the row stretches to the tallest panel and the
   short ones sit in a field of black, which is what a stretched grid does and
   a workstation never does. */
#view-analysis .agrid{
  display:grid; gap:var(--t-gap);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
  grid-auto-rows:minmax(0,var(--t-row,430px));
}
#view-analysis .agrid2{
  display:grid; gap:var(--t-gap);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-auto-rows:minmax(0,var(--t-row2,330px));
}
@media(max-width:1180px){
  #view-analysis .agrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:860px){
  #view-analysis .agrid,#view-analysis .agrid2{grid-template-columns:minmax(0,1fr)}
  /* On a phone a fixed row would mean scrolling a panel inside a scrolling
     page — two nested scrolls fighting a thumb. Panels take their own height
     there and the page scrolls once. */
  #view-analysis .agrid{--t-row:auto}
  #view-analysis .agrid2{--t-row2:auto}
  #view-analysis .abody{overflow:visible}
  #view-analysis{font-size:11.5px}
}

/* ---------- watchlist ---------- */
#view-analysis .wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:1px;background:var(--t-line)}
#view-analysis .wcell{background:var(--t-panel);padding:5px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
#view-analysis .wcell .r1{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
#view-analysis .wcell .sy{font-weight:700;font-size:11.5px;letter-spacing:.05em}
#view-analysis .wcell .pc{font-size:11px;font-weight:600}
#view-analysis .wcell .r2{display:flex;justify-content:space-between;gap:6px;align-items:baseline;min-width:0}
#view-analysis .wcell .px{font-size:12px}
#view-analysis .wcell .nm{color:var(--t-ink3);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#view-analysis .wcell canvas{display:block;width:100%;height:26px}

/* ---------- heatmap ---------- */
#view-analysis .hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(116px,100%),1fr));gap:1px;background:var(--t-line)}
#view-analysis .hcell{padding:6px 7px;display:flex;flex-direction:column;gap:3px;min-width:0;color:#fff}
#view-analysis .hcell .t{display:flex;justify-content:space-between;gap:5px;font-size:9.5px;opacity:.85}
#view-analysis .hcell .v{font-size:15px;font-weight:700}
#view-analysis .hcell .s{display:flex;justify-content:space-between;gap:5px;font-size:9px;opacity:.8;min-width:0}
#view-analysis .hcell .s .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#view-analysis .hleg{background:var(--t-panel3);color:var(--t-ink2);justify-content:space-between}
#view-analysis .hleg .bar{height:8px;border-radius:1px;margin:3px 0;
  background:linear-gradient(to right,rgb(209,52,56),rgb(28,28,28),rgb(30,158,74))}
#view-analysis .hleg .sc{display:flex;justify-content:space-between;font-size:9px}

/* ---------- breadth ---------- */
#view-analysis .bstat{display:flex;flex-direction:column;gap:3px;margin-bottom:11px}
#view-analysis .bstat .l{color:var(--t-ink3);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase}
#view-analysis .bstat .v{font-size:19px;font-weight:700}
#view-analysis .bstat .s{color:var(--t-ink2);font-size:10px}
#view-analysis .adbar{display:flex;height:7px;border-radius:1px;overflow:hidden;background:var(--t-panel3);margin-top:3px}
#view-analysis .adbar .a{background:var(--t-up)} #view-analysis .adbar .d{background:var(--t-down)}
#view-analysis .adbar .u{background:var(--t-line2)}
#view-analysis .brow2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#view-analysis .brow2 > *{min-width:0}
#view-analysis .mrow{display:grid;grid-template-columns:52px minmax(0,1fr) 52px 52px;gap:7px;align-items:center;padding:2.5px 0;font-size:10.5px}
#view-analysis .mrow .nm{color:var(--t-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-analysis .track{position:relative;height:7px;background:var(--t-panel3);border-radius:1px}
#view-analysis .track::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--t-line2)}
#view-analysis .track .fill{position:absolute;top:0;bottom:0;border-radius:1px}
#view-analysis .track .fill.up{background:var(--t-up)} #view-analysis .track .fill.down{background:var(--t-down)}
#view-analysis .mhead{display:grid;grid-template-columns:52px minmax(0,1fr) 52px 52px;gap:7px;
  color:var(--t-ink3);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid var(--t-line);margin-bottom:5px}
#view-analysis .mhead span:nth-child(3),#view-analysis .mhead span:nth-child(4),
#view-analysis .mrow .pc{text-align:right}
#view-analysis .diverge{display:flex;gap:12px;flex-wrap:wrap;row-gap:4px;margin-top:9px;padding-top:7px;
  border-top:1px solid var(--t-line);font-size:9.5px;color:var(--t-ink3);letter-spacing:.08em;text-transform:uppercase}
#view-analysis .diverge b{color:var(--t-ink);font-size:11px;letter-spacing:0}

/* ---------- signals ---------- */
#view-analysis .sigbar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px}
#view-analysis .sigbar button{
  font:inherit;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--t-line2);border-radius:2px;
  background:none;color:var(--t-ink3);cursor:pointer}
#view-analysis .sigbar button.on{color:var(--t-amber);border-color:var(--t-amber);background:var(--t-amber-dim)}
#view-analysis .sig{display:grid;grid-template-columns:44px 16px minmax(0,1fr);gap:7px;
  padding:5px 0;border-bottom:1px solid var(--t-line);font-size:10.5px}
#view-analysis .sig:last-child{border-bottom:0}
#view-analysis .sig .tm{color:var(--t-ink3);font-size:9.5px}
#view-analysis .sig .ar{font-size:11px}
#view-analysis .sig .bd{min-width:0}
#view-analysis .sig .hl{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;row-gap:2px}
#view-analysis .sig .sy{font-weight:700;letter-spacing:.04em}
#view-analysis .sig .tx{color:var(--t-ink2);min-width:0}
#view-analysis .sig .why{color:var(--t-ink3);font-size:9px;margin-top:2px;letter-spacing:.02em}
#view-analysis .sev{font-size:8.5px;letter-spacing:.1em;padding:1px 5px;border-radius:1px;border:1px solid currentColor}
#view-analysis .sev.high{color:var(--t-amber)} #view-analysis .sev.med{color:var(--t-amber2)}
#view-analysis .sev.low{color:var(--t-ink3)}

/* ---------- microstructure ---------- */
#view-analysis .msrow{display:flex;justify-content:space-between;gap:8px;padding:3.5px 0;
  border-bottom:1px solid var(--t-line);font-size:10.5px}
#view-analysis .msrow:last-child{border-bottom:0}
#view-analysis .msrow .l{color:var(--t-ink3);letter-spacing:.04em}
#view-analysis .imb{height:9px;display:flex;border-radius:1px;overflow:hidden;background:var(--t-panel3);margin:6px 0 3px}
#view-analysis .imb .b{background:var(--t-up)} #view-analysis .imb .a{background:var(--t-down)}

/* ---------- honest empty states ---------- */
#view-analysis .aempty{padding:22px 10px;text-align:center;color:var(--t-ink3);font-size:10.5px}
#view-analysis .aempty.failed{color:var(--t-down)}
#view-analysis .aempty .sub{color:var(--t-ink3);font-size:9.5px;margin-top:4px;line-height:1.5}
#view-analysis .anote{color:var(--t-ink3);font-size:9px;letter-spacing:.02em;margin-top:6px;line-height:1.5}

/* ==========================================================================
   Responsive overrides — LAST in the file on purpose.

   These lived next to the grid definitions near the top and did nothing: a
   media query adds no specificity, so the base .brow2 and .mrow rules defined
   further down won the tie on source order and the breadth panel kept its two
   119px columns at 320px wide. Overrides have to sit after what they override.
   ========================================================================== */
@media(max-width:860px){
  /* Two columns of 119px cannot hold a row whose fixed tracks need 177px:
     minmax(0,1fr) lets the COLUMN shrink but cannot shrink a 52px track
     inside it, so the row pushed 22px onto the page. */
  #view-analysis .brow2{grid-template-columns:minmax(0,1fr)}
  #view-analysis .mrow,#view-analysis .mhead{grid-template-columns:46px minmax(0,1fr) 46px 42px;gap:5px}
}