/*
 * Phones (and tablets held upright). Nothing here applies to the desktop film: the phone-only pieces are
 * display: none until one of these queries matches, and they are the same queries js/mode.js reads.
 *   tall:  (max-aspect-ratio: 9/10), (max-width: 600px)
 *   short: (min-aspect-ratio: 901/1000) and (max-height: 560px) and (min-width: 601px)
 * --sv / --lv are the small and large viewport heights, written by the film (the browser bar comes and goes
 * between them; the film is laid out on them so it never jumps).
 */
.dock, .prog, .hero-m { display: none; }

/* phones: the Mac's top-left field, magnified while it is typed into (only ever made on phones) */
.m-callout { --k: 0; position: absolute; left: 0; top: 0; z-index: 72; visibility: hidden; transform-origin: 0 0; overflow: hidden; font-family: var(--sf);
  background: rgba(255, 255, 255, 0.97); box-shadow: inset 0 0 0 1.5px rgba(10, 132, 255, 0.85), 0 calc(var(--k) * 14px) calc(var(--k) * 30px) rgba(20, 60, 30, calc(var(--k) * 0.28)); }
.mco-in { position: absolute; left: 10px; top: 50%; height: 17px; transform-origin: 0 50%; font-size: 13px; line-height: 17px; white-space: nowrap; color: #1d1d1f; }
.m-callout .mf-ph { position: absolute; left: 0; top: 0; color: rgba(60, 60, 67, 0.45); }
.m-callout .mf-caret { position: absolute; left: 0; top: 1px; width: 1.5px; height: 15px; background: #0a84ff; }

/* ═══════════════ phones, either way up ═══════════════ */
@media (max-aspect-ratio: 9/10), (max-width: 600px), (max-height: 560px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  .stage { bottom: auto; height: var(--lv, 100lvh); }
  .film { position: absolute; inset: 0; }
  .ch, .rail { display: none !important; }

  /* the nav: compact, under the notch, with a slim progress of the chapters along its foot */
  .nav { height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); gap: 12px; }
  .nav-mark { font-size: 0; gap: 0; }
  .nav-mark .nav-logo { width: 17px; height: 17px; }
  .nav-sep { height: 16px; }
  .nav-app { font-size: 15px; gap: 8px; }
  .nav-app img { width: 24px; height: 24px; border-radius: 6.5px; }
  .nav-get { height: 32px; padding: 0 13px; font-size: 13px; gap: 6px; }
  .nav-get svg { width: 14px; height: 14px; }
  .prog { display: flex; position: absolute; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: -2px; height: 2.5px; gap: 3px; opacity: 0; pointer-events: none; }
  .prog i { position: relative; flex: 1; border-radius: 2px; background: rgba(var(--nav-rgb, 20, 33, 26), 0.14); overflow: hidden; }
  .prog b { position: absolute; inset: 0; background: rgb(var(--nav-rgb, 20, 33, 26)); transform-origin: 0 50%; transform: scaleX(0); border-radius: 2px; }

  /* ——— the dock: the chapter's name, the head-turner, two chips, the control ——— */
  .dock {
    --dk-fs: clamp(27px, min(8.4vw, 4.6vh), 46px);
    --dk-top: calc(env(safe-area-inset-top) + clamp(62px, 8.4vh, 84px));
    --dk-align: center;
    display: block; position: absolute; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); top: 0; height: var(--sv, 100svh);
    pointer-events: none; color: var(--ink);
  }
  .dock > * { position: absolute; left: 0; }
  .dk-head { top: var(--dk-top); height: 28px; display: flex; align-items: center; visibility: hidden; }
  .dk-hpill { position: absolute; left: 0; top: 0; height: 28px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.055); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.08); }
  .dk-glyph { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: #fff; box-shadow: 0 2px 6px rgba(20, 50, 30, 0.12); visibility: hidden; }
  .dk-glyph > span, .dk-glyph > svg { width: 100%; height: 100%; }
  .dk-glyph svg { width: 66%; height: 66%; }
  .dk-glyph > span svg { width: 14px; height: 14px; }
  .dk-name { position: absolute; left: 32px; top: 0; line-height: 28px; font-size: 13px; font-weight: 680; letter-spacing: -0.005em; white-space: nowrap; visibility: hidden; }
  .dk-stmts { top: calc(var(--dk-top) + 40px); right: 0; height: calc(var(--dk-fs) * 2.1); }
  .dk-st { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; font-size: var(--dk-fs); font-weight: 800; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.036em; text-wrap: balance; }
  .dk-st .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.05em 0 0.13em; margin: -0.05em 0 -0.13em; }
  .dk-st .w > span { display: inline-block; }
  .dk-chips { top: calc(var(--dk-top) + 40px + var(--dk-fs) * 2.1 + 12px); height: 28px; right: 0; }
  .dk-chip { --tint: 47, 158, 79; position: absolute; left: 0; top: 0; height: 28px; border-radius: 999px; overflow: hidden; visibility: hidden; transform-origin: 0 50%; }
  .dk-cbg { position: absolute; inset: 0; border-radius: inherit; background: rgba(var(--tint), 0.13); box-shadow: inset 0 0 0 1px rgba(var(--tint), 0.24); }
  .dk-dot { position: absolute; left: 11px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--tint)); }
  .dk-ct { position: absolute; left: 22px; top: 0; line-height: 28px; font-size: 13px; font-weight: 640; letter-spacing: -0.005em; white-space: nowrap; color: var(--ink); visibility: hidden; }

  /* the control: one pill the whole way down, its thumb the brand green */
  .dk-seg { --sh: 36px; top: calc(var(--sv, 100svh) - 54px - env(safe-area-inset-bottom)); height: 44px; pointer-events: auto; visibility: hidden; color: var(--ink); }
  .dk-spill { position: absolute; left: 0; top: 0; height: 44px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.06); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.12); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
  .dk-thumb { position: absolute; left: 0; top: 4px; height: 36px; width: 0; border-radius: 999px; background: var(--thumb); box-shadow: 0 3px 10px rgba(10, 30, 18, 0.2); }
  .dk-tabs, .dk-ink { --sp: 13px; --segf: 13px; position: absolute; left: 0; top: 0; display: flex; padding: 4px; visibility: hidden; }
  .dk-tabs button { position: relative; height: var(--sh); padding: 0 var(--sp); border-radius: 999px; font-size: var(--segf); font-weight: 620; white-space: nowrap; color: rgba(var(--ink-rgb), 0.74); touch-action: manipulation; }
  .dk-ink { pointer-events: none; }
  /* the Mac's calendar while it opens larger: an opaque card with a little lift */
  .app-mac .ms-cal { background: color-mix(in oklab, rgba(255, 255, 255, calc(0.55 + var(--calz, 0) * 0.42)) calc((1 - var(--dk)) * 100%), rgba(52, 52, 54, calc(0.06 + var(--calz, 0) * 0.9)));
    box-shadow: 0 calc(var(--calz, 0) * 10px) calc(var(--calz, 0) * 26px) rgba(20, 45, 30, calc(var(--calz, 0) * 0.26)); }
  /* 44 px to the finger, whatever the pill's drawn height */
  .dk-tabs button::after { content: ""; position: absolute; inset: -4px 0; }
  .nav-get { position: relative; }
  .nav-get::after { content: ""; position: absolute; inset: -6px -4px; }
  .dk-ink span { height: var(--sh); padding: 0 var(--sp); display: grid; place-items: center; font-size: var(--segf); font-weight: 620; white-space: nowrap; color: #fff; }

  /* ——— the hero: the headline in the top left, one short line, the badge at the foot ——— */
  .hero-h1, .curtain .hero-h1 { left: max(20px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top) + clamp(60px, 8.2vh, 84px)); font-size: clamp(44px, min(14.6vw, 8.2vh), 84px); line-height: 0.92; }
  .hero-lines, .hero-get small { display: none !important; }
  .hero-m { display: block; position: absolute; left: max(20px, env(safe-area-inset-left)); right: 20px;
    top: calc(env(safe-area-inset-top) + clamp(60px, 8.2vh, 84px) + clamp(44px, min(14.6vw, 8.2vh), 84px) * 2.76 + 14px); height: 2.9em; font-size: clamp(15px, 4.1vw, 19px); }
  .hero-m p { position: absolute; left: 0; right: 0; top: 0; line-height: 1.34; font-weight: 560; color: rgba(var(--ink-rgb), 0.78); text-wrap: balance; }
  .hero-get, .curtain .hero-get { left: 50%; top: auto; bottom: calc(var(--lv, 100lvh) - var(--sv, 100svh) + 22px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .hero-get .badge img { height: 44px; }

  /* ——— the close ——— */
  .close { padding: 0 max(20px, env(safe-area-inset-left)); height: var(--sv, 100svh); bottom: auto; }
  .cl-icon { margin-top: calc(env(safe-area-inset-top) + clamp(64px, 11vh, 120px)); width: clamp(88px, 13vh, 132px); height: clamp(88px, 13vh, 132px); }
  .close h2 { margin-top: clamp(20px, 3.2vh, 34px); font-size: clamp(40px, min(12.6vw, 7vh), 72px); }
  .cl-sub { margin-top: 14px; font-size: clamp(15px, 4vw, 18px); }
  .cl-sub span { display: none; }
  .cl-get { margin-top: 22px; gap: 14px; }
  .cl-get .soon { font-size: 13px; max-width: 30ch; line-height: 1.35; text-align: left; align-items: flex-start; }
  .cl-get .soon::before { margin-top: 5px; }
  .foot { flex-direction: column; gap: 8px; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); font-size: 12px; text-align: center; }
  .foot nav { justify-content: center; gap: 6px 14px; }
}

