/* radius.css — Radius brand · light
 *
 * Radius brand tokens from radiustech.xyz (Webflow: radius-staging.webflow.shared).
 * Palette names are the brand's own: Executive Deep, Foundation Stone, Prosperous Red.
 * Brand mono is Inconsolata; brand body/heading is Instrument Sans. Layout, spacing
 * and every selector below are unchanged from the terminal build — only tokens move.
 */
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Instrument+Sans:wght@400;500;600;700&display=swap");

:root {
  /* Frost White ground, Foundation Stone surfaces */
  --bg: #f8f9fb;
  /* Prosperous Red, darkened for contrast on light */
  --amber: #c23624; --amber-brt: #982417; --amber-dim: #5d5b59;
  /* Executive Deep text on Foundation Stone neutrals */
  --white: #1f1f25; --dim: #5d5b59; --faint: #74726f;
  --green: #276a42; --red: #c23624; --cyan: #4c4c51;
  --line: #e8e4e1; --line-2: #ded9d5; --hdr: #ede9e7;
  --mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Instrument Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: #f8f9fb; }
body {
  background: var(--bg); color: var(--white); font-family: var(--mono);
  font-size: 12.5px; line-height: 1.45; letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding: 0 10px 8px;
}
#term { max-width: 1280px; margin: 0 auto; min-width: 0; }
.num { font-variant-numeric: tabular-nums; }
.amber { color: var(--amber); } .grn { color: var(--green); } .red { color: var(--red); }
.dim { color: var(--dim); } .wht { color: var(--white); } .cy { color: var(--cyan); }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--amber-brt); }
a:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }

/* ---- masthead ----
 * Sits above the command bar on every page. Executive Deep ground so the house
 * name reads as the roof over IMX and PSI rather than as another tab. The amber
 * tick echoes the command-bar cursor, static because only one thing on a
 * terminal should blink. */
.brandbar {
  display: flex; align-items: center; gap: 11px; height: 34px;
  background: var(--white); padding: 0 12px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}
