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

   Loaded on the three provider pages, the two use pages and the about page only,
   after mobile.css. Section padding, h2/h3 sizes, the eyebrow, the lede, callout
   padding and the pager are the shared sheet's; nothing here restates them.

   The shared safety callout closes every page inside <main>, in a .section of
   its own. It is the shared sheet's, so every section rule here skips it. */
@media (max-width: 59.999rem) {

  /* ------------------------------------------------------------------------
     Hero: eyebrow and stamp, the date where the page does not repeat it, h1,
     lede, photograph, one button with the second action as a text link, four
     quantities on one line, then the trademark note in small print.
     ------------------------------------------------------------------------ */
  .container:has(> .crumbs) + .hero-log { padding-top: var(--step-4); }
  main > .hero-log { padding-bottom: var(--m-section, 2.25rem); }

  /* .hero-copy is display: contents here, so this gap is the space between
     every line of the hero. */
  .hero-log > .container.bleed-right { row-gap: var(--step-4); }

  .hero-log .hero-copy > .eyebrow,
  .hero-log .hero-copy > h1,
  .hero-log .hero-copy > .lede { margin-block: 0; }

  /* The eyebrow, the stamp and a date do not fit one phone line. Where the
     release date is repeated in a firmware note further down the page, the
     hero drops it; where it is not, it sits directly under the eyebrow and
     stamp instead of a full row gap away. */
  main:has(.section [data-fw-date]) .hero-log .hero-copy > .log-date { display: none; }
  .hero-log .hero-copy > .log-date { margin-top: calc(var(--step-3) * -1); }

  /* A definite width. margin-inline: auto from the components sheet makes this
     box shrink to fit, and the photograph inside is sized in percent, so until
     the image's own size arrives the frame is only its padding wide and the
     whole hero below it shifts when it lands. The square portrait sets its own
     width. */
  .hero-log .hero-media:not(.uncropped) { width: 100%; }

  /* The button's side padding is a step tighter so the button and the text
     link share one line at 360px. */
  .hero-log .hero-copy > .cluster {
    gap: var(--step-2) var(--step-4);
    margin: 0;
  }
  .hero-log .hero-copy > .cluster > .btn-primary { padding-inline: var(--step-5); }

  /* The components sheet pins this margin with !important. */
  .hero-log .hero-copy > .facts { margin-top: 0 !important; }

  /* Four across. Columns never go narrower than their longest word, so a label
     such as GENERATIONS wraps between words rather than through one. */
  .hero-log .facts-line {
    display: grid;
    grid-template-columns: repeat(4, minmax(min-content, 1fr));
    margin: 0;
  }
  .hero-log .facts-line > li {
    margin: 0;
    padding: var(--step-2) var(--step-2) var(--step-2) 0;
  }
  .hero-log .facts-line > li + li {
    padding-left: var(--step-2);
    border-left: 1px solid var(--s6h-rule-soft);
  }
  .hero-log .facts-line .fact-label { margin-top: 2px; overflow-wrap: normal; }

  .hero-log .hero-copy > p.stamp {
    margin: 0;
    padding-top: var(--step-2);
    font-size: var(--size-2xs);
    letter-spacing: 0.02em;
    line-height: 1.5;
  }

  /* ------------------------------------------------------------------------
     The second action in a pair is a text link: one filled button per block.
     The 44px floor and the gap to the button stay.
     ------------------------------------------------------------------------ */
  :is(.hero-log, main > .section) .cluster > .btn-secondary {
    min-height: 2.75rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--color-accent);
    font-weight: 500;
    text-align: left;
    justify-content: flex-start;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
  :is(.hero-log, main > .section) .cluster > .btn-secondary:hover {
    color: var(--color-text);
    background: none;
    transform: none;
  }

  /* ------------------------------------------------------------------------
     Block rhythm inside a section. A heading is followed at the shared stack
     distance; one block after another sits a step further apart.
     ------------------------------------------------------------------------ */
  main > .section:not(:has(#safety)) :is(.prose, .callout, .cluster, .shots, .table-wrap,
    .tool-grid, .rows, .bom, .faq, .spec) { margin-top: var(--step-5); }

  main > .section:not(:has(#safety)) :is(h2, h3, .lede) + :is(.prose, .callout, .cluster,
    .shots, .table-wrap, .tool-grid, .rows, .bom, .faq, .spec) { margin-top: var(--m-stack, 1rem); }

  .list-label { margin: var(--step-5) 0 var(--step-2); }
  :is(h2, .lede) + .list-label { margin-top: var(--m-stack, 1rem); }

  .prose > h3 {
    margin-top: var(--step-5);
    padding-top: var(--step-3);
  }

  .section-note { margin-top: var(--step-4); }

  /* The about page's single-column story blocks are a grid whose children
     already carry the stack margins, so a grid gap on top doubles every gap. */
  .container.narrative { row-gap: 0; }

  /* ------------------------------------------------------------------------
     Folded sections. A details.m-fold is open in the markup and its summary is
     hidden, which is the desktop render; the page script closes it on a phone.
     Here the summary stands in for the section heading, so the heading itself
     is hidden visually but kept for headings navigation and its fragment link.
     ------------------------------------------------------------------------ */
  .section h2:has(+ .m-fold) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  main > .section .m-fold { margin-top: 0; }

  .m-fold > summary[hidden] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    gap: var(--step-3);
    align-items: center;
    min-height: 2.75rem;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--m-h2, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--color-text);
  }
  .m-fold > summary::-webkit-details-marker { display: none; }
  /* The empty alternative text keeps the glyph out of the summary's name. */
  .m-fold > summary::after {
    content: '+' / '';
    font-family: var(--font-mono);
    font-size: var(--size-lg);
    font-weight: 400;
    text-align: right;
    color: var(--s6-quiet);
  }
  .m-fold[open] > summary::after { content: '\2212' / ''; color: var(--color-accent); }
  .m-fold > summary:hover::after { color: var(--color-text); }
  .m-fold > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

  main > .section .m-fold > summary + * { margin-top: var(--m-stack, 1rem); }

  /* A fold inside a section's prose, under the section's own heading, reads as
     one more subheading of that prose. Its first heading already sits under
     the summary's rule, so it does not draw one of its own. */
  .prose.m-fold > summary[hidden] {
    padding-top: var(--step-3);
    border-top: 1px solid var(--doc-rule);
    font-size: var(--m-h3, 1.125rem);
    line-height: 1.4;
  }
  .prose.m-fold > summary + h3 { padding-top: 0; border-top: 0; }

  /* ------------------------------------------------------------------------
     Tools band
     ------------------------------------------------------------------------ */
  .tool-grid { gap: var(--step-3); }
  .tool-card { gap: var(--step-2); padding: var(--m-card, 1rem); }
  .tool-card .tool-actions { padding-top: var(--step-1); }
  .tool-rows { margin-top: var(--step-3); gap: var(--step-2); }
  .tool-row { padding: var(--step-2) var(--step-3); }

  /* ------------------------------------------------------------------------
     Numbered rows: the numeral sits on the first line of the step, at heading
     size, with one hairline between steps.
     ------------------------------------------------------------------------ */
  .rows .row {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    grid-template-areas: "num head" "num body" "num media";
    column-gap: var(--step-3);
    row-gap: var(--step-1);
    padding-block: var(--step-3);
  }
  /* A step with no title starts on its body, so there is no empty first row
     and no gap above the text for the numeral to sit beside. */
  .rows .row:not(:has(> .row-head)) {
    grid-template-areas: "num body" "num media";
  }

  .rows .row-num {
    font-size: var(--m-h3, 1.125rem);
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .rows .row:not(:has(> .row-head)) .row-num {
    line-height: calc(var(--size-base) * var(--leading-body));
  }

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

  .rows .row-media { margin-top: var(--step-1); }

  /* A capture inside a step: half the column rather than all of it. */
  .rows .row.has-media .row-media { max-width: 12rem; margin-top: var(--step-2); }

  /* ------------------------------------------------------------------------
     Requirement lists ("what has to be true")
     ------------------------------------------------------------------------ */
  .bom > li {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    grid-template-areas: "qty item" ". note";
    column-gap: var(--step-2);
    row-gap: 2px;
    align-items: baseline;
    padding-block: var(--step-3);
  }
  .bom-qty { text-align: left; font-size: var(--size-xs); }

  .spec > div { padding-block: var(--step-3); gap: 2px; }

  /* ------------------------------------------------------------------------
     Screenshots: two across instead of a sideways rail, an odd last one the
     full width of the row under the pair.
     ------------------------------------------------------------------------ */
  .shots {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: var(--step-3);
    padding-block: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .shots > * { width: auto; max-width: none; }
  .shots > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: auto;
  }
  .shots-swipe { display: none; }

  /* The frame and its glass are the same object at half the stock. */
  .shots .screenshot { padding: var(--step-2) var(--step-2) var(--step-4); }
  .shots .screenshot::after { left: var(--step-2); right: var(--step-2); top: var(--step-2); }
  .shots figcaption { margin-top: var(--step-2); font-size: var(--size-2xs); }

  /* ------------------------------------------------------------------------
     Questions
     ------------------------------------------------------------------------ */
  .faq summary {
    min-height: 2.75rem;
    padding-block: var(--step-3);
    gap: var(--step-3);
    align-items: center;
    font-size: var(--size-base);
  }
  .faq details > :not(summary) { padding-bottom: var(--m-card, 1rem); }

  /* ------------------------------------------------------------------------
     Stacked tables: the column name sits ahead of its value on the same line,
     and one hairline separates rows. The cells inside a row draw none.
     ------------------------------------------------------------------------ */
  @container (max-width: 34rem) {
    .data-table tbody tr { padding-block: var(--step-3); }
    .data-table tbody tr + tr { border-top: 1px solid var(--doc-rule); box-shadow: none; }
    .data-table tbody tr + tr > * { border-top: 0; }
    .data-table td:not(:first-child)::before {
      display: inline;
      margin: 0 var(--step-2) 0 0;
    }
    .data-table td:first-child { margin-bottom: var(--step-1); }
  }
}