/* Phone layout only. Loaded after style.css so equal specificity wins. No new colors. */

/* One zoom control per screen: the toolbar's on a wide window, the bottom bar's on a phone. */
@media (min-width: 861px) {
  .zrail { display: none !important; }
}

@media (max-width: 860px) {
  .tag { display: none; }
  /* A slim header: one short row, not a card. */
  .top .wrap { flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; padding-bottom: 8px; }
  .brand { font-size: 16px; }
  .brand svg { width: 18px; height: 18px; }
  .account { margin-left: auto; font-size: 13px; gap: 10px; }
  .top .settings .vopts-panel { position: fixed; left: 16px; right: 16px; top: 52px; width: auto; max-width: none; }
  .top .icon-btn { width: 44px; height: 44px; padding: 0; }
  .foot .wrap { padding-bottom: 88px; }

  .ask { flex-direction: column; }
  .ask button { min-height: 44px; }
  /* The branch list spans the screen, under the chip, so a long name does not run off the right edge. */
  .crumbs .branch[open] .branch-panel { position: fixed; left: 16px; right: 16px; width: auto; top: auto; }

  /* The options are a quiet strip that scrolls away with the page; only the zoom bar stays. */
  .controls {
    position: static;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 8px 0;
    padding: 8px 10px;
    box-shadow: none;
    max-width: 100%;
  }
  .controls > * { flex: 0 1 auto; min-width: 0; }
  .controls .opt { white-space: nowrap; min-height: 40px; }
  .controls .seg button { min-height: 40px; }

  .controls .summary { width: auto; margin: 0; white-space: nowrap; }

  /* The Key and Settings panels span the screen, under the toolbar, so they never run off its edge. */
  .tbar-end .vopts-panel { position: fixed; left: 16px; right: 16px; top: auto; width: auto; max-width: none; }
  .status:empty { display: none; }

  /* The zoom lever: a slim bar at the bottom, − slider + and the level's name.
     The in-page Detail level control is that bar, so its label does not sit alone. */
  .zoom, .zoom-q, .zoom-label, .zoom-help { display: none !important; }
  /* Side by side is for wider screens. The module reading stays. */
  .dside, .how-graph { display: none !important; }
  /* A single function's change keeps the zoom bar: zoom stays reachable on every page. */
  body.focus .zrail { display: flex !important; }
  body.focus { padding-bottom: 78px; }
  /* The level's question, under the slider; nothing depends on hovering for it. */
  .zrail { flex-wrap: wrap; }
  .zr-q { display: block; order: 3; flex: 1 0 100%; margin: 0; padding: 0 2px 2px; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; }
  .zrail {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    flex-direction: row;
    gap: 6px;
    padding: 4px 10px calc(4px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0;
    background: var(--card);
    backdrop-filter: none;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, .08);
  }
  .zr-track { flex: 1 1 auto; height: auto; align-items: center; gap: 10px; min-width: 0; }
  .zr-track input[type="range"] { writing-mode: horizontal-tb; direction: ltr; flex: 1 1 auto; width: auto; height: 40px; min-width: 0; }
  .zr-labels { display: block; order: 2; padding: 0; min-width: 4.5em; }
  .zr-labels li { display: none; }
  .zr-labels li:has(button[aria-current="true"]) { display: block; }
  .zr-labels button { font-size: 13px; padding: 0; text-align: right; width: 100%; pointer-events: none; }
  .zr-step { width: 40px; height: 40px; flex: 0 0 auto; }
  .zr-step[data-step="-1"], .zr-step[data-lstep="-1"] { order: 0; }
  .zr-track { order: 1; }
  .zr-step[data-step="1"], .zr-step[data-lstep="1"] { order: 2; }
  body.has-results:is([data-view="functions"], [data-view="diff"]) main.wrap { padding-left: 16px !important; }

  body.has-results:is([data-view="functions"], [data-view="diff"], [data-view="map"]) { padding-bottom: 78px; }
  .lanes-details { bottom: 60px; }

  .results { gap: 8px; }
  .results.with-files { grid-template-columns: 1fr; }
  /* The file strip scrolls with the page; sticky bars are what ate the screen. */
  /* relative, so the strip's screen-reader-only text stays inside it and cannot widen the page. */
  .files {
    position: relative;
    top: auto;
    padding: 4px 6px;
    max-height: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    touch-action: pan-x;
  }
  .files[hidden] { display: none; }
  /* Neighbours of a file opened directly are a desktop aid; a phone keeps its short page. */
  .files.siblings { display: none; }
  /* The explorer is a strip on a phone: its files side by side, no folders or indents. */
  .files .ft-dir { display: none; }
  .files .ft-row[hidden] { display: flex; }
  .files .ft-row { --d: 0; width: auto; padding-left: 6px; }
  .files > a,
  .files > .dnav-file { flex: 0 0 auto; max-width: 80vw; align-self: center; }
  /* Function names made this bar as tall as the screen, so it ate every vertical drag. */
  .files .dnav-fns, .files .dnav-head { display: none; }
  .dguide { display: none; }

  .dmapfold > summary {
    min-height: 44px; display: flex; align-items: center; flex-wrap: wrap;
  }
  .dpatch-rows { max-height: none; overflow: visible; }
  .pl { white-space: pre-wrap; overflow-wrap: anywhere; }
  .file, .dfile, .dcard { scroll-margin-top: 64px; }
  html { scroll-padding-bottom: 96px; }

  .ex-grid,
  .ex-cols, .how { grid-template-columns: 1fr; }
  .read-grid, .zoom-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-lang li { white-space: normal; }

  /* clip does not turn the page into a scroll container, so the phone can still scroll. */
  html, body { overflow-x: clip; }
  /* 16px keeps iOS from zooming the page when the field is focused. */
  .box input { font-size: 16px; }
  /* A result is the code. The signed-in header stays one row, the search is the home
     page's, and the options are not a card of empty space. */
  body.has-results .top .wrap:has(.who) { flex-wrap: nowrap; gap: 6px 8px; }
  body.has-results .account { min-width: 0; gap: 8px; }
  body.has-results .account .who { min-width: 0; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.has-results .account a[target] { display: none; }
  body.has-results #form.ask { display: none; }
  body.has-results .controls {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 2px 0 6px;
  }
  .wrap { max-width: 100%; }

  /* Icon buttons. The words stay in the DOM, so the accessible name is unchanged. */
  .card-acts .spot-btn {
    width: 44px; min-width: 44px; height: 44px; padding: 0; gap: 0;
    font-size: 0; justify-content: center;
  }
  #vopts-btn, #key-btn, .listbar .tgl {
    font-size: 0; gap: 0; width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center;
  }
  /* The name on its own row, then every focus button on the next, so the arrows
     and the chip, copy, image and close controls share one line. */
  /* Exit shares the name's row; the steps and the function's own controls take the next. */
  .spot-crumbs { flex: 1 1 0; min-width: 0; }
  .spot-bar .spot-exit { order: 1; }
  .spot-bar .spot-tools { order: 2; }
  .spot-bar .spot-acts { order: 3; }
  .spot-bar .spot-ctoggle, .spot-bar .contract, .spot-bar .spot-calls { order: 4; }
  .spot-bar { row-gap: 6px; }
  .spot-bar button:not(.spot-crumb, .ct, .png) {
    font-size: 0; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  }
  /* Most / least dependencies is an icon. The words stay the button's name. */
  .guide-walk .tgl .ico-most { display: block; }
  .guide-walk .tgl[aria-pressed="true"] .ico-most { display: none; }
  .guide-walk .tgl[aria-pressed="true"] .ico-least { display: block; }
  .spot-bar .spot-out::before { content: "↑"; font-size: 18px; }
  .spot-bar .spot-prev::before { content: "‹"; font-size: 20px; }
  .spot-bar .spot-next::before { content: "›"; font-size: 20px; }
  .spot-bar .spot-exit::before { content: "×"; font-size: 20px; }
}

