/* v3 phone restructure: mobile. Every rule lives inside a phone query so the
   desktop render (60rem and up) is untouched. The exceptions are the two
   blocks after the heading sizes: one hides the phone-only footer markup on a
   wide screen, the other holds the home fold's gap, which the desktop needs and
   the home sheet (phone-only) cannot carry.

   The tokens on :root are the shared contract (docs/development/V3_MOBILE_SPEC.md).
   Page sheets read them and never redefine them. */
@media (max-width: 59.999rem) {
  :root {
    --m-section: 2.25rem;
    --m-stack: 1rem;
    --m-gutter: 1rem;
    --m-card: 1rem;
    --m-h2: 1.5rem;
    --m-h3: 1.125rem;

    --space-section: var(--m-section);
    --space-gutter: var(--m-gutter);
    --bar-height: 3.25rem;
    --nav-height: 3.25rem;
  }

  /* ------------------------------------------------------------------------
     Rhythm
     ------------------------------------------------------------------------ */
  .section { padding-block: var(--m-section); }

  .eyebrow { gap: var(--step-2); margin-bottom: var(--step-2); }
  .eyebrow .eyebrow-index { display: none; }

  .lede { font-size: 1.05rem; line-height: 1.5; }

  /* The layout layer gives a grid 3rem and a block of copy 2rem above it.
     Held at one class of specificity so any page rule that sets its own gap
     still wins; the stack rule is second so it owns the block under a heading. */
  .section :where(.rail, .shots, .grid, .photos, .table-wrap, .flash-panel, .prose, .callout, .qa, .cluster) {
    margin-top: var(--step-5);
  }
  .section :where(h2) + * { margin-top: var(--m-stack); }
  .section .prose + .prose { margin-top: var(--step-4); }

  :is(p, ul, ol, figure) + h3 { margin-top: var(--step-5); }

  .prose :where(p, ul, ol, dl) + :where(p, ul, ol, dl) { margin-top: var(--step-3); }
  .prose li { margin-bottom: var(--step-2); }
  .prose li:last-child { margin-bottom: 0; }

  .callout { padding: var(--m-card); }

  /* Every callout opens with the stamped tier tab, mark and word, whichever
     page family sheet flattened it. */
  .callout::before {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.7em 0.3em 2.1em;
    font-weight: 600;
    border: 1px solid currentColor;
    border-radius: var(--radius-tight);
    background-image: var(--sk-ico-note);
    background-repeat: no-repeat;
    background-position: 0.65em center;
    background-size: 1em 1em;
  }
  .callout-safety::before { background-image: var(--sk-ico-warn); }
  .callout-safety:not(.callout-danger)::before { color: var(--c-amber); }
  .callout-danger::before { background-image: var(--sk-ico-danger); }

  /* The facts strip: one row, a hairline between. Columns never go narrower
     than their longest word, so a label wraps between words, not through one. */
  .facts.facts-line {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min-content, 1fr);
    gap: 0;
  }
  .facts.facts-line > li {
    min-width: 0;
    padding: var(--step-2) var(--step-2);
    border-left: 1px solid var(--s6h-rule-soft);
  }
  .facts.facts-line > li:first-child { padding-left: 0; border-left: 0; }
  .facts .fact-value { font-size: var(--size-sm); }
  .facts-line .fact-label { margin-top: 0.125rem; letter-spacing: 0.05em; }

  /* ------------------------------------------------------------------------
     The bar
     ------------------------------------------------------------------------ */
  .masthead-inner { padding-inline: var(--m-gutter); }

  /* The first crumb carries a bottom margin the current-page crumb does not,
     so centring dropped the second one below the first. */
  .crumbs { align-items: baseline; }

  /* ------------------------------------------------------------------------
     The menu. Each row keeps its 44px target and an 8px gap to the next; the
     space comes out of the padding around the label and note instead.
     ------------------------------------------------------------------------ */
  .menu {
    gap: var(--step-3);
    padding: var(--step-3) var(--m-gutter) max(var(--step-6), env(safe-area-inset-bottom));
  }
  .menu-head { padding-bottom: var(--step-2); }
  .menu-search { padding-block: var(--step-2); min-height: 2.75rem; }
  .menu-list { gap: var(--step-4); }
  .menu-heading { margin-bottom: var(--step-2); }
  .menu-group > ul { display: grid; gap: var(--step-2); }
  .menu-item.has-mark + li,
  .menu-group-tools li + li { margin-top: 0; }
  .menu-group-tools { padding: var(--step-3); }
  .menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--step-1) var(--step-3);
  }
  .menu-item-label { line-height: 1.3; }
  .menu-item-note { margin-top: 0; line-height: 1.35; }

  /* ------------------------------------------------------------------------
     Sequence and where next: one block under one hairline
     ------------------------------------------------------------------------ */
  .page-foot { padding-top: var(--step-2); }

  .pager {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 0;
  }
  .pager a {
    min-height: 2.75rem;
    padding-block: var(--step-3);
  }
  .pager a.pager-prev { grid-column: 1; text-align: left; }
  .pager a.pager-next {
    grid-column: 2;
    text-align: right;
    padding-left: var(--step-3);
    border-top: 0;
    border-left: 1px solid var(--s6-hair);
  }
  .pager:not(:has(.pager-prev)) .pager-next {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }
  .pager-title { margin-top: 0.125rem; line-height: 1.3; }

  .related {
    margin-top: 0;
    padding-top: var(--step-3);
    border-top: 1px solid var(--s6-hair);
  }
  .related ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 0;
    gap: var(--step-2) var(--step-4);
  }
  .related li { display: flex; margin: 0; padding-block: 0; }
  .related a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--size-base);
  }

  /* ------------------------------------------------------------------------
     The safety notice: the same words in a tighter box
     ------------------------------------------------------------------------ */
  .section-safety { padding-block: var(--step-5) var(--m-section); }
  .section-safety .callout-safety { margin-top: 0; padding: var(--m-card); }
  .section-safety .callout::before { margin-bottom: var(--step-2); }
  .section-safety .callout-title {
    display: block;
    margin-bottom: var(--step-2);
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-amber);
  }
  .section-safety .callout p { font-size: var(--size-base); }
  .section-safety .callout p + p { margin-top: var(--step-3); }

  /* ------------------------------------------------------------------------
     The foot
     ------------------------------------------------------------------------ */
  .footer { padding-block: var(--step-5) 0; }
  .footer > .container { padding-top: 0; }

  /* The three part labels take two lines at 360 and wrap rather than run off
     the edge. */
  .footer-status {
    gap: var(--step-2);
    padding-bottom: var(--step-4);
    margin-bottom: 0;
  }
  .footer-status .stamp {
    font-size: var(--size-2xs);
    letter-spacing: 0.02em;
    padding: 0.3em 0.45em;
  }

  .footer-cols { display: none; }

  .footer-fold { display: block; margin-bottom: var(--step-4); }

  .footer-group { border-bottom: 1px solid var(--s6-hair); }

  .footer-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    font-family: var(--font-mono);
    font-size: var(--size-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--s6-mute);
  }
  .footer-group > summary::-webkit-details-marker { display: none; }
  /* Empty alt text: the marker is drawn, never read as part of the name. The
     plain declaration is the fallback for a browser without the alt syntax. */
  .footer-group > summary::after {
    content: '+';
    content: '+' / '';
    font-size: var(--size-base);
    color: var(--s6-quiet);
  }
  .footer-group[open] > summary::after {
    content: '\2212';
    content: '\2212' / '';
    color: var(--color-accent);
  }
  .footer-group > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  .footer-group > ul {
    display: grid;
    gap: var(--step-2);
    margin: 0;
    padding-block: var(--step-2) var(--step-3);
  }

  .footer-fold li,
  .footer-fold li + li { display: flex; margin: 0; }

  .footer-group a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .footer-legal { padding-top: var(--step-3); }
  .footer-legal h2 { margin-bottom: 0; }
  .footer-legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--step-5);
    margin: 0;
  }

  /* The first paragraph carries its desktop spacing inline. */
  .footer .faint {
    margin-top: var(--step-2) !important;
    font-size: var(--size-xs);
    line-height: 1.45;
  }

  .footer-base {
    display: grid;
    gap: var(--step-1);
    margin-top: var(--step-4);
    padding-top: var(--step-3);
    font-size: var(--size-2xs);
    letter-spacing: 0.04em;
  }

  .footer-mark {
    margin-top: var(--step-4);
    font-size: 4.5rem;
  }

  /* ------------------------------------------------------------------------
     Back to top, at thumb size
     ------------------------------------------------------------------------ */
  /* Hidden on a phone, as before: a floating control sits on the body text
     at the bottom right of every scroll position, and the bar is one flick
     away. */
  .to-top { display: none; }

  /* A printed page is narrower than 60rem, so this query applies on paper.
     Paper cannot open a fold: the rows go and every folded body prints. */
  @media print {
    .m-fold > summary,
    .home-fold > summary,
    .fold > summary,
    .footer-fold { display: none; }
    :is(.m-fold, .home-fold, .fold)::details-content {
      content-visibility: visible;
      display: block;
      block-size: auto;
    }
  }
}

