/* The new screens at phone width (760px and below; redesign 2026-10-10, IA v2): the class names are listed in
   docs/design/phone-classes.md; the owners of each screen put them on their markup. Linked by radar/tabbar.py with
   media="(max-width: 760px)" and wrapped in the same query here, so it never touches a wider screen.
   Rules: one column, 16px side gutter, nothing wider than the screen, the number that matters first, colour only on
   P&L numbers (--rv-up / --rv-down), pills 999px, panels 16px, sheets 16px on top. Colours only from rv-tokens.css.
   Layers: page 0 · bottom bars 54 · tab bar 55 · B's drawer 110 and sheet 120 (rv-tokens.css) over them. */
@media (max-width: 760px) {

  /* ---- utilities ---------------------------------------------------------------------------------------------- */
  .rv-desk-only, .rv-col-desk { display: none !important; }
  .rv-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rv-tablewrap table { width: 100%; }
  /* one row of pills or tabs that scrolls sideways inside itself (never the page), edge to edge with the gutter kept */
  .rv-scrollrow, .rv-subnav, .rv-filter-tabs, .rv-bld-tabs, .rv-pos-filters, .rv-drawer-tabs {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: calc(-1 * var(--rv-gutter)); margin-right: calc(-1 * var(--rv-gutter));
    padding-left: var(--rv-gutter); padding-right: var(--rv-gutter); scroll-padding: 0 var(--rv-gutter); max-width: none;
  }
  /* pill rows get the pills' gap; text tabs (B's .rv-tabs) keep their own */
  .rv-scrollrow:not(.rv-tabs), .rv-filter-tabs:not(.rv-tabs), .rv-subnav:not(.rv-tabs), .rv-build-pills, .rv-pos-filters { gap: var(--rv-sp-2); }
  .rv-scrollrow::-webkit-scrollbar, .rv-subnav::-webkit-scrollbar, .rv-filter-tabs::-webkit-scrollbar, .rv-build-pills::-webkit-scrollbar,
  .rv-bld-tabs::-webkit-scrollbar, .rv-pos-filters::-webkit-scrollbar, .rv-drawer-tabs::-webkit-scrollbar { display: none; }
  .rv-scrollrow > *, .rv-subnav > *, .rv-filter-tabs > *, .rv-build-pills > *, .rv-bld-tabs > *, .rv-pos-filters > *, .rv-drawer-tabs > * {
    flex: none; white-space: nowrap;
  }

  /* ---- shared page parts --------------------------------------------------------------------------------------- */
  .rv-page-head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .rv-page-actions { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; }
  .rv-page-actions > a, .rv-page-actions > button { flex: 1 1 0; min-width: 0; height: var(--rv-h-md); justify-content: center; text-align: center; white-space: nowrap; }
  .rv-cols { display: flex !important; flex-direction: column; gap: 18px; }
  .rv-cols > * { min-width: 0; width: auto !important; }
  .rv-panel.pad { padding: var(--rv-sp-4); }
  .rv-panel.tbl { padding: 0 var(--rv-sp-4); }

  .rv-figs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .rv-figs > .rv-fig { min-width: 0; }
  .rv-fig-k { font-size: var(--rv-fs-xs); line-height: 16px; color: var(--rv-text-3); }
  .rv-fig-v { font-size: 17px; line-height: 24px; overflow-wrap: anywhere; }
  .rv-figs.rv-figs-lead > .rv-fig:first-child { grid-column: 1 / -1; }
  .rv-figs.rv-figs-lead > .rv-fig:first-child .rv-fig-v { font-size: 30px; line-height: 38px; font-weight: 600; }

  /* a panel that folds to its head above the tab bar on phones (.rv-fold; B's .rv-sheet is the dialog): the head
     toggles .is-open (radar/tabbar.py SHEET_JS) */
  .rv-fold {
    position: fixed; left: 0; right: 0; bottom: var(--rv-tabbar-h); z-index: 54;
    box-sizing: border-box; max-height: var(--rv-sp-14); margin: 0; overflow: hidden;
    background: var(--rv-panel); border: 0; border-top: 1px solid var(--rv-line-2);
    border-radius: var(--rv-r-panel) var(--rv-r-panel) 0 0; transition: max-height var(--rv-ease);
  }
  .rv-fold.is-open { max-height: calc(100dvh - var(--rv-tabbar-h) - var(--rv-sp-14)); overflow-y: auto; overscroll-behavior: contain; }
  .rv-fold-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); width: 100%; height: var(--rv-sp-14);
    box-sizing: border-box; padding: 0 var(--rv-sp-4); border: 0; background: none; color: var(--rv-text); font: inherit; cursor: pointer; text-align: left;
  }
  .rv-fold-head h2 { margin: 0; font-size: var(--rv-fs); line-height: 20px; }
  .rv-fold-head::after, .rv-bld-sum-toggle::after {
    content: ""; flex: none; width: 7px; height: 7px; margin-top: 4px; border: solid var(--rv-text-3);
    border-width: 1.5px 1.5px 0 0; transform: rotate(-45deg); transition: transform var(--rv-ease);
  }
  .rv-fold.is-open .rv-fold-head::after, .rv-bld-bar.is-open .rv-bld-sum-toggle::after { transform: rotate(135deg); margin-top: -4px; }
  .rv-fold-body { padding: 0 var(--rv-sp-4) var(--rv-sp-5); }
  .rv-fold:not(.is-open) .rv-fold-body { visibility: hidden; }
  html:has(.rv-fold) body::after { content: ""; display: block; flex: none; height: calc(var(--rv-tabbar-h) + var(--rv-sp-14)); }
  html.rv-fold-open body { overflow: hidden; }

  /* B's dialog (.rv-sheet-wrap > .rv-sheet) is already a bottom sheet on phones (rv-tokens.css): the wallet start, the
     "+ New bot" type picker; here only its one primary button goes full width and the page behind stops scrolling */
  .rv-sheet .rv-btn.primary { width: 100%; height: var(--rv-h-lg); }
  html:has(.rv-sheet-wrap:not([hidden]), .rv-drawer:not([hidden])) body { overflow: hidden; }

  /* B's drawer (.rv-drawer) on phones: a full-height bottom sheet, 8px under the top, over the tab bar */
  .rv-drawer { top: calc(env(safe-area-inset-top, 0px) + var(--rv-sp-2)); left: 0; right: 0; width: 100%; border-left: 0;
               border-top: 1px solid var(--rv-line-2); border-radius: var(--rv-r-panel) var(--rv-r-panel) 0 0;
               padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ---- Build, signed out (B, the home "/") ---------------------------------------------------------------------- */
  #rv-build { display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; max-width: 100%; }
  #rv-build .rv-build-head h1 { font-size: var(--rv-type-title); line-height: 1.15; margin: 0; }          /* B, polish 2026-10-10: the one title size */
  #rv-build .rv-build-head p { font-size: var(--rv-type-body); line-height: 1.5; margin: 6px 0 0; color: var(--rv-text-2); }
  #rv-build .rv-build-stats { display: none; }
  #rv-build .rv-build-main { display: flex !important; flex-direction: column; gap: 18px; }
  #rv-build .rv-build-main > * { min-width: 0; width: auto !important; }
  #rv-build .rv-build-settings, #rv-build .rv-build-bt { border-radius: var(--rv-r-panel); padding: 16px; }
  #rv-build .rv-build-bt { display: flex; flex-direction: column; gap: 12px; order: -1; }   /* B, polish: the result and its chart first */
  #rv-build .rv-bt-head { order: 0; display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
  #rv-build .rv-bt-num { order: 1; }
  #rv-build .rv-bt-num > :first-child { font-size: var(--rv-fs-kpi-lg); line-height: 1.05; white-space: nowrap; }
  #rv-build .rv-bt-chart { order: 2; max-width: 100%; }
  #rv-build .rv-bt-figs { order: 3; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  #rv-build .rv-bt-figs > * { padding-left: 0 !important; }      /* two columns: every figure on the same left edge, the gap spaces them */
  #rv-build .rv-bt-actions { order: 4; display: flex; flex-direction: column; gap: 8px; }
  #rv-build .rv-bt-actions > a, #rv-build .rv-bt-actions > button { width: 100%; height: var(--rv-h-lg); justify-content: center; text-align: center; }
  #rv-build .rv-build-fits table { width: 100%; }
  #rv-build svg, #rv-build canvas { max-width: 100%; }

  /* ---- the builder (B, /bots/new): settings (tabs in one sideways row), the chart under them, the backtest after;
          the sticky bar becomes a compact bar above the tab bar with the order summary folded behind a toggle ------- */
  #rv-builder { display: flex !important; flex-direction: column; gap: 18px; box-sizing: border-box;
                max-width: 100%; grid-template-columns: none; height: auto !important; overflow: visible !important; }
  #rv-builder > * { min-width: 0; width: auto !important; max-width: 100%; }
  #rv-builder .rv-bld-settings { order: 1; height: auto; overflow: visible; }
  #rv-builder .rv-bld-tabs { position: sticky; top: 0; z-index: 2; background: var(--rv-bg); padding-top: 4px; padding-bottom: 4px; }
  #rv-builder .rv-bld-mode { align-self: flex-start; }
  #rv-builder .rv-bld-chart { order: 2; height: 280px; min-height: 0; }
  #rv-builder .rv-bld-chart svg, #rv-builder .rv-bld-chart canvas { max-width: 100%; }
  #rv-builder .rv-bld-side { order: 3; height: auto; overflow: visible; }
  #rv-builder .rv-field, #rv-builder .rv-field-u input { font-size: 16px; }           /* iOS: no zoom on focus */

  .rv-bld-bar {
    position: fixed !important; left: 0; right: 0; bottom: var(--rv-tabbar-h) !important; top: auto !important; z-index: 54;
    box-sizing: border-box; width: 100% !important; margin: 0; padding: 10px 16px; border-radius: 0;
    display: flex !important; flex-direction: column; gap: 8px; max-height: calc(100dvh - var(--rv-tabbar-h) - 56px);
    background: var(--rv-bg); border-top: 1px solid var(--rv-line-2);
  }
  .rv-bld-bar .rv-bld-bar-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .rv-bld-bar .rv-bld-amt { flex: 1 1 auto; min-width: 0; font-size: var(--rv-fs-sm); line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rv-bld-bar .rv-bld-bal { display: none; }
  .rv-bld-bar.is-open .rv-bld-bar-main { flex-wrap: wrap; row-gap: var(--rv-sp-2); }   /* open: balance and Create only on a line of their own */
  .rv-bld-bar.is-open .rv-bld-bal { display: block; order: 0; flex: 1 1 55%; font-size: var(--rv-fs-xs); color: var(--rv-text-3); }
  .rv-bld-bar.is-open .rv-bld-amt { order: 2; min-width: 50%; }
  .rv-bld-bar.is-open .rv-bld-go { order: 3; }
  .rv-bld-bar .rv-bld-go { flex: none; height: var(--rv-h-md); padding: 0 18px; white-space: nowrap; }
  .rv-bld-bar .rv-bld-go2 { display: none; }                                  /* "Create only": inside the open summary */
  .rv-bld-bar.is-open .rv-bld-go2 { display: inline-flex; order: 1; }
  .rv-bld-sum-toggle { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 28px; padding: 0;
                       border: 0; background: none; color: var(--rv-text-2); font: inherit; font-size: var(--rv-fs-xs); cursor: pointer; }
  .rv-bld-bar .rv-bld-sum { display: none; }
  .rv-bld-bar.is-open .rv-bld-sum { display: block; overflow-y: auto; overscroll-behavior: contain; max-height: 50dvh; }
  .rv-bld-sum table { width: 100%; font-size: var(--rv-fs-xs); }
  html:has(.rv-bld-bar) body::after { content: ""; display: block; flex: none; height: calc(var(--rv-tabbar-h) + 96px); }

  /* ---- Dashboard, signed in (C): the position cards stacked, then Needs you, then the stats -------------------- */
  /* the page's blocks (the big balance, then each section) one block gap apart, as between the sections themselves
     (owner's live check 2026-10-10: at 500 the balance sat 18px over OPEN POSITIONS) */
  #rv-dash { display: flex !important; flex-direction: column; gap: var(--rv-block-gap); box-sizing: border-box; max-width: 100%; grid-template-columns: none; }
  #rv-dash > * { min-width: 0; width: auto !important; }
  #rv-dash .rv-dash-main { display: contents; }
  #rv-dash .rv-dash-cards { order: 1; display: flex !important; flex-direction: column; gap: 12px; }
  #rv-dash .rv-dash-needs { order: 2; }
  #rv-dash .ds-run { order: 3; }      /* the bots without a position after Needs you (C, polish 2026-10-10) */
  #rv-dash .rv-dash-stats { order: 4; position: static; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  #rv-dash .rv-dash-stats > :first-child { grid-column: 1 / -1; }

  /* a position card (Dashboard, Positions' card view) */
  .rv-pos-card { box-sizing: border-box; width: 100% !important; min-width: 0; }
  #rv-dash .rv-pos-card { border-radius: 0; padding: var(--rv-sp-4) 0 0; }      /* the Dashboard's cards sit on a hairline, no box (C, polish) */
  .rv-pos-card .rv-pos-card-chart { max-width: 100%; height: 56px; }
  .rv-pos-card svg, .rv-pos-card canvas { max-width: 100%; }

  /* ---- Bots (C, /bots and its sub-pages): the sub-navigation and the type filter tabs as sideways rows ----------- */
  #rv-bots { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; max-width: 100%; }

  /* ---- My bots (C, /bots/mine): the big number, then Needs you, then the compact list ----------------------------- */
  #rv-mybots { display: flex; flex-direction: column; gap: var(--rv-block-gap); box-sizing: border-box; max-width: 100%; }      /* markup order: heading, Needs you, the bot list (no order rules: C, polish) */
  #rv-mybots .rv-mb-head { order: 0; display: flex; flex-direction: column; gap: 4px; }
  #rv-mybots .rv-mb-figs { order: 1; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  #rv-mybots .rv-mb-figs > :first-child { grid-column: 1 / -1; }
  #rv-mybots .rv-mb-figs > :first-child .rv-fig-v { font-size: 30px; line-height: 38px; font-weight: 600; }
  #rv-mybots .rv-mb-needs, #rv-dash .rv-dash-needs { border-radius: 0; padding: 0; }      /* a hairline list (.bm-list), on the page's 16px edge (C, polish) */
  .rv-mb-need { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 10px; }
  .rv-mb-need-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .rv-mb-sub { display: block; font-size: var(--rv-fs-xs); line-height: 16px; color: var(--rv-text-3); }

  /* ---- Positions (D, /positions): the card view is the phone's default; data-view="list" (the user's own pick)
          brings the table back ------------------------------------------------------------------------------------ */
  #rv-positions { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; max-width: 100%; }
  #rv-positions .rv-pos-head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  #rv-positions .rv-pos-head h1 { margin: 0; }          /* its size: the shared .rv-title (polish, 2026-10-10) */
  #rv-positions .rv-pos-search, #rv-positions .rv-pos-search input { width: 100%; box-sizing: border-box; font-size: 16px; }
  #rv-positions:not([data-view="list"]) .rv-pos-table { display: none !important; }
  #rv-positions:not([data-view="list"]) .rv-pos-cards { display: flex !important; flex-direction: column; gap: 12px; }
  #rv-positions[data-view="list"] .rv-pos-table { max-width: 100%; overflow-x: auto; }

  /* the position drawer (D, B's .rv-drawer): head, tabs in one sideways row, the body scrolling under them */
  .rv-drawer .rv-drawer-head { padding: var(--rv-sp-4) var(--rv-sp-2) var(--rv-sp-2) var(--rv-sp-4); }
  .rv-drawer .rv-drawer-x { width: 44px; height: 44px; }
  .rv-drawer .rv-drawer-tabs { margin: 0; padding: 0 var(--rv-sp-4); }
  .rv-drawer .rv-drawer-body { padding: var(--rv-sp-4) var(--rv-sp-4) var(--rv-sp-6); }
  .rv-drawer .rv-drawer-foot { padding: var(--rv-sp-3) var(--rv-sp-4); }
  .rv-drawer .rv-drawer-foot .rv-btn.primary { flex: 1 1 auto; }
  .rv-drawer svg, .rv-drawer canvas { max-width: 100%; }

  /* ---- Money (D, /assets): everything stacks; the two actions share a row --------------------------------------- */
  #rv-money { display: flex; flex-direction: column; gap: var(--rv-block-gap); box-sizing: border-box; max-width: 100%; }
  #rv-money .rv-money-head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  #rv-money .rv-money-head h1 { margin: 0; }          /* its size: the shared .rv-title (polish, 2026-10-10) */
  #rv-money .rv-money-actions { display: flex; gap: 8px; }
  #rv-money .rv-money-actions > * { flex: 1 1 0; min-width: 0; height: var(--rv-h-md); justify-content: center; white-space: nowrap; }
  #rv-money .rv-money-bal { border-radius: var(--rv-r-panel); padding: 16px; }
  #rv-money .rv-money-cols { display: flex !important; flex-direction: column; gap: 18px; grid-template-columns: none; }
  #rv-money .rv-money-cols > * { min-width: 0; width: auto !important; }
}