/* The frame around the design: the ticker tape, the hero gate, the account strip,
   and the sign-in sheet. The screens themselves are styled entirely by design.css. */

/* ── LIVE TICKER TAPE HEADER ───────────────────────── */
/* Signed out there is nothing to show: no dataset, no screens, no tape, only
   the way in. The site was opened to a made-up market until 18 September; an
   open page is copied within hours by bots and AI crawlers, so the door is
   the page now. */
body[data-signed="no"] #app,
body[data-signed="no"] .ticker-tape { display: none !important; }
/* Why the door is there, said inside it. */
.gate-why {
  /* Neutral, not teal. The tint here was the accent at 10% with an accent
     border, which makes the brand colour carry a meaning — and the one rule
     the palette keeps is that teal is brand and navigation and is never a
     status. A reason is not a status either way. */
  margin: 0; padding: 12px 14px; border-radius: var(--radius-control);
  background: var(--sunk); border: 1px solid var(--rule);
  color: var(--t2); font-size: 14px; line-height: 1.65;
}


.ticker-tape {
  position: sticky; top: 0; z-index: 55;
  width: 100%; height: 38px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  display: flex; align-items: center;
  user-select: none;
  font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", monospace;
  font-size: 12px;
  line-height: 1;
}
.ticker-track {
  display: inline-flex; align-items: center;
  white-space: nowrap; gap: 24px;
  will-change: transform;
  animation: tickerMarquee 45s linear infinite;
  padding-inline: 16px;
}
.ticker-tape:hover .ticker-track {
  animation-play-state: paused;
}
@keyframes tickerMarquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
[dir="rtl"] .ticker-track {
  animation: tickerMarqueeRtl 45s linear infinite;
}
@keyframes tickerMarqueeRtl {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(50%, 0, 0); }
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 8px;
  transition: background 0.15s ease;
  cursor: pointer;
}
.ticker-item:hover { background: var(--activeBg); }
.ticker-sym {
  font-weight: 600; color: var(--ink);
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", sans-serif;
  letter-spacing: -0.01em;
}
.ticker-val {
  color: var(--ink); font-weight: 500;
}
.ticker-chg {
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius:var(--radius-island);
}
.ticker-chg.up {
  background: var(--mosaic-up);
  color: var(--mosaic-up-ink);
}
.ticker-chg.down {
  background: var(--mosaic-down);
  color: var(--mosaic-down-ink);
}
.ticker-chg.flat {
  background: var(--sunk);
  color: var(--faint);
}
.ticker-sep {
  color: var(--rule); opacity: 0.8; font-size: 11px;
}

/* ── FLOATING WELCOME POPUP MODAL (JETSON / MUTE STYLE) ─ */
.gate {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 95 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* NOT `direction: ltr`. It was, and the door is Arabic: a forced LTR
     container puts the full stop of every sentence on the left-hand end, so
     the lede read ".اعرف ما تغيّر" — the one screen a new reader sees, with
     the punctuation visibly wrong on all of it. The document's own dir is set
     by `setChrome`, and this inherits it. */
  direction: inherit !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}
.gate[hidden],
#gate[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.gate-scrim {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(10, 18, 28, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 1 !important;
}
/* ── THE DOOR ───────────────────────────────────────────
 *
 * The only page a reader sees before signing in, and since the site was closed
 * it is the only public surface this product has — so it is designed, not left
 * as a modal with a stock photo in it.
 *
 * It is flat. The card used to carry a 28px radius and an 80px shadow, which
 * is the one thing `design.css` switched off on purpose: an island is told
 * apart from the page by its edge and its ground. The scrim stays, because
 * here there genuinely is something behind it.
 */