/* Heading sizes sit in the components layer, so they replace the base layer's
   desktop sizes but lose to every class that sizes its own heading: the chrome
   labels, card titles and anything a page sheet sets. Unlayered, they would
   beat all of those. */
@layer components {
  @media (max-width: 59.999rem) {
    main h2 { font-size: var(--m-h2); line-height: 1.15; }
    main h3 { font-size: var(--m-h3); line-height: 1.3; }
  }
}

@media (min-width: 60rem) {
  .footer-fold { display: none; }
}

/* The home page's privacy fold ships open with its summary hidden, so on a
   wide screen it is running copy and needs this gap above it. The home sheet
   only loads below 60rem. */
.home-fold { margin-top: var(--step-4); }

/* No glass over a picture on a phone. The specular sweep and the inset
   shadows are drawn for a pane a third of a desktop screen wide; over a
   thumbnail they cover most of the image and read as a smear. The pane edge
   and the module behind it stay. */
@media (max-width: 59.999rem) {
  .screenshot::after,
  .photo::after { background-image: none; box-shadow: none; }
  .screenshot img,
  .photo img { box-shadow: none; }
}

/* Scroll-reveal blocks the reader never scrolled to are still transparent when
   the page prints; paper has no scrolling, so everything prints revealed. */
@media print {
  .js .reveal { opacity: 1; transform: none; }
}