:root {
  --main-width: 660px;
}

.recipe {
  display: grid;
  grid-template-columns:
    minmax(calc(min(4rem, 15vw) + 30px), max-content)
    minmax(min(4rem, 15vw), max-content)
    min(8rem, 25vw)
    1fr;
  gap: 8px 4px;
  text-wrap: balance;
  margin: 20px 0;

  &.mono {
    grid-template-columns:
      30px
      minmax(min(4rem, 15vw), max-content)
      min(8rem, 25vw)
      1fr;
  }

  .header,
  .step {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;

    /* &:first-child > .ingredient:first-child {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      overflow: hidden;
    }

    &:last-child > .ingredient:nth-last-child(2) {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      overflow: hidden;
    } */
  }

  .header {
    font-weight: 600;
    font-size: 0.8em;
    /* margin-bottom: -4px; */
  }

  .ingredient {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -2;
    gap: 4px;
    padding: 0 4px 0 0;
    background: var(--contrast-bg);
    min-height: 8px;

    input {
      width: 14px;
      margin: 0 8px 0 4px;
      vertical-align: baseline;
    }

    &:not(:has(> :nth-child(2)))::before {
      content: "";
      background: color-mix(in oklch, var(--contrast-bg), var(--base-bg));
    }

    & > :first-child {
      background: color-mix(in oklch, var(--contrast-bg), var(--base-bg));
      padding: 0 4px;

      &:not(:has(input)) {
        padding-left: 30px;
        max-width: 100%;
      }
    }

    & > :last-child {
      grid-column: -2 / -1;
      background: unset;
      padding: unset;
    }

    /* & > :first-child, & > :nth-child(2) {
      text-align: right;
    } */
  }

  &.mono .ingredient > :first-child {
    padding-right: 0;
  }

  .task {
    grid-column: -2 / -1;
  }

  p {
    margin: 0;

    & + p {
      margin-top: 8px;
    }
  }

  @media (width < 520px) {
    & {
      grid-template-columns:
        minmax(calc(min(5rem, 25vw) + 30px), max-content)
        minmax(min(5rem, 25vw), max-content)
        1fr;
    }

    &.mono {
      grid-template-columns:
        30px
        minmax(min(5rem, 25vw), max-content)
        1fr;
    }

    .ingredient,
    .task {
      grid-column: 1 / -1;
    }

    .task {
      padding-left: 30px;
    }

    &.mono .task {
      padding-left: 34px;
    }
  }

  @media print {
    .header,
    .step {
      border-bottom: 0.7px dashed var(--base-fg);
    }

    .ingredient {
      border-left: 0.7px dashed var(--base-fg);

      &,
      &::before,
      & > :first-child {
        background: unset !important;
        border-right: 0.7px dashed var(--base-fg);
      }
    }
  }
}

.small {
  font-size: 0.8em;
  font-stretch: 95%;
}