/* Phones (max-width 760px). Loaded last on every page; it overrides the narrow-width rules of the other sheets, which
   still serve narrow laptop windows. Nothing here makes text smaller.
   - A row of text cards becomes a CAROUSEL (phone-carousel.js): one card at a time, all stacked in one cell so the row
     keeps the height of its tallest card, with small arrows and one dot per card under it; it advances on its own in a
     loop, a tap or a sideways swipe changes the card, and vertical scrolling is left alone.
   - What only makes sense seen together (the geodesics, the latent-direction explorer) is rearranged to fit one
     screen; plots keep their full width and stack. */
@media (max-width: 760px) {

  /* the hero: the title with the authors, the logos, the TL;DR, the animation (a little smaller, with its caption
     across the width), then the buttons */
  .hero-grid { display: flex !important; flex-direction: column; gap: 14px; }
  .hero-intro { display: contents; }
  .hero-intro > h1 { order: 1; margin-bottom: 0; }
  .hero-intro > .authors { order: 2; }
  .hero-intro > .affils { order: 3; }
  .hero-intro > .logos { order: 4; }
  .hero-intro > .tldr { order: 5; }
  .hero-intro > .btn-row { order: 7; }
  .hero-intro > * { align-self: stretch; }
  .hero-visual { order: 6; width: 100%; max-width: none; align-self: stretch; margin: 4px 0; }
  .hero-visual .hero-stage { width: 52%; max-width: 250px; align-self: center; }
  .hero-visual .hero-caption { width: 100%; max-width: none; box-sizing: border-box; }

  /* small things in one row: they stay on one line and shrink */
  .logos { flex-wrap: nowrap; gap: 0 4%; justify-content: space-between; margin: 10px 0 14px; }
  .logos img { min-width: 0; flex: 0 1 auto; }
  .logos .logo-eth { height: 15px; }
  .logos .logo-camlab { height: 31px; }
  .logos .logo-ai { height: 27px; }
  .logos .logo-cmg { height: 33px; }
  .btn-row { flex-wrap: nowrap; gap: 6px; }
  .btn-row .btn { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 4px;
    white-space: nowrap; border-radius: 16px; }
  .btn-row .btn .ico { font-size: 1.55rem; line-height: 1; }

  /* the method's tabs: one per line across the full width, the title on one line, without the subtitle */
  .stage-tabs { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  .stage-tab .sub { display: none; }
  .stage-tab b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* the findings: the animated box above, the text below it across the card */
  .finding { flex-direction: column; gap: 12px; }

  /* the articles: the description across the card, "Read" under it on the right; two articles per slide */
  .article-link { grid-template-columns: minmax(0, 1fr) !important; }
  .article-link .go { justify-self: end; }
  .pc-slide { gap: 12px; }

  /* the geodesics: the globe above, the true evolution and the geodesic estimate side by side under it */
  .geo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .geo .globe-panel { grid-column: 1 / -1 !important; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "title title" "globe legend" "link link"; gap: 4px 10px; align-items: center; }
  .geo .globe-panel > h4 { grid-area: title; }
  .geo .globe-panel > canvas { grid-area: globe; width: 100% !important; }
  .geo .globe-panel > .legend { grid-area: legend; display: grid; gap: 6px; margin: 0; }
  .geo .globe-panel > .globe-link { grid-area: link; margin-top: 6px; }
  .geo .panel { padding: 12px; }
  /* the two frames start at the same height, whatever the length of their titles */
  .geo { align-items: stretch !important; }
  .geo > .panel:not(.globe-panel) { display: flex; flex-direction: column; }
  .geo > .panel:not(.globe-panel) > .frame-wrap { margin-top: auto; }
  /* the link to the sphere explorer on the method's animation: at the top, over the picture, clear of its caption */
  .stage-canvas-wrap .globe-link { top: 12px; bottom: auto; }
  .geo .panel h4 { display: block; }
  .geo .panel h4 small { display: block; margin: 2px 0 0; }

  /* the latent-direction explorer: the result large beside two small anchors, the coefficient and a full-width slider,
     the steps, then the directions and the fields, each in one row that scrolls sideways */
  .explorer { display: grid !important; grid-template-columns: minmax(0, 1fr) 27% !important; gap: 10px 12px;
    grid-template-areas: "view anchors" "coef coef" "slider slider" "thumbs thumbs" "l1 l1" "dirs dirs" "l2 l2" "bases bases" "desc desc"; }
  .explorer > .card, .explorer > div:not(.card), .explorer .ex-stage, .explorer .ex-side { display: contents; }
  .explorer .strip-view { grid-area: view; }
  .explorer .anchors { grid-area: anchors; grid-template-columns: minmax(0, 1fr); margin: 0 !important; gap: 2px; align-self: center; }
  .explorer .anchors .arrow { transform: rotate(90deg); justify-self: center; line-height: 1; }
  /* an anchor's caption is its description alone, on one line ("anchor A ·" is dropped) */
  .explorer .anchors figcaption { font-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .explorer .anchors figcaption span { font-size: 0.75rem; }
  .explorer #ex-coef { grid-area: coef; font-size: 1.4rem; margin-top: 4px; }
  .explorer .range-wrap { grid-area: slider; }
  .explorer .ex-thumbs { grid-area: thumbs; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .explorer .card > .form-label:first-child { grid-area: l1; margin-top: 6px; }
  .explorer .card > .form-label:not(:first-child) { grid-area: l2; margin-top: 2px !important; }
  .explorer #ex-dirs { grid-area: dirs; }
  .explorer #ex-bases { grid-area: bases; }
  .explorer #ex-dirs, .explorer #ex-bases { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .explorer #ex-dirs .chip, .explorer #ex-bases .chip { flex: none; white-space: nowrap; }
  .explorer #ex-desc { grid-area: desc; margin: 0; }

  /* the before/after sliders: input at the top left, the reconstruction at the bottom right, clear of each other */
  .compare .tag.r { top: auto; bottom: 10px; }

  /* the live demos: the settings bar (where there is one), then the result, then the input panel last */
  .demo-layout { grid-template-areas: "bar" "result" "input" !important; }

  /* a result with a slider (upsampling, inpainting, outpainting): the slider first, then its fields smaller, side by side in one
     row under it (each opens full screen) */
  .slider-first { gap: 14px !important; }
  .slider-first > .result-slider { order: 1; }
  .slider-first > .result-figs { order: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; }
  .slider-first > .result-figs.inpaint-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  /* a long caption in a narrow column breaks inside its words rather than running into the next */
  .slider-first > .result-figs figcaption { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .slider-first > .numbers { order: 3; }

  /* the latent search: the query, its reconstruction and error across the card; the matches and the draws of the bank
     each in one row that scrolls sideways under the finger */
  .search-query .sq-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; width: 100%; }
  .search-query .sq-fig img, .search-query .sq-fig canvas { width: 100%; height: auto; aspect-ratio: 1; }
  #result .match-grid, #bank-draws { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    padding-bottom: 6px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  #result .match-grid > *, #bank-draws > * { flex: 0 0 42%; scroll-snap-align: start; }

  /* an article's "Read more about ..." chip on a line of its own under its heading, clear of a heading on several lines */
  .article h2 .h2-more { display: table; margin: 10px 0 0; }

  /* the live partitioner: the partitions and their settings together; the sizes of the partitions and the list of
     details are left out */
  #pt-widget .widget-grid > .panel:nth-child(2), #pt-widget #pt-static { display: none; }
  /* the effective-frequency example: the field and its map of the effective frequency side by side */
  #esf-widget .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #esf-widget .panel h4 small { display: none; }
  /* the reconstruction article's held-out and partial-observation widgets: their three fields side by side */
  #hd-widget .widget-grid, #po-widget .widget-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #hd-widget .widget-grid, #po-widget .widget-grid { align-items: stretch; }
  #hd-widget .widget-grid .panel, #po-widget .widget-grid .panel { padding: 6px; display: flex; flex-direction: column; }
  #hd-widget .widget-grid .panel canvas, #po-widget .widget-grid .panel canvas { margin-top: auto; }
  #hd-widget .widget-grid .panel h4 small, #po-widget .widget-grid .panel h4 small { display: none; }
  /* the latent atoms: the two large atoms of the chosen dimension first, the mosaic to choose from under them */
  .ip-atoms .ip-atom-pair { order: -1; }
  /* the live PartNorm: the field and the normalized partition side by side, without the list of details */
  #pn-widget .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #pn-widget #pn-static { display: none; }
  #pn-widget .panel h4 small { display: none; }

  /* the games: the head on two short lines (the nickname, its reroll and Exit; the progress), the field smaller, no
     placeholder lines above a first answer, so the field and its controls fit one screen */
  .game-head { margin-bottom: 10px; gap: 6px 10px; }
  .game-head .head-side { order: -1; width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
  .game-progress > span { white-space: nowrap; }
  /* the speed mode of Freaks: the hits and the time on one line, the hearts on the next */
  .game-progress:has(.hearts) { flex-wrap: wrap; align-items: center; row-gap: 6px; }
  .game-progress .hearts { order: 3; flex-basis: 100%; }
  .game-head .nick-label { display: none; }
  .game-head .nick { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .game-head .nick b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .game-head .btn { padding: 5px 10px; font-size: 0.82rem; flex: none; }
  .verdict-hint, .pp-question, .tr-label { display: none; }
  .freq-layout, .pp-layout, .tr-layout { gap: 12px; }
  .freq-layout .freq-field { max-width: min(100%, 29vh); }
  .pp-layout .pp-field { max-width: min(100%, 36vh); }
  .tr-board { max-width: min(100%, 40vh); margin: 0 auto; }
  .tr-side { gap: 8px; }
  /* Freaks: the guess and its button in one row, the slider under them, the reference fields last */
  .freq-layout .freq-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .freq-layout .freq-controls > * { grid-column: 1 / -1; }
  .freq-layout .freq-guess { grid-column: 1; grid-row: 2; }
  .freq-layout .freq-go { grid-column: 2; grid-row: 2; align-self: end; }
  .freq-layout .freq-range { grid-row: 3; }
  .freq-layout .freq-reference { grid-row: 4; }
  .freq-layout .freq-value { font-size: 1.3rem; margin-top: 2px; }
  /* Divide and Conquer: the partition counts in two rows, the typed count beside its prompt */
  .pp-choices { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .pp-choices .btn { padding: 8px 2px; font-size: 0.9rem; }
  .pp-type { margin-top: 2px; }

  /* a list item of the credits holds long links: they wrap rather than widen the page */
  .credits li { min-width: 0; overflow-wrap: anywhere; }
}