/* ══════════════════════════════════════════════════════════════════════════
   METRA — brand & interface system  ·  v4 "pixel"
   ──────────────────────────────────────────────────────────────────────────
   The mark is drawn on a pixel grid, in white, on black. The interface is the
   same object at a different size, so the rules follow from the mark:

     · Black is the canvas, not a dark grey. #000 exactly, the way the logo is.
     · The only colour on screen is data. Up is green, down is red; everything
       else is white, or one of four greys between white and black. Even the
       "you are here" mark is white, because the mark has no accent colour to
       borrow. Links are therefore underlined rather than tinted.
     · Nothing is rounded. A pixel has corners; so does every panel, control,
       input and badge. Radius tokens are 0 and stay 0.
     · Everything sits on a 4px grid, because that is the grid the mark is on.
     · Display type, labels and codes are set in Silkscreen, a bitmap face.
       Running prose stays IBM Plex Sans: a paragraph of bitmap type at 14px
       is a poster, not something anyone reads.
     · No glow, no gradient, no glass, no shadow that pretends to be light.
       Depth is a hairline and a lighter grey, nothing else.

   Loaded after mt-design.css on every page. Visual only.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&family=Pixelify+Sans:wght@400..700&family=Silkscreen:wght@400;700&display=swap');

/* ── tokens · Pixel (black) ───────────────────────────────────────────────── */
:root {
  --s-canvas:   #000000;
  --s-sunken:   #000000;
  --s-raised:   #0B0B0B;
  --s-raised-2: #161616;
  --line:       #262626;
  --line-2:     #1A1A1A;
  --line-solid: #3D3D3D;

  --ink:   #FFFFFF;
  --ink-2: #C9C9C9;
  --ink-3: #AEAEAE;   /* secondary text: a step lighter so small grey type is not a strain */
  --ink-4: #999999;

  /* white is the accent: the mark has no second colour to borrow */
  --accent:        #FFFFFF;
  --accent-bright: #FFFFFF;
  --accent-text:   #FFFFFF;
  --accent-ink:    #000000;
  --accent-wash:   rgba(255,255,255,.07);
  --accent-wash-2: rgba(255,255,255,.13);
  --accent-ring:   rgba(255,255,255,.65);
  --live:          #2BE08A;
  --live-ink:      #000000;
  --primary:       #FFFFFF;
  --primary-ink:   #000000;

  --up: #2BE08A;  --down: #FF4D4D;  --info: #FFFFFF;  --warn: #FFB020;
  --up-wash: rgba(43,224,138,.12);  --down-wash: rgba(255,77,77,.12);

  --sans:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Pixelify Sans', 'IBM Plex Sans', monospace;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Display type: has true lowercase, so the wordmark's mixed case survives */
  --pixel: 'Pixelify Sans', 'IBM Plex Sans', monospace;
  /* Small labels: uniform caps on the grid, which is an asset at 9-10px */
  --pixel-label: 'Silkscreen', 'IBM Plex Mono', monospace;

  /* a pixel has corners */
  --r-card: 0px;  --r-ctl: 0px;  --r-pill: 0px;
  --sh-1: none;
  --sh-2: none;
  --sh-3: 0 0 0 1px var(--line-solid);
  --e: steps(1, end);
  --ease: cubic-bezier(.2,0,0,1);
  --px: 4px;
  --header-h: 52px;
  color-scheme: dark;
}

/* ── tokens · Paper (light) ───────────────────────────────────────────────── */


/* ══ foundation ═════════════════════════════════════════════════════════════ */
html, body {
  background: var(--s-canvas) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* the interface is one face; ~200 hard-coded 'Fira Code' declarations retire here */
body, body *:not(svg):not(svg *) { font-family: var(--sans) !important; }
:is(code, kbd, samp, pre, .mono, .num, .v, .price, .md-price, [class*="price"], [class*="-val"],
  [class*="value"], [class*="-num"], [class*="pct"], [class*="chg"], .time, .hs-meta, .hs-evt-hhmm,
  .mx-mod-code, .sym-chain, input[type="number"], td:not(:first-child), .stat .v, .md-pivot-val,
  .hs-regime-badge, #md-statusbar *) {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em !important;
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent-bright) !important; outline-offset: 2px; }
/* programmatic focus targets (skip-link destination, dialog return) don't need a ring */
[tabindex="-1"]:focus-visible { outline: none !important; }
* { scrollbar-color: var(--line-solid) transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-solid); border: 3px solid transparent; background-clip: content-box; border-radius: 0; }

/* Sentence case is the brand voice: no CSS-forced capitals anywhere. Text that
   is written uppercase (tickers, codes) keeps its letters. */
body *:not(.mt-sr-only) { text-transform: none !important; }
/* and no tracked-out lettering: that spacing was the old terminal's signature */
body *:not(svg):not(svg *) { letter-spacing: normal !important; }

/* Retire the tracked-out capital labels. Data that is uppercase (tickers)
   stays uppercase because it is written that way. */
:is(.k, .lbl, .stat .k, .md-panel-header, .panel-header, .eyebrow, .kicker, thead th, .hs-title, .hs-btn,
  .cardHead .h, .md-result-header span, .dayHead, .chip, .pill, .md-tab, .md-main-tab, .hs-movers-tab,
  .hs-gauge-lbl, .brk-tag, .section-title, .card-title, [class*="-label"], [class*="-lbl"], [class*="-hdr"] span,
  .md-btn-main, .btn, .md-btn, .seg button, .nav button, .scope span, .step-title, .pal-grp) {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

h1, h2, h3 { letter-spacing: -.01em; }

/* ══ shell ══════════════════════════════════════════════════════════════════ */
body.mx-shell {
  padding: var(--header-h) 0 0 0 !important;
  overflow-x: hidden;
}
/* retired v2 chrome, in case a cached page still renders it */
.mt-nav, .mt-top { display: none !important; }

.mx-header {
  position: fixed; inset: 0 0 auto 0; z-index: 950;
  background: color-mix(in srgb, var(--s-canvas) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid var(--line);
}
.mx-bar {
  height: var(--header-h); display: flex; align-items: center; gap: 28px;
  padding: 0 24px; max-width: 1680px; margin: 0 auto;
}
.mx-skip {
  position: absolute; left: 12px; top: -80px; z-index: 5; padding: 10px 14px; border-radius: 0;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.mx-skip:focus { top: 10px; }

.mx-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.mx-logo-mark { width: 30px; height: auto; }
.mx-logo-mark rect { fill: var(--accent); }
.mx-logo-mark path { fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mx-logo-word { font-family: var(--serif) !important; font-size: 27px; line-height: 1; letter-spacing: -.01em; }

.mx-domains ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mx-domain {
  position: relative; height: 36px; padding: 0 12px; border: 0 !important; border-radius: 0;
  background: transparent !important; color: var(--ink-2) !important; font-size: 14px !important; font-weight: 500 !important;
  cursor: pointer; min-height: 0 !important;
}
.mx-domain:hover, .mx-domain[aria-expanded="true"] { background: var(--s-raised-2) !important; color: var(--ink) !important; }
.mx-domain.is-current { color: var(--ink) !important; }
.mx-domain.is-current::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -12px; height: 2px; border-radius: 0; background: var(--accent);
}

.mx-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mx-search {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; min-width: 260px; padding: 0 8px 0 12px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--s-raised) !important;
  color: var(--ink-3) !important; font-size: 13.5px !important; font-weight: 400 !important; cursor: pointer; box-shadow: var(--sh-1);
}
.mx-search:hover { border-color: var(--line-solid) !important; color: var(--ink-2) !important; }
.mx-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mx-search-label { flex: 1; text-align: left; }
.mx-search kbd, .mx-finder kbd {
  font-size: 11px; padding: 2px 6px; border-radius: 0; border: 1px solid var(--line); background: var(--s-sunken); color: var(--ink-3);
}
.mx-icon {
  width: 38px; height: 38px; min-height: 0 !important; padding: 0 !important; display: inline-grid; place-items: center;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--s-raised) !important; color: var(--ink-2) !important;
}
.mx-icon:hover { color: var(--ink) !important; border-color: var(--line-solid) !important; }
.mx-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mx-icon svg .fill { fill: currentColor; stroke: none; }
.mx-menu { display: none !important; }

/* — mega menu — */
.mx-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--s-raised); border-bottom: 1px solid var(--line); box-shadow: var(--sh-3);
  max-height: calc(100dvh - var(--header-h)); overflow: auto;
  animation: mx-drop .22s var(--e) both;
}
@keyframes mx-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mx-mega-inner { display: grid; grid-template-columns: 260px 1fr; gap: 40px; max-width: 1680px; margin: 0 auto; padding: 28px 24px 34px; }
.mx-mega-kicker { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-3); }
.mx-mega-title { margin: 0 0 8px; font-family: var(--serif) !important; font-size: 40px; line-height: 1; color: var(--ink); }
.mx-mega-blurb { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.mx-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 0;
  background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: 13.5px;
}
.mx-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.mx-mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 28px; align-content: start; }
.mx-col-title { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); display: flex; gap: 6px; }
.mx-col-title span { color: var(--ink-4); font-weight: 400; }
.mx-mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mx-mod-row { position: relative; }
.mx-mod {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 40px 7px 10px; border-radius: 0;
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.mx-mod:hover { background: var(--s-raised-2); }
.mx-mod.is-active { background: var(--accent-wash); color: var(--accent-text); font-weight: 600; }
.mx-mod-name { flex: 1; min-width: 0; }
.mx-mod-code { font-size: 10.5px; color: var(--ink-4); padding: 1px 5px; border-radius: 0; border: 1px solid var(--line); }
.mx-mod-row .mx-fav { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.mx-fav {
  width: 28px; height: 28px; min-height: 0 !important; padding: 0 !important; display: inline-grid; place-items: center;
  border: 0 !important; background: transparent !important; color: var(--ink-4) !important; border-radius: 0 !important; opacity: .0;
}
.mx-mod-row:hover .mx-fav, .mx-fav:focus-visible, .mx-fav.on { opacity: 1; }
.mx-fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.mx-fav.on { color: var(--warn) !important; }
.mx-fav.on svg { fill: currentColor; }
.mx-empty { margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; max-width: 34ch; }
@media (hover: none) { .mx-fav { opacity: 1; } }
.mx-mega-open body::after {
  content: ''; position: fixed; inset: var(--header-h) 0 0 0; z-index: 940;
  background: color-mix(in srgb, var(--s-canvas) 55%, transparent); backdrop-filter: blur(2px);
}

/* — page header — */
.mx-pagebar {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding: 18px 24px 16px; max-width: 1680px; margin: 0 auto; width: 100%; box-sizing: border-box;
}
.mx-pagebar-main { min-width: 0; flex: 1; }
.mx-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 13px; color: var(--ink-3); }
.mx-crumb li + li::before { content: '/'; margin-right: 6px; color: var(--line-solid); }
.mx-crumb a, .mx-crumb-link {
  color: var(--ink-3) !important; text-decoration: none; background: none !important; border: 0 !important; padding: 0 !important;
  min-height: 0 !important; font-size: 13px !important; font-weight: 400 !important; cursor: pointer;
}
.mx-crumb a:hover, .mx-crumb-link:hover { color: var(--ink) !important; text-decoration: underline; }
.mx-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mx-title {
  margin: 0; font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.02 !important; letter-spacing: -.015em !important; color: var(--ink);
}
.mx-fav-page {
  width: auto !important; height: 32px !important; padding: 0 12px 0 10px !important; gap: 6px; display: inline-flex !important; opacity: 1 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--s-raised) !important;
  color: var(--ink-2) !important; font-size: 13px !important; font-weight: 500 !important;
}
.mx-today { margin: 8px 0 0; color: var(--ink-3); font-size: 14px; }
.mx-sessions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mx-session {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 0;
  border: 1px solid var(--line); background: var(--s-raised); color: var(--ink-3); font-size: 13px; font-weight: 500;
}
.mx-session-dot { width: 7px; height: 7px; border-radius: 0; background: var(--line-solid); }
.mx-session.on { color: var(--ink); }
.mx-session.on .mx-session-dot { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 30%, transparent); }
.mx-page-actions { display: flex; gap: 8px; align-items: center; }
.mx-page-actions:empty { display: none; }
.mx-action {
  position: static !important; margin: 0 !important; width: auto !important; height: 36px !important;
  display: inline-flex !important; align-items: center; gap: 8px; padding: 0 12px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--s-raised) !important;
  color: var(--ink-2) !important; font-size: 13.5px; cursor: pointer;
}
.mx-action:hover { color: var(--ink) !important; border-color: var(--line-solid) !important; }
.mx-action svg { width: 16px !important; height: 16px !important; }
.mx-action svg * { stroke: currentColor !important; }
.mx-action-label { font-size: 13.5px; font-weight: 500; }
/* split-view control is created after the shell mounts, so it has no label element */
.mx-page-actions #mdSplitPill { position: static !important; margin: 0 !important; width: auto !important; height: 36px !important;
  display: inline-flex !important; align-items: center; gap: 8px; padding: 0 12px !important; border: 1px solid var(--line) !important;
  border-radius: 0 !important; background: var(--s-raised) !important; color: var(--ink-2) !important; }
.mx-page-actions #mdSplitPill:not(:has(.mx-action-label))::after { content: 'Split'; font-size: 13.5px; font-weight: 500; }

/* — finder — */
.mx-finder {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: start center; padding: 12vh 16px 16px;
  background: color-mix(in srgb, var(--s-canvas) 60%, transparent); backdrop-filter: blur(6px);
}
.mx-finder[hidden], .mx-sheet[hidden], .mx-mega[hidden] { display: none !important; }
.mx-finder-box {
  width: min(640px, 100%); background: var(--s-raised); border: 1px solid var(--line-solid);
  border-radius: 0; box-shadow: var(--sh-3); overflow: hidden; animation: mx-drop .2s var(--e) both;
}
.mx-finder-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.mx-finder-field svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.mx-finder-field input {
  flex: 1; height: 58px; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font-size: 17px !important; color: var(--ink); outline: none !important; padding: 0 !important;
}
.mx-finder-list { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow: auto; }
.mx-finder-list li[role="option"] {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 0; cursor: pointer;
}
.mx-finder-list li[aria-selected="true"] { background: var(--accent-wash-2); }
.mx-opt-name { font-size: 15px; color: var(--ink); font-weight: 500; }
.mx-opt-meta { grid-column: 1; font-size: 12.5px; color: var(--ink-3); }
.mx-finder-list .mx-mod-code { grid-row: 1 / span 2; grid-column: 2; }
.mx-finder-empty { padding: 28px 12px; text-align: center; color: var(--ink-3); }
.mx-finder-foot { display: flex; gap: 16px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.mx-finder-foot span:last-child { margin-left: auto; }

/* — mobile — */
.mx-sheet {
  position: fixed; inset: 0; z-index: 1100; background: var(--s-canvas); overflow: auto;
  animation: mx-drop .2s var(--e) both;
}
.mx-sheet-head { position: sticky; top: 0; z-index: 20; /* above the list rows and their absolute bookmark buttons */ display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 16px; background: var(--s-canvas); border-bottom: 1px solid var(--line); }
.mx-sheet-body { padding: 12px 16px 40px; }
.mx-sheet-home {
  display: flex; align-items: center; justify-content: space-between; padding: 16px; margin-bottom: 10px; border-radius: 0;
  background: var(--accent); color: var(--accent-ink); text-decoration: none; font-family: var(--serif) !important; font-size: 26px;
}
.mx-sheet-home svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.mx-acc { border-bottom: 1px solid var(--line); }
.mx-acc summary {
  display: grid; grid-template-columns: 1fr auto; padding: 16px 4px; cursor: pointer; list-style: none;
  font-family: var(--serif) !important; font-size: 24px; color: var(--ink);
}
.mx-acc summary::-webkit-details-marker { display: none; }
.mx-acc summary span { grid-column: 1; font-family: var(--sans) !important; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.mx-acc summary svg { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 22px; height: 22px; fill: none; stroke: var(--ink-3); stroke-width: 2; transition: transform .2s var(--e); }
.mx-acc[open] summary svg { transform: rotate(180deg); }
.mx-acc .mx-col-title { margin: 8px 4px 4px; }
.mx-acc .mx-mods { margin-bottom: 12px; }

@media (max-width: 1280px) {
  .mx-search { min-width: 0; }
  .mx-search-label, .mx-search kbd { display: none; }
  .mx-bar { gap: 16px; }
}
@media (max-width: 1080px) {
  :root { --header-h: 58px; }
  .mx-domains { display: none; }
  .mx-menu { display: inline-grid !important; }
  .mx-bar { padding: 0 14px; }
  .mx-pagebar { padding: 14px 16px 12px; gap: 12px; }
  .mx-mega-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mx-logo-word { font-size: 24px; }
  .mx-title { font-size: 30px !important; }
  .mx-sessions { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .mx-action-label { display: none; }
}

/* ══ components ═════════════════════════════════════════════════════════════ */

/* cards */
:is(.md-panel, .panel, .card, .md-card, .md-result-main, .md-chart-card) {
  background: var(--s-raised) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--sh-1) !important;
}
:is(.md-panel-header, .panel-header, .cardHead .h, .section-title, .hs-title) {
  font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important;
}

/* buttons */
:is(button, .btn, .md-btn) { border-radius: var(--r-ctl); font-weight: 500; }
:is(button, .btn, .md-btn):not(:disabled):hover { background: var(--s-raised-2); border-color: var(--line-solid); color: var(--ink); }
:is(.md-btn-main, .btn.primary, button.primary, .filter-btn.active, .md-auth-card form button[type="submit"]) {
  background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important;
  font-weight: 600 !important; border-radius: 0 !important; box-shadow: 0 8px 22px -14px var(--accent) !important;
}
:is(.md-btn-main, .btn.primary, button.primary, .md-auth-card form button[type="submit"]):not(:disabled):hover {
  background: var(--accent-bright) !important; border-color: var(--accent-bright) !important;
}
.hs-btn { border-radius: 0 !important; padding: 4px 10px !important; font-size: 12px !important; font-weight: 500 !important; }

/* tabs: pill segments instead of underlined caps */
:is(.md-main-tab, .md-tab, .hs-movers-tab) {
  border-radius: 0 !important; padding: 6px 12px !important; color: var(--ink-3) !important; font-weight: 500 !important; font-size: 13px !important;
}
:is(.md-main-tab, .md-tab, .hs-movers-tab)::after { display: none !important; }
:is(.md-main-tab.md-main-active, .md-tab.md-active, .hs-movers-tab.active) {
  background: var(--ink) !important; color: var(--s-canvas) !important; font-weight: 600 !important;
}
:is(.chip, .pill, .md-chip, .md-pill) { border-radius: 0 !important; font-weight: 500 !important; }
:is(.chip.active, .chip[aria-selected="true"]) { background: var(--ink) !important; color: var(--s-canvas) !important; border-color: var(--ink) !important; }
.seg { border-radius: 0 !important; padding: 3px !important; background: var(--s-sunken) !important; border: 1px solid var(--line) !important; }
.seg button { border-radius: 0 !important; }
.seg button.on { background: var(--s-raised) !important; color: var(--ink) !important; box-shadow: var(--sh-2) !important; border-color: transparent !important; }

/* inputs */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background: var(--s-raised); border: 1px solid var(--line-solid); border-radius: 0; color: var(--ink);
}
:is(input, select, textarea):focus { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-wash-2) !important; outline: none; }
::placeholder { color: var(--ink-3) !important; opacity: 1; }

