/* ══════════════════════════════════════════════════════════════════════════
   METRA — layout, last word
   ──────────────────────────────────────────────────────────────────────────
   Linked after every other stylesheet and after each page's own <style>, so
   what is set here is what renders. It exists because the shell's spacing had
   been set in four places that disagreed:

     · the header bar used clamp(12px, 2.2vw, 28px): 28px on a desktop,
     · the page bar and the page surface used 20px,
     · the six value desks sat on the browser's default 8px body margin and
       then added their own 15px row gutter,
     · the terminal home used 28px.

   So the logo, the breadcrumb and the first panel started at three different
   x positions on the same screen. Every trading desk we measured (Kraken Pro,
   OKX, Gemini, Coinbase Advanced) holds one outer gutter: the logo's left edge
   is the page title's left edge is the first panel's left edge. One token now
   does that job, and the controls that share a row share a height.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --gutter: 20px;
  --ctl-h: 32px;
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
}
@media (pointer: coarse) {
  :root { --ctl-h: 40px; }
}

/* ── one outer gutter ─────────────────────────────────────────────────────── */
html body { margin: 0; }
html body .mx-bar,
html body .mx-pagebar {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
html body .mx-pagebar { padding-top: 12px !important; padding-bottom: 12px !important; }
html body :is(#mt-main.mt-surface, .mx-app-main, section.mx-desk, #plm-wrap, #mdLmpApp) {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
/* the value desks' rows run full bleed, but their text starts on the gutter */
html body { --vk-gut: var(--gutter); }

/* ── the wordmark ─────────────────────────────────────────────────────────── */
/* Its glyphs centred at 26.5px in a 52px bar while the nav's centred at 25px:
   the logo read as sitting low. One pixel up puts both on the same line. */
html body .mx-bar .mx-logo { top: -1px; }

/* ── controls that share a row share a height ─────────────────────────────── */
html body .mx-title-row > :is(button, a) {
  box-sizing: border-box;
  height: var(--ctl-h) !important;
  min-height: var(--ctl-h) !important;
  display: inline-flex; align-items: center;
}
html body .mx-title-row { align-items: center; }
@media (max-width: 720px) {
  /* the header's search collapses to an icon here; it and the menu button
     are the same square, not a 32×40 next to a 32×32 */
  html body .mx-tools > :is(.mx-search, .mx-menu, .mx-icon) {
    box-sizing: border-box;
    width: 40px !important; height: 40px !important; min-height: 40px !important;
  }
}

/* ── the shell does not inherit a page's element rules ─────────────────────── */
/* Some desks style bare `button` / `input` for their own forms (Technical
   Indicators sets button{width:100%;height:31px}). Those rules reached the
   shell and stretched "Untuk apa" across the page, stacking the title row
   into three lines. Shell controls size to their content. */
/* square icon buttons keep their square: width:auto shrank the profile
   button to 18px and the row bookmark to 13px */
html body :is(.mx-header, .mx-pagebar, .mt-tape) :is(button, a):not(.mx-icon):not(.mx-fav) {
  width: auto;
  text-transform: none;
}
html body .mx-pagebar .mx-title-row > .mx-title { flex: none; }

/* breadcrumb items share a baseline; the underlined first link sat 2px low */
html body .mx-crumb :is(ol, ul) { align-items: baseline; }

/* ── auth cards ───────────────────────────────────────────────────────────── */
/* The sign-in, register and reset cards picked up a border and a fill from
   the pixel pass but never any padding, so the heading, the fields and the
   submit button all ran flush into the card's edge. */
html body .fn-card { box-sizing: border-box; padding: 28px 28px 24px; }
html body .fn-card .fn-alt { margin-bottom: 0; }
@media (max-width: 480px) { html body .fn-card { padding: 22px 18px 18px; } }

/* ── terminal page actions ────────────────────────────────────────────────── */
/* Split is built after the shell mounts and used to print its name with an
   ::after that did not count toward the button's width, so "Split" ran out of
   its 58px box and over the Workspace icon. It now carries a real label like
   Workspace does; both size to their content and sit on one row. */
html body .mx-page-actions { display: flex; align-items: center; gap: 8px; }
html body .mx-page-actions #mdSplitPill::after { content: none !important; }
html body .mx-page-actions :is(#mdSplitPill, #wsPill) {
  box-sizing: border-box; height: 32px !important; width: auto !important;
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 0 12px !important; border: 1px solid var(--line) !important; white-space: nowrap;
}
html body .mx-page-actions :is(#mdSplitPill, #wsPill) svg { width: 16px !important; height: 16px !important; flex: none; }

/* ── chart min-height only for chart boxes ────────────────────────────────── */
/* mt-brand gives anything whose id contains "chart" a 210px min-height, meant
   for chart containers. It also caught labels: #chartTitle on Technical
   Indicators grew to 210px, the chart header to 227px, and the chart itself
   was pushed to the bottom of its panel and cut off. Text and meta elements
   are not chart boxes. */
html body :is(span, b, small, strong, em, label, p, a, button, h1, h2, h3, h4)[id*="hart"],
html body [id*="hart"]:is([id$="meta"], [id$="Meta"], [id*="Title"], [id*="title"], [id$="Empty"], [id$="Label"]) {
  min-height: 0 !important;
}

/* ── the price tape's own controls ────────────────────────────────────────── */
/* Touch-size rules give buttons a 36-40px minimum. In a 26px strip that made
   the Live control overflow downwards, so their
   labels sat below the centred prices. They take the strip's height. */
html body .mt-tape button {
  min-height: 0 !important; height: 100% !important; box-sizing: border-box;
  padding-top: 0 !important; padding-bottom: 0 !important;
  display: inline-flex; align-items: center;
}

/* ── the terminal ends where the tape begins ──────────────────────────────── */
/* The terminal is a 100dvh flex column. Its old status bar sat inside that
   column; the shell tape is fixed, so the column has to leave room for it or
   the bottom row of panels runs underneath. */
html.mt-has-tape body.mx-terminal { padding-bottom: var(--mx-tape-h) !important; }

/* everything docked in the tape reads as one strip: same face, same size,
   hairline separators, no boxes */
html body .mt-tape-dock :is(button, button *) {
  font-family: var(--pixel-label, monospace) !important;
  font-size: 9px !important; font-weight: 400 !important; letter-spacing: .04em;
}
html body .mt-tape-dock button {
  border: 0 !important; border-inline-start: 1px solid var(--line) !important;
  background: var(--s-canvas, #000) !important; color: var(--ink-3) !important;
}
html body .mt-tape-dock button:hover { color: var(--ink) !important; background: var(--s-raised) !important; }
html body .mt-tape-dock #mx-quick { border-left: 0 !important; }

/* ── a locked desk ends above the tape ────────────────────────────────────── */
/* The shell locks a desk's body to the screen (100dvh, no scroll) and lets
   its main panel take the rest. The tape is fixed over the last 26-28px of
   that screen, so the panel's bottom row sat underneath it: Technical
   Indicators, Order Flow. The locked body now stops at the tape. A page the
   shell unlocks because it grew past the screen scrolls instead
   (.mx-page-scroll) and gets the ordinary end-of-page clearance. */
html.mt-has-tape body.mx-shell[style*="100dvh"] { padding-bottom: var(--mx-tape-h) !important; }
html.mt-has-tape body.mx-shell.mx-page-scroll > .mt-surface { padding-bottom: calc(var(--mx-tape-h) + 24px) !important; }

/* ── a header wider than its column ───────────────────────────────────────── */
/* Fixed-layout tables size columns from their own widths, and a nowrap header
   longer than its column ran into the next one ("Reversion Hit Rate" over
   "Read", "NOTIONAL" over "POS"). It is cut with an ellipsis instead;
   mt-align.js puts the full label in a tooltip. */
html body table:is([style*="fixed"], .md-lmp-table, .md-table, .mt-fixed) th,
html body .mt-table-scroll table th {
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 720px) {
  html body .md-lmp-table { min-width: 560px; }
}

/* ── the header stays where the reader left it ────────────────────────────── */
/* Thirty desks lock the page and scroll inside a panel, so their title and
   controls never move (Crypto Live Scanner). Fifteen scroll the document
   (the Value desks, the Cross desks, Options, the News desks) and there the
   page bar scrolled away with the first row. Two things stopped sticky from
   working at all: the bar was position:relative, and body's overflow-x:hidden
   quietly made body a scroll container. clip hides the same overflow without
   making one. Once the page moves, the bar tightens (.mx-stuck, set by
   mt-shell.js): the breadcrumb goes, the title and actions stay, as on the
   Kraken and OKX market pages. Column headers stick under it. */
/* mt-design.css sets overflow:auto!important on body.mt-has-shell, which also
   makes body the scroll container sticky measures against. A locked desk's
   inline overflow:hidden!important still wins over this. */
html body.mx-shell:not(.mx-terminal):not(.mx-body-grid) { overflow-x: clip !important; overflow-y: visible !important; }
/* only where the document scrolls: a locked desk's body is itself the scroll
   container, padded 52px for the header, and sticky measured from inside that
   padding put the bar at 104px, over the desk's own toolbar */
html body.mx-shell:not(.mx-terminal):not(.mx-body-grid):not([style*="100dvh"]) > .mx-pagebar {
  position: sticky !important; top: var(--header-h, 52px); z-index: 900;
  background: var(--s-canvas, #000); margin-bottom: 0 !important;
  transition: padding .16s ease;
}
html body.mx-shell:not(.mx-terminal):not(.mx-body-grid):not([style*="100dvh"]) > .mx-pagebar + * { margin-top: 16px; }
html body.mx-stuck > .mx-pagebar { padding-top: 8px !important; padding-bottom: 8px !important; }
html body.mx-stuck > .mx-pagebar .mx-crumb { display: none; }
@media (max-width: 720px) {
  html body.mx-stuck > .mx-pagebar .mx-page-actions { display: none; }
  html body.mx-stuck > .mx-pagebar .mx-title { font-size: 17px !important; }
}
@media (prefers-reduced-motion: reduce) { html body.mx-shell > .mx-pagebar { transition: none; } }

:root { --mx-stick-top: calc(var(--header-h, 52px) + var(--mx-pagebar-h, 0px)); }
/* a framed desk has no site header above it: its pinned table heads stick to the top of the frame */
html.mt-embedded { --mx-stick-top: 0px; }
/* the Value desks' column header */
html body.mx-shell .vk-head { position: sticky; top: var(--mx-stick-top); z-index: 5; background: var(--s-canvas, #000); }
/* a table whose wrapper does not scroll sideways (mt-align.js marks it) */
html body.mx-shell table.mt-sticky-head thead th { position: sticky; top: var(--mx-stick-top); z-index: 4; background: var(--desk-header, var(--s-raised, #0b0b0b)); }
/* desk command bars that were sticky at top:0 sat behind the fixed header on
   a scrolling page; they stop under the page bar instead */
html body.mx-shell:not([style*="100dvh"]):not(.mx-terminal):not(.mx-body-grid) :is(.commandbar, .md-controls) {
  top: var(--mx-stick-top) !important; z-index: 800 !important;
}
/* On a phone the page bar scrolls away and a command bar wraps to several
   rows: pinned at --mx-stick-top it floated over the figures below it
   (Assets Correlation). There it stays in the flow and wraps instead; a tablet
   wraps it too (Ratio Scope at 768px), so the line is the tablet edge. */
@media (max-width: 1023px) {
  html body.mx-shell :is(.commandbar, .md-controls) { position: static !important; top: auto !important; flex-wrap: wrap !important; row-gap: 8px; }
  html body.mx-shell :is(.commandbar, .md-controls) select { min-width: 88px; }
}

/* ── plan locks in the module menus (mt-shell.js applyLocks) ─────────────── */
.mx-lock { display: none; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--warn, #FFB020); font-size: 10.5px; font-weight: 600; line-height: 1; }
.mx-lock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: miter; }
.mx-mod.is-locked .mx-lock, .mx-finder li.is-locked .mx-lock { display: inline-flex; }
.mx-mod.is-locked .mx-mod-name { color: var(--ink-4); }
.mx-mod.is-locked .mx-mod-code { opacity: .5; }
.mx-finder li.is-locked .mx-opt-name { color: var(--ink-3); }
.mx-finder li.is-locked .mx-lock { margin-left: 6px; vertical-align: middle; }
.mx-lockfilter { margin-top: 14px; min-height: 30px; padding: 0 10px; font-size: 12px; border: 1px solid var(--line-solid, #3D3D3D); background: transparent; color: var(--ink-2); cursor: pointer; }
.mx-lockfilter[aria-pressed="true"] { background: var(--ink); color: var(--s-canvas, #000); border-color: var(--ink); }
.mx-sheet .mx-lockfilter { margin: 0 0 12px; width: 100%; min-height: 40px; }
.mx-hide-locked .mx-mod-row:has(.mx-mod.is-locked) { display: none; }

/* ── view switch: Dasbor · Split · Workspace ─────────────────────────────── */
/* One segmented control instead of two unrelated buttons. 40px targets, the
   current view filled, labels always visible (an icon alone had to be learnt). */
.mx-view { display: inline-flex; border: 1px solid var(--line-solid); background: var(--s-canvas); }
.mx-view > button[data-view] {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 0; background: transparent; color: var(--ink-3); font: 500 13.5px/1 var(--sans) !important;
  cursor: pointer; white-space: nowrap;
}
.mx-view > button[data-view] + button[data-view] { border-left: 1px solid var(--line-solid); }
.mx-view > button[data-view]:hover { color: var(--ink); background: var(--s-raised-2); }
.mx-view > button[aria-pressed="true"], .mx-view > button[aria-pressed="true"]:hover { background: var(--ink); color: var(--s-canvas); }
.mx-view svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: miter; flex: none; }
.mx-view > [hidden] { display: none !important; }
/* Split needs a desk-wide screen; without it the switch would be a lone "Dasbor" button */
@media (max-width: 1024px) { .mx-view { display: none !important; } }
@media (max-width: 560px) { .mx-view { width: 100%; } .mx-view > button[data-view] { flex: 1; justify-content: center; height: 44px; } }

/* sessions ride the clock as status text, not as a row of button-looking boxes */
.mx-today-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 8px; }
.mx-today-row .mx-today { margin: 0; }
.mx-today-row .mx-sessions { gap: 4px 14px; }
.mx-today-row .mx-session { height: auto; padding: 0; border: 0; background: none; font-size: 13px; color: var(--ink-4); }
.mx-today-row .mx-session.on { color: var(--ink-2); }
.mx-today-row .mx-session-dot { width: 6px; height: 6px; }

/* ── split and workspace live under the page bar, above the tape ─────────── */
/* Split was a fixed layer from the top of the window: the site header sat on
   its pane bars and the first row of every desk, the tape on its last row. */
html body #md-split-wrap {
  top: var(--mx-pagebar-bottom, 124px) !important; bottom: var(--mx-tape-h, 0px) !important;
  z-index: 60; border-top: 1px solid var(--line);
}
html[data-mx-view="split"] #md-brk-bar, html[data-mx-view="ws"] #md-brk-bar { display: none !important; }
html body .mx-page-actions .mx-view > :is(#mdSplitPill, #wsPill) { display: none !important; }

/* ── market switch: Crypto | Forex ─────────────────────────────────────────
   One box, two words; the current market is the filled half (same as every
   segmented control in Metra). In the header on desktop, at the top of the
   menu sheet on a phone. */
html body .mx-mode { display: inline-flex; flex: none; height: 38px; border: 1px solid var(--line-solid); background: var(--s-canvas); }
html body .mx-mode button {
  height: 100% !important; min-height: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--ink-3) !important; font: 500 13px/1 var(--sans) !important; cursor: pointer; box-shadow: none !important;
}
html body .mx-mode button + button { border-left: 1px solid var(--line) !important; }
html body .mx-mode button:hover { color: var(--ink) !important; background: var(--s-overlay) !important; }
html body .mx-mode button[aria-pressed="true"] { background: var(--ink) !important; color: var(--s-canvas) !important; }
html body .mx-mode-sheet { display: flex; width: 100%; height: 44px; margin: 0 0 12px; }
html body .mx-mode-sheet button { flex: 1 1 0; font-size: 14px !important; }
@media (max-width: 720px) { html body .mx-mode-bar { display: none; } }

/* a desk of the other market */
.mx-other { position: fixed; inset: var(--mx-pagebar-bottom, 120px) 0 0 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: var(--s-canvas); }
.mx-other-box { width: min(480px, 100%); padding: 24px; border: 1px solid var(--line-solid); background: var(--s-raised); display: grid; gap: 12px; }
.mx-other-k { margin: 0; font-size: 12.5px; color: var(--ink-4); }
.mx-other-box h2 { margin: 0; font: 600 20px/1.3 var(--sans) !important; color: var(--ink); }
.mx-other-box p { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.mx-other-act { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 4px; }
html body .mx-other-act .mx-cta { height: 40px; padding: 0 16px !important; border: 0 !important; background: var(--amber) !important; color: #090909 !important; font: 600 13.5px/1 var(--sans) !important; cursor: pointer; }
html body .mx-other-act .mx-cta:hover { background: var(--amber-hover) !important; color: #FFFFFF !important; }
.mx-other-back { color: var(--ink-2); font-size: 13.5px; }
html.mx-other-open, html.mx-other-open body { overflow: hidden !important; }

/* Forex mode's instrument picker, standing in for a desk's exchange + symbol
   fields (mt-fx.js adopt). It fills the box those two shared. */
html body select.mt-fx-pick { flex: 1 1 auto; min-width: 180px; width: auto; max-width: 100%; }

/* ── bookmark ─────────────────────────────────────────────────────────────
   One mark, three states. Off: a hairline ribbon that shows on row hover.
   Hover: the ribbon sits in a 32px square you can actually hit. On: a filled
   amber ribbon, no box, so a saved desk reads at a glance in any list. */
html body .mx-fav:not(.mx-fav-page) {
  width: 32px !important; height: 32px !important; min-width: 32px; box-sizing: border-box;
  border: 1px solid transparent !important; background: transparent !important; color: var(--ink-4) !important;
  transition: opacity .14s var(--e), color .14s var(--e), background-color .14s var(--e), border-color .14s var(--e) !important;
}
html body .mx-mod-row .mx-fav { right: 6px; }
html body .mx-mod-row:has(.mx-fav) .mx-mod { padding-right: 44px !important; }
html body .mx-fav:not(.mx-fav-page):hover {
  color: var(--ink) !important; background: var(--s-raised-2) !important; border-color: var(--line-solid) !important;
}
html body .mx-fav svg { width: 16px !important; height: 16px !important; stroke-width: 1.7; }
html body .mx-fav.on { color: var(--amber) !important; opacity: 1; }
html body .mx-fav.on svg { fill: currentColor; }
html body .mx-fav.on:not(.mx-fav-page):hover { color: var(--amber) !important; background: var(--amber-wash) !important; border-color: transparent !important; }
html body .mx-pagebar .mx-fav-page.on { color: var(--ink) !important; border-color: var(--amber) !important; background: var(--amber-wash) !important; }
html body .mx-pagebar .mx-fav-page.on svg { color: var(--amber); }
/* the brand moves in steps, so the pop does too */
html body .mx-fav.is-pop svg { animation: mx-fav-pop .3s steps(4, end); }
@keyframes mx-fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }

.mx-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 2000; transform: translate(-50%, 12px);
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--s-raised-2); border: 1px solid var(--line-solid); color: var(--ink);
  font-size: 13px; box-shadow: var(--sh-3); opacity: 0; pointer-events: none;
  transition: opacity .18s var(--e), transform .18s var(--e);
}
.mx-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mx-toast svg { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; stroke-width: 1.7; color: var(--amber); flex: none; }
.mx-toast.off svg { fill: none; color: var(--ink-4); }
.mx-toast button {
  margin-left: 4px; padding: 0 !important; min-height: 0 !important; background: none !important; border: 0 !important;
  color: var(--amber) !important; font: 600 13px/1 inherit; cursor: pointer;
}
.mx-toast button:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { html body .mx-fav.is-pop svg { animation: none; } .mx-toast { transition: none; } }

/* ══ responsive foundation ═══════════════════════════════════════════════════
   One scale for every page, mobile first. Breakpoints (min-width, CSS cannot
   read them from variables, so they are written out where used):
     base   0     phones, iPhone SE/7/8 (375) up
     sm   480     large phones
     md   768     tablets in portrait (iPad 768-834)
     lg  1024     tablets in landscape, small laptops
     xl  1280     laptops
     2xl 1680     the content column stops growing (--mx-max), centred above it
   Sizes are rem, so a reader's own text-size setting scales the layout with
   it; the values are the ones the pages already rendered at 16px. */
:root {
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-7: 3rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --fs-micro: .75rem; --fs-xs: .75rem; --fs-sm: .78125rem; --fs-md: .8125rem;
  --fs-lg: .9375rem; --fs-xl: 1.125rem; --fs-2xl: 1.375rem; --fs-h1: 1.125rem; --fs-h2: 1rem;
  --mx-max: 105rem;
  /* 16px on a phone easing to 20px on a laptop, instead of jumping at 720px */
  --gutter: clamp(1rem, .55rem + 1.5vw, 1.25rem);
}
/* iOS enlarges text it thinks is too small when a phone turns sideways, which
   broke rows that were sized for the text they had */
/* the root carries the reader's own size (16px unless they changed it), so rem is a real unit;
   body text keeps its 12.5-13px from html, body { font-size: var(--fs-sm) } */
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* a long token, address or URL wraps instead of pushing the page sideways */
body { overflow-wrap: break-word; }
img, video { max-width: 100%; }
/* taps act at once (no double-tap-zoom wait) */
a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; }
/* Safari zooms the whole page into any field under 16px when it is focused and
   leaves it zoomed; on a touch screen fields carry 16px */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em) !important; }
}
/* the notch and the home indicator: fixed bars keep clear of them */
/* the header's own bar already holds the gutter; the header adds only the notch, else the gutter doubled (32px on a phone) */
html body .mx-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
html body .mt-tape { padding-bottom: env(safe-area-inset-bottom); }

/* the page itself does not stretch past its edges or slide sideways when pulled */
html, body { overscroll-behavior: none; }
/* scroll boxes the desks share keep their own swipe from the first paint */
.tn-scroll, .mt-grid-box, .mt-slide, .mk-seg, .md-table-wrap { overscroll-behavior-x: contain; }
.tn-scroll, .mt-grid-box { overscroll-behavior-y: contain; }

/* ── the desk's title bar folds away (mt-shell setBar); the main header stays ── */
html body .mx-page-actions { margin-left: auto; }
html body .mx-pagebar { transition: max-height .2s ease, padding .2s ease, opacity .15s ease, border-color .2s ease; }
html.mx-nobar body .mx-pagebar { max-height: 0 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; overflow: hidden;
  border-bottom-color: transparent !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html body .mx-pagebar { transition: none; } }

/* ── Every action answers (UI/UX checklist pass, 20 Oct 2026) ──────────────
   Pressed and disabled states for every control, a focus and an error state
   for every field, a thin bar while a load the reader started is running
   (mt-shell.js), and a "Disalin" chip when something is copied. */
html body :is(button, .btn, .md-btn, [role="button"], .mtd-btn):not(:disabled):not([aria-disabled="true"]):active { filter: brightness(.86); }
html body :is(button, .btn, .md-btn, [role="button"], .mtd-btn):is(:disabled, [aria-disabled="true"]) { opacity: .45 !important; cursor: not-allowed !important; }
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible { outline: 2px solid var(--amber, #D97706) !important; outline-offset: -1px; }
html body :is(input, select, textarea):is([aria-invalid="true"], :user-invalid) { border-color: var(--down, #FF4D4D) !important; box-shadow: inset 0 0 0 1px var(--down, #FF4D4D) !important; }
.mt-busy { position: fixed; left: 0; top: 0; width: 100%; height: 2px; z-index: 1400; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(90deg, transparent, var(--amber, #D97706), transparent) no-repeat; background-size: 40% 100%; }
html.mt-is-busy .mt-busy { opacity: 1; animation: mt-busy 1s linear infinite; }
@keyframes mt-busy { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.mt-copied { position: fixed; z-index: 1400; padding: 6px 10px; pointer-events: none; background: var(--s-raised-2, #1F1F1F); border: 1px solid var(--line-solid, #333);
  color: var(--ink, #fff); font: 600 12px/1 var(--sans, "IBM Plex Sans", sans-serif); animation: mt-copied .95s ease forwards; }
@keyframes mt-copied { 0% { opacity: 0; transform: translateY(6px); } 18% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { html.mt-is-busy .mt-busy { animation: none; background-size: 100% 100%; } .mt-copied { animation-duration: 1.2s; } }
.mt-net { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--mx-tape-h, 0px) + 14px); z-index: 1400; width: min(620px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--s-raised-2, #1F1F1F); border: 1px solid var(--warn, #FFB020);
  color: var(--ink-2, #d4d4d4); font: 400 13px/1.45 var(--sans, "IBM Plex Sans", sans-serif); box-shadow: 0 12px 32px -12px rgba(0,0,0,.7); }
.mt-net[hidden] { display: none; }
.mt-net b { color: var(--ink, #fff); font-weight: 600; }
.mt-net button { flex: none; min-height: 34px; padding: 0 12px; background: var(--amber, #D97706); color: #111; border: 0; font: 600 13px/1 var(--sans, sans-serif); cursor: pointer; }
html body .mx-fav.pop svg { animation: mx-fav-pop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes mx-fav-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { html body .mx-fav.pop svg { animation: none; } }