/*
 * Phones. The same film, composed for a tall, narrow screen held in one hand: each chapter's words take a band at
 * the top (who it is, the statement, two short chips), the segmented control and the App Store badge sit in the
 * thumb's reach at the bottom, and the device has the stage between them. The switch is these two queries, the
 * same ones js/main.js reads; every rule for the desktop film is left as it was.
 *   portrait, up to 900px wide (phones; tablets stood upright): the stacked composition
 *   landscape, up to 520px tall (a phone on its side): a compact split, words left, device right
 * --hs is the height that is always in view (Safari's bar can cover the rest of the stage); main.js sets it.
 */

/* new pieces that only a phone shows */
.ch-kick-ph, .ch-chips, .ch-get .get-ph { display: none; }

@media (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 520px) {
  :root {
    --px: max(16px, env(safe-area-inset-left, 0px));
    --px-r: max(16px, env(safe-area-inset-right, 0px));
    --nav-h: 52px;
    --top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
    --bot: max(14px, env(safe-area-inset-bottom, 0px));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  html, body { overscroll-behavior-y: none; }
  body { -webkit-tap-highlight-color: transparent; }

  /* the nav: the mark and three links, at a thumb's size */
  .nav { height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--px-r) 0 var(--px); }
  .nav-mark { gap: 9px; font-size: 16px; min-height: 44px; }
  .nav nav { gap: 0; margin-right: -10px; }
  .nav nav a { display: inline-flex; align-items: center; height: 44px; padding: 0 10px; font-size: 14px; }

  /* the stage's own words and controls live in what is always in view */
  .hero, .ch, .close { height: var(--hs, 100svh); bottom: auto; }
  /* each carries its own chapter's tone on a phone (main.js layout): its ink is resolved here, not inherited as the
     page's (a light room's words would otherwise inherit the dark page's light ink) */
  .hero, .ch, .close { color: var(--ink); }

  /* the rail becomes a row of story bars under the nav: one per app, filling as you go */
  .rail {
    left: var(--px); right: var(--px-r); top: calc(var(--top) - 4px); bottom: auto; transform: none;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 0;
  }
  .rail button { height: 18px; padding: 0; font-size: 0; color: transparent; }
  .rail button::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 1px; background: rgba(var(--ink-rgb), 0.2); }
  .rail button i { top: 8px; bottom: auto; height: 2px; opacity: 0.92; }
  /* a thin bar, a thumb-sized target: the tap area reaches below it, over the chapter's name (not a control) */
  .rail button::after { content: ""; position: absolute; left: -2px; right: -2px; top: -4px; bottom: -18px; }

  /* ——— a chapter's words: head, statement, chips at the top; the control and the badge at the bottom ——— */
  .ch {
    top: 0; left: 0; right: 0; width: auto;
    padding: calc(var(--top) + 20px) var(--px-r) calc(var(--bot) + 4px) var(--px);
    align-items: center; justify-content: flex-start; gap: 0; text-align: center;
  }
  .ch[data-side="right"] { left: 0; right: 0; }
  .ch-head { gap: 10px; }
  .ch-head img { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26); }
  .ch-head p { gap: 1px; text-align: left; }
  .ch-head b { font-size: 16px; line-height: 1.15; }
  .ch-head span { display: none; }
  .ch-head .ch-kick-ph { display: block; font-size: 12.5px; font-weight: 560; line-height: 1.25; color: var(--ink-3); white-space: nowrap; }
  .ch-stmts { flex: none; width: 100%; height: var(--stmt-h, 6em); margin: 16px 0 0; }
  .stmt h2 { margin: 0; font-size: clamp(29px, 8.3vw, 52px); line-height: 1; letter-spacing: -0.034em; text-wrap: balance; }
  .stmt ul { display: none; }

  .ch-chips { display: block; position: relative; flex: none; width: 100%; height: 30px; margin-top: 14px; }
  .chip-ph {
    position: absolute; left: 0; top: 0; height: 30px; overflow: hidden; border-radius: 999px; visibility: hidden;
    color: var(--ink); background: color-mix(in oklab, var(--acc) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 26%, transparent);
  }
  .chip-ic { position: absolute; left: 10px; top: 7px; width: 16px; height: 16px; color: var(--acc); visibility: hidden; }
  .chip-ic .i { width: 16px; height: 16px; display: block; }
  .chip-l { position: absolute; left: 31px; top: 0; height: 30px; font-size: 13px; font-weight: 640; line-height: 30px; letter-spacing: -0.005em; white-space: nowrap; visibility: hidden; }
  .chip-l > span { display: inline-block; }

  .seg { margin-top: auto; --sh: 36px; --sp: 12px; --segf: 13.5px; }
  .ch-get { flex: none; height: 40px; margin-top: 12px; gap: 12px; justify-content: center; flex-wrap: nowrap; }
  .cta-badge img { height: 40px; }
  .cta-explore { height: 40px; padding: 0 16px; font-size: 13.5px; gap: 8px; }
  .ch-get small { display: none; }
  .ch-get small.get-ph { display: block; max-width: 17ch; font-size: 12px; line-height: 1.3; text-align: left; text-wrap: balance; }
  .cta-soon { font-size: 13px; white-space: nowrap; }

  /* ——— the opening: headline at the top, the phone, what it just opened, and the dock ——— */
  .hero-head, .curtain .hero-head { top: calc(var(--top) + 6px); padding: 0 var(--px-r) 0 var(--px); }
  .hero-kick { font-size: 12.5px; }
  .hero h1, .curtain .hero-h1 { margin-top: 8px; font-size: clamp(38px, 11.2vw, 66px); line-height: 0.96; }
  .hero h1 span, .curtain .hero-h1 span { display: block; }
  .hero-sub { display: none; }
  .hero-apps { left: var(--px); right: var(--px-r); width: auto; top: auto; bottom: calc(var(--bot) + var(--db, 44px) + 40px); height: 76px; text-align: center; }
  .hero-apps li { left: 0; right: 0; }
  .hero-apps small { font-size: 11px; letter-spacing: 0.12em; }
  .hero-apps h2 { margin: 3px 0 5px; font-size: 27px; }
  .hero-apps p { font-size: 0; }
  .hero-apps p b { font-size: 15px; line-height: 1.3; }
  .hero-apps span { display: none; }
  .dock-wrap { bottom: calc(var(--bot) + 2px); height: calc(var(--db, 44px) + 20px); }
  .dock-glass { height: calc(var(--db, 44px) + 20px); border-radius: 21px; }
  .dock button { bottom: 10px; width: var(--db, 44px); height: var(--db, 44px); }
  .dock button img { border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.36); }
  .dock button i { bottom: -6px; }
  .dock-tip { display: none; }

  /* ——— the close: every app in a list you can tap, and the footer ——— */
  .close { padding: calc(var(--top) + 18px) var(--px-r) calc(var(--bot) + 6px) var(--px); }
  .close h2 { margin-top: 0; font-size: clamp(34px, 9.6vw, 60px); }
  .close-sub { margin-top: 10px; font-size: 15px; line-height: 1.4; max-width: 30ch; }
  .close-apps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; text-align: left; }
  .close-apps li { border-top: 1px solid var(--line); }
  .close-apps li:last-child { border-bottom: 1px solid var(--line); }
  .close-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; height: auto; padding: 5px 2px;
    border-radius: 0; background: none; box-shadow: none;
  }
  /* (the app's own page on the left, the whole row's height; the App Store at the right, a thumb's size) */
  .close-app {
    display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 1px;
    align-items: center; min-height: 52px; border-radius: 12px; outline-offset: 2px;
  }
  .close-apps img { grid-row: 1 / 3; width: 46px; height: 46px; margin: 0; border-radius: 11px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
  .close-apps b { align-self: end; font-size: 16px; line-height: 1.2; }
  /* (a long job, like Focus's, takes a second line instead of being cut off) */
  .close-apps span { grid-column: 2; align-self: start; min-height: 0; font-size: 13px; line-height: 1.3; text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .close-get { min-height: 44px; padding: 0 15px; font-size: 12.5px; }
  .close-get.soon { padding: 0; }
  .close-app:active { background: rgba(255, 255, 255, 0.05); }
  .close .foot { flex-direction: column; align-items: center; gap: 10px; padding: 16px 0 0; font-size: 12px; text-align: center; }
  .close .foot nav { flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
  .close .foot nav a { display: inline-flex; align-items: center; min-height: 32px; }

  /* no hover lifts on touch */
  .cta:hover, .cta-badge:hover, .close-card:has(.close-app:hover), a.close-get:hover { transform: none; }
}

/* a short phone (iPhone SE): only the statement under the name, so the device keeps its size; a tighter close */
@media (orientation: portrait) and (max-width: 900px) and (max-height: 700px) {
  .ch-chips { display: none; }
  .ch-stmts { margin-top: 12px; }
  .close h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .close-sub { display: none; }
  .close-apps { margin-top: 12px; }
  .close-card { padding: 3px 2px; }
  .close-app { grid-template-columns: 40px minmax(0, 1fr); min-height: 46px; }
  .close-apps img { width: 40px; height: 40px; border-radius: 10px; }
  .close-apps span { font-size: 12px; }
  .close .foot { gap: 6px; padding-top: 10px; }
  .close .foot > span:first-child { display: none; }
}

/* a tablet stood upright: the same composition, with the words and controls at a tablet's size */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 900px) {
  :root { --px: max(28px, env(safe-area-inset-left, 0px)); --px-r: max(28px, env(safe-area-inset-right, 0px)); --nav-h: 64px; }
  .nav-mark { font-size: 18px; }
  .nav nav a { font-size: 15.5px; padding: 0 14px; }
  .rail { gap: 8px; }
  .ch { padding-top: calc(var(--top) + 30px); padding-bottom: calc(var(--bot) + 14px); }
  .ch-head { gap: 14px; }
  .ch-head img { width: 48px; height: 48px; border-radius: 11px; }
  .ch-head b { font-size: 20px; }
  .ch-head .ch-kick-ph { font-size: 15px; }
  .ch-stmts { margin-top: 22px; }
  .stmt h2 { font-size: clamp(44px, 7vw, 60px); }
  .ch-chips { height: 38px; margin-top: 20px; }
  .chip-ph { height: 38px; }
  .chip-ic { left: 13px; top: 9px; width: 20px; height: 20px; }
  .chip-ic .i { width: 20px; height: 20px; }
  .chip-l { left: 41px; height: 38px; line-height: 38px; font-size: 16px; }
  .seg { --sh: 44px; --sp: 18px; --segf: 16px; }
  .ch-get { height: 50px; margin-top: 18px; gap: 16px; }
  .cta-badge img { height: 50px; }
  .cta-explore { height: 50px; padding: 0 22px; font-size: 15.5px; }
  .ch-get small.get-ph { font-size: 14px; }
  .cta-soon { font-size: 16px; }
  .hero-kick { font-size: 15px; }
  .hero-apps { height: 104px; bottom: calc(var(--bot) + var(--db, 44px) + 44px); }
  .hero-apps small { font-size: 13px; }
  .hero-apps h2 { font-size: 38px; margin: 5px 0 8px; }
  .hero-apps p b { font-size: 19px; }
  .close { padding-top: calc(var(--top) + 40px); }
  .close-sub { font-size: 18px; }
  .close-apps { width: min(640px, 100%); margin-top: 30px; }
  .close-card { padding: 10px 2px; }
  .close-app { grid-template-columns: 60px minmax(0, 1fr); column-gap: 18px; }
  .close-apps img { width: 60px; height: 60px; border-radius: 14px; }
  .close-apps b { font-size: 20px; }
  .close-apps span { font-size: 15px; }
  .close-get { font-size: 14px; padding: 0 18px; }
  .close .foot { width: min(640px, 100%); margin-top: auto; font-size: 13.5px; }
}

/* ——— a phone on its side: words in a compact column on the left, the device on the right ——— */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --nav-h: 44px; }
  .rail { left: auto; right: var(--px-r); width: min(40vw, 300px); top: calc(var(--top) - 2px); }
  .ch {
    right: auto; width: min(46vw, 420px); padding: calc(var(--top) + 6px) 0 calc(var(--bot) + 2px) var(--px);
    align-items: flex-start; text-align: left;
  }
  .ch-stmts { margin-top: 10px; }
  .stmt h2 { font-size: clamp(22px, 3.4vw, 30px); }
  .ch-chips { display: none; }
  .seg { --sh: 32px; --sp: 9px; --segf: 12px; }
  .ch-get { margin-top: 8px; height: 34px; justify-content: flex-start; }
  .cta-badge img { height: 34px; }
  .cta-explore { height: 34px; padding: 0 14px; font-size: 13px; gap: 7px; }
  .hero-head, .curtain .hero-head { top: calc(var(--top) - 4px); }
  .hero h1, .curtain .hero-h1 { font-size: clamp(28px, 4.6vw, 40px); }
  .hero h1 span, .curtain .hero-h1 span { display: inline; }
  .hero-apps { left: var(--px); right: auto; width: min(32vw, 280px); bottom: auto; top: 46%; text-align: left; }
  .hero-apps h2 { font-size: 24px; }
  .dock-wrap { bottom: calc(var(--bot) - 4px); height: 56px; }
  .dock-glass { height: 56px; }
  .dock button { bottom: 8px; width: 40px; height: 40px; }
  .close { padding-top: calc(var(--top) + 4px); }
  .close h2 { font-size: clamp(26px, 4vw, 34px); }
  .close-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; margin-top: 10px; }
  .close-card { padding: 6px 0; }
  .close-apps img { width: 38px; height: 38px; }
  .close-apps span { display: none; }
  .close-apps b { align-self: center; grid-row: 1 / 3; }
  .close-apps li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .close .foot { flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: 10px; }
}