@layer tokens {
  :root {
    --route-rail-width: 18rem;
    --route-detail-width: 24rem;
    --route-wide-reading: 76rem;
  }
}

@layer routes {
  .route-page h5,
  .route-page pre {
    margin: 0;
  }

  .route-page h5 {
    color: var(--color-ink-strong);
    font-family: var(--font-display);
    font-size: var(--text-md);
    line-height: 1.2;
  }

  .route-page code,
  .route-page pre {
    font-family: var(--font-mono);
  }

  .route-page code {
    overflow-wrap: anywhere;
  }

  .primary-nav a[aria-current="page"] {
    color: var(--color-ink-strong);
    box-shadow: inset 0 calc(var(--line) * -2) 0 var(--color-accent);
  }

  .route-hero {
    padding-block: clamp(var(--space-10), 7vw, var(--space-20));
    border-bottom: var(--line) solid var(--color-line);
    background: var(--color-bg-deep);
  }

  .breadcrumbs {
    margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
  }

  .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--color-subtle);
    font-size: var(--text-sm);
    list-style: none;
  }

  .breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .breadcrumbs li + li::before {
    color: var(--color-line-strong);
    content: "/";
    font-family: var(--font-mono);
  }

  .breadcrumbs a {
    color: var(--color-muted);
    text-decoration: none;
  }

  .route-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: clamp(var(--space-8), 8vw, var(--space-20));
    align-items: end;
  }

  .route-hero-copy {
    display: grid;
    max-width: var(--route-wide-reading);
    gap: var(--space-5);
  }

  .route-hero h1 {
    max-width: 18ch;
  }

  .route-lead {
    max-width: var(--reading-width);
    color: var(--color-muted);
    font-size: var(--text-md);
    line-height: 1.65;
  }

  .route-hero-meta {
    align-self: stretch;
    padding-block: var(--space-5);
    border-block: var(--line) solid var(--color-line-strong);
  }

  .route-meta-list {
    display: grid;
    gap: var(--space-4);
  }

  .route-meta-list > div {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(0, 1.5fr);
    gap: var(--space-4);
  }

  .route-meta-list dt {
    color: var(--color-subtle);
    font-size: var(--text-xs);
  }

  .route-meta-list dd {
    overflow-wrap: anywhere;
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-align: right;
  }

  .route-section {
    min-height: 24rem;
  }

  .route-inner-section {
    padding-block: var(--space-16);
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
  }

  .route-inner-section + .route-inner-section {
    border-top: var(--line) solid var(--color-line-strong);
  }

  .route-prose {
    max-width: var(--reading-width);
  }

  .route-prose > p,
  .route-prose > .route-copy {
    margin-top: var(--space-5);
    color: var(--color-muted);
    font-size: var(--text-md);
  }

  .route-copy {
    max-width: var(--reading-width);
    color: var(--color-muted);
  }

  .route-copy + .route-copy {
    margin-top: var(--space-3);
  }

  .route-two-column {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(var(--route-detail-width), 1fr);
    gap: clamp(var(--space-8), 6vw, var(--space-16));
    align-items: start;
  }

  .route-callout,
  .route-related {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border-top: var(--line) solid var(--color-accent);
    background: var(--color-surface);
  }

  .route-callout .content-list,
  .route-callout .ordered-content-list {
    display: grid;
    gap: var(--space-3);
    padding-left: var(--space-5);
    color: var(--color-muted);
  }

  .route-callout > p {
    color: var(--color-muted);
  }

  .route-directory {
    border-top: var(--line) solid var(--color-line-strong);
  }

  .route-directory-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
    gap: var(--space-8);
    align-items: center;
    padding-block: var(--space-8);
    border-bottom: var(--line) solid var(--color-line);
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
  }

  .route-directory-row:target {
    background: var(--color-accent-soft);
  }

  .route-directory-row h3 a {
    color: var(--color-ink-strong);
    text-decoration: none;
  }

  .route-directory-row h3 a::after {
    margin-left: var(--space-2);
    color: var(--color-accent);
    content: "→";
    font-family: var(--font-mono);
  }

  .route-directory-row p {
    max-width: var(--reading-width);
    margin-top: var(--space-3);
    color: var(--color-muted);
  }

  .route-directory-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    align-items: center;
    color: var(--color-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-align: right;
  }

  .route-home-directory .section-heading {
    max-width: var(--reading-width);
  }

  .route-home-hero .hero-summary {
    max-width: 52ch;
  }

  .route-download-station {
    margin-top: 0;
  }

  .route-download-station + .route-two-column {
    margin-top: var(--space-16);
  }

  .route-step-list {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-8);
    list-style: none;
  }

  .route-step-list li {
    display: grid;
    grid-template-columns: var(--space-12) minmax(0, 1fr);
    gap: var(--space-5);
    padding-top: var(--space-5);
    border-top: var(--line) solid var(--color-line);
  }

  .route-step-list > li > span {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .route-step-list p {
    margin-top: var(--space-2);
    color: var(--color-muted);
  }

  .route-docs-workbench {
    grid-template-columns: var(--route-rail-width) minmax(0, 1fr);
  }

  .route-doc-index a {
    display: grid;
    min-height: var(--control-md);
    gap: var(--space-1);
    padding: var(--space-5);
    border-bottom: var(--line) solid var(--color-line);
    color: var(--color-muted);
    text-decoration: none;
  }

  .route-doc-index a:hover,
  .route-doc-index a[aria-current="page"] {
    background: var(--color-accent-soft);
    color: var(--color-ink-strong);
  }

  .route-doc-index a[aria-current="page"] {
    box-shadow: inset calc(var(--line) * 3) 0 0 var(--color-accent);
  }

  .route-doc-index span {
    color: var(--color-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .route-doc-index strong {
    color: var(--color-ink-strong);
  }

  .route-doc-index small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-subtle);
    font-size: var(--text-xs);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #tutorial-reader {
    min-width: 0;
    padding: clamp(var(--space-6), 5vw, var(--space-12));
  }

  #tutorial-reader > .tutorial-reader {
    padding: 0;
  }

  .route-reader > h3 {
    margin-block: var(--space-10) var(--space-5);
  }

  .route-reader .tutorial-steps h4 {
    margin-bottom: var(--space-2);
  }

  .route-reader .tutorial-steps p {
    color: var(--color-muted);
  }

  .route-reader-shell {
    display: grid;
    gap: var(--space-12);
  }

  .route-reader-shell > .route-reader {
    max-width: var(--reading-width);
    padding: 0;
  }

  .route-pagination {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-8);
    border-top: var(--line) solid var(--color-line-strong);
  }

  .catalog-submit-group {
    display: flex;
    gap: var(--space-2);
  }

  .catalog-submit-group .button {
    min-height: var(--control-md);
  }

  .discipline-chip {
    text-decoration: none;
  }

  .pagination .is-disabled {
    opacity: 0.45;
    pointer-events: none;
  }

  .catalog-table .cell-title,
  .discipline-detail .cell-title {
    display: block;
    text-decoration: none;
  }

  .catalog-table .cell-title:hover,
  .discipline-detail .cell-title:hover {
    color: var(--color-accent-hover);
  }

  .discipline-index {
    display: grid;
    gap: var(--space-20);
  }

  .discipline-stage > header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    align-items: end;
    margin-bottom: var(--space-6);
  }

  .discipline-stage > header p {
    color: var(--color-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .discipline-detail > .route-two-column {
    margin-bottom: var(--space-8);
  }

  .discipline-detail .route-callout .ordered-content-list {
    counter-reset: discipline-goal;
    list-style: none;
    padding-left: 0;
  }

  .discipline-detail .route-callout .ordered-content-list li {
    display: grid;
    grid-template-columns: var(--space-8) minmax(0, 1fr);
    gap: var(--space-3);
    counter-increment: discipline-goal;
  }

  .discipline-detail .route-callout .ordered-content-list li::before {
    color: var(--color-accent);
    content: counter(discipline-goal, decimal-leading-zero);
    font-family: var(--font-mono);
  }

  .item-detail .route-definitions {
    margin-top: var(--space-8);
  }

  .route-recipe {
    margin-top: var(--space-8);
  }

  .route-link-list {
    display: grid;
    list-style: none;
  }

  .route-link-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: center;
    padding-block: var(--space-3);
    border-top: var(--line) solid var(--color-line);
  }

  .route-link-list a {
    color: var(--color-ink-strong);
    text-decoration: none;
  }

  .route-structured-content {
    max-width: var(--route-wide-reading);
  }

  .route-record-list {
    border-top: var(--line) solid var(--color-line-strong);
  }

  .route-record {
    min-width: 0;
    padding-block: var(--space-5);
    border-top: var(--line) solid var(--color-line);
  }

  .route-record-list > .route-record:first-child,
  .route-extension-details > .route-record:first-child {
    border-top: 0;
  }

  .route-record > h4,
  .route-record > h3 {
    margin-bottom: var(--space-3);
  }

  .route-record .content-list,
  .route-record .ordered-content-list,
  .route-subgroup .content-list,
  .route-subgroup .ordered-content-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-left: var(--space-5);
    color: var(--color-muted);
  }

  .route-definitions {
    margin-top: var(--space-5);
  }

  .route-definitions > div {
    padding-block: var(--space-3);
    border-top: var(--line) solid var(--color-line);
  }

  .route-definitions dd {
    font-family: var(--font-body);
    line-height: 1.55;
  }

  .route-subgroup {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--line) solid var(--color-line);
  }

  .route-subgroup > h5 {
    margin-bottom: var(--space-3);
  }

  .planning-manual > .route-inner-section:first-of-type {
    padding-top: var(--space-12);
  }

  .route-anchor-index {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-6);
    border-bottom: var(--line) solid var(--color-line-strong);
  }

  .route-anchor-index a {
    min-height: var(--control-sm);
    padding: var(--space-2) var(--space-4);
    border: var(--line) solid var(--color-line);
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  .route-anchor-index a:hover {
    border-color: var(--color-accent);
    color: var(--color-ink-strong);
  }

  .route-accounting {
    margin-bottom: var(--space-10);
  }

  .route-accounting > div > h3 {
    margin-bottom: var(--space-5);
  }

  .route-curriculum-table {
    margin-top: var(--space-8);
  }

  .route-architecture-stack {
    display: grid;
    gap: var(--space-16);
  }

  .route-architecture-stack .architecture-panel + .architecture-panel {
    padding-top: var(--space-16);
    border-top: var(--line) solid var(--color-line-strong);
  }

  .architecture-panel > .hero-summary {
    max-width: var(--reading-width);
    margin-bottom: var(--space-8);
  }

  .architecture-content > .route-record {
    padding: 0;
    border: 0;
  }

  .architecture-content .route-record + .route-record {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--line) solid var(--color-line);
  }

  .route-extension-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    margin-top: var(--space-16);
    padding-top: var(--space-12);
    border-top: var(--line) solid var(--color-line-strong);
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
  }

  .route-extension-details > .route-record {
    padding: 0;
    border-top: 0;
  }

  .route-console {
    min-height: calc(100dvh - var(--header-height));
  }

  .admin-shell .console-toolbar {
    align-items: end;
  }

  .admin-shell .console-toolbar p:last-child {
    max-width: var(--reading-width);
    margin-top: var(--space-3);
    color: var(--color-muted);
  }

  #admin-loading,
  #admin-error,
  #admin-summary {
    margin-top: var(--space-8);
  }

  .admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--line) solid var(--color-line-strong);
  }

  .admin-summary-grid > * {
    min-width: 0;
    padding: var(--space-6);
    border-bottom: var(--line) solid var(--color-line);
  }

  .admin-summary-grid > * + * {
    border-left: var(--line) solid var(--color-line);
  }

  .admin-summary-grid dt,
  .admin-summary-grid p {
    color: var(--color-subtle);
    font-size: var(--text-sm);
  }

  .admin-summary-grid dd,
  .admin-summary-grid strong {
    display: block;
    margin-top: var(--space-2);
    overflow-wrap: anywhere;
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
  }

  .setup-shell .route-prose {
    max-width: none;
  }

  .setup-shell .route-prose > h2 + p {
    margin-top: var(--space-4);
  }

  .setup-shell .route-prose > h2:not(:first-child) {
    margin-top: var(--space-12);
  }

  .command-block {
    margin-top: var(--space-5);
    padding: var(--space-5);
    overflow-x: auto;
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-bg-deep);
    color: var(--color-ink-strong);
    font-size: var(--text-sm);
    line-height: 1.7;
    white-space: pre;
  }

  .not-found-shell {
    display: grid;
    align-content: start;
    gap: var(--space-8);
  }

  .not-found-shell > p {
    color: var(--color-muted);
    font-size: var(--text-md);
  }

  .not-found-shell code {
    color: var(--color-ink-strong);
  }

  .noscript-message {
    margin-top: var(--space-6);
    padding: var(--space-5);
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-surface);
    color: var(--color-muted);
  }

  @media (min-width: 80rem) {
    .route-home-hero {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }

    .route-directory-row > div:first-child {
      display: grid;
      grid-template-columns: minmax(12rem, 0.65fr) minmax(0, 1.35fr);
      gap: var(--space-8);
      align-items: baseline;
    }

    .route-directory-row > div:first-child p {
      margin-top: 0;
    }
  }

  @media (max-width: 64rem) {
    .primary-nav a[aria-current="page"] {
      border-color: var(--color-accent);
      box-shadow: none;
    }

    .route-hero-layout,
    .route-two-column {
      grid-template-columns: 1fr;
    }

    .route-hero-meta {
      max-width: 42rem;
    }

    .route-directory-row {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .route-two-column > .route-callout,
    .route-two-column > .route-related {
      width: min(100%, 42rem);
    }

    .route-extension-details {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }

    .admin-summary-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-summary-grid > *:nth-child(odd) {
      border-left: 0;
    }
  }

  @media (max-width: 48rem) {
    .route-hero {
      padding-block: var(--space-12);
    }

    .route-hero h1 {
      max-width: 16ch;
    }

    .route-hero-layout {
      gap: var(--space-10);
    }

    .route-directory-row {
      grid-template-columns: 1fr;
      gap: var(--space-5);
      padding-block: var(--space-6);
    }

    .route-directory-meta {
      justify-content: space-between;
      text-align: left;
    }

    .route-download-station {
      grid-template-columns: 1fr;
    }

    .route-download-station .artifact-meta {
      grid-column: auto;
      grid-row: auto;
    }

    .route-download-station .button {
      width: 100%;
    }

    .route-step-list li {
      grid-template-columns: var(--space-8) minmax(0, 1fr);
      gap: var(--space-3);
    }

    .route-docs-workbench {
      grid-template-columns: 1fr;
    }

    .route-doc-index {
      display: flex;
      overflow-x: auto;
      border-right: 0;
      border-bottom: var(--line) solid var(--color-line);
      scroll-snap-type: x proximity;
    }

    .route-doc-index a {
      flex: 0 0 14rem;
      border-right: var(--line) solid var(--color-line);
      border-bottom: 0;
      scroll-snap-align: start;
    }

    .route-doc-index a[aria-current="page"] {
      box-shadow: inset 0 calc(var(--line) * -3) 0 var(--color-accent);
    }

    #tutorial-reader {
      padding: var(--space-5);
    }

    .route-pagination {
      display: grid;
      grid-template-columns: 1fr;
    }

    .route-pagination > span:empty {
      display: none;
    }

    .route-pagination .button {
      width: 100%;
    }

    .catalog-submit-group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-submit-group .button {
      width: 100%;
    }

    .discipline-stage > header {
      align-items: start;
      flex-direction: column;
    }

    .route-static-table tbody,
    .route-static-table tr,
    .route-static-table th,
    .route-static-table td {
      display: block;
      width: 100%;
    }

    .route-static-table tbody {
      display: grid;
      gap: var(--space-3);
    }

    .route-static-table tbody tr {
      display: grid;
      grid-template-columns: 1fr;
      padding: var(--space-4);
      border: var(--line) solid var(--color-line);
    }

    .route-static-table tbody th,
    .route-static-table tbody td,
    .route-static-table tbody td:last-child {
      display: grid;
      grid-template-columns: 6rem minmax(0, 1fr);
      gap: var(--space-3);
      grid-column: auto;
      margin: 0;
      padding: var(--space-2) 0;
      border: 0;
      color: var(--color-muted);
      font-size: var(--text-base);
      font-weight: 400;
      text-align: left;
    }

    .route-static-table tbody th::before,
    .route-static-table tbody td::before,
    .route-static-table tbody td:last-child::before {
      display: block;
      color: var(--color-subtle);
      content: attr(data-label);
      font-size: var(--text-xs);
      font-weight: 700;
    }

    .route-anchor-index {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .route-anchor-index a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .route-architecture-stack {
      gap: var(--space-12);
    }

    .admin-shell .console-toolbar {
      align-items: stretch;
    }

    .admin-summary-grid {
      grid-template-columns: 1fr;
    }

    .admin-summary-grid > * + * {
      border-left: 0;
    }

    .command-block {
      font-size: var(--text-xs);
    }
  }

  @media (max-width: 24rem) {
    .breadcrumbs ol,
    .route-directory-meta,
    .catalog-submit-group,
    .route-anchor-index {
      grid-template-columns: 1fr;
    }

    .breadcrumbs ol {
      display: grid;
    }

    .breadcrumbs li + li::before {
      display: none;
    }

    .route-meta-list > div {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }

    .route-meta-list dd {
      text-align: left;
    }

    .route-directory-meta {
      display: grid;
    }
  }
}