/*
 * ASENTRA SMART PARKING — mobile-browser demo
 * CR-M08-UI-REFRESH-01 · PART 03A — Customer Home top refresh.
 *
 * Dedicated Customer UI stylesheet (registered in index.html after
 * css/shell.css). Composition classes for the compact greeting and the
 * featured Parking Availability hero. Tokens only — every value comes from
 * css/tokens.css; no literal colors, spacing, radii, shadows or custom
 * properties. PART 01A semantic typography tokens are consumed here and never
 * redefined.
 */

/* ============================================================
   PART 03A · compact customer greeting
   ============================================================ */
.customer-greeting {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.customer-greeting__title {
  margin: 0;
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-page-title);
  line-height: var(--line-height-page-title);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.customer-greeting__sub {
  margin: 0;
  font-size: var(--font-size-body-secondary);
  font-weight: var(--font-weight-body-secondary);
  line-height: var(--line-height-body-secondary);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.customer-greeting__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================================
   PART 03A · featured Parking Availability hero
   ============================================================ */

/* The featured surface itself (class pair: .ui-card--featured in
   components.css). position:relative anchors the visually hidden h2; the
   zero min-width keeps the card shrinkable inside the one-column grid. */
.customer-availability {
  position: relative;
  min-width: 0;
}

/* Visually hidden section heading (keeps a valid h1 → h2 order and gives
   screen readers the section name while the hero leads visually with the
   stat). Same token-free clip hide as the shell build tag. */
.customer-availability__heading {
  position: absolute;
  clip-path: inset(50%);
}

/* Site context of the figures — quiet supporting line above the hero stat. */
.customer-availability__site {
  margin: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* Row: the ui-stat (available count + label) on the left, status badge
   end-aligned so the count stays the strongest element. Wraps before it
   ever squeezes or overflows. */
.customer-availability__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.customer-availability__top .ui-stat {
  gap: var(--space-05);
}

/* Reset paragraph margins for PART 01B stat elements used outside .ui-stat. */
.customer-availability .ui-stat__label,
.customer-availability .ui-stat__meta,
.customer-availability__percent {
  margin: 0;
}

/* Occupancy group: caption label, PART 01C meter, printed percentage. */
.customer-availability__occupancy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.customer-availability__percent {
  font-size: var(--font-size-body-secondary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body-secondary);
  color: var(--color-text-secondary);
}

/* "301 occupied · 420 total" — the adapter's own integers, verbatim; the
   ui-stat__meta base class carries its body-secondary voice. */

/* Zone / floor breakdown keeps the adapter's order; spacing only. */
.customer-availability__zones {
  margin-block-start: var(--space-2);
}

/* Honesty / source disclosure — quiet, never removed or weakened. */
.customer-availability__source {
  margin: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-faint);
  overflow-wrap: anywhere;
}

/* ============================================================
   PART 03B · quick actions (2×2 grid built on PART 01C primitives)
   ============================================================ */

/* Section wrapper: the 2×2 grid keeps ui-action-grid's two equal
   minmax(0, 1fr) columns (safe at 360/390/430); tiles are not wrapped in
   ui-card so the section reads lighter than the Availability hero. */
.customer-quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* Section label — secondary, compact; not a big display heading. */
.customer-quick-actions__title {
  margin: 0;
  font-size: var(--font-size-body-secondary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
}

/* Decorative inline SVG inside the tile icon slot: createIcon() emits a
   viewBox-only node, so the shell sizes it here (24px) — same pattern as
   .shell__nav-glyph svg. Restrained, inherits currentColor. */
.customer-quick-actions .ui-action-tile__icon svg {
  display: block;
  width: var(--space-6);
  height: var(--space-6);
}

/* ============================================================
   PART 03C · compact zone / floor availability rows
   Built on the PART 01C ui-zone-row scaffold; customer CSS here is
   composition only (list rhythm, hairline separators, availability
   count/unit split, slim meter). No card per zone, no white floating
   row surfaces.
   ============================================================ */

/* List container: vertical rhythm between rows. */
.customer-zone-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

/* Row rhythm + subtle hairline separators — restrained, no surface. */
.customer-zone-row {
  padding-block: var(--space-2);
}

.customer-zone-row + .customer-zone-row {
  border-top: var(--border-width-thin) solid var(--color-border);
}

/* Availability cell: the count keeps the numeric/tabular voice (component
   default) while the unit word returns to the UI face. */
.customer-zone-row .ui-zone-row__availability {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-family-base);
}

.customer-zone-row .ui-zone-row__availability .customer-zone-row__count {
  font-family: var(--font-family-numeric);
  font-variant-numeric: var(--font-variant-numeric-tabular);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.customer-zone-row .ui-zone-row__availability .customer-zone-row__unit {
  color: var(--color-text-secondary);
}

/* Row label keeps the scaffold's body voice; wrap-safe already. */
.customer-zone-row .ui-zone-row__meta {
  overflow-wrap: anywhere;
}

/* Slim meter: the 01C ui-meter track is 8px and full row width — exactly
   the compact visualization intended; nothing extra is drawn. */
.customer-zone-row .ui-zone-row__meter {
  margin-block-start: var(--space-1);
}

/* ============================================================
   PART 03D · lower Customer Home consolidation
   One quiet raised panel replaces the previous repeated full-size
   cards: Greeting → Availability hero → Quick actions → details panel.
   Everything inside stays token-driven; separators are hairlines, no
   per-item cards, no shadows beyond the single shared panel edge.
   ============================================================ */

/* The shared panel — raised but flat (no shadow): the Availability hero
   (featured, with --shadow-float) stays the only dominant surface. */
.customer-lower {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-2) var(--space-4) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-raised);
}

/* Detail sections inside the panel: quiet, separated by hairlines. */
.customer-lower__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  padding-block: var(--space-3);
}

