@layer components {
  /* The first pages of a presentation: a checklist of services, then a row for each checked one
     with its quantity and unit */
  .measure {
    align-content: center;
    display: grid;
    gap: var(--block-space-double);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 50ch;
    text-align: start;
  }

  .measure__services {
    border: 0;
    margin: 0;
    min-inline-size: 0;
    padding: 0;

    legend {
      margin-block-end: var(--block-space-half);
      padding: 0;
    }
  }

  /* The whole row is the label, so it's easy to tap */
  .measure__choice {
    align-items: center;
    border-block-start: var(--border);
    cursor: pointer;
    display: flex;
    gap: var(--inline-space-double);
    padding-block: var(--block-space-half);

    input {
      block-size: 1.25em;
      inline-size: 1.25em;
    }
  }

  /* Rows share columns, so the quantities line up whether or not a row has a measuring tool */
  .measure__quantities {
    column-gap: var(--inline-space-double);
    display: grid;
    grid-template-columns: 1fr 10ch minmax(6ch, auto) auto;
  }

  .measure__service {
    align-items: center;
    border-block-start: var(--border);
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding-block: var(--block-space-half);
  }

  /* The last page: one card per tier, side by side where they fit */
  .tier-options {
    align-content: center;
    display: grid;
    gap: var(--block-space-double);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 140ch;
    text-align: start;
  }

  .tier-options__list {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .tier-option {
    border: var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: var(--block-space);

    p {
      margin: 0;
    }
  }

  .tier-option--chosen {
    border-color: var(--color-link);
    box-shadow: 0 0 0 1px var(--color-link);
  }

  .tier-option__name {
    font-size: var(--text-large);
  }

  .tier-option__price {
    font-size: var(--text-x-large);
    font-weight: 700;
  }

  /* What the tier includes, by name only; quantities and costs belong on the estimate itself */
  .tier-option__items {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      border-block-start: var(--border);
      padding-block: var(--block-space-half);
    }
  }

  /* Pinned to the bottom, so the buttons line up across cards of different lengths */
  .tier-option__choice {
    margin-block-start: auto;
    text-align: center;
  }

  /* The estimate as it prints: white paper and black ink whatever the branding or theme, with the
     ink scale mixed the way presentations mix theirs. Print strips what's around it. */
  .estimate {
    --color-canvas: var(--color-white);
    --color-ink: var(--color-black);
    --color-ink-dark: color-mix(in oklch, var(--color-ink) 60%, var(--color-canvas));
    --color-ink-lighter: color-mix(in oklch, var(--color-ink) 11%, var(--color-canvas));
    --border: 1px solid var(--color-ink-lighter);

    align-self: start;
    background-color: var(--color-canvas);
    box-shadow: var(--shadow);
    color: var(--color-ink);
    color-scheme: light;
    display: grid;
    gap: var(--block-space-double);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 8.5in;
    overflow-wrap: anywhere;
    padding: var(--block-space);
    text-align: start;

    p {
      margin: 0;
    }

    @media (min-width: 640px) {
      padding: 0.5in;
    }
  }

  .estimate__header {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
    justify-content: space-between;
  }

  /* Full size for print, kept to a header's height and width. A fixed width, since a percentage
     would let the logo's full size push the title onto its own line. */
  .estimate__logo {
    display: block;
    margin-block-end: var(--block-space-half);
    max-block-size: 5rem;
    max-inline-size: 18rem;
  }

  /* Keeps to the right, including when a narrow screen wraps it under the logo */
  .estimate__heading {
    margin-inline-start: auto;
    text-align: end;
  }

  .estimate__title {
    font-size: var(--text-x-large);
    margin: 0;
  }

  .estimate__parties {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  .estimate__label {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 0 0 var(--block-space-half);
    text-transform: uppercase;
  }

  .estimate__tier {
    font-size: var(--text-large);
    margin: 0 0 var(--block-space-half);
  }

  .estimate__lines {
    border-collapse: collapse;
    inline-size: 100%;

    :is(th, td) {
      border-block-start: var(--border);
      font-weight: normal;
      padding-block: var(--block-space-half);
      text-align: start;
      vertical-align: top;
    }

    :is(th, td):last-child {
      padding-inline-start: var(--inline-space-double);
      text-align: end;
      white-space: nowrap;
    }

    thead th {
      border-block-start: none;
      color: var(--color-ink-dark);
      font-size: var(--text-x-small);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    tfoot :is(th, td) {
      border-block-start: 2px solid var(--color-ink);
      font-size: var(--text-medium);
      font-weight: 700;
    }
  }

  /* Such as "8 × $200.00 per hour", under the item's name */
  .estimate__rate {
    color: var(--color-ink-dark);
    display: block;
    font-size: var(--text-small);
  }
}