/* ==========================================================================
   06 MEASUREMENT — the positioning argument. Offset overlap: the tall panel
   photograph bleeds past the right viewport edge and the mono readout block
   overlaps its left third. Grid break #1. 1 image.
   ========================================================================== */

.measure { background: var(--surface-page); overflow: hidden; }

/* docs/art-direction.md: surfaces alternate so the page is never one tone for
   more than two blocks. On a page whose neighbours both sit on --surface-page
   this block takes the alternating band instead. */
.measure--alt { background: var(--surface-alt); }

.measure__inner { display: grid; gap: var(--space-stack); }

.measure__media {
  position: relative;
  aspect-ratio: var(--ratio-card);
  border-radius: var(--radius-card);
  clip-path: var(--chamfer-clip);
}
.measure__media::after { background: var(--chamfer-edge), var(--overlay-media); }

.measure__body { display: flex; flex-direction: column; gap: var(--space-md); }

.measure__quote {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-width-slab) solid var(--surface-accent);
}

/* --- the readout ledger --------------------------------------------------
   The head and the rows were two independent grids sharing a written-out track
   list, so the auto column sized to "DEPTH" in one and to "118 um" in the
   other and the headers never sat over their columns. They now share ONE track
   list, declared once on the panel as --measure-cols and inherited: the same
   guarantee subgrid gave, minus the requirement that the panel be a grid.
   The panel is a flex column instead, which is what lets the note sit on the
   panel foot when the pair of panels is stretched to a common height. */
.measure__panel {
  --measure-cols: minmax(0, 1.7fr) minmax(min-content, 1fr) minmax(0, 1.2fr);
  display: flex;
  flex-direction: column;
  padding: var(--card-pad-lg);
  background: var(--chamfer-edge), var(--surface-raised);
  border: var(--border-width-hair) solid var(--border-strong);
  border-radius: var(--radius-card);
  clip-path: var(--chamfer-clip);
}

/* --- the drive-time pair --------------------------------------------------
   The city pages read an area against one figure and have no third datum, so
   the panel's own three tracks would leave a dead column and hang the head
   over nothing. Two tracks, declared once, inherited by the head and the rows
   exactly as the three-track list is. specs/021-city-pages.md block 03. */
.measure__panel--pair { --measure-cols: minmax(0, 1fr) auto; }

/* Below --bp-md the three-track list resolved the name column to 77px and every
   service wrapped to two or three lines, because the third datum was given more
   room than the thing it describes. Narrow, the row is name + figure, and the
   third datum drops to its own line underneath. */
.measure__panel-head,
.measure__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name  price"
    "meta  meta";
  column-gap: var(--space-sm);
  row-gap: var(--space-3xs);
  align-items: baseline;
  /* docs/uniqueness.md move 6: every horizontal rule on the page is a tick
     rule. background-color stays free for the hover so the two do not fight. */
  background: var(--tick-rule-fine);
  background-position: bottom;
}
.measure__panel-head > span:nth-child(1),
.measure__panel-name { grid-area: name; }
.measure__panel-head > span:nth-child(2),
.measure__depth { grid-area: price; text-align: end; }
.measure__panel-head > span:nth-child(3),
.measure__defect { grid-area: meta; text-align: start; }

.measure__panel-head {
  padding-block-end: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The rows take whatever height the panel was stretched to. A five-row add-on
   panel beside a twelve-row service panel otherwise left 336px of bare card at
   its foot; grown and centred, the same panel reads as the sparser of two
   instruments rather than as a box someone forgot to fill. Where the panel is
   not stretched — every service page — there is no free space and no growth. */
.measure__row {
  flex: 1 0 auto;
  align-content: center;
  padding-block: var(--space-2xs);
  transition: background-color var(--dur-fast) var(--ease-state);
}
.measure__row:hover { background-color: var(--surface-accent-wash); }

.measure__panel-name {
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
/* The figure is the thing this panel is read for, so it carries the hierarchy
   in size and weight. It was the same tonal value as the name beside it and
   only the accent hue told them apart, which is hierarchy by colour. */
.measure__depth {
  font-family: var(--font-mono);
  font-size: var(--text-price);
  font-weight: var(--weight-bold);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--text-accent);
  white-space: nowrap;
}
.measure__defect {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-label);
  color: var(--text-muted);
}