.customer-lower__section + .customer-lower__section {
  border-top: var(--border-width-thin) solid var(--color-border);
}

/* Section titles drop from page-title voice to section-title voice so the
   lower half reads quieter than the h1 greeting and the hero stat. */
.customer-lower__title {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-section-title);
  line-height: var(--line-height-section-title);
  color: var(--color-text-primary);
}

/* Live Active Parking = the strongest lower operational state: restrained
   accent edge + its own action button (see markup). */
.customer-lower__section--live {
  border-inline-start: var(--border-width-medium) solid var(--color-accent);
  padding-inline-start: var(--space-3);
}

/* Lead icon inside compact info rows (My Vehicle). Decorative, currentColor,
   inherits the muted tone. */
.customer-lead {
  color: var(--color-text-faint);
}

.customer-lead svg {
  display: block;
  width: var(--space-6);
  height: var(--space-6);
}

/* Stack the info-row text column (plate over meta) inside the panel. */
.customer-lower .ui-info-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

/* Compact kv facts inside the panel: tighter rhythm, wrapped values. */
.customer-lower .customer-kv {
  width: 100%;
  min-width: 0;
}

.customer-lower .customer-kv__row {
  gap: var(--space-3);
}

.customer-lower .customer-kv__label,
.customer-lower .customer-kv__value {
  font-size: var(--font-size-200);
}

.customer-lower .customer-kv__label {
  flex: none;
}

.customer-lower .customer-kv__value {
  min-width: 0;
}

/* Quiet secondary action link (replaces the old full-width buttons). */
.customer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-accent);
  text-decoration: none;
}

.customer-link svg {
  display: block;
  width: var(--space-4);
  height: var(--space-4);
}

.customer-link:hover {
  color: var(--color-accent-strong);
}