/* tables */
thead th {
  background: var(--s-raised) !important; color: var(--ink-3) !important;
  font-size: 12px !important; font-weight: 500 !important;
  border-bottom: 1px solid var(--line) !important;
}
tbody td { border-bottom: 1px solid var(--line-2) !important; }
tbody tr:hover { background: var(--s-raised-2) !important; }
:is(.up, td.up, .chg-up) { color: var(--up); }
:is(.down, td.down, .chg-dn) { color: var(--down); }

/* live indicators become lime */
:is(.dot.ok, .md-live-dot, .hs-live, .live-dot) { background: var(--live) !important; }

.mt-tip { background: var(--ink); color: var(--s-canvas); border-radius: 0; }
.mt-announce { background: var(--ink); color: var(--s-canvas); border-radius: 0; }

/* ══ terminal · "Hari ini" ══════════════════════════════════════════════════ */
body.mx-terminal {
  display: flex !important; flex-direction: column; height: 100dvh !important; overflow: hidden !important; box-sizing: border-box;
}
body.mx-terminal > #app { flex: 1; min-height: 0; height: auto !important; background: transparent !important; }
body.mx-terminal #scroll { overflow-y: auto !important; overflow-x: hidden; }
body.mx-terminal #md-home { height: auto !important; padding: 0 24px 24px; max-width: 1680px; margin: 0 auto; box-sizing: border-box; }

/* the headline tape becomes a single quiet line under the page header */
body.mx-terminal #md-brk-bar {
  margin: 0 24px 14px; height: 36px !important; max-height: 36px !important; border: 1px solid var(--line) !important;
  border-radius: 0; overflow: hidden; background: var(--s-raised) !important;
}
body.mx-terminal #md-brk-bar iframe { height: 34px !important; }
.brk-row { background: transparent !important; padding: 0 14px 0 6px !important; }
html:has(.brk-row), body:has(.brk-row) { height: 34px !important; }
.brk-tag {
  position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 0;
  background: var(--down); flex: none; color: transparent !important; font-size: 12px !important;
}
.brk-tag::before { content: 'Terkini'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; letter-spacing: 0; }
.brk-sep { display: none !important; }
.brk-slide-item { font-size: 13.5px !important; font-weight: 500 !important; color: var(--ink) !important; text-transform: none !important; }

@media (min-width: 720px) {
  body.mx-terminal #md-home .hs-block {
    display: grid !important; gap: 14px !important; background: transparent !important; height: auto !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(470px, auto) minmax(520px, auto) !important;
  }
  body.mx-terminal #md-home .hs-summary-zone {
    grid-column: 1 / span 5 !important; grid-row: 1 !important;
    display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr auto !important;
    gap: 14px !important; background: transparent !important;
  }
  body.mx-terminal #md-home .hs-heatmap { grid-column: 6 / span 7 !important; grid-row: 1 !important; }
  body.mx-terminal #md-home .hs-news    { grid-column: 1 / span 5 !important; grid-row: 2 !important; }
  body.mx-terminal #md-home .hs-events  { grid-column: 6 / span 3 !important; grid-row: 2 !important; }
  body.mx-terminal #md-home .hs-hours   { grid-column: 9 / span 4 !important; grid-row: 2 !important; }
}
@media (min-width: 720px) and (max-width: 1199px) {
  body.mx-terminal #md-home .hs-block { grid-template-rows: auto !important; }
  body.mx-terminal #md-home .hs-summary-zone { grid-column: 1 / span 12 !important; grid-row: auto !important; }
  body.mx-terminal #md-home .hs-heatmap { grid-column: 1 / span 12 !important; grid-row: auto !important; min-height: 420px; }
  body.mx-terminal #md-home .hs-news { grid-column: 1 / span 12 !important; grid-row: auto !important; min-height: 480px; }
  body.mx-terminal #md-home .hs-events { grid-column: 1 / span 6 !important; grid-row: auto !important; min-height: 460px; }
  body.mx-terminal #md-home .hs-hours { grid-column: 7 / span 6 !important; grid-row: auto !important; min-height: 460px; }
}
@media (max-width: 719px) {
  body.mx-terminal #md-home { padding: 0 12px 88px; }
  body.mx-terminal #md-brk-bar { margin: 0 12px 10px; }
  body.mx-terminal #md-home .hs-block { display: flex !important; flex-direction: column; gap: 12px !important; background: transparent !important; }
  body.mx-terminal #md-home .hs-summary-zone { display: flex !important; flex-direction: column; gap: 12px !important; background: transparent !important; }
}

body.mx-terminal #md-home .hs {
  background: var(--s-raised) !important; border: 1px solid var(--line) !important; border-radius: var(--r-card) !important;
  box-shadow: var(--sh-1) !important; overflow: hidden;
}
body.mx-terminal .hs-hdr {
  height: 48px !important; padding: 0 16px !important; background: transparent !important; border-bottom: 1px solid var(--line-2) !important;
}
body.mx-terminal .hs-title { font-size: 15px !important; font-weight: 600 !important; color: var(--ink) !important; }
body.mx-terminal .hs-meta { font-size: 12px !important; color: var(--ink-3) !important; }
body.mx-terminal .hs-summary-body { padding: 18px !important; }
body.mx-terminal .hs-summary-text {
  font-family: var(--serif) !important; font-size: 21px !important; line-height: 1.38 !important; color: var(--ink) !important; letter-spacing: -.005em !important;
}
body.mx-terminal .hs-summary-text strong { font-family: var(--serif) !important; color: var(--accent-text) !important; font-weight: 400 !important; font-style: italic; }
body.mx-terminal .hs-summary-text span { font-family: var(--sans) !important; font-size: 14px; }
body.mx-terminal .hs-regime-badge {
  background: var(--ink) !important; color: var(--s-canvas) !important; border-radius: 0 !important; padding: 3px 10px !important; font-size: 12px !important;
}
body.mx-terminal .hs-regime-sub { font-size: 13px !important; color: var(--ink-3) !important; }
body.mx-terminal .hs-embed iframe { background: transparent !important; }

body.mx-terminal #md-statusbar {
  height: 34px !important; max-height: 34px !important; background: var(--s-raised) !important; border-top: 1px solid var(--line) !important;
}
body.mx-terminal #md-statusbar iframe { height: 34px !important; }
.fab-btn {
  width: 52px !important; height: 52px !important; border-radius: 0 !important; background: var(--ink) !important;
  box-shadow: var(--sh-3) !important;
}
.fab-btn svg { fill: var(--s-canvas) !important; }

/* palette & dialogs */
#pal { background: color-mix(in srgb, var(--s-canvas) 60%, transparent) !important; backdrop-filter: blur(6px) !important; }
.pal-sheet { background: var(--s-raised) !important; border: 1px solid var(--line-solid) !important; border-radius: 0 !important; box-shadow: var(--sh-3) !important; overflow: hidden; }
.pal-mark { color: transparent !important; overflow: hidden; width: 22px; height: 22px; padding: 0 !important; border-radius: 0; background: var(--accent) !important; flex: none; }
.pal-in { font-size: 17px !important; font-weight: 400 !important; }
.pal-grp { font-size: 12.5px !important; font-weight: 600 !important; color: var(--ink-3) !important; }
#md-release-card { background: var(--s-raised) !important; border: 1px solid var(--line-solid) !important; border-radius: 0 !important; box-shadow: var(--sh-3) !important; }

/* ══ welcome · guide · pages with their own hero ═══════════════════════════ */
.page h1, .h1 {
  font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -.02em !important; line-height: 1 !important;
}
.page h1 { font-size: clamp(40px, 5.4vw, 72px) !important; }
.h1 { font-size: clamp(34px, 4vw, 54px) !important; }
.page .kicker::before { display: none !important; }
.page .num { color: var(--accent-text) !important; }
.scope span { border-radius: 0 !important; }

/* ══ account pages: brand panel + form ═════════════════════════════════════ */
body:has(.md-auth-card) {
  position: relative;
  display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); min-height: 100dvh; padding: 0 !important;
  align-items: stretch !important; justify-items: stretch !important;
}
body:has(.md-auth-card)::before {
  content: 'Riset pasar yang tenang, terukur, dan lengkap.';
  grid-column: 1; grid-row: 1; display: flex; align-items: flex-end; padding: 56px;
  font-family: var(--serif); font-size: clamp(38px, 4vw, 64px); line-height: 1.02; letter-spacing: -.02em; color: #fff;
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(212,247,90,.28), transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(116,128,255,.55), transparent 60%),
    linear-gradient(160deg, #1E2BD8, #0B0D12 78%);
}
body:has(.md-auth-card)::after {
  content: 'Metra'; position: absolute; left: 56px; top: 44px; font-family: var(--serif); font-size: 34px; color: #fff;
}
body:has(.md-auth-card) .md-auth-card {
  grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: min(420px, calc(100% - 48px));
  background: var(--s-raised) !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
  box-shadow: var(--sh-2) !important; padding: 32px !important; margin: 32px 0;
}
.md-auth-card h1 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: 38px !important; letter-spacing: -.015em !important; }
@media (max-width: 900px) {
  body:has(.md-auth-card) { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  body:has(.md-auth-card)::before { min-height: 180px; padding: 80px 24px 24px; font-size: 32px; }
  body:has(.md-auth-card)::after { left: 24px; top: 24px; font-size: 28px; }
  body:has(.md-auth-card) .md-auth-card { grid-column: 1; grid-row: 2; align-self: start; margin: -28px auto 32px; }
}

/* ══ motion ═════════════════════════════════════════════════════════════════ */
@keyframes mx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .mx-pagebar, body.mx-terminal #md-home .hs, .md-auth-card, .nf { animation: mx-rise .6s var(--e) both; }
  body.mx-terminal #md-home .hs-summary-zone .hs:nth-child(1) { animation-delay: .06s; }
  body.mx-terminal #md-home .hs-summary-zone .hs:nth-child(2) { animation-delay: .12s; }
  body.mx-terminal #md-home .hs-heatmap { animation-delay: .1s; }
  body.mx-terminal #md-home .hs-news { animation-delay: .18s; }
  body.mx-terminal #md-home .hs-events { animation-delay: .24s; }
  body.mx-terminal #md-home .hs-hours { animation-delay: .3s; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODULE LAYOUTS (v3)
   ══════════════════════════════════════════════════════════════════════════ */

/* shared segmented / chips / search used by module toolbars */
.mx-seg { display: inline-flex; padding: 3px; border-radius: 0; background: var(--s-sunken); border: 1px solid var(--line); }
.mx-seg button {
  min-height: 30px !important; padding: 0 14px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--ink-3) !important; font-size: 13px !important; font-weight: 500 !important;
}
.mx-seg button[aria-checked="true"] { background: var(--s-raised) !important; color: var(--ink) !important; box-shadow: var(--sh-2); }
.mx-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.mx-chips::-webkit-scrollbar { display: none; }
/* on a phone the row runs past the edge; fade the edge so the cut chip reads as "more", and pad the end so the last chip scrolls clear of the fade */
@media (max-width: 720px) {
  .mx-chips { padding-right: 28px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
.mx-chip {
  flex: none; min-height: 32px !important; padding: 0 12px !important; border-radius: 0 !important;
  border: 1px solid var(--line) !important; background: var(--s-raised) !important; color: var(--ink-2) !important;
  font-size: 13px !important; font-weight: 500 !important; white-space: nowrap;
}
.mx-chip[aria-pressed="true"] { background: var(--ink) !important; color: var(--s-canvas) !important; border-color: var(--ink) !important; }
.mx-find { position: relative; display: inline-flex; align-items: center; }
.mx-find svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.mx-find input { height: 38px; width: 240px; padding: 0 12px 0 36px !important; border-radius: 0 !important; font-size: 13.5px !important; }

/* ── Cryptocurrency Prices ────────────────────────────────────────────────── */
body.mx-page-crypto { gap: 0; }
.mx-desk { flex: none; padding: 0 24px 14px; max-width: 1680px; width: 100%; margin: 0 auto; box-sizing: border-box; display: grid; gap: 14px; }
body:not(.mx-shell).mx-page-crypto .mx-desk { padding-top: 14px; }
.mx-pulse { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; }
.mx-kpi { padding: 14px 16px; border-radius: 0; background: var(--s-raised); border: 1px solid var(--line); min-width: 0; }
.mx-kpi-k { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-3); }
.mx-kpi-v { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-kpi-v .mx-num, .mx-num { font-family: var(--mono) !important; font-size: 17px; }
.mx-kpi-v.up, .mx-num.up { color: var(--up); } .mx-kpi-v.down, .mx-num.down { color: var(--down); }
.mx-breadth { margin-top: 10px; height: 6px; border-radius: 0; background: var(--down); overflow: hidden; }
.mx-breadth span { display: block; height: 100%; background: var(--up); border-radius: 0; transition: width .6s var(--e); }
.mx-toolbar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mx-toolbar .mx-chips { flex: 1; min-width: 0; }
.mx-shown { margin: 0 0 0 auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
body.mx-page-crypto .md-table-wrap {
  margin: 0 24px 20px; border: 1px solid var(--line); border-radius: 0; background: var(--s-raised) !important;
}
body.mx-page-crypto tr[hidden] { display: none !important; }
body.mx-page-crypto thead .md-group-row th, body.mx-page-crypto thead th { background: var(--s-raised) !important; }
body.mx-page-crypto tr.md-cat-row td {
  background: var(--s-raised-2) !important; padding: 14px 16px 8px !important; border-bottom: 1px solid var(--line) !important;
}
.mx-cat-name { font-family: var(--serif) !important; font-size: 20px; color: var(--ink); font-weight: 400; }
.mx-cat-count { margin-left: 10px; font-size: 12.5px; color: var(--ink-3); }
body.mx-page-crypto tr.md-row td:first-child { border-left: 0 !important; }
body.mx-page-crypto .sym-label { font-weight: 600; color: var(--ink) !important; font-size: 14px; }
body.mx-page-crypto .sym-chain { border-radius: 0 !important; }
.mx-none { margin: 40px 16px; text-align: center; color: var(--ink-3); }
@media (max-width: 1080px) {
  .mx-desk { padding: 0 12px 12px; }
  .mx-pulse { grid-template-columns: 1fr 1fr; }
  .mx-toolbar { flex-wrap: wrap; }
  .mx-find, .mx-find input { width: 100%; }
  .mx-find { flex: 1 1 100%; }
  .mx-toolbar .mx-chips { flex: 1 1 100%; order: 3; }
  body.mx-page-crypto .md-table-wrap { margin: 0 12px 12px; }
}

/* ── Calculators ──────────────────────────────────────────────────────────── */
body.mx-page-calc .md-root {
  max-width: 1480px !important; padding: 0 24px 32px !important; min-height: 0 !important;
  display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 28px; align-items: start;
}
body.mx-page-calc .md-root > * { grid-column: 2; }
body.mx-page-calc #toolMenu {
  grid-column: 1; grid-row: 1 / span 30; position: sticky; top: calc(var(--header-h) + 16px);
  display: flex !important; flex-direction: column; gap: 2px; padding: 10px !important; margin: 0 !important;
  background: var(--s-raised) !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
  overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important;
}
.mx-rail-group { padding: 12px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.mx-rail-group:first-child { padding-top: 4px; }
body.mx-page-calc .md-main-tab {
  display: grid !important; text-align: left; width: 100%; padding: 9px 10px !important; border-radius: 0 !important;
  font-size: 14px !important; color: var(--ink) !important; background: transparent !important; white-space: normal !important;
}
body.mx-page-calc .md-main-tab::after {
  display: block !important; content: attr(data-desc); position: static !important; transform: none !important; height: auto !important;
  background: none !important; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--ink-3);
  max-height: 0; overflow: hidden; transition: max-height .25s var(--e);
}
body.mx-page-calc .md-main-tab:hover { background: var(--s-raised-2) !important; }
body.mx-page-calc .md-main-tab.md-main-active { background: var(--accent-wash-2) !important; color: var(--accent-text) !important; }
body.mx-page-calc .md-main-tab.md-main-active::after { max-height: 60px; color: var(--ink-2); }
.mx-tool-head { padding: 4px 0 18px; }
.mx-tool-group { margin: 0 0 4px; font-size: 13px; color: var(--ink-3); }
.mx-tool-title { margin: 0; font-family: var(--serif) !important; font-weight: 400 !important; font-size: 34px !important; line-height: 1.05; color: var(--ink); }
.mx-tool-desc { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 60ch; }
body.mx-page-calc .md-panel { padding: 20px !important; }
body.mx-page-calc .md-panel-header { border: 0 !important; background: none !important; padding: 0 0 12px !important; justify-content: flex-start !important; }
body.mx-page-calc .md-panel-header .icon { display: none; }
body.mx-page-calc .md-label { font-size: 13px !important; color: var(--ink-2) !important; font-weight: 500 !important; }
body.mx-page-calc input { height: 42px; font-size: 15px !important; }
body.mx-page-calc .md-btn-main { min-height: 44px; font-size: 14.5px !important; }
body.mx-page-calc .md-result-main { padding: 20px !important; }
body.mx-page-calc .md-result-header { font-family: var(--serif) !important; }
body.mx-page-calc .md-result-header span:first-child { font-family: var(--mono) !important; font-size: 12px !important; color: var(--ink-3) !important; }
body.mx-page-calc .md-result-header span:last-child { font-family: var(--serif) !important; font-size: 22px !important; color: var(--ink) !important; font-weight: 400 !important; }
@media (max-width: 960px) {
  body.mx-page-calc .md-root { grid-template-columns: 1fr; padding: 0 12px 24px !important; }
  body.mx-page-calc .md-root > *, body.mx-page-calc #toolMenu { grid-column: 1; grid-row: auto; }
  body.mx-page-calc #toolMenu {
    position: static; flex-direction: row; overflow-x: auto !important; border-radius: 0 !important; padding: 4px !important;
  }
  .mx-rail-group { display: none; }
  body.mx-page-calc .md-main-tab { width: auto; white-space: nowrap !important; border-radius: 0 !important; }
  body.mx-page-calc .md-main-tab::after { display: none !important; }
  .mx-tool-head { padding-top: 16px; }
}

/* ── Economic Calendar ────────────────────────────────────────────────────── */
body.mx-shell.mx-page-cal { display: flex !important; flex-direction: column; height: 100dvh !important; overflow: hidden !important; box-sizing: border-box; }
body.mx-page-cal .wrap {
  flex: 1; min-height: 0; height: auto !important; max-width: 1680px; width: 100%; margin: 0 auto; box-sizing: border-box;
  display: grid !important; grid-template-columns: 280px minmax(0, 1fr); gap: 20px !important; padding: 0 24px 20px !important;
}
body:not(.mx-shell).mx-page-cal .wrap { height: 100vh !important; padding-top: 16px !important; }
body.mx-page-cal .bar {
  display: flex !important; flex-direction: column; align-items: stretch !important; gap: 8px !important; align-self: start;
  padding: 18px; background: var(--s-raised); border: 1px solid var(--line); border-radius: 0; overflow: auto; max-height: 100%;
}
.mx-side-title { margin: 6px 0 2px; font-family: var(--serif) !important; font-size: 22px; color: var(--ink); }
body.mx-page-cal .chips { display: grid !important; gap: 2px !important; flex-wrap: nowrap !important; overflow: visible !important; }
body.mx-page-cal .chip {
  justify-content: flex-start; width: 100%; min-height: 38px !important; padding: 0 12px !important; border-radius: 0 !important;
  border: 0 !important; background: transparent !important; color: var(--ink-2) !important; font-size: 14px !important; font-weight: 500 !important;
}
body.mx-page-cal .chip:hover { background: var(--s-raised-2) !important; color: var(--ink) !important; }
body.mx-page-cal .chip.active { background: var(--accent-wash-2) !important; color: var(--accent-text) !important; }
body.mx-page-cal .right { margin: 10px 0 0 !important; display: grid !important; gap: 8px !important; }
.mx-side-label { font-size: 13px; color: var(--ink-2); font-weight: 500; margin-top: 4px; }
body.mx-page-cal .right select, body.mx-page-cal .right input { width: 100% !important; height: 40px; font-size: 14px !important; }
body.mx-page-cal #btnRefresh { margin-top: 8px; height: 40px; border-radius: 0 !important; }
body.mx-page-cal .card { padding: 0 !important; overflow: hidden; min-height: 0; }
body.mx-page-cal .cardHead { padding: 16px 20px 0; }
body.mx-page-cal .cardHead .h::before { display: none; }
body.mx-page-cal .list { padding: 8px 20px 20px !important; gap: 20px !important; }
body.mx-page-cal .day { border: 0 !important; background: transparent !important; overflow: visible !important; }
body.mx-page-cal .dayHead { position: sticky; top: 0; z-index: 2; background: var(--s-raised) !important; border: 0 !important; padding: 10px 0 !important; }
body.mx-page-cal .dayTitle { font-family: var(--serif) !important; font-size: 26px !important; font-weight: 400 !important; }
body.mx-page-cal .dayTitle .rel { font-family: var(--sans) !important; font-size: 12.5px !important; vertical-align: middle; background: var(--live) !important; color: var(--live-ink) !important; }
body.mx-page-cal .dayRows { border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
body.mx-page-cal .row { padding: 12px 16px !important; }
/* past events recede by colour, not opacity, so they still meet contrast */
body.mx-page-cal .row.mx-past :is(.ttl, .subttl, .time, .v, .cc) { color: var(--ink-3) !important; font-weight: 400 !important; }
body.mx-page-cal .row.mx-next { background: var(--accent-wash) !important; box-shadow: inset 3px 0 0 var(--accent); }
.mx-next-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 0; vertical-align: middle;
  background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 600;
}
@media (max-width: 960px) {
  body.mx-shell.mx-page-cal { height: auto !important; overflow: auto !important; display: block !important; }
  body.mx-page-cal .wrap { grid-template-columns: 1fr; padding: 0 12px 20px !important; height: auto !important; }
  body.mx-page-cal .chips { display: flex !important; overflow-x: auto !important; }
  body.mx-page-cal .chip { width: auto; white-space: nowrap; }
}

/* ── Live Chart ───────────────────────────────────────────────────────────── */
body.mx-page-chart .md-toolbar {
  height: 52px !important; margin: 0 24px 10px; padding: 0 8px !important; border: 1px solid var(--line) !important;
  border-radius: 0; background: var(--s-raised) !important;
}
body.mx-page-chart .md-ticker-btn {
  height: 36px; padding: 0 14px !important; border-radius: 0 !important; background: var(--s-raised-2) !important;
  border: 1px solid var(--line) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--ink) !important;
}
body.mx-page-chart .md-intervals { background: var(--s-sunken); border: 1px solid var(--line); border-radius: 0; padding: 3px; gap: 2px; }
body.mx-page-chart .md-int-btn { border-radius: 0 !important; min-width: 38px; height: 28px; font-size: 12.5px !important; color: var(--ink-3) !important; }
body.mx-page-chart .md-int-btn.active { background: var(--s-raised) !important; color: var(--ink) !important; box-shadow: var(--sh-2); }
body.mx-page-chart .md-icon-action { border-radius: 0 !important; }
body.mx-page-chart .md-icon-action.active { background: var(--accent-wash-2) !important; color: var(--accent-text) !important; border-color: transparent !important; }
body.mx-page-chart .md-sep { opacity: .5; }
body.mx-page-chart #toolbar-mid [data-group="draw"],
body.mx-page-chart #toolbar-mid [data-group="history"],
body.mx-page-chart #toolbar-mid #btn-exit-tool { display: none !important; }
body.mx-page-chart .md-toolbar-mid [data-group="history"] + .md-sep,
body.mx-page-chart .md-toolbar-mid [data-group="draw"] + .md-sep { display: none; }
body.mx-page-chart .md-chart-wrap {
  margin: 0 24px 20px; border: 1px solid var(--line); border-radius: 0; overflow: hidden; background: var(--s-raised);
}
body.mx-page-chart .md-chart-layout { left: 56px !important; }
/* the chart is a screen: it stays ink-dark in both themes (candle colours are
   drawn for a dark field), and its overlays follow the screen, not the page */

