/* ARETE app layout.
 *
 * Loads after tokens.css and bundle.css. bundle.css is the design system's
 * component stylesheet, copied verbatim and never edited here - everything in
 * this file is either app-level layout the components do not cover, or a clearly
 * marked override with a Defect Ledger reference.
 *
 * Every value is a token. No literal colour, radius or shadow below.
 */

/* Reduced motion, as a safety net over everything - including the vendored
   bundle.css, which this repo must not edit.
   The specific rules further down came first and still read as intent; this
   catches what they miss. Measured: the calorie ring animates its
   stroke-dashoffset over 500ms and every button, chip and card carries a
   120-140ms transition, none of which the hand-written rules covered.
   Defect Ledger STEVE-arete-024. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================== app shell ==== */

/* The desktop breakpoint.
   app.js reads this value back out of the computed style rather than carrying
   its own copy, which is what caused the regression where the media query moved
   to 1200, the JS stayed on 1024, and the app had NO navigation at all across
   that band (STEVE-arete-026).

   It is NOT, however, "declared once", and an earlier comment here said it was.
   A media query cannot read a custom property, so the number still appears in
   the two @media rules below as well. Three places, one of which the JS reads.
   The guard asserts all three agree rather than pretending they are one.
   Defect Ledger ALLISON-arete-015.

   IF YOU CHANGE THIS, change it in all three: here, and both @media rules. */
:root { --desktop-from: 1200px; }

html { background: var(--surface-000); }

body {
  margin: 0;
  background: var(--surface-100);
  color: var(--ink-100);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.view {
  flex: 1 1 auto;
  /* Clear the fixed tab bar plus the home indicator on a notched phone. */
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

.nav--tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface-200);
}
.nav--none + .view, .nav--none ~ .view { padding-bottom: var(--space-8); }
body[data-screen="onboard-splash"] .view { padding-bottom: 0; }

/* A keyboard user should not have to tab through the whole side rail to reach
   the screen. Hidden until focused. */
.ar-skip {
  position: absolute; left: var(--space-3); top: calc(var(--space-3) * -4);
  z-index: 50; padding: var(--space-3) var(--space-4);
  background: var(--gold-400); color: var(--ink-on-gold);
  border-radius: var(--radius-sm); text-decoration: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  transition: top .12s ease;
}
.ar-skip:focus { top: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .ar-skip { transition: none; } }

/* Screen-reader-only, for labels a sighted user gets from a placeholder. */
.ar-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Form controls do not inherit font-family: the user-agent stylesheet sets its
   own, so a <button> renders in the browser's default UI font however carefully
   the page sets type elsewhere. Every chip is a button and every product card is
   a button, so without this the catalogue's category lines, all the size and
   filter chips and every badge came out in Arial - about thirty elements on the
   shop screen in the one typeface the brief rules out by name.
   Overridden here rather than in the vendored bundle.css; the upstream fix is
   queued for the design system. Defect Ledger STEVE-arete-022. */
button, input, select, textarea, optgroup {
  font: inherit;
  letter-spacing: inherit;
}

/* Keyboard focus must be visible everywhere. The design system sets no focus
   style, and a dark interface with no focus ring is unusable by keyboard. */
:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ============================================================ spacing ==== */

