/* styles/sections/docs-content.css
 * Docs page layout, header, breadcrumbs, body blocks that the editorial prose does not
 * cover (callouts, images, quotes, rules), the "On this page" list and the docs index.
 * Ported from css/docs.css onto tokens. Type roles come from t-* classes in the markup;
 * lists, tables, code and links come from editorial.css and editorial-blocks.css. */
@layer sections {
  /* The main element is the size container: the contents column appears when the content box
     fits sidebar, a readable measure and the column (no extra viewport breakpoint). */
  .docs-main {
    container-type: inline-size;
    padding-block: var(--space-32) var(--space-64);
  }

  .docs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-24);
  }

  @media (min-width: 900px) {
    .docs-main {
      padding-block: var(--space-48) var(--space-96);
    }

    .docs-layout {
      grid-template-columns: 240px minmax(0, 1fr);
      column-gap: var(--space-48);
    }
  }

  @container (min-width: 1100px) {
    .docs-layout {
      grid-template-columns: 240px minmax(0, 1fr) 220px;
    }
  }

  @media (min-width: 1680px) {
    .docs-layout {
      grid-template-columns: 280px minmax(0, 1fr);
      column-gap: var(--space-80);
    }
  }

  @container (min-width: 1100px) {
    @media (min-width: 1680px) {
      .docs-layout {
        grid-template-columns: 280px minmax(0, 1fr) 260px;
      }
    }
  }

  /* .article brings the page gutter; the docs grid already sits inside .container. */
  .doc-content {
    min-width: 0;
    max-width: 720px;
    padding-inline: 0;
  }

  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-8);
    margin-bottom: var(--space-32);
    color: var(--ink-muted);
  }

  .breadcrumbs a {
    position: relative;
    color: var(--fern);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  /* 44px hit area around the 17px link; the visual size does not change. */
  .breadcrumbs a::before {
    content: "";
    position: absolute;
    inset: -14px -3px;
  }

  .breadcrumbs a:hover {
    background: var(--mist);
  }

  .breadcrumbs .separator {
    color: var(--ink-sep);
  }

  .doc-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin-bottom: var(--space-40);
    padding-bottom: var(--space-32);
    border-bottom: 1px solid var(--line);
  }

  .doc-header :where(h1, p) {
    margin: 0;
  }

  .doc-description {
    color: var(--ink-2);
  }

  /* Long unbroken strings (URLs, slash lists) wrap instead of widening the page. */
  .doc-body {
    overflow-wrap: break-word;
  }

  /* Flow rhythm for the markdown body. */
  .doc-body > * + * {
    margin-top: var(--space-20);
  }

  .doc-body > :is(h2, h3, h4) {
    margin-top: var(--space-40);
  }

  .doc-body > :is(h2, h3, h4) + * {
    margin-top: var(--space-16);
  }

  .doc-body h2 {
    padding-top: 0;
  }

  .doc-body h4 {
    margin-bottom: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    scroll-margin-top: calc(var(--nav-h) + var(--space-16));
  }

  .doc-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
  }

  .doc-body blockquote {
    margin-inline: 0;
    padding-inline-start: var(--space-16);
    border-inline-start: 2px solid var(--fern);
    color: var(--ink-2);
  }

  .doc-body hr {
    margin-block: var(--space-40);
    border: 0;
    border-top: 1px solid var(--line);
  }

  .doc-body .callout {
    padding: var(--space-16) var(--space-20);
    border-inline-start: 3px solid var(--ink-55);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
  }

  .doc-body .callout-tip {
    border-inline-start-color: var(--fern);
    background: var(--mist);
  }

  .doc-body .callout-warning {
    border-inline-start-color: var(--orange);
    background: var(--orange-wash);
  }

  /* Tables size to their content: code stays on one line, the table
     is at least as wide as its column, and when the words need more room the region scrolls
     with edge shadows that show only while more columns sit past an edge. */
  .doc-body table {
    width: auto;
    min-width: 100%;
    table-layout: auto;
  }

  .doc-body tr > :first-child {
    width: auto;
  }

  .doc-body :is(th, td) {
    padding-inline-end: var(--space-24);
    overflow-wrap: normal;
  }

  /* Table code never wraps (no break at hyphens or slashes); the region scrolls instead. */
  .doc-body table code {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .doc-body .table-scroll {
    max-width: 100%;
    background:
      linear-gradient(to right, var(--white) 30%, transparent) left / 40px 100% no-repeat local,
      linear-gradient(to left, var(--white) 30%, transparent) right / 40px 100% no-repeat local,
      linear-gradient(to right, var(--line), transparent) left / 12px 100% no-repeat scroll,
      linear-gradient(to left, var(--line), transparent) right / 12px 100% no-repeat scroll;
  }

  /* Bash flags, variables and assignments, which the editorial token theme leaves in ink.
     Orange ink is 6.45:1 on white. */
  .doc-body :is(.token.parameter, .token.variable, .token.assign-left, .token.environment) {
    color: var(--orange-ink);
  }

  /* On this page */
  .doc-toc {
    display: none;
  }

  @container (min-width: 1100px) {
    .doc-toc {
      position: sticky;
      top: calc(var(--chrome-nav-h) + var(--space-24));
      display: block;
      max-height: calc(100vh - var(--chrome-nav-h) - var(--space-48));
      overflow-y: auto;
      /* Scroll shadows: a rule appears at an edge only while more entries sit past it. */
      background:
        linear-gradient(var(--white) 30%, transparent) top / 100% 40px no-repeat local,
        linear-gradient(transparent, var(--white) 70%) bottom / 100% 40px no-repeat local,
        linear-gradient(var(--line), transparent) top / 100% 12px no-repeat scroll,
        linear-gradient(transparent, var(--line)) bottom / 100% 12px no-repeat scroll;
    }
  }

  .doc-toc h2 {
    margin: 0 0 var(--space-12);
    color: var(--ink-muted);
  }

  .doc-toc ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .doc-toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-8) var(--space-12);
    border-inline-start: 2px solid var(--line-2);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--dur-fast), color var(--dur-fast);
  }

  .doc-toc .toc-3 a {
    padding-inline-start: var(--space-24);
  }

  .doc-toc a:hover {
    background: var(--paper);
    color: var(--ink);
  }

  .doc-toc a[aria-current] {
    border-inline-start-color: var(--fern);
    color: var(--fern);
    font-weight: 600;
  }

  /* Docs index */
  .docs-index-main {
    padding-block: var(--space-48) var(--space-80);
  }

  .docs-index-hero {
    margin-bottom: var(--space-56);
    text-align: center;
  }

  .docs-index-hero h1 {
    margin: 0 0 var(--space-20);
  }

  .hero-description {
    max-width: 700px;
    margin: 0 auto var(--space-32);
    color: var(--ink-2);
  }

  .search-container {
    max-width: 600px;
    margin: 0 auto;
  }

  /* Not yet functional: focusable and announced "Coming soon", drawn in the forms disabled colors. */
  .docs-search[aria-disabled="true"] {
    --field-ring: transparent;
    --field-lift: 0 0 transparent;

    border-color: var(--field-disabled-border);
    background-color: var(--field-disabled-bg);
    color: var(--field-disabled-fg);
    cursor: not-allowed;
  }

  .docs-search[aria-disabled="true"]::placeholder {
    color: var(--field-disabled-fg);
  }

  .search-hint {
    margin: var(--space-8) 0 0;
    color: var(--ink-muted);
  }

  .docs-categories {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    max-width: 1140px;
    margin-inline: auto;
    gap: var(--space-24);
  }

  @media (min-width: 900px) {
    .docs-index-main {
      padding-block: var(--space-80) var(--space-96);
    }

    .docs-index-hero {
      margin-bottom: var(--space-80);
    }

    .docs-categories {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-32);
    }
  }

  .category-card {
    padding: var(--space-24);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: var(--white);
  }

  @media (min-width: 900px) {
    .category-card {
      padding: var(--space-32);
    }
  }

  .category-header {
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--line);
  }

  .category-header h2 {
    margin: 0;
    color: var(--ink);
  }

  .doc-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .doc-link {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 44px;
    padding: var(--space-10) var(--space-12) var(--space-10) var(--space-32);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--dur-fast), color var(--dur-fast);
  }

  .doc-link::before {
    content: "\2192" / "";
    position: absolute;
    top: var(--space-10);
    line-height: 1.3;
    inset-inline-start: var(--space-12);
    color: var(--ink-muted);
  }

  .doc-link:hover {
    background: var(--paper);
    color: var(--ink);
  }

  .doc-link:hover::before {
    color: var(--fern);
  }

  .doc-subcategory-anchor {
    display: block;
    height: 0;
  }
}