/* Wukong Code — shared AI之道 semantic tokens from chronobee-doc.css */

body.wc-landing {
  color: var(--text);
  background: var(--background);
}

body.wc-landing .doc-topbar {
  position: static;
}

.wc-shell {
  width: min(100% - 2rem, 64rem);
  margin-inline: auto;
}

.doc-topbar-inner.wc-shell {
  max-width: 64rem;
  padding-inline: 0;
}

body.wc-landing .doc-brand {
  font-size: var(--fs-display-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

body.wc-landing .doc-product {
  color: var(--text-muted);
}

.wc-hero {
  padding: var(--space-10) 0 var(--space-8);
  border-bottom: var(--border-w) solid var(--border);
}

.wc-hero-copy {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.wc-hero-trust {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.wc-hero-eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
}

.wc-hero h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  text-wrap: balance;
}

.wc-hero-lead,
.wc-hero-detail {
  font-family: var(--font-serif);
  text-wrap: pretty;
}

.wc-hero-lead {
  max-width: 32em;
  margin: var(--space-3) auto 0;
  font-size: var(--fs-para-s);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.wc-hero-detail {
  max-width: 40em;
  margin: var(--space-2) auto 0;
  font-size: var(--fs-para-xs);
  line-height: var(--lh-loose);
}

.wc-hero-trust {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-detail-xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.wc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.wc-actions-start {
  justify-content: flex-start;
}

.wc-button {
  --btn-bg: var(--button-primary-bg);
  --btn-border: var(--button-primary-border);
  --btn-text: var(--button-primary-text);
  --btn-bg-hover: var(--button-primary-bg-hover);
  --btn-border-hover: var(--button-primary-border-hover);
  --btn-text-hover: var(--button-primary-text-hover);

  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border: var(--border-w) solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-sans);
  font-size: var(--fs-detail-m);
  font-weight: var(--fw-medium);
  line-height: var(--lh-flat);
  text-decoration: none;
  transition:
    background-color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
}

.wc-button-secondary {
  --btn-bg: var(--button-secondary-bg);
  --btn-border: var(--button-secondary-border);
  --btn-text: var(--button-secondary-text);
  --btn-bg-hover: var(--button-secondary-bg-hover);
  --btn-border-hover: var(--button-secondary-border-hover);
  --btn-text-hover: var(--button-secondary-text-hover);
}

.wc-button:hover,
.wc-button:focus-visible {
  border-color: var(--btn-border-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  text-decoration: none;
}

.wc-button:focus-visible,
.wc-stage-trigger:focus-visible,
.wc-compare-toggle:focus-visible {
  outline: var(--focus-w) solid var(--accent);
  outline-offset: var(--focus-offset);
}

.wc-pipeline-wrap {
  margin-top: var(--space-8);
  padding: var(--space-4);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-faded);
  overflow: hidden;
}

.wc-pipeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-stage {
  position: relative;
  min-width: 0;
  border-inline-end: var(--border-w) solid var(--border);
}

.wc-stage:last-child {
  border-inline-end: 0;
}

.wc-stage:not(:last-child)::after {
  content: '→';
  position: absolute;
  z-index: 1;
  top: 2.25rem;
  inset-inline-end: -0.6rem;
  padding-inline: var(--space-1);
  background: var(--surface);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
}

.wc-stage-number {
  display: block;
  padding: var(--space-3) var(--space-3) 0;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
}

.wc-stage-trigger {
  width: 100%;
  min-height: 5rem;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease);
}

.wc-stage-trigger:hover {
  background: var(--card-faded-hover);
}

.wc-stage-trigger:disabled,
.wc-compare-toggle:disabled {
  cursor: default;
}

.wc-stage-title {
  display: block;
  min-height: 2.7em;
  font-family: var(--font-sans);
  font-size: var(--fs-detail-s);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.wc-stage-output,
.wc-stage-detail,
.wc-stage-status {
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
}

.wc-stage-output {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.wc-stage-detail {
  padding: 0 var(--space-3) var(--space-3);
  color: var(--text-muted);
}

.wc-stage-detail > div {
  min-height: 0;
}

.wc-stage-detail p {
  margin: 0;
  line-height: var(--lh-normal);
}

.wc-js .wc-stage-detail {
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  overflow: hidden;
  transition:
    grid-template-rows var(--dur-slow) var(--ease),
    padding-bottom var(--dur-slow) var(--ease);
}

.wc-stage[data-expanded="true"] .wc-stage-detail {
  grid-template-rows: 1fr;
  padding-bottom: var(--space-3);
}

.wc-tdd-states {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  color: var(--accent-strong);
}

.wc-tdd-states li {
  padding: var(--space-1);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
}

.wc-stage-status {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--border-w) solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
}

.wc-pipeline-fallback {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-w) solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  text-align: center;
}

.wc-section,
.wc-evidence,
.wc-close {
  padding: var(--space-8) 0;
  border-bottom: var(--border-w) solid var(--border);
}

.wc-kicker {
  margin: 0 0 var(--space-2);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.wc-section h2,
.wc-evidence h2,
.wc-close h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.wc-section h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-snug);
}

.wc-section-lead,
.wc-section-close {
  font-family: var(--font-serif);
  font-size: var(--fs-para-xs);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

.wc-section-lead {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
}

.wc-section-close {
  max-width: 38em;
  margin: var(--space-5) 0 0;
}

.wc-editorial {
  max-width: 46rem;
}

.wc-pain {
  background: var(--surface);
}

.wc-pain-list,
.wc-capability-list,
.wc-design-stages,
.wc-environment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc-pain-list {
  margin-top: var(--space-6);
}

.wc-pain-list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: var(--border-w) solid var(--border);
}

.wc-pain-list span {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
}

.wc-pain-list p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-para-l);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

