/* Adaptive layout, loaded last on every page. Sizes covered: desktop and iPad Pro (existing rules), iPad and tablets (≤ 1024px),
   phones (≤ 600px), flip phones and very small screens (≤ 360px). Also language settings for non-English text. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, canvas, video { max-width: 100%; }

/* ---------- at every size: nothing may make the page wider than the screen (Safari lets you drag sideways if anything does) */
html, body { max-width: 100%; overflow-x: hidden; }
.app { grid-template-columns: minmax(0, 1fr); }
.app > *, .grid.cmd > *, .grid.res > *, .grid.ch > *, .col, .panel, #term, .tgrid > * { min-width: 0; }
body.term #term { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1500px) {
  header.top { flex-wrap: wrap; height: auto !important; min-height: 46px; row-gap: 6px; padding-top: 5px; padding-bottom: 5px; }
  .app { grid-template-rows: auto auto minmax(0, 1fr) !important; }
  .app.chain, .app.research { grid-template-rows: auto minmax(0, 1fr) !important; }
  .search { min-width: 120px; flex: 1 1 150px; }
}

/* ---------- language picker and text in other scripts */
.langsel { width: auto; max-width: 110px; flex: none; padding: 3px 4px; font-size: 12px; font-family: var(--sans); }
.langsel.float { position: fixed; top: 8px; right: 8px; z-index: 200; }
.nav, div.top { flex-wrap: wrap; row-gap: 6px; height: auto; }             /* the login and account bars must keep the picker on screen */
.langnote { margin: 0; padding: 8px 14px; font-size: 12.5px; background: var(--panel2, #eef1f6); color: var(--text, #1b2436); border-bottom: 1px solid var(--line, #d7dde8); }
html:not([lang="en"]) body { line-height: 1.55; }
html:not([lang="en"]) .hsum label, html:not([lang="en"]) .tkvg label, html:not([lang="en"]) .th4, html:not([lang="en"]) table.tt tr.tgrp td { letter-spacing: 0; }
html:not([lang="en"]) .btn, html:not([lang="en"]) .seg button, html:not([lang="en"]) .tabs button { line-height: 1.35; }
html:not([lang="en"]) th { white-space: normal; }
html[dir="rtl"] body { font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, var(--sans); }
html[dir="rtl"] * { letter-spacing: 0 !important; }
html[dir="rtl"] td, html[dir="rtl"] .mono, html[dir="rtl"] input, html[dir="rtl"] .strip { unicode-bidi: plaintext; }
html[dir="rtl"] .r { text-align: left; }
html[dir="rtl"] .sym small, html[dir="rtl"] .tname { direction: ltr; text-align: right; }
html[dir="rtl"] .tp .ph, html[dir="rtl"] .panel > .ph { text-align: right; }
html[dir="rtl"] .search .ico { left: auto; right: 9px; }
html[dir="rtl"] .search input { padding-left: 8px; padding-right: 28px; }
html[dir="rtl"] .assist, html[dir="rtl"] .asfab { right: auto; left: 18px; }

@media (max-width: 960px) { .wrap { grid-template-columns: minmax(0, 1fr) !important; max-width: 100%; } .wrap > * { min-width: 0; } }

/* ---------- touch screens: fingers need bigger targets, and iOS zooms the page when a field's text is under 16px */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  .btn, .seg button, .tabs button, .tpages button, .tseg button, .tntop button { min-height: 34px; }
  .btn.sm { min-height: 32px; }
  .tp > .ph .btn.sm { min-height: 30px; min-width: 30px; }
  table.t tr.row, table.tt tr.row { touch-action: manipulation; }
  #viewport { touch-action: none; }                                    /* the supply-chain map moves with a finger instead of the page */
  .ux-tip { max-width: min(320px, 90vw); }
}

/* ---------- tablets and iPads, upright or sideways (an iPad 10th gen is 1180 wide sideways, an iPad Pro 1366):
   page scrolls, wide content scrolls inside its own panel */
@media (max-width: 1024px), (any-pointer: coarse) and (max-width: 1400px) {
  html, body { height: auto; min-height: 100%; }
  body { overflow: auto; overflow-x: hidden; }
  .app { height: auto !important; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); }      /* or wide tables stretch the whole page */
  .app > *, .grid.cmd > *, .col, .panel, #term, .tgrid > * { min-width: 0; }
  body.term #term { grid-template-columns: minmax(0, 1fr); }
  .pb, .tpb { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal, .hmodal, .amodal { width: 96vw !important; max-width: 96vw; max-height: 92dvh; overflow: auto; }
  .hsum { grid-template-columns: repeat(2, 1fr); }
  .hadd { grid-template-columns: 1fr 1fr; }
  .agrid { grid-template-columns: repeat(3, 1fr); }
  .search { flex: 1 1 180px; width: auto !important; min-width: 120px; }
  .strip { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .tcmdw { flex: 1 1 240px; }
  .tpages { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tpages button { flex: none; white-space: nowrap; }
  .tpages [data-reset] { margin-left: 0; }
  /* pages built to fill the screen get their heights back once the page scrolls */
  .grid.res > section.panel, .grid.ch > section.panel { height: 82dvh; min-height: 420px; }
  .grid.res > .col, .grid.ch > .col { max-height: 82dvh; overflow: auto; }
  .tbar .tsec-chip { max-width: 40vw; }
  /* wide tables: drop the two narrowest columns so the rest fits without dragging */
  th[data-k="rsi"], #rows td:nth-child(12), th[data-k="hitRate"], #rows td:nth-child(13) { display: none; }
  .sym small { max-width: 130px; }
}
/* Pro terminal on a sideways tablet: two columns of panels, with the widest tables across both */
@media (min-width: 901px) and (max-width: 1024px), (min-width: 901px) and (any-pointer: coarse) and (max-width: 1400px) {
  body.term .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 420px; }
  body.term .tgrid > .tp:not(.max) { grid-area: auto !important; }
  body.term .tgrid > .tp:is([data-code=PEERS], [data-code=OPTIONS], [data-code=WATCH], [data-code=FXGRID], [data-code=INDICES], [data-code=SECTORHEAT], [data-code=FINANCIALS]) { grid-column: 1 / -1; }
  body.term .tgrid.hasmax { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 85dvh; }
  body.term .tgrid > .tp.max { grid-area: auto !important; }
}

/* ---------- phones */
@media (max-width: 600px) {
  body { font-size: 13px; }
  header.top { flex-wrap: wrap; height: auto !important; gap: 6px; padding: 6px 8px; row-gap: 6px; }
  header.top .spacer { display: none; }
  .brand small { display: none; }
  .search { order: 5; flex: 1 1 100%; width: 100% !important; }
  #market { order: 6; flex: 1 1 100%; width: 100% !important; }
  .seg { order: 7; }
  #openResearch { order: 8; flex: 1 1 auto; }
  header.top .pill, #clkBtn { display: none; }
  .app { grid-template-rows: auto auto 1fr !important; }
  .grid.cmd { display: flex !important; flex-direction: column; gap: 8px; padding: 6px !important; height: auto !important; }
  .grid.cmd > section.panel, .grid.cmd > .col:last-child { height: auto !important; max-height: none; order: 1; }
  .grid.cmd > .col { display: flex !important; flex-direction: column; height: auto !important; gap: 8px; }
  .grid.cmd > .col:first-child { order: 3; }
  .grid.cmd > .col > .panel, .grid.cmd > .col:first-child > .panel { height: auto !important; max-height: none !important; }
  .grid.cmd .panel > .pb { max-height: 70dvh; overflow: auto; }
  .ph { flex-wrap: wrap; row-gap: 4px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs button { flex: none; }
  table.t th, table.t td { padding: 5px 4px; }
  th[data-k="atrPct"], #rows td:nth-child(9), th[data-k="sizing"], #rows td:nth-child(10), th[data-k="ret3m"], #rows td:nth-child(11) { display: none; }
  .modal { width: 100vw !important; max-width: 100vw; height: 100dvh; max-height: 100dvh !important; border-radius: 0; padding: 10px !important; }
  .modal-bg { padding: 0 !important; }
  .hsum, .hadd, .agrid { grid-template-columns: 1fr 1fr; }
  .hadd > *:first-child { grid-column: 1 / -1; }
  .vote { grid-template-columns: 1fr; gap: 2px; }
  .overlay { padding: 0; }
  .overlay .frame { border-radius: 0; }
  .assist { left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 80dvh !important; max-height: 80dvh; border-radius: 12px 12px 0 0; }
  .thelp { grid-template-columns: 1fr !important; }

  /* Pro terminal: one panel after another */
  body.term #term { padding: 4px; grid-template-rows: auto auto auto; }
  .tbar { padding: 5px; gap: 5px; }
  .tgo, #tclock { display: none; }
  .tcmdw { flex: 1 1 100%; min-width: 0; }
  .tsec-chip { max-width: 55vw; }
  .tsug div { grid-template-columns: 90px 1fr; } .tsug div > .dim:last-child { display: none; }
  body.term .tgrid { display: flex; flex-direction: column; }
  body.term .tgrid > .tp { min-height: 300px; max-height: 80dvh; }
  body.term .tgrid > .tp.max { max-height: none; min-height: 80dvh; }
  .tp > .ph { flex-wrap: wrap; }
  .tp .ftitle { max-width: 100%; }
  .tp .fsub, .tp .asof { display: none; }
  .tnews { grid-template-columns: 1fr; }
  .tntop { flex-direction: row; overflow-x: auto; border: 0; padding: 0; }
  .tntop button { flex: none; }

  /* other pages */
  .wrap, .page, main { max-width: 100%; }
  .wrap { padding: 8px 8px 30px !important; }
  .grid2, .plans, .cols, .feats, .prices, .kinds, .ev { grid-template-columns: 1fr !important; }
  .jobs { grid-template-columns: 1fr !important; }
  .tabsbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabsbar button { flex: none; white-space: nowrap; }
  .bd, .card2, .tbl-wrap { overflow-x: auto; }
  .hero h1 { font-size: 26px !important; }
  .perf { grid-template-columns: repeat(3, 1fr); }
  .quote { flex-wrap: wrap; order: 4; flex: 1 1 100%; }
  .quote .nm { max-width: 100%; }
  .grid.res, .grid.ch { display: flex !important; flex-direction: column; padding: 6px !important; gap: 8px; }
  .grid.res > section.panel { height: auto !important; min-height: 0; overflow: visible; }
  .charts { flex: none !important; height: max(320px, 62dvh); }
  .grid.res > .col, .grid.ch > *, .grid.ch > section.panel { min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible; }
  #viewport { min-height: 62dvh; }
}

/* ---------- flip phones and the smallest screens (240–360px wide, sometimes shorter than they are wide) */
@media (max-width: 360px) {
  body { font-size: 12px; }
  input, select, textarea { font-size: 13px !important; padding-top: 2px; padding-bottom: 2px; }
  .brand { font-size: 12px; gap: 4px; } .logo { width: 20px; height: 20px; font-size: 11px; }
  header.top { gap: 4px; padding: 4px; }
  .btn, .seg button { padding: 2px 6px; font-size: 11px; min-height: 28px !important; }
  .seg { flex: 1 1 100%; display: flex; } .seg button { flex: 1; }
  #openResearch { display: none; }
  #themeBtn, #helpBtn { display: none; }
  #acctTxt { display: none; }
  .langsel { max-width: 84px; font-size: 11px; }
  .panel > .ph, .tp > .ph { padding: 5px 6px; font-size: 11.5px; }
  .pb, .tp > .tpb { padding: 5px; }
  table.t th, table.t td, table.tt th, table.tt td { padding: 3px; font-size: 10.5px; }
  .sym small, .tname { max-width: 90px; }
  .stat-big { font-size: 16px; }
  .pulse { gap: 4px; }
  .hsum, .hadd, .agrid { grid-template-columns: 1fr; }
  .hsum b { font-size: 15px; }
  .strip .tk { font-size: 10.5px; }
  .tpages button { padding: 3px 7px; font-size: 11px; }
  #thelp { display: none; }
  .tsec-chip { max-width: 100%; flex: 1 1 100%; font-size: 11px; }
  .tsug div { grid-template-columns: 1fr; gap: 0; }
  .tp > .ph .q, .tp > .ph [data-a=fn] { display: none; }
  body.term .tgrid > .tp { min-height: 240px; }
  .tmt { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .tnews { font-size: 11px; }
  .assist { height: 100dvh !important; max-height: 100dvh; border-radius: 0; }
  .ux-tip { max-width: 92vw; font-size: 11px; }
  .perf { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 20px !important; }
  .tabs { flex-wrap: wrap; } .tabs button { flex: 1 1 auto; white-space: normal; }
  a { overflow-wrap: anywhere; }
  .charts { grid-template-rows: 1fr 50px 50px 50px 60px !important; }
  #fab { width: 38px; height: 38px; font-size: 16px; right: 8px; bottom: 8px; }
}

/* ---------- phones held sideways and any very short screen: never pin anything to the screen height */
@media (max-height: 480px) {
  body { overflow: auto; }
  .app { height: auto !important; }
  .assist { height: 100dvh !important; max-height: 100dvh; }
  .modal { max-height: 100dvh !important; }
}

/* ---------- printing stays exactly as the page designed it */
@media print { .langsel, .langnote { display: none !important; } }