/* ==========================================================================
   Boxy showcase site - chrome only.
   The components live in boxy-components.css, which ships with the skill
   (skills/boxy/assets/). This file is the site around them: header, footer,
   frames, demo scaffolding and pattern layouts. It obeys boxy-check too.
   ========================================================================== */

/* ============================== 1. SITE CHROME =========================== */

html { scroll-behavior: smooth; scroll-padding-block-start: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { font-size: var(--bx-text-md); }

.site {
  max-inline-size: var(--bx-container);
  margin-inline: auto;
  border-inline: var(--bx-border) solid var(--bx-line);
  min-block-size: 100vh;
}

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: var(--bx-surface);
  border-block-end: var(--bx-border) solid var(--bx-line);
}
.site-head__inner {
  max-inline-size: var(--bx-container);
  margin-inline: auto;
  height: 56px;
  padding-inline: var(--bx-space-4);
  display: flex;
  align-items: center;
  gap: var(--bx-space-5);
  border-inline: var(--bx-border) solid var(--bx-line);
}
.site-mark {
  display: flex; align-items: center; gap: var(--bx-space-2);
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-md); font-weight: var(--bx-weight-bold);
  letter-spacing: var(--bx-track-heading);
  color: var(--bx-ink); text-decoration: none;
}
.site-mark:hover { text-decoration: none; }
.site-mark__glyph {
  inline-size: 22px; block-size: 22px;
  color: var(--bx-ink);
  flex-shrink: 0;
}
.site-nav { display: flex; gap: 0; margin-inline-start: var(--bx-space-4); }
/* The item is exactly as tall as the header's content box and never overlaps the
   header's 1px rule, so the opaque hover fill cannot punch a hole in it. The
   active indicator is drawn instead of the rule beneath it: an inset 2px bar plus
   a 1px outset that recolours that segment, which keeps it a single continuous
   mark rather than 2px of accent stacked on 1px of grey. */
.site-nav a {
  display: flex; align-items: center; height: 56px; padding-inline: var(--bx-space-3);
  color: var(--bx-ink-subtle); font-size: var(--bx-text-base); font-weight: var(--bx-weight-medium);
  text-decoration: none;
  transition: color var(--bx-dur-1) var(--bx-ease), background-color var(--bx-dur-1) var(--bx-ease);
}
.site-nav a:hover { color: var(--bx-ink); background: var(--bx-surface-hover); text-decoration: none; }
.site-nav a[aria-current="page"] {
  color: var(--bx-ink);
  box-shadow: inset 0 -2px 0 0 var(--bx-accent), 0 1px 0 0 var(--bx-accent);
}
.site-head__spacer { flex: 1; }
.site-controls { display: flex; align-items: center; gap: var(--bx-border);
  background: var(--bx-line); border: var(--bx-border) solid var(--bx-line); }
.site-controls > * { border: 0; }

.ctl {
  appearance: none; border: 0; background: var(--bx-surface);
  height: var(--bx-control-sm); padding-inline: var(--bx-space-3);
  color: var(--bx-ink-muted);
  font-family: var(--bx-font-mono); font-size: var(--bx-text-2xs);
  letter-spacing: var(--bx-track-label); text-transform: uppercase;
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--bx-space-2);
  transition: background-color var(--bx-dur-1) var(--bx-ease), color var(--bx-dur-1) var(--bx-ease);
}
.ctl:hover { background: var(--bx-surface-hover); color: var(--bx-ink); }
.ctl--icon { inline-size: var(--bx-control-sm); padding-inline: 0; justify-content: center; }

.site-main { display: block; }

/* Reduced-motion notice: a full-width strip under the header. It drops the
   callout's side borders because .site already draws them. */
.motion-note { border-width: 0 0 var(--bx-border); padding-inline: var(--bx-space-6); }
.motion-note[hidden] { display: none; }
.motion-note__text { flex: 1; max-inline-size: 88ch; }
.motion-note__title { font-weight: var(--bx-weight-semibold); }
.motion-note > .bx-btn { margin-block: calc(var(--bx-space-1) * -1); margin-inline-start: auto; }