.customer-link:focus-visible {
  outline: var(--border-width-medium) solid var(--color-accent);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

/* Recent Parking — lightweight activity rows (chronological order kept). */
.customer-activity {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.customer-activity__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
  padding-block: var(--space-2);
}

.customer-activity__row + .customer-activity__row {
  border-top: var(--border-width-thin) solid var(--color-border);
}

.customer-activity__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.customer-activity__plate {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.customer-activity__time {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.customer-activity__row .ui-badge {
  flex: none;
}

/* Reservations supporting link at the foot of the panel: hairline above it
   separates the foot from the activity list; the whole row is the target. */
.customer-lower__link {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-top: var(--border-width-thin) solid var(--color-border);
  width: 100%;
}

/* ============================================================
   PART 04A · customer Parking Search — header & search context
   Top of #/parking-search only: a compact single-h1 screen lead
   plus one quiet raised context panel for the existing search
   form, so the screen continues from the refreshed Customer Home.
   The results hierarchy below is untouched (PART 04B/04C own it);
   there is no second hero because this screen has no primary
   operational summary to feature.
   ============================================================ */

/* Compact screen lead for secondary customer screens — mirrors the
   home greeting rhythm (gap, page-title voice) so #/parking-search
   reads as a continuation of #/customer. */
.customer-screen-lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.customer-screen-lead__title {
  margin: 0;
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-page-title);
  line-height: var(--line-height-page-title);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* Search / discovery context — raised but flat (no shadow, hairline
   definition only): a quiet surface for the form, lighter than the
   old floating card and never featured. */
.customer-search-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-raised);
}

/* Rhythm inside the panel: the shared .lookup-search top margin is
   redundant on top of the panel gap (and other screens that use the
   shared form class are unaffected — the rule is scoped here). */
.customer-search-panel .lookup-search {
  margin-block-start: 0;
}

.customer-search-panel .ops-action__error {
  margin: 0;
}

/* The demo disclosure reads like the home source note: caption
   voice, secondary color, always visible text. */
.customer-search-panel .shell__page-note {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
}

/* Decorative search glyph inside the primary action — inherits the
   button's text color; createIcon() already marks it aria-hidden /
   focusable=false, and the visible "Search" text remains the
   accessible name (no duplicate label). */
.customer-search-panel .ui-button svg {
  display: block;
  width: var(--space-4);
  height: var(--space-4);
}

/* ============================================================
   PART 04B · parking discovery result hierarchy
   Each parking-site result becomes a quiet operational surface
   (never a featured dashboard hero): identity → primary
   availability → visible status → occupancy/capacity facts →
   existing zone/floor breakdown. Meters feed only the projected
   occupancyPercent and the percentage stays visible as text;
   unknown/unavailable surfaces draw no meter and invent nothing.
   ============================================================ */

/* Result surface — flat (no shadow) so the page keeps one hero
   vocabulary; the hairline .ui-card border keeps multiple results
   clearly separable. */
.customer-result {
  box-shadow: none;
  padding: var(--space-4);
  gap: var(--space-3);
  min-width: 0;
}

/* Identity block: site name (h2, section-title voice) over the
   property caption. */
.customer-result__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.customer-result__name {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-section-title);
  line-height: var(--line-height-section-title);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.customer-result__property {
  margin: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* Availability row: the projected available count is the strongest
   numeric fact inside the result (page-title numeric voice — scaled
   below the Home hero voice, so no result becomes a second hero).
   The status badge stays end-aligned and is always spelled-out text. */
.customer-result__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-width: 0;
}

.customer-result .ui-stat {
  gap: var(--space-05);
}

.customer-result .ui-stat__value {
  font-size: var(--font-size-page-title);
}

.customer-result .ui-stat__label {
  margin: 0;
}

.customer-result__top .ui-badge {
  flex: none;
}

/* Occupancy group: caption label, slim meter, printed percentage. */
.customer-result__occupancy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.customer-result__occupancy-label,
.customer-result__occupancy-percent {
  margin: 0;
}

.customer-result__occupancy-label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
}

.customer-result__occupancy-percent {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
}

/* Occupancy/capacity facts — adapter integers joined with literal
   words; wraps safely under long site or building names. */