.ar-pad { padding: 0 var(--space-5) var(--space-8); }
.ar-pad--top { padding-top: var(--space-5); }
.ar-left { text-align: left; }
.ar-fine { font-size: 11px; line-height: 17px; color: var(--ink-300); margin: 0; }
.ar-hr { height: 1px; background: var(--line-200); margin: var(--space-2) 0; }
.ar-pair {
  display: grid;
  /* minmax(0,1fr), not 1fr: a bare 1fr track floors at the item's min-content
     width, and these fields pushed the pair to 420px inside a 350px column -
     62px off a 390px screen. Defect Ledger STEVE-arete-007. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}
.ar-fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }

.ar-kv {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 14px; color: var(--ink-200);
}
.ar-kv b { font-family: var(--font-numeric); font-weight: 600; color: var(--ink-100); text-align: right; }
.ar-kv--total { color: var(--ink-100); font-size: 16px; }
.ar-kv--total b { font-size: 20px; }

.ar-stat { text-align: center; }
.ar-feature { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-6); }
.ar-feature > .ar-gold { margin-top: 2px; flex: none; }

/* Text sitting on the gold-700 tint of the locked-teaser card. ink-300 there
   measures 2.99:1; gold-200 clears 4.5:1. Defect Ledger STEVE-arete-009. */
.ar-ontint { color: var(--gold-200); }

/* ============================================================== media ==== */

.ar-mark { display: block; height: auto; }

.ar-hero, .ar-splash, .ar-trainhero { position: relative; overflow: hidden; }
.ar-hero { height: 300px; margin-bottom: var(--space-1); }
.ar-trainhero { height: 132px; }
.ar-hero > img, .ar-splash__bg, .ar-trainhero > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ar-hero__cnt { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); }
.ar-hero + .ar-pad > .ar-card:first-child { margin-top: calc(var(--space-2) * -1); }

.ar-splash {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ar-splash__cnt { position: relative; padding: 0 var(--space-5) var(--space-10); }

/* A product shot that is smaller than the frame it sits in. Containing it on
   the deep ground keeps the whole vial visible instead of upscaling a 155px
   image 2.5x and cropping its cap off. Defect Ledger STEVE-arete-004. */
.ar-media--contain { object-fit: contain !important; background: var(--surface-000); padding: var(--space-3); }

/* A marked placeholder tile. No stock photography is ever substituted for the
   client's own imagery - the design system is explicit about this. */
.ar-ph {
  display: grid; place-items: center; position: relative;
  width: 100%; height: 100%;
  background: var(--surface-000);
  background-image: radial-gradient(circle at 50% 45%, var(--surface-300) 0%, var(--surface-000) 72%);
}
/* height and object-fit must BOTH be reset here. The design system sets
   `.ar-product__media img { height: 100%; object-fit: cover }` for photography,
   at the same specificity as this rule, so setting only the width leaves the
   mark stretched to the full tile height and then cropped left and right by
   cover - a 239x184 landscape mark squeezed into a 70x125 portrait box. Every
   placeholder tile in the catalogue rendered a cropped wedge of the A rather
   than the A. Same family as STEVE-arete-004, which .ar-media--contain above
   fixed for the vial photography and did not fix here. */
.ar-ph .ar-ph__mark {
  width: 42%; max-width: 70px;
  height: auto; object-fit: contain;
  opacity: .3;
}
.ar-ph b {
  position: absolute; bottom: var(--space-2); left: 0; right: 0; text-align: center;
  /* 11px is the design system's stated floor - "nothing in the product is
     smaller, including legal copy". Defect Ledger STEVE-arete-010. */
  font-family: var(--font-body); font-size: 11px; line-height: 14px; font-weight: 600;
  letter-spacing: .12em; color: var(--ink-300);
}

.ar-gallery { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ar-gallery::-webkit-scrollbar { display: none; }
.ar-gallery > * {
  flex: 0 0 86%; aspect-ratio: 4/3; scroll-snap-align: center;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-000);
  /* The CONSULTATION REQUIRED badge is position:absolute in the design system's
     bundle.css. Without a positioned ancestor here it resolved against the page
     and sat on top of the app bar, covering the back button so completely that
     elementFromPoint returned the badge. Defect Ledger STEVE-arete-015. */
  position: relative;
}
.ar-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-dots { display: flex; gap: var(--space-1); justify-content: center; margin-top: var(--space-3); }
/* The visible dot is 6px; the thing a thumb has to hit is 44px. The padding
   carries the hit area and background-clip keeps the paint on the content box,
   so the control looks identical and is four times easier to press.
   Defect Ledger STEVE-arete-012. */
.ar-dot {
  width: 6px; height: 6px; box-sizing: content-box;
  padding: 19px; margin: -19px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: var(--surface-400);
  background-clip: content-box;
  transition: width .2s ease;
}
.ar-dot--on { background: var(--gold-400); background-clip: content-box; width: 18px; padding-left: 13px; padding-right: 13px; }

.ar-video { aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--surface-000); }
.ar-video__play {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px; border: 0; border-radius: var(--radius-pill);
  background: var(--gold-400); color: var(--ink-on-gold);
  display: grid; place-items: center; cursor: pointer;
}

