/* v3 phone restructure: mobile-pages. Every rule lives inside the phone query below so
   the desktop render (60rem and up) is untouched.

   Loaded on the guide, stories, the three legal pages, thank yous, the USB test, the
   card viewer, the viewer tour, beta and the story form. The spacing tokens (--m-*)
   come from mobile.css; the fallbacks only cover a page loaded without it. */
@media (max-width: 59.999rem) {

  /* ==========================================================================
     The shared opening. Eyebrow, date, headline and lede sit one short step
     apart; the grid gap is the only spacing between them.
     ========================================================================== */
  .hero-log { padding-block: var(--step-4) var(--m-section, 2.25rem); }

  .hero-log > .container:not(.bleed-right) { row-gap: var(--step-3); }

  .hero-log .hero-copy > * { margin-block: 0; }

  .hero-log .hero-copy > .log-date { margin-top: calc(-1 * var(--step-2)); }

  .hero-log .cluster { gap: var(--step-2); }

  /* The strip carries no place in the phone ordering, so without one it lands
     above the eyebrow instead of under the buttons it follows on a wide screen. */
  .hero-log .hero-copy > .tool-strip { order: 6; }

  /* A tool strip is a row of tap targets, so each one carries the full 44px. */
  .hero-log .tool-strip,
  .guide-main .tool-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--step-2);
    padding-left: 0;
  }

  .hero-log .tool-strip a,
  .guide-main .tool-strip a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
  }

  /* ==========================================================================
     Folds. A section past the first reads as its heading, its lede and one
     control; the text is a tap away. The markup ships every fold open and the
     page script closes them on a phone, so without script nothing is hidden.
     ========================================================================== */
  .fold { margin-top: var(--step-3); }

  .fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--step-4);
    min-height: 2.75rem;
    border-top: 1px solid var(--s6p-hair, var(--color-border));
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--size-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .fold > summary::-webkit-details-marker { display: none; }

  .fold > summary::after {
    content: '+';
    content: '+' / '';
    font-size: var(--size-base);
    color: var(--color-accent);
  }

  .fold[open] > summary::after {
    content: '\2212';
    content: '\2212' / '';
  }

  .fold > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .fold:not([open]) .fold-less,
  .fold[open] .fold-more { display: none; }

  .fold[open] > summary { margin-bottom: var(--step-4); }

  .fold > summary + * { margin-top: 0; }

  /* A fold straight after a section heading carries the heading's words, so
     the closed section is its eyebrow and one heading row. The heading stays
     in the page for headings navigation and its fragment link, hidden only on
     screen: paper prints the heading and drops the summary. */
  @media screen {
    .section h2:has(+ .fold) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  .section h2:has(+ .fold) .guide-anchor { display: none; }

  h2 + .fold { margin-top: 0; }

  h2 + .fold > summary {
    gap: var(--step-3);
    border-top: 0;
    font-family: var(--font-display);
    font-size: var(--m-h2, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
    text-wrap: balance;
    color: var(--color-text);
  }

  h2 + .fold > summary::after {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--size-lg);
    font-weight: 400;
  }

  h2 + .fold > summary:focus-visible { outline-offset: 4px; }

  h2 + .fold[open] > summary { margin-bottom: var(--m-stack, 1rem); }

  @media print {
    .fold > summary { display: none; }
  }

  /* ==========================================================================
     Device guide
     ========================================================================== */
  .guide-shell {
    gap: var(--step-4);
    padding-block: var(--step-4) var(--m-section, 2.25rem);
  }

  /* The contents ride under the masthead for the length of the guide. Opening
     it drops the list over the page rather than pushing the page down, so the
     reader's place does not move. */
  .guide-toc-phone {
    position: sticky;
    top: var(--nav-height, 3.25rem);
    z-index: 20;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    background: var(--c-ground, var(--color-page));
  }

  .guide-toc-phone > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    padding-inline: var(--step-4);
    list-style: none;
  }

  .guide-toc-phone > summary::-webkit-details-marker { display: none; }

  .guide-toc-phone > summary::after,
  .legal-toc > summary::after {
    content: '+';
    content: '+' / '';
    font-size: var(--size-base);
    color: var(--color-accent);
  }

  .guide-toc-phone[open] > summary::after,
  .legal-toc[open] > summary::after {
    content: '\2212';
    content: '\2212' / '';
  }

  @media print {
    .guide-toc-phone > summary::after,
    .legal-toc > summary::after { content: none; }
  }

  .guide-toc-phone[open] > summary { border-bottom: 1px solid var(--s6p-hair, var(--color-border)); }

  .guide-toc-phone > ol {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    margin: 0;
    padding: var(--step-2) var(--step-4) var(--step-3);
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-ground, var(--color-page));
    border: 1px solid var(--s6p-hair, var(--color-border));
    border-top: 0;
  }

  .guide-toc-phone li { break-inside: avoid; }

  .guide-toc-phone a { line-height: 1.25; }

  /* Every jump target and every focus stop clears the masthead and the
     contents bar stacked on it, so the root pads by both plus a step. */
  :root:has(.guide-toc-phone) {
    scroll-padding-top: calc(var(--nav-height, 3.25rem) + 2.75rem + var(--step-4));
  }

  .guide-main :is(h2, h3, h4)[id],
  .guide-main > .section[id] { scroll-margin-top: 0; }

  /* Folded sections are a few lines each, so the off-screen skipping the
     long desktop page relies on would only mis-estimate their height. */
  .guide-main > .section:not(:first-child) { content-visibility: visible; }

  .guide-main > .section { padding-block: var(--step-5); }
  .guide-main > .section:first-child { padding-block-start: 0; }

  /* A tinted section runs edge to edge, like the alternate sections on every
     other page, with its text back on the gutter. */
  .guide-main > .section.band {
    margin-inline: calc(-1 * var(--m-gutter, 1rem));
    padding-inline: var(--m-gutter, 1rem);
  }

  .guide-main > .section.band:first-child { padding-block-start: var(--step-5); }

  .guide-main > .section > .lede { margin-top: var(--step-2); }

  .guide-main h3 { margin-top: var(--step-5); }
  .guide-main .fold > summary + h3 { margin-top: 0; }

  .guide-main .section :is(.rail, .shots, .grid, .photos, .table-wrap, .prose, .callout, .qa, .cluster) {
    margin-top: var(--step-4);
  }

  /* Rows and the tool strip carry no list markers, so they start at the text
     edge rather than at the marker indent. */
  .guide-main :is(ol, ul):not(.list-plain) { margin-top: var(--step-3); }

  .guide-main :is(ol, ul):not(.list-plain, .rows, .tool-strip) { padding-left: var(--step-5); }

  .guide-main :is(ol, ul):not(.list-plain, .rows, .tool-strip) > li + li { margin-top: var(--step-2); }

  .guide-main .section-note { margin-top: var(--step-3); }

  /* Screenshots two across instead of a swiping rail: every capture is on the
     page at once, so the swipe hint has nothing left to describe. */
  .guide-main .shots {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--step-3);
    overflow: visible;
    scroll-snap-type: none;
    padding-block: var(--step-2);
  }

  .guide-main .shots-swipe { display: none; }

  .guide-main .shots .screenshot { padding: var(--step-2) var(--step-2) var(--step-3); }

  .guide-main .shots .screenshot::after {
    left: var(--step-2);
    right: var(--step-2);
    top: var(--step-2);
  }

  .guide-main .shots figcaption {
    margin-top: var(--step-2);
    font-size: var(--size-2xs);
    letter-spacing: 0.04em;
  }

  /* Quick start: the numeral sits beside the step's stamp and title rather
     than on a row of its own. */
  .guide-main .guide-steps > .row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    grid-template-areas: "num meta" "num head" "body body";
    column-gap: var(--step-3);
    row-gap: var(--step-1);
    padding-block: var(--step-4);
  }

  .guide-main .guide-steps > .row::before {
    font-size: 2rem;
    line-height: 1;
  }

  .guide-main .rows > .row {
    row-gap: var(--step-1);
    padding-block: var(--step-3);
  }

  .guide-main .row-head { font-size: var(--m-h3, 1.125rem); line-height: 1.3; }

  .guide-main .guide-steps .row-body { font-size: var(--size-base); }

  .guide-main > .tools-section { padding-block: var(--step-4); }
  .guide-main > .tools-section > .container { padding-inline: 0; }

  .guide-dl { margin-top: var(--step-3); }
  .guide-dl dt { padding-block: var(--step-3) 0; }
  .guide-dl dd { padding-block: var(--step-1) var(--step-3); }

  .guide-keys { margin-top: var(--step-2); }

  /* ==========================================================================
     Legal pages: privacy, health data, terms
     ========================================================================== */
  .legal-toc { margin-block: 0 var(--step-4); }

  /* The same bar as the guide's contents: a mono label in the accent colour
     and a plus that turns to a minus, in place of the browser's triangle. */
  .legal-toc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    padding-block: 0;
    padding-inline: var(--step-4);
    list-style: none;
    font-size: var(--size-2xs);
    font-weight: 400;
    letter-spacing: var(--tracking-label);
    color: var(--color-accent);
  }

  .legal-toc > summary::-webkit-details-marker { display: none; }

  .legal-toc > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .legal-toc ol { gap: var(--step-2); }

  .legal-toc a {
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0;
    line-height: 1.3;
  }

  .legal-body > .section { padding-block: var(--step-5); }
  .legal-body > .section:first-child { padding-block-start: 0; }

  .legal-doc .prose,
  .legal-doc .row-body,
  .legal-doc .prose p,
  .legal-doc .callout p {
    max-width: none;
    font-size: 1rem;
    line-height: 1.6;
  }

  .legal-body .eyebrow { margin-bottom: var(--step-1); }

  .legal-body .section :is(.prose, .callout, .rows, .qa) { margin-top: var(--step-3); }

  .legal-body .fold > summary + * { margin-top: 0; }

  .legal-body .prose :is(ul, ol) { padding-left: var(--step-5); }

  /* ==========================================================================
     Stories
     ========================================================================== */
  .story-form .field { margin-top: var(--step-4); }

  /* The legend sits on the set's top rule, so the space above it is margin. */
  .story-form .consent-set {
    margin-top: var(--step-5);
    padding-top: var(--step-4);
  }

  .story-form .consent + .consent { margin-top: var(--step-2); }

  .story { padding-block: var(--step-5); }

  /* A heading straight after a note had no space above it at all. */
  .section .callout + h2 { margin-top: var(--step-5); }

  /* Hairline rows, wherever these pages use them: the stories storage notes
     and the thank-you list. */
  .section .rows > .row {
    row-gap: var(--step-1);
    padding-block: var(--step-4);
  }

  .section .rows .row-head { font-size: var(--m-h3, 1.125rem); line-height: 1.3; }

  /* ==========================================================================
     USB cable test. Spacing only: the ids, buttons and script are the tool.
     ========================================================================== */
  /* One class deeper than the tool's own sheet, which loads after this one. */
  .section .usbtest { padding: 0; }

  .section .usbtest .card { padding-block: var(--step-4); }

  .section .usbtest .card:first-child { padding-top: 0; border-top: 0; }

  .section .usbtest .card { gap: var(--step-2); }

  .section .usbtest .card > h2 + * { margin-top: 0; }

  /* The two fallback routes share a row under the primary one. */
  .usbtest #connect {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--step-2);
  }

  .usbtest #connect > :not(#btnUsb, #btnDisconnect) { grid-column: 1 / -1; }

  .usbtest #connect > button { margin-bottom: var(--step-2); }

  /* ==========================================================================
     Card viewer. Spacing only: the ids, data attributes and script are the
     tool.
     ========================================================================== */
  .viewer-app .loader { padding-bottom: var(--step-4); }

  .viewer-app .route-grid { gap: var(--step-3); }

  .viewer-app .card { padding: var(--m-card, 1rem); }

  .viewer-app .card p:not(.card-note) { font-size: var(--size-base); }

  .viewer-app .card + .card { margin-top: var(--step-3); }

  .viewer-app .empty-state { margin-bottom: var(--step-3); }

  .viewer-app .empty-ways { margin-top: var(--step-3); }

  .viewer-app .preview { margin-top: var(--step-4); }

  .viewer-app section.block { padding-block: var(--step-5); }

  .viewer-app .help-grid { gap: var(--step-3); }

  .viewer-app #toolsSection { margin-top: 0; }

  .viewer-app #toolsSection .tool-grid { gap: var(--step-3); }

  .viewer-app .tool-card { padding: var(--m-card, 1rem); gap: var(--step-2); }

  .viewer-app #toolsSection .tool-card .tool-actions { padding-top: var(--step-2); }

  /* These lists are grids with their own gap; the item margin doubled it. */
  .viewer-app :is(.privacy-list, .empty-ways) > li { margin-bottom: 0; }

  .viewer-app .empty-action { margin-top: var(--step-3); padding-top: var(--step-3); }

  /* ==========================================================================
     Viewer tour
     ========================================================================== */
  .tour-app .section-sub { margin-top: var(--step-2); }

  .tour-app .browser { margin-top: var(--step-4); }

  /* Chips and the legend start at the text edge, and chips run on as words
     do rather than one to a line. */
  .tour-app .chip-row {
    flex-wrap: wrap;
    gap: var(--step-2);
    margin-top: var(--step-3);
    padding-left: 0;
  }

  .tour-app .chip-row > .chip {
    display: inline-flex;
    margin: 0;
  }

  .tour-app .hero-note { margin-top: var(--step-3); }

  .tour-app .steps { gap: var(--step-6); }

  .tour-app .step { gap: var(--step-3); }

  .tour-app .step-num { margin-bottom: var(--step-2); }

  .tour-app .zone-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--step-2);
    margin: var(--step-4) 0 0;
    padding-left: 0;
  }

  .tour-app .zone-legend li {
    margin: 0;
    padding: var(--step-2) var(--step-3);
  }

  /* One full-length capture to a row: two across leaves each too narrow to
     read. */
  .tour-app .frames {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--step-3);
    margin-top: var(--step-4);
  }

  .tour-app .frame { padding: var(--step-3); }

  .tour-app .frame .card-note { margin-bottom: var(--step-3); }

  .tour-app .frame-window { height: 20rem; }

  .tour-app .feature-grid {
    gap: var(--step-3);
    margin-top: var(--step-4);
  }

  .tour-app .feature { gap: var(--step-3); padding: var(--step-3) var(--step-3) var(--step-4); }

  .tour-app .feature-wide .feature-inner { gap: var(--step-3); }

  .tour-app .route-grid { gap: var(--step-3); margin-top: var(--step-4); }

  .tour-app .card { padding: var(--m-card, 1rem); }

  .tour-app .phone-block { gap: var(--step-4); }

  .tour-app .phone-screen { height: 26rem; }

  .tour-app .tour-band { gap: var(--step-4); padding: var(--m-card, 1rem); }

  .tour-app .cta { padding: var(--step-5) var(--m-card, 1rem); }

  .tour-app .cta .btn-row { margin-top: var(--step-4); }
}