/* SwiftMessengerLab · project layer on Jason DS 2.2.0 */
:root {
  --lab-signal: var(--jx-state-learning);
  --lab-grid: color-mix(in oklab, var(--jx-ink), transparent 94%);
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

.lab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  gap: clamp(var(--jx-space-6), 7vw, 96px);
  align-items: start;
  padding-block: clamp(var(--jx-space-7), 9vw, 112px) var(--jx-section-y);
  border-bottom: 1px solid var(--jx-rule-strong);
}

.lab-kicker,
.lab-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jx-space-3);
}

.lab-hero h1 {
  max-width: var(--jx-measure-title);
  margin-block: var(--jx-space-4);
  font-size: var(--jx-fs-display-fluid);
  line-height: var(--jx-leading-display);
}

.lab-lede {
  max-width: var(--jx-measure-lede);
  margin: 0;
  color: var(--jx-ink-2);
  font-size: var(--jx-fs-lg);
}

.lab-summary-en {
  max-width: var(--jx-measure-lede);
  margin-block: var(--jx-space-4) 0;
  color: var(--jx-ink-muted);
  font-size: var(--jx-fs-sm);
}

.lab-actions { margin-top: var(--jx-space-6); }

.lab-facts {
  padding-top: var(--jx-space-2);
}

.lab-mark {
  width: 72px;
  height: 72px;
  margin-bottom: var(--jx-space-6);
  border-radius: var(--jx-radius-4);
  box-shadow: var(--jx-shadow-stack);
}

.lab-facts dl {
  margin: 0;
  display: grid;
  gap: var(--jx-space-4);
}

.lab-facts dl div {
  padding-bottom: var(--jx-space-4);
  border-bottom: 1px solid var(--jx-rule);
}

.lab-facts dt,
.lab-index,
.lab-filter,
.lab-count {
  color: var(--jx-ink-muted);
  font-family: var(--jx-font-mono);
  font-size: var(--jx-fs-micro);
  letter-spacing: var(--jx-tracking-eyebrow);
  text-transform: uppercase;
}

.lab-facts dd {
  margin: var(--jx-space-1) 0 0;
  color: var(--jx-ink);
  font-weight: var(--jx-weight-ui);
}

.lab-section {
  padding-block: var(--jx-section-y);
  border-bottom: 1px solid var(--jx-rule);
}

.lab-section__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr);
  gap: clamp(var(--jx-space-5), 6vw, var(--jx-space-8));
  align-items: end;
  margin-bottom: var(--jx-space-6);
}

.lab-section__heading h2 {
  max-width: 18ch;
  margin-block: var(--jx-space-3) 0;
  font-size: clamp(1.8rem, 4vw, var(--jx-fs-h1));
}

.lab-section__heading > p {
  max-width: var(--jx-measure-body);
  margin: 0;
  color: var(--jx-ink-muted);
}

.lab-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--jx-rule-strong);
}

.lab-card {
  min-height: 260px;
  padding: var(--jx-space-6);
}

.lab-card + .lab-card { border-left: 1px solid var(--jx-rule); }
.lab-card h3 { max-width: 18ch; margin-block: var(--jx-space-6) var(--jx-space-3); }
.lab-card p { max-width: var(--jx-measure-body); margin: 0; color: var(--jx-ink-2); }
.lab-index { color: var(--lab-signal); }

.lab-screen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jx-space-5);
}

.lab-screen-grid figure { margin: 0; min-width: 0; }

.lab-screen {
  padding: var(--jx-space-3);
  overflow: hidden;
  background: var(--jx-surface-sunk);
  border-radius: var(--jx-radius-4);
  box-shadow: var(--jx-shadow-hairline);
}

.lab-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--jx-radius-3);
  box-shadow: var(--jx-shadow-stack);
}

.lab-screen-grid figcaption {
  display: grid;
  gap: var(--jx-space-1);
  margin-top: var(--jx-space-3);
  color: var(--jx-ink-muted);
  font-size: var(--jx-fs-sm);
}

.lab-screen-grid figcaption strong { color: var(--jx-ink); }

.lab-filter input,
.lab-filter select {
  display: block;
  width: min(100%, 360px);
  min-height: 44px;
  margin-top: var(--jx-space-2);
  padding: var(--jx-space-3) var(--jx-space-4);
  color: var(--jx-ink);
  background: var(--jx-surface);
  border: 1px solid var(--jx-rule-strong);
  border-radius: var(--jx-radius-3);
  text-transform: none;
  letter-spacing: var(--jx-tracking-body);
}

.lab-filter input::placeholder { color: var(--jx-ink-faint); }
.lab-filter input:focus,
.lab-filter select:focus { outline: none; box-shadow: var(--jx-shadow-focus); }

.lab-type-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(150px, .55fr));
  gap: var(--jx-space-4);
  align-items: end;
  padding-block: var(--jx-space-5);
  border-block: 1px solid var(--jx-rule-strong);
}