/* The contract: the glyph keeps its column, the label and each item take a line under it. */
@media (max-width: 600px) {
  .contract .ct, .spot-bar .contract button.ct { display: grid; grid-template-columns: 2ch minmax(0, 1fr); column-gap: 8px; padding: 2px 8px; text-indent: 0; }
  .contract .ctm { width: auto; margin: 0; }
  .contract .ctl { width: auto; margin: 0; grid-column: 2; }
  .contract .cti { grid-column: 2; margin: 0; }
  .contract .cti:not(:last-child)::after { content: none; }
  /* The focus bar's six-row block is closed until asked for: the bar stays a small part of the screen. */
  .spot-bar button.spot-ctoggle { display: inline-flex; flex: 1 1 40%; justify-content: flex-start; width: auto; min-width: 0; height: 44px; min-height: 44px; padding: 0 10px; font-size: 13px; gap: 6px; }
  .spot-bar .spot-ctoggle::before { content: "▸"; }
  .spot-bar .spot-ctoggle[aria-expanded="true"]::before { content: "▾"; }
  .spot-bar:not(.ct-open) .contract { display: none; }
  .spot-bar .spot-calls { flex: 1 1 40%; min-width: 0; }
  .spot-bar .spot-calls[open] { flex-basis: 100%; }
  .spot-bar .spot-calls > summary { min-height: 44px; }
}