body.mx-page-chart .md-legend {
  left: 72px !important; top: 14px !important; padding: 12px 14px !important; border-radius: 0 !important;
  background: rgba(18,21,28,.86) !important; border: 1px solid #232834 !important; backdrop-filter: blur(8px);
}
body.mx-page-chart .md-legend-title { color: #F2F3F5 !important; border-bottom-color: #232834 !important; font-weight: 600; }
body.mx-page-chart .md-legend-label { color: #959CA8 !important; }
body.mx-page-chart .md-legend-val { color: #F2F3F5 !important; }
@media (max-width: 720px) { body.mx-page-chart .md-legend { transform: scale(.78); transform-origin: top left; } }
.mx-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 56px; z-index: 5; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; overflow-y: auto;
  background: var(--s-raised); border-right: 1px solid var(--line);
}
.mx-rail .mx-rail-group { display: grid; gap: 4px; padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.mx-rail .mx-rail-group:last-of-type { border-bottom: 0; }
.mx-rail-btn {
  width: 38px; height: 38px; min-height: 0 !important; padding: 0 !important; display: grid; place-items: center;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ink-2) !important;
}
/* The chart rail reuses the chart's sprite: line icons on one 24 grid, all
   inside the same 18-unit box, so the rail and the toolbar match exactly. */
.mx-rail-btn svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; overflow: visible; }
.mx-rail-btn:hover { background: var(--s-raised-2) !important; color: var(--ink) !important; }
.mx-rail-btn.is-active { background: var(--accent) !important; color: var(--accent-ink) !important; }
.mx-rail-btn.is-danger:hover { color: var(--down) !important; }
.mx-rail-btn[hidden] { display: none !important; }
@media (max-width: 720px) {
  body.mx-page-chart .md-toolbar { margin: 0 8px 8px; }
  body.mx-page-chart .md-chart-wrap { margin: 0 8px 8px; }
  body.mx-page-chart .md-chart-layout { left: 0 !important; bottom: 52px !important; }
  body.mx-page-chart .md-legend { left: 12px !important; }
  .mx-rail { top: auto; right: 0; width: auto; height: 52px; flex-direction: row; padding: 0 8px; border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; }
  .mx-rail .mx-rail-group { display: flex; border-bottom: 0; border-right: 1px solid var(--line); padding: 0 8px 0 0; margin: 0 6px 0 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   REFINEMENT PASS — restraint. Overrides the first v3 styling above.
   ══════════════════════════════════════════════════════════════════════════ */

/* — no choreography — */
.mx-pagebar, body.mx-terminal #md-home .hs, .md-auth-card, .nf, .mx-mega, .mx-finder-box, .mx-sheet { animation: none !important; }
* { transition-duration: 0s; }
a, button, .mx-mod, .mx-domain, input, select { transition: color .12s var(--e), background-color .12s var(--e), border-color .12s var(--e) !important; }

body { font-size: 13px; }
:is(code, kbd, samp, pre, .mono, .num, .v, .price, .md-price, [class*="price"], [class*="-val"], [class*="value"],
  [class*="-num"], [class*="pct"], [class*="chg"], .time, td:not(:first-child)) { letter-spacing: 0 !important; }
:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 1px; }
::selection { background: var(--accent-wash-2); color: var(--ink); }

/* — header: solid, quiet — */
.mx-header { background: var(--s-canvas); backdrop-filter: none; -webkit-backdrop-filter: none; }
.mx-bar { gap: 20px; padding: 0 20px; }
.mx-logo { gap: 8px; }
.mx-logo-mark { width: 22px; height: auto; }
.mx-logo-mark rect { fill: var(--ink); }
.mx-logo-mark path { stroke: var(--s-canvas); stroke-width: 2.6; }
.mx-logo-word { font-family: var(--sans) !important; font-size: 16px; font-weight: 600; letter-spacing: -.01em !important; }
.mx-domain { height: 52px; padding: 0 10px; border-radius: 0 !important; font-size: 13px !important; color: var(--ink-3) !important; }
.mx-domain:hover, .mx-domain[aria-expanded="true"] { background: transparent !important; color: var(--ink) !important; }
.mx-domain.is-current { color: var(--ink) !important; font-weight: 600 !important; }
.mx-domain.is-current::after { left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 0; background: var(--ink); }
.mx-domain[aria-expanded="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--accent); }
.mx-search {
  height: 32px; min-width: 280px; border-radius: 0 !important; box-shadow: none; background: var(--s-raised) !important;
  font-size: 13px !important; gap: 8px; padding: 0 6px 0 10px !important;
}
.mx-search svg { width: 15px; height: 15px; }
.mx-search kbd, .mx-finder kbd { border-radius: 0; font-family: var(--mono) !important; font-size: 10.5px; }
.mx-icon { width: 32px; height: 32px; border-radius: 0 !important; }
.mx-icon svg { width: 16px; height: 16px; stroke-width: 1.6; }

/* — mega menu: an index, not a showcase — */
.mx-mega { box-shadow: 0 16px 32px -24px rgba(0,0,0,.35); background: var(--s-canvas); }
.mx-mega-inner { grid-template-columns: 200px 1fr; gap: 32px; padding: 20px 20px 24px; }
.mx-mega-kicker { display: none; }
.mx-mega-title { font-family: var(--sans) !important; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.mx-mega-blurb { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.mx-cta { padding: 0; background: none; color: var(--accent-text); font-weight: 500; font-size: 13px; border-radius: 0; }
.mx-cta:hover { text-decoration: underline; }
.mx-mega-cols { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px 24px; }
.mx-col { border-top: 1px solid var(--line); padding-top: 8px; }
.mx-col-title { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-bottom: 4px; }
.mx-mods { gap: 0; }
.mx-mod { min-height: 30px; padding: 5px 34px 5px 6px; border-radius: 0; font-size: 13px; gap: 8px; }
.mx-mod:hover { background: var(--s-raised-2); }
.mx-mod.is-active { background: transparent; color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.mx-mod-code { border: 0; padding: 0; font-family: var(--mono) !important; font-size: 10.5px; color: var(--ink-4); }
.mx-fav { width: 24px; height: 24px; border-radius: 0 !important; }
.mx-fav svg { width: 13px; height: 13px; }
.mx-fav.on { color: var(--ink) !important; }
.mx-mega-open body::after { background: rgba(0,0,0,.18); backdrop-filter: none; }

/* — page header — */
.mx-pagebar { padding: 16px 20px 14px; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.mx-crumb ol { font-size: 12px; margin-bottom: 4px; }
.mx-crumb a, .mx-crumb-link { font-size: 12px !important; }
.mx-title {
  font-family: var(--sans) !important; font-weight: 600 !important; font-size: 22px !important;
  line-height: 1.2 !important; letter-spacing: -.01em !important;
}
.mx-fav-page {
  height: 26px !important; padding: 0 8px !important; border-radius: 0 !important; font-size: 12px !important;
  background: transparent !important; color: var(--ink-3) !important;
}
.mx-fav-page.on { color: var(--ink) !important; border-color: var(--line-solid) !important; }
.mx-today { margin: 2px 0 0; font-size: 12.5px; }
.mx-sessions { gap: 0; align-self: flex-end; }
.mx-session {
  height: auto; padding: 0 0 0 14px; border: 0; border-radius: 0; background: none; font-size: 12.5px; color: var(--ink-3);
}
.mx-session + .mx-session { margin-left: 14px; border-left: 1px solid var(--line); }
.mx-session-dot { width: 6px; height: 6px; }
.mx-session.on .mx-session-dot { background: var(--up); box-shadow: none; }
.mx-action, .mx-page-actions #mdSplitPill {
  height: 30px !important; border-radius: 0 !important; font-size: 12.5px; padding: 0 10px !important; background: transparent !important;
}
.mx-action-label, .mx-page-actions #mdSplitPill::after { font-size: 12.5px !important; }

/* — finder & sheet — */
.mx-finder { background: rgba(0,0,0,.28); backdrop-filter: none; padding-top: 10vh; }
.mx-finder-box { border-radius: 0; width: min(600px, 100%); }
.mx-finder-field input { height: 48px; font-size: 15px !important; }
.mx-finder-list { padding: 4px; }
.mx-finder-list li[role="option"] { padding: 8px 10px; border-radius: 0; }
.mx-finder-list li[aria-selected="true"] { background: var(--s-raised-2); box-shadow: inset 2px 0 0 var(--accent); }
.mx-opt-name { font-size: 13.5px; }
.mx-opt-meta { font-size: 12px; }
.mx-sheet-home { border-radius: 0; background: var(--primary); color: var(--primary-ink); font-family: var(--sans) !important; font-size: 15px; font-weight: 600; padding: 12px 14px; }
.mx-acc summary { font-family: var(--sans) !important; font-size: 16px; font-weight: 600; padding: 14px 2px; }
.mx-acc summary svg { width: 18px; height: 18px; }

/* — components — */
:is(.md-panel, .panel, .card, .md-card, .md-result-main, .md-chart-card) {
  border-radius: var(--r-card) !important; box-shadow: none !important;
}
:is(.md-panel-header, .panel-header, .cardHead .h, .section-title, .hs-title) { font-size: 13px !important; }
:is(.md-btn-main, .btn.primary, button.primary, .filter-btn.active, .md-auth-card form button[type="submit"]) {
  background: var(--primary) !important; border-color: var(--primary) !important; color: var(--primary-ink) !important;
  border-radius: 0 !important; box-shadow: none !important; font-weight: 600 !important;
}
:is(.md-btn-main, .btn.primary, button.primary, .md-auth-card form button[type="submit"]):not(:disabled):hover {
  background: var(--ink-2) !important; border-color: var(--ink-2) !important;
}
:is(button, .btn, .md-btn) { border-radius: 0; }
.hs-btn { border-radius: 0 !important; padding: 3px 8px !important; font-size: 11.5px !important; }

/* tabs: underline, as a tab should be */
:is(.md-main-tab, .md-tab, .hs-movers-tab) {
  border-radius: 0 !important; padding: 8px 10px !important; background: transparent !important;
  color: var(--ink-3) !important; font-size: 13px !important; box-shadow: none !important;
}
:is(.md-main-tab.md-main-active, .md-tab.md-active, .hs-movers-tab.active) {
  background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--ink) !important;
}
:is(.chip, .pill, .md-chip, .md-pill) { border-radius: 0 !important; }
:is(.chip.active, .chip[aria-selected="true"]) { background: var(--s-raised-2) !important; color: var(--ink) !important; border-color: var(--ink-3) !important; }
.seg { border-radius: 0 !important; padding: 2px !important; }
.seg button { border-radius: 0 !important; }
.seg button.on { box-shadow: none !important; border: 1px solid var(--line-solid) !important; }
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { border-radius: 0; }
:is(input, select, textarea):focus { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
thead th { font-size: 11.5px !important; }

/* — shared module controls — */
.mx-seg { border-radius: 0; padding: 2px; }
.mx-seg button { border-radius: 0 !important; min-height: 26px !important; padding: 0 10px !important; font-size: 12.5px !important; }
.mx-seg button[aria-checked="true"] { box-shadow: none; outline: 1px solid var(--line-solid); outline-offset: -1px; }
.mx-chip { border-radius: 0 !important; min-height: 28px !important; padding: 0 10px !important; font-size: 12.5px !important; }
.mx-chip[aria-pressed="true"] { background: var(--s-raised-2) !important; color: var(--ink) !important; border-color: var(--ink-3) !important; }
.mx-find input { height: 30px; width: 220px; border-radius: 0 !important; font-size: 13px !important; padding-left: 30px !important; }
.mx-find svg { left: 9px; width: 14px; height: 14px; }

/* ── terminal · Hari ini ─────────────────────────────────────────────────── */
body.mx-terminal .mx-pagebar { margin-bottom: 12px; }
body.mx-terminal #md-home { padding: 0 20px 20px; }
body.mx-terminal #md-brk-bar {
  margin: 0 20px 12px; height: 30px !important; max-height: 30px !important; border-radius: 0; border: 1px solid var(--line) !important;
}
body.mx-terminal #md-brk-bar iframe { height: 28px !important; }
html:has(.brk-row), body:has(.brk-row) { height: 28px !important; }
.brk-row { padding: 0 10px 0 0 !important; }
.brk-tag { height: 28px; border-radius: 0; background: transparent; padding: 0 10px; border-right: 1px solid var(--line); }
.brk-tag::before { color: var(--down); font-weight: 600; font-size: 12px; }
.brk-slide-item { font-size: 12.5px !important; font-weight: 400 !important; }
@media (min-width: 720px) {
  body.mx-terminal #md-home .hs-block { gap: 12px !important; grid-template-rows: minmax(440px, auto) minmax(480px, auto) !important; }
  body.mx-terminal #md-home .hs-summary-zone { gap: 12px !important; }
}
body.mx-terminal #md-home .hs { border-radius: var(--r-card) !important; }
body.mx-terminal .hs-hdr { height: 38px !important; padding: 0 12px !important; }
body.mx-terminal .hs-title { font-size: 13px !important; }
body.mx-terminal .hs-summary-body { padding: 14px !important; }
body.mx-terminal .hs-summary-text {
  font-family: var(--sans) !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--ink-2) !important;
}
body.mx-terminal .hs-summary-text strong { font-family: var(--sans) !important; font-style: normal; font-weight: 600 !important; color: var(--ink) !important; }
body.mx-terminal .hs-regime-badge {
  background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-solid); border-radius: 0 !important; padding: 1px 6px !important;
}
body.mx-terminal #md-statusbar { height: 28px !important; max-height: 28px !important; }
body.mx-terminal #md-statusbar iframe { height: 28px !important; }
.fab-btn { width: 40px !important; height: 40px !important; border-radius: 0 !important; box-shadow: var(--sh-2) !important; }
.pal-sheet { border-radius: 0 !important; }
.pal-mark { border-radius: 0; width: 16px; height: 16px; background: var(--ink) !important; }
#md-release-card { border-radius: 0 !important; }

/* ── pages with their own heading ────────────────────────────────────────── */
.page h1 { font-family: var(--sans) !important; font-weight: 600 !important; font-size: clamp(28px, 3vw, 36px) !important; letter-spacing: -.015em !important; line-height: 1.15 !important; }
.h1 { font-family: var(--sans) !important; font-weight: 600 !important; font-size: clamp(24px, 2.4vw, 30px) !important; letter-spacing: -.01em !important; line-height: 1.2 !important; }
.scope span { border-radius: 0 !important; }

/* ── account pages: a form on paper ──────────────────────────────────────── */
body:has(.md-auth-card) {
  display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; place-items: start center !important;
  padding: 0 16px !important; background: var(--s-canvas) !important;
}
body:has(.md-auth-card)::before {
  content: 'Metra'; grid-column: 1; grid-row: 1; justify-self: stretch; display: block; min-height: 0; padding: 18px 4px;
  background: none; color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1;
  border-bottom: 1px solid var(--line); width: min(1120px, 100%); margin: 0 auto; box-sizing: border-box;
}
body:has(.md-auth-card)::after { content: none; }
body:has(.md-auth-card) .md-auth-card {
  grid-column: 1; grid-row: 2; align-self: start; margin: 12vh auto 40px !important; width: min(380px, 100%);
  border-radius: 0 !important; box-shadow: none !important; padding: 28px !important;
}
.md-auth-card h1 { font-family: var(--sans) !important; font-weight: 600 !important; font-size: 22px !important; letter-spacing: -.01em !important; }
.md-auth-card::before { content: none !important; }
@media (max-width: 900px) {
  body:has(.md-auth-card) .md-auth-card { margin: 32px auto !important; }
}

/* ── Cryptocurrency Prices ───────────────────────────────────────────────── */
.mx-desk { padding: 0 20px 12px; gap: 12px; }
.mx-pulse {
  gap: 0; border: 1px solid var(--line); border-radius: 0; background: var(--s-raised);
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
}
.mx-kpi { border: 0; border-radius: 0; background: none; padding: 12px 16px; }
.mx-kpi + .mx-kpi { border-left: 1px solid var(--line); }
.mx-kpi-k { font-size: 12px; margin-bottom: 4px; }
.mx-kpi-v { font-size: 15px; font-weight: 500; }
.mx-kpi-v .mx-num, .mx-num { font-size: 14px; font-weight: 500; }
.mx-breadth { height: 3px; margin-top: 8px; border-radius: 0; }
.mx-breadth span { border-radius: 0; }
.mx-toolbar { gap: 10px; }
body.mx-page-crypto .md-table-wrap { margin: 0 20px 20px; border-radius: 0; }
body.mx-page-crypto tr.md-cat-row td { padding: 10px 12px 6px !important; background: var(--s-raised) !important; }
.mx-cat-name { font-family: var(--sans) !important; font-size: 13px; font-weight: 600; }
.mx-cat-count { font-size: 12px; }
body.mx-page-crypto .sym-label { font-size: 13px; }
@media (max-width: 1080px) {
  .mx-desk { padding: 0 12px 12px; }
  .mx-pulse { grid-template-columns: 1fr 1fr; }
  .mx-kpi:nth-child(3) { border-left: 0; }
  .mx-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ── Calculators ─────────────────────────────────────────────────────────── */
body.mx-page-calc .md-root { padding: 0 20px 28px !important; column-gap: 24px; grid-template-columns: 232px minmax(0, 1fr); }
body.mx-page-calc #toolMenu { top: calc(var(--header-h) + 12px); padding: 6px 0 !important; border-radius: 0 !important; gap: 0; }
.mx-rail-group { padding: 12px 14px 4px; font-size: 11.5px; font-weight: 500; }
body.mx-page-calc .md-main-tab { border-radius: 0 !important; padding: 7px 14px !important; font-size: 13px !important; box-shadow: none !important; }
body.mx-page-calc .md-main-tab.md-main-active {
  background: var(--s-raised-2) !important; color: var(--ink) !important; font-weight: 600 !important; box-shadow: inset 2px 0 0 var(--accent) !important;
}
body.mx-page-calc .md-main-tab.md-main-active::after { font-weight: 400; color: var(--ink-3); }
.mx-tool-head { padding: 0 0 14px; }
.mx-tool-group { font-size: 12px; }
.mx-tool-title { font-family: var(--sans) !important; font-weight: 600 !important; font-size: 20px !important; letter-spacing: -.01em; }
.mx-tool-desc { font-size: 13px; color: var(--ink-3); }
body.mx-page-calc .md-panel, body.mx-page-calc .md-result-main { padding: 16px !important; }
body.mx-page-calc input { height: 34px; font-size: 13.5px !important; }
body.mx-page-calc .md-btn-main { min-height: 36px; font-size: 13px !important; }
body.mx-page-calc .md-result-header span:last-child { font-family: var(--sans) !important; font-size: 14px !important; font-weight: 600 !important; }
@media (max-width: 960px) {
  body.mx-page-calc #toolMenu { border-radius: 0 !important; }
  body.mx-page-calc .md-main-tab { border-radius: 0 !important; }
}

/* ── Economic Calendar ───────────────────────────────────────────────────── */
body.mx-page-cal .wrap { grid-template-columns: 232px minmax(0, 1fr); gap: 16px !important; padding: 0 20px 20px !important; }
body.mx-page-cal .bar { padding: 12px 0; border-radius: 0; gap: 2px !important; }
.mx-side-title { font-family: var(--sans) !important; font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin: 8px 14px 4px; }
body.mx-page-cal .chips { gap: 0 !important; }
body.mx-page-cal .chip { border-radius: 0 !important; min-height: 32px !important; padding: 0 14px !important; font-size: 13px !important; }
body.mx-page-cal .chip.active { background: var(--s-raised-2) !important; color: var(--ink) !important; font-weight: 600 !important; box-shadow: inset 2px 0 0 var(--accent); }
body.mx-page-cal .right { padding: 0 14px; gap: 6px !important; margin-top: 6px !important; }
body.mx-page-cal .right .mx-side-title { margin: 8px 0 2px; }
.mx-side-label { font-size: 12px; margin-top: 2px; }
body.mx-page-cal .right select, body.mx-page-cal .right input, body.mx-page-cal #btnRefresh { height: 32px; font-size: 13px !important; border-radius: 0 !important; }
body.mx-page-cal .card { border-radius: 0 !important; }
body.mx-page-cal .cardHead { padding: 12px 16px 0; }
body.mx-page-cal .list { padding: 4px 16px 16px !important; gap: 16px !important; }
body.mx-page-cal .dayTitle { font-family: var(--sans) !important; font-size: 15px !important; font-weight: 600 !important; }
body.mx-page-cal .dayTitle .rel {
  background: none !important; color: var(--accent-text) !important; padding: 0 !important; margin-left: 6px; font-size: 12.5px !important; font-weight: 500;
}
body.mx-page-cal .dayTitle .rel::before { content: '· '; color: var(--ink-4); }
body.mx-page-cal .dayRows { border-radius: 0; }
body.mx-page-cal .row { padding: 9px 12px !important; }
body.mx-page-cal .row.mx-next { background: var(--accent-wash) !important; box-shadow: inset 2px 0 0 var(--accent); }
.mx-next-badge { background: none; color: var(--accent-text); padding: 0; border-radius: 0; font-size: 11.5px; font-weight: 500; }
.mx-next-badge::before { content: '— '; color: var(--ink-4); }

/* ── Live Chart ──────────────────────────────────────────────────────────── */
body.mx-page-chart .md-toolbar { height: 42px !important; margin: 0 20px 8px; border-radius: 0; }
body.mx-page-chart .md-ticker-btn { height: 28px; border-radius: 0 !important; font-size: 13px !important; }
body.mx-page-chart .md-intervals { border-radius: 0; padding: 2px; }
body.mx-page-chart .md-int-btn { border-radius: 0 !important; height: 24px; min-width: 32px; font-size: 12px !important; }
body.mx-page-chart .md-int-btn.active { box-shadow: none; outline: 1px solid var(--line-solid); outline-offset: -1px; }
body.mx-page-chart .md-icon-action { border-radius: 0 !important; }
body.mx-page-chart .md-chart-wrap { margin: 0 20px 20px; border-radius: 0; }
body.mx-page-chart .md-chart-layout { left: 44px !important; }
.mx-rail { width: 44px; padding: 6px 0; gap: 2px; }
body.mx-page-chart .md-legend { left: 56px !important; border-radius: 0 !important; padding: 8px 10px !important; backdrop-filter: none; background: rgba(23,24,27,.92) !important; }
.mx-rail .mx-rail-group { gap: 2px; padding-bottom: 6px; margin-bottom: 4px; }
.mx-rail-btn { width: 32px; height: 32px; border-radius: 0 !important; }
.mx-rail-btn svg { width: 20px; height: 20px; stroke-width: 1.6; }
.mx-rail-btn.is-active { background: #EDEEF0 !important; color: #111214 !important; }
body.mx-page-chart .md-chart-wrap, .mx-rail { background: #111214 !important; }
.mx-rail { border-right-color: #26282D !important; }
.mx-rail-btn { color: #B6B9BF !important; }
.mx-rail-btn:hover { background: #1D1F23 !important; color: #EDEEF0 !important; }
@media (max-width: 720px) {
  /* the 44px desktop width above also landed on phones, where the rail lies
     along the bottom: it clipped to one tool and the rest vanished */
  body.mx-page-chart .md-chart-layout { left: 0 !important; bottom: 48px !important; }
  .mx-rail { width: auto; right: 0; height: 48px; padding: 0 4px; gap: 0; overscroll-behavior-x: contain; scrollbar-width: none; }
  .mx-rail::-webkit-scrollbar { display: none; }
  .mx-rail .mx-rail-group { flex: none; gap: 0; padding: 0 4px 0 0; margin: 0 4px 0 0; }
  .mx-rail-btn { width: 44px; height: 44px; flex: none; }
}

/* ══ UX sweep fixes ═════════════════════════════════════════════════════════ */

/* header: the refinement pass set a desktop min-width on search that pushed
   the menu button off-screen on phones */
@media (max-width: 1280px) { .mx-search { min-width: 0 !important; } }
@media (max-width: 1080px) {
  .mx-search { width: 32px; padding: 0 !important; justify-content: center; }
  .mx-bar { gap: 10px; }
}

/* floating action button: a square that rotates into a diamond read as broken */
.fab-btn.open { transform: none !important; }
.fab-btn svg { transition: none !important; }
.fab-item {
  border-radius: 0 !important; background: var(--s-raised) !important; border: 1px solid var(--line-solid) !important;
  color: var(--ink) !important; box-shadow: var(--sh-3) !important; font-size: 13px !important;
}
.fab-item:hover { background: var(--s-raised-2) !important; }

/* command palette: the leading mark looked like a checkbox; the hint repeated itself */
.pal-mark { display: none !important; }
.pal-hint::after { content: none !important; }

/* workspace layout switcher: icons were 10px and nearly invisible */
.ws-layout-btn { color: var(--ink-3); border-radius: 0 !important; }
.ws-layout-btn svg { width: 14px !important; height: 14px !important; fill: currentColor !important; }
.ws-layout-btn svg line, .ws-layout-btn svg path { stroke: currentColor !important; fill: none !important; }
.ws-layout-btn:hover, .ws-layout-btn.active { color: var(--ink) !important; background: var(--s-raised-2) !important; }
.ws-cell-empty { background: transparent !important; border: 1px dashed var(--line-solid) !important; border-radius: 0; margin: 8px; }
.ws-cell-empty-lbl, .ws-compact-empty-label { font-size: 12.5px !important; font-weight: 500 !important; color: var(--ink-3) !important; }
.ws-cell-empty-ico, .ws-compact-empty-ico { border-radius: 0 !important; }

/* release / welcome dialog header */
.md-release-badge { border-radius: 0 !important; font-size: 11px !important; font-weight: 600 !important; background: var(--s-raised-2) !important; color: var(--ink-2) !important; border: 1px solid var(--line) !important; }
.md-release-close:focus:not(:focus-visible) { outline: none !important; }
/* market hours: neutral session bars; the petrol tone marks sessions in general */
:root { --mh-session-rgb: 111, 183, 210; }

/* body-as-grid pages: page header pinned under the top bar, body starts below both */
body.mx-shell.mx-body-grid { padding-top: calc(var(--header-h) + var(--mx-pagebar-h, 72px)) !important; box-sizing: border-box; }
body.mx-body-grid > .mx-pagebar { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 900; background: var(--s-canvas); max-width: none; }
body.mx-shell.mx-body-grid { height: 100dvh !important; overflow: hidden !important; }
body.mx-shell.mx-body-flexrow { flex-direction: column !important; flex-wrap: nowrap !important; }
body.mx-shell.mx-body-flexrow > :not(.mx-header):not(.mx-pagebar):not(.mx-sheet):not(.mx-finder) { flex: 1 1 auto; min-height: 0; width: 100%; }
body.mx-shell.mx-body-flexrow > .mx-pagebar { flex: none; }
/* small legacy overflows (negative margins, 100vw columns) must never produce a sideways page scroll */
html:has(body.mx-shell) { overflow-x: clip; }
/* workspace layout buttons: the generic button padding left 0px for the icon */
.ws-layout-btn { padding: 0 !important; min-height: 0 !important; width: 28px !important; height: 26px !important; border: 0 !important; background: transparent !important; }

/* the restraint pass redeclared desktop grids after the mobile queries; restate mobile */
@media (max-width: 960px) {
  body.mx-page-cal .wrap { grid-template-columns: 1fr !important; padding: 0 12px 16px !important; }
  body.mx-page-cal .bar { padding: 8px 0; }
  body.mx-page-cal .chips { display: flex !important; overflow-x: auto !important; }
  body.mx-page-cal .chip { width: auto !important; white-space: nowrap; box-shadow: none; }
  body.mx-page-cal .chip.active { box-shadow: inset 0 -2px 0 var(--accent) !important; }
  body.mx-page-cal .right { grid-template-columns: 1fr; }
  body.mx-page-cal .row-head { display: none !important; }
  body.mx-page-calc #toolMenu { margin-bottom: 14px !important; }
  body.mx-page-calc .md-root { grid-template-columns: 1fr !important; padding: 0 12px 24px !important; }
  body.mx-page-calc #toolMenu { flex-direction: row !important; overflow-x: auto !important; position: static !important; padding: 0 !important; }
  body.mx-page-calc .md-main-tab { white-space: nowrap !important; width: auto !important; }
  body.mx-page-calc .md-main-tab.md-main-active { box-shadow: inset 0 -2px 0 var(--accent) !important; }
  .mx-pagebar { padding: 12px 12px 10px; }
  .mx-desk { padding: 0 12px 10px; }
  body.mx-page-crypto .md-table-wrap, body.mx-page-chart .md-toolbar, body.mx-page-chart .md-chart-wrap { margin-left: 8px !important; margin-right: 8px !important; }
}
/* terminal guide: its tab bar was drawn on a solid border-colour fill */
.navrow, .nav { background: var(--s-raised) !important; }
.nav button { background: transparent !important; color: var(--ink-3) !important; font-weight: 500 !important; }
.nav button:hover { color: var(--ink) !important; }
.nav button.active { color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--ink) !important; background: transparent !important; }
/* COT heat cells: text on a coloured fill takes full ink */
.hcell { color: var(--ink) !important; }
/* Smart Decision Signal: canvas zoom controls to 24px targets; node titles readable in light */
#cvZoomIn, #cvZoomOut, #cvZoomReset { min-width: 26px !important; min-height: 26px !important; }

/* …except the synthesizer, whose header is a solid accent fill */



/* ── fixed-viewport modules ──────────────────────────────────────────────
   Scanners and desks written as full-height apps keep their own internal
   scroller (sticky header, scrolling row body). The shell gives that app the
   viewport minus its own chrome so the panel scrolls, not the document. */
body.mx-shell.mx-body-app {
  height: 100dvh !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
body.mx-shell.mx-body-app > .mx-app-main {
  height: calc(100dvh - var(--mx-top, 130px)) !important;
  max-height: calc(100dvh - var(--mx-top, 130px)) !important;
  min-height: 0 !important;
  /* auto, not hidden: on pages where the app container IS the scroller
     (Prices is one long table) hidden clipped 35 000px of rows away */
  overflow: auto;
}


/* ── Market Analytics skin ───────────────────────────────────────────────
   Correlation, ratio, seasonality, prediction and statistics share one
   control size, one section header and one panel rhythm, so the family reads
   as one desk instead of five imported layouts. */
body.mx-group-market-analytics :is(select, input[type="text"], input[type="search"], input:not([type]), button):not(.mx-icon):not(.mx-action):not(.mx-chip) {
  min-height: 28px;
  font-size: 12px;
  border-radius: 0;
}
body.mx-group-market-analytics :is(select, input) {
  background: var(--s-sunken, #131417);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 0 9px;
}
body.mx-group-market-analytics :is(select, input):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
body.mx-group-market-analytics button:not(.mx-icon):not(.mx-action):not(.mx-chip) {
  border: 1px solid var(--line);
  background: var(--s-raised);
  color: var(--ink-2);
  letter-spacing: .04em;
  padding: 0 12px;
}
body.mx-group-market-analytics button:not(.mx-icon):not(.mx-action):not(.mx-chip):hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
/* A segmented control is ONE control: the group height belongs to the wrapper.
   Applying it to each button burst the buttons out of the .seg border box and
   out of the 31px section bar above the matrix. */
body.mx-group-market-analytics .seg {
  height: 26px;
  border-radius: 0;
  overflow: hidden;
  flex: 0 0 auto;
}
body.mx-group-market-analytics .seg .seg-btn {
  min-height: 0;
  height: 100%;
  border-radius: 0;
  font-size: 10px;
  letter-spacing: .06em;
  padding: 0 10px;
  white-space: nowrap;
}
body.mx-group-market-analytics .sectionbar {
  height: auto;
  min-height: 34px;
  padding-top: 3px;
  padding-bottom: 3px;
}
/* section headers: index, title, meta on one baseline */
body.mx-group-market-analytics :is(.sec-head, .section-head, .md-sec-head, .panel-head, .chart-head) {
  min-height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-2);
  gap: 10px;
}
/* chrome accents follow Metra's petrol, data colours stay untouched */
body.mx-group-market-analytics :is(.sec-title, .section-title, .md-sec-title, .panel-title, .chart-head-title) {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* the family used gold as its accent; Metra's chrome is petrol
   (data up/down colours are untouched) */
body.mx-group-market-analytics {
  --md-gold: var(--accent);
  --gold: var(--accent);
  --md-goldf: var(--accent-wash);
}

/* the popover lives inside the page bar, so the bar has to outrank the page
   content or the table paints straight over it */
body.mx-why-open .mx-pagebar { z-index: 60; }

/* ── "Untuk apa" — every module says what it is for ──────────────────────
   The short line rides the existing icon tooltip; the panel is the full read,
   and it is a click, not a hover, so a touch screen can reach it too. */
.mx-why {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; margin-left: 2px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: none; color: var(--ink-4);
  font: inherit; font-size: var(--fs-xs); line-height: 1; cursor: pointer;
  transition: color var(--t) var(--e), border-color var(--t) var(--e);
}
.mx-why svg { width: 14px; height: 14px; flex: 0 0 14px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.mx-why:hover { color: var(--ink-2); border-color: var(--ink-3); }
.mx-why[aria-expanded="true"] { color: var(--ink); border-color: var(--accent);
  background: var(--accent-wash); }
.mx-why:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.mx-why-panel {
  position: absolute; z-index: 60; top: calc(100% - 6px); left: var(--sp-5);
  width: min(620px, calc(100vw - 32px));
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--s-raised); box-shadow: var(--sh-3);
  padding: 14px 16px 16px;
}
.mx-why-panel[hidden] { display: none; }
.mx-why-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mx-why-head span { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.mx-why-close { margin-left: auto; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-ctl); background: none; color: var(--ink-4); cursor: pointer; }
.mx-why-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; }
.mx-why-close:hover { color: var(--ink); background: var(--s-raised-2); }
.mx-why-desc { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.7; max-width: 74ch; }
.mx-why-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 24px; margin-top: 14px; }
.mx-why-col h3 { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 400; margin-bottom: 6px; }
.mx-why-col ul { list-style: none; margin: 0; padding: 0; }
.mx-why-col li { position: relative; padding: 0 0 6px 14px;
  color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.6; }
.mx-why-col li::before { content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 1px; background: var(--accent-text); }
.mx-why-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  color: var(--accent-text); font-size: var(--fs-xs); text-decoration: none; }
.mx-why-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-why-more:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .mx-why span { display: none; }
  .mx-why { padding: 0 8px; }
  .mx-why-panel { left: 16px; right: 16px; width: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TERMINAL POLISH — compact market desk language
   Bloomberg-like density comes from hierarchy and alignment: restrained chrome,
   strong data numerals, and enough breathing room around the information.
══════════════════════════════════════════════════════════════════════════ */
:root {
  --desk-grid: rgba(143,147,154,.11);
  --desk-grid-strong: rgba(143,147,154,.18);
  --desk-panel: #15171A;
  --desk-panel-alt: #101215;
  --desk-focus: #86C8DE;
}

/* Keep the canvas quiet and let panels create the information rhythm. */
body {
  background: var(--s-canvas) !important;
  color: var(--ink);
}
:is(.mx-desk, .mx-content, .wrap, .page, .app, main) {
  max-width: 1680px;
}
/* One column edge on wide screens. The header and the page bar are capped at
   1680px and centred, but each desk's own top-level blocks were full width (or
   capped and left-aligned), so at 1920px the title sat at x=140 and the desk at
   x=20. Past the width where the cap bites, every top-level block of a desk
   page takes the same centred column. Overlays and fixed chrome are left out. */
@media (min-width: 1721px) {
  body.mx-shell:not(.mx-terminal) > :is(div, section, main, article, form, table):not(.mx-header):not(.mx-pagebar):not(.mt-tape):not(.mx-mega):not(.mx-sheet):not(.mx-finder):not(.mtd):not(.mtd-veil):not(.mt-ai-panel):not(#mt-boot):not(script):not(style):not(link):not(dialog):not([role="dialog"]):not([class*="modal"]):not([class*="toast"]):not([class*="overlay"]):not([id*="toast"]) {
    max-width: var(--mx-max, 1680px) !important; width: 100%; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
  }
}
:is(.md-panel, .panel, .card, .md-card, .md-chart-card, .chart-panel, .chart-card) {
  background: var(--desk-panel) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
:is(.md-panel-header, .panel-header, .section-head, .chart-head, .card-head, .cardHead) {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--desk-panel-alt);
  border-bottom: 1px solid var(--line);
}
:is(.md-panel-header, .panel-header, .section-head, .chart-head, .card-head, .cardHead) :is(h1,h2,h3,.title,.label,.chart-head-title) {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

/* Compact market data tables: labels stay quiet, figures align and breathe. */
thead th { height: 32px; padding: 0 12px !important; }
tbody td { height: 34px; padding: 4px 12px !important; box-sizing: border-box; }   /* a two-line cell (symbol over name) keeps 8px from the next row */
tbody tr { transition: background-color var(--t) var(--e); }
tbody tr:hover { background: var(--s-raised-2) !important; }
:is(td, th):not(:first-child) { font-variant-numeric: tabular-nums; }
:is(.price, .value, .num, [class*="price"], [class*="value"], [class*="pct"], [class*="chg"]) {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
}

/* Filters read as a single desk control row. */
:is(.toolbar, .controls, .filters, .commandbar, .sectionbar) {
  min-height: 38px;
  gap: 6px;
  padding: 5px 10px;
  background: var(--desk-panel-alt);
  border-bottom: 1px solid var(--line);
}
:is(.toolbar, .controls, .filters, .commandbar, .sectionbar) :is(button, select, input) {
  min-height: 27px;
  padding: 0 9px;
  border-radius: 0 !important;
  font-size: 11px;
}
:is(button, .btn, select):is(.active, .on, [aria-selected="true"]) {
  color: var(--desk-focus) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
  background: var(--accent-wash) !important;
}

/* Chart surfaces: a clear header and predictable visual edge. */
:is(.chart, .chart-body, [id*="Chart"], [id*="chart"]) {
  min-height: 180px;
}
:is(.chart-panel, .chart-card, .md-chart-card) :is(.chart, .chart-body) {
  background: var(--desk-panel) !important;
}
:is(.legend, .chart-legend) {
  color: var(--ink-3) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
}

@media (max-width: 720px) {
  :is(.md-panel, .panel, .card, .md-card, .md-chart-card) { border-radius: 0 !important; }
  :is(.toolbar, .controls, .filters, .commandbar, .sectionbar) { overflow-x: auto; scrollbar-width: none; }
  :is(.toolbar, .controls, .filters, .commandbar, .sectionbar)::-webkit-scrollbar { display: none; }
  thead th { height: 30px; }
  tbody td { height: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT-WIDE DESK PASS — shared across every MetraTerminal module
══════════════════════════════════════════════════════════════════════════ */
:root {
  --desk-max: 1680px;
  --desk-gutter: 20px;
  --desk-gap: 12px;
  --desk-header: #101215;
  --desk-rule: #282b31;
}

/* Keep every module on the same canvas and content rhythm. */
body:not(.mx-terminal) { background: var(--s-canvas) !important; }
body:not(.mx-terminal) :is(.mx-desk, .mx-content, .wrap, .page, main, [role="main"]) {
  max-width: var(--desk-max);
}
body:not(.mx-terminal) :is(.mx-desk, .mx-content, .wrap, .page) {
  margin-left: auto; margin-right: auto;
}

/* Page headers become a compact terminal title strip. */
body:not(.mx-terminal) .mx-pagebar {
  min-height: 66px;
  padding: 12px var(--desk-gutter) 11px;
  margin-bottom: 0;
  background: var(--s-canvas);
}
body:not(.mx-terminal) .mx-pagebar-main { display: grid; gap: 3px; }
body:not(.mx-terminal) .mx-title-row { gap: 9px; }
body:not(.mx-terminal) .mx-title { font-size: 21px !important; }
body:not(.mx-terminal) .mx-crumb ol { margin-bottom: 0; color: var(--ink-4); }
body:not(.mx-terminal) .mx-today { color: var(--ink-3); }
body:not(.mx-terminal) :is(.mx-page-actions, .mx-sessions) { align-self: center; }

/* Shared command strip: labels, filters and actions line up as one instrument bar. */
body:not(.mx-terminal) :is(.md-toolbar, .toolbar, .controls, .filters, .commandbar, .sectionbar, .filterbar) {
  min-height: 40px;
  padding: 6px var(--desk-gutter);
  background: var(--desk-header);
  border-top: 1px solid var(--desk-rule);
  border-bottom: 1px solid var(--desk-rule);
  gap: 7px;
}
body:not(.mx-terminal) :is(.md-toolbar, .toolbar, .controls, .filters, .commandbar, .sectionbar, .filterbar) :is(button, select, input) {
  height: 28px; min-height: 28px; border-radius: 0 !important; font-size: 11px;
}
body:not(.mx-terminal) :is(.md-toolbar, .toolbar, .controls, .filters, .commandbar, .sectionbar, .filterbar) :is(label, .label, .k, .control-label) {
  color: var(--ink-4); font-family: var(--mono) !important; font-size: 10px;
}

/* A single panel grammar works for dashboards, research, screeners and tools. */
body:not(.mx-terminal) :is(.md-panel, .panel, .card, .md-card, .md-result-main, .md-chart-card, .chart-panel, .chart-card, .metric, .kpi) {
  background: var(--s-raised) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body:not(.mx-terminal) :is(.md-panel-header, .panel-header, .chart-head, .cardHead, .card-head, .section-head, .chart-panel-header) {
  min-height: 36px;
  padding: 0 12px;
  background: var(--desk-header);
  border-bottom: 1px solid var(--line);
}
body:not(.mx-terminal) :is(.md-panel-header, .panel-header, .chart-head, .cardHead, .card-head, .section-head, .chart-panel-header) :is(h1,h2,h3,.title,.chart-head-title,.section-title) {
  color: var(--ink-2) !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .05em !important; text-transform: uppercase !important;
}

/* KPI strips have an obvious value, context line, and signal colour. */
body:not(.mx-terminal) :is(.kpi, .metric, .md-metric, .stat, .va-kpi) {
  padding: 11px 12px; min-height: 72px; display: flex; flex-direction: column; justify-content: center;
}
body:not(.mx-terminal) :is(.kpi-label, .metric-label, .md-lbl, .lbl, .stat .k) {
  color: var(--ink-3); font-size: 10px; line-height: 1.25;
}
body:not(.mx-terminal) :is(.kpi-value, .metric-value, .md-metric .v, .stat .v, .va-kpi .v) {
  margin-top: 5px; color: var(--ink); font-family: var(--mono) !important; font-size: 17px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
body:not(.mx-terminal) :is(.kpi-sub, .metric-sub, .summary, .hint, .meta) { color: var(--ink-3); font-size: 10px; }

/* Data tables are calm and scannable. */
body:not(.mx-terminal) table { font-size: 12px; }
body:not(.mx-terminal) thead th { height: 31px; padding: 0 11px !important; background: var(--desk-header) !important; }
body:not(.mx-terminal) tbody td { height: 34px; padding: 4px 11px !important; box-sizing: border-box; }
body:not(.mx-terminal) tbody tr:hover { background: var(--s-raised-2) !important; }
body:not(.mx-terminal) :is(td, th, .num, .value, .price, .kpi-value, .metric-value) { font-variant-numeric: tabular-nums; }

/* Chart panels reserve useful space without letting empty charts dominate. */
body:not(.mx-terminal) :is(.chart-body, .chart, .md-chart, .md-chart-wrap, [id*="Chart"], [id*="chart"]) {
  min-height: 210px;
}
body:not(.mx-terminal) :is(.chart-body, .chart, .md-chart, .md-chart-wrap) { background: var(--s-raised) !important; }
body:not(.mx-terminal) :is(.empty, .empty-state, .no-data, .md-empty, .ob-msg) {
  color: var(--ink-3); font-size: 12px; line-height: 1.5;
}
body:not(.mx-terminal) :is(.empty b, .empty-state b, .no-data b, .md-empty b) { color: var(--ink-2); font-weight: 500; }

/* Keep data colours reserved for data. */
body:not(.mx-terminal) :is(.up, .positive, .gain, .chg-up) { color: var(--up) !important; }
body:not(.mx-terminal) :is(.down, .negative, .loss, .chg-dn) { color: var(--down) !important; }

@media (max-width: 720px) {
  :root { --desk-gutter: 10px; --desk-gap: 8px; }
  body:not(.mx-terminal) .mx-pagebar { min-height: 58px; padding: 10px var(--desk-gutter); }
  body:not(.mx-terminal) .mx-title { font-size: 19px !important; }
  body:not(.mx-terminal) :is(.mx-page-actions, .mx-sessions) { width: 100%; }
  body:not(.mx-terminal) :is(.md-toolbar, .toolbar, .controls, .filters, .commandbar, .sectionbar, .filterbar) { overflow-x: auto; padding: 6px var(--desk-gutter); scrollbar-width: none; }
  body:not(.mx-terminal) :is(.md-toolbar, .toolbar, .controls, .filters, .commandbar, .sectionbar, .filterbar)::-webkit-scrollbar { display: none; }
  body:not(.mx-terminal) :is(.kpi, .metric, .md-metric, .stat, .va-kpi) { min-height: 64px; padding: 9px 10px; }
  body:not(.mx-terminal) :is(.chart-body, .chart, .md-chart, .md-chart-wrap, [id*="Chart"], [id*="chart"]) { min-height: 170px; }
  body:not(.mx-terminal) tbody td { height: 32px; padding: 4px 9px !important; box-sizing: border-box; }
}

/* Metra Research — the call, drawn */
.md-rs-spark { display: block; width: 100%; height: 96px; margin-top: 10px;
  border-radius: var(--r-ctl); background: var(--s-sunken); }

/* Metra Signals — the thesis and what tested it */
.md-rs-badge-pattern { color: var(--accent-text) !important;
  border-color: var(--accent-wash-2) !important; background: var(--accent-wash) !important; }
.md-rs-confirm { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.md-rs-chk { font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: help; }
.md-rs-chk.ok { color: var(--up); background: var(--up-wash); border-color: var(--up-wash); }
.md-rs-chk.no { color: var(--ink-4); background: var(--s-raised-2); }

/* ══════════════════════════════════════════════════════════════════════════
   PIXEL LAYER
   ──────────────────────────────────────────────────────────────────────────
   Everything above this line was written for a rounded, graphite interface.
   Rather than rewrite fifteen hundred lines, this section states the pixel
   rules once and lets them win. It is last in the file on purpose.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── corners ─────────────────────────────────────────────────────────────── */
/* A pixel has corners. Every radius in the product, including the ones typed
   as literals in page-level <style> blocks, squares off here. */
body *:not(svg):not(svg *) { border-radius: 0 !important; }
body { background: #000 !important; }

/* ── the mark ────────────────────────────────────────────────────────────── */
.mx-logo-mark, .ad-mark svg, .fn-brand svg, .lg-mark svg {
  color: var(--ink);
  image-rendering: pixelated;
}
/* the old mark was a rounded blue tile with a stroked path; the new one is a
   single-colour pixel glyph, so both of those declarations have to go */
.mx-logo-mark rect { fill: currentColor !important; }
.mx-logo-mark path { fill: currentColor !important; stroke: none !important; }
.mx-logo-word, .ad-mark b, .fn-brand b, .lg-mark b {
  font-family: var(--pixel) !important;
  font-weight: 400;
  text-transform: none;
}
.mx-logo-word { font-size: 21px !important; }

/* ── type ────────────────────────────────────────────────────────────────── */
/* Bitmap type for anything that is a label, a code, a heading or a control —
   the places where it is read as a shape. Prose keeps the sans. */
:is(h1, h2, h3,
    .mx-mega-title, .mx-col-title, .mx-mod-code, .mx-domain,
    .eyebrow, .kicker, .section-title, .card-title, .hs-title, .hs-btn,
    .ad-grp, .ad-card span, .ad-panel h2, table.ad th, .pill,
    .fn-plan .tag, .fn-svc-row .code, .fn-mark, .fn-panel > h2, .fn-btn,
    .btn, .md-btn, .seg button, .tab, .chip, .fn-chip,
    .ad-link, .ad-jump-item, .fn-top nav a) {
  font-family: var(--pixel) !important;
  letter-spacing: 0 !important;
}
/* headings and buttons carry inline spans; without this they drop back to the
   sans because of the blanket `body *` family rule higher up this file */
:is(h1, h2, h3, .fn-btn, .btn, .fn-plan h2, .fn-card h1) * {
  font-family: inherit !important;
}
/* the small uppercase labels: eyebrows, section rules, column heads */
:is(.fn-eyebrow, .fn-rule > span, .fn-rule > b, .fn-cell span, .fn-tile > span,
    .ad-grp, .ad-card span, .ad-panel h2, table.ad th, thead th, .pill,
    .fn-lock, .mx-mod-code) {
  font-family: var(--pixel-label) !important;
  letter-spacing: 0 !important;
}
/* Bitmap faces have no optical sizing: they need looser leading and none of
   the negative tracking the sans was given. */
h1, h2, h3 { letter-spacing: 0 !important; line-height: 1.18; font-weight: 600; }

/* ── chrome ──────────────────────────────────────────────────────────────── */
/* Blur and translucency are the opposite of a bitmap. Panels are opaque. */
.mx-header, .fn-top, .mx-mega, .mx-finder, .mt-ai-panel {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: #000 !important;
}
.mx-mega, .mt-ai-panel { background: var(--s-raised) !important; }
* { box-shadow: none !important; }
.mx-mega, .mx-finder, .mt-ai-panel, .vk-deep, .ad-jump-in {
  box-shadow: 0 0 0 1px var(--line-solid) !important;
}

/* ── focus ───────────────────────────────────────────────────────────────── */
/* A hard square ring, offset by one pixel step, never a soft halo. */
:focus-visible {
  outline: 2px solid #FFF !important;
  outline-offset: 2px !important;
}

/* ── links ───────────────────────────────────────────────────────────────── */
/* The accent is white, so a tinted link would be invisible as a link. Anything
   inside running text underlines instead. */
p a:not(.btn):not(.fn-btn):not(.mx-cta), li a:not(.btn):not(.fn-btn), .ad-hint a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── motion ──────────────────────────────────────────────────────────────── */
/* Bitmap interfaces do not ease; they step. Anything that still animates does
   so in whole frames. */
@media (prefers-reduced-motion: no-preference) {
  .rv, .fn-step.on { animation-timing-function: steps(6, end) !important; }
}

/* ── the wordmark ──────────────────────────────────────────────────────────
   The mark IS the M. Next to a word that also began with M it read "M Metra",
   so the word lost its first letter and the glyph took the job: mark + "etra".

   For that to read as one word rather than an icon beside a word, two things
   have to be true. The glyph must be the cap height of the text next to it,
   so it is sized in em and scales with whatever it sits in. And its foot must
   land on the text baseline, which is what `align-items: baseline` does for a
   replaced element in a flex row.

   The accessible name lives on the link, so assistive tech still hears
   "Metra Terminal" and never "etra". */
.mx-logo, .fn-brand, .ad-mark, .lg-mark {
  align-items: baseline !important;
  gap: 1px !important;
}
.mx-logo-mark, .fn-brand > svg, .ad-mark > svg, .lg-mark > svg {
  height: .74em !important;
  width: calc(.74em * 9 / 7) !important;
  flex: none;
  image-rendering: pixelated;
}
/* Pixelify Sans carries a little side bearing; pull the word back so the stem
   of the M and the shoulder of the e sit one pixel apart. */
.mx-logo-word, .fn-brand b, .ad-mark b, .lg-mark b { margin-left: -.04em; }

/* ══════════════════════════════════════════════════════════════════════════
   REACH  ·  hit areas, spill, and the floating toggle
   ──────────────────────────────────────────────────────────────────────────
   Found by measuring every page at 390 and 1440: breadcrumbs 14px tall, the
   favourite button 26px, names running out of their cell, and the assistant's
   toggle sitting on top of list rows and filter chips.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hit areas ─────────────────────────────────────────────────────────────
   A breadcrumb should stay small; a breadcrumb TARGET should not. The visible
   text keeps its size and an invisible pad around it does the catching, so the
   bar does not grow by 22px on every page. */
.mx-crumb a, .mx-crumb-link, .mx-fav, .mx-logo { position: relative; }
.mx-crumb a::after, .mx-crumb-link::after {
  content: ""; position: absolute; inset: -11px -7px;
}
.mx-fav::after { content: ""; position: absolute; inset: -6px; }
.mx-logo::after { content: ""; position: absolute; inset: -9px -4px; }
/* the pad must not eat clicks meant for the row underneath */
.mx-mod-row .mx-fav::after { inset: -5px -4px; }

@media (pointer: coarse) {
  .mx-crumb a::after, .mx-crumb-link::after { inset: -13px -9px; }
  .mx-fav { min-width: 32px; min-height: 32px; }
}

/* ── spill ─────────────────────────────────────────────────────────────────
   An inline span does not clip: `overflow:hidden` on it is ignored until it
   becomes a block, so a long asset name ran 21px past its cell. */
.vk-id .nm, .vk-id .tk, .vk-view-id .nm {
  display: block; max-width: 100%; min-width: 0;
}
.vk-id .tk { display: flex; }
.vk-id { overflow: hidden; }

/* ── the floating toggle ───────────────────────────────────────────────────
   It is draggable, but its resting place still covers the bottom-right corner,
   so the end of any list sat underneath it. Pages that carry the assistant get
   enough tail room to scroll clear. */
/* Only pages that scroll. A workspace page is already sized to the viewport,
   and the tail room there just left a band of black above the price tape. */
body:has(.mtd-fab):not(.mx-body-app) main,
body:has(.mtd-fab):not(.mx-body-app) #mt-main,
body:has(.mtd-fab):not(.mx-body-app) #app,
body:has(.mtd-fab):not(.mx-body-app) .vk-list,
body:has(.mtd-fab):not(.mx-body-app) .ad-main { padding-bottom: 88px; }
body:has(.mtd-fab) { scroll-padding-bottom: 92px; }
/* a page whose body is the scroller needs the room on the body instead */
body.fn:has(.mtd-fab) { padding-bottom: 20px; }

/* The page-level favourite button sits inside the pagebar, and the pagebar's
   own main block paints over it, so the invisible pad around the button caught
   nothing. Raise the button out of that stack and give it real height rather
   than relying on the pad alone. */
.mx-fav.mx-fav-page {
  /* a narrow media query sets height:26px !important further up; this wins on
     specificity rather than by shouting louder */
  position: relative; z-index: 2;
  height: 32px !important; padding: 0 10px !important;
}
.mx-fav.mx-fav-page::after { inset: -5px -3px; z-index: -1; }

/* Measured effective reach, not box size: these came back at 28-29px once the
   invisible pad was counted, which is still under the 30px floor. The pad grows
   rather than the control, so nothing on screen shifts. */
.mx-crumb a::after, .mx-crumb-link::after { inset: -13px -9px; }
.mx-crumb a, .mx-crumb-link { z-index: 1; }

/* Terminal controls that sit at exactly 28px. A coarse pointer gets 32px; a
   mouse keeps the dense bar it was designed for. */
@media (pointer: coarse) {
  .hs-btn, .hs-movers-tab, .md-ticker-btn, .md-int-btn,
  .md-icon-action, .seg button, .md-tab {
    min-height: 32px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HIERARCHY LAYER
   ──────────────────────────────────────────────────────────────────────────
   The pixel layer set every heading, tab, button, chip and column head in a
   bitmap face. When everything is display type nothing is: panel titles,
   filter chips and table heads all shouted at the same volume, and 9px
   Silkscreen capitals in a table are hard on the eyes. Four roles now, each
   with one job:

     display   Pixelify   page title, wordmark, the one big figure
     title     Plex 600   panel and section titles, 15px, full white
     control   Plex 500   buttons, tabs, chips, 13px, grey until chosen
     label     Plex 500   column heads and small keys, 12px, dim grey

   Body copy steps down to --ink-2 so titles and figures carry the white.
   The funnel pages (.fn) keep their own display treatment.
   ══════════════════════════════════════════════════════════════════════════ */
html body:not(.fn) :is(h2, h3, .card-title, .section-title, .hs-title, .hs-movers-title,
    .mx-col-title, .ad-panel h2, .md-panel-title, .panel-title) {
  font-family: var(--sans) !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
html body:not(.fn) :is(.hs-title, .hs-movers-title) { font-size: 15px !important; color: var(--ink) !important; }
html.mt-widget body .mt-runtime-title {
  font-family: var(--sans) !important; font-weight: 600 !important; font-size: 15px !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important;
}
html body:not(.fn) :is(.btn, .md-btn, .seg button, .tab, .chip, .hs-btn, .pill, .md-tab,
    .hs-movers-tab, .md-int-btn, .mx-domain, .md-toggle, .md-filter-btn) {
  font-family: var(--sans) !important; font-weight: 500 !important; letter-spacing: .01em !important;
}
html body:not(.fn) :is(thead th, table.ad th, .mx-mod-code) {
  font-family: var(--sans) !important; font-weight: 500 !important; font-size: 12px !important;
  letter-spacing: .02em !important; color: var(--ink-3) !important;
}
html body:not(.fn) :is(td, .num, [class*="-val"], [class*="price"]) { font-variant-numeric: tabular-nums; }

/* prose one step down from the titles */
html body:not(.fn) :is(p, li, .hs-summary-text) { color: var(--ink-2); }
body.mx-terminal .hs-summary-text { font-size: 15px !important; line-height: 1.7 !important; }
body.mx-terminal .hs-summary-text :is(b, strong) { color: var(--ink) !important; font-weight: 600 !important; }

/* ── panels: raised surface, a real header row ───────────────────────────────
   Cards were black on black with a hairline, so the page read as one flat
   sheet. Panels now sit one step up (--s-raised) and every panel opens with
   a 48px header that holds the title on the left and its controls on the
   right, the same in the home grid and in each home widget. */
html.mt-widget body { background: var(--s-raised) !important; }
html body:not(.fn) :is(.hs-hdr, .hs-movers-hdr) {
  min-height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  padding: 0 16px !important; border-bottom: 1px solid var(--line) !important;
}
/* the dashboard grid's gutters are the canvas; the panels are the raised thing */
body.mx-terminal #md-home { background: var(--s-canvas) !important; }
/* a headline is the link, not a link inside prose: no underline until hover */
html body :is(.lw-title, .cn-item, .cn-item *, [class*="headline"] a, a[class*="-title"]) { text-decoration: none !important; }
html body :is(.lw-title, a[class*="-title"]):hover { text-decoration: underline !important; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   SYSTEM LAYER  ·  one scale for space, size, motion and surface
   ──────────────────────────────────────────────────────────────────────────
   space     4 · 8 · 12 · 16 · 24 · 32 · 48
   controls  32 dense · 40 default · 48 primary (44 minimum on touch)
   surfaces  canvas #000 → raised #0B0B0B (panels, menus) → overlay #161616
             (hover, selected). Depth comes from the surface, not from more
             borders; borders are for structure only:
   lines     --line-solid  edge of a control or a dialog
             --line        edge of a panel or a section
             --line-2      between rows, the quietest
   motion    120ms for state (hover, press), 180ms for things that appear.
             Nothing loops except live indicators and loaders.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --ctl-sm: 32px; --ctl-md: 40px; --ctl-lg: 48px;
  --dur-1: 120ms; --dur-2: 180ms; --ease-out: cubic-bezier(.2, .8, .2, 1);
  --s-overlay: #161616;
}
/* the bitmap label face is kept for the funnel; in the product it read as noise */
html body:not(.fn) { --pixel-label: var(--sans); }

@keyframes mtDrop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes mtPop  { from { opacity: 0; transform: translateY(8px); } }
@keyframes mtFade { from { opacity: 0; } }

/* ── navigation links are not prose links ─────────────────────────────── */
html body :is(.mx-mega, .mx-sheet, .mx-finder, .mx-header, nav) a { text-decoration: none !important; }

/* ── page bar ─────────────────────────────────────────────────────────── */
html body .mx-title { font-family: var(--pixel) !important; font-weight: 400 !important; letter-spacing: 0 !important; }
html body .mx-pagebar :is(.mx-why, .mx-fav-page) {
  height: 36px !important; padding: 0 12px !important; gap: 8px; font: 500 13px/1 var(--sans) !important;
  color: var(--ink-2) !important; background: transparent !important; border: 1px solid var(--line-solid) !important;
}
html body .mx-pagebar :is(.mx-why, .mx-fav-page):hover { color: var(--ink) !important; background: var(--s-overlay) !important; }
html body .mx-pagebar .mx-fav-page.on { color: var(--ink) !important; border-color: var(--ink) !important; }
html body .mx-crumb { font-size: 13px; }
html body .mx-crumb a { color: var(--ink-3) !important; text-decoration: none !important; }
html body .mx-crumb a:hover { color: var(--ink) !important; }

/* ── mega menu: title large, rows with a purpose line ─────────────────── */
html body .mx-mega { background: var(--s-raised) !important; border-bottom: 1px solid var(--line-solid); }
html body .mx-mega:not([hidden]) { animation: mtDrop var(--dur-2) var(--ease-out) both !important; }
html body .mx-mega-inner { grid-template-columns: 240px 1fr; gap: 48px; padding: 32px 24px 36px; }
html body .mx-mega-kicker { display: block; margin: 0 0 8px; font-size: 12px; color: var(--ink-4); }
html body .mx-mega-title { font-family: var(--pixel) !important; font-weight: 400 !important; font-size: 32px !important; line-height: 1 !important; margin: 0 0 12px !important; }
html body .mx-mega-blurb { font-size: 14px !important; line-height: 1.55; color: var(--ink-3) !important; }
html body .mx-mega-cols { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px 32px; }
html body .mx-col { border-top: 0 !important; padding-top: 0 !important; }
html body .mx-col-title { margin: 0 0 8px !important; padding: 0 12px 10px; border-bottom: 1px solid var(--line); font: 500 12.5px/1 var(--sans) !important; color: var(--ink-3) !important; }
html body .mx-mods { display: grid; gap: 2px; }
html body .mx-mod {
  display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px;
  min-height: 56px; padding: 10px 44px 10px 12px !important; font-size: 14px !important; color: var(--ink) !important;
}
html body .mx-mod-name { font-weight: 500; }
html body .mx-mod-desc { order: 3; flex: 1 0 100%; font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html body .mx-mod .mx-mod-code { order: 2; border: 0 !important; padding: 0 !important; font: 500 11px/1 var(--mono) !important; color: var(--ink-4) !important; }
html body .mx-mod:hover { background: var(--s-overlay) !important; }
html body .mx-mod:hover .mx-mod-desc { color: var(--ink-2); }
html body .mx-mod.is-active { background: transparent !important; border-left: 2px solid var(--ink); padding-left: 10px !important; }
html body .mx-sheet .mx-mod-desc { display: none; }
html body .mx-sheet .mx-mod { min-height: 48px; }

/* ── search ───────────────────────────────────────────────────────────── */
html body .mx-finder { background: rgba(0,0,0,.76) !important; padding: 12vh 16px 16px !important; }
html body .mx-finder:not([hidden]) { animation: mtFade var(--dur-2) ease-out both; }
html body .mx-finder-box {
  width: min(680px, 100%) !important; background: var(--s-raised) !important; border: 1px solid var(--line-solid) !important;
  display: flex; flex-direction: column; max-height: 76vh; animation: mtPop var(--dur-2) var(--ease-out) both !important;
}
html body .mx-finder-ctx { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--ink); background: var(--s-overlay); border-bottom: 1px solid var(--line); }
html body .mx-finder-field { flex: none; height: 60px; gap: 12px; padding: 0 10px 0 18px !important; border-bottom: 1px solid var(--line) !important; }
html body .mx-finder-field:focus-within { border-bottom-color: var(--ink) !important; }
html body .mx-finder-field input {
  height: 58px !important; flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important;
  font: 400 17px/1 var(--sans) !important; color: var(--ink) !important;
}
html body .mx-finder-field input::-webkit-search-cancel-button { display: none; }
html body .mx-finder-esc { flex: none; height: 36px; padding: 0 6px; border: 0; background: transparent; cursor: pointer; }
html body .mx-finder-esc:hover kbd { color: var(--ink); border-color: var(--ink-3); }
html body .mx-finder-list { flex: 1; min-height: 0; max-height: none !important; padding: 8px !important; overflow: auto; overscroll-behavior: contain; }
html body .mx-finder-group { padding: 14px 12px 6px; font-size: 12px; color: var(--ink-4); list-style: none; }
html body .mx-finder-group:first-child { padding-top: 6px; }
html body .mx-finder-list li[role="option"] {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px; align-items: center;
  min-height: 60px; padding: 10px 12px !important; border-left: 2px solid transparent; cursor: pointer;
}
html body .mx-finder-list li[aria-selected="true"] { background: var(--s-overlay) !important; border-left-color: var(--ink); }
html body .mx-opt-name { grid-column: 1; font: 500 14.5px/1.3 var(--sans) !important; color: var(--ink) !important; }
html body .mx-opt-name mark { background: none; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html body .mx-opt-meta { grid-column: 1; font-size: 12.5px !important; line-height: 1.4; color: var(--ink-3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .mx-opt-side { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 12px; }
html body .mx-opt-dom { font-size: 12px; color: var(--ink-4); }
html body .mx-finder-list .mx-opt-side .mx-mod-code { font: 500 11px/1 var(--mono) !important; color: var(--ink-3); border: 1px solid var(--line-solid); padding: 4px 5px; }
html body .mx-finder-empty { list-style: none; display: grid; justify-items: center; gap: 10px; padding: 36px 16px 32px !important; text-align: center; }
html body .mx-finder-empty .mt-figure { width: 72px; height: auto; fill: var(--ink-3); margin-bottom: 6px; }
html body .mx-finder-empty b { font: 600 15px/1.3 var(--sans); color: var(--ink); }
html body .mx-finder-empty > span { font-size: 13px; color: var(--ink-3); }
html body .mx-finder-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
html body .mx-finder-chips button { height: 32px; padding: 0 12px; border: 1px solid var(--line-solid); background: transparent; color: var(--ink-2); font: 500 13px/1 var(--sans); cursor: pointer; }
html body .mx-finder-chips button:hover { border-color: var(--ink); color: var(--ink); }
html body .mx-finder-foot { flex: none; gap: 20px !important; padding: 12px 18px !important; font-size: 12px !important; color: var(--ink-4) !important; border-top: 1px solid var(--line) !important; }
html body .mx-finder-foot .mx-finder-count { margin-left: auto; }
html body :is(.mx-finder, .mx-search) kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin-right: 4px;
  border: 1px solid var(--line-solid); background: var(--s-canvas); color: var(--ink-3); font: 500 11px/1 var(--mono) !important;
}
#pal { display: none !important; }
@media (max-width: 560px) {
  html body .mx-finder { padding: 0 !important; }
  html body .mx-finder-box { max-height: 100dvh; height: 100dvh; border: 0 !important; }
  html body .mx-opt-dom, html body .mx-finder-foot span:not(.mx-finder-count) { display: none; }
}

/* the figure, wherever it is used */
.mt-figure { image-rendering: pixelated; }
.mt-figure .mt-figure-blink { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .mt-figure .mt-figure-face { animation: mtFigFace 4s steps(1, end) infinite; }
  .mt-figure .mt-figure-blink { animation: mtFigBlink 4s steps(1, end) infinite; }
}
@keyframes mtFigFace { 0%, 92% { visibility: visible; } 93%, 100% { visibility: hidden; } }
@keyframes mtFigBlink { 0%, 92% { visibility: hidden; } 93%, 100% { visibility: visible; } }

/* ── form fields: one look, one focus ─────────────────────────────────── */
html body :is(input, textarea)::placeholder { color: var(--ink-4) !important; opacity: 1 !important; font-style: normal; }
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible {
  outline: 1px solid var(--ink) !important; outline-offset: -1px !important;
}

/* ── separators: rows are quieter than sections ───────────────────────── */
html body:not(.fn) tbody > tr > :is(td, th) { border-bottom-color: var(--line-2) !important; }
html body:not(.fn) thead > tr > th { border-bottom-color: var(--line-solid) !important; }
html body:not(.fn) tbody > tr:hover > td { background-color: var(--s-overlay); }

/* ── press feedback on the controls people use most ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html body :is(.mx-view > button, .mx-action, .mx-why, .mx-fav-page, .md-split-head-btn, .ws-layout-btn, .mx-finder-chips button, .hs-movers-tab, .md-int-btn, .seg button, .filter-btn):active { transform: translateY(1px); }
}
html body #mx-finder #mtNavQ:focus-visible, html body #mx-finder #mtNavQ { outline: 0 !important; border: 0 !important; box-shadow: none !important; }

/* ── phone menu: two quiet shortcuts, then the areas as a list ────────── */
/* Two full-white slabs at the top of the menu were the loudest thing on the
   screen and neither was the thing most people opened the menu for. */
html body .mx-sheet-home {
  display: flex !important; align-items: center; justify-content: space-between; min-height: 52px;
  padding: 0 16px !important; background: transparent !important; color: var(--ink) !important;
  border: 1px solid var(--line-solid) !important; font: 500 15px/1 var(--sans) !important; text-decoration: none !important;
}
html body .mx-sheet-home:hover { background: var(--s-overlay) !important; }
html body .mx-sheet-home svg { width: 20px !important; height: 20px !important; stroke-width: 1.6 !important; color: var(--ink-3); }
html body .mx-sheet-home + .mx-sheet-home { margin-top: 8px; }
html body .mx-acc summary {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; align-items: center;
  min-height: 64px; padding: 14px 4px !important; font: 600 17px/1.2 var(--sans) !important; cursor: pointer;
}
html body .mx-acc summary span { grid-column: 1; grid-row: 2; font: 400 13px/1.4 var(--sans) !important; color: var(--ink-3) !important; margin: 0 !important; }
html body .mx-acc summary svg { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 720px) { html body .mx-search kbd { display: none !important; } }

/* ── arrival: panels settle in once, in reading order ─────────────────── */
/* Everything used to paint at once, so there was no first thing to look at.
   The page head leads, then panels follow 40ms apart. Once only: data
   refreshes never re-run it. */
@media (prefers-reduced-motion: no-preference) {
  html body .mx-pagebar { animation: mtFade 240ms ease-out both !important; }
  html body.mx-terminal #md-home .hs, html body.mx-terminal #md-home .hs-summary-zone > *, html body.mx-terminal #md-home iframe {
    animation: mtPop 280ms var(--ease-out) both !important;
  }
  html body.mx-terminal #md-home :is(.hs, iframe):nth-of-type(2) { animation-delay: 40ms !important; }
  html body.mx-terminal #md-home :is(.hs, iframe):nth-of-type(3) { animation-delay: 80ms !important; }
  html body.mx-terminal #md-home :is(.hs, iframe):nth-of-type(n+4) { animation-delay: 120ms !important; }
  html body > .mx-app-main, html body > .mt-surface:not(#app) { animation: mtFade 240ms 60ms ease-out both; }
}
/* the Value desks draw their search lens as a background; a blanket input
   background above erased it and left an empty 33px gap before the text */
html body .vk-search {
  background: var(--s-canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.0 10.5a6.5 6.5 0 1 0 13.0 0a6.5 6.5 0 1 0 -13.0 0M16 16l4.5 4.5' style='fill:none!important;stroke:%23A2A2A2!important;stroke-width:1.6px;stroke-linecap:square;stroke-linejoin:miter'/%3E%3Cpath d='M7 7h2.2v2.2h-2.2z' style='fill:%23A2A2A2!important;stroke:none!important'/%3E%3C/svg%3E") no-repeat 12px 50% !important;
  padding-left: 38px !important;
}
/* the header gave the wordmark a 40px box but set its glyphs on the baseline,
   so on a phone the mark sat ~9px above the buttons beside it. The box now
   hugs the type and centres in the bar, as it already did in the menu sheet;
   the ::after pad keeps the tap target. */
html body .mx-header .mx-logo { min-height: 0 !important; height: auto !important; align-self: center !important; }
html body .mx-sheet-head .mx-logo { transform: translateY(-1.5px); }

/* ══════════════════════════════════════════════════════════════════════════
   ONE BOX PER CONTROL
   ──────────────────────────────────────────────────────────────────────────
   Reported: buttons inside boxes, boxes inside boxes, a blue "active" that
   is not a Metra colour, grey-blue panels. Rules:
   · a group of options is ONE bordered bar; its options have no borders of
     their own, only a hairline between them
   · a labelled field is ONE bordered box; the label is grey text inside it
   · selected = white fill, black text. Everywhere. No blue.
   · desk panels use the product surfaces, not their own blue-grey
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --desk-panel: var(--s-raised); --desk-panel-alt: var(--s-raised); --desk-header: var(--s-raised);
  --desk-rule: var(--line); --desk-focus: var(--ink);
  --desk-grid: rgba(255,255,255,.06); --desk-grid-strong: rgba(255,255,255,.1);
}

/* selected */
html body:not(.fn) :is(button, .btn, [role="tab"]):is(.active, .on, .is-active, [aria-selected="true"]):not(.mx-rail-btn):not(.mx-mod):not(.mx-fav):not([role="option"]) {
  color: var(--s-canvas) !important; background: var(--ink) !important; border-color: var(--ink) !important;
}
html body:not(.fn) :is(button, .btn, [role="tab"]):is(.active, .on, .is-active, [aria-selected="true"]):not(.mx-rail-btn):not(.mx-fav) * { color: inherit !important; }
html body:not(.fn) :is(button, .btn, [role="tab"]):is(.active, .on, .is-active, [aria-selected="true"]) svg :is(path, line, polyline, rect, circle) { stroke: currentColor; }

/* option groups: one border around the group, hairlines between options */
html body:not(.fn) :is(.seg, [class*="-seg"]:not([class*="-seg-"]), .sam-tf, .md-intervals, .md-layer-tools, .hs-movers-switch,
    .ta-tabs, .plm-tablist, .md-tabs, .tabs:not(.mx-tabs), [role="tablist"]:not(.tr-tabs):not(.mx-view)) {
  align-items: stretch; gap: 0 !important; padding: 0 !important; height: auto !important;
  border: 1px solid var(--line-solid) !important; background: transparent !important;
}
html body:not(.fn) :is(.seg, [class*="-seg"]:not([class*="-seg-"]), .sam-tf, .md-intervals, .md-layer-tools, .hs-movers-switch,
    .ta-tabs, .plm-tablist, .md-tabs, .tabs:not(.mx-tabs), [role="tablist"]:not(.tr-tabs):not(.mx-view)) > :is(button, [role="tab"], a) {
  margin: 0 !important; border: 0 !important; background: transparent; box-sizing: border-box;
  display: inline-flex !important; align-items: center !important; justify-content: center; line-height: 1.2 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
html body:not(.fn) :is(.seg, [class*="-seg"]:not([class*="-seg-"]), .sam-tf, .md-intervals, .md-layer-tools, .hs-movers-switch,
    .ta-tabs, .plm-tablist, .md-tabs, .tabs:not(.mx-tabs), [role="tablist"]:not(.tr-tabs):not(.mx-view)) > :is(button, [role="tab"], a) + :is(button, [role="tab"], a) {
  border-left: 1px solid var(--line) !important;
}
html body:not(.fn) :is(.seg, [class*="-seg"], .sam-tf, .md-intervals, .md-layer-tools, .hs-movers-switch, .ta-tabs, .plm-tablist, .md-tabs, .tabs, [role="tablist"]) > :is(button, [role="tab"]):not(.active):not(.on):not(.is-active):not([aria-selected="true"]):hover {
  background: var(--s-overlay) !important; color: var(--ink) !important;
}
html body .hdr-right { gap: 12px !important; }

/* labelled fields: one box, label as grey text inside it */
html body:not(.fn) :is(.md-lmp-field, .md-control, .cw-in, .ta-asset, .ti-asset, .md-kr-asset, .sam-ticker-input) {
  display: inline-flex !important; align-items: center; gap: 0 !important; padding: 0 !important;
  border: 1px solid var(--line-solid) !important; background: var(--s-canvas) !important; min-height: 36px;
}
html body:not(.fn) :is(.md-lmp-field, .md-control, .cw-in, .ta-asset, .ti-asset, .md-kr-asset, .sam-ticker-input) > :is(input, select, button, span, label) {
  border: 0 !important; background: transparent !important; min-height: 34px !important; height: 34px !important; box-sizing: border-box;
}
html body:not(.fn) :is(.md-lmp-field, .md-control, .cw-in, .ta-asset, .ti-asset, .md-kr-asset, .sam-ticker-input) > :is(input, select, button) + :is(input, select, button) {
  border-left: 1px solid var(--line) !important;
}
html body:not(.fn) :is(.md-lmp-field, .ta-asset, .ti-asset) > span:first-child {
  display: inline-flex; align-items: center; padding: 0 2px 0 10px !important; font: 500 12px/1 var(--sans) !important;
  color: var(--ink-4) !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap;
}
html body:not(.fn) :is(.md-lmp-field, .md-control, .cw-in, .ta-asset, .ti-asset, .md-kr-asset, .sam-ticker-input):focus-within { border-color: var(--ink) !important; }
html body:not(.fn) :is(.md-lmp-field, .md-control, .cw-in, .ta-asset, .ti-asset, .md-kr-asset, .sam-ticker-input) :is(input, select):focus-visible { outline: 0 !important; }
html body .md-lmp-sep, html body .md-lmp-spacer:empty { border: 0 !important; background: transparent !important; }

/* grey panels left from older desk skins */
html body .shell > main.main, html body .asset-bar .btn:not(.active):not(.on) { background: var(--s-canvas) !important; }
/* table cells that cut their text now say so with an ellipsis */
html body td .reason { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* scrollbars: the default grey track read as a grey panel beside every
   scrolling column (reported on Backtest) */
html body * { scrollbar-width: thin; scrollbar-color: var(--line-solid) transparent; }
html body ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
html body ::-webkit-scrollbar-track, html body ::-webkit-scrollbar-corner { background: transparent; }
html body ::-webkit-scrollbar-thumb { background: var(--line-solid); border: 2px solid transparent; background-clip: padding-box; }
html body ::-webkit-scrollbar-thumb:hover { background-color: var(--ink-4); }

/* a toolbar that already has a border: its fields and buttons do not get another */
html body .md-lmp-toolbar { height: auto !important; min-height: 44px; padding: 0 !important; align-items: stretch !important; }
html body .md-lmp-toolbar > :is(.md-lmp-field, .md-lmp-btn, .md-lmp-source) {
  border: 0 !important; border-left: 1px solid var(--line) !important; min-height: 0 !important; height: auto !important;
}
html body .md-lmp-toolbar > :first-child { border-left: 0 !important; }
html body .md-lmp-toolbar > .md-lmp-field > :is(input, select, span) { height: 100% !important; min-height: 0 !important; }
html body .md-lmp-toolbar > .md-lmp-sep { display: none !important; }
html body .md-lmp-toolbar > .md-lmp-clock { align-self: center; margin-left: auto; padding: 0 12px; }

/* multi-select layer toggles (Order Flow: heat, depth, trades…): several can
   be on at once, so "on" is a filled marker, not a white slab per button */
html body .md-layer-tools > .md-layer-btn { display: inline-flex !important; align-items: center; gap: 8px; }
html body .md-layer-tools > .md-layer-btn::before { content: ''; width: 8px; height: 8px; border: 1px solid currentColor; flex: none; }
html body .md-layer-tools > .md-layer-btn:is(.active, .on):not(#_) { background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; }
html body .md-layer-tools > .md-layer-btn:is(.active, .on)::before { background: currentColor; }
html body .md-layer-tools > .md-layer-btn:not(.active):not(.on):not(#_) { color: var(--ink-4) !important; }

/* stat strips: the cells wrap instead of scrolling out of a clipped panel,
   and draw one grid of hairlines instead of a box per figure */
html body .metric-strip {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important; gap: 0 !important;
  overflow: visible !important; margin: -1px 0 0 -1px; background: transparent !important;
}
html body .metric-strip > .metric { border: 0 !important; border-left: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; background: var(--s-raised) !important; min-width: 0; }
html body .panel:has(> .metric-strip) { min-height: max-content !important; overflow: hidden; }
html body .main:has(> .panel > .metric-strip) { grid-template-rows: max-content minmax(260px, 1fr) minmax(220px, .72fr) !important; overflow-y: auto; }
/* Order Flow side panel: the tab group had a fixed width, so a wider tab ran
   out of it and over the venue line beside it */
html body .md-side-tabs { flex: none !important; width: auto !important; max-width: none !important; display: inline-flex !important; border: 1px solid var(--line-solid) !important; padding: 0 !important; gap: 0 !important; }
html body .md-side-tabs > button { border: 0 !important; margin: 0 !important; }
html body .md-side-tabs > button + button { border-left: 1px solid var(--line) !important; }
html body .md-side-tabs + .md-depth-venue { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

/* a pressed option inside a group is selected too */
html body:not(.fn) :is(.seg, [class*="-seg"], .sam-tf, .md-intervals, .hs-movers-switch, .ta-tabs, .plm-tablist, .md-tabs, .tabs) > button[aria-pressed="true"]:not(#_) {
  background: var(--ink) !important; color: var(--s-canvas) !important;
}
/* icon toggles (Live Chart layers, chart type…) can be on several at once:
   on = bright icon on a raised tile with a white rule under it, not a white slab */
html body .md-icon-action:is(.active, .on, [aria-pressed="true"]):not(#_) {
  background: var(--s-overlay) !important; color: var(--ink) !important; border-color: transparent !important;
  border-bottom: 2px solid var(--ink) !important;
}
/* a selected row in a list is marked at its edge, not filled white */
html body .md-mor-date:is(.active, .on, [aria-selected="true"]):not(#_) {
  background: var(--s-overlay) !important; color: var(--ink) !important; border-left: 2px solid var(--ink) !important;
}
html body .ta .ta-seg button { min-width: 0 !important; padding: 0 6px !important; }
/* Live Chart toolbar: the symbol button and the scroll arrows sat as boxes inside the bordered toolbar */
html body .md-toolbar > :is(.md-ticker-btn, .md-toolbar-scroll-btn) { border: 0 !important; background: transparent !important; }
html body .md-toolbar > .md-ticker-btn { border-right: 1px solid var(--line) !important; }
html body .md-toolbar > .md-toolbar-scroll-btn:hover, html body .md-toolbar > .md-ticker-btn:hover { background: var(--s-overlay) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   COLOUR · 60 / 30 / 10
   ──────────────────────────────────────────────────────────────────────────
   60  near-black depth     canvas #090909 · panel #121212 · hover #1F1F1F ·
                            borders and inactive controls #262626
   30  white information    primary #FFFFFF · body #D4D4D4 · muted #737373
   10  amber, and only where the eye should go next: the primary action on a
       screen, the marker of where you are (active nav, active tab, active
       pane), slider handles, focus. #D97706 · hover #B45309 · pressed #92400E
   Green and red stay reserved for price direction. Selected options inside
   a group stay white-filled: white means "chosen", amber means "go".
   `html:root` so these win over the older desks' own :root blocks.
   ══════════════════════════════════════════════════════════════════════════ */
html:root {
  --s-canvas: #090909; --s-sunken: #090909; --s-raised: #121212; --s-raised-2: #1F1F1F; --s-overlay: #1F1F1F;
  --line: #262626; --line-solid: #262626; --line-2: #1C1C1C;
  --ink: #FFFFFF; --ink-2: #D4D4D4; --ink-3: #A3A3A3; --ink-4: #8C8C8C;   /* #737373 was 3.8:1 on panels; #8C8C8C is 5.5:1 (WCAG AA) */
  --amber: #D97706; --amber-hover: #B45309; --amber-press: #92400E; --amber-wash: rgba(217, 119, 6, .14);
  /* the older desks' own palettes, pointed at the same three families */
  --md-bg: #090909; --md-bg1: #121212; --md-bg2: #121212; --md-border: #262626;
  --md-text: #FFFFFF; --md-text2: #D4D4D4; --md-muted: #A3A3A3; --md-dim: #8C8C8C;
  --desk-panel: #121212; --desk-panel-alt: #121212; --desk-header: #121212; --desk-rule: #262626;
  accent-color: var(--amber);
}
html body, html body.fn { background: var(--s-canvas) !important; }
html body :is(.mx-header, .fn-top) { background: var(--s-canvas) !important; }
html body :is(.mx-mega, .mt-ai-panel, .mx-finder-box, .mx-sheet) { background: var(--s-raised) !important; }
html body .mx-pagebar { background: var(--s-canvas) !important; }
html.mt-widget body { background: var(--s-raised) !important; }
/* muted information: dates, meta lines, captions */
html body :is(.mx-today, .mx-crumb, .lg-issue, .hs-regime-sub, .fn-meta) { color: var(--ink-4) !important; }
html body :is(.hs-summary-text, .fn-lede, .lg-lede p) { color: var(--ink-2) !important; }

/* ── 10%: the primary action on each screen ───────────────────────────── */
html body :is(.fn-btn.pri, .fn-btn.acc, .btn.primary, .md-btn.primary, button.run, .ta-go, .ti-go, .md-kr-btn-primary, .rb-btn.pri,
    #hs-sum-btn, .md-split-state-action, .mx-finder-chips button[data-primary]) {
  background: var(--amber) !important; border-color: var(--amber) !important; color: #090909 !important; font-weight: 600 !important;
}
html body :is(.fn-btn.pri, .fn-btn.acc, .btn.primary, .md-btn.primary, button.run, .ta-go, .ti-go, .md-kr-btn-primary, .rb-btn.pri,
    #hs-sum-btn, .md-split-state-action):hover { background: var(--amber-hover) !important; border-color: var(--amber-hover) !important; color: #FFFFFF !important; }
html body :is(.fn-btn.pri, .fn-btn.acc, .btn.primary, .md-btn.primary, button.run, .ta-go, .ti-go, .md-kr-btn-primary, .rb-btn.pri,
    #hs-sum-btn, .md-split-state-action):active { background: var(--amber-press) !important; border-color: var(--amber-press) !important; color: #FFFFFF !important; }
html body :is(.fn-btn.pri, .fn-btn.acc, .btn.primary, .md-btn.primary, button.run, .ta-go, .ti-go, .md-kr-btn-primary, .rb-btn.pri, #hs-sum-btn) * { color: inherit !important; }
/* a second, quieter action beside the primary one stays neutral */
html body .fn-btn.sm:not(.pri):not(.acc) { background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; }

/* ── 10%: where you are ───────────────────────────────────────────────── */
html body .mx-domain.is-current::after { background: var(--amber) !important; }
html body .mx-domain.is-current { color: var(--ink) !important; }
html body .md-split-pane.is-active .md-split-pane-head::before { background: var(--amber) !important; }
html body .mx-finder-list li[aria-selected="true"] { border-left-color: var(--amber) !important; }
html body .mx-mod.is-active { border-left-color: var(--amber) !important; }
html body .md-icon-action:is(.active, .on, [aria-pressed="true"]):not(#_) { border-bottom-color: var(--amber) !important; }
html body .md-mor-date:is(.active, .on, [aria-selected="true"]):not(#_) { border-left-color: var(--amber) !important; }
html body .md-layer-tools > .md-layer-btn:is(.active, .on):not(#_)::before { background: var(--amber); border-color: var(--amber); }
html body .mx-rail-btn.is-active { background: var(--amber) !important; color: #090909 !important; }

/* ── 10%: handles and focus ───────────────────────────────────────────── */
html body input[type="range"] { accent-color: var(--amber); }
html body input[type="range"]::-webkit-slider-thumb { background: var(--amber) !important; border-color: var(--amber) !important; }
html body input[type="range"]::-moz-range-thumb { background: var(--amber) !important; border-color: var(--amber) !important; }
html body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--amber); }
html body :focus-visible { outline-color: var(--amber) !important; }
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible { outline-color: var(--amber) !important; }
html body :is(.md-lmp-field, .md-control, .cw-in, .ta-asset, .ti-asset, .md-kr-asset, .sam-ticker-input, .mx-finder-field):focus-within { border-color: var(--amber) !important; }

/* ── 60/30/10 across every desk ─────────────────────────────────────────
   A census of all 56 screens found the last off-palette colours: the old
   warning yellow (#FFB020) on tags and plan badges, a blue heat grid on
   Daily Active Addresses, coin-brand colours on news tags. Attention is
   amber now; rank and weight are shades of white; coin tags are neutral.
   Chart series and price direction are data and keep their own colours. */
html:root { --warn: var(--amber); --info: var(--ink); }
html body .vk-tag.warn { color: var(--amber) !important; border-color: color-mix(in srgb, var(--amber) 45%, transparent) !important; }
html body .vk-tile { background: rgba(255, 255, 255, calc(var(--h, .1) * .42)) !important; }
html body .vk-tile.on { outline-color: var(--amber) !important; }
html body .coin-tag { background: transparent !important; color: var(--ink-3) !important; border: 1px solid var(--line) !important; }
html body .tr-tier.max { color: var(--amber) !important; border-color: color-mix(in srgb, var(--amber) 45%, transparent) !important; }

/* tabs (views of the same panel) are marked the way the top navigation is:
   white label, amber rule under it. Option groups (1D/1W, Binance/Bybit)
   keep the white fill, so "which view" and "which value" never look alike. */
html body:not(.fn) :is([role="tablist"]:not(.tr-tabs):not(.mx-view):not(.hs-movers-switch), .md-side-tabs, .tabs:not(.mx-tabs), .ta-tabs, .plm-tablist, .md-tabs) {
  border: 0 !important; border-bottom: 1px solid var(--line) !important; background: transparent !important; gap: 4px !important;
}
html body:not(.fn) :is([role="tablist"]:not(.tr-tabs):not(.mx-view):not(.hs-movers-switch), .md-side-tabs, .tabs:not(.mx-tabs), .ta-tabs, .plm-tablist, .md-tabs) > :is(button, [role="tab"], a):not(#_) {
  border: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important;
  background: transparent !important; color: var(--ink-3) !important; padding: 0 12px !important;
}
html body:not(.fn) :is([role="tablist"]:not(.tr-tabs):not(.mx-view):not(.hs-movers-switch), .md-side-tabs, .tabs:not(.mx-tabs), .ta-tabs, .plm-tablist, .md-tabs) > :is(button, [role="tab"], a):is(.active, .on, .is-active, [aria-selected="true"], [aria-pressed="true"]):not(#_) {
  color: var(--ink) !important; border-bottom-color: var(--amber) !important; background: transparent !important;
}
html body:not(.fn) :is([role="tablist"]:not(.tr-tabs):not(.mx-view):not(.hs-movers-switch), .md-side-tabs, .tabs:not(.mx-tabs), .ta-tabs, .plm-tablist, .md-tabs) > :is(button, [role="tab"], a):hover:not(#_) { color: var(--ink) !important; background: var(--s-overlay) !important; }
html body .results-head > .title { flex: none !important; white-space: nowrap !important; }
html body .results-head > .tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
html body .mx-mod .mx-mod-desc { font-weight: 400 !important; }

/* Cards are the phone's layout only (owner's call, 2 Oct): on a desktop the
   earlier ruled panels stay. 760px is the shell's own phone threshold. */
@media (max-width: 760px) {
/* ══════════════════════════════════════════════════════════════════════════
   CARDS · every desk
   ──────────────────────────────────────────────────────────────────────────
   Review: the terminal read like a newspaper — panels at #121212 on a #090909
   canvas are one step apart, so a desk was a field of hairlines rather than a
   set of things you could point at. Panels are now cards: #161616 on #090909,
   with the same #262626 edge. Raising the surface instead of brightening the
   edge does two things at once: every card stands off the canvas, and every
   rule *inside* a card (table rows, header underlines) gets quieter, because
   it now sits closer to its own background. Nearly every desk draws its
   panels from these tokens, so this one block reaches them all; the few that
   painted their panels the canvas colour (Gold, Morning Briefs, Order Flow,
   Value) are named below.
   ══════════════════════════════════════════════════════════════════════════ */
html:root {
  --s-raised: #161616; --s-raised-2: #202020; --s-overlay: #202020;
  --line-2: #1E1E1E;
  --md-bg1: #161616; --md-bg2: #161616;
  --desk-panel: #161616; --desk-panel-alt: #161616; --desk-header: #161616;
  --card: #161616; --card-edge: #2A2A2A; --card-gap: 12px;
}
html:root { --card-edge: #2E2E2E; }
/* the panels every family draws, as cards: one surface, one edge. `html body`
   so the family sheets that load after this one (macro, gold, value) yield */
html body :is(.mk-panel, .md-panel, .panel, .card, .chart-panel, .stat-card, .table-panel, .ks-card, .rb-card, .ms-card,
  .ms-stats, .sam-card, .sam-conc, .md-kr-card, .md-kr-pane, .md-lmp-panel, .md-depth-panel, .ob-panel, .tr-card,
  .intel-box, .chart-box, .lw-side, .lw-main, .cw-answer, .cw-sens, .lc-spec, .cb-stats, .update-card) {
  background-color: var(--card) !important; border-color: var(--card-edge) !important;
}
/* Gold set its panels in the canvas colour on purpose ("one ruled sheet"):
   that is the newspaper this block retires. A strip of figures that stands
   on its own is a card too; inside a card it stays part of it. */
html body .gd :is(.mk-panel, .fd-list) { background: var(--card) !important; }
html body .mk > .mk-kpis, html body .mk > .mk-figs, html body .mk > .mk-grid2 > .mk-kpis { background: var(--card) !important; border-color: var(--card-edge) !important; }
html body .mk .mk-panel .mk-kpis, html body .mk .mk-panel .mk-figs { background: transparent !important; }
/* a status bar is not a section break: no rule under it */
html body .gd .mk-bar { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* Value desks were drawn as one ruled instrument sheet (mt-value.css). The
   reading, the scale and the list are now three cards with the controls
   between them on the canvas; the rules that used to separate them go. */
html body .vk > :is(.vk-read, .vk-scale) { background: var(--card); border: 1px solid var(--card-edge); margin-bottom: var(--card-gap); }
html body .vk > .vk-read { margin-top: 4px; }
html body .vk .vk-read-pair { border-top-color: var(--line-2); }
html body .vk .vk-split > .vk-main, html body .vk .vk-split > .vk-view { background: var(--card); border: 1px solid var(--card-edge); }
html body .vk .vk-head { background: var(--card) !important; }
html body .vk > .vk-bar, html body .vk > .vk-rail { border-bottom: 0; }
html body .vk > .vk-foot { border-top: 0; }

/* Morning Briefs: a front page with a 2px rule on top and a rule over every
   section. The front-page block and each section's body are cards; the
   section heads sit above them on the canvas, unruled. */
html body .md-mor-opening { background: var(--card) !important; border: 1px solid var(--card-edge) !important; padding-left: 24px; }
html body .md-mor-opening .md-mor-opening-state { border-left-color: var(--line-2) !important; padding-right: 24px; }
html body .md-mor-section { border-top: 0 !important; }
html body .md-mor-section > :is(.md-mor-market, .md-mor-focus, .md-mor-flow, .md-mor-change-grid, .md-mor-narratives,
  .md-mor-playbook, .md-mor-risk) { background: var(--card) !important; border: 1px solid var(--card-edge) !important; }
html body .md-mor-source { border-top: 0 !important; }

/* Families that drew rules where cards belong. Each named once, by its own
   classes; nothing here changes what a desk shows, only what it sits on. */
/* Technicals (Market Structure, Mean Reversion, S&R, Indicators, Trend):
   the reading, the chart, the timeframe rail and the notes are four cards */
html body .ta .ta-read { background: var(--card); border: 1px solid var(--card-edge); padding: 22px 24px; margin-bottom: var(--card-gap); }
html body .ta .ta-body { border-bottom: 0; gap: var(--card-gap); }
html body .ta .ta-main { background: var(--card); border: 1px solid var(--card-edge); padding: 18px 20px; }
html body .ta .ta-rail { background: var(--card); border: 1px solid var(--card-edge); }
html body .ta .ta-notes { gap: var(--card-gap); margin-top: var(--card-gap); }
html body .ta .ta-note, html body .ta .ta-note + .ta-note { background: var(--card); border: 1px solid var(--card-edge) !important; padding: 18px 20px !important; }
/* chart grids found by mt-cardgrid.js (Seasonality, Correlation, …): the panels are cards */
html body .mt-cg > .mt-cg-p { background-color: var(--card) !important; outline-color: var(--card-edge) !important; }
/* scanner tables that sat straight on the canvas */
html body :is(#tableWrap, .ps-wrap) { background: var(--card); border: 1px solid var(--card-edge); }
html body aside.md-detail, html body .md-detail-body { background: var(--card) !important; }
/* Live Order Book: the ladder is a card like the panels beside it */
html body .ob-left { background: var(--card) !important; border-color: var(--card-edge) !important; }
/* Metra Index: reading, performance, allocation, holdings */
html body :is(.mix-read, .mix-perf, .mix-alloc, .mix-hold) { background: var(--card); border: 1px solid var(--card-edge); padding: 18px 20px; margin-bottom: var(--card-gap); border-top-color: var(--card-edge) !important; }
/* Calculators: the form is a card; the answers beside it already are */
html body .cw-left { background: var(--card); border: 1px solid var(--card-edge); padding: 18px 20px; }
html body .cw-right { background: transparent !important; }
/* Terminal Guide: one card per area */
html body .gd-desk { background: var(--card); border: 1px solid var(--card-edge); padding: 18px 20px; margin-bottom: var(--card-gap); }
html body aside.gd-rail { background: var(--card) !important; border: 1px solid var(--card-edge); }
}