.lab-type-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--jx-space-2);
}

.lab-control-button {
  min-height: 40px;
  padding: var(--jx-space-2) var(--jx-space-3);
  color: var(--jx-ink-2);
  background: var(--jx-surface);
  border: 1px solid var(--jx-rule-strong);
  border-radius: var(--jx-radius-2);
  font-family: var(--jx-font-mono);
  font-size: var(--jx-fs-xs);
  letter-spacing: var(--jx-tracking-mono);
  cursor: pointer;
}

.lab-control-button:hover { color: var(--jx-ink); background: var(--jx-surface-sunk); }
.lab-control-button:focus-visible { outline: none; box-shadow: var(--jx-shadow-focus); }

.lab-type-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--jx-space-4);
  align-items: baseline;
  margin-block: var(--jx-space-4);
}

.lab-count { margin: 0; }
.lab-type-note { max-width: var(--jx-measure-body); margin: 0; color: var(--jx-ink-muted); font-size: var(--jx-fs-sm); }

.lab-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jx-space-4);
  align-items: start;
}

.type-card {
  min-width: 0;
  background: var(--jx-surface);
  border: 1px solid var(--jx-rule-strong);
  border-radius: var(--jx-radius-3);
  box-shadow: var(--jx-shadow-hairline);
}

.type-card[open] { box-shadow: var(--jx-shadow-stack); }

.type-card__summary {
  position: relative;
  display: block;
  min-height: 190px;
  padding: var(--jx-space-5);
  padding-bottom: calc(var(--jx-space-5) + 24px);
  cursor: pointer;
  list-style: none;
}

.type-card__summary::-webkit-details-marker { display: none; }
.type-card__summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--jx-focus-ring); border-radius: var(--jx-radius-3); }

.type-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jx-space-2);
}

.type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: var(--jx-space-2);
  color: var(--jx-ink-2);
  background: var(--jx-surface-sunk);
  border-radius: var(--jx-radius-2);
  font-family: var(--jx-font-mono);
  font-size: var(--jx-fs-micro);
  letter-spacing: var(--jx-tracking-mono);
}

.type-badge--class,
.type-badge--struct,
.type-badge--enum,
.type-badge--protocol { color: var(--lab-signal); }
.type-badge--readonly { color: var(--jx-ink-muted); }
.type-badge--mutable { color: var(--jx-state-building); }

.type-card__name {
  display: block;
  margin-block: var(--jx-space-4) var(--jx-space-2);
  color: var(--jx-ink);
  font-size: clamp(1.35rem, 3vw, var(--jx-fs-h2));
  font-weight: var(--jx-weight-heading);
  line-height: var(--jx-leading-tight);
  overflow-wrap: anywhere;
}

.type-card__purpose {
  display: block;
  max-width: var(--jx-measure-body);
  color: var(--jx-ink-2);
}

.type-card__disclosure {
  position: absolute;
  right: var(--jx-space-5);
  bottom: var(--jx-space-4);
  color: var(--jx-ink-muted);
  font-family: var(--jx-font-mono);
  font-size: var(--jx-fs-micro);
  text-transform: uppercase;
}

.type-card__disclosure::after { content: "展开 ↓"; }
.type-card[open] .type-card__disclosure::after { content: "收起 ↑"; }

.type-card__body {
  display: grid;
  gap: var(--jx-space-5);
  padding: var(--jx-space-5);
  border-top: 1px solid var(--jx-rule);
}

.type-card__definition {
  padding: var(--jx-space-4);
  background: var(--jx-surface-sunk);
  border-inline-start: 3px solid var(--lab-signal);
  border-radius: var(--jx-radius-2);
}

.type-card__definition-label {
  color: var(--jx-ink-muted);
  font-family: var(--jx-font-mono);
  font-size: var(--jx-fs-micro);
  letter-spacing: var(--jx-tracking-eyebrow);
  text-transform: uppercase;
}

.type-card__definition p { margin: var(--jx-space-2) 0 0; color: var(--jx-ink); }

.type-card__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jx-space-5);
}

.type-card__section { min-width: 0; }
.type-card__section h4 { margin: 0 0 var(--jx-space-3); font-size: var(--jx-fs-sm); }
.type-card__section p { margin: 0; color: var(--jx-ink-2); }

.type-api-list,
.type-card__lesson-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--jx-space-2);
  list-style: none;
}

.type-api-list li {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--jx-space-2);
  align-items: flex-start;
  padding-block: var(--jx-space-2);
  border-bottom: 1px solid var(--jx-rule);
}

.type-api-list li:last-child { border-bottom: 0; }
.type-api-list code { overflow-wrap: anywhere; }
.type-card__empty-line { font-size: var(--jx-fs-sm); }

