/* The frame around the design: the demo banner, the account strip, and the
   sign-in sheet. The screens themselves are styled entirely by design.css. */
.gate {
  position: sticky; top: 0; z-index: 40;
  display: flex; gap: 16px; align-items: center; justify-content: center;
  /* room for the account control now sitting in the same corner */
  padding-inline-end: 210px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: #1B1917; color: #F5F1EC;
  font: 400 13.5px/1.5 "IBM Plex Sans", system-ui, sans-serif;
}
.gate p { margin: 0; max-width: 74ch; }
.gate strong { color: #FF8340; font-weight: 600; }
.gate-cta, .account button {
  font: 500 13px/1 "IBM Plex Sans", system-ui, sans-serif;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: #E8621C; color: #1B1917; border: 0;
}
.gate-cta:hover { background: #FF8340; }

/* The banner is hidden HERE, not by main.js setting `bar.hidden = true`.
   `hidden` is only a user-agent rule — `[hidden] { display: none }` — and any
   author rule beats it. `.gate` above sets `display: flex`, so the attribute
   was silently doing nothing and the "you are looking at an invented market"
   line stayed on screen after signing in, over data that was by then real.
   The account strip two rules down was always hidden this way; the banner
   simply never got the same treatment. */
body[data-signed="yes"] .gate { display: none; }

/* Top right, and always there: signed out it offers the way in, signed in it
   says who you are and offers the way out. It used to be bottom-right and
   signed-in only, while the way IN was a button in the middle of the demo
   banner — so the control moved across the page the moment you used it. */
.account {
  position: fixed; inset-inline-end: 18px; top: 14px; z-index: 60;
  display: flex; gap: 10px; align-items: center;
  font: 400 12.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--t2);
}
body[data-signed="yes"] .account { top: 18px; }
body[data-signed="yes"] #signin,
body[data-signed="no"]  #signout { display: none; }
.account #who {
  padding: 7px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--edgeIn);
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account #signout { background: var(--surface); color: var(--t2); border: 1px solid var(--edgeIn); }
.account #signout:hover { color: var(--ink); border-color: var(--rule); }

/* The account control is FIXED, so it floats over whatever is at the top of
   the screen — which on Home is the third index card, and the email chip sat
   across EGX 100's level. Reserve the strip it occupies rather than move it:
   the corner is where it belongs, and the page can start below it.

   Applied to `main` rather than to a screen, because every screen has
   something at the top and Home was only the first to collide. The demo
   banner is sticky and already pushes content down, so the reservation is
   needed on the signed-in path — where there is no banner — most of all. */
.om-main { padding-top: 62px !important; }
body[data-signed="no"] .om-main { padding-top: 26px !important; }

/* Sign-in sheet */
#esthmr-signin { position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; }
.si-scrim { position: absolute; inset: 0; background: rgba(27,25,23,.55);
  backdrop-filter: blur(3px); }
.si-sheet {
  position: relative; width: min(420px, calc(100vw - 32px));
  background: #F7F4F0; color: #1B1917; border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px -20px rgba(27,25,23,.5);
  font: 400 15px/1.55 "IBM Plex Sans", system-ui, sans-serif;
}
.si-sheet h2 { margin: 0 0 6px;
  font: 600 21px/1.15 "Bricolage Grotesque", system-ui, sans-serif; }
.si-lead { margin: 0 0 18px; color: #5C554F; font-size: 13.6px; }
.si-step { display: grid; gap: 8px; }
.si-step label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: #6E6761; font-family: "IBM Plex Mono", monospace; }
.si-step input {
  font: 400 16px/1.2 "IBM Plex Sans", system-ui, sans-serif;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(27,25,23,.22); background: #fff; color: #1B1917;
}
#si-code { font-family: "IBM Plex Mono", monospace; letter-spacing: .3em; }
.si-step button[type=submit] {
  margin-top: 4px; padding: 11px 16px; border: 0; border-radius: 10px;
  background: #1B1917; color: #F5F1EC; cursor: pointer;
  font: 500 14.5px/1 "IBM Plex Sans", system-ui, sans-serif;
}
.si-step button[type=submit]:disabled { opacity: .6; cursor: default; }
.si-back { margin-top: 2px; background: none; border: 0; cursor: pointer;
  color: #6E6761; font-size: 12.5px; text-decoration: underline; }
.si-error { margin: 12px 0 0; color: #A3402F; font-size: 13px; }
.si-close { position: absolute; top: 10px; inset-inline-end: 12px;
  background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer;
  color: #6E6761; }
:focus-visible { outline: 2px solid #E8621C; 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: 20px 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; }
  /* 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: 9px 13px !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-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.4fr) minmax(280px,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(0,1fr) minmax(140px,208px)"],
  [style*="grid-template-columns:minmax(150px,240px) minmax(80px,130px) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(116px,176px)"],
  /* 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"] { padding: 20px 18px 18px !important; }

  /* The news picture sits above its headline rather than beside it, and stops
     being a 4:3 slab of a small screen. */
  [style*="grid-template-columns:minmax(0,1fr) minmax(140px,208px)"] > div:last-child,
  [style*="grid-template-columns:minmax(0,1fr) minmax(140px,208px)"] > a:last-child {
    aspect-ratio: 16/9 !important;
    order: -1;
  }

  /* Seven columns of market data will not fit a phone at any type size. The
     card scrolls; the page does not. */
  .om-table { overflow-x: auto !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-idx { grid-template-columns: minmax(0, 1fr) !important; }

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

  .gate { padding: 10px 14px !important; font-size: 13px !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; }
}