/* ===========================================================================
   DEVICE PASS — iPhone, iPad, MacBook.
   
   The breakpoints above already handle LAYOUT (one column plus the Edit/Preview
   switch below 980px, which covers iPad portrait at 768 and every iPhone). What
   was missing is everything about actually being ON those devices: safe areas,
   touch target sizes, Safari's focus-zoom, and hover states that stick after a
   tap. Those are the bugs you feel rather than see in a screenshot.
   =========================================================================== */

/* ------------------------------------------------------ iOS focus zoom
   The single most disruptive iPhone bug in an editor. Safari zooms the whole
   page whenever a focused field's font-size is below 16px, and the controls
   inherit the body's 15px — so every tap into a field jerked the layout and the
   user had to pinch back out. 16px on touch-capable pointers stops it dead.
   Applied by POINTER type, not by width: an iPad at 1024px is still touch. */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* The one exception: the OTP field is already larger, and forcing 16px would
     shrink it. */
  .code-input {
    font-size: 1.5rem !important;
  }
}

/* --------------------------------------------------- touch target sizing
   Apple's HIG asks for 44pt minimum. The desktop sizes (36px icon buttons,
   38px buttons) are comfortable with a mouse and genuinely hard to hit with a
   thumb. Enlarged only for coarse pointers so the desktop stays compact. */
@media (pointer: coarse) {
  .icon-button,
  .mini-button {
    min-width: 44px;
    min-height: 44px;
  }

  .button,
  .pill,
  .tab,
  .pane-switch button {
    min-height: 44px;
  }

  /* Repeat-item controls sit in dense rows; give them room without changing the
     row rhythm on desktop. */
  .item-actions {
    gap: 6px;
  }

  /* A tap on a link or control should not flash iOS's translucent blue box —
     the app has its own focus and active states. */
  a,
  button,
  input,
  select,
  textarea,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ------------------------------------------------------- stuck hover states
   On a touch screen :hover latches after a tap and stays until you tap
   elsewhere, so a card can sit lifted and highlighted for no reason. Every
   hover affordance is therefore reverted where hovering is not possible. */
@media (hover: none) {
  .app-hit:hover,
  .tile:hover,
  .button:hover,
  .icon-button:hover,
  .control-card:hover,
  .switch-row:hover {
    transform: none;
    border-color: var(--hairline);
    box-shadow: none;
  }

  /* :active is the right feedback channel on touch — immediate and it clears. */
  .app-hit:active,
  .tile:active {
    transform: scale(0.985);
  }
}

/* ------------------------------------------------------------- safe areas
   index.html sets viewport-fit=cover, which is what allows content to fill an
   iPhone's rounded display — and also what puts it UNDER the notch, the Dynamic
   Island and the home indicator unless the insets are respected. In landscape
   the left/right insets matter as much as the top.
   
   env() resolves to 0px on every non-notched device, so these are unconditional
   rather than hidden behind a device query. */
.topbar {
  margin-top: max(10px, env(safe-area-inset-top));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

.app-shell {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.gate,
.launcher {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* The toast floats bottom-centre and would otherwise sit on the home indicator. */
.toast {
  margin-bottom: env(safe-area-inset-bottom);
}

/* ------------------------------------------------- iPad: landscape vs portrait
   iPad landscape is 1024px, which lands in the 1180px breakpoint and keeps the
   two-column layout — correct, there is room for both. Portrait at 768px falls
   under 980px and collapses to the pane switch, also correct.
   
   What needs saying is the in-between: at 1024px a 392px rail is 38% of the
   screen, which leaves the A4 page scaled small. Trimming the rail gives the
   document meaningfully more room on exactly that device. */
@media (min-width: 981px) and (max-width: 1100px) {
  :root {
    --rail: 348px;
  }
}

/* ----------------------------------------------- short landscape viewports
   An iPhone in landscape is ~375-430px tall. A 68px topbar plus the editor's
   own heading and tab strip leaves almost nothing for content, so the chrome
   gets compressed rather than letting the panel become unusable. */
@media (max-height: 460px) and (orientation: landscape) {
  :root {
    --topbar-h: 52px;
  }

  .editor-heading {
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .editor-heading h1 {
    font-size: 16px;
  }

  /* The completeness ring is decorative; the space is better spent on fields. */
  .score {
    display: none;
  }

  .editor-footer {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* --------------------------------------------------------- momentum scrolling
   The scrolling regions are inside a fixed, non-scrolling body. Without
   -webkit-overflow-scrolling they scroll without inertia on iOS, which reads as
   sluggish; overscroll-behavior stops a scroll at the end of a panel from
   rubber-banding the whole page behind it. */
.panel,
.paper-stage,
.drawer,
.gate {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------ pointer-fine
   Trackpad and mouse only: tighten the density back up. This is the MacBook
   case, and it is expressed as a positive query rather than by unwinding the
   touch rules above so each device class reads independently. */
@media (pointer: fine) {
  .app-shell {
    gap: 12px;
  }
}

/* -------------------------------------------------------------- wide screens
   A large external display should not stretch the editor rail across a metre of
   glass. The document centres and the rail stays a readable width. */
@media (min-width: 1800px) {
  .app-shell {
    max-width: 1760px;
    margin: 0 auto;
    width: 100%;
  }
}