.type-card__facts { margin: 0; display: grid; gap: var(--jx-space-3); }
.type-card__fact { display: grid; gap: var(--jx-space-1); }
.type-card__fact dt { color: var(--jx-ink-muted); font-family: var(--jx-font-mono); font-size: var(--jx-fs-micro); text-transform: uppercase; }
.type-card__fact dd { margin: 0; color: var(--jx-ink-2); }

.type-card__lesson-list li {
  display: grid;
  gap: var(--jx-space-1);
  padding: var(--jx-space-3);
  background: var(--jx-surface-sunk);
  border-radius: var(--jx-radius-2);
}

.type-card__lesson-list span { color: var(--jx-ink-muted); font-size: var(--jx-fs-sm); }
.type-card__experiment { display: grid; gap: var(--jx-space-3); }
.type-card__source { overflow-wrap: anywhere; }
.type-card__command { color: var(--jx-ink-muted); font-size: var(--jx-fs-sm); }

.type-card__caveat,
.lab-type-empty {
  padding: var(--jx-space-4);
  color: var(--jx-ink-muted);
  background: var(--jx-surface-sunk);
  border-radius: var(--jx-radius-2);
  font-size: var(--jx-fs-sm);
}

.lab-type-empty { grid-column: 1 / -1; margin: 0; }

.lab-pipeline {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--jx-rule-strong);
  list-style: none;
  counter-reset: pipeline;
}

.lab-pipeline li {
  min-width: 0;
  padding: var(--jx-space-5);
  color: var(--jx-ink);
  border-right: 1px solid var(--jx-rule);
  font-family: var(--jx-font-mono);
  font-size: var(--jx-fs-sm);
  overflow-wrap: anywhere;
  counter-increment: pipeline;
}

.lab-pipeline li:last-child { border-right: 0; }
.lab-pipeline li::before { content: "0" counter(pipeline) " / "; color: var(--lab-signal); }
.lab-note { max-width: var(--jx-measure-body); margin: var(--jx-space-5) 0 0; color: var(--jx-ink-muted); }

.lab-evidence-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--jx-rule-strong);
  list-style: none;
}

.lab-evidence-list li {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--jx-space-4);
  padding: var(--jx-space-5);
  border-bottom: 1px solid var(--jx-rule);
}

.lab-evidence-list li:nth-child(odd) { border-right: 1px solid var(--jx-rule); }
.lab-evidence-list li:nth-last-child(-n + 2) { border-bottom: 0; }
.lab-evidence-list p { margin: var(--jx-space-2) 0 0; color: var(--jx-ink-muted); font-size: var(--jx-fs-sm); }

.lab-run {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(var(--jx-space-6), 6vw, var(--jx-space-8));
  align-items: center;
}

.lab-run h2 { margin-block: var(--jx-space-3); }
.lab-run p { color: var(--jx-ink-muted); }
.lab-run pre { margin: 0; }
.lab-limit { padding: var(--jx-space-5); border-inline-start: 3px solid var(--jx-state-building); background: var(--jx-surface-sunk); border-radius: var(--jx-radius-3); }

@media (max-width: 760px) {
  .lab-hero,
  .lab-section__heading,
  .lab-run { grid-template-columns: 1fr; }

  .lab-hero { gap: var(--jx-space-6); }
  .lab-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--jx-space-5); }
  .lab-mark { width: 56px; height: 56px; margin: 0; }
  .lab-card-grid,
  .lab-evidence-list,
  .lab-type-grid { grid-template-columns: 1fr; }
  .lab-card + .lab-card { border-left: 0; border-top: 1px solid var(--jx-rule); }
  .lab-screen-grid { grid-template-columns: 1fr; }
  .lab-screen-grid figure { display: grid; grid-template-columns: minmax(0, .78fr) minmax(120px, .22fr); gap: var(--jx-space-4); align-items: start; }
  .lab-screen-grid figcaption { margin: 0; }
  .lab-pipeline { grid-template-columns: 1fr; }
  .lab-pipeline li { border-right: 0; border-bottom: 1px solid var(--jx-rule); }
  .lab-pipeline li:last-child { border-bottom: 0; }
  .lab-evidence-list li,
  .lab-evidence-list li:nth-child(odd),
  .lab-evidence-list li:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--jx-rule); }
  .lab-evidence-list li:last-child { border-bottom: 0; }
  .lab-type-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-filter--query { grid-column: 1 / -1; }
  .lab-type-toolbar { align-items: flex-start; flex-direction: column; }
  .type-card__summary { min-height: 0; }
}

@media (max-width: 460px) {
  .lab-facts { grid-template-columns: 1fr; }
  .lab-screen-grid figure { grid-template-columns: 1fr; }
  .lab-screen-grid figcaption { margin-top: var(--jx-space-3); }
  .lab-type-controls,
  .type-card__columns { grid-template-columns: 1fr; }
  .lab-filter--query { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-control-button { transition: none; }
}