@layer components {
  .callout {
    --callout-fill: var(--pw-primary-wash);
    --callout-line: var(--pw-primary-line);
    --callout-mark: var(--pw-primary-soft);
    --callout-link: var(--pw-primary-soft);

    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.35rem;
    border: 1px solid var(--callout-line);
    border-radius: var(--pw-r-md);
    background: var(--callout-fill);

    & svg { width: 1.0625rem; height: 1.0625rem; flex: none; margin-top: .1875rem; fill: none; stroke: var(--callout-mark); stroke-width: 1.5; stroke-linecap: round; }
    & p { max-width: none; margin: 0; color: var(--pw-fg-subtle); font-size: var(--pw-fs-sm); font-weight: 300; line-height: 1.65; }
    & a { color: var(--callout-link); &:hover { color: var(--pw-fg-strong); } }
    &.callout--draft {
      --callout-fill: var(--pw-secondary-fill);
      --callout-line: var(--pw-secondary-ring);
      --callout-mark: var(--pw-secondary);
      --callout-link: var(--pw-secondary-soft);
    }
  }

  .doc-head { margin-bottom: 2.5rem; }

  .doc-head h1 { overflow-wrap: anywhere; }
  .doc-head--module h1 {
    font-size: clamp(3.5rem, 7vw, 5.25rem);
    letter-spacing: var(--pw-track-tight);
    line-height: .98;
  }
  .doc-head--module .lead { max-inline-size: 42rem; }
  .doc-body {

    max-inline-size: none;
    & p { max-width: none; }


    & h2 { font-size: var(--pw-fs-h2); margin-block: clamp(2.75rem, 6vw, 3.75rem) clamp(1rem, 2.5vw, 1.75rem); }
    & h3 { font-size: var(--pw-fs-lg); margin-block: 2rem .75rem; }
    & p, & li { color: var(--pw-fg-body); line-height: 1.7; }
    & p, & ul, & ol, & .table-scroll { margin-block: 1rem; }

    & ul, & ol { padding-inline-start: 1.25rem; }
    & ul li { list-style: disc; }
    & ol li { list-style: decimal; }
    & li { margin-block: .35rem; }
    & a { color: var(--pw-primary-soft); text-decoration: underline; text-underline-offset: .2em; }
    & :not(pre) > code {
      font-family: var(--pw-font-mono);
      font-size: .9em;
      padding: .12em .35em;
      border-radius: .3rem;
      background: color-mix(in oklch, var(--pw-primary) 12%, transparent);
      color: var(--pw-primary-muted);
    }

    & table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: var(--pw-fs-sm); margin-block: 0; }
    & th, & td { text-align: start; padding: .55rem .75rem; border-bottom: 1px solid var(--pw-border-soft); }
    & th { color: var(--pw-fg-faint); font-weight: 500; }
    & blockquote { margin-block: 1.25rem; padding-inline-start: 1rem; color: var(--pw-fg-meta); }
  }


  .table-scroll {
    overflow-x: auto;

    overscroll-behavior-x: contain;
  }
  .table-scroll:focus-visible {
    outline: 0.125rem solid var(--pw-primary-soft);
    outline-offset: 0.1875rem;
    border-radius: var(--pw-r-md);
  }


  .doc-body :is(h2, h3, h4) { position: relative; }
  .doc-body h2:has(> .doc-anchor#go-next) {
    margin-top: clamp(4rem, 8vw, 6rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--pw-border);
  }

  .doc-anchor {
    position: absolute;
    inset-block-start: .08em;
    inset-inline-end: calc(100% + .45rem);
    color: var(--pw-fg-faint);
    opacity: 0;
    text-decoration: none;
    transition: color .2s, opacity .2s;
  }
  :is(h2, h3, h4):hover > .doc-anchor,
  .doc-anchor:focus-visible {
    color: var(--pw-primary-soft);
    opacity: 1;
  }


  .doc-code {
    margin-block: 1.25rem;
    border-radius: .6rem;
    background: var(--pw-code-bg);
    overflow: hidden;
  }
  .doc-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .75rem;

    background: var(--pw-code-bar);
  }
  .doc-code__lang {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    text-transform: uppercase;
    letter-spacing: var(--pw-track-eyebrow);
    color: var(--pw-fg-faint);
  }
  .doc-code__copy {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    color: var(--pw-fg-meta);
    transition: color .2s;
    &:hover { color: var(--pw-fg-strong); }
    &.is-copied { color: var(--pw-success); }
  }
  .doc-code pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    background: none;
    border: 0;
  }
  .doc-code code {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-sm);
    color: var(--pw-code-text);
  }


  .alto-keyword  { color: var(--pw-code-kw); }
  .alto-function { color: var(--pw-code-fn); }
  .alto-type     { color: var(--pw-code-fn); }
  .alto-string   { color: var(--pw-code-str); }
  .alto-comment  { color: var(--pw-code-com); }
  .alto-variable { color: var(--pw-code-varname); }
  .alto-constant { color: var(--pw-code-var); }
  .alto-number   { color: var(--pw-code-var); }

  .alto-operator,
  .alto-punctuation { color: color-mix(in oklch, var(--pw-code-text) 72%, transparent); }


  .doc-children { margin-block-start: 3.5rem; container-type: inline-size; }
  .docs-main > .doc-children:not(.doc-children--lanes) {
    margin-block: clamp(1.25rem, 3vw, 2rem) clamp(2.25rem, 4vw, 3.25rem);
  }
  .doc-children__title {
    display: block;
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-fg-faint);
    margin-bottom: 1rem;
  }
  .doc-children--lanes .doc-children__title {
    font-family: var(--pw-font-sans);
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    font-weight: 400;
    letter-spacing: var(--pw-track-snug);
    line-height: 1.18;
    text-transform: none;
    color: var(--pw-fg-strong);
    margin: 0 0 1rem;
  }
  .doc-children__grid { gap: .75rem; }
  .doc-child-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
    min-block-size: auto;
    padding: 1rem;
  }
  .doc-child-card__title {
    transition: color .18s ease;
  }
  .doc-child-card:hover .editorial-icon {
    translate: .125rem 0;
  }
  .doc-child-card:hover .doc-child-card__title {
    color: var(--pw-primary-soft);
  }
  .doc-child-card__body {
    display: grid;
    gap: .35rem;
    min-inline-size: 0;
  }
  .doc-child-card__title {
    color: var(--pw-fg-strong);
    font-size: var(--pw-fs-md);
    font-weight: 400;
    line-height: 1.25;
  }
  .doc-child-card__desc {
    color: var(--pw-fg-meta);
    font-size: var(--pw-fs-sm);
    font-weight: 300;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .example-list {
    display: grid;
    gap: .5rem;
    margin-block-start: 1.25rem;
  }
  @container (min-width: 44rem) {
    .example-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .example-list--single { grid-template-columns: minmax(0, 1fr); }
  }
  .example-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .875rem;
    align-items: center;
    min-block-size: 4.75rem;
    padding: .85rem 1rem;
    border-radius: var(--pw-r-md);
    background: var(--pw-card-flat);
    color: inherit;
    transition: background-color .18s var(--pw-ease-scene), transform .18s var(--pw-ease-scene);

    &:hover {
      background: color-mix(in oklch, var(--pw-card-flat) 88%, var(--pw-primary));
      transform: translateY(-.0625rem);
    }
  }
  .example-row__copy {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    gap: .25rem;
  }
  .example-row__title {
    color: var(--pw-primary-muted);
    font-size: var(--pw-fs-md);
    font-weight: 500;
    line-height: 1.2;
  }
  .example-row__desc {
    color: var(--pw-fg-meta);
    font-size: var(--pw-fs-sm);
    font-weight: 300;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .example-row__arrow {
    color: var(--pw-primary-soft);
    font-size: var(--pw-fs-md);
  }

  .recipe-family-card {
    gap: .75rem;
    min-block-size: 13rem;
  }
  .recipe-card__title {
    color: var(--pw-primary-muted);
    transition: color .2s;

    &:hover { color: var(--pw-primary-soft); }
  }
  .recipe-family-card__title {
    color: var(--pw-fg-strong);
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 450;
    line-height: 1.2;
    margin-block-end: .15rem;
  }
  .recipe-family-card__desc {
    color: var(--pw-fg-meta);
    font-size: var(--pw-fs-sm);
    font-weight: 300;
    line-height: 1.55;
  }
  .recipe-family-card__count {
    color: var(--pw-fg-faint);
    font-size: var(--pw-fs-2xs);
  }
  .recipe-family-card__links {
    display: grid;
    gap: .35rem;
    margin: .15rem 0 0;
    padding: 0;
    list-style: none;
  }
  .recipe-family-card__links li {
    display: flex;
    gap: .5rem;
    color: var(--pw-fg-meta);
    font-size: var(--pw-fs-sm);
    font-weight: 300;
    line-height: 1.4;

    &::before {
      content: "→";
      flex: none;
      color: var(--pw-primary-soft);
    }
  }
  .recipe-family-card__link {
    position: relative;
    z-index: 2;
    color: var(--pw-fg-subtle);

    &:hover { color: var(--pw-primary-soft); }
  }
}