/* Touch target on a design-system component. Overridden here rather than
   edited in bundle.css, which stays byte-identical to the design system.
   Defect Ledger STEVE-arete-012. */
.ar-appbar__btn { width: 44px; height: 44px; }

/* ========================================================= navigation ==== */

.ar-cartbtn { position: relative; }
.ar-cartbtn__pip {
  position: absolute; top: 1px; right: 0;
  min-width: 18px; height: 18px; padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--gold-400); color: var(--ink-on-gold);
  font-family: var(--font-numeric); font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
}

.ar-qlinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.ar-qlink {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: var(--surface-200); border: 1px solid var(--line-100);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-2);
  color: var(--ink-100); cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 15px;
}
.ar-qlink:hover { background: var(--surface-300); }
.ar-qlink .ar-icon { color: var(--gold-300); }

/* A horizontal rail that bleeds to the screen edges on a phone. */
.ar-rail-h {
  display: flex; gap: var(--space-3); overflow-x: auto;
  padding: 0 var(--space-5) var(--space-2);
  scrollbar-width: none;
}
.ar-rail-h::-webkit-scrollbar { display: none; }
.ar-rail-h > * { flex: 0 0 152px; }

/* ============================================================ controls === */

.ar-seg { display: flex; background: var(--surface-300); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.ar-seg button {
  flex: 1; border: 0; background: none; border-radius: var(--radius-xs); cursor: pointer;
  /* 44px tall, not 32: this is a primary control on the booking and diary
     screens. Defect Ledger STEVE-arete-012. */
  padding: var(--space-3) var(--space-1); min-height: 44px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 16px;
  color: var(--ink-200);
}
.ar-seg button[data-on="1"] { background: var(--gold-400); color: var(--ink-on-gold); }

.ar-chips--scroll {
  overflow-x: auto; flex-wrap: nowrap;
  padding: 0 var(--space-5) var(--space-4);
  scrollbar-width: none;
}
.ar-chips--scroll::-webkit-scrollbar { display: none; }
.ar-chips--scroll > * { flex: none; }
.ar-chips--wrap { flex-wrap: wrap; }
.ar-chip--static { cursor: default; }

.ar-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.ar-slot {
  padding: var(--space-3) var(--space-1); border-radius: var(--radius-sm); cursor: pointer; text-align: center;
  background: var(--surface-300); border: 1px solid var(--line-300); color: var(--ink-100);
  font-family: var(--font-numeric); font-size: 14px; font-weight: 600; line-height: 18px;
}
.ar-slot:hover:not([disabled]) { background: var(--surface-400); }
.ar-slot[data-on="1"] { background: var(--gold-400); border-color: var(--gold-400); color: var(--ink-on-gold); }
.ar-slot[disabled] {
  color: var(--ink-300); background: var(--surface-200); border-color: var(--line-100);
  cursor: not-allowed; text-decoration: line-through;
}

.ar-stepper {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--line-300);
  background: var(--surface-300); color: var(--ink-100);
}
.ar-stepper:hover { background: var(--surface-400); }
.ar-qty { min-width: 20px; text-align: center; font-weight: 600; }
.ar-portion { text-align: center; }

.ar-pick--on { border-color: var(--gold-400); }
.ar-row--on { background: var(--surface-300); }
.ar-row--static { cursor: default; }
.ar-row--static:hover { background: var(--surface-200); }
.ar-row[disabled] { cursor: default; }