.sec { padding-block: var(--bx-section-y); padding-inline: var(--bx-space-6);
  border-block-end: var(--bx-border) solid var(--bx-line); }
.sec--tight { padding-block: var(--bx-space-8); }
.sec--flush { padding-inline: 0; }

.sec__head { margin-block-end: var(--bx-space-8); }
.sec__head h2 { margin-block-start: var(--bx-space-2); max-inline-size: 24ch; }
.sec__head p { margin-block-start: var(--bx-space-3); color: var(--bx-ink-muted); max-inline-size: 64ch; }

.lede { font-size: var(--bx-text-lg); line-height: var(--bx-lh-lg); color: var(--bx-ink-muted); }

/* ---- Hero ---- */
.hero { position: relative; padding-block: var(--bx-space-12) var(--bx-space-11); padding-inline: var(--bx-space-6);
  border-block-end: var(--bx-border) solid var(--bx-line); overflow: hidden; }
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  /* the hero substrate sits a touch above the global 5.5% so it reads on white */
  --bx-grid-line: color-mix(in srgb, var(--bx-ink) 9%, transparent);
  background-image:
    linear-gradient(to right, var(--bx-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bx-grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
}
.hero > * { position: relative; }
.hero h1 {
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: var(--bx-track-display);
  max-inline-size: 15ch;
  margin-block-start: var(--bx-space-5);
}
.hero__sub { margin-block-start: var(--bx-space-5); max-inline-size: 56ch; }

/* ---- Install block ---- */
.install { margin-block-start: var(--bx-space-8); max-inline-size: 720px;
  border: var(--bx-border) solid var(--bx-line); background: var(--bx-surface); }
.install__tabs { display: flex; border-block-end: var(--bx-border) solid var(--bx-line);
  background: var(--bx-surface-sunken); overflow-x: auto; }
.install__tab {
  appearance: none; border: 0; background: transparent;
  height: 36px; padding-inline: var(--bx-space-4);
  font-family: var(--bx-font-mono); font-size: var(--bx-text-xs);
  letter-spacing: var(--bx-track-label); text-transform: uppercase;
  color: var(--bx-ink-subtle); cursor: pointer; white-space: nowrap;
  border-inline-end: var(--bx-border) solid var(--bx-line);
  transition: color var(--bx-dur-1) var(--bx-ease), background-color var(--bx-dur-1) var(--bx-ease);
}
.install__tab:hover { color: var(--bx-ink); background: var(--bx-surface-hover); }
.install__tab[aria-selected="true"] { background: var(--bx-surface); color: var(--bx-ink); }
.install__body { display: flex; align-items: center; gap: var(--bx-space-3);
  padding: var(--bx-space-4); }
.install__body code { font-size: var(--bx-text-base); color: var(--bx-ink); overflow-x: auto;
  white-space: nowrap; flex: 1; }
.install__body code::before { content: "$ "; color: var(--bx-ink-faint); }
.install__note { padding: var(--bx-space-2) var(--bx-space-4);
  border-block-start: var(--bx-border) solid var(--bx-line-subtle);
  background: var(--bx-surface-sunken); }

/* ---- Code block ---- */
.code { border: var(--bx-border) solid var(--bx-line); background: var(--bx-surface-sunken); }
.code__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding-inline: var(--bx-space-3);
  border-block-end: var(--bx-border) solid var(--bx-line);
  background: var(--bx-surface);
}
.code pre { margin: 0; padding: var(--bx-space-4); overflow-x: auto;
  font-size: var(--bx-text-sm); line-height: var(--bx-lh-base); color: var(--bx-ink-muted); }
.code pre b { color: var(--bx-ink); font-weight: var(--bx-weight-medium); }
.code pre i { color: var(--bx-ink-faint); font-style: normal; }
.code pre em { color: var(--bx-ink-danger); font-style: normal; }
.code pre u { color: var(--bx-ink-success); text-decoration: none; }
.code pre s { color: var(--bx-ink-accent); text-decoration: none; }

