@layer pages {
  .url {
    & #url-source {
      word-break: break-all;
    }

    & .params .heading:has(> h3) {
      margin-block: var(--space-24) var(--space-8);

      & > h3 {
        margin: 0;
      }
    }

    & .rows {
      margin: 0;
      padding: 0;
      list-style: none;

      &:empty {
        display: none;
      }

      & li {
        display: grid;
        grid-template-columns: minmax(0, 2fr) auto minmax(0, 3fr) auto;
        align-items: center;
        gap: var(--space-4);
        margin-block-end: var(--space-8);

        & > .action {
          grid-column: 3;
          justify-self: start;
        }

        @media (max-width: 600px) {
          grid-template-columns: minmax(0, 1fr) auto;
          margin-block-end: var(--space-16);

          & > [data-field='name'] {
            grid-column: 1 / -1;
          }

          & > span {
            display: none;
          }

          & > .action {
            grid-column: 1;
          }
        }
      }

      & span {
        color: var(--color-muted);
        font-family: var(--font-mono);
      }
    }

    & .knob {
      min-inline-size: 32px;
      min-block-size: 32px;
      padding: 0;
      border: 0;
      border-radius: var(--radius-control);
      background: transparent;
      color: var(--color-charcoal);
      font: inherit;
      cursor: pointer;

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

    & .pairs {
      & dd {
        font-family: var(--font-mono);
        font-size: var(--text-code);
      }

      & code {
        -webkit-user-select: all;
        user-select: all;
      }
    }

    & .coded {
      & > div {
        grid-template-columns: minmax(0, 1fr);
      }

      & dt {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-4) var(--space-16);
      }
    }

    & h2.coding {
      margin-block-start: var(--space-40);
    }
  }
}