@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). Small screens: the session's top bar
     keeps to icons, and the floating "ask" button never sits on the last thing on a page. */

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

    .icon-btn, .music-btn:not(.labeled), .ss-icon { min-width: 40px; min-height: 40px; flex: none; }
    .pill.sm { min-height: 38px; }
    .chip:is(button, a), .seg button { min-height: 36px; }
    /* Small text links: a taller hit area, without moving anything around them. */
    :is(.link-btn, .crumb, .asg-title, .src-title, .notebook-group-title, .subj-title, .auth-row a) { padding-block: 8px; margin-block: -8px; }
    .ss-note { min-width: 40px; min-height: 40px; justify-content: center; }
    /* The done circle stays small; the area that takes the tap doesn't. */
    .asg-check { position: relative; }
    .asg-check::after { content: ''; position: absolute; inset: -12px; }
    .deck-dot { min-height: 32px; }
  }

  /* The session's own "ask" is for phones; elsewhere the floating button does it. */
  .ss-ask { display: none; }
  @media (max-width: 640px) {
    .ss-ask:not([hidden]) { display: inline-flex; }
    /* The session's top bar: the ✕, the progress, and the tools as icons. */
    .ss-top { gap: 8px; padding-inline: 10px; }
    .ss-top .ss-label { display: none; }
    .ss-exit { font-size: 17px; padding: 6px 8px; }
    .ss-tools { gap: 2px; }
    .ss-note { padding: 8px 10px; }
    .ss-hud { gap: 4px; }
    .ss-hud .combo:not(.on) { display: none; }
    /* The tutor is asked from the top bar here; sounds are in settings. */
    .ss-top .ss-icon[aria-label="sounds"] { display: none; }
    body:has(.ss) .tutor-fab { display: none; }
    .ss-ask { gap: 6px; }
    .ss-ask .dot { background: var(--known); }

    /* Room at the end of each page for the floating "ask" button. */
    .page { padding-bottom: 108px; }
    .ss-stage { padding-bottom: 116px; }
    .tutor-fab { padding: 10px 15px; font-size: 13.5px; }

    /* A quiz topic: its name and "learn it" on one line, its bar under both. */
    .quiz-topic .row-main { flex: 1 1 0; }

    /* Dialogs use the width there is. */
    dialog.modal { width: calc(100vw - 16px); max-width: none; margin: auto; }
  }
}