/* ---- Axiom / numbered cells ---- */
.axiom { padding: var(--bx-space-6); position: relative; }
.axiom__n { font-family: var(--bx-font-mono); font-size: var(--bx-text-xs);
  letter-spacing: var(--bx-track-label); color: var(--bx-ink-faint); }
.axiom h3 { margin-block-start: var(--bx-space-3); font-size: var(--bx-text-lg); }
.axiom p { margin-block-start: var(--bx-space-2); color: var(--bx-ink-muted);
  font-size: var(--bx-text-base); line-height: var(--bx-lh-base); }

/* ---- Spec row (label + demo) ---- */
.spec { display: grid; grid-template-columns: 200px 1fr; }
.spec > dt { padding: var(--bx-space-4); border-inline-end: var(--bx-border) solid var(--bx-line); }
.spec > dd { padding: var(--bx-space-4); margin: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--bx-space-3); }

/* ---- Swatches ---- */
/* Cells draw only their end/bottom rule and the container draws the start/top
   pair, so lines are never doubled and a part-filled last row leaves no stray
   slab of line colour behind it. Works at any item count. */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  background: var(--bx-surface);
  border-block-start: var(--bx-border) solid var(--bx-line);
  border-inline-start: var(--bx-border) solid var(--bx-line);
}
.swatch {
  background: var(--bx-surface);
  border-inline-end: var(--bx-border) solid var(--bx-line);
  border-block-end: var(--bx-border) solid var(--bx-line);
}
.swatch__chip { block-size: 56px; border-block-end: var(--bx-border) solid var(--bx-line); }
.swatch__meta { padding: var(--bx-space-2); }
.swatch__name { font-family: var(--bx-font-mono); font-size: var(--bx-text-2xs);
  letter-spacing: var(--bx-track-label); text-transform: uppercase; color: var(--bx-ink); }
.swatch__hex { font-family: var(--bx-font-mono); font-size: var(--bx-text-2xs);
  color: var(--bx-ink-subtle); text-transform: uppercase; }

/* ---- Frame (device preview) ---- */
/* Only shown below md, where the frame becomes a pannable viewport. */
.pan-hint { display: none; }
/* position: relative makes the frame the containing block for absolutely
   positioned descendants (visually hidden legends, table captions), so its
   overflow clip catches them instead of letting them widen the page. */
.frame { position: relative; border: var(--bx-border) solid var(--bx-line); background: var(--bx-canvas); overflow: hidden; }
.frame__bar {
  display: flex; align-items: center; gap: var(--bx-space-2);
  height: 32px; padding-inline: var(--bx-space-3);
  border-block-end: var(--bx-border) solid var(--bx-line);
  background: var(--bx-surface-sunken);
}
.frame__dots { display: flex; gap: var(--bx-space-1); }
.frame__dots i { inline-size: 8px; block-size: 8px; border: var(--bx-border) solid var(--bx-line-strong); }
.frame__body { overflow: auto; }

/* ---- Footer ---- */
.site-foot { background: var(--bx-surface-sunken); padding: var(--bx-space-9) var(--bx-space-6) 0; }
.site-foot__cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--bx-space-6);
  padding-block-end: var(--bx-space-8); }
.site-foot__cols ul { list-style: none; padding: 0; display: grid; gap: var(--bx-space-2);
  margin-block-start: var(--bx-space-3); }
.site-foot__cols a { color: var(--bx-ink-muted); font-size: var(--bx-text-base); }
.site-foot__cols a:hover { color: var(--bx-ink); }
.site-foot__bar {
  display: flex; flex-wrap: wrap; gap: var(--bx-space-4); align-items: center;
  justify-content: space-between;
  padding-block: var(--bx-space-4);
  border-block-start: var(--bx-border) solid var(--bx-line);
}

/* ---- Demo scaffolding ---- */
.hatch { border: var(--bx-border) solid var(--bx-line); background-color: var(--bx-surface);
  background-image: repeating-linear-gradient(45deg, var(--bx-grid-line) 0 1px, transparent 1px 6px); }
.demo-cell { display: flex; align-items: center; min-block-size: 40px; padding-inline: var(--bx-space-3);
  font-family: var(--bx-font-mono); font-size: var(--bx-text-xs); color: var(--bx-ink-subtle); }
