/* ==========================================================================
   VEHICLE SIZE TIERS — the persistent key, the tier figure with its channel
   label, and the film footnote.

   Shared by four hosts: the /services/ price panel, the home service grid, and
   three of the four service-page ledgers. One sheet rather than four copies,
   because the key has to read identically on every page it appears on or it
   stops being a key. Loaded non-blocking like every other below-the-fold
   sheet. 0 images.

   The one structural idea: a price cell always carries its own channel label
   in the DOM. Wide, the column head names the channel and the label is taken
   out of the visual flow but left for a screen reader, so "$1,605" is never
   read as an unqualified figure. Narrow, the table becomes one card per
   service and the label is the only thing that says which size this is.
   Nothing is ever conditionally rendered — the layout changes, the disclosure
   does not.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE KEY — persistent, above the figures it explains. Not a tooltip: it is
   the legend for twenty-one numbers and it belongs on the page.
   -------------------------------------------------------------------------- */
.tierkey {
  --chamfer: var(--chamfer-sm);
  display: grid;
  gap: var(--space-xs);
  padding: var(--card-pad);
  background: var(--chamfer-edge), var(--surface-sunken);
  border: var(--border-width-hair) solid var(--border-strong);
  border-radius: var(--radius-inset);
  clip-path: var(--chamfer-clip);
}

.tierkey__title {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.tierkey__list {
  display: grid;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

.tierkey__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-2xs);
  row-gap: var(--space-3xs);
  padding-block-end: var(--space-2xs);
  /* docs/uniqueness.md move 6: every rule on the page is a tick rule */
  background: var(--tick-rule-fine);
  background-position: bottom;
}
.tierkey__item:last-child { background: none; padding-block-end: 0; }

/* the numeral is the accented thing; the words beside it never are */
.tierkey__num {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  min-width: var(--icon-md);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--text-accent);
}
.tierkey__name {
  grid-column: 2;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--text-primary);
}
.tierkey__eg {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-mono-label);
  color: var(--text-faint);
}

.tierkey__note {
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  /* Row subgrid, so the example vehicles sit on one line across all three
     readings. Without it each item is its own grid, tier III's two-line name
     pushes its examples down, and the key reads as three loose blocks between
     roughly 768 and 1100. Dropped whole where subgrid is unsupported, which
     leaves exactly the layout that was there before. */
  .tierkey__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--space-xs);
    row-gap: var(--space-3xs);
  }
  /* three readings side by side want a vertical axis between them, not three
     stacked horizontal rules */
  .tierkey__item {
    grid-row: span 2;
    grid-template-rows: subgrid;
    padding-block-end: 0;
    padding-inline-start: var(--space-sm);
    background: var(--tick-rule-vertical);
  }
  .tierkey__item:first-child { background: none; padding-inline-start: 0; }
  .tierkey__item:last-child { background: var(--tick-rule-vertical); }
}

/* --- the one-line variant — where the full key would outweigh what it keys.
   Same wording, set as a sentence against an accent rule. ------------------- */
.tierkey--line {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-sunken);
  border: 0;
  border-inline-start: var(--border-width-bar) solid var(--border-accent-soft);
  border-radius: var(--radius-sharp);
  clip-path: none;
  max-width: var(--width-measure);
  margin-block-end: var(--space-md);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.tierkey--line b {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--text-accent);
}

/* --------------------------------------------------------------------------
   THE TIER FIGURE — a price and the channel it was read on. The host row
   supplies the track; this supplies the pairing.
   -------------------------------------------------------------------------- */
.tierfig {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  min-width: 0;
}

.tierfig__k {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.tierfig__v {
  font-family: var(--font-mono);
  font-size: var(--text-step);
  font-weight: var(--weight-bold);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--text-accent);
  white-space: nowrap;
}

/* A flat price spans the three channels instead of printing the same number
   three times. The span IS the statement: this one does not change with your
   car. Narrow, the same cell carries "I · II · III" as its label. */
.tierfig--span { justify-content: flex-start; }

/* Film. Not a gap and not an omission — a stated position, so it is drawn as a
   filled field rather than as three empty cells. The words stay off the accent
   ink; the accent is in the wash and the edge. */
.tierfig--quoted {
  justify-content: center;
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--surface-accent-wash);
  border: var(--border-width-hair) solid var(--border-accent-soft);
  border-radius: var(--radius-inset);
}
.tierfig__v--words {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-mono-label);
  color: var(--text-secondary);
  white-space: normal;
}

/* --- the channel label, once the column head names the channel --------------
   Not display:none: the figure is meaningless unqualified, so the label is
   taken out of the visual flow and left in the accessibility tree, which is
   what .sr-only does. It cannot be .sr-only itself because which of the two
   states applies is a question about the viewport, and the two hosts change
   layout at different widths. */
@media (min-width: 768px) {
  .tierfig--md .tierfig__k {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tierfig--md { justify-content: flex-end; }
  .tierfig--md.tierfig--span { justify-content: center; }
}

@media (min-width: 1024px) {
  .tierfig--lg .tierfig__k {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tierfig--lg { justify-content: flex-end; }
  .tierfig--lg.tierfig--span { justify-content: center; }
}

/* --------------------------------------------------------------------------
   THE FILM FOOTNOTE — the reason three rows carry no size price. It is the
   only place on the site that explains a refusal to publish a number, so it
   is set as a statement, not as small print.
   -------------------------------------------------------------------------- */
.filmnote {
  --chamfer: var(--chamfer-sm);
  margin-block-start: var(--space-md);
  padding: var(--card-pad);
  background: var(--chamfer-edge), var(--surface-sunken);
  border: var(--border-width-hair) solid var(--border-strong);
  border-inline-start: var(--border-width-slab) solid var(--surface-accent);
  border-radius: var(--radius-inset);
  clip-path: var(--chamfer-clip);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.filmnote b {
  display: block;
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}