/**
 * Phone layout for the web build.
 *
 * src/styles.css was written for an Electron window and contains no media queries at
 * all - the app never had to fit anything but a desktop. Everything here is an
 * override for small screens; the desktop app never loads this file, so its layout is
 * untouched.
 *
 * The single biggest fix is not in this file: it is the <meta name="viewport"> tag that
 * build.js injects. Without it a phone lays the page out at ~980px and scales the
 * result down, which is why every control looked shrunken rather than merely cramped.
 * This file handles what is still wrong once the page is actually being measured in
 * device pixels.
 *
 * Sizing follows one rule: anything you tap is at least 44px on its shortest side, and
 * anything you read is at least 14px. Form controls are 16px minimum, because iOS
 * Safari zooms the whole page in when you focus an input smaller than that - which
 * then leaves the layout stranded at the wrong scale.
 */

/* Wider than a phone so small tablets and landscape phones get it too. */
@media (max-width: 820px) {

  /* --------------------------------------------------------------- topbar -- */

  /**
   * The topbar holds a wordmark, a status pill and three 44px buttons. That is wider
   * than a phone, and the overflow falls off the RIGHT - which is where the settings
   * gear lives, so the control you most need is the one that disappears.
   *
   * The fix is to make exactly one thing shrinkable. The buttons are fixed (a 30px
   * tap target is the bug being fixed) and the wordmark is fixed, so the status pill
   * absorbs it: min-width 0 lets it shrink below its content, and the ellipsis keeps
   * "starting camera..." legible as "starting cam...".
   */
  #topbar {
    padding: 10px 12px;
    gap: 6px;
  }

  .brand {
    flex: 0 0 auto;
    font-size: 14px;
    letter-spacing: 0.1em;   /* 0.16em is wide enough to push the buttons off-screen */
  }

  .top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;   /* without this the flex item refuses to shrink at all */
  }

  /* 30px is a mouse target, not a thumb target. */
  .icon-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 12px;
  }
  .icon-btn.small { width: 38px; height: 38px; font-size: 15px; }

  /* The one shrinkable thing in the bar - see the note on #topbar. */
  .status {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12px;
    padding: 7px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* The spinner must not be squeezed to nothing along with the text. */
  .status .spinner { flex: 0 0 auto; }
  #statusText {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* ------------------------------------------------------------- caption -- */

  #captionWrap {
    padding: 0 18px;
    bottom: 18px;
  }
  #caption {
    /* 2.5vw is ~10px on a phone, so the old clamp always bottomed out at its minimum.
       Scale off the shorter axis instead, which actually tracks phone size. */
    font-size: clamp(21px, 5.2vw, 30px);
    line-height: 1.3;
  }

  /* ------------------------------------------------------------ controls -- */

  /**
   * The desktop bar is one row: button, two dials, a toggle. That needs roughly 700px
   * and a phone has 400. Wrapping to full-width rows keeps every control at a usable
   * size instead of shrinking all four to fit a line they cannot fit.
   */
  #controls {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px 14px;
    /* Clear of the home indicator on notched phones. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  #roastBtn {
    flex: 1 1 100%;
    justify-content: center;
    padding: 18px 22px;
    font-size: 17px;
    letter-spacing: 0.12em;
    border-radius: 14px;
  }
  /* The keyboard hint is noise on a device with no keyboard. */
  #roastBtn kbd { display: none; }

  .dial {
    flex: 1 1 100%;
    gap: 12px;
  }
  .dial-label { font-size: 12px; min-width: 42px; }
  .dial-value { font-size: 12px; min-width: 46px; text-align: right; }

  /* Every slider, not just the two in the control bar - the volume slider lives in
     the settings panel and was left at its 4px desktop track, which is essentially
     undraggable with a finger. */
  input[type="range"] {
    height: 8px;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
  }
  input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: none;
  }

  /* In the control bar they also fill the row rather than sitting at a fixed 150px. */
  #controls input[type="range"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* In the panel they span the full field width. */
  .panel input[type="range"] { width: 100%; }

  .toggles { margin-left: 0; flex: 1 1 100%; justify-content: flex-end; }
  .toggle { gap: 10px; }
  .toggle-label { font-size: 13px; }

  /* --------------------------------------------------------------- panel -- */

  /* A 400px drawer on a 400px screen is a full-screen sheet with a sliver of camera
     behind it. Make that deliberate rather than accidental. */
  .panel {
    width: 100%;
    max-width: 100%;
    border-left: 0;
  }
  .panel-head { padding: 14px 16px; }
  .panel-head h3 { font-size: 15px; }
  .panel-body {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .panel label,
  .panel .field > label { font-size: 14px; }

  /* 16px is the threshold below which iOS Safari zooms the page on focus. Every one of
     these was under it. */
  .panel select,
  .panel input[type="text"],
  .panel input[type="password"],
  .panel input[type="number"],
  .panel textarea {
    font-size: 16px;
    padding: 12px 12px;
    min-height: 46px;
  }

  .panel .hint { font-size: 13px; line-height: 1.5; }
  .panel .btn { min-height: 44px; padding: 12px 16px; font-size: 14px; }
  .panel .btn.tiny { min-height: 44px; min-width: 44px; font-size: 13px; }

  /* ------------------------------------------------------- account sheet -- */

  /* input.rc-input for the same specificity reason as in auth.css - styles.css:512
     targets input[type="password"] by attribute and would otherwise keep that field
     at 12px, which is exactly the size that makes iOS zoom the page on focus. */
  input.rc-input { font-size: 16px; min-height: 48px; }
  .rc-primary, .rc-oauth-btn { min-height: 50px; font-size: 16px; }
  .rc-ghost { min-height: 46px; font-size: 15px; }
  .rc-link { padding: 10px; font-size: 14px; }
  .rc-h { font-size: 21px; }
  .rc-p { font-size: 14px; }
  .rc-history li { grid-template-columns: 52px 1fr; }
  .rc-roast { font-size: 14px; }
}

/**
 * The camera claims its own touch gestures so pinch zooms the PICTURE rather than the
 * page - see web/camera.js. `touch-action: none` is what hands those gestures to the
 * page instead of the browser's zoom.
 *
 * Scoped to #stage on purpose: everywhere else - the settings panel, the account sheet,
 * the controls - keeps normal browser pinch-zoom, so anyone who needs to enlarge the
 * text can still do it. Taking that away globally is an accessibility regression, and
 * the camera is the only place where it buys anything.
 */
#stage {
  touch-action: none;
}

/**
 * Touch devices of any width. Hover styles that stick after a tap read as a button
 * stuck in a pressed state, and every one of these has a :hover rule in styles.css.
 */
@media (hover: none) {
  .icon-btn:hover { background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.14); }
  .btn:hover { border-color: var(--line); background: var(--panel-2); }
  .btn.primary:active { transform: scale(0.98); }
  .icon-btn, .btn, .toggle, input[type="range"] { touch-action: manipulation; }
}