.ctx-zone { display: grid; place-items: center; min-block-size: 120px; padding: var(--bx-space-4); cursor: context-menu; }

/* ---- Page index ---- */
.idx { --bx-min: 200px; }
.idx a { display: flex; align-items: center; gap: var(--bx-space-3); min-block-size: 40px; padding-inline: var(--bx-space-3);
  font-size: var(--bx-text-base); color: var(--bx-ink-muted); text-decoration: none;
  transition: background-color var(--bx-dur-1) var(--bx-ease), color var(--bx-dur-1) var(--bx-ease); }
.idx a:hover { background: var(--bx-surface-hover); color: var(--bx-ink); text-decoration: none; }
.idx a span { font-family: var(--bx-font-mono); font-size: var(--bx-text-xs); color: var(--bx-ink-subtle); }
.idx a:focus-visible { outline-offset: calc(var(--bx-focus-width) * -1); }

/* ---- Pattern scaffolding ----
   Shared pieces of the miniature apps on patterns.html. Each is a direct
   application of a spec in the skill references; they live here only so the
   previews do not repeat the same inline styles thirty times. */
.p-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); background: var(--bx-canvas); }
.p-side { display: flex; flex-direction: column; min-inline-size: 0; background: var(--bx-surface); border-inline-end: var(--bx-border) solid var(--bx-line); }
.p-brand {
  display: flex; align-items: center; gap: var(--bx-space-2); flex-shrink: 0;
  height: 48px; padding-inline: var(--bx-space-3);
  border-block-end: var(--bx-border) solid var(--bx-line);
  font-family: var(--bx-font-display); font-size: var(--bx-text-base); font-weight: var(--bx-weight-bold);
  letter-spacing: var(--bx-track-heading); color: var(--bx-ink); text-decoration: none;
}
.p-brand > i { inline-size: 14px; block-size: 14px; border: var(--bx-border-strong) solid var(--bx-ink); flex-shrink: 0; }
.p-top {
  display: flex; align-items: center; gap: var(--bx-space-3);
  height: 48px; padding-inline: var(--bx-space-4);
  background: var(--bx-surface); border-block-end: var(--bx-border) solid var(--bx-line);
}
.p-main { display: grid; gap: var(--bx-space-4); align-content: start; padding: var(--bx-space-4); min-inline-size: 0; }
.p-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bx-space-4); flex-wrap: wrap; }
.p-head h3 { font-size: var(--bx-text-2xl); line-height: var(--bx-lh-2xl); }
.p-panel { border: var(--bx-border) solid var(--bx-line); background: var(--bx-surface); min-inline-size: 0; }
.p-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bx-space-3);
  min-block-size: 40px; padding-inline: var(--bx-space-4) var(--bx-space-1);
  border-block-end: var(--bx-border) solid var(--bx-line-subtle);
}
.p-panel__head h4 { font-size: var(--bx-text-base); line-height: var(--bx-lh-base); }
.p-panel__body { padding: var(--bx-space-4); }
.p-site {
  display: flex; align-items: center; gap: var(--bx-space-6);
  height: 56px; padding-inline: var(--bx-space-6);
  background: var(--bx-surface); border-block-end: var(--bx-border) solid var(--bx-line);
}
.p-site nav { display: flex; gap: var(--bx-space-5); font-size: var(--bx-text-base); color: var(--bx-ink-muted); }
.p-site nav a { color: var(--bx-ink-muted); }
.p-site nav a[aria-current] { color: var(--bx-ink); font-weight: var(--bx-weight-medium); }
.p-logo { display: flex; align-items: center; gap: var(--bx-space-2); font-family: var(--bx-font-display); font-weight: var(--bx-weight-bold); letter-spacing: var(--bx-track-heading); color: var(--bx-ink); }
.p-logo > i { inline-size: 16px; block-size: 16px; border: var(--bx-border-strong) solid var(--bx-ink); }
.p-display { font-family: var(--bx-font-display); font-weight: var(--bx-weight-semibold); letter-spacing: var(--bx-track-display); color: var(--bx-ink); }
.p-kpi { padding: var(--bx-space-3) var(--bx-space-4); display: grid; gap: var(--bx-space-1); }
.p-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bx-space-3); }
.p-kpi__val { font-family: var(--bx-font-mono); font-size: var(--bx-text-2xl); line-height: var(--bx-lh-2xl); font-weight: var(--bx-weight-medium); font-variant-numeric: tabular-nums; color: var(--bx-ink); }
.p-kpi__val small { font-size: var(--bx-text-sm); color: var(--bx-ink-subtle); }
.p-delta { font-size: var(--bx-text-sm); }
.p-up { color: var(--bx-ink-success); }
.p-down { color: var(--bx-ink-danger); }
.p-figure {
  display: grid; place-items: center; background-color: var(--bx-surface-sunken);
  background-image: repeating-linear-gradient(45deg, var(--bx-grid-line) 0 1px, transparent 1px 8px);
  border: var(--bx-border) solid var(--bx-line);
}
.p-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bx-space-2) var(--bx-space-3); font-size: var(--bx-text-sm); color: var(--bx-ink-subtle); }
.p-meta > * + *::before { content: "\00b7"; margin-inline-end: var(--bx-space-3); color: var(--bx-ink-faint); }
.p-meta > .bx-avatar + *::before { content: none; }
.p-card-link { display: grid; gap: var(--bx-space-3); align-content: start; padding: var(--bx-space-5); color: inherit; text-decoration: none; transition: background-color var(--bx-dur-1) var(--bx-ease); }
.p-card-link:hover { background: var(--bx-surface-hover); text-decoration: none; }
.p-card-link h4 { font-size: var(--bx-text-lg); line-height: var(--bx-lh-lg); color: var(--bx-ink); }
.p-thread-scroll { overflow-y: auto; }
.p-row-sel[aria-selected="true"] { background: var(--bx-surface-accent); box-shadow: inset 2px 0 0 0 var(--bx-accent); }
.p-price { font-family: var(--bx-font-mono); font-size: var(--bx-text-4xl); line-height: var(--bx-lh-4xl); font-weight: var(--bx-weight-medium); font-variant-numeric: tabular-nums; letter-spacing: var(--bx-track-heading); color: var(--bx-ink); }
.p-cmp { inline-size: 100%; border-collapse: collapse; font-size: var(--bx-text-base); }
.p-cmp th, .p-cmp td { height: 40px; padding-inline: var(--bx-space-4); border-block-end: var(--bx-border) solid var(--bx-line-subtle); text-align: start; }
.p-cmp thead th { position: sticky; inset-block-start: 0; background: var(--bx-surface-sunken); border-block-end-color: var(--bx-line); }
.p-cmp td:not(:first-child), .p-cmp th:not(:first-child) { text-align: center; inline-size: 18%; }
.p-cmp tbody th { font-weight: var(--bx-weight-normal); color: var(--bx-ink-muted); }
.p-cmp .grp th { background: var(--bx-surface-sunken); height: 28px; }
.p-yes, .p-no { display: inline-block; inline-size: 16px; block-size: 16px; vertical-align: middle; }
.p-yes { background: var(--bx-ink); -webkit-mask: var(--bx-check) center / 16px 16px no-repeat; mask: var(--bx-check) center / 16px 16px no-repeat; }
.p-no { background: linear-gradient(var(--bx-ink-faint), var(--bx-ink-faint)) center / 8px 1.5px no-repeat; }

