/* Mobile refinements for the two schematic explorers — brewery and maltings.
 *
 * Loaded AFTER each explorer's own stylesheet, and deliberately kept in a separate file we own.
 * The explorers themselves are byte-for-byte copies of the originals, verified by checksum; editing
 * their CSS directly would destroy that and make a regenerated explorer impossible to re-sync.
 * Everything we change lives here.
 *
 * THE PROBLEM THIS SOLVES. At 375px the schematic renders 1170px wide inside a 344px window — 826px,
 * about 77% of the drawing, off-screen — and roughly 762px tall, which is most of a phone screen
 * before any content. The original handles the width with a horizontal swipe and says so
 * ("Swipe to explore →"), which is a legitimate choice. What it does not do is stop the diagram
 * eating the first screen.
 *
 * WHAT THIS DOES NOT DO. It does not redraw anything. At 375px a 1320-wide viewBox scales to about
 * 28%, which turns 15px labels into 4px — there is no fit that makes this diagram readable on a
 * phone. So on mobile the diagram becomes a glanceable overview and the numbered station list
 * carries the content. Every station is reachable from that list, opening the identical dialog with
 * the identical text, so nothing is lost — only reordered in importance.
 *
 * The seed trait explorer is not covered here and does not need to be: it was authored responsive
 * and measures clean at 375px.
 */

@media (max-width: 700px) {
  /* The schematic becomes a band rather than a screenful, by overriding the explorer's own
   * min-width (1070px brewery, 1170px maltings) with something a phone can nearly hold.
   *
   * Sized by WIDTH, deliberately, and not by vh. The frame is auto-height — the parent measures the
   * content and sets the iframe to match — so the iframe's viewport height equals its content
   * height, and a vh unit inside it is circular. An earlier attempt at `height: 46vh` resolved
   * against a 2355px frame and scaled the drawing UP, taking the hidden portion from 826px to
   * 1174px. Width has a fixed reference; height does not. */
  .mapscroll svg {
    min-width: 560px;
    width: 100%;
    height: auto;
  }

  /* Momentum scrolling, and stop a horizontal swipe from dragging the whole page with it. */
  .mapscroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  /* Make the swipe affordance an instruction rather than a footnote. */
  .scrollhint {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    opacity: .95;
  }

  /* The station list is what actually works on a phone, so give it real touch targets.
   * 44px is the usual minimum; these were 47px with 13px text and sat close together. */
  .stationbtn {
    min-height: 56px;
    font-size: 14px;
    padding: 12px 11px;
    gap: 12px;
  }

  .sectionhead h2 {
    font-size: 20px;
  }

  /* Toolbar buttons are the other thing a thumb has to hit. */
  .toolbar button {
    min-height: 44px;
  }

  /* The trace-reset control appears mid-flow once a pathway is drawn; it should be as easy to hit
   * as the buttons that produced it. */
  #traceReset {
    min-height: 44px;
  }
}

/* Very narrow phones. The two-column station list gets cramped below about 380px. */
@media (max-width: 380px) {
  #stationList {
    grid-template-columns: 1fr;
  }

  .mapscroll svg {
    min-width: 500px;
  }
}