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

   Loaded only on build/, flash/, releases/, gallery/ and card-viewer/, after
   mobile.css. The site-wide rhythm (section padding, h2/h3, eyebrow, lede,
   callout padding, the facts strip) belongs to mobile.css; this sheet only
   compresses what these five pages carry beyond it. Several page elements
   carry inline styles, which is why a few declarations here need !important. */
@media (max-width: 59.999rem) {

  /* ------------------------------------------------------------------------
     Hero: eyebrow and log date share the first line, then the headline, the
     lede, the photograph, one primary key with the rest as text links, and
     the facts. .hero-copy is display: contents below 60rem, so its children
     are the grid items being placed here.
     ------------------------------------------------------------------------ */
  .hero.hero-log { padding-block: var(--m-card, 1rem) var(--m-section, 2.25rem); }

  .hero.hero-log > .container {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 0.5rem;
    align-items: start;
  }

  .hero.hero-log > .container > .hero-copy > *,
  .hero.hero-log > .container > .hero-media { grid-column: 1 / -1; margin: 0; }

  /* A long label pushes the stamp under it rather than breaking itself. */
  .hero.hero-log > .container > .hero-copy > .eyebrow {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    white-space: nowrap;
  }

  .hero.hero-log .hero-copy > .eyebrow > .stamp { margin-left: 0; }

  .hero.hero-log > .container > .hero-copy > .log-date {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    white-space: nowrap;
  }

  .hero.hero-log h1 { margin: 0.25rem 0 0; }
  .hero.hero-log .lede { margin: 0; }

  /* The photograph keeps its 4:3 module; only the air around it goes. */
  .hero.hero-log > .container > .hero-media { margin-top: 0.25rem; }

  .hero.hero-log > .container > .hero-copy > .cluster {
    gap: 0.5rem 1.25rem;
    margin-top: 0.25rem;
  }

  /* One key per hero. The other actions keep their words and their 44px
     height, and lose the moulding. */
  .hero.hero-log .hero-copy > .cluster > .btn.btn-secondary,
  .hero.hero-log .hero-copy > .cluster > .btn.btn-secondary:hover,
  .hero.hero-log .hero-copy > .cluster > .btn.btn-secondary:active {
    padding-inline: 0;
    color: var(--color-accent);
    background: none;
    border-color: transparent;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
  }

  .hero.hero-log .hero-copy > .cluster > .btn.btn-secondary::before,
  .hero.hero-log .hero-copy > .cluster > .btn.btn-secondary::after { content: none; }

  .hero.hero-log > .container > .hero-copy > .facts { margin-top: 0.25rem !important; }

  /* Without an order the strip sorted ahead of the eyebrow. */
  .hero.hero-log > .container > .hero-copy > .tool-strip {
    order: 5;
    gap: 0.5rem;
    margin-top: 0 !important;
  }

  .tool-strip a {
    min-height: 2.75rem;
    padding: 0.35rem 0.7rem;
  }

  .hero.hero-log .hero-copy > .tool-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero.hero-log .hero-copy > .tool-strip a {
    display: flex;
    height: 100%;
    padding-inline: 0.55rem;
    line-height: 1.25;
  }

  /* ------------------------------------------------------------------------
     Shared block rhythm on these pages
     ------------------------------------------------------------------------ */
  .section :is(.prose, .callout, .cluster, .shots, .table-wrap, .faq, .rows, .spec, .grid-uneven) {
    margin-top: var(--m-stack, 1rem);
  }

  .section .cluster { gap: 0.5rem 0.75rem; }

  /* Two keys side by side at 360 rather than one per line. */
  .section .cluster > .btn { padding-inline: 1.25rem; }

  .section :is(p, li, dd, td) { line-height: 1.5; }

  .prose > * + * { margin-top: 0.75rem; }
  .prose li + li { margin-top: 0.4rem; }

  .section-note { margin-top: var(--m-stack, 1rem); }

  /* The danger box keeps its full edge and its glow, so it gets room for the
     glow on both sides rather than less padding inside. */
  .callout-danger { margin-block: 1.5rem; }
  .callout-danger ul { margin-top: 0.5rem; padding-left: 1.1rem; }
  .callout-danger li + li { margin-top: 0.4rem; }

  /* Rows: the numeral sits inline beside its heading instead of on a line of
     its own, and the heading is one step down. */
  .rows > .row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    grid-template-areas: "num head" "body body" "media media";
    column-gap: 0.5rem;
    row-gap: 0.35rem;
    padding-block: 0.85rem;
  }

  .rows > .row > .row-num {
    font-size: 1.375rem;
    line-height: 1.1;
    margin: 0;
  }

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

  .rows-plain > .row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "foot";
  }

  .rows-links > .row > .row-foot { grid-area: foot; margin-top: 0.15rem; }

  /* The questions: 44px summaries, card padding under each answer. */
  .faq summary {
    min-height: 2.75rem;
    align-items: center;
    padding-block: 0.6rem;
    font-size: var(--size-base);
  }

  .faq details > :not(summary) { padding-bottom: var(--m-card, 1rem); }

  /* ------------------------------------------------------------------------
     Build
     ------------------------------------------------------------------------ */
  .s6-recipe-grid { gap: var(--m-section, 2.25rem); }

  .s6-recipe-h { margin: 1.25rem 0 0.5rem; padding-bottom: 0.35rem; }
  .s6-todo > .s6-recipe-h { margin-bottom: 0.25rem; }

  /* Parts: name, required tag and cost on the first line, the note under it. */
  .s6-recipe-need .bom > li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "item qty" "note note";
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    padding-block: 0.6rem;
  }

  .s6-recipe-need .bom-item { line-height: 1.35; }
  .s6-recipe-need .bom-item > .stamp { margin-left: 0.35em; }
  .s6-recipe-need .bom-qty { text-align: right; }
  .s6-recipe-need .bom-note { line-height: 1.5; }

  .bom-foot { margin-top: 0.6rem; }

  /* Steps: the words take the full column and the photograph sits under them
     at half the column rather than as a 15rem print. */
  .s6-recipe-do .rows > .row.has-media {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    grid-template-areas: "num head" "body body" "media media";
  }

  .s6-recipe-do .row-num { font-size: 1.375rem; }
  .s6-recipe-do .row-media { margin: 0.25rem 0 0; max-width: 12rem; }
  .s6-recipe-do .row-media figcaption { margin-top: 0.25rem; line-height: 1.35; }

  .js .s6-steps.is-folded > li:nth-child(2) { max-height: 7rem; }

  .s6-expand { margin-top: 0.5rem; }

  .s6-warning-shot { max-width: 14rem; margin: 1rem auto; }

  .s6-recipe-do > .prose { margin-top: var(--m-stack, 1rem); }

  /* The flasher's own card on the build page. */
  .tool-card {
    margin-top: var(--m-stack, 1rem);
    padding: var(--m-card, 1rem);
    gap: 0.5rem;
  }

  .tool-card .tool-actions { padding-top: 0.25rem; }

  /* First run: a narrow numeral gutter instead of a 4.5rem one. */
  .s6-numlist > li {
    padding: 0.7rem 0 0.7rem 2.25rem;
  }

  .s6-numlist > li::before {
    top: 0.7rem;
    width: 2rem;
    font-size: 1.375rem;
    line-height: 1.1;
  }

  /* The four first-run captures: a 2-up grid rather than a swiping rail, so
     all four are on the page at once. */
  .section .shots {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    overflow: visible;
    padding-bottom: 0;
  }

  .shots .screenshot { padding: 0.3rem; }
  .shots figcaption { margin-top: 0.35rem; font-size: var(--size-2xs); }

  /* The specification: name and detail side by side on one hairline row. The
     column label is printed by the visually hidden table head already. */
  .s6-spectable .data-table tr {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: 0.75rem;
    padding-block: 0.6rem;
  }

  .s6-spectable .data-table td,
  .s6-spectable .data-table td:first-child {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .s6-spectable .data-table td::before { content: none; }
  .s6-spectable .data-table td + td { font-size: var(--size-sm); line-height: 1.45; }

  .rows-links + p { margin-top: var(--m-stack, 1rem) !important; }

  /* ------------------------------------------------------------------------
     Flash
     ------------------------------------------------------------------------ */
  .section .flash-panel.s6-flash-plain {
    margin-top: var(--m-stack, 1rem);
    padding-top: 0.75rem;
  }

  .flash-sub { margin-bottom: 0.4rem; }

  .flash-needs { margin-bottom: 1.25rem; }
  .flash-need { padding-block: 0.55rem; line-height: 1.45; }
  .flash-need strong { margin-bottom: 0.1rem; }

  /* Step body at 16px with a narrow numeral gutter. */
  .flash-steps.s6-numlist > li {
    padding: 0.55rem 0 0.55rem 2.25rem;
    font-size: var(--size-base);
    line-height: 1.45;
  }

  .flash-steps.s6-numlist > li:first-child { padding-top: 0.55rem; }

  .flash-panel .flash-steps.flash-steps > li::before {
    top: 0.55rem;
    width: 2rem;
    font-size: 1.375rem;
    line-height: 1.1;
  }

  .flash-note { margin-top: 0.2rem; line-height: 1.45; }

  /* Keycaps inside running text sit on the line instead of opening it up. */
  .flash-steps .flash-key { padding-block: 0; line-height: 1.3; }

  .flash-console.flash-install {
    margin-top: 1.25rem;
    padding: 1rem 0.85rem;
  }

  .flash-console-head .flash-sub { margin-bottom: 0.4rem; }
  .flash-glass { margin-bottom: 0.75rem; padding: 0.6rem 0.75rem; }
  .flash-install .consent { padding: 0.75rem; }
  .flash-ack-state { margin: 0.35rem 0 0.6rem; }
  .flash-why { margin-top: 0.5rem; }
  .flash-console-body { gap: 0.75rem; }
  .flash-preflight.flash-preflight { padding: 0.6rem 0.75rem; }
  .flash-list { margin-top: 0.4rem; line-height: 1.5; }
  .flash-list li + li { margin-top: 0.3rem; }

  #flash > .container > .callout { margin-top: 1.25rem; }

  /* ------------------------------------------------------------------------
     Release notes. releases.php folds every release but the newest behind a
     native disclosure on a phone, and the version line is its summary. The
     version column is fixed so every date starts on the same edge, open row
     and folded rows alike.
     ------------------------------------------------------------------------ */
  .rows.rows-releases:not(.rows-num) > .row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas: "num head" "body body";
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: baseline;
    padding-block: 0.75rem;
  }

  .rows.rows-releases .row-num {
    font-size: 1.125rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-text);
  }

  .rows-releases .row-num > .stamp { display: table; margin: 0.3rem 0 0; }

  .rows.rows-releases .row-head { font-size: var(--size-sm); line-height: 1.3; gap: 0.5rem; }

  /* The row's own padding moves onto the summary, so the whole line is the
     target. */
  .rows-releases > .row > .m-fold { grid-area: 1 / 1 / -1 / -1; margin-block: -0.75rem; }

  .rows-releases .m-fold > summary {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    align-items: baseline;
    padding-block: 0.75rem;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
  }

  .rows-releases .m-fold > summary > .row-num { grid-area: 1 / 1; }
  .rows-releases .m-fold > summary > .row-head { grid-area: 1 / 2; }
  .rows-releases .m-fold > summary::after { grid-area: 1 / 3; }

  .rows-releases .m-fold > .row-body { padding-bottom: 0.75rem; }

  .rel-head { margin: 1rem 0 0.35rem; }
  .rel-list { margin-bottom: 0.5rem; }
  .rel-list li { margin-bottom: 0.35rem; }

  /* .m-fold is the disclosure the page scripts wrap round a block on a phone
     only: the earlier release notes, the build specification and the card
     viewer's repeated threshold panels. */
  .m-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.75rem;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--size-2xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
  }

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

  /* The marker is drawn, not read: the summary already announces its state.
     The first declaration is for engines without alternative text. */
  .m-fold > summary::after {
    content: '+';
    content: '+' / '';
    font-size: var(--size-base);
    color: var(--s6-quiet);
  }

  .m-fold[open] > summary::after {
    content: '\2212';
    content: '\2212' / '';
    color: var(--color-accent);
  }

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

  .section > .container > .m-fold {
    margin-top: var(--m-stack, 1rem);
    border-block: 1px solid var(--s6-hair);
  }

  .section > .container > .m-fold > .s6-spectable { margin-top: 0; }

  .vdemo .m-fold { margin-top: 0.5rem; border-top: 1px solid var(--color-border); }
  .vdemo .m-fold > .vd-panel { margin-top: 0.25rem; }

  /* ------------------------------------------------------------------------
     Gallery: device captures and photographs two across, every caption kept
     under its frame.
     ------------------------------------------------------------------------ */
  .section .grid-uneven {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0.5rem;
    align-items: start;
  }

  .grid-uneven > :is(.screenshot, .photo) { grid-column: span 1; }
  .grid-uneven > .screenshot { padding: 0.3rem; }

  .grid-uneven figcaption {
    margin-top: 0.3rem;
    font-size: var(--size-2xs);
    line-height: 1.35;
    letter-spacing: 0.03em;
    overflow-wrap: break-word;
  }

  .grid-uneven > .screenshot figcaption .stamp {
    display: flex;
    width: fit-content;
    margin: 0 0 0.2rem;
    padding: 0.1em 0.4em;
  }

  /* A print a third of its usual width: a thinner surround, and no corner
     fixings biting into the picture. */
  .grid-uneven > .photo { padding: 0.35rem 0.35rem 0.5rem; }
  .grid-uneven > .photo::before { background-image: none; }
  .grid-uneven > .photo::after { left: 0.35rem; right: 0.35rem; top: 0.35rem; }
  .grid-uneven > .photo figcaption { margin-top: 0.35rem; padding-inline: 0.15rem; }

  /* ------------------------------------------------------------------------
     Card viewer
     ------------------------------------------------------------------------ */
  /* The keys come before the three routes, so the first screen has an action
     on it. Equal orders fall back to source order, which puts the routes
     ahead of the facts. */
  .hero.hero-log > .container > .hero-copy > .s6-routes {
    order: 6;
    margin-top: 0 !important;
  }

  .hero.hero-log > .container > .hero-copy > p.faint {
    order: 4 !important;
    margin: 0 !important;
  }

  .hero .s6-routes > .row { padding-block: 0.55rem; row-gap: 0.15rem; }
  .hero .s6-routes > .row > .row-head { font-size: var(--size-base); }

  /* These four facts carry long labels, so they sit two by two. */
  .hero-copy > .s6-routes ~ .facts.facts-line {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-copy > .s6-routes ~ .facts.facts-line > li:nth-child(odd) { padding-left: 0; border-left: 0; }

  .section.tools-section { padding-block: var(--m-card, 1rem); }
  .tool-strip-label { margin-bottom: 0.4rem; }

  .section .tool-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .section .tool-strip a { display: flex; height: 100%; }

  .rows.s6-routes .row-head .stamp { display: table; margin: 0 0 0.25rem; }

  #needs { margin-top: 1.5rem !important; margin-bottom: 0.5rem; }

  .spec > div { padding-block: 0.6rem; gap: 0.15rem; }

  .section .photo.photo-wide {
    margin-top: var(--m-stack, 1rem) !important;
    padding: 0.4rem 0.4rem 0.6rem;
  }

  .photo.photo-wide::before { background-image: none; }
  .photo.photo-wide::after { left: 0.4rem; right: 0.4rem; top: 0.4rem; }
  .photo.photo-wide figcaption { margin-top: 0.4rem; padding-inline: 0.15rem; }

  .section > .container > p.faint[style] { margin-top: var(--m-stack, 1rem) !important; }

  /* The working demonstrations: every nested padding taken down a step, the
     paired controls two across, the four figures two by two. */
  .vdemo.vdemo {
    margin-top: var(--m-stack, 1rem);
    padding: 0.75rem 0.75rem 1.6rem;
  }

  .vdemo-title { margin-bottom: 0.5rem; }

  .vd-enclosure.vd-enclosure { padding: 0.5rem; padding-top: 1.1rem; }
  .vd-lamp { top: 0.35rem; right: 0.6rem; }
  .vd-screen.vd-screen { padding: 0.6rem; }

  .vd-state { margin-top: 0.5rem; }

  .vd-panel { margin-top: 0.6rem; padding: 0.6rem 0.65rem; }

  .vd-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.75rem;
    margin-top: 0;
  }

  .vd-control { min-width: 0; max-width: none; gap: 0.2rem; }
  .vd-slider { gap: 0.4rem; }

  .vd-presets {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.6rem;
  }

  .vd-key { min-height: 2.75rem; padding-inline: 0.4rem; }

  .vd-units { margin-top: 0.5rem; }

  .vd-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .vd-figure { padding: 0.6rem 0.7rem; }

  .vd-face { padding: 1rem 0.75rem; gap: 0.5rem; }

  .vd-legend { margin-top: 0.6rem; gap: 0.3rem 1rem; }

  /* The big-number face only needs the height of its number. */
  .vdemo[data-demo="face"] .vd-screen-face { aspect-ratio: 16 / 10; }
}

/* With the paddings above, a legend row fits on one line from 360 up; the
   viewer sheet lets it wrap at 360 and below for the wider paddings it had. */
@media (min-width: 22.5rem) and (max-width: 59.999rem) {
  .vd-legend li { flex-wrap: nowrap; }
}