/* ══════════════════════════════════════════════════════════════════════════
   css/sell-mounts.css — service.tnaado.ca

   THE FOUR TIER-2 BUILD PAGES ONLY: /web-design-toronto,
   /shopify-development-toronto, /ecommerce-website-design-toronto and
   /custom-software-toronto. Linked from those four and nowhere else.

   WHY IT EXISTS. Mounting the ported components from PORTED-COMPONENTS.md
   left two proof sections holding ONE figure inside `.proofs`, which is a
   two-column grid above 56rem — a lone figure in it renders at half width
   with a hole beside it. The shared stylesheets are owned by other agents and
   may not be edited, so the one-column case gets its own modifier here rather
   than an inline style or a nudged value in css/sell.css.

   TWO RULES. NO new colours, no new type, no new radii. Both values below are
   copied from `.proofs` in css/sell.css so the rhythm is identical.
   ═══════════════════════════════════════════════════════════════════════ */

/* A proof row that holds one item. Declared unconditionally AND inside the
   same breakpoint css/sell.css uses, because that is where `1fr 1fr` is set;
   equal specificity, later file, so this wins without !important. */
.proofs--full { grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .proofs--full { grid-template-columns: 1fr; }
}

/* A ported component standing where a proof figure stood, so it keeps the
   section's spacing instead of butting up against the figure above it.
   Same value as `.proofs { margin-top }`. */
.mount { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ══════════════════════════════════════════════════════════════════════════
   THE PAYMENT STAGE KEEPS ONE HEIGHT — a measured scroll-linked layout shift

   THE FAULT, measured in Chrome and not reasoned about. js/demos.js gates a
   demo on visibility and its stop() REMOVES data-live. css/components/demos.css
   swaps the authored `.pay__script` list for the live `.pay__log` off that same
   data-live, so the swap ran on SCROLL POSITION rather than on mount:

     shopify @1440   .pay 309px off-screen -> 191px on-screen -> 309px past
     ecommerce @1440 body 8681 -> 8563 -> 8681

   That is 118px of page jumping UP under the reader as the payment section
   arrives and back DOWN as it leaves, every pass, at 1440. At 390 the list
   correctly stays visible and the log is ADDED instead, which is the same
   fault in the other direction: 55px.

   THE FIX. Key the swap off the MOUNT marker instead of the LIVE marker.
   js/demos.js sets data-open on the .tdx-row at mount and thereafter only on
   the <details> toggle — never on scroll — so it is the sticky "the script is
   running" signal that data-live is not. Same rendering, no shift.

   WHY IT IS HERE AND NOT IN demos.css. That file is linked by ten pages owned
   by other agents; this one is linked by three, all in this page group. The
   fault is in the shared component and is reported as such — this is the
   scoped remedy, not the repair.

   NO JS, UNCHANGED: data-open is never set, neither selector matches, and the
   authored list stays visible as the section's text. Reduced motion is
   unchanged too: demos.js still mounts, so data-open is still set.
   ═══════════════════════════════════════════════════════════════════════ */

/* Equal specificity to demos.css (0,3,0) and a later file, so no !important. */
.tdx-row[data-open] .pay__script { display: none; }

/* Every declaration copied from `.pay[data-live="1"] .pay__log` in
   css/components/demos.css. It must match exactly — the point is that the box
   is the same height whether or not the demo is currently running. */
.tdx-row[data-open] .pay__log {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem .9rem; align-items: baseline;
  border-top: 1px solid var(--dx-line);
  padding-top: .8rem;
  font-family: var(--dx-mono); font-size: .65rem; letter-spacing: .03em;
}

/* Below 460 the node labels are dropped, so the authored list stays VISIBLE
   and carries the state names — demos.css's rule, restated against the mount
   marker. Last in the file, so it wins over the unscoped `none` above. */
@media (max-width: 460px) {
  .tdx-row[data-open] .pay__script { display: grid; }
}