.wc-capability-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.4fr);
  gap: var(--space-8);
  align-items: start;
}

.wc-capability-head {
  position: sticky;
  top: var(--space-6);
}

.wc-capability-list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--border-w) solid var(--border);
}

.wc-capability-list li:first-child {
  padding-top: 0;
}

.wc-capability-list li:last-child {
  border-bottom: 0;
}

.wc-capability-number {
  padding-top: var(--space-1);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
}

.wc-capability-list p {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: var(--fs-para-xs);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

.wc-evidence.theme-dark,
.wc-close.theme-dark {
  color: var(--text);
  background: var(--background);
}

.wc-evidence-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 0.7fr;
  gap: var(--space-5);
  align-items: stretch;
}

.wc-evidence-copy {
  align-self: center;
}

.wc-terminal,
.wc-verification {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-faded);
  overflow: hidden;
}

.wc-terminal-head {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-w) solid var(--border);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
}

.wc-terminal ol,
.wc-verification ul {
  list-style: none;
  margin: 0;
  padding: var(--space-3);
}

.wc-terminal li,
.wc-verification li {
  padding: var(--space-1) 0;
}

.wc-terminal code,
.wc-verification {
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  line-height: var(--lh-normal);
}

.wc-verification li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: var(--border-w) solid var(--border);
}

.wc-verification li:last-child {
  border-bottom: 0;
}

.wc-verification strong {
  color: var(--accent-strong);
  font-weight: var(--fw-medium);
}

.wc-design-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--space-7);
  align-items: center;
}

.wc-design-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.wc-design-stage {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-w) solid var(--accent);
}

.wc-design-stage-label,
.wc-design-panel-label {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
}

.wc-design-stage strong {
  font-family: var(--font-sans);
  font-size: var(--fs-detail-s);
  line-height: var(--lh-snug);
}

.wc-design-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.wc-compare-toggle {
  grid-column: 1 / -1;
  justify-self: end;
  padding: var(--space-2) var(--space-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  cursor: pointer;
}

.wc-design-panel {
  display: flex;
  min-height: 11rem;
  flex-direction: column;
  padding: var(--space-4);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: opacity var(--dur-slow) var(--ease);
}

.wc-design-panel[data-view='render'] {
  border-color: var(--accent);
}

.wc-design-compare[data-compare-state='render'] [data-view='mock'] {
  opacity: 0.4;
}

.wc-design-metric {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: var(--border-w) solid var(--border);
  background: var(--card-faded);
}

.wc-design-metric > span,
.wc-design-preview-title,
.wc-design-activity {
  font-family: var(--font-sans);
}

.wc-design-metric > span {
  color: var(--text-muted);
  font-size: var(--fs-detail-xs);
}

.wc-design-metric div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.wc-design-metric strong {
  font-size: var(--fs-display-xs);
}

.wc-design-metric small {
  color: var(--accent-strong);
  font-family: var(--font-mono);
}

.wc-design-preview-title {
  margin-top: var(--space-3);
  font-size: var(--fs-detail-s);
}

.wc-design-activity {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: var(--fs-detail-xs);
}

.wc-design-activity li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: var(--border-w) solid var(--border);
}

