/* ==========================================================================
   Phone and tablet refinements
   Loaded everywhere. The desktop layout is untouched: everything here sits
   inside a media query or fixes something that was wrong at every size.
   ========================================================================== */

/* ── Tap targets ────────────────────────────────────────────────────────────
   A finger is about 9mm across. Small text links are fine to read but hard to
   hit, so links in dense lists get a padded hit area without changing how the
   layout looks. Padding is used rather than min-height so that the text keeps
   its line spacing and nothing shifts. */
@media (max-width: 860px) {
  .footer-list a,
  .footer-meta a,
  .footer-head a,
  .hero-flow a,
  .guide-back a,
  .crumbs-bar a,
  .crumbs a,
  .cat-head h2 a,
  .section-head a,
  .workflow-steps a,
  .guide-card-tool,
  .tool-card-go {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Links inside sentences are deliberately left alone. Padding them out
     would break up the line spacing of the paragraph they sit in, and the
     target-size guidance exempts links in running text for that reason. */

  /* The search field is the tap target; the input inside it should fill it. */
  .toolsearch input { min-height: 36px; }
  .toolsearch-field { padding-block: .7rem; }

  .footer-list li,
  .footer-meta li { line-height: 1.2; }

  /* Icon buttons were 36x40; a 44px square is the platform minimum. */
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Small buttons inside panels (page selection, file chips) need the same
     treatment - they are the controls people actually tap repeatedly. */
  .btn.small {
    min-height: 40px;
    padding-inline: .85rem;
  }

  .file-chip .x {
    min-width: 40px;
    min-height: 40px;
    display: inline-grid;
    place-items: center;
  }

  /* Thumbnails are tapped to select pages, so they need room. */
  .thumbs.is-selectable .thumb { min-height: 84px; }
  .thumbs.is-selectable .thumb::after {
    width: 24px;
    height: 24px;
    top: 8px;
    right: 8px;
  }
}

/* ── Legible text ───────────────────────────────────────────────────────────
   Anything under about 13px is a squint on a phone. These were 10-12px. */
@media (max-width: 860px) {
  .mob-nav-label { font-size: 11.5px; }
  .tool-card-cat { font-size: 12px; }
  .tool-card-go,
  .footer-list a,
  .footer-meta a { font-size: 13.5px; }
  .footer-legal { font-size: 13px; }
  .cat-blurb,
  .section-head p { font-size: 14.5px; }
  .help { font-size: 13px; }
}

/* ── The fixed bottom bar ───────────────────────────────────────────────────
   iPhones with a home indicator reserve space at the bottom edge. Without
   this the last row of the bar sits under it and is hard to tap. */
.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0);
  height: auto;
  min-height: 64px;
}

.mob-nav-item {
  min-height: 52px;
  /* Removes the grey flash Android draws over taps. */
  -webkit-tap-highlight-color: transparent;
}

@supports (padding: max(0px)) {
  .content {
    padding-bottom: max(80px, calc(64px + env(safe-area-inset-bottom, 0px) + 1rem));
  }
}

/* ── Forms ──────────────────────────────────────────────────────────────────
   iOS zooms the whole page when a focused input has a font smaller than 16px.
   That zoom does not undo itself, which is why forms on phones so often end
   up sideways. */
@media (max-width: 860px) {
  .input,
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  select,
  textarea,
  .toolsearch input {
    font-size: 16px;
  }

  /* Give the number steppers and selects a comfortable height. */
  .input,
  select { min-height: 44px; }

  .check {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  .check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: none;
  }
}

/* ── The tool workspace ─────────────────────────────────────────────────────
   On a phone the order that matters is: upload, then options, then run. The
   preview is useful but it is not the first thing you need, so it follows the
   controls rather than pushing them off the screen. */
@media (max-width: 860px) {
  .workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  /* Upload first, because it is step one, then the controls, then run.
     The drop zone lives inside the viewer column, and CSS order cannot lift
     it out of its parent - so the viewer column leads and its preview is
     capped below, rather than trying to reorder across containers. */
  .workspace .viewer-col { order: 1; }
  .workspace .options-col { order: 2; }

  /* A full-height page preview would fill the screen before anyone reaches
     the controls. */
  .viewer { max-height: 72vh; }
  /* 46vh left the page in a letterbox barely two thumbnails tall. The
     controls still sit below it, so a taller preview costs nothing but a
     little scrolling to reach them. */
  .canvas-area { max-height: 58vh; }

  /* The thumbnail rail becomes a horizontal strip, which suits a thumb. */
  .viewer {
    display: flex;
    flex-direction: column;
  }
  .thumbs {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding-bottom: .35rem;
    /* Snap so pages line up as you flick through them. */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .thumbs .thumb {
    flex: 0 0 auto;
    width: 68px;
    scroll-snap-align: start;
  }

  /* The run button is the point of the page; keep it reachable. */
  #run-btn {
    position: sticky;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    box-shadow: var(--shadow);
  }
}

/* ── Reading width ──────────────────────────────────────────────────────────
   Guides and legal pages are long-form; a little more breathing room makes
   them far easier to read on a small screen. */
@media (max-width: 860px) {
  .prose p,
  .legal-body p,
  .guide .prose p { line-height: 1.72; }
  .prose li { margin-bottom: .4rem; }
  .guide h2,
  .legal-body h2 { margin-top: 1.75rem; }
}

/* ── Tablet ─────────────────────────────────────────────────────────────────
   Between phone and desktop the two-column workspace still works, but the
   tool grid wants fewer, larger cards rather than many cramped ones. */
@media (min-width: 861px) and (max-width: 1100px) {
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ── Pointer-specific behaviour ─────────────────────────────────────────────
   Hover lifts and transforms are meaningless on touch and can leave an
   element stuck in its hover state after a tap. */
@media (hover: none) {
  .tool-card:hover { transform: none; }
  .tool-card:hover .tool-art { transform: none; }
  .quick-chip:hover { transform: none; }
  .tool-card:active { background: var(--glass-strong); }
}

/* ── One page 1, not two ────────────────────────────────────────────────────
   After a run, the source viewer above and the before/after comparison below
   both render page 1 of the same document. On a wide screen they sit apart
   and read as two different jobs - browse the document, inspect the result.
   Stacked on a phone it is simply the same page twice, and it pushes Download
   and the options a full screen further down.

   The comparison wins because it contains the result; the viewer only ever
   showed the input. Desktop keeps both. */
@media (max-width: 860px) {
  html.has-compare #viewer-card { display: none; }
}