.customer-result__facts {
  margin: 0;
  font-size: var(--font-size-body-secondary);
  font-weight: var(--font-weight-body-secondary);
  line-height: var(--line-height-body-secondary);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* Honest unavailable line for missing/unknown capacity — clear, but
   not a competing display heading; counts are never invented for it. */
.customer-result__unavailable {
  margin: 0;
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* Results-region state wrappers (loading / error / empty) — same
   flat elevation language as the results themselves. */
.customer-state-panel {
  box-shadow: none;
}

/* ============================================================
   PART 04C · parking discovery zone / floor rows
   Compact PART 01C ui-zone-row rows inside each discovery result
   (no card per zone): hairline separators, count/unit split,
   slim meter. Shares the .customer-zone-row availability
   count/unit voice already defined for the Customer Home zone
   list (PART 03C) — that block stays byte-identical; this block
   only adds discovery-scoped spacing and a small label top
   margin inside the result card.
   ============================================================ */

/* Zone block: the shared h3 heading keeps its existing note voice;
   list rhythm comes from the shared .customer-zone-list container. */
.customer-discovery-zones {
  min-width: 0;
}

.customer-discovery-zones .customer-zone-list {
  margin-block-start: var(--space-2);
}

/* Discovery zone rows reuse the shared .customer-zone-row availability
   count/unit split (defined above in the PART 03C block) and the shared
   list separators; only the inside-a-result top rhythm differs. */
.customer-discovery-zone-row .ui-zone-row__meta {
  overflow-wrap: anywhere;
}

.customer-discovery-zone-row .ui-zone-row__meter {
  margin-block-start: var(--space-1);
}

/* ============================================================
   PART 04D · parking discovery supporting UX
   The reservable-parking entry becomes a quiet, discoverable
   supporting link (never a competing primary CTA): accent text
   with a decorative reservations glyph and a trailing chevron,
   full-row tap target, no surface — matching the lower-panel
   link voice from Customer Home. Loading / error / empty /
   unavailable state semantics are unchanged from PART 04B.
   ============================================================ */

/* Supporting reservation entry — real anchor, accent voice. */
.customer-reserve-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding-block: var(--space-1);
  color: var(--color-accent);
  text-decoration: none;
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  -webkit-tap-highlight-color: transparent;
}

.customer-reserve-entry:hover {
  color: var(--color-accent-strong);
}

.customer-reserve-entry:focus-visible {
  outline: var(--border-width-medium) solid var(--color-accent);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

/* Decorative leading reservations glyph — inherits currentColor;
   aria-hidden/focusable=false come from createIcon(). */
.customer-reserve-entry__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

.customer-reserve-entry__icon svg {
  display: block;
  width: var(--space-6);
  height: var(--space-6);
}

/* Label carries the meaning; wraps safely on narrow columns. */
.customer-reserve-entry__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Trailing chevron — decorative affordance, never the meaning. */
.customer-reserve-entry__chevron {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

.customer-reserve-entry__chevron svg {
  display: block;
  width: var(--space-4);
  height: var(--space-4);
}

/* ============================================================
   PART 05A · Active Parking — page lead & live session summary
   Top of #/active-parking only: a compact single-h1 screen lead
   (the accepted .customer-screen-lead grammar) and ONE coherent
   live-session surface that replaces the old "Vehicle" +
   "Parking Session" cards. The fee / payment-method / location
   sections below it are untouched (PART 05B/05C). Every value is
   the same projected field the old cards rendered; the only
   presentation decisions are hierarchy, voice and spacing.
   ============================================================ */

/* Page stack: the route's root is a bare div, so it gets the same
   one-column grid rhythm as .customer-home (css/shell.css) — real
   spacing between the lead, the live surface and the remaining
   cards. No fixed widths; children keep min-width:0 shrinkability. */
.active-parking {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

/* Visually hidden section heading — the same token-free clip hide as the
   Customer Home availability hero: keeps a valid h1 → h2 order and gives
   screen readers the section name while the surface leads visually with
   the plate. */
.active-parking__heading {
  position: absolute;
  clip-path: inset(50%);
}

/* Live-session surface — the single featured surface on this screen (the
   Home availability hero stays on Home): accepted ui-card--featured
   elevation plus the restrained accent edge from Customer Home's live
   section grammar, so the session reads as in-progress rather than
   another equal-weight dashboard card. position:relative anchors the
   visually hidden heading. */
.active-parking__session {
  position: relative;
  min-width: 0;
  border-inline-start: var(--border-width-medium) solid var(--color-accent);
}

/* Row: the plate stat (the session's identity fact) on the left, the
   projected parking-status badge end-aligned so the plate stays the
   strongest element — the availability hero row, restated. Wraps before
   it ever squeezes or overflows. */
.active-parking__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-width: 0;
}

.active-parking__top .ui-stat {
  gap: var(--space-05);
}

.active-parking__top .ui-badge {
  flex: none;
}

/* Plate = identity of the live session: the page-title numeric voice the
   discovery results use for their primary figure — strong, but one step
   below the Home hero's display voice (no second oversized hero). The
   .ui-stat__value base already wraps safely (overflow-wrap + max-width). */
.active-parking__session .ui-stat__value {
  font-size: var(--font-size-page-title);
}

/* Entry time / current duration keep the shared .customer-kv row rhythm
   (hairline separators, right-aligned wrap-safe values) unchanged. */

/* Session ID — demoted from a first-class row to quiet supporting
   metadata: caption voice, secondary color, wraps with the page. */
.active-parking__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-05) var(--space-2);
  margin: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* ============================================================
   PART 05B · Active Parking — fee & read-only payment
   presentation. The old "Estimated Fee" card + "Payment
   Methods" card become ONE quiet payment section: estimated
   fee stat → payment status badge → compact read-only method
   rows → quiet provider / read-only metadata. Elevation stays
   one tier below the PART 05A featured live-session surface
   (ui-card--emphasized: strengthened edge, no shadow) and
   above the plain location card — no second hero. All values
   and every disclosure string are unchanged (M06 PART 04).
   ============================================================ */

.active-parking__payment {
  min-width: 0;
}

/* Section title drops from the legacy page-title voice to the accepted
   section-title voice — quieter than the h1, same voice as the Customer
   Home lower-panel section titles. */
.active-parking__payment-title {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-section-title);
  line-height: var(--line-height-section-title);
  color: var(--color-text-primary);
}

/* Row: the estimated-fee stat on the left, the projected payment-status
   badge end-aligned — the live-session top row, restated. Wraps before it
   ever squeezes or overflows. */
.active-parking__payment-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-width: 0;
}