/* ---- Utilities used by the site ---- */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bx-space-3); }
.row--tight { gap: var(--bx-space-2); }
.stack { display: grid; gap: var(--bx-space-4); }
.stack--tight { gap: var(--bx-space-2); }
.muted { color: var(--bx-ink-muted); }
.subtle { color: var(--bx-ink-subtle); }
.mt-2 { margin-block-start: var(--bx-space-2); }
.mt-4 { margin-block-start: var(--bx-space-4); }
.mt-5 { margin-block-start: var(--bx-space-5); }
.mt-6 { margin-block-start: var(--bx-space-6); }
.mt-8 { margin-block-start: var(--bx-space-8); }

/* .inverse is an alias for the system's inverse scope (see boxy.css) - the
   role remap means children need no per-element colour overrides at all. */
.inverse { background: var(--bx-surface-inverse); color: var(--bx-ink-inverse); }
.inverse h1, .inverse h2, .inverse h3 { color: var(--bx-ink); }
.inverse .muted, .inverse .subtle { color: var(--bx-ink-muted); }

/* Skip link */
.skip {
  position: absolute; inset-block-start: var(--bx-space-2); inset-inline-start: var(--bx-space-2);
  z-index: 60; padding: var(--bx-space-2) var(--bx-space-3);
  background: var(--bx-surface); border: var(--bx-border) solid var(--bx-line-heavy);
  font-size: var(--bx-text-base); transform: translateY(-200%);
}
.skip:focus { transform: translateY(0); }

