/* PHONE AND TOUCH FIT (2026-11-10, the phone audit of the live free terminal at 360x780, 390x844 and 430x932).
   One sheet, linked last, for what a phone needs and a desk does not. Two kinds of rule live here and nothing else:
     - TOUCH rules, under (hover:none) and (pointer:coarse): a device with a finger and no keyboard. Every control takes a
       44px hit area and every field types at 16px (iOS zooms the page on a smaller one). A desk with a mouse reads none.
     - PHONE rules, under a max-width: rows that did not fit 320 to 430px.
   The hit area is never the drawing: a control keeps its drawn size and gains an invisible ::after (or ::before where its
   ::after is already a caret) centred on it, 44px at least each way. Fields, and rows that have the room, grow instead.
   No rule here fades anything, and none moves a control except where a row did not fit. */

/* ── TOUCH: fields type at 16px ─────────────────────────────────────────────────────────────────────────────────────── */
@media (hover:none) and (pointer:coarse){
  body[data-zena-surface="terminal"] .nav #cmd{font-size:16px;height:44px;margin-block:-7px}
  #znPalette #znQuery{font-size:16px;min-height:44px}
  #znPalette .zn-query-row{padding-block:8px}
  /* the chart's two pickers are native selects kept off screen; a select under 16px zooms the page as it opens */
  .pxctl select.pxsel{font-size:16px}
  /* the Ask box keeps its drawn line and takes 8px above and below it, inside the composer's own padding */
  .zap-form>#zapInput{box-sizing:content-box;padding-block:8px;margin-block:-8px}
}

/* ── TOUCH: 44px hit areas ──────────────────────────────────────────────────────────────────────────────────────────── */
/* The slops are listed under :where(), at no specificity, so the handful of placed ones below them win without a fight.
   The boxes they hang from are listed under :is(): a slop whose control stayed position:static would hang from the card
   or the pane instead and take every tap on it. */
