@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-start: var(--space-20);
    }

    & :is(.params, .result, .wide)::after {
      content: '';
      display: block;
      margin-block-start: var(--space-24);
    }

    & .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);

      &:has(> h2) {
        margin-block-end: var(--space-20);
      }

      & > :is(h2, h3) {
        margin: 0;
      }

      & > .action {
        margin-block-end: calc(-1 * var(--space-4));
      }
    }

    & 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;
    }

    & .mono {
      font: var(--text-code) / var(--leading-code) var(--font-mono);

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

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

    & .description + .error {
      margin-block-start: calc(-1 * var(--space-4));
    }

    & .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);

      &:not(:has(> :not([hidden]))) {
        display: none;
      }
    }

    & :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);
    }

    & .warnings {
      padding-inline-start: var(--space-20);
    }

    & [data-stale] {
      opacity: 0.5;

      @media (prefers-reduced-motion: no-preference) {
        transition: opacity var(--transition-state);
      }
    }

    & .pairs {
      --term: 8rem;

      margin: 0;

      & > div {
        display: grid;
        grid-template-columns: var(--term) minmax(0, 1fr);
        column-gap: var(--space-16);
        padding-block: var(--space-4);
        border-block-end: 1px dotted var(--color-line-soft);

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

      & dt {
        color: var(--color-muted);
        font-size: var(--text-small);
        line-height: var(--leading-ui);
      }

      & dd {
        margin: 0;
        overflow-wrap: anywhere;
      }

      & code {
        padding: 0;
        background: transparent;
      }
    }

    & .copy {
      max-inline-size: 100%;
      margin-inline: -3px;
      padding: 1px 3px;
      border: 0;
      border-radius: var(--radius-inline);
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: start;
      overflow-wrap: anywhere;
      -webkit-user-select: text;
      user-select: text;
      cursor: copy;

      @media (hover: hover) {
        &:hover {
          background-color: var(--color-cyan-soft);
        }
      }

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

      &[data-copied]::after {
        content: 'скопировано';
        overflow-wrap: normal;
        white-space: nowrap;
        margin-inline-start: var(--space-8);
        color: var(--color-muted);
        font: var(--text-small) / var(--leading-small) var(--font-text);
      }
    }

    & .label[data-label] {
      padding-inline: var(--space-4);
      border: 1px dotted var(--color-line);
      border-radius: var(--radius-inline);
      color: var(--color-muted);
      font: var(--weight-subheading) var(--text-micro) / 1 var(--font-text);
      white-space: nowrap;
      vertical-align: 0.1em;
      unicode-bidi: isolate;

      &::before {
        content: attr(data-label);
      }
    }

    & .manual {
      &:has(.note:empty) {
        display: none;
      }

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

    & .wide {
      padding-block-start: var(--space-20);
      border-block-start: 1px dotted var(--color-line-soft);
    }

    & .more {
      margin-block: var(--space-16) var(--space-8);

      & > summary {
        inline-size: fit-content;
        margin-block-end: var(--space-8);
        color: var(--color-charcoal);
        font-size: var(--text-small);
        line-height: var(--leading-small);
        cursor: pointer;

        @media (hover: hover) {
          &:hover {
            color: var(--color-ink);
          }
        }
      }
    }

    & .switch {
      display: inline-flex;
      margin-block-end: var(--space-20);
      padding: 2px;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-control);
      background-color: var(--color-page);
      box-shadow: var(--shadow-well);

      & > legend {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      & label {
        padding: var(--space-4) var(--space-12);
        border-radius: var(--radius-inline);
        color: var(--color-charcoal);
        cursor: pointer;

        @media (hover: hover) {
          &:hover {
            background-color: var(--color-cyan-hover);
          }
        }

        &:has(:checked) {
          background-color: var(--color-paper);
          box-shadow: var(--shadow-raised);
          color: var(--color-ink);
        }

        &:has(:focus-visible) {
          outline: 2px solid var(--focus-color);
          outline-offset: 1px;
        }
      }

      & input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }
    }

    & .combo {
      position: relative;
      min-inline-size: 0;

      & > .options {
        position: absolute;
        z-index: 1;
        inset-block-start: 100%;
        inset-inline: 0;
        max-block-size: 20rem;
        margin: var(--space-4) 0 0;
        padding: var(--space-4);
        overflow-y: auto;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-control);
        background-color: var(--color-paper);
        box-shadow: var(--shadow-raised);
        color: var(--color-charcoal);
        list-style: none;
      }

      & li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0 var(--space-8);
        margin: 0;
        padding: var(--space-4) var(--space-8);
        border-radius: var(--radius-inline);
        cursor: pointer;

        &[data-current] {
          background-color: var(--color-cyan-soft);
        }

        &[aria-selected='true'] {
          background-color: var(--color-cyan-hover);
        }

        @media (hover: hover) {
          &:hover {
            background-color: var(--color-cyan-hover);
          }
        }
      }

      & li > span {
        color: var(--color-muted);
      }
    }

    & .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) {
      & > code {
        display: none;
      }

      &::after {
        content: attr(data-placeholder);
        display: block;
      }
    }
  }

  .faq {
    padding-block-end: var(--space-48);

    & > :last-child,
    & dl > div:last-child > dd {
      margin-block-end: 0;
    }

    & 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;
    }
  }
}