.active-parking__payment-top .ui-stat {
  gap: var(--space-05);
}

.active-parking__payment-top .ui-badge {
  flex: none;
}

/* Estimated fee = the strongest financial fact of this section: numeric
   tabular voice scaled one step below the live-session plate (hero →
   page-title in 05A, page-title → section-title here), so the PART 05A
   surface stays the screen's visual anchor. The base .ui-stat__value
   already wraps safely (overflow-wrap + max-width). */
.active-parking__payment .ui-stat__value {
  font-size: var(--font-size-section-title);
}

/* Read-only disclosure — caption voice, secondary color; the copy is
   verbatim from M06 PART 04. */
.active-parking__payment-note {
  margin: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* Compact method rows — informational only: no buttons, no focus targets,
   no interactive affordance. Hairline separators; displayName primary with
   methodId as quiet metadata below; availability badge end-aligned and
   always spelled-out text (never color alone). */
.active-parking__methods {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.active-parking__method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-05) var(--space-3);
  padding-block: var(--space-2);
}

.active-parking__method + .active-parking__method {
  border-top: var(--border-width-thin) solid var(--color-border);
}

.active-parking__method-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.active-parking__method-name {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.active-parking__method-id {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-faint);
  overflow-wrap: anywhere;
}

.active-parking__method .ui-badge {
  flex: none;
}

/* Provider metadata — quiet caption, demoted from the old note voice. */
.active-parking__payment-provider {
  margin: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-faint);
  overflow-wrap: anywhere;
}

/* ============================================================
   PART 05C · Active Parking — location, Find My Car &
   supporting states. The location card opens with an identity
   row (decorative location glyph + strongest projected identity:
   slot when present, otherwise zone · floor) over the same
   compact hairline fact rows; Find My Car keeps its native
   anchor + secondary-button semantics with a decorative glyph.
   Loading / error / no-session states use the flat
   .customer-state-panel elevation already accepted for the
   Parking Search states (no new elevation, no new shadow).
   ============================================================ */

.active-parking__location {
  min-width: 0;
}

/* Section title — the same section-title voice as the payment section
   (down from the legacy page-title voice), so the card reads quieter
   than the h1 and on par with the other supporting sections. */
.active-parking__location-title {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-section-title);
  line-height: var(--line-height-section-title);
  color: var(--color-text-primary);
}

/* Identity row: reuses the shared ui-info-row scaffold and the Home
   lead-icon treatment (.customer-lead) — the glyph is decorative
   (aria-hidden/focusable=false from createIcon()) and muted; the
   projected identity text carries the meaning and wraps safely. */
