@layer base, layout, components, pages;

@layer layout {
  .docs-main {
    padding-block-start: var(--size-6);
  }

  .page-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--size-3);
  }

  .page-content {
    min-inline-size: min(100%, calc(var(--viewport-max) / 3));
    max-inline-size: calc(var(--viewport-max) / 2);
    flex: 999 1 calc(var(--viewport-max) / 3);
  }

  .page-rail {
    min-inline-size: min(100%, calc(var(--viewport-max) / 8));
    flex: 1 1 calc(var(--viewport-max) / 8);
  }
}

@layer components {
  .panel__header {
    padding: var(--size-1) var(--size-2);
    border-block-end: var(--border-width-0) solid var(--neutral-4);
  }

  .panel__body {
    padding: var(--size-3);
  }

  .panel__title {
    color: var(--neutral-8);
    font-family: var(--font-mono);
    font-size: var(--font-size--2);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--font-letter-spacing-3);
    text-transform: uppercase;
  }

  .section-navigation ul {
    display: grid;
    gap: var(--size--1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .section-navigation a,
  .section-navigation a:visited {
    display: block;
    border-inline-start: var(--border-width-1) solid transparent;
    padding: var(--size--1) var(--size-0);
    color: var(--neutral-9);
    font-family: var(--font-mono);
    font-size: var(--font-size--1);
    text-decoration: none;
  }

  .section-navigation a:hover,
  .section-navigation a:focus-visible,
  .section-navigation a[aria-current="page"] {
    border-inline-start-color: var(--primary-7);
    background: var(--neutral-3);
    color: var(--neutral-12);
  }

  .prose {
    color: var(--neutral-10);
  }

  .prose h1,
  .prose h2 {
    color: var(--neutral-12);
    font-family: var(--font-transitional);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--font-letter-spacing--2);
    text-wrap: balance;
  }

  .prose h1 {
    font-size: var(--font-size-6);
    line-height: var(--font-size-6);
  }

  .prose h2 {
    margin-block-start: var(--size-7);
    padding-block-start: var(--size-4);
    border-block-start: var(--border-width-0) solid var(--neutral-4);
    font-size: var(--font-size-4);
    line-height: var(--font-size-4);
    scroll-margin-block-start: var(--size-10);
  }

  .prose h3 {
    margin-block-start: var(--size-4);
    color: var(--neutral-12);
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-semi-bold);
    letter-spacing: var(--font-letter-spacing-1);
  }

  .prose :where(p, ul, ol, blockquote, pre, table, details, form) {
    margin-block-start: var(--size-3);
  }

  .prose :where(li + li) {
    margin-block-start: var(--size-0);
  }

  .prose :not(pre) > code {
    border: var(--border-width-0) solid var(--neutral-4);
    background: var(--neutral-3);
    padding-inline: var(--size--2);
    color: var(--neutral-12);
    font-size: var(--font-size--1);
  }

  .prose pre {
    max-inline-size: 100%;
    overflow-x: auto;
    border: var(--border-width-0) solid var(--neutral-4);
    background: var(--neutral-1);
    padding: var(--size-3);
    color: var(--neutral-12);
    font-size: var(--font-size--1);
    line-height: var(--font-line-height-0);
  }

  .prose blockquote {
    border-inline-start: var(--border-width-2) solid var(--primary-7);
    background: var(--neutral-3);
    padding: var(--size-2) var(--size-3);
    color: var(--neutral-9);
    font-style: italic;
  }

  .prose table {
    inline-size: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--font-size--1);
  }

  .prose :where(th, td) {
    border: var(--border-width-0) solid var(--neutral-4);
    padding: var(--size-1);
    text-align: start;
    vertical-align: top;
  }

  .prose caption {
    padding-block-end: var(--size-0);
    color: var(--neutral-9);
    text-align: start;
  }

  .prose th {
    background: var(--neutral-3);
    color: var(--neutral-12);
    font-weight: var(--font-weight-semi-bold);
  }

  .prose details {
    border: var(--border-width-0) solid var(--neutral-4);
    background: var(--neutral-3);
  }

  .prose summary {
    padding: var(--size-2);
    color: var(--neutral-12);
    font-family: var(--font-mono);
    cursor: pointer;
  }

  .prose details > :not(summary) {
    margin: 0;
    padding: 0 var(--size-2) var(--size-2);
  }

  .specimen-form {
    display: grid;
    gap: var(--size-2);
  }

  .form-field {
    display: grid;
    gap: var(--size-0);
  }

  .form-field span {
    color: var(--neutral-9);
    font-family: var(--font-mono);
    font-size: var(--font-size--1);
  }

  .text-control {
    inline-size: 100%;
    border: var(--border-width-0) solid var(--neutral-8);
    background: var(--neutral-1);
    padding: var(--size-1) var(--size-2);
    color: var(--neutral-12);
    font-family: var(--font-mono);
  }

  .text-control::placeholder {
    color: var(--neutral-8);
  }
}

@layer pages {
  .lead {
    color: var(--neutral-11);
    font-size: var(--font-size-1);
    line-height: var(--font-line-height-2);
  }

  .specimen-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, calc(var(--size-12) * 2)), 1fr)
    );
    gap: var(--size-2);
    margin-block-start: var(--size-3);
    padding: 0;
    list-style: none;
  }

  .specimen-swatch {
    display: grid;
    min-block-size: calc(var(--size-12) * 2);
    align-content: end;
    border: var(--border-width-0) solid var(--neutral-4);
    padding: var(--size-2);
    color: var(--primary-7-on);
    font-family: var(--font-mono);
    font-size: var(--font-size--2);
  }

  .specimen-swatch:nth-child(1) {
    background: var(--primary-7);
  }

  .specimen-swatch:nth-child(2) {
    background: var(--secondary-7);
    color: var(--secondary-7-on);
  }

  .specimen-swatch:nth-child(3) {
    background: var(--tertiary-7);
    color: var(--tertiary-7-on);
  }
}