/* Pricing — ledger table on the survey grid, 9/3 split, survey panel overlaps out. */

/* No background of its own: an opaque section box paints over .grid-paper::before
   and the survey grid disappears in exactly the section that needs it. */
.pricing {
  padding-block: var(--section-gap);
  padding-bottom: calc(var(--section-gap) + var(--space-4xl));
}

.pricing__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-sm), minmax(0, 1fr));
  gap: var(--grid-gap);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.pricing__head { grid-column: 1 / -1; }

.pricing__title { max-width: var(--measure-h2); }

.pricing__lead {
  margin-top: var(--space-md);
  max-width: var(--measure-lead);
  font-size: var(--text-lead);
  color: var(--text-secondary);
}

.ledger {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: var(--space-2xl);
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-data);
  font-size: var(--text-data);
  text-align: left;
}

/* Below 640px a five-column price table cannot fit: the ranges are unbreakable
   strings, so the table pushed the document 40px wider than the viewport. The rows
   become stacked records instead, each cell labelled from its column header. */
@media (max-width: 639px) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ledger,
  .ledger tbody,
  .ledger tr,
  .ledger td { display: block; width: 100%; }

  .ledger tbody tr {
    padding: var(--space-md) 0;
    border-bottom: var(--border-hairline);
  }

  /* Two columns, label left and figure right, so a seven-row price list is a screen
     and a half rather than four and a half. The service name spans both. */
  .ledger td {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-md);
    padding: var(--space-2xs) 0;
    border: 0;
  }

  .ledger td[data-label]::before {
    content: attr(data-label);
    font-size: var(--text-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .ledger td[data-label="Service"] {
    display: block;
    margin-bottom: var(--space-xs);
    font-family: var(--font-display);
    font-stretch: var(--font-stretch-display);
    font-size: var(--text-h4);
  }

  .ledger td[data-label="Service"]::before { content: none; }

  /* the index cell carries no label and no value on mobile */
  .ledger .ledger__idx { display: none; }
}

.ledger th {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-datum);
  font-size: var(--text-label);
  font-weight: var(--weight-data-strong);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ledger td {
  padding: var(--space-md) var(--space-sm);
  border-bottom: var(--border-hairline);
  vertical-align: top;
}

.ledger tbody tr td:first-child {
  position: relative;
  border-left: var(--border-width-rule) solid transparent;
}

.ledger tbody tr td:first-child::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 calc(-1 * var(--border-width-rule));
  width: var(--border-width-rule);
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-fast) var(--ease-exit);
}

.ledger tbody tr:hover td { background: var(--accent-wash); }

.ledger tbody tr:hover td:first-child::before {
  transform: scaleY(1);
  transition: transform var(--dur-tick) var(--ease-slide);
}

.ledger__idx { color: var(--text-accent); width: 3ch; }

.ledger td a {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-size: var(--text-body);
  text-decoration: none;
}

.ledger td a:hover { color: var(--text-accent); }

.survey {
  container-type: inline-size;
  grid-column: 1 / -1;
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.survey__num {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-display);
  font-size: var(--text-display);
  font-size: min(var(--text-numeral), 28cqi);
  line-height: var(--lh-numeral);
  letter-spacing: var(--track-numeral);
  color: var(--text-accent-display);
}

.survey__title { margin-top: var(--space-md); }

.survey__body { margin-top: var(--space-md); color: var(--text-secondary); }

.survey__eu {
  margin-top: var(--space-sm);
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--text-muted);
}

.survey .btn { margin-top: var(--space-lg); }

.pricing__materials {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--space-2xl);
}

.pricing__materials li {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}

/* Under the swatch, not over it. At three-up on a phone the plate is 110px wide, the tag
   wrapped to two lines, and a label that covers the material it names is not a label. */
.pricing__materials .plate__label-tag {
  margin-right: 0;
}

@media (min-width: 900px) {
  .pricing__inner { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }

  .pricing__head { grid-column: 1 / 9; }

  .ledger { grid-column: 1 / 10; }

  .pricing__materials {
    grid-column: 10 / -1;
    grid-template-columns: minmax(0, 1fr);
    grid-row: 2 / 4;
    margin-top: var(--space-2xl);
    align-content: start;
  }

  .survey {
    grid-column: 1 / 6;
    margin-bottom: calc(-1 * var(--space-4xl) - var(--space-xl));
    position: relative;
    z-index: var(--z-raised);
  }
}