/* ═══════════════ upright tablets: the same composition, more room ═══════════════ */
@media (min-width: 700px) and (max-aspect-ratio: 9/10) {
  .dock { --dk-fs: clamp(40px, 6.2vw, 58px); left: 48px; right: 48px; }
  .dk-name, .dk-ct { font-size: 14.5px; }
  .hero-h1, .curtain .hero-h1 { left: 48px; }
  .hero-m { left: 48px; }
}

/* ═══════════════ a phone on its side: words in a column on the left, the device on the right ═══════════════ */
@media (min-aspect-ratio: 901/1000) and (max-height: 560px) and (min-width: 601px) {
  .nav { height: calc(42px + env(safe-area-inset-top)); }
  .dock { --dk-fs: clamp(22px, 6.2vh, 30px); --dk-top: 52px; --dk-align: left; right: auto; width: min(40vw, 360px); }
  .dk-seg { top: calc(var(--sv, 100svh) - 50px - env(safe-area-inset-bottom)); }
  .dk-tabs, .dk-ink { --segf: 12px; --sp: 10px; }
  .hero-h1, .curtain .hero-h1 { top: 54px; font-size: clamp(34px, 10.5vh, 52px); }
  .hero-m { top: calc(54px + clamp(34px, 10.5vh, 52px) * 2.76 + 10px); right: auto; width: min(40vw, 340px); font-size: 14px; }
  .hero-get, .curtain .hero-get { left: max(20px, env(safe-area-inset-left)); transform: none; bottom: calc(var(--lv, 100lvh) - var(--sv, 100svh) + 16px); }
  .hero-get .badge img { height: 38px; }
  .cl-icon { margin-top: 50px; width: 64px; height: 64px; }
  .close h2 { margin-top: 12px; font-size: 34px; }
  .cl-sub { margin-top: 8px; font-size: 14px; }
  .cl-get { margin-top: 12px; flex-direction: row; }
  .foot { flex-direction: row; padding: 10px 0 12px; }
}

/* a phone on its side: the devices' fade is two edges (the words' column and the nav), kept together */
@media (min-aspect-ratio: 901/1000) and (max-height: 560px) and (min-width: 601px) {
  .film { -webkit-mask-composite: source-in; mask-composite: intersect; }
}