/* auto absorbs whatever height a stretched panel was given, so the note sits on
   the panel foot rather than leaving the dead quadrant open underneath it */
.measure__note {
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.measure__col { display: flex; flex-direction: column; gap: var(--space-stack); }

/* --- the index price panel: two instrument columns, not one 660px box -----
   Stretched, not start-aligned: the five-row add-on panel ended 302px above the
   twelve-row service panel and left the right quadrant of the section dead. */
.measure__panels { display: grid; gap: var(--grid-gap); }

@media (min-width: 768px) {
  .measure__panel-head,
  .measure__row {
    grid-template-columns: var(--measure-cols);
    grid-template-areas: "name price meta";
  }
  .measure__panel-head > span:nth-child(3),
  .measure__defect { text-align: end; }

  /* two tracks, so the row is one area wide and the "meta" line is not
     reserved under a datum that does not exist */
  .measure__panel--pair .measure__panel-head,
  .measure__panel--pair .measure__row { grid-template-areas: "name price"; }
}

@media (min-width: 1024px) {
  .measure__panels { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

  .measure__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: var(--space-3xl);
  }
  /* the head sits on the photograph's top edge. Centred, it floated half a
     screen down the column and opened bare ground between the block above and
     this one's heading. */
  .measure__col { grid-column: 1; grid-row: 1; align-self: start; }
  .measure__media {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: var(--ratio-tall);
    /* 50vw is measured from this element's own containing block, not the page,
       so the old calc(50% - 50vw) pulled the photograph 670px out and .measure
       clipped a third of it — and, being ratio-locked, it grew to 1664px tall
       and opened a screen of bare ground beside the reading column.
       The gutter plus the wrap's outer margin is the real distance to the
       viewport edge. */
    /* 100vw counts the classic Windows scrollbar and <body> stops growing at
       --width-page, so the raw expression overstated the wrap's outer margin
       by half a scrollbar at every width and by hundreds of pixels above
       1,920 — where the frame ran past the viewport edge and .measure clipped
       it. Capped at the page width the wide case is exact; the ~8px scrollbar
       residue has no CSS remedy, no unit reports the viewport without it. */
    margin-inline-end: calc(var(--gutter) * -1 - max(0px, (min(100vw, var(--width-page)) - var(--width-wide)) / 2));
    border-start-end-radius: var(--radius-sharp);
    border-end-end-radius: var(--radius-sharp);
  }
  /* the offset overlap belongs to the service-page layout only: unscoped it
     also pushed the index's left price panel under its add-on panel */
  .measure__col .measure__panel {
    position: relative;
    z-index: var(--z-raised);
    margin-inline-end: calc(var(--space-4xl) * -1);
  }

  /* A landscape frame crushed into the portrait track loses everything except
     its middle sixth. Where the file is 16:9 the media states its own ratio.
     Declared after .measure__media: same specificity, so order decides. */
  .measure__media--wide { aspect-ratio: var(--ratio-card); }
}

/* --------------------------------------------------------------------------
   THE MIRRORED, UNCARDED VARIANT — one city page's block 03.
   The other city page runs this block as a raised instrument panel overlapping
   a photograph that hangs off the END viewport edge. Printing the same shape
   under the same verbatim h2 is what still made the two pages read as one page
   seen twice, and changing the frame and the eyebrow was a caption change, not
   a structural one. Here the drive times are set inline in the reading column
   as bare ruled rows — no card, no raised surface, no overlap, therefore
   nothing covering the chip — and the photograph takes the START column and
   hangs off the start edge instead. Same component, same rows, mirrored shape.
   -------------------------------------------------------------------------- */
.measure--inline .measure__panel {
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sharp);
  clip-path: none;
}
/* the frame here is a 3:2 file and states its own ratio, the way --wide does */
.measure--inline .measure__media { aspect-ratio: var(--ratio-bleed); }

