/* /reps — the field page. Page-scoped, loaded last, same precedent as
   apex.css and offer.css. Phone width first; nobody opens this on a desktop.

   EVERY SELECTOR HERE IS SCOPED UNDER .reps, and that is not style — it is
   the only safe way to do this. `class` is deliberately not in expand.mjs's
   attribute passthrough, so a page cannot hand its own class to a component
   tag; page-specific treatment has to reach the component's own class name
   instead. Unscoped, `.card` or `.cta-row` here would silently restyle every
   other page in the repo.

   Read design/REP-FIELD-PAGE-DECISIONS.md for why this page departs from the
   design system in four places. Two of those departures live in this file. */

/* ---------------------------------------------------------------------------
   1. Hit targets — 56px, not the system's 48px floor.

   ONE token override, not a set of per-component rules, and that is the whole
   point: public/components/button.css and field.css both size themselves from
   var(--hit-target), so raising it here raises every control on the page —
   buttons, inputs, the textarea's minimum — without touching a single
   component or inventing a size variant.

   Why 56 and not 48: the system's floor is already stricter than WCAG 2.2 AA's
   24x24, and it is measured for someone sitting down. This page is used
   standing, one-handed, thumb-only, with a case on the phone, outdoors. The
   extra 8px is the difference between a mis-tap being rare and being never.
   --------------------------------------------------------------------------- */
.reps {
  --hit-target: 56px;

  background-color: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}

/* The <main>, via x-section as="main". No max-width in ch: the 68ch measure is
   a prose rule and a shop row is not prose — the name is being matched against
   a sign in front of the rep, so it gets the full column. A plain px cap keeps
   the page sane if someone does open it on a laptop, without pretending that
   is the target. */
.reps > .section-stack {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ---------------------------------------------------------------------------
   2. The states-gallery scaffolding.

   Everything in this block exists ONLY because v1 renders all six states on
   one page — there is no backend to move between them. When the page becomes
   operational this is the first thing to delete, along with the state labels
   in the markup. It is not part of the design.

   It is also why the page carries seven <h1>s (x-page-heading always renders
   one). That is a gallery artifact, not a heading-structure decision: one
   state on screen means one h1, which is what an operational page will have.
   --------------------------------------------------------------------------- */
.reps > .section-stack > .section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
}

.reps > .section-stack > .section-stack:first-child {
  padding-top: 0;
  border-top: 0;
}

/* The state label. x-footnote rather than x-kicker, because x-kicker renders
   an inline SVG eye icon and the directive is explicit: zero icons. In direct
   sun a word beats a glyph. */
.reps > .section-stack > .section-stack > .footnote {
  margin: 0;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   3. The list and its rows.
   --------------------------------------------------------------------------- */

/* The shop name, scoped to headings INSIDE a list so it does not also catch
   "What happened" on screen B — both are x-heading, and the only thing that
   separates them is context.

   Largest thing in the row and it wins the full width. Serif, matching
   headings and numerals elsewhere in the system: this string is recognised at
   a glance against a sign, not read. text-wrap: balance keeps a two-line shop
   name from leaving one orphan word. */
.reps .list .section-heading {
  font-family: var(--font-serif);
  font-size: var(--size-500);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-snug);
  text-wrap: balance;
}

/* Two full-width secondary actions, STACKED, never side by side.

   x-cta-row is a row by default, and this is the one place the page overrides
   a component's own layout rather than accepting it. Side by side would put
   two 56px targets within a thumb's width of each other, and the directive's
   8px dead-space rule is a floor, not a goal. Stacked, each action spans the
   row, so the nearest wrong target is a whole button away. The cost is
   vertical space, which a scrolling list has — and which a mis-tapped
   Navigate, leaving the page entirely for Maps, does not forgive. */
.reps .list .cta-row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* ---------------------------------------------------------------------------
   4. Screen B.
   --------------------------------------------------------------------------- */

/* The back link is text, not a button, because it is navigation rather than an
   action — but a thumb still has to hit it, so it gets the same 56px floor via
   padding instead of by pretending to be a control. */
.reps .prose a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-target);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.reps .section-cta {
  margin-top: var(--space-2);
}

/* The elapsed figure. Targeted by id, which DOES pass through expand.mjs
   (unlike class), rather than by a positional selector inside the live region
   — "the last .prose in there" happens to be correct today and stops being
   correct the moment someone adds a line. Bitter for numerals, matching the rest of the type system, and
   tabular figures so a timer ticking 0:09 -> 0:10 does not shift the text
   beside it. */
#rec-elapsed {
  font-family: var(--font-serif);
  font-size: var(--size-600);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-snug);
  font-variant-numeric: tabular-nums;
}