@layer styles {
  /*
   * Prislista
   *
   * Name and price on one line joined by a dotted leader — the shape a price
   * list is read in. A description, when there is one, wraps to its own line
   * under the name rather than squeezing between the two.
   */
  /* A block heading is followed by a panel or a list as often as by a
     paragraph, and `.heading--2 + p` only covers the paragraph case. */
  .price-list__title,
  .calculator__title {
    margin-bottom: var(--space--small);
  }

  .price-list__intro {
    margin-bottom: var(--space);
  }

  .price-list__items {
    list-style: none;
    padding: 0;
  }

  /* No rule between rows: the dotted leader already ties each name to its
     price, and a second horizontal line per item turned three products into
     six lines of ruling. Rows are held apart by their own spacing instead. */
  .price-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    padding: 0.4rem 0;
  }

  .price-list__name {
    font-weight: 600;
  }

  /* Grows to fill whatever is left between the name and the price. The border
     sits low so the dots run along the baseline rather than through it. */
  .price-list__leader {
    flex: 1 1 2rem;
    min-width: 1.5rem;
    align-self: end;
    margin-bottom: 0.3em;
    border-bottom: 2px dotted var(--color-rule-strong);
  }

  .price-list__price {
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
  }

  /* The variants of one product: each its own name/leader/price line, indented
     under the product they belong to. */
  .price-list__variants {
    flex-basis: 100%;
    margin-top: 0.15rem;
    padding: 0 0 0 var(--space);
    list-style: none;
  }

  .price-list__variant {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
  }

  /* The 100% basis is what breaks the line, so the text is narrowed with
     padding rather than width — a narrower item fits back up beside the price
     on a short row. */
  .price-list__description {
    flex-basis: 100%;
    padding-right: 25%;
    margin-top: 0.2rem;
    font-size: var(--font-size--small);
    line-height: 1.5;
    opacity: var(--muted-opacity);
  }

  /* A badge rather than a title attribute: a title is unreachable on a touch
     screen, which is most of this site's traffic. The key under the list says
     what it means, and screen readers get the words inline instead. */
  .price-list__marker {
    display: inline-grid;
    place-items: center;
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    background: var(--color-wine);
    color: var(--color-surface);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: 0.1em;
  }

  .price-list__key,
  .price-list__footnote {
    margin-top: var(--space--small);
    font-size: var(--font-size--small);
    opacity: var(--muted-opacity);
  }

  /*
   * Priskalkylator
   *
   * The total in the markup is already correct for the smallest order, so
   * nothing here has to hide anything until a script arrives.
   */
  .calculator__intro {
    margin-bottom: var(--space);
  }

  /* What you change on one side, what it costs on the other — the shape
     accodeing.com's calculator uses. Stacked on a narrow screen, with the
     answer under the fields rather than beside them. The summary carries the
     border rather than the whole panel, so the answer is the thing set apart. */
  .calculator__panel {
    display: grid;
    gap: var(--space);
    align-items: start;
  }

  @media (min-width: 48em) {
    .calculator__panel {
      grid-template-columns: minmax(0, 1fr) 19rem;
      gap: var(--space--medium);
    }

    /* Mirrors .calculator__summary's padding and border. */
    .calculator__options {
      padding-top: calc(var(--space) + 1px);
    }
  }

  .calculator__summary {
    padding: var(--space);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius--large);
    background: var(--color-sand-tint);
  }

  /* Mobile first: the two fields stack, and sit side by side once there is
     room for both without either becoming a slot too narrow to read. */
  .calculator__fields {
    display: grid;
    gap: var(--space--small);
  }

  .calculator__field {
    display: grid;
    gap: 0.25rem;
  }

  @media (min-width: 30em) {
    .calculator__fields {
      grid-template-columns: 1fr 1fr;
      gap: var(--space);
    }

    /* Side by side, the two fields have to line up, and only one of them has a
       hint under its label. Sharing the parent's rows puts each part on the
       same line as its opposite number instead of letting the hint push one
       input down. Without subgrid they bottom-align, which at least keeps the
       inputs level. */
    .calculator__field {
      align-content: end;
    }

    @supports (grid-template-rows: subgrid) {
      .calculator__fields {
        grid-template-rows: auto auto auto;
      }

      .calculator__field {
        grid-row: span 3;
        grid-template-rows: subgrid;
        align-content: initial;
      }

      /* Named rather than left to source order: a subgrid's children fill its
         rows in sequence, so a field with no hint would put its input on the
         hint's line and sit a row above its neighbour. */
      .calculator__label {
        grid-row: 1;
      }

      .calculator__hint {
        grid-row: 2;
      }

      .calculator__input,
      .stepper {
        grid-row: 3;
      }
    }
  }

  .calculator__label {
    font-weight: 600;
  }

  .calculator__hint {
    font-size: var(--font-size--small);
    font-variant-numeric: lining-nums;
    opacity: var(--muted-opacity);
  }

  /*
   * Minus, value, plus. Built by the script around the number input, so this
   * only ever styles something that already works — the bare input is what a
   * visitor without JavaScript gets, and it keeps its own spinner.
   *
   * Shared with the cake fields inside the enquiry form, which is the same
   * custom element, so it is not named for either block.
   */
  .stepper {
    display: inline-flex;
    align-items: stretch;
    width: fit-content;
    overflow: hidden;
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
  }

  .stepper:focus-within {
    border-color: var(--color-wine);
    box-shadow: 0 0 0 1px var(--color-wine);
  }

  .stepper__button {
    flex: 0 0 auto;
    width: 2.5rem;
    border: 0;
    background: transparent;
    color: var(--color-wine);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  .stepper__button:hover {
    background: var(--color-sand-pale);
  }

  .stepper__button:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: -2px;
  }

  /* Inside the stepper the frame is on the wrapper, and the native spinner
     would sit between the value and the plus button. */
  .stepper .calculator__input,
  .stepper .form__input {
    max-width: 3.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    appearance: textfield;
  }

  .stepper .calculator__input::-webkit-inner-spin-button,
  .stepper .calculator__input::-webkit-outer-spin-button,
  .stepper .form__input::-webkit-inner-spin-button,
  .stepper .form__input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
  }

  .stepper .calculator__input:focus-visible,
  .stepper .form__input:focus-visible {
    outline: 0;
  }

  .calculator__input {
    /* Form controls do not inherit the page font; without this the numbers
       render in the browser's default, which is not the rest of the page. */
    font: inherit;
    font-variant-numeric: lining-nums tabular-nums;
    width: 100%;
    max-width: 7rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
  }

  .calculator__input:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 1px;
  }

  .calculator__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.75rem;
  }

  .calculator__total-label {
    flex-basis: 100%;
    font-weight: 600;
  }

  .calculator__total-amount {
    font-family: var(--font--heading);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
  }

  .calculator__formula,
  .calculator__disclaimer {
    margin-top: 0.35rem;
    font-size: var(--font-size--small);
    opacity: var(--muted-opacity);
  }

  .calculator__enquiry {
    display: block;
    margin-top: var(--space);
  }
}