@media (hover:none) and (pointer:coarse){
  #phMenu,#side.phfree .phtop>button,#znPalette .zn-scopes>button{position:relative}
  :is(.nav a.brand,.nav .za-in,
      .zc-category-bar :is(.zc-all,.zc-mode-ask,.zc-watchlist,.zc-live-now),
      .zn-topic-section>header>button,.zc-results-heading button,
      .zc-event-heading>.zc-contract-save,.zc-event-stats .zc-volume-metric,.zc-event-footer>:is(.zc-context-button,.zc-more-outcomes),
      .ztabs .zc-board-return,.zc-market-nav>div>button,
      .pane-h>:is(.lrnq,.pxpand),.pxctl span.tg,.pxctl .zc-context-tools>button,.zlg-now,
      .pxctl .tg.tgm,.pxctl .zc-chart-tools,.zc-market-venues>summary,
      .zap-form>:is(.zap-mic,.zap-send),.zap-chips>.zap-sug,.zv-card-sources>a,
      .zl-tools .zl-sources-toggle,.zl-mkt-go,.zl-mq-b,.zl-tile>.zl-tile-head,.zl-mkt-foot>.zl-venues){position:relative}
  :where(#phMenu,.nav a.brand,.nav .za-in,
      .zc-category-bar :is(.zc-all,.zc-mode-ask,.zc-watchlist,.zc-live-now,.zst-pill),.zc-market-nav .zst-pill,
      .zn-topic-section>header>button,.zc-results-heading button,
      .zc-event-heading>.zc-contract-save,.zc-event-stats .zc-volume-metric,.zc-event-footer>:is(.zc-context-button,.zc-more-outcomes),
      .ztabs .zc-board-return,.zc-market-nav>div>button,
      .pane-h>:is(.lrnq,.pxpand),.pxctl span.tg,.pxctl .zc-context-tools>button,.zlg-now,.tkpv>.zc-rules-button,
      .zap-form>:is(.zap-mic,.zap-send),.zap-chips>.zap-sug,.zap-dock>.zap-more,.zv-card-sources>a,
      #znPalette .zn-scopes>button,
      #side.phfree .phtop>button,
      .zl-tools .zl-sources-toggle,.zl-mkt-go,.zl-mq-b,.zl-tile>.zl-tile-head,.zl-mkt-foot>.zl-venues)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  /* their ::after is a caret (market-briefing.css): the slop is the ::before */
  :where(.pxctl .tg.tgm,.pxctl .zc-chart-tools,.zc-market-venues>summary)::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .zc-event-stats .zc-volume-metric.zc-volume-metric::after{content:"";top:calc(50% - 6px)}   /* the meta line clears its items' ::after; this one is a button, and its slop sits clear of the outcome under it */
  .nav a.brand::after{left:calc(50% - 2px)}   /* the search box, drawn over it, starts 8px to its right */
  /* the Ask control already carries a slop (ask-entry.css), 44px tall and its own width: it is 44px each way here */
  .z-ask.z-ask::after{width:max(100%,44px);height:max(100%,44px)}
  /* THE MODE ROW has no room between its words, and the board clips 12px outside the row. News reaches into the left
     gutter and Ask into the gap before the pill. The watchlist and Live now (a 7px dot) stand 17px further apart, which
     the row's free column gives up, and share that room and the right gutter. */
  :root .zc-ribbon>.zc-category-bar>.zc-mode-switch{margin-inline:-6px -11px;padding-inline:6px 11px}   /* the switch is a scroller and clips at its padding edge: the two slops are inside it */
  .zc-category-bar .zc-mode-switch>.zc-all::after{left:auto;right:0;transform:translateY(-50%)}
  .zc-category-bar .zc-mode-switch>.zc-mode-ask::after{left:0;transform:translateY(-50%)}
  .zc-ribbon>.zc-category-bar>.zc-live-now.zc-live-now{margin-left:17px!important}
  .zc-category-bar>.zc-watchlist::after{left:-12px;width:calc(100% + 22px);transform:translateY(-50%)}
  .zc-category-bar>.zc-live-now::after{left:-19px;width:calc(100% + 31px);transform:translateY(-50%)}
  /* an outcome on a card clips its own box for a bar the board no longer draws: it shows its box and takes a slop */
  :root[data-tier=free] #main .zc-overview .zc-event-contracts>button{overflow:visible!important}
  :root[data-tier=free] #main .zc-overview .zc-event-contracts>button::after{content:"";display:block!important;position:absolute;inset:auto;left:0;top:calc(50% + 3px);width:100%;height:44px;background:none;transform:translateY(-50%)}
  :root[data-tier=free] #main#main .zc-overview:not(.zn-news-mode) .zc-event .zc-event-contracts{row-gap:10px!important}
  /* these have the room, or are rows of a list: they grow to 44px */
  :root[data-tier=free] #main#main .zc-overview:not(.zn-news-mode) .zc-event-heading>.zc-event-title{min-height:44px!important}
  .zc-overview .zc-event-heading:has(>.zc-event-title)>.zc-head-venue{align-self:center}
  .ztabs .zc-market-tab>.ztab{min-height:44px}
  .ztabs .zc-market-tab>.ztabx{min-width:44px;min-height:44px}
  #side.phfree :is(.phfree-primary,.phfree-categories,.phfree-footer)>button{min-height:44px}
  .zl-tools .zl-leagues>button,.zl-later-game>.zl-later-open{min-height:44px}
  #znPalette .zn-scopes>button{min-width:44px}
  #main .tkpv>.tkpvgo{min-height:44px!important}
  #main .tkpv .tkpvb>.tkpvs,#main .tkpv .tkv>.tkv-b{min-height:44px!important}
  .tkpv>.zc-rules-button::after{top:auto;bottom:-10px;transform:translateX(-50%)}   /* it stands on the pane's clipped floor: the slop reaches up */
  .pxctl .pxtf>span.tg{min-width:44px;text-align:center}
  .landrw>input.landr{height:44px;margin-block:-14px}
  /* the Ask page's suggestions stack 44px apart, so each one's slop is its own */
  .zap-chips{row-gap:10px}
}
/* THE CHART'S CONTROLS stand in two rows 31px apart over the plot. On a touch phone the rows stand 44px apart and the plot
   starts 32px lower: a row of controls a finger cannot tell apart is worth less than 32px of chart. */
@media (hover:none) and (pointer:coarse) and (max-width:600px){
  :root[data-tier=free] #main#main.zc-market-page .zc-comparison.zc-integrated-tools .zc-comparison-plots{padding-top:96px}
  :root[data-tier=free] #main#main.zc-market-page .zc-comparison.zc-integrated-tools .pxctl-snap{height:96px;min-height:96px;max-height:96px;row-gap:18px;padding-block:9px;align-content:flex-start}
  /* a pane's heading is the top of a clipped pane and the controls start under it: it is 44px, so its two controls' slops fit */
  :root[data-tier=free] #main#main.zc-market-page .pane>.pane-h{height:44px!important;min-height:44px!important}
  :root[data-tier=free] #main.zc-market-page .pxctl-snap .zc-context-tools{overflow:visible}
}

