@layer views {
  /* ── phones and tablets ──
     Fingers, not a mouse: targets a fingertip can hit, no keyboard hints, and fields at 16px or
     more (iOS zooms the page into any smaller field you tap; the code editor is the one exception,
     handled by app/ios-viewport.js). */

  @media (pointer: coarse) {
    /* :is() lifts every match to its most specific selector, so a field's own smaller size loses. */
    :is(.input, textarea:not(.ed-input), select, input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="number"], [type="date"], [type="time"], [type="url"], [type="tel"])) {
      font-size: max(var(--fs-field), 1em);
    }
    kbd { display: none; }
    * { -webkit-tap-highlight-color: transparent; }
    :is(.pill, .opt, .icon-btn, .chip, .seg button, .stop, .course-card):active:not(:disabled) { transform: scale(.97); }

    .icon-btn, .music-btn:not(.labeled) { min-width: 40px; min-height: 40px; flex: none; }
    .pill.sm { min-height: 38px; }
    .chip:is(button, a) { min-height: 36px; }
    .seg button { min-height: 40px; }
    :is(.link-btn, .auth-alt a, .back-link) { padding-block: 8px; margin-block: -8px; }
  }

  @media (max-width: 640px) {
    /* Dialogs use the width there is, 16px clear of each edge. */
    dialog.modal { width: calc(100vw - 32px); max-width: none; margin: auto; }
    .h-page { font-size: clamp(30px, 9vw, 40px); }
  }

  /* The top bar (phones and tablets): the wordmark at the left, its buttons at the right. */
  .topbar .sb-logo { padding: 0; }
  .topbar .top-streak { min-width: 40px; min-height: 40px; justify-content: center; padding: 0 6px; border-radius: var(--r-item); font-weight: 700; text-decoration: none; }
  /* The offline note sits above the tab bar. */
  @media (max-width: 860px) {
    .shell:not([data-layout="bare"]):not([data-layout="focus"]) ~ .offline-strip,
    body:has(.shell:not([data-layout="bare"]):not([data-layout="focus"])) .offline-strip { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px)); }
  }
}