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

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

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

      &:has(> [data-panel][inert]) {
        cursor: progress;
      }

      & [data-panel] {
        & > * {
          @media (prefers-reduced-motion: no-preference) {
            transition: opacity var(--transition-state);
          }
        }

        &[inert] {
          background-image: linear-gradient(
            100deg,
            transparent 35%,
            var(--color-line-soft) 50%,
            transparent 65%
          );
          background-size: 300% 100%;
          background-position: 100% 0;

          & > * {
            opacity: 0.5;
          }

          @media (prefers-reduced-motion: no-preference) {
            animation: loading 1.6s ease-in-out infinite;
          }
        }
      }

      @media (scripting: none) {
        & [data-panel] {
          display: none;
        }
      }

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

      & > .copy-block {
        align-self: center;
        margin-block: calc(-1 * var(--space-4));
        margin-inline-start: calc(-1 * var(--space-8));
      }
    }

    & [data-drop]:not(.workbench) :is(textarea, [contenteditable]) {
      outline: 2px dashed var(--color-cyan);
      outline-offset: 2px;
    }

    & .retry {
      margin-block-start: var(--space-8);
    }

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

      &::after {
        content: '';
        display: inline-block;
        inline-size: 1em;
        block-size: 1em;
        margin-inline-start: var(--space-4);
        vertical-align: -0.125em;
        background-color: var(--color-muted);
        mask: var(--icon-copy) center / contain no-repeat;
        visibility: hidden;
      }

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

          &::after {
            visibility: visible;
          }
        }
      }

      &:focus-visible::after {
        visibility: visible;
      }

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

      &[data-copied]::after {
        background-color: var(--color-green-deep);
        mask-image: var(--icon-copied);
        visibility: visible;
      }
    }

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

    & .changes {
      & :is(ins, del) {
        border-radius: var(--radius-inline);
        color: var(--color-ink);
      }

      & ins {
        background: var(--syntax-addition);
        text-decoration: underline 1px var(--color-green-deep);
        text-underline-offset: 0.2em;

        &::before {
          content: '' / 'добавлено: ';
        }

        &::after {
          content: '' / ' конец добавления';
        }
      }

      & del {
        background: var(--syntax-deletion);
        text-decoration: line-through 1px var(--color-danger);

        &::before {
          content: '' / 'удалено: ';
        }

        &::after {
          content: '' / ' конец удаления';
        }
      }

      & .space {
        color: var(--color-muted);
      }

      @media (forced-colors: active) {
        & :is(ins, del) {
          outline: 1px solid Highlight;
        }
      }
    }

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

  @keyframes loading {
    to {
      background-position: 0 0;
    }
  }
}