.gate-card {
  position: relative !important;
  z-index: 2 !important;
  width: min(1040px, calc(100vw - 32px)) !important;
  max-width: 100% !important;
  max-height: calc(100vh - 40px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-island) !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 440px minmax(0, 1fr) !important;
  direction: inherit !important;
}
.gate-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 28px; border-bottom: 1px solid var(--rule);
  box-sizing: border-box !important; width: 100% !important;
}
.gate-media {
  position: relative !important;
  background: var(--sunk) !important;
  overflow: hidden !important;
  min-height: 100% !important;
  border-inline-end: 1px solid var(--rule) !important;
}
.gate-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.gate-content {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
.gate-body-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 26px 28px 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.gate-mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 21px; font-weight: 600; letter-spacing: .08em; color: var(--accent);
}
.gate-mark-ar { font-size: 14px; color: var(--t2); }
.gate-lang {
  margin-inline-start: auto; cursor: pointer;
  min-height: 44px; min-width: 44px; padding: 0 14px;
  border-radius: var(--radius-control); border: 1px solid var(--rule);
  background: var(--surface); color: var(--t2);
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; font-size: 14px;
}
.gate-lang:hover { border-color: var(--accent); color: var(--accent); }
.gate-lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gate-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: var(--accTint) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent) !important;
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  width: fit-content !important;
}
.gate-badge-pulse {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--up, #10b981) !important;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
  animation: gatePulse 2s infinite !important;
}
@keyframes gatePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.gate-lead {
  margin: 0 !important; font-size: 26px !important; line-height: 1.35 !important;
  font-weight: 600 !important; color: var(--ink) !important;
}
.gate-body {
  margin: 0 !important; font-size: 14px !important; line-height: 1.55 !important;
  color: var(--t2) !important;
}
/* Into the public company pages: a plain link, quieter than signing in. */
.gate-browse {
  align-self: flex-start; font-size: 14px; font-weight: 500; color: var(--accent) !important;
  text-decoration: none;
}
.gate-browse:hover { text-decoration: underline; }
.gate-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 4px 0 2px !important;
}
.gate-hero-btn {
  cursor: pointer; width: 100%; min-height: 48px;
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--accent) !important;
  background: var(--accent) !important; color: var(--surface) !important;
  font-size: 17px !important; font-weight: 600 !important;
}
.gate-hero-btn:hover { background: var(--accentPress) !important; border-color: var(--accentPress) !important; }
.gate-hero-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gate-trust { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.5; }

.gate-shots {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
.gate-shot {
  margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--rule); border-radius: var(--radius-island);
  background: var(--sunk) !important;
}
.gate-ill {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 11px; color: var(--faint);
}
.gate-shot-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.gate-shot-note {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 11px; color: var(--faint); line-height: 1.4;
}
.gate-svg { display: block; width: 100%; direction: ltr; }
.gate-share {
  display: flex; height: 20px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--rule); direction: ltr;
}
.gate-share i { display: block; height: 100%; }
.gate-share-rest {
  background: repeating-linear-gradient(135deg, var(--hatch) 0 6px, var(--hatchBg) 6px 12px);
}

.gate-panel {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 4px;
}
.gate-panel-eyebrow {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 12px; color: var(--faint);
}
.gate-panel-title { font-size: 21px; font-weight: 600; color: var(--ink); }
.gate-rule { height: 1px; background: var(--rule); }
.gate-legal { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.55; }

@media (max-width: 860px) {
  .gate {
    padding: 16px 12px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .gate-card {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 440px !important;
    max-height: calc(100vh - 32px) !important;
    margin: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }
  .gate-card::-webkit-scrollbar { display: none !important; }
  .gate-media {
    position: relative !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    width: 100% !important;
    border-inline-end: none !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .gate-img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .gate-content {
    max-height: none !important;
    overflow-y: visible !important;
  }
  .gate-head { padding: 14px 18px; }
  .gate-body-inner {
    padding: 18px 16px 20px !important;
    gap: 12px !important;
  }
  .gate-lead { font-size: 21px !important; line-height: 1.35 !important; }
  .gate-body { font-size: 14px !important; line-height: 1.5 !important; }
  /* One column of cards on phone for readable layout */
  .gate-shots { grid-template-columns: 1fr !important; gap: 8px !important; }
  .gate-hero-btn { min-height: 48px; }
}
body[data-signed="yes"] .gate { display: none !important; }
/* The door has a sign-in button in it. The account bar has another, and
   signed out the two sat on top of each other — one of them floating over
   the card. Signed out there is no account to show. */
body[data-signed="no"] .account { display: none !important; }

/* ── ACCOUNT BAR ────────────────────────────────────── */
.gate-cta, .account button {
  font: 500 14px/1 "IBM Plex Sans", system-ui, sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius:var(--radius-island); cursor: pointer;
  background: var(--accent); color: var(--onAccent); border: 0;
}
[data-theme="dark"] .gate-cta { color: var(--bg); }
.gate-cta:hover { filter: brightness(1.08); }

.account {
  /* Under whatever is across the top: the disclosure strip, the tape, or
     neither. Both heights are measured in main.js and are 0 when the strip is
     not there, so signing in lifts these buttons back to the top corner. */
  position: fixed; inset-inline-end: 18px; z-index: 60;
  top: calc(var(--tape-h, 38px) + 10px);
  display: flex; gap: 8px; align-items: center;
  font: 400 12px/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--t2);
}
body[data-signed="yes"] .account { top: calc(var(--tape-h, 38px) + 10px); }
body[data-signed="yes"] #signin,
body[data-signed="no"]  #signout,
body[data-signed="no"]  #admin-link,
body[data-signed="no"]  #who { display: none !important; }
#who[hidden], #signin[hidden], #signout[hidden], #admin-link[hidden], #story-btn[hidden] { display: none !important; }

.account #who {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 14px; border-radius:var(--radius-island);
  background: var(--surface); border: 1px solid var(--edgeIn);
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account #admin-link {
  display: none !important;
  align-items: center; min-height: 44px;
  padding: 0 14px; border-radius:var(--radius-island);
  background: var(--surface); border: 1px solid var(--accent);
  color: var(--accent); font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.is-admin .account #admin-link:not([hidden]),
body.is-admin #admin-link:not([hidden]) {
  display: inline-flex !important;
}
.account #admin-link:hover {
  background: var(--accTint);
  border-color: var(--accent);
}
.account #story-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 14px; border-radius:var(--radius-island);
  background: var(--surface); border: 1px solid var(--rule);
  color: var(--t2); font-weight: 500; cursor: pointer;
  transition: all 0.15s ease;
}
.account #story-btn:hover {
  color: var(--ink); border-color: var(--accent); background: var(--accTint);
}
.account #signout { background: var(--surface); color: var(--t2); border: 1px solid var(--edgeIn); }
.account #signout:hover { color: var(--ink); border-color: var(--rule); }

