/* ============================================================
   touch.css — the phone pass.

   Loaded last, and deliberately not organised by screen width. Almost
   everything here keys on `pointer: coarse` rather than on a breakpoint,
   because the question these rules answer is "is this being operated by
   a fingertip?" and that is not the same question as "is this screen
   narrow?". A tablet in landscape is wide AND touched; a small laptop
   window is narrow and has a mouse. Sizing controls by width gets both
   of those wrong.

   The width-keyed rules that remain are the ones that really are about
   space: what has to stack, what has to stop being sticky, what has to
   give the periodic table its last few pixels.
   ============================================================ */

/* ============================================================
   1. Touch targets
   ============================================================ */

@media (pointer: coarse) {
  /* 44px is the floor every platform's guidance agrees on, and it is
     roughly the width of an adult fingertip. Anything a student is
     expected to hit repeatedly — a choice, a chip, a table cell — clears
     it, even where that makes the control look slightly overweight on a
     tablet. Missing a button is worse than a chunky button. */
  .btn {
    min-height: 44px;
    padding: 12px 20px;
  }

  .btn--sm {
    min-height: 40px;
    padding: 9px 16px;
  }

  .btn--lg {
    min-height: 52px;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .seg__btn {
    min-height: 42px;
    padding: 10px 16px;
  }

  .chip--btn {
    min-height: 40px;
    padding: 9px 15px;
  }

  .layer {
    min-height: 44px;
  }

  .nav-item {
    padding: 13px var(--s-3);
  }

  .choice,
  .pick {
    padding: 15px 16px;
  }

  .fambtn,
  .drillcard {
    padding: var(--s-4) var(--s-5);
  }

  .mock__dot {
    width: 40px;
    height: 40px;
    font-size: var(--t-sm);
  }

  .orbbox {
    width: 36px;
    height: 32px;
    font-size: 17px;
  }

  /* A range thumb that is 20px across is a thumb you miss. */
  input[type="range"] {
    height: 40px;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    margin-top: -12px;
  }

  input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
  }

  .field input {
    padding: 13px 14px;
  }

  /* A flashcard is tapped, so it needs to be worth aiming at. */
  .flash {
    min-height: 132px;
  }
}

/* No 300ms wait to find out whether a tap was the first half of a
   double-tap. Applied everywhere rather than per-control, because the
   delay is never wanted anywhere in this lesson. */
button,
.btn,
a,
summary,
label,
input[type="range"] {
  touch-action: manipulation;
}

/* ============================================================
   2. Scrolling that feels native
   ============================================================ */

.stage {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Every sideways scroller in the lesson: the periodic tables, the wide
   data tables, Mendeleev's card strip. Momentum, and no rubber-banding
   the page behind them. */
.table-wrap,
.cards-strip,
.pt.is-scrolling,
.mockreview {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ============================================================
   3. Notched and rounded screens
   ============================================================ */

@supports (padding: max(0px, env(safe-area-inset-bottom))) {
  .stepnav {
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  }

  .sidebar {
    padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
    padding-left: max(var(--s-4), env(safe-area-inset-left));
  }

  .slides {
    padding-left: max(var(--s-4), env(safe-area-inset-left));
    padding-right: max(var(--s-4), env(safe-area-inset-right));
  }

  .topbar {
    padding-left: max(var(--s-4), env(safe-area-inset-left));
    padding-right: max(var(--s-4), env(safe-area-inset-right));
  }
}

/* ============================================================
   4. The narrow-screen rules that really are about space
   ============================================================ */

@media (max-width: 640px) {
  /* Give the periodic table every pixel that is going. */
  .slides {
    padding-inline: var(--s-3);
  }

  .lab {
    padding: var(--s-4);
    border-radius: var(--r-md);
  }

  .quiz,
  .card {
    padding: var(--s-4);
  }

  .cover {
    min-height: auto;
    padding-top: var(--s-4);
  }

  .cover__actions .btn {
    width: 100%;
  }

  /* The submit button carries `margin-left:auto` so it sits apart from
     the navigation on a wide footer. Once the footer wraps, that leaves
     it stranded on a line of its own, right-aligned and easy to miss. */
  .mock__foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
  }

  .mock__foot #mkFlag {
    grid-column: 1 / -1;
  }

  .mock__foot #mkSubmit {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  /* Two lines of numbers, not one line and a scrollbar. */
  .stair {
    height: 190px;
  }

  .stairbar__val {
    max-height: 46px;
    font-size: 9px;
  }

  /* An element card's symbol tile is decoration before it is
     information; the name matters more and needs the width. */
  .elcard__sym {
    width: 58px;
    height: 58px;
    font-size: 24px;
  }

  .elcard {
    padding: var(--s-4);
  }

  /* The review rows indent to line up with their number on a wide
     screen. On a phone that indent is most of the column. */
  .reviewrow__body {
    padding-left: var(--s-4);
  }

  .compare {
    grid-template-columns: 1fr;
  }

  .compare__vs {
    padding: var(--s-1) 0;
  }
}

/* Very narrow — a small phone in portrait. */
@media (max-width: 400px) {
  :root {
    --t-3xl: 1.85rem;
    --t-2xl: 1.45rem;
    --s-5: 18px;
    --s-6: 24px;
    --s-7: 34px;
  }

  .slides {
    padding-inline: 10px;
  }

  .lab,
  .quiz,
  .card {
    padding: var(--s-3);
  }

  .drillgrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   5. Landscape on a phone
   ============================================================ */

/* A phone held sideways has almost no vertical room, so the two sticky
   bars between them can eat half the screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar {
    position: static;
  }

  .stepnav {
    padding-block: 6px;
  }

  .slides {
    padding-block: var(--s-4) var(--s-5);
  }
}