/* ============================== 2. RESPONSIVE ============================= */
/* Implements the breakpoint rules in references/layout.md. Three of the five
   breakpoints earn their keep here - lg (1024), md (768), sm (480). Every rule
   below is a viewport rule, so they are gathered in one place rather than
   scattered through the component blocks above. */

/* ---- lg and below: the wide grids halve ---- */
@media (max-width: 1023px) {
  /* The two wide mono controls do not fit beside the nav below lg. */
  .hide-md { display: none !important; }

  /* A device preview is a miniature of a desktop screen, so it keeps the
     layout it is there to document. Same for the frame rules further down. */
  .frame .bx-collapse--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frame .bx-collapse--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- md and below: one column becomes the default posture ---- */
@media (max-width: 767px) {

  /* Section rhythm halves. */
  .sec  { padding-block: var(--bx-space-8); padding-inline: var(--bx-space-4); }
  .hero { padding-block: var(--bx-space-9); padding-inline: var(--bx-space-4); }
  .site-foot { padding-inline: var(--bx-space-4); }

  .hide-sm { display: none !important; }

  /* Label/demo rows stack, and the vertical rule becomes a horizontal one. */
  .spec { grid-template-columns: 1fr; }
  .spec > dt { border-inline-end: 0; border-block-end: var(--bx-border) solid var(--bx-line-subtle); }

  /* The install command wraps instead of scrolling behind the copy button -
     on a phone the whole command should be readable without a gesture. */
  .install__body { align-items: flex-start; }
  .install__body code { white-space: normal; overflow-wrap: anywhere; }

  .site-foot__cols { grid-template-columns: 1fr 1fr; }

  /* Header: the bar keeps the mark and the controls, and the nav drops to its
     own full-width rail beneath, scrollable if the four items do not fit. */
  .site-head__inner { height: auto; padding-inline: 0; flex-wrap: wrap; gap: 0; }
  .site-mark { height: 56px; padding-inline-start: var(--bx-space-4); }
  .site-controls { margin-inline-end: var(--bx-space-4); }
  .site-nav {
    order: 9;
    flex: 1 0 100%;
    margin-inline-start: 0;
    border-block-start: var(--bx-border) solid var(--bx-line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { height: 44px; flex: none; }

  /* Two rows of header instead of one. */
  html { scroll-padding-block-start: 132px; }

  /* Device previews are miniatures of desktop screens - squeezing one into
     375px would misrepresent the pattern it documents. The frame becomes a
     viewport of its own and pans horizontally, chrome and all. */
  .frame { overflow-x: auto; }
  .frame__bar,
  .frame__body { min-inline-size: 760px; }
  /* Three-column app previews need more room than that to stay honest. */
  .frame--wide .frame__bar,
  .frame--wide .frame__body { min-inline-size: 1040px; }
  .pan-hint { display: block; }

  /* ...which means the rules above must not reach inside a frame, or the
     miniature would restyle itself to the phone it is being viewed on. */
  .frame .bx-collapse--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame .bx-btn-group { inline-size: fit-content; flex-wrap: nowrap; }
  .frame .spec { grid-template-columns: 200px 1fr; }
}

/* ---- sm and below ---- */
@media (max-width: 479px) {
  .site-foot__cols { grid-template-columns: 1fr; }
}