.om-main { padding-top: 72px !important; }
/* Signed out, the two sticky strips already push the page down, but the
   account buttons are fixed 10px under them and would sit across whatever the
   screen puts in its top corner — on Home, EGX 100's level. The strip they
   occupy is reserved here rather than moving them: the corner is where they
   belong, and the page can start below them. (A `padding-top: 26px` left them
   over the content when the disclosure came back.) */
body[data-signed="no"] .om-main { padding-top: 62px !important; }

/* Sign-in sheet */
/* Above the gate (95), because the gate is now permanent while signed out and
   the sheet is the way through it: at 60 the reader pressed "sign in" and the
   sheet opened behind the card, where nothing could be typed into it. */
#esthmr-signin { position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; }
.si-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); }
.si-sheet {
  position: relative; width: min(420px, calc(100vw - 32px));
  background: var(--surface, #F7F4F0); color: var(--ink, #1B1917); border-radius:var(--radius-control);
  border: 1px solid var(--edgeIn, rgba(255,255,255,.3));
  padding: 26px 26px 22px;
  box-shadow: var(--shLift, 0 24px 60px -20px rgba(0,0,0,.5));
  font: 400 14px/1.55 "IBM Plex Sans", system-ui, sans-serif;
}
/* Google's button is an iframe it renders itself, so it is centred rather
   than stretched — a width we impose is a width it ignores. The rule below it
   is a separator, not a heading: the email form under it is the way in that
   has always worked and is not the fallback. */
.si-google { display: grid; justify-items: center; gap: 12px; margin: 4px 0 14px; }
.si-google[hidden] { display: none; }
.si-or { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0;
  color: var(--faint); font-size: 11px; }
.si-or::before, .si-or::after { content: ''; flex: 1; height: 1px; background: var(--rule2); }
.si-sheet h2 { margin: 0 0 6px;
  font: 600 21px/1.25 "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; }
.si-lead { margin: 0 0 18px; color: var(--t2, #5C554F); font-size: 14px; }
.si-step { display: grid; gap: 8px; }
/* The same trap the demo banner fell into, in the other file nobody scanned.
   `hidden` is only the user-agent rule `[hidden] { display: none }`, and ANY
   author rule outranks it — so `f.hidden = true` on a `.si-step` flipped the
   attribute and moved nothing. Both steps of the sign-in sheet were on screen
   at once, asking for an email and a six-digit code that had not been sent
   yet, for as long as the sheet has existed. */
.si-step[hidden] { display: none; }
.si-step label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint, #6E6761); font-family: "IBM Plex Mono", monospace; }
/* 48px on everything the reader types into or presses in the sheet. The
   input was 43px and the submit 37px; a mis-tap here costs the sign-in. */
.si-step input {
  font: 400 17px/1.2 "IBM Plex Sans", system-ui, sans-serif;
  min-height: 48px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--rule, rgba(27,25,23,.22)); background: var(--sunk, #fff); color: var(--ink, #1B1917);
}
#si-code { font-family: "IBM Plex Mono", monospace; letter-spacing: .3em; }
.si-step button[type=submit] {
  margin-top: 4px; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 10px;
  background: var(--accent, #B84305); color: var(--onAccent); cursor: pointer;
  font: 500 14px/1 "IBM Plex Sans", system-ui, sans-serif;
  transition: opacity .15s;
}
.si-step button[type=submit]:hover { opacity: .9; }
.si-step button[type=submit]:disabled { opacity: .5; cursor: default; }
.si-back { margin-top: 2px; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; align-self: start; min-height: 44px; padding: 0 4px;
  color: var(--faint, #6E6761); font-size: 14px; text-decoration: underline; }
.si-back:hover { color: var(--ink); }
.si-turnstile { min-height: 65px; display: flex; justify-content: center; }
.si-error { margin: 12px 0 0; color: var(--down, #A3402F); font-size: 14px; }
.si-error[hidden] { display: none; }
/* 25x24 before this, in the corner of a sheet, which is the hardest target
   on the site to hit and the one a reader reaches for to get out of it. The
   glyph stays the same size; the button around it is now 44x44. */
.si-close { position: absolute; top: 6px; inset-inline-end: 6px;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; font-size: 21px; line-height: 1; cursor: pointer;
  border-radius:var(--radius-island); color: var(--faint, #6E6761); }
.si-close:hover { background: var(--sunk); color: var(--ink); }
.si-close[hidden] { display: none; }
.si-back[hidden] { display: none; }
:focus-visible { outline: 2px solid var(--accent, #B84305); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── phones ──────────────────────────────────────────────────────────────
   The design is a fixed 250px rail beside a 1240px column, which on a 375px
   screen puts the rail over two thirds of the width and pushes everything
   else off the edge entirely.

   Everything here is an override rather than a rewrite: the design's own
   inline styles stay exactly as they are on a desktop, and !important is what
   an inline style costs. Three moves — the rail becomes a bottom bar, the
   card grids become one column, and the one genuinely wide table scrolls
   inside its own card instead of taking the page with it. */
@media (max-width: 860px) {
  /* The nav is what a thumb needs; the brand, the session stamp and the
     theme controls are chrome, and the session date is already printed at the
     top of every screen. */
  .om-rail {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: auto !important;
    max-height: none !important;
    border-radius:var(--radius-control) 20px 0 0 !important;
    border-inline: 0 !important;
    border-block-end: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }
  .om-rail::-webkit-scrollbar { display: none; }
  .om-brand, .om-session { display: none !important; }
  /* A horizontal bar must let its items be as wide as their words. Left to
     flex defaults they are squeezed to a shared 51px and every label is
     clipped to two letters. */
  .om-rail > * { flex: none !important; }
  .om-nav { flex-direction: row !important; gap: 4px !important; }
  .om-nav > div { flex: none !important; width: max-content !important; min-height: 40px !important; }
  /* The active-tab marker is a vertical bar against a vertical list; lying on
     its side it would read as an underline nobody asked for. */
  .om-nav > div > div:first-child { display: none !important; }
  .om-nav > div {
    grid-template-columns: 18px auto !important;
    gap: 7px !important;
    padding: 10px 14px !important;
    white-space: nowrap;
  }
  .om-nav > div > div:last-child { display: none !important; }   /* the count */
  .om-tools { margin-top: 0 !important; flex-direction: row !important; gap: 8px !important; }
  .om-tools > div:last-child { display: none !important; }        /* data_version */
  .om-strip > * { min-height: 38px !important; display: inline-flex !important; align-items: center !important; }

  .om-main {
    margin-inline-start: 0 !important;
    padding: 16px 14px 104px !important;   /* clear of the bar */
    /* AFTER the shorthand, which would otherwise reset the top and put the
       account chip back over the first card. The control is fixed at this
       width too. */
    padding-top: 58px !important;
  }

  /* Card grids stack. Row grids — a mover, a calendar entry — are left alone,
     because collapsing those puts a ticker, a price and a percentage on three
     separate lines. */
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
  [style*="grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(210px,288px)"],
  [style*="grid-template-columns:minmax(150px,240px) minmax(80px,130px) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(116px,176px)"],
  [style*="grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr)"],
  /* The company header: name beside a fixed-width close card. On a phone the
     card wins and the name is squeezed to one word per line —
     "Commercial / International / Bank - / Egypt / (CIB) / S.A.E." */
  [style*="grid-template-columns:minmax(0,1fr) auto"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Cards are roomy at desk width and wasteful at 375. */
  .om-scr [style*="padding:28px 28px 22px"],
  .om-scr [style*="padding:24px 28px"] { padding: 18px 16px !important; }

  /* A rule for a news layout whose grid no longer exists in the template —
     `minmax(0,1fr) minmax(140px,208px)` matched nothing before this rebuild
     and nothing after it. These selectors match verbatim, so a dead one is
     indistinguishable from one broken by a reformatted declaration; the
     phone-collapse list is checked against the template by test now. */

  /* Seven columns of market data will not fit a phone at any type size. The
     card scrolls; the page does not.

     AND IT HAS TO LOOK LIKE IT SCROLLS. The 24 September audit read 290 rows
     sitting 268px outside the viewport and called it overflow; it is not —
     the container scrolls correctly — but a reader has no way to know that,
     because a row cut off flush at a card's edge looks exactly like a row
     that ends there. The two gradients below are the scroll-shadow pattern:
     `background-attachment: local` pins the white cover to the CONTENT so it
     slides away as soon as there is something to reveal, and `scroll` pins
     the shadow to the CONTAINER so it stays at the edge. The shadow is drawn
     only while the cover has moved, which is to say only while there is more
     table in that direction — on both sides, because this page is RTL and
     "more" is to the left of the reader as often as to the right. */
  /* `!important` throughout, because the card carries `background:var(--surface)`
     as an INLINE shorthand from the template and an inline shorthand beats a
     stylesheet's `background-image` outright — which is why the first attempt
     at this rendered nothing at all. */
  .om-table {
    overflow-x: auto !important;
    background-image:
      linear-gradient(to right, var(--surface) 30%, transparent),
      linear-gradient(to left, var(--surface) 30%, transparent),
      linear-gradient(to right, var(--thread), transparent 14px),
      linear-gradient(to left, var(--thread), transparent 14px) !important;
    background-position: left center, right center, left center, right center !important;
    background-repeat: no-repeat !important;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100% !important;
    background-attachment: local, local, scroll, scroll !important;
    background-color: var(--surface) !important;
  }
  .om-table > div { min-width: 620px; }

  /* One crossing at a time. `auto-fill` with a 370px floor already gives one
     column at 375, but the min is a floor on the TRACK, not on the card, so
     at 360 the card overflows its own grid by ten pixels and the page scrolls
     sideways — which is the one thing the phone layer is here to prevent. */
  .om-dots-grid,
  .om-news-grid { grid-template-columns: minmax(0, 1fr) !important; }
  /* Three big index cards side by side become unreadable at 375. */

  .om-scr h1 { font-size: 32px !important; }
  .om-scr h2 { font-size: 21px !important; }

  .gate { padding: 10px 14px !important; font-size: 14px !important; }
  /* On a phone the control moves to the bottom, clear of the demo banner —
     but `top: 14px` was never released, and a fixed box with BOTH insets set
     and no height stretches to fill the gap between them. The strip became
     726px tall and centred its button in the middle of the page, where it sat
     across whatever card happened to be there. `top: auto` is the whole fix:
     the box goes back to being the height of its contents. */
  .account,
  body[data-signed="yes"] .account {
    top: auto !important;
    inset-block-end: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* A horizontal strip scrolls on its own; the scrollbar is noise on a rail of
   ticker chips, and the page must never scroll sideways with it. */
.om-strip { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.om-strip::-webkit-scrollbar { display: none; }

/* The period matrix needs a minimum width to stay legible; on a phone it
   scrolls inside its own card rather than taking the page sideways — the same
   rule as the market table. */
.om-matrix { scrollbar-width: thin; }

/* The watchlist's counters sit inside the table card, and that card scrolls
   sideways on a phone with a 620px floor under its rows. The band is not a
   row of data and must not be dragged out to that width with them. */
@media (max-width: 860px) {
  .om-follow-sum { min-width: 0 !important; gap: 16px !important; position: sticky; inset-inline-start: 0; }
}

/* ── the heat map's labels ────────────────────────────────────────────────
   Whether a ticker fits in a tile is a question in PIXELS, and the layout that
   places the tiles knows only per cent of the box. The same 2.9% is 32px on a
   desktop and 10px on a phone, which is how the map came out legible on one
   and a smear on the other. Each tile is its own container and answers for
   itself, at whatever width the box happens to be. */
.om-heat > div { container-type: size; }
.hm-tick, .hm-pct, .hm-sec { display: none; }
@container (min-width: 62px) and (min-height: 40px) { .hm-sec { display: block; } }
@container (min-width: 34px) and (min-height: 19px) { .hm-tick { display: block; } }
@container (min-width: 46px) and (min-height: 32px) { .hm-pct { display: block; } }

/* A 16:9 map is 195px tall inside a phone's card, which is not a picture of an
   exchange. Portrait gives the tiles four times the area for the same
   information. */
@media (max-width: 860px) {
  .om-heat { aspect-ratio: 3 / 4 !important; }
}

/* Home had two columns, and they ended at different heights until the last
 * card in each was told to absorb the slack. Home was rebuilt on 19 September
 * as a single column — one headline and its evidence — so the grid, and the
 * rules that squared it up, have nothing to act on. Removed rather than left
 * dead: a selector that matches nothing is indistinguishable from one that is
 * quietly broken. */


/* ── INSTAGRAM / TIKTOK STORY MODAL ─────────────────── */
.story-modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 16px;
}
.story-modal[hidden] { display: none !important; }
.story-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 17, 24, 0.75);
  backdrop-filter: blur(8px);
}
.story-dialog {
  position: relative; z-index: 2;
  width: min(840px, calc(100vw - 32px));
  max-height: 90vh;
  background: var(--surface);
  border: 1px solid var(--edgeIn);
  border-radius:var(--radius-island);
  padding: 24px 28px 28px;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto;
}
.story-modal-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
}
.story-modal-heading {
  display: flex; align-items: center; gap: 12px;
}
.story-ico {
  font-size: 26px;
  padding: 8px; border-radius: 12px;
  background: var(--accTint);
}
.story-modal-title {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--ink);
}
.story-modal-sub {
  margin: 4px 0 0; font-size: 14px; color: var(--t2);
}
.story-close-btn {
  background: var(--sunk); border: 1px solid var(--rule);
  color: var(--t2); font-size: 21px; line-height: 1;
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  transition: all 0.15s ease;
}
.story-close-btn:hover {
  background: var(--activeBg); color: var(--ink); border-color: var(--edgeIn);
}
.story-modal-content {
  display: grid; grid-template-columns: 1fr 300px; gap: 24px;
  align-items: start;
}
@media (max-width: 760px) {
  .story-modal-content { grid-template-columns: 1fr; }
  .gate-pills { flex-direction: column; width: 100%; }
  .gate-pill { width: 100%; justify-content: center; }
}
.story-config {
  display: flex; flex-direction: column; gap: 16px;
}
.story-field {
  display: flex; flex-direction: column; gap: 6px;
}
.story-field label {
  font-size: 12px; font-weight: 600; color: var(--t2);
}
.story-field select,
.story-field input {
  padding: 10px 14px; border-radius: 12px;
  background: var(--sunk); border: 1px solid var(--edgeIn);
  color: var(--ink); font-family: inherit; font-size: 14px;
  outline: none; transition: border-color 0.15s ease;
}
.story-field select:focus,
.story-field input:focus {
  border-color: var(--accent);
}
.story-buttons {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 8px;
}
.story-btn-primary {
  min-height: 46px; padding: 0 20px; border-radius:var(--radius-island);
  background: var(--accent); color: var(--onAccent); border: 0;
  font-weight: 600; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.15s ease;
}
[data-theme="dark"] .story-btn-primary { color: var(--bg); }
.story-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.story-btn-secondary {
  min-height: 42px; padding: 0 20px; border-radius:var(--radius-island);
  background: var(--sunk); color: var(--ink); border: 1px solid var(--rule);
  font-weight: 500; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.15s ease;
}
.story-btn-secondary:hover { background: var(--activeBg); border-color: var(--edgeIn); }

.story-preview-container {
  display: flex; justify-content: center; align-items: center;
}
.story-phone-mockup {
  width: 260px; height: 462px;
  border-radius:var(--radius-island);
  border: 4px solid var(--edgeIn);
  background: #0A1118;
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
  overflow: hidden;
  position: relative;
}
.story-phone-mockup canvas {
  width: 100%; height: 100%;
  display: block; object-fit: contain;
}

/* ── ADMIN TELEMETRY POPUP MODAL ───────────────────── */
.admin-modal {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}
.admin-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.admin-scrim {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(8, 14, 21, 0.78) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 1 !important;
}
.admin-dialog {
  position: relative !important;
  z-index: 2 !important;
  width: min(580px, calc(100vw - 32px)) !important;
  height: min(580px, calc(100vh - 32px)) !important;
  max-width: 580px !important;
  max-height: calc(100vh - 32px) !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--surface) !important;
  border: 1px solid var(--edgeIn) !important;
  border-radius: 12px !important;
  padding: 18px 20px 18px !important;
  box-sizing: border-box !important;
  box-shadow: 0 32px 80px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  animation: admFloatIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes admFloatIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.adm-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
}
.adm-heading {
  display: flex; align-items: center; gap: 10px;
}
.adm-crown {
  font-size: 21px; line-height: 1;
  padding: 6px; border-radius: 8px;
  background: var(--accTint);
}
.adm-title {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--ink);
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}
.adm-sub {
  margin: 2px 0 0; font-size: 11px; color: var(--t2);
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.01em;
}
.adm-top-actions {
  display: flex; align-items: center; gap: 10px;
}
.adm-live-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  padding: 4px 10px; border-radius:var(--radius-island);
  background: var(--upTint); color: var(--up);
  font-weight: 600;
}
.adm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--up);
  animation: admPulse 2s infinite ease-in-out;
}
@keyframes admPulse {
  0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.adm-close {
  background: var(--sunk); border: 1px solid var(--rule);
  color: var(--t2); font-size: 21px; line-height: 1;
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; display: grid; place-items: center;
  transition: all 0.15s ease;
}
.adm-close:hover {
  background: var(--activeBg); color: var(--ink); border-color: var(--edgeIn);
}

/* KPIs */
.adm-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.adm-kpi {
  background: var(--sunk); border: 1px solid var(--edgeIn);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 0.15s ease;
}
.adm-kpi:hover { border-color: var(--rule); }
.adm-kpi-lbl { font-size: 11px; color: var(--t2); font-weight: 500; }
.adm-kpi-val {
  font-family: var(--font-heading);
  font-size: 21px; font-weight: 700; line-height: 1.1;
  color: var(--ink);
}
.adm-val-up { color: var(--up); }
.adm-kpi-hint {
  font-size: 11px; color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
}

/* Domain breakdown */
.adm-domains-box {
  background: var(--sunk); border: 1px solid var(--edgeIn);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.adm-box-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--t2);
}
.adm-badge {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  padding: 1px 7px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--edgeIn);
  color: var(--accent);
}
.adm-domain-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.adm-dpill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  padding: 3px 9px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--edgeIn);
  color: var(--ink); cursor: pointer;
  transition: all 0.15s ease;
}
.adm-dpill:hover {
  border-color: var(--accent); background: var(--accTint);
}
.adm-dpill.auc {
  border-color: var(--accent); background: var(--accTint);
  color: var(--accent); font-weight: 600;
}

/* Toolbar */
.adm-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.adm-search-wrap {
  flex: 1; min-width: 160px;
}
#adm-search-input {
  width: 100%; height: 36px; padding: 0 12px; border-radius: 8px;
  background: var(--sunk); border: 1px solid var(--edgeIn);
  color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 12px;
  outline: none; transition: border-color 0.15s ease;
  box-sizing: border-box;
}
#adm-search-input:focus { border-color: var(--accent); }
.adm-actions-group {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.adm-btn {
  height: 34px; padding: 0 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--rule);
  color: var(--ink); font-size: 12px; font-weight: 500;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: all 0.15s ease;
}
.adm-btn:hover {
  border-color: var(--accent); background: var(--accTint);
}
.adm-btn-accent {
  background: var(--accent); color: var(--surface);
  border-color: var(--accent); font-weight: 600;
}
.adm-btn-accent:hover { filter: brightness(1.08); }

/* Table */
.adm-table-wrap {
  border: 1px solid var(--edgeIn); border-radius: 8px;
  overflow: hidden; max-height: 180px; overflow-y: auto;
  background: var(--surface);
}
.adm-table {
  width: 100%; border-collapse: collapse; text-align: start;
}
.adm-table th {
  position: sticky; top: 0; background: var(--sunk); z-index: 1;
  padding: 8px 10px; font-size: 11px; font-weight: 600;
  color: var(--t2); border-bottom: 1px solid var(--edgeIn);
  text-align: start;
}
.adm-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--rule2);
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  color: var(--ink);
}
.adm-table tbody tr:hover { background: var(--activeBg); }
.adm-auc-tag {
  display: inline-flex; padding: 1px 6px; border-radius: 4px;
  background: var(--accTint); color: var(--accent);
  font-weight: 700; font-size: 11px; margin-inline-start: 6px;
}
.adm-login-tag {
  display: inline-flex; padding: 2px 7px; border-radius: 6px;
  background: var(--sunk); border: 1px solid var(--edgeIn);
  font-size: 11px;
}
.adm-login-tag.active {
  background: var(--upTint); color: var(--up); border-color: transparent;
}

/* §4: on a phone the account controls are an overflow, not a floating strip.
 *
 * "At 390 px, the email/account controls crowd the header; the founder sees
 * an additional admin button." Both halves of that matter: the strip took
 * space the header needed, and because the admin pill only exists for one
 * account, the person building the site saw a header no reader ever sees.
 *
 * Closed, they are not in the layout at all. Open, they are a sheet hanging
 * from the measured bottom of the header. `#signin` is deliberately left out
 * of this rule — signing in is the one thing a signed-out visitor must be
 * able to reach without first finding a menu. */
@media (max-width: 700px) {
  body .account { display: none !important; }
  body[data-account-open] .account {
    display: flex !important;
    position: fixed !important;
    top: calc(var(--head-h, 92px) + 8px) !important;
    inset-inline: 12px !important;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px; border-radius: var(--radius-island);
    background: var(--surface); border: 1px solid var(--edgeIn);
    box-shadow: var(--shLift); z-index: 80;
  }
  body[data-account-open] .account #who { max-width: none; }
  /* Full width inside the sheet, so they are a stack of choices rather than a
     row that wraps unevenly. */
  body[data-account-open] .account button,
  body[data-account-open] .account #who { justify-content: center; width: 100%; }
  /* The signed-out visitor keeps the sign-in button in the corner, where it
     has always been and where it is the only thing they need. */
  body[data-signed="no"] .account { display: flex !important; }
  body[data-signed="no"] .account #who,
  body[data-signed="no"] .account #story-btn { display: none !important; }
}

/* The tape and the bar under it line up with the same column.
 *
 * The tape ran the full window while the toolbar under it stopped at the
 * rail — 1024px against 746px at desk width — so the two bars across the top
 * of every page had different right edges and the header looked broken before
 * a reader had read a word of it. The rail is a fixed 278px column; the tape
 * takes the same inset the main column does, and the two ends meet.
 * Below 900px the rail is not a column and the tape is full width again. */

/* The account controls are an overflow at EVERY width, not only on a phone.
 *
 * They were a fixed strip pinned under the tape, which is exactly where the
 * toolbar is: measured at desk width the strip sat at y 54–98 and the toolbar
 * at 38–107, so the reader's email and sign-out were printed ON TOP of the
 * brand, the search box and the account button. The §4 header is brand,
 * search, account — and the account button opens the rest, on a phone and on
 * a desktop alike.
 *
 * `#signin` stays out of this: a signed-out visitor has one thing to do and
 * it may not go behind a menu. */
@media (min-width: 701px) {
  body[data-signed="yes"] .account { display: none !important; }
  body[data-signed="yes"][data-account-open] .account {
    display: flex !important;
    position: fixed !important;
    top: calc(var(--head-h, 96px) + 8px) !important;
    inset-inline-end: 18px !important; inset-inline-start: auto !important;
    flex-direction: column; align-items: stretch; gap: 8px;
    min-width: 240px; padding: 12px;
    border-radius: var(--radius-island);
    background: var(--surface); border: 1px solid var(--edgeIn);
    box-shadow: var(--shLift); z-index: 80;
  }
  body[data-signed="yes"][data-account-open] .account #who { max-width: none; }
  body[data-signed="yes"][data-account-open] .account button,
  body[data-signed="yes"][data-account-open] .account #who { justify-content: center; width: 100%; }
}

/* The assistant connection (MCP) in the admin panel: site-worker/mcp-stats.js.
 * Four figures, fourteen days of calls as bars (answered, and refused on
 * top), four short lists and the readers who connected. */
.adm-mcp {
  background: var(--sunk); border: 1px solid var(--edgeIn);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.adm-mcp-note { margin: 0; font-size: 11px; color: var(--faint); }
.adm-mcp .adm-kpi { background: var(--surface); }
.adm-mcp-days {
  display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px;
  height: 56px; align-items: end; direction: ltr;
  padding: 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--edgeIn);
}
.adm-mcp-day { display: flex; flex-direction: column-reverse; height: 100%; min-width: 0; }
.adm-mcp-day i { display: block; width: 100%; }
.adm-mcp-day i.is-ok { background: var(--accent); border-radius: 0 0 2px 2px; }
.adm-mcp-day i.is-no { background: var(--down); border-radius: 2px 2px 0 0; }
.adm-mcp-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-mcp-list {
  background: var(--surface); border: 1px solid var(--edgeIn); border-radius: 8px;
  padding: 8px 10px; min-width: 0;
}
.adm-mcp-lh { display: block; font-size: 11px; font-weight: 600; color: var(--t2); margin-bottom: 4px; }
.adm-mcp-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-mcp-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink); }
.adm-mcp-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-mcp-list li b { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.adm-mcp-list li.is-empty { color: var(--faint); }
.adm-mcp-table { max-height: 160px; }
@media (max-width: 480px) { .adm-mcp-lists { grid-template-columns: 1fr; } }
.adm-mcp-when { font-size: 12px; color: var(--t2); }
.adm-mcp-empty { text-align: center; padding: 16px; color: var(--t2); }
.adm-mcp-page { margin: 0 0 20px; }
@media (min-width: 900px) {
  .adm-mcp-page .adm-mcp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-mcp-page .adm-mcp-lists { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-mcp-page .adm-mcp-table { max-height: 320px; }
}
/* Arabic hints in a Latin monospace face are spaced letter by letter. */
.adm-mcp .adm-kpi-hint, .adm-mcp .adm-badge { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; }