@media (min-width: 1024px) {
  /* the reading column is the wide one on this side of the mirror */
  .measure--inline .measure__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .measure--inline .measure__col { grid-column: 2; }
  .measure--inline .measure__media {
    grid-column: 1;
    /* stretched, not ratio-locked: at 3:2 the frame closed 531px into an 825px
       row and left ~294px of ground under it. A grid item with a definite
       stretched height ignores aspect-ratio, and .media already covers, so the
       photograph fills the column and the reading column sets the height. */
    align-self: stretch;
    aspect-ratio: auto;
    /* the same reach as the end-side bleed, measured from this element's own
       containing block: the gutter plus whatever the wrap's outer margin is */
    margin-inline-start: calc(var(--gutter) * -1 - max(0px, (min(100vw, var(--width-page)) - var(--width-wide)) / 2));
    margin-inline-end: 0;
    border-start-start-radius: var(--radius-sharp);
    border-end-start-radius: var(--radius-sharp);
    border-start-end-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
  }
  /* no overlap and no raised layer: the rows belong to the column */
  .measure--inline .measure__col .measure__panel {
    position: static;
    margin-inline-end: 0;
  }

  /* the frame reaches the start viewport edge here, so the chip reads from the
     inside corner rather than sitting 8px off the edge of the page */
  .measure--inline .measure__media .chip {
    inset-inline-start: auto;
    inset-inline-end: var(--chip-offset);
  }
}

/* --------------------------------------------------------------------------
   THE TIER PANEL — the same instrument, read on three channels instead of one.
   Service · Duration · I · II · III. docs/content.md §Vehicle size tiers.

   Wide, five tracks on the panel's own inherited track list, so the head sits
   over its columns exactly as it does on the three-track version. Narrow, a
   three-column money table does not fit at 390 and a table that scrolls
   sideways hides two thirds of the prices as surely as a dropdown would, so
   the row becomes a card: name and duration on one line, then one full-width
   row per size, each carrying its own numeral. Nothing leaves the DOM.
   -------------------------------------------------------------------------- */
.measure__panel--tiers {
  --measure-cols: minmax(0, 1.7fr) minmax(min-content, 0.8fr) repeat(3, minmax(min-content, 0.78fr));
}

.measure__panel--tiers .measure__panel-head,
.measure__panel--tiers .measure__row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: none;
  row-gap: var(--space-2xs);
  align-items: center;
}
.measure__panel--tiers .measure__row { padding-block: var(--space-xs); }

.measure__panel--tiers .measure__panel-name { grid-column: 1; grid-row: 1; }
.measure__panel--tiers .measure__defect { grid-column: 2; grid-row: 1; text-align: end; }
.measure__panel--tiers .tierfig { grid-column: 1 / -1; }

.measure__panel--tiers .measure__panel-head > span { grid-row: 1; }
.measure__panel--tiers .measure__panel-head > span:nth-child(1) { grid-column: 1; text-align: start; }
.measure__panel--tiers .measure__panel-head > span:nth-child(2) { grid-column: 2; text-align: end; }
/* the three channel names have no columns to sit over until the table is a
   table; until then every figure carries its own numeral instead */
.measure__panel--tiers .measure__panel-head > span:nth-child(n + 3) { display: none; }

/* the key is the legend for twenty-one figures: full width, above both panels */
.measure__panels > .tierkey { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .measure__panel--tiers .measure__panel-head,
  .measure__panel--tiers .measure__row {
    grid-template-columns: var(--measure-cols);
    grid-template-areas: none;
    row-gap: var(--space-3xs);
  }
  /* the three channel names, pinned to the three channels. Without an explicit
     column each one auto-places against the base rule's unresolved grid-area
     and the head reads II III I. */
  .measure__panel--tiers .measure__panel-head > span:nth-child(n + 3) {
    display: block;
    grid-row: 1;
    text-align: end;
  }
  .measure__panel--tiers .measure__panel-head > span:nth-child(3) { grid-column: 3; }
  .measure__panel--tiers .measure__panel-head > span:nth-child(4) { grid-column: 4; }
  .measure__panel--tiers .measure__panel-head > span:nth-child(5) { grid-column: 5; }
  .measure__panel--tiers .tierfig { grid-column: auto; grid-row: 1; }
  /* one figure across three channels, not the same number printed three times */
  .measure__panel--tiers .tierfig--span { grid-column: 3 / -1; }
}

@media (min-width: 1024px) {
  /* five channels want the wider of the two tracks; the five-row add-on panel
     beside it does not */
  .measure__panels--tiers { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}