/* ── PHONE: the menu's one small label ──────────────────────────────────────────────────────────────────────────────── */
#side.phfree .phfree-categories>span{font-size:12px}

/* ── PHONE: Live markets cards. The title takes the row ─────────────────────────────────────────────────────────────── */
/* The title shared its row with the bookmark and the Ask control, in a card inside a section inside the page: at 360 it
   had 78px and broke mid-word ("Temperatu"), at 390 108px. On a phone the title has the row to the card's edge and the two
   controls sit at the end of the line under it, beside the close and the volume. */
@media (max-width:480px){
  :root[data-tier=free] #main#main .zc-overview:not(.zn-news-mode) .zc-event .zc-event-heading{grid-template-columns:34px minmax(0,1fr) auto auto!important;column-gap:10px!important}
  :root[data-tier=free] #main#main .zc-overview:not(.zn-news-mode) .zc-event-heading>.zc-event-title{grid-column:2/-1!important;grid-row:1!important;display:block;overflow:visible;-webkit-line-clamp:none;overflow-wrap:break-word;text-align:left}
  :root[data-tier=free] #main#main .zc-overview:not(.zn-news-mode) .zc-event-heading>.zc-event-stats{grid-column:2!important;grid-row:2!important;align-self:center}
  :root[data-tier=free] #main#main .zc-overview:not(.zn-news-mode) .zc-event-heading>.zc-bookmark{grid-column:3!important;grid-row:2!important;align-self:center}
  :root[data-tier=free] #main#main .zc-overview:not(.zn-news-mode) .zc-event-heading>.z-ask.z-ask{grid-column:4;grid-row:2;align-self:center}
  /* a card's sparkline is a line, not a panel: 58px of it under two outcomes left a 60 to 100px band when the line was flat.
     It stays 44px, because it is pressed for its readings. */
  :root[data-tier=free] #main#main .zc-overview:not(.zn-news-mode) .zc-event .zc-row-trace:has(>svg),:root[data-tier=free] #main#main .zc-overview:not(.zn-news-mode) .zc-event .zc-row-trace>svg{height:44px!important;min-height:0!important}
}

/* ── PHONE: the market page ─────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  /* THE ACTION ROW FITS (audit P1-2: scrollWidth 431 against 353 to 423, Start here cut and Ask off screen with a venue
     picker). One way back: the strip above already opens with "← Board" (and the tab's own close), so this row's second
     back link stands down on a phone. What is left (save, venues, Start here, Ask) fits 320, and wraps before it clips. */
  :root[data-tier=free] #main#main.zc-market-page>.zc-market-nav{flex-wrap:wrap;row-gap:8px;padding-inline:14px}
  :root[data-tier=free] #main#main.zc-market-page>.zc-market-nav>div:first-child{flex:0 1 auto;min-width:0}
  :root[data-tier=free] #main#main.zc-market-page>.zc-market-nav>div:first-child>button:not(.zc-bookmark){display:none}
  :root[data-tier=free] #main#main.zc-market-page>.zc-market-nav .zc-bookmark.zc-bookmark{width:28px!important;min-width:0!important;justify-content:center}
  :root[data-tier=free] #main#main.zc-market-page>.zc-market-nav .zc-bookmark>svg{flex:none;width:16px}
  @media (max-width:340px){
    :root[data-tier=free] #main#main.zc-market-page>.zc-market-nav{padding-inline:10px;column-gap:6px}
    :root[data-tier=free] #main#main.zc-market-page>.zc-market-nav>div:first-child{gap:8px}
    :root[data-tier=free] #main#main.zc-market-page>.zc-market-nav .z-ask.z-ask{margin-left:0}
  }
  /* the tab names its market on one line and its outcome on the next: each ends in an ellipsis, never a cut */
  :root[data-tier=free] #main>.zc-free-tabs .zc-market-tab-copy>*{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis!important;white-space:nowrap;-webkit-mask-image:none!important;mask-image:none!important}
  /* THE HEADER'S FIGURES SHARE ONE GRID: price and estimate on the first line, context and deadline on the second, each
     pair on the same two columns and the same edges. A figure with no partner takes the line. */
  :root[data-tier=free] #main#main.zc-market-page.zc-workspace .zc-clean-header .zmkrow{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px 0!important;align-items:stretch}
  :root[data-tier=free] #main#main.zc-market-page.zc-workspace .zc-clean-header .zmkrow>*{min-width:0!important;width:auto!important;max-width:none!important;margin:0!important;flex:none}
  :root[data-tier=free] #main#main.zc-market-page.zc-workspace .zc-clean-header .zmkrow>.zmk-last{grid-column:1!important;grid-row:1!important}
  :root[data-tier=free] #main#main.zc-market-page.zc-workspace .zc-clean-header .zmkrow>.zq-guide{grid-column:2!important;grid-row:1!important}
  :root[data-tier=free] #main#main.zc-market-page.zc-workspace .zc-clean-header .zmkrow:not(:has(>.zq-guide .zq-figure))>.zmk-last{grid-column:1/-1!important}
  :root[data-tier=free] #main#main.zc-market-page.zc-workspace .zc-clean-header .zmkrow>.zmk-context{grid-column:1!important;grid-row:2!important;justify-self:stretch!important}
  :root[data-tier=free] #main#main.zc-market-page.zc-workspace .zc-clean-header .zmkrow>.zmk-deadline{grid-column:2!important;grid-row:2!important;align-self:center;justify-self:stretch!important;padding-left:13px;text-align:left}
  :root[data-tier=free] #main#main.zc-market-page.zc-workspace .zc-clean-header .zmkrow>.zmk-deadline>*{min-width:0;white-space:normal;overflow-wrap:break-word}
  :root[data-tier=free] #main#main.zc-market-page.zc-workspace .zc-clean-header .zmkrow:not(:has(>.zmk-deadline))>.zmk-context{grid-column:1/-1!important}
  /* THE BOOK AND THE TICKET ARE AS TALL AS WHAT THEY HOLD. The stack gave them 360 and 280px whatever they held: a top
     of book quote left 88 to 170px blank under it and the ticket 51px under "Resolution criteria". The chart keeps its
     460px and the forecast its 240px; a deep ladder still scrolls inside its own pane. */
  :root[data-tier=free] #main.zc-market-page .lywrap:has(>.pane[data-slot=d]){grid-template-rows:460px auto auto 240px!important}
  :root[data-tier=free] #main.zc-market-page .lywrap>.pane:is([data-slot=b],[data-slot=c]){max-height:420px}
}

