@layer pages {
  .tool {
    overflow-wrap: anywhere;

    & .workbench {
      isolation: isolate;
      padding-block: var(--space-20);

      & > .notes {
        margin-block-end: 0;
      }

      & h2 {
        margin: 0 0 var(--space-20);
        font-size: var(--text-h3);
        line-height: var(--leading-h3);
      }

      & h3 {
        margin-block: var(--space-20) var(--space-8);
        font: inherit;
        font-weight: var(--weight-subheading);
      }

      & pre {
        max-inline-size: 100%;
        margin: 0;
        padding: 0;
        overflow: auto;
        border-radius: 0;
        background: transparent;
        box-shadow: none;

        & code {
          padding-inline: 0;
          white-space: pre-wrap;
          overflow-wrap: anywhere;
        }
      }
    }

    & .columns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));

      @media (max-width: 900px) {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    & :is(.params, .result) {
      min-inline-size: 0;
      padding-block: var(--space-20);
    }

    & .params {
      padding-inline-end: var(--space-48);
      border-inline-end: 1px dotted var(--color-page);

      @media (max-width: 900px) {
        padding-inline-end: 0;
        border-inline-end: 0;
        border-block-end: 1px dotted var(--color-line-soft);
      }
    }

    & .result {
      padding-inline-start: var(--space-48);

      @media (max-width: 900px) {
        padding-inline-start: 0;
      }
    }

    & .heading {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-4) var(--space-16);
      margin-block-end: var(--space-16);

      & > h2 {
        margin: 0;
      }
    }

    & fieldset {
      min-inline-size: 0;
      margin: 0;
      padding: 0;
      border: 0;

      & + fieldset {
        margin-block-start: var(--space-24);
      }
    }

    & legend {
      margin-block-end: var(--space-12);
      font-weight: var(--weight-subheading);
    }

    & .field {
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr);
      align-items: center;
      gap: 0 var(--space-4);
      margin-block-end: var(--space-8);

      & > :where(:not(label)) {
        grid-column: 2;
      }

      &.stacked {
        grid-template-columns: minmax(0, 1fr);

        & > * {
          grid-column: 1;
        }

        & > label {
          margin-block-end: var(--space-4);
        }
      }

      @media (max-width: 600px) {
        grid-template-columns: minmax(0, 1fr);

        & > * {
          grid-column: 1;
        }

        & > label {
          margin-block-end: var(--space-4);
        }
      }
    }

    & label {
      min-inline-size: 0;
    }

    &
      :where(
        input:not([type='checkbox'], [type='radio'], [type='file'], [type='color']),
        select,
        textarea
      ) {
      inline-size: 100%;
      min-inline-size: 0;
    }

    & textarea {
      display: block;
      resize: vertical;
    }

    & .description {
      margin-block: 2px var(--space-8);
    }

    & .field:focus-within > .description {
      color: var(--color-charcoal);
    }

    & .actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-8) var(--space-16);
      margin-block-start: var(--space-16);
    }

    & :is(.note, .status, .error, .placeholder):empty {
      display: none;
    }

    & :is(.note, .status, .error) {
      margin-block: var(--space-8);
      font-size: var(--text-small);
      line-height: var(--leading-small);
    }

    & :is(.note, .status) {
      color: var(--color-muted);
    }

    & .error {
      color: var(--color-danger);
    }

    & .number {
      font: 600 3rem/1.15 var(--font-text);
      font-variant-numeric: tabular-nums;

      @media (max-width: 600px) {
        font-size: 2.5rem;
      }
    }

    & .placeholder,
    & pre[data-placeholder]:has(> code:empty)::after {
      margin-block: 0;
      padding-block: var(--space-40);
      color: var(--color-muted);
      font: 400 var(--text-lead) / var(--leading-lead) var(--font-text);
    }

    & pre[data-placeholder]:has(> code:empty)::after {
      content: attr(data-placeholder);
      display: block;
    }
  }

  .action {
    padding: 1px 2px;
    border: 0;
    border-block-end: 1px dotted var(--color-charcoal);
    background: transparent;
    color: var(--color-charcoal);
    font: 400 var(--text-small) / var(--leading-small) var(--font-text);
    cursor: pointer;

    &:not(:disabled):is(:hover, :active) {
      border-block-end-color: transparent;
      border-radius: var(--radius-inline);
    }

    &:not(:disabled):hover {
      background-color: var(--color-cyan-soft);
    }

    &:not(:disabled):active {
      background-color: var(--color-cyan-pressed);
      color: var(--color-ink);
    }

    &:disabled {
      border-block-end-color: transparent;
      color: var(--color-muted);
    }
  }

  .faq {
    & dl {
      column-count: 3;
      column-gap: var(--space-64);
      font-size: 0.9em;

      @media (max-width: 900px) {
        column-count: 2;
      }

      @media (max-width: 600px) {
        column-count: 1;
      }
    }

    & dt {
      font-size: 1.1em;
    }

    & dl > div {
      break-inside: avoid;
    }

    & dd {
      margin-block: var(--space-4) var(--space-24);
      margin-inline: 0;
      padding: 0;
    }

    & code {
      font-size: 0.95em;
      white-space: normal;
    }
  }
}