.brandbar .tick { width: 9px; height: 16px; background: var(--amber); flex: 0 0 auto; }
.brandbar .wm { color: #b9b4b0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brandbar .wm b { color: #f8f9fb; font-weight: 700; }

/* ---- command bar ---- */
.cmdbar {
  display: flex; align-items: center; gap: 14px; height: 30px;
  background: var(--hdr); border-bottom: 1px solid var(--amber-dim);
  padding: 0 12px; font-size: 12px; white-space: nowrap; overflow: hidden;
}
.cmdbar .go { color: var(--amber); font-weight: 700; letter-spacing: 0.02em; }
.cmdbar .go b { color: var(--cyan); }
.cmdbar .sec { color: var(--amber-brt); font-weight: 700; letter-spacing: 0.08em;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Index tabs. They sit at the two ends of the command bar and hold the SAME
 * position on every page — only [aria-current] moves — so the nav never shifts
 * under the cursor. flex:0 0 auto keeps them full width on narrow screens; the
 * .sec label is the only thing allowed to ellipsize. */
.cmdbar .tab {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 30px; padding: 0 12px; text-decoration: none;
  color: var(--dim); font-weight: 700; letter-spacing: 0.02em;
}
.cmdbar .tab:first-child { margin-left: -12px; border-right: 1px solid var(--amber-dim); }
.cmdbar .tab:last-child { margin-right: -12px; border-left: 1px solid var(--amber-dim); }
.cmdbar .tab:hover { color: var(--amber-brt); background: var(--line-2); }
.cmdbar .tab[aria-current="page"] {
  color: var(--amber); background: var(--bg); box-shadow: inset 0 -2px 0 var(--amber);
}
.cmdbar .tab[aria-current="page"] b { color: var(--cyan); }
.cmdbar .cur { display: inline-block; width: 8px; height: 15px; background: var(--amber);
  animation: blink 1.05s step-end infinite; vertical-align: -2px; }
@keyframes blink { 50% { opacity: 0; } }
.cmdbar .sp { margin-left: auto; }
.cmdbar .clock { color: var(--white); letter-spacing: 0.04em; }
.cmdbar .live { color: var(--green); font-weight: 700; letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 6px; }
.blip { width: 7px; height: 7px; background: var(--green); border-radius: 50%;
  display: inline-block; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
/* The bar is nowrap + overflow:hidden, so a narrow screen clips from the right —
 * exactly where the PSI tab sits. Navigation outranks chrome: drop the clock,
 * section label and cursor so both tabs survive to the smallest width. Must stay
 * BELOW the rules it overrides — same specificity, so source order decides. */
@media (max-width: 720px) { .cmdbar .clock, .cmdbar .sec, .cmdbar .cur { display: none; } }

.subbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--dim);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.subbar b { color: var(--amber); font-weight: 600; }

/* ---- summary fields (the 4-up stat strip) ---- */
.summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-bottom: 1px solid var(--amber-dim); }
.fld { padding: 14px 14px 13px; border-right: 1px solid var(--line); min-width: 0; }
.fld:last-child { border-right: 0; }
.fld .l { color: var(--amber); font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; }
.fld .v { color: var(--white); font-size: clamp(22px, 3vw, 30px); font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.05; margin-top: 9px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fld .v .u { font-size: 0.5em; color: var(--dim); font-weight: 500; margin-left: 1px; }
.fld .d { font-size: 11.5px; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- windows (the bordered panels) ---- */
.cols { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); gap: 0;
  border-bottom: 1px solid var(--line); }
.cols .win:first-child { border-right: 1px solid var(--line); }
.win { min-width: 0; }
.win-h { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--hdr); border-bottom: 1px solid var(--line-2); padding: 6px 12px;
  color: var(--amber); font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.win-h .src { color: var(--amber-dim); font-weight: 500; letter-spacing: 0.06em; font-size: 10.5px; white-space: nowrap; }
.win-b { padding: 12px 12px 14px; min-width: 0; }
.blk { margin-top: 15px; }
.blk:first-child { margin-top: 0; }
.caption { color: var(--dim); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 9px; border-bottom: 1px dotted var(--line-2); padding-bottom: 6px; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { color: var(--amber); font-weight: 600; text-align: right; padding: 3px 0; font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); }
th.l, td.l { text-align: left; }
td { padding: 4px 0; color: var(--white); vertical-align: baseline; }
td.sym { color: var(--amber-brt); font-weight: 600; }
td.nm { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
td.rt { text-align: right; }
tr + tr td { border-top: 1px solid #e8e4e1; }
.barcell { position: relative; }
.barwrap { display: flex; align-items: center; gap: 8px; }
.minibar { height: 7px; background: var(--amber); min-width: 2px; }
.minibar.g { background: var(--green); }

/* ---- inline stat row / cells ---- */
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
.cell { background: var(--bg); padding: 9px 11px; min-width: 0; }
.cell .l { color: var(--amber); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.cell .n { color: var(--white); font-size: 16px; font-weight: 600; margin-top: 5px; }

/* ---- labeled component/factor bars (shared by PSI components + RSR factors) ---- */
.barcomp { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 14px; }
.barrow { display: grid; grid-template-columns: 210px 1fr 62px; align-items: center; gap: 10px; }
.barrow .cl { color: var(--white); font-size: 11.5px; }
.barrow .cw { color: var(--faint); font-size: 10px; }
.bar { height: 9px; background: #ece9e6; border: 1px solid var(--line-2); position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; display: block; }
.barrow .cv { text-align: right; font-size: 11.5px; }
.barobs { color: var(--dim); font-size: 10.5px; margin-top: 2px; }

/* ---- ticker ---- */
.ticker { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: #f1edec; margin-top: 0; }
.ticker-track { display: inline-block; padding: 6px 0; font-size: 11.5px; letter-spacing: 0.03em;
  animation: marq 46s linear infinite; will-change: transform; }
.ticker-track span { margin: 0 26px; color: var(--dim); }
.ticker-track b { color: var(--amber); font-weight: 600; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- function-key bar (footer nav) ---- */
.fnbar { display: flex; flex-wrap: wrap; gap: 20px; padding: 8px 12px; font-size: 11px;
  color: var(--dim); letter-spacing: 0.04em; }
.fnbar b { color: var(--cyan); } .fnbar .k { color: var(--amber); }

/* ---- shared responsive + motion ---- */
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .blip, .cmdbar .cur { animation: none; } }
@media (max-width: 760px) {
  .summary { grid-template-columns: repeat(2, 1fr); }
  .fld { border-right: 0; border-bottom: 1px solid var(--line); }
  .cols { grid-template-columns: 1fr; }
  .cols .win:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
}

  /* ============ shared data-viz components (used by IMX + PSI panels) ============ */
  /* ---------- IMX hero (page-specific; shared system in radius.css) ---------- */
  .imx { border-bottom: 1px solid var(--amber-dim); padding: 22px 0 20px; }
  .imx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .imx-name { color: var(--amber); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
  .imx-badge { color: var(--green); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    border: 1px solid var(--line-2); padding: 3px 9px; white-space: nowrap; }
  .imx-integ { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; padding-top: 10px;
    border-top: 1px dotted var(--line-2); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
  .imx-integ b { color: var(--amber); font-weight: 600; }
  .imx-row { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
  .imx-level { font-size: clamp(46px, 8vw, 76px); font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; color: var(--white); }
  .imx-chg { font-size: 16px; white-space: nowrap; }
  .imx-meta { color: var(--dim); font-size: 12px; white-space: nowrap; }
  .imx-meta b { color: var(--amber-brt); font-weight: 600; }
  .imx-chart { margin-top: 16px; border: 1px solid var(--line-2); background: #ffffff; }
  .imx-note { color: var(--amber-dim); font-size: 10.5px; margin-top: 9px; line-height: 1.55; max-width: 96ch; }

  /* ---- flow grid / spark / xref (IMX x402 flow) ---- */
  .flowgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line);
    border: 1px solid var(--line); }
  .flowgrid .cell .n.hot { color: var(--amber-brt); }
  @media (max-width: 760px) { .flowgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .spark { border: 1px solid var(--line-2); background: #ffffff; padding: 7px 5px 3px; }
  .sparklab { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.06em;
    color: var(--dim); margin: 5px 0 12px; text-transform: uppercase; }
  .xref { margin-top: 10px; font-size: 11.5px; padding-top: 9px; border-top: 1px dotted var(--line-2); }

  /* ---- blotter ---- */
  .blot { list-style: none; }
  .blot li { display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr) 66px; gap: 12px;
    align-items: baseline; padding: 4px 0; border-top: 1px solid #e8e4e1; }
  .blot li:first-child { border-top: 0; }
  .blot .h { color: var(--cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .blot .d { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .blot .p { color: var(--green); text-align: right; }

  /* ---- crawl ---- */
  .crawlwrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; }
  .bignum { font-size: clamp(40px, 7vw, 60px); font-weight: 700; color: var(--amber-brt);
    line-height: 1; letter-spacing: -0.02em; }
  .bignum .u { font-size: 0.34em; color: var(--dim); }
  .meter { height: 16px; display: flex; border: 1px solid var(--line-2); margin-top: 16px; background: #ece9e6; }
  .meter .bot { background: var(--amber); }
  .meter .hum { background: #d0cbc9; }
  .meterlab { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; }
  .note { color: var(--amber-dim); font-size: 11px; margin-top: 16px; line-height: 1.5;
    border-left: 2px solid var(--line-2); padding-left: 10px; }

  /* ---- markets / movers ---- */
  .mkt { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; }
  .mcol { min-width: 0; padding: 12px 12px 14px; }
  .mcol:first-child { border-right: 1px solid var(--line); }
  .tag { color: var(--amber-dim); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
  .stalebadge { color: var(--red); border: 1px solid var(--line-2); padding: 2px 7px; font-size: 9.5px;
    letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
  .mv-up { color: var(--green); } .mv-dn { color: var(--red); } .mv-fl { color: var(--faint); }
  td.cat { color: var(--amber-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; text-align: right; }

  /* ---- crawl purpose ---- */
  .pbar { display: flex; height: 16px; border: 1px solid var(--line-2); background: #ece9e6; margin: 4px 0 9px; overflow: hidden; }
  .pbar i { display: block; height: 100%; }
  .pseg-t { background: var(--amber); } .pseg-m { background: var(--amber-dim); }
  .pseg-s { background: var(--cyan); } .pseg-u { background: #d0cbc9; }
  .pleg { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 10.5px; color: var(--dim); }

  /* ---- IMX-specific responsive (shared responsive lives in radius.css) ---- */
  @media (max-width: 760px) {
    .crawlwrap { grid-template-columns: 1fr; gap: 18px; }
    .blot li { grid-template-columns: minmax(0,1fr) 60px; }
    .blot .d { display: none; }
  }

/* ---- brand type layer: Instrument Sans on the label/heading tier ---- */
.cmdbar .go, .cmdbar .tab, .cmdbar .sec, .cmdbar .live, .subbar,
.win-h, .fld .l, .cell .l, .caption, th, .tag, .imx-name, .imx-badge,
.imx-integ, .stalebadge, .sparklab, .fnbar {
  font-family: var(--sans);
}
.win-h, .fld .l, .cell .l, .caption, th { font-weight: 600; }
.imx-name { font-weight: 700; letter-spacing: 0.18em; }
/* Numerals stay monospace + tabular — data alignment is non-negotiable. */
.num, .fld .v, .imx-level, .bignum, .cell .n, td, .imx-chg { font-family: var(--mono); }