.active-parking__location-id {
  min-width: 0;
}

/* Tighter rhythm between the identity row and the fact rows. */
.active-parking__location .customer-kv {
  margin-block-start: var(--space-1);
}

/* Find My Car — the screen's single operational CTA. The anchor, its
   href, label and secondary-button voice are unchanged; the decorative
   location glyph mirrors the accepted in-button icon treatment from the
   Parking Search panel (inherits the button's text color). */
.active-parking__find svg {
  display: block;
  width: var(--space-4);
  height: var(--space-4);
}

/* ============================================================
   PART 06A · Find My Car — page lead & wayfinding surface
   Top of #/find-my-car only: a compact single-h1 screen lead
   (the accepted .customer-screen-lead grammar) and ONE featured
   wayfinding surface that replaces the old "Your Car" +
   "Parking Location" cards (plate identity stat → location
   identity row per the PART 05C rule → compact hairline fact
   rows). The Guidance card and the supporting states are
   untouched (PART 06B). Tokens only; no new elevation, no
   accent edge (this is a wayfinding answer, not a live state).
   ============================================================ */

/* Page stack: the route's root is a bare div, so it gets the same
   one-column grid rhythm as .customer-home / .active-parking. */
.find-my-car {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

/* Visually hidden section heading — the same token-free clip hide as the
   accepted hero/surface headings: keeps a valid h1 → h2 order and gives
   screen readers the section name while the surface leads with the plate. */
.find-my-car__heading {
  position: absolute;
  clip-path: inset(50%);
}

.find-my-car__way {
  position: relative;
  min-width: 0;
}

/* Vehicle identity row: decorative vehicle glyph + the plate stat
   (the screen's identity fact). Icon slot reuses the Home lead-icon
   treatment; the stat keeps the PART 05A page-title numeric voice,
   wraps safely, and stays the strongest element of the surface. */
.find-my-car__car {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.find-my-car__car .ui-stat {
  gap: var(--space-05);
  min-width: 0;
}

.find-my-car__car .ui-stat__value {
  font-size: var(--font-size-page-title);
}

/* Location identity row: the PART 05C accepted pattern (decorative
   location glyph + strongest projected identity). */
.find-my-car__location-id {
  min-width: 0;
}

/* Fact rows keep the shared .customer-kv hairline rhythm; only the top
   rhythm under the identity rows is tightened. */
.find-my-car__way .customer-kv {
  margin-block-start: var(--space-1);
}

/* ============================================================
   PART 06B · Find My Car — guidance & supporting states
   The Guidance card becomes a compact supporting section
   (section-title voice + quiet hairline rows), staying clearly
   below the PART 06A featured wayfinding surface. The
   loading / error / no-session / context-mismatch states use
   the accepted .customer-state-panel flat elevation (already
   defined in the PART 04B block) — no new elevation, no new
   shadow.
   ============================================================ */

/* Section title — the same section-title voice as the other
   supporting sections (payment / location / result names). */
.find-my-car__guidance-title {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-section-title);
  line-height: var(--line-height-section-title);
  color: var(--color-text-primary);
}

/* Guidance rows — plain informational text (no buttons, anchors,
   steps or controls): quiet body-secondary voice, hairline
   separators, wraps safely. An empty projected list renders no
   rows — exactly the pre-refresh behavior (heading only). */
.find-my-car__guidance-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.find-my-car__guidance-line {
  margin: 0;
  padding-block: var(--space-2);
  font-size: var(--font-size-body-secondary);
  font-weight: var(--font-weight-body-secondary);
  line-height: var(--line-height-body-secondary);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.find-my-car__guidance-line + .find-my-car__guidance-line {
  border-top: var(--border-width-thin) solid var(--color-border);
}

/* ============================================================
   PART 07A · Parking History — page lead & list hierarchy
   The legacy oversized page title becomes the compact
   customer-screen-lead (PART 03 grammar). The repeated
   card-per-item list becomes ONE container card of compact,
   hairline-separated selectable rows: identity (plate over the
   parking-date anchor, parking-status badge, decorative chevron)
   → session facts → money facts (final amount primary, fee /
   benefit supporting) → payment status. The whole-row article
   selection contract is byte-identical to M05; the pre-refresh
   shared .customer-history* rules in shell.css keep the row grid
   rhythm, cursor and focus-visible treatment — this block only
   adds the list container rhythm and the compact row anatomy.
   ============================================================ */

/* One container card holds every row: zero the ui-card padding AND
   the ui-card flex gap so rows sit flush and the hairlines — not the
   page background — separate them; the card keeps its single
   elevation instead of repeating it per row. */
.customer-history__list {
  padding: 0;
  gap: 0;
}

/* Row padding (the pre-refresh padding came from ui-card itself). */
.customer-history-card {
  padding: var(--space-3) var(--space-4);
}

/* Hairline between rows; the card border closes the outer edges. */
.customer-history-card + .customer-history-card {
  border-top: var(--border-width-thin) solid var(--color-border);
}

/* Tier 1 — identity left, badge + chevron affordance right. */
.customer-history-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.customer-history-card__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Plate keeps the shared .customer-history-card__plate voice from
   shell.css; only a safe wrap is added for long identifiers. */
.customer-history-card__plate {
  overflow-wrap: anywhere;
}

/* Parking-date anchor — the pre-refresh entryTime.slice(0, 10)
   value, verbatim. */
.customer-history-card__date {
  margin-block-start: var(--space-05);
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
}

/* The badge and chevron never compress the identity: text wraps
   instead. */
.customer-history-card__tail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Decorative chevron — the accepted 16px customer-link voice, muted.
   No handler, no focus target, no label of its own. */
.customer-history-card__tail svg {
  display: block;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-text-faint);
}

/* Tier 2 — session facts: quiet caption voice; each fact wraps as a
   whole unit (never mid-value). */
.customer-history-card__facts {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: var(--space-05);
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
  min-width: 0;
}

.customer-history-card__fact {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Tier 3 — money: the final amount is the primary value; parking fee
   and benefit stay supporting facts. */
.customer-history-card__money {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-05) var(--space-3);
  min-width: 0;
}

.customer-history-card__final {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.customer-history-card__amounts {
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Tier 4 — payment status as visible text (label + verbatim value). */
.customer-history-card__payment {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  min-width: 0;
}

.customer-history-card__payment-label {
  color: var(--color-text-faint);
}

.customer-history-card__payment-value {
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  text-align: right;
}

/* ============================================================
   PART 08A · Parking Receipt — page lead & primary receipt surface
   The legacy oversized page title becomes the compact
   customer-screen-lead (PART 03 grammar). The pre-refresh first
   three ready cards (Parking Summary / Charges / Payment) become
   ONE primary receipt surface: hairline-separated zones for vehicle
   identity, session facts, charges and payment. Every label and
   projected value is unchanged; the Completion card and the back
   actions stay pre-refresh (PART 08B), as do all supporting states.
   ============================================================ */

/* One card holds the zones: zero the ui-card gap so the hairlines
   — not the card gap — set the vertical rhythm. */
.parking-receipt__card {
  gap: 0;
}

/* Hairline + rhythm for every zone after identity. */
.parking-receipt__session,
.parking-receipt__charges,
.parking-receipt__payment {
  padding-block: var(--space-3);
  border-top: var(--border-width-thin) solid var(--color-border);
}

/* Zone A — vehicle identity: quiet label over the strongest value. */
.parking-receipt__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.parking-receipt__plate-label {
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-faint);
}

.parking-receipt__plate {
  margin-block-start: var(--space-05);
  font-size: var(--font-size-400);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* Zone B — session facts: the accepted PART 07 compact fact line
   (same values, raw strings verbatim). */
.parking-receipt__session {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: var(--space-05);
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
  min-width: 0;
}

.parking-receipt__fact {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Zone C — charges: the final amount is the primary money fact;
   parking fee and benefit amount stay supporting. */
.parking-receipt__charges {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.parking-receipt__final {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-05) var(--space-3);
  min-width: 0;
}

.parking-receipt__final-label {
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-faint);
}

.parking-receipt__final-value {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.parking-receipt__amounts {
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Zone D — payment: visible status text with the supplementary
   badge (existing tone mapping, unchanged). */
.parking-receipt__payment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.parking-receipt__payment-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.parking-receipt__payment-label {
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-faint);
}

.parking-receipt__payment-value {
  margin-block-start: var(--space-05);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.parking-receipt__payment .ui-badge {
  flex-shrink: 0;
}

/* ============================================================
   PART 08B · Parking Receipt — completion, actions & supporting
   states
   The legacy Completion card's oversized page-title h2 becomes the
   accepted section-title voice (same voice as the other supporting
   sections, PART 05C / 06B); its two labeled facts keep the shared
   .customer-kv hairline rhythm. The ready-state back actions keep
   their native anchor presentation (shell__row +
   ui-button--secondary) unchanged. The missing-selection / loading
   / not-found states use the accepted .customer-state-panel flat
   elevation (defined in the PART 04B block) — conditions, copy and
   both back anchors are unchanged; the not-found state intentionally
   has no Retry (frozen contract).
   ============================================================ */

/* Section title — the same section-title voice as the other
   supporting sections. */
.parking-receipt__section-title {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-section-title);
  line-height: var(--line-height-section-title);
  color: var(--color-text-primary);
}

/* ============================================================
   PART 09A · My Reservations — page lead & ready list hierarchy
   The legacy oversized page title becomes the compact
   customer-screen-lead (PART 03 grammar); the read-only note is
   demoted from its dedicated card to quiet page text. The
   card-per-reservation list becomes ONE container card of compact,
   hairline-separated rows (PART 07 history-list precedent): area
   identity + lifecycle badge → quiet reservation ID → compact
   labeled facts → the optional "View digital pass" anchor. Every
   value, mapping and formatter is unchanged; the supporting states
   stay pre-refresh (PART 09B).
   ============================================================ */

/* One container card holds every row: zero the ui-card padding AND
   the ui-card flex gap so the hairlines — not the card rhythm —
   separate the rows. */
.parking-reservations__list {
  padding: 0;
  gap: 0;
}

/* Row padding (the pre-refresh padding came from each row's own
   ui-card). */
.parking-reservations__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}

.parking-reservations__row + .parking-reservations__row {
  border-top: var(--border-width-thin) solid var(--color-border);
}

/* Row identity — area name the strongest value, badge end-aligned. */
.parking-reservations__identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.parking-reservations__area {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* The badge never compresses the identity: the area name wraps
   instead. */
.parking-reservations__identity .ui-badge {
  flex-shrink: 0;
}

/* Reservation ID — quiet meta beneath the identity. */
.parking-reservations__id {
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-faint);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Row facts — the accepted PART 07 compact fact line: quiet caption
   voice, each fact wraps as a whole unit (never mid-value). */
.parking-reservations__facts {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: var(--space-05);
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
  min-width: 0;
}

.parking-reservations__fact {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ============================================================
   PART 10A · Digital Parking Pass — page lead & ready pass
   hierarchy
   The legacy oversized page title becomes the compact
   customer-screen-lead (PART 03 grammar), and the ready pass
   card becomes ONE restrained primary surface (PART 08
   detail-screen precedent): Pass ID identity — plain readable
   identifier text, never a credential presentation — with the
   pass-status label + badge, the five remaining facts in the
   shared .customer-kv hairline rows, and the quiet lifecycle
   note. The internal oversized title is removed; supporting
   states and the back action stay pre-refresh (PART 10B).
   ============================================================ */

/* Identity — Pass ID left, Status label + badge right. */
.parking-pass__identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.parking-pass__pass-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.parking-pass__pass-id-label {
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-faint);
}

/* Strong wrap-safe value — the identifier stays plain readable
   text (no credential/QR/barcode treatment). */
.parking-pass__pass-id-value {
  margin-block-start: var(--space-05);
  font-size: var(--font-size-400);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* The Status label + badge never compress the identity: the Pass
   ID wraps instead. */
.parking-pass__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 0;
}

.parking-pass__status-label {
  font-size: var(--font-size-100);
  line-height: var(--line-height-tight);
  color: var(--color-text-faint);
}

/* Hairline between the identity zone and the shared kv fact rows. */
.parking-pass__card .customer-kv {
  border-top: var(--border-width-thin) solid var(--color-border);
  padding-top: var(--space-2);
}