.wc-design-activity li:last-child {
  border-bottom: 0;
}

.wc-design-panel[data-view='render'] .wc-design-activity strong {
  color: var(--accent-strong);
}

.wc-table-wrap {
  margin-top: var(--space-6);
  overflow-x: auto;
}

.wc-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-serif);
  font-size: var(--fs-para-xs);
}

.wc-compare-table caption {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  text-align: start;
}

.wc-compare-table th,
.wc-compare-table td {
  padding: var(--space-2) var(--space-3);
  border: var(--border-w) solid var(--border);
  text-align: start;
  vertical-align: top;
}

.wc-compare-table thead th {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
}

.wc-compare-table tbody th {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
}

.wc-compare-table tbody td:last-child {
  color: var(--accent-strong);
  font-weight: var(--fw-semibold);
}

.wc-compare-table tbody tr:hover {
  background: var(--card-faded);
}

.wc-environments {
  background: var(--surface);
}

.wc-environment-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--space-6);
}

.wc-environment-list li {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-w) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
  overflow-wrap: anywhere;
}

.wc-environment-list span {
  color: var(--accent-strong);
}

.wc-close-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--space-7);
  align-items: end;
}

.wc-close-statement {
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-w) solid var(--accent);
  font-family: var(--font-serif);
  font-size: var(--fs-para-s);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

.wc-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-detail-xs);
}

.wc-footer a {
  text-decoration: none;
}

.wc-footer p {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .wc-pipeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wc-stage {
    border-bottom: var(--border-w) solid var(--border);
  }

  .wc-stage:nth-child(4n) {
    border-inline-end: 0;
  }

  .wc-stage:nth-child(4n)::after,
  .wc-stage:last-child::after {
    content: none;
  }

  .wc-evidence-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wc-evidence-copy {
    grid-column: 1 / -1;
  }

  .wc-environment-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .wc-shell {
    width: min(100% - 1.5rem, 64rem);
  }

  .doc-topbar-inner.wc-shell {
    width: calc(100% - 1.5rem);
  }

  .wc-hero {
    padding-top: var(--space-8);
  }

  .wc-actions {
    align-items: stretch;
  }

  .wc-button {
    flex: 1 1 12rem;
  }

  .wc-pipeline {
    display: block;
  }

  .wc-stage,
  .wc-stage:nth-child(4n) {
    border-inline-end: 0;
    border-bottom: var(--border-w) solid var(--border);
  }

  .wc-stage:last-child {
    border-bottom: 0;
  }

  .wc-stage:not(:last-child)::after {
    content: '↓';
    top: auto;
    right: var(--space-3);
    bottom: -0.65rem;
    background: var(--surface);
  }

  .wc-stage-title {
    min-height: 0;
  }

  .wc-capability-layout,
  .wc-evidence-grid,
  .wc-design-layout,
  .wc-close-grid {
    grid-template-columns: 1fr;
  }

  .wc-capability-head {
    position: static;
  }

  .wc-capability-list {
    margin-top: var(--space-6);
  }

  .wc-design-stages,
  .wc-design-compare {
    grid-template-columns: 1fr;
  }

  .wc-compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .wc-compare-table tr,
  .wc-compare-table th,
  .wc-compare-table td {
    display: block;
  }

  .wc-compare-table tr {
    padding: var(--space-3) 0;
    border-bottom: var(--border-w) solid var(--border);
  }

  .wc-compare-table th,
  .wc-compare-table td {
    border: 0;
    padding: var(--space-1) 0;
  }

  .wc-compare-table td::before {
    content: attr(data-header);
    display: block;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-detail-xs);
    text-transform: uppercase;
  }

  .wc-environment-list {
    grid-template-columns: 1fr;
  }

  .wc-footer {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-button,
  .wc-stage-trigger,
  .wc-stage-detail,
  .wc-design-panel {
    transition: none;
  }
}