/* equyx — the phone.
 *
 * Loaded LAST so it wins without anyone writing !important.
 *
 * SCOPED TO `pointer: coarse`, NOT TO A WIDTH. A 44px control is right for a
 * thumb and wrong for a mouse: applying it by viewport width would fatten a
 * narrow desktop window that has a perfectly precise cursor, and would miss a
 * tablet that is wide AND touched. The width clause is a second chance for
 * browsers that report no pointer type, not the main rule.
 *
 * 44px is Apple's figure and 48 is Google's; the harness checks 40, so every
 * rule here clears all three.
 */
@media (pointer: coarse), (max-width: 760px) {

  /* THE TAP TARGET. Measured failures this fixes, on iPhone SE / iPhone 14 /
     Pixel 7: the sign-in inputs at 281x34, "Forgot password" at 82x26,
     "Continue without signing in" at 164x26, and a Newswire headline at
     257x28. min-height rather than height, so nothing that already wraps to
     two lines gets clipped. */
  .btn, button, [role="button"], select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"] {
    min-height: 44px;
  }

  /* A link styled as a button is still a tap target. Centring rather than
     padding keeps the text where it was. */
  .linkish, .linkish.sm, .gate-email .linkish.sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 6px;
  }

  /* iOS ZOOMS THE WHOLE PAGE when a focused input is under 16px, and it does
     not zoom back out. That single behaviour is what makes a sign-in form feel
     broken on an iPhone, and no amount of viewport tuning prevents it - only
     the font size does.

     THE BARE SELECTOR IS NOT ENOUGH, and loading last does not save it: a
     later rule only wins at EQUAL specificity. `.gate-email input` (0,1,1)
     beats `input` (0,0,1) wherever it sits in the file, which is why the
     sign-in boxes stayed at 12px after this block was first written. Each
     offender is therefore matched at its own specificity. console.css and
     aime.css already do this for the ask boxes and the alert form - these are
     the ones nobody had reached yet. */
  input, select, textarea { font-size: 16px; }

  .gate-email input,
  .cc-form input, .cc-renew input, .sm-grid input, .sm-grid select, .sm-confirm input,
  .sig-num input, .sd-size input, .watch-add input {
    font-size: 16px;
  }

  /* A headline is a link people aim a thumb at. */
  .nw-item a, .nw-item .nw-title, .nw-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Grey flash on every tap, on a dark financial UI, reads as a glitch. */
  * { -webkit-tap-highlight-color: transparent; }

  /* The notch and the home indicator. Without this the rail's last item sits
     under the bar on an iPhone and cannot be tapped at all. */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .crail, .cbody, .console {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Rubber-banding the whole document behind a fixed app chrome looks like the
     app came loose. Panes keep their own momentum scrolling. */
  html, body { overscroll-behavior-y: none; }
  .pane, .cbody, .crail { -webkit-overflow-scrolling: touch; }

  /* A table on a phone scrolls sideways INSIDE ITS OWN BOX. The document must
     not, which is the other thing the harness measures. */
  .pane table, .scr-table, .st-table { min-width: 0; }
}

/* ---- Install app ------------------------------------------------------- */
/* Not inside the media query: the button belongs at the top on a desktop too,
   where Chrome's install icon is equally easy to miss. */
.pwa-wrap { position: relative; display: inline-flex; }

.pwa-btn { white-space: nowrap; }