/* ── PHONE: the search palette fits what the keyboard leaves ────────────────────────────────────────────────────────── */
/* command-center.js fitPalette() keeps --zn-vvh and --zn-vvt at the visual viewport's height and top while it is open.
   The results take what is left of that height and scroll inside it. A keyboard chord is no hint where there are no keys. */
@media (hover:none) and (pointer:coarse){
  #znPalette .zn-result-keys{display:none}
  #znPalette[open]{display:flex;flex-direction:column;margin-top:calc(var(--zn-vvt,0px) + 8px);max-height:calc(var(--zn-vvh,100dvh) - 16px)}
  #znPalette[open]>#znResults{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
}

/* ── PHONE: installed to the home screen, the header clears the notch ───────────────────────────────────────────────── */
/* viewport-fit=cover with display:standalone draws the page under the status bar. On a phone the header is 48px with 6px
   of padding above its row: installed, it pads by the inset as well and is that much taller, so its row keeps its size
   and nothing sits under the notch. The inset is 0 in a browser tab, which reads none of this. */
@media (display-mode:standalone) and (max-width:700px){
  body[data-zena-surface="terminal"] .nav{padding-top:calc(6px + env(safe-area-inset-top,0px));height:auto;min-height:calc(48px + env(safe-area-inset-top,0px))}
}

/* ── PHONE: the banner is never under the header ────────────────────────────────────────────────────────────────────── */
/* On the News desk a phone lifts the header out of the flow so it can scroll away with the page (news-keycard.css, L2).
   The banner is next in the flow, so it sat at the top of the screen UNDER the header: its words were hidden and the page
   below started 29 to 37px lower, an empty band (audit P2-14). While the banner shows, the header and the desk row stand
   in the flow again (the pinned arrangement a browser without scroll timelines already uses) and the banner reads under them. */
@media (max-width:600px){
  html[data-zw-away]:has(>body>.banner.show)>body>.nav,html[data-zw-away]:has(>body>.banner.show) #main>.zc-home-tabs,html[data-zw-away]:has(>body>.banner.show) #pnlBoard>.zc-board-header{position:relative!important;top:auto!important;animation:none!important;translate:none!important}
  html[data-zw-away]:has(>body>.banner.show) #bfBoard::before{display:none!important}
}