/*
 * Fingers, not cursors — the creator's screens on a phone.
 *
 * A sweep of every dashboard screen at 360–375px found controls a mouse hits
 * easily and a thumb does not: switches 19px tall, icon buttons 22px wide,
 * link-style buttons 20px high, title fields 22px high. WCAG 2.2 asks for 24px
 * at the least; a phone wants nearer 40.
 *
 * Two tools, and neither moves anything a desktop sees:
 *
 *  - An invisible ring. Small icon controls get a transparent ::before that
 *    reaches past their edge, so the tap lands without the control growing
 *    and the layout shifting. Only on controls that leave ::before free
 *    (checked) — a switch's knob is its ::after.
 *  - A taller box. Link-style buttons and inline title fields get a minimum
 *    height, which is what a thumb needs and costs a few pixels of air.
 *
 * `html body` in front so these win over each screen's own sheet whatever
 * order they load in, without !important.
 */
@media (max-width: 760px) {
  /* ——— the invisible ring ——— */
  html body :is(.ck-sww, .bc-ed, .fx .fx-nd-h .mo, .sg-ai) {
    position: relative;
  }
  /* Only where a check of every screen found nothing within reach of the
     ring: a ring that overlaps a neighbour sends the tap to the wrong one. */
  html body :is(.bc-ed, .fx .fx-nd-h .mo, .sg-ai)::before {
    content: "";
    position: absolute;
    inset: -6px;
  }
  html body :is(.ck-sww, .wk-sw)::before {
    content: "";
    position: absolute;
    inset: -10px -6px;
  }

  /* Rename, edit and delete sit shoulder to shoulder in the course map:
     a ring there would overlap the next button, so these grow instead. */
  html body .pj .ck-bin { width: 34px; height: 34px; }
  html body .pj .ck-arw { width: 32px; height: 32px; }
  /* The builder's device and zoom buttons are segments, side by side. */
  html body .dv-switch button { min-width: 36px; min-height: 34px; }
  html body .bd-zoom button { min-width: 32px; min-height: 32px; }
  /* The preview's rotate button sits against the device picker. */
  html body .rot { min-width: 30px; }

  /* Room under the last thing on a page for the floating AI button, which
     sits 66px off the bottom edge and covered whatever ended there. */
  html body main#main { padding-bottom: 84px; }

  /* ——— a taller box ——— */
  html body .btn-sm { min-height: 34px; white-space: nowrap; }
  html body :is(.acts, .wb-alt) button,
  html body .acts form button { min-height: 36px; }
  html body .acts form button { min-width: 36px; }
  html body input[class$="-nmi"] { min-height: 34px; }
  html body .bj-chip-in input { min-height: 30px; }
  html body :is(.studio-idea, .bx-brief-row) input { min-height: 34px; }

  /* Native ticks and dots, where nothing has restyled them. */
  html body input[type="checkbox"]:not([class]),
  html body input[type="radio"]:not([class]) { width: 18px; height: 18px; }

  /* Sign-in and security screens: their link-style buttons. */
  html body .inbox form > button:not([class]),
  html body .inbox .btn { min-height: 38px; }
}

/* The automation canvas is drawn at 60% on a phone, which leaves its "put a
   step here" buttons 15px across. Scaled back up around their own middle —
   they are placed by left/top, so nothing moves. Touch screens only. */
@media (max-width: 760px) and (hover: none) {
  html body .fb-plus { transform: scale(1.6); }
}

/* The funnel builder's step settings end at the bottom of the page, where
   its sticky Back / Next bar sits: room below the last field so it can be
   scrolled clear of the bar. */
@media (max-width: 900px) {
  html body #fx-ins { padding-bottom: 84px; }
}

/* Width, on a phone. A lesson row in the course studio was 247px of a 375px
   screen — the page's 26px sides, the studio's 20px, and a 32px gutter for
   the step numbers all stacked — so its title read "Shooti…". The studio's
   sides come in to 14px and the gutter goes: the number sits beside its
   heading line and everything under it takes the full width. (The page's
   own 26px stays: several screens bleed to it with -26px margins.) */
@media (max-width: 560px) {
  html body .pj .pj-edit { padding-left: 14px; padding-right: 14px; }
  html body .ck-st { padding-left: 0; }
  html body .ck-st > :first-child { padding-left: 30px; min-height: 22px; }
  /* The thread joining the numbers ran down the gutter; with no gutter it ran through the content. */
  html body .ck-st::after { display: none; }
  /* A module's "Published" chip takes a line of its own, so its name is not "M…". */
  html body .pj .ck-mod-h { flex-wrap: wrap; row-gap: 2px; }
  html body .pj .ck-mod-h > b { flex: 1 1 60px; min-width: 0; }
  html body .pj .ck-mod-h > .ck-pub { order: 10; margin-left: 42px; }
  /* And a lesson's name takes two lines before it is cut. */
  html body .pj .ck-les .ck-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
}

/* The page builder's bar scrolls sideways on a phone, and Publish was its
   last item — 700px off the screen. It stays pinned to the right edge while
   the tools scroll under it. */
@media (max-width: 760px) {
  html body .bd-top > .bd-btn-em:last-child {
    position: sticky; right: 0; z-index: 3; flex: none;
    box-shadow: -18px 0 16px -8px rgba(0, 0, 0, .18);
  }
}