.pwa-hint {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(300px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--line, #2a3242);
  border-radius: 10px;
  background: var(--panel, #131823);
  color: var(--ink, #c9d3e4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font-size: 12.5px;
  line-height: 1.5;
}
.pwa-hint b { display: block; margin-bottom: 6px; }
.pwa-hint ol { margin: 0 0 8px; padding-left: 18px; }
.pwa-hint li { margin: 4px 0; }
.pwa-hint svg { vertical-align: -2px; }
.pwa-hint .muted { font-size: 11.5px; }

/* An installed window has no address bar to fall back on, so the app's own
   chrome has to clear the status bar itself. */
@media (display-mode: standalone) {
  .ctop, .chead { padding-top: max(8px, env(safe-area-inset-top)); }
}
/* The install offer sits on the brand row, pushed to its end. `auto` rather
   than a gap so the mark and the name stay together whatever the name's
   length, and the button goes to the far side. */
.brand-row { display: flex; align-items: center; gap: 10px; }
.gate-install { margin-left: auto; display: inline-flex; }
@media (max-width: 560px) {
  .brand-row { flex-wrap: wrap; }
  .gate-install { margin-left: 0; width: 100%; }
  .gate-install .pwa-btn, .gate-install .pwa-wrap { width: 100%; justify-content: center; }
}

/* ---- Everything below the first screen was painted on the dark html ------ */
/* Below 1100px console.css hands scrolling to the DOCUMENT (.console and
   .cpane become height:auto, overflow:visible) - but html and body stayed
   height:100%, one screen tall, and every theme declares --bg on body.term,
   so html keeps :root's dark default. Past 844px on a phone the light theme's
   ink was drawn straight onto rgb(10,12,17): the signals methodology box, the
   home's earnings table, any pane taller than a screen - measured, and seen.
   Two things fix it at the SAME breakpoint as the scroll model, not at the
   touch one: the canvas takes body's colour when html is transparent (CSS
   2.1 §14.2), so nothing can ever show through; and body grows with its
   content, so the layout box matches what is painted. */
@media (max-width: 1100px) {
  html { background: transparent; }
  html, body, .console-host { height: auto; min-height: 100%; }
}

/* ---- Seen in the phone screenshots, each named at its own specificity ---- */
@media (pointer: coarse), (max-width: 760px) {
  /* The 44px floor above turned .mini pills ("Search help", "Reset filters")
     into ovals with the text wrapped inside them: a 24px pill with
     border-radius 999px and a narrow width stretched tall, not wide. The
     height stays; the text may not wrap. */
  .mini { white-space: nowrap; padding-inline: 12px; }

  /* nowrap alone was not enough: .sig-search is a flex row, and the two pills
     were being SHRUNK to 58px beside the query input, clipping their text.
     Measured after the first publish. On a phone the row wraps - the input
     takes the full width, the pills keep their natural width on the next
     line - and a pill may never shrink below its text. */
  .sig-search { flex-wrap: wrap; }
  .sig-search .sig-q { flex: 1 1 100%; min-width: 0; }
  /* sixteen .mini buttons sit in flex rows across the panes (Learning's
     Refresh beside a spacer, the signals search, pane heads); none may be
     shrunk below its text, whichever row it is in */
  .mini { flex: 0 0 auto; }

  /* A 20x20 checkbox is not a thumb target; its LABEL is. */
  label.sig-chk { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 4px; }
  label.sig-chk input[type="checkbox"] { width: 22px; height: 22px; }

  /* Topic tabs measured 34px on the Newswire and the Market: `.nw-tab` and
     `.mk-tab` outrank the bare `button` rule, so they are named. */
  .nw-tab, .mk-tab { min-height: 44px; }

  /* The terminal's sub-tab strip (Chart / Risk & return / Forecast …) sets an
     explicit 38px, and the SMA / FORECAST boxes are 18px inputs whose label
     is the real target. Measured on GS at 390px after the first publish. */
  .tabs.top button { min-height: 44px; }
  label.chk { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
  label.chk input[type="checkbox"] { width: 22px; height: 22px; }

  /* The home's intro: an icon in a 140px left column pushed eight lines of
     copy into a narrow strip. On a phone the icon sits above the words. */
  .aime-head { flex-direction: column; align-items: center; text-align: center; gap: 10px; }

  /* The earnings / calendar tables have four columns; the fourth was cut off.
     The SECTION scrolls sideways, the document never does. */
  .aime-topics { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .aime-table { min-width: 520px; }
}

/* The fold head's trailing note ("2 markets · BUY + WATCH · any hold") - so a
   closed section still says what is inside it. Not phone-only. */
.fold-note { margin-left: auto; font-size: 11px; /* opacity .8 measured 4.21:1 on every fold (2026-09-30) */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
/* The title is the thing; it must not wrap onto two lines while the note has
   room ("MOST / ACTIVE" beside a full-width note, seen on Market). Title and
   note both truncate; the title keeps the larger share. */
.fold-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-head { min-height: 40px; }

/* ---- Signals on a phone: the explanations sit behind a + ---------------- */
/* The fold's plus marker: a small square like the screener's "+" line, so the
   person recognises it as "there is more here" rather than a caret. */
.fold-head .fold-plus { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 4px; font-size: 13px; font-style: normal; line-height: 1; opacity: .85; }
@media (pointer: coarse), (max-width: 760px) {
  /* the subtitle repeats what the enclosed summary says; on a phone it is the
     first of the lines that pushed the table off the screen */
  .sig-title .muted { display: none; }
  .sig-top { gap: 6px; }
  .sig-about .fold-head { font-size: 12px; text-transform: none; letter-spacing: 0; }
  .sig-about .fold-body { padding-top: 4px; }
}

/* ======================================================================
   The phone, after looking at it rather than asserting about it.
   ====================================================================== */

/* ---- 1. A TABLE SCROLLS; IT DOES NOT SQUEEZE ---------------------------
   `.pane table, .scr-table, .st-table { min-width: 0 }` above does the exact
   opposite of what its own comment says it wants. With `table-layout: fixed`
   and nine columns it hands every column 40px, and the cells are
   `white-space: nowrap` with `overflow: visible` — so "Tata Motors Passenger
   Vehicles Ltd", measured at 321px, prints straight across the five columns
   beside it. That is the "tables overlapping" on a phone, and a screenshot
   shows five values stacked on top of each other where the row should be.
   The document still cannot scroll sideways: `.tablewrap` owns `overflow-x`,
   which is the property the harness actually measures. Specificity matters —
   `.pane table` is (0,1,1), so a bare `.pf-table` would lose to it. */
@media (pointer: coarse), (max-width: 760px) {
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pane table.scr-table, table.scr-table { min-width: 900px; }
  /* ONLY THE WIDE ONE. `.pf-table` is also the three-column liabilities table,
     and forcing that to 780px made a table that fits scroll for no reason. The
     markup says which is which rather than the stylesheet guessing from the
     column count, which CSS cannot do. */
  .pane table.pf-wide, table.pf-wide { min-width: 820px; }
  .pane table.pf-table:not(.pf-wide), table.pf-table:not(.pf-wide) { min-width: 0; }
  /* the layout mode, the overflow guard and the name column's width moved to
     portfolio.css with NO media query: they were phone-only here, so a desktop
     had no guard at all and the names drew over the Units column. One source
     for a rule that has to hold everywhere. */
  .pane table.aime-table, table.aime-table { min-width: 520px; }

  /* BELT AND BRACES. Even at a sane width a long name must clip inside its own
     cell rather than print over the next one — the failure mode is silent and
     it is the reader who pays for it. */
  table.scr-table td, table.scr-table th { overflow: hidden; text-overflow: ellipsis; }

  /* a table that scrolls should say so before the reader gives up on it */
  .tablewrap { position: relative; }
}

/* ---- 2. A MENU MUST FIT THE SCREEN IT OPENS ON -------------------------
   MEASURED at 390px: `.theme-menu` is 300px wide, anchored `right: 0` to a
   button at x=128, and rendered at x=-128..172 — 128px of it off the left
   edge, with five of its twelve themes unreadable. `.mkt-menu` is 268x555.
   Both are `position: absolute` inside a header cell, so neither can know how
   much room is left. On a phone they become sheets pinned to the viewport. */
@media (pointer: coarse), (max-width: 760px) {
  .mkt-menu, .theme-menu {
    position: fixed;
    left: 8px; right: 8px; width: auto; min-width: 0; max-width: none;
    top: calc(env(safe-area-inset-top, 0px) + 52px);
    max-height: min(68vh, 560px); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* every row in them is a touch target, not a 22px line of text */
  .mkt-menu .mkt-opt, .theme-menu button { min-height: 44px; }
}

/* ---- 3. THE MARKET BUTTON'S LABEL --------------------------------------
   The long name is now in `.mkt-label`, which is what the existing
   `display: none` rule two hundred lines up was always aiming at and never
   hit: the label used to be a bare text node between two icons, and
   `text-overflow` does nothing to one of those. It is kept visible — "US + NSE"
   fits — and ellipsised properly if a person picks three long venues. */
@media (pointer: coarse), (max-width: 760px) {
  .mkt-btn { max-width: 46vw; }
  .mkt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

/* ---- 4. THE NAME COLUMN READS LEFT TO RIGHT ----------------------------
   `.scr-table` right-aligns its cells because almost every column in it is a
   number. The instrument is not: right-aligned company names put the ragged
   edge on the side the eye starts from, and in the shot the names sat hard
   against the Units column while their left edge stepped in and out. */
@media (pointer: coarse), (max-width: 760px) {
  table.pf-wide td:first-child, table.pf-wide th:first-child { text-align: left; }
}

/* ---- 5. THE 44px FLOOR IS FOR CONTROLS, NOT FOR MARKS IN A CHART -------
   `.btn, button, [role="button"] { min-height: 44px }` near the top of this
   file is right for a button and wrong for a bar. MEASURED: every `.pfc-bar`
   rendered 44px tall inside a 15px track, so on the US tab the two-row
   best-and-worst chart printed one bar across the other and read as a solid
   block. The fix is not to drop the floor — it is to give the bar a row tall
   enough to be worth 44px and let the mark fill it. */
@media (pointer: coarse), (max-width: 760px) {
  /* `.console button` is (0,1,1) and beats a bare `.pfc-bar` at (0,1,0) — the
     page was asked which rule won rather than guessed at. Scoped to match. */
  .console .pfc-bar, .console .pfc-cell, .console .pfc-slice,
  .pfc-bar-track .pfc-bar { min-height: 0; min-width: 0; }
  .pfc-bar-row, .pfc-wrow { min-height: 44px; }
  .pfc-bar-track { height: 28px; }
  .pfc-wbar { min-height: 0; }
}

/* ---- 6. ROOM IN THE HEADER FOR THE THING THE APP IS SCANNING -----------
   MEASURED at 390px: brand 24 + market 84 + theme 44 + Settings 97 + account
   101 leaves the market label 28px of the 65px "US + NSE" needs, so it renders
   "U…". The market being scanned changes what every screen shows; the word
   "Settings" beside a slider icon and an email beside an avatar do not. Those
   two shed their text and the market keeps its name. */
@media (pointer: coarse), (max-width: 700px) {
  .ctop .set-word { display: none; }
  /* the email is already hidden by `.ctop .who` in console.css; what was left
     taking 101px is the word "Sign out" beside its icon */
  .ctop .cuser .btn { font-size: 0; }
  .ctop .cuser .btn .ico { font-size: 12px; }
  header.ctop .mkt-sel { flex: 0 1 auto; min-width: 0; }
  .mkt-btn { max-width: none; }
  .mkt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}