.ar-or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; }
.ar-or span { flex: 1; height: 1px; background: var(--line-200); }
.ar-or em {
  font-style: normal; font-size: 11px; letter-spacing: .1em; color: var(--ink-300);
}
.ar-gbadge {
  width: 20px; height: 20px; border-radius: var(--radius-pill);
  border: 1.75px solid currentColor; display: inline-grid; place-items: center;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; line-height: 1;
}

/* A consent switch that actually moves. A consent screen whose switches are
   painted on is not a consent screen, and a client will press them. */
.ar-consent { margin-bottom: var(--space-3); padding: 0; }
.ar-consent__hit {
  display: flex; gap: var(--space-4); align-items: flex-start; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--space-4); color: inherit; font: inherit;
}
.ar-consent__title { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 20px; }
.ar-consent__body { display: block; font-size: 13px; line-height: 19px; color: var(--ink-300); margin-top: var(--space-1); }
.ar-switch {
  flex: none; width: 46px; height: 28px; border-radius: var(--radius-pill);
  padding: 3px; background: var(--surface-400);
  display: flex; justify-content: flex-start;
  transition: background .15s ease;
}
.ar-switch > span {
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--ink-300); transition: transform .15s ease, background .15s ease;
}
.ar-switch--on { background: var(--gold-400); }
.ar-switch--on > span { background: var(--ink-on-gold); transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) {
  .ar-switch, .ar-switch > span, .ar-dot { transition: none; }
}

.ar-avatar {
  flex: none; width: 54px; height: 54px; border-radius: var(--radius-pill);
  background: var(--gold-700); color: var(--gold-200);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1;
}

.ar-signout { margin-top: var(--space-5); color: var(--ink-300); }
.ar-flush { margin-top: var(--space-3); padding-left: 0; }
.ar-remove { margin-top: var(--space-2); color: var(--ink-300); }
.ar-card--lift { width: 100%; text-align: left; }
.ar-card--upcoming { border-color: var(--gold-600); }
.ar-pick { width: 100%; text-align: left; margin-bottom: var(--space-3); }

/* ============================================================== train ==== */

.ar-progress { height: 3px; background: var(--surface-300); border-radius: var(--radius-pill); margin: var(--space-3) 0 var(--space-1); }
.ar-progress > div { height: 3px; background: var(--gold-400); border-radius: var(--radius-pill); transition: width .25s ease; }
.ar-day { width: 32px; font-weight: 600; font-size: 13px; }

.ar-timer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--surface-300); border: 1px solid var(--gold-600);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.ar-timer__t { font-family: var(--font-numeric); font-size: 20px; font-weight: 700; line-height: 22px; color: var(--gold-300); }

.ar-bars { display: flex; align-items: flex-end; gap: var(--space-2); height: 108px; margin: var(--space-2) 0 var(--space-3); }
.ar-bars > div { flex: 1; background: var(--gold-600); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.ar-bars > .ar-bars--on { background: var(--gold-400); }
/* 11px, the design system's floor - these were 9px. STEVE-arete-010. */
.ar-barlab { display: flex; gap: var(--space-2); font-size: 11px; line-height: 14px; color: var(--ink-300); text-align: center; }
.ar-barlab span { flex: 1; }

.ar-steps { margin: 0; padding-left: var(--space-5); font-size: 15px; line-height: 23px; color: var(--ink-200); }
.ar-steps li { margin-bottom: var(--space-2); }

/* =============================================================== food ==== */

.ar-ringwrap { text-align: center; margin-bottom: var(--space-4); }

/* OVERRIDE, Defect Ledger STEVE-arete-002.
   The design system's .ar-ring__val is a fixed 46px whatever the ring's
   diameter, so a four-digit value overflows the 76px Home ring. Scale the
   figure and the caption with the ring instead. The upstream fix to
   bundle.css is queued for the design system separately; this file does not
   edit the vendored stylesheet. */
.ar-ring { --ring-size: 196px; }
.ar-ring__val { font-size: calc(var(--ring-size) * 0.235); line-height: 1.05; }
.ar-ring__cap { font-size: max(11px, calc(var(--ring-size) * 0.056)); }
.ar-ring__mid { padding: 0 calc(var(--ring-size) * 0.12); text-align: center; }

/* A small ring drops the caption rather than shrinking it below the 11px floor
   or wrapping it onto two lines - at 76px "490 KCAL OVER" measured 54.7px wide
   in a 54.7px box. The figure takes the space instead. Nothing is lost: on Home
   the same numbers are in the text beside the ring, and the ring's aria-label
   still states both. Defect Ledger STEVE-arete-010 and -011. */
.ar-ring--compact .ar-ring__cap { display: none; }
.ar-ring--compact .ar-ring__val { font-size: calc(var(--ring-size) * 0.30); }

.ar-meal { margin-top: var(--space-5); }
.ar-meal h2 {
  display: flex; justify-content: space-between; margin: 0 0 var(--space-2);
  font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 20px;
}
.ar-meal h2 em {
  font-style: normal; font-family: var(--font-numeric);
  font-size: 13px; font-weight: 600; line-height: 20px; color: var(--ink-300);
}
.ar-fitem {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--line-100); font-size: 14px;
}
.ar-fitem small { display: block; font-size: 11px; color: var(--ink-300); margin-top: 2px; }
.ar-fitem b { font-family: var(--font-numeric); font-weight: 600; white-space: nowrap; margin-left: auto; }
.ar-fitem__x {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--ink-300); cursor: pointer; display: grid; place-items: center;
  margin-right: calc(var(--space-2) * -1);
}
.ar-fitem__x:hover { background: var(--surface-300); color: var(--ink-100); }
.ar-addfood { margin-top: var(--space-2); padding-left: 0; }
.ar-macros { padding-top: var(--space-3); border-top: 1px solid var(--line-200); }

/* ======================================================= confirmations === */

.ar-done { padding-top: var(--space-16); text-align: center; }
.ar-tick {
  width: 74px; height: 74px; margin: 0 auto var(--space-5);
  border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--success-700); color: var(--success-400);
}
.ar-tick .ar-icon { width: 36px; height: 36px; stroke-width: 2.2; }

.ar-gw { text-align: center; padding: var(--space-16) var(--space-6); }
.ar-spin {
  width: 40px; height: 40px; margin: 0 auto var(--space-5); border-radius: var(--radius-pill);
  border: 3px solid var(--surface-400); border-top-color: var(--gold-400);
  animation: ar-spin .9s linear infinite;
}
@keyframes ar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ar-spin { animation: none; }
  .ar-progress > div { transition: none; }
}
.ar-gw__tag { gap: var(--space-2); justify-content: center; margin-top: var(--space-6); color: var(--ink-300); }
.ar-gw__tag span { font-size: 11px; letter-spacing: .04em; }

/* =========================================================== DESKTOP ====
 *
 * The brief asks for a phone-first app whose web version adapts for desktop.
 * Below 1200px this is the phone app, centred. At 1200px and up the bottom tab
 * bar is replaced by a side rail, the content column is constrained so lines of
 * text stay readable, and the grids that are two-up on a phone open out.
 *
 * WHY 1200 AND NOT 1024. The rail is 260px wide. At 1024 that leaves 764px, and
 * a content column with any sensible maximum then fills it completely and sits
 * flush against the right edge while the left is pinned to the rail - measured
 * at 1024, 1120 and every width between. That band is where every 11-to-13-inch
 * laptop lives. At 1200 there is 940px beside the rail, which is enough for an
 * 860px column with real margins on both sides. Laura and Nina both reported
 * the lurch; Allison re-opened it after the first fix only moved it.
 * Defect Ledger LAURA-arete-011.
 *
 * This is an adaptation, not a second design: the same screens, the same
 * components, the same tokens. */

.ar-rail { display: none; }

@media (min-width: 1200px) {
  body { background: var(--surface-000); }

  .shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    max-width: 1440px;
    margin: 0 auto;
    min-height: 100vh;
  }

  .nav--rail { grid-column: 1; grid-row: 1; }
  .view {
    grid-column: 2; grid-row: 1;
    padding-bottom: var(--space-12);
    border-left: 1px solid var(--line-100);
    background: var(--surface-100);
    min-width: 0;
  }

  .ar-rail {
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    padding: var(--space-8) var(--space-5);
    background: var(--surface-000);
  }
  .ar-rail__mark { width: 190px; height: auto; margin-bottom: var(--space-10); }
  .ar-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
  .ar-rail__item {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; padding: var(--space-3) var(--space-4);
    background: none; border: 0; border-radius: var(--radius-md);
    color: var(--ink-200); cursor: pointer;
    font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 20px;
  }
  .ar-rail__item:hover { background: var(--surface-200); color: var(--ink-100); }
  .ar-rail__item[aria-current="page"] { background: var(--surface-200); color: var(--gold-300); }
  .ar-rail__foot { margin-top: auto; font-size: 11px; line-height: 17px; color: var(--ink-300); }

  /* Content column, CENTRED in the space left of the rail.
     Without the auto margins the column sat hard against the right edge: at
     1023px it was centred at left 132, and at 1024px it jumped to left 261 with
     three pixels of air on its right - a 129px sideways lurch at the breakpoint
     and ~420px of dead space on a 1440px screen. Laura and Nina found this
     independently. Defect Ledger LAURA-arete-011. */
  .ar-pad, .ar-appbar, .ar-chips--scroll, .ar-rail-h {
    margin-left: auto;
    margin-right: auto;
  }
  .ar-pad { padding-left: var(--space-10); padding-right: var(--space-10); max-width: 860px; }
  .ar-appbar { padding-left: var(--space-10); padding-right: var(--space-10); min-height: 68px; max-width: 860px; }
  .ar-appbar h1 { font-size: 25px; line-height: 28px; }
  .ar-chips--scroll { padding-left: var(--space-10); padding-right: var(--space-10); flex-wrap: wrap; overflow-x: visible; max-width: 860px; }
  .ar-rail-h { padding-left: var(--space-10); padding-right: var(--space-10); max-width: 860px; }

  /* The catalogue is the one place the extra width genuinely helps. */
  body[data-screen="shop"] .ar-pad,
  body[data-screen="shop"] .ar-appbar,
  body[data-screen="shop"] .ar-chips--scroll { max-width: 1180px; }
  body[data-screen="shop"] .ar-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

  .ar-hero { height: 340px; }
  .ar-trainhero { height: 180px; }
  .ar-hero__cnt { left: var(--space-10); right: var(--space-10); }

  /* The splash is a full-bleed photograph; on desktop it keeps the image wide
     and the copy in the readable column rather than stretching the text. */
  .ar-splash { position: relative; min-height: 560px; }
  .ar-splash__cnt { padding: var(--space-12) var(--space-10); max-width: 620px; }

  /* The gallery stops being a swipe deck and shows both views at once. */
  .ar-gallery { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .ar-gallery > * { flex: none; }
  .ar-dots { display: none; }

  .ar-qlinks { max-width: 520px; }
  .ar-done { padding-top: var(--space-12); max-width: 560px; }
  .ar-slots { grid-template-columns: repeat(6, 1fr); }
}

/* A phone held sideways, and small laptops: two-up product grid with room. */
@media (min-width: 600px) and (max-width: 1199px) {
  .ar-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .ar-pad { max-width: 760px; margin: 0 auto; }
  .ar-appbar { max-width: 760px; margin: 0 auto; }
}

/* A password field that is a plain text input, styled to look masked. The demo
   stores nothing and submits nothing, and a real type=password prompts the
   viewer's password manager to save something about a prototype.
   Defect Ledger CARL-arete-006. */
.ar-field__input--masked {
  -webkit-text-security: disc;
  text-security: disc;
  letter-spacing: .12em;
}

/* Intake shown against a target, rather than the target shown as intake.
   Defect Ledger ROGER-arete-001. */
.ar-stat__target { font-size: 11px; line-height: 14px; margin-top: 1px; opacity: .75; }
.ar-stat__note { margin-top: var(--space-3); text-align: center; }