/* =========================================================
   Simbatch Public Core — 组件库样式
   Soft Enterprise Intelligence（SIM-WEB-V2-006-001）
   依赖子主题 design tokens（:root 变量）
   ========================================================= */

/* ---------- 组件错误态（H-03/H-04 fail-closed 可视化） ---------- */
.sbx-component-error {
  background: var(--sbx-status-pending-bg);
  color: var(--sbx-status-pending-text);
  border: 1px dashed var(--sbx-status-pending-text);
  border-radius: var(--sbx-radius-md);
  padding: var(--sbx-space-3) var(--sbx-space-4);
  font-size: var(--sbx-text-sm);
  margin-block: var(--sbx-space-2);
}

/* ---------- 通用 ---------- */
.sbx-kicker {
  font-size: var(--sbx-text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sbx-teal-600);
  margin: 0 0 var(--sbx-space-3);
}
.sbx-note {
  font-size: var(--sbx-text-sm);
  color: var(--sbx-color-text-muted);
  border-left: 3px solid var(--sbx-teal-500);
  padding-left: var(--sbx-space-3);
  margin-top: var(--sbx-space-4);
}

/* =========================================================
   Button — Primary / Secondary / Text
   ========================================================= */
.sbx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sbx-gap-inline);
  min-height: var(--sbx-touch-target); /* M-05/H-05：按钮 44x44 */
  min-width: var(--sbx-touch-target);
  padding: var(--sbx-btn-pad);
  border-radius: var(--sbx-radius-pill);
  font-weight: 600;
  font-size: var(--sbx-text-body);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--sbx-transition-fast), color var(--sbx-transition-fast),
              border-color var(--sbx-transition-fast), box-shadow var(--sbx-transition-fast);
}
.sbx-btn--primary {
  background: var(--sbx-teal-600);
  color: var(--sbx-on-accent);
  box-shadow: var(--sbx-shadow-xs);
}
.sbx-btn--primary:hover {
  background: var(--sbx-teal-700);
  color: var(--sbx-on-accent);
  box-shadow: var(--sbx-shadow-sm);
}
.sbx-btn--secondary {
  background: var(--sbx-surface);
  color: var(--sbx-navy-800);
  border-color: var(--sbx-border-input); /* H-05：交互控件边界 >=3:1 */
}
.sbx-btn--secondary:hover {
  border-color: var(--sbx-teal-500);
  color: var(--sbx-teal-700);
}
.sbx-btn--text {
  background: transparent;
  color: var(--sbx-teal-600);
  padding-inline: var(--sbx-btn-pad-text);
}
.sbx-btn--text:hover { color: var(--sbx-teal-700); text-decoration: underline; }
/* H-03（R5）：深色表面上的文字按钮改用深色文字 token
   （teal-600/700 在 navy-800 上仅 3.11/2.15:1，禁止该组合） */
.sbx-section--navy .sbx-btn--text,
.sbx-footer .sbx-btn--text {
  color: var(--sbx-link-on-dark);
}
.sbx-section--navy .sbx-btn--text:hover,
.sbx-footer .sbx-btn--text:hover {
  color: var(--sbx-link-on-dark-hover);
}
/* 兼容旧变体名：ghost = 深色底上的次级按钮 */
.sbx-btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

/* =========================================================
   Hero — brand（暖白 + 柔和光晕，默认） / light / navy(旧名兼容→brand)
   ========================================================= */
.sbx-hero {
  padding-block: var(--sbx-section-y);
  background:
    radial-gradient(var(--sbx-hero-glow-size-a) at 88% -10%, var(--sbx-hero-glow-teal), transparent 60%),
    radial-gradient(var(--sbx-hero-glow-size-b) at -10% 110%, var(--sbx-hero-glow-blue), transparent 55%),
    var(--sbx-bg);
}
.sbx-hero--light { background: var(--sbx-surface); }
.sbx-hero__inner { max-width: var(--sbx-measure-hero); }
.sbx-hero__title {
  font-size: var(--sbx-text-hero);
  line-height: var(--sbx-leading-tight);
  letter-spacing: -0.02em;
  color: var(--sbx-navy-800);
  margin: 0 0 var(--sbx-space-4);
}
.sbx-hero__lead {
  font-size: var(--sbx-text-lead);
  color: var(--sbx-text-secondary);
  max-width: var(--sbx-measure-lead);
  margin: 0 0 var(--sbx-space-6);
}
.sbx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sbx-space-3);
}

/* ---------- Section ---------- */
.sbx-section { padding-block: var(--sbx-section-y); }
.sbx-section--alt { background: var(--sbx-soft-gray); }
.sbx-section--blue { background: var(--sbx-soft-blue); }
.sbx-section--navy {
  background: var(--sbx-navy-800);
  color: var(--sbx-color-text-invert);
}
/* R5（H-03）：双类选择器 (0,2,1)，胜过主题 style.css 后声明的
   `.sbx-site h2/h3` 基线色，保证 navy 区标题始终 on-accent */
.sbx-section.sbx-section--navy h2, .sbx-section.sbx-section--navy h3 { color: var(--sbx-on-accent); }
.sbx-section--navy .sbx-kicker { color: var(--sbx-footer-heading); }
/* H-03（R5）：navy 区内容链接（无类名的正文链接）走深色链接 token，
   覆盖 entry-content 的 teal-600 缺省（navy-800 上对比不足） */
.sbx-section--navy a:not([class]) {
  color: var(--sbx-link-on-dark);
  text-decoration: underline;
}
.sbx-section--navy a:not([class]):hover {
  color: var(--sbx-link-on-dark-hover);
}
.sbx-section--navy .sbx-note {
  color: var(--sbx-footer-soft);
  border-left-color: var(--sbx-link-on-dark);
}
.sbx-section__title {
  font-size: var(--sbx-text-h2);
  letter-spacing: -0.015em;
  margin: 0 0 var(--sbx-space-3);
}
.sbx-section__lead {
  font-size: var(--sbx-text-lg);
  color: var(--sbx-text-secondary);
  max-width: var(--sbx-measure-text);
  margin: 0 0 var(--sbx-space-6);
}
.sbx-section--navy .sbx-section__lead { color: var(--sbx-footer-soft); }

/* =========================================================
   Workflow — 产品主线（7 步）与价值流（5 步）共用卡片
   ========================================================= */
.sbx-workflow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sbx-grid-gap);
}
.sbx-workflow--value { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sbx-workflow__step { position: relative; }
.sbx-workflow__card {
  display: flex;
  flex-direction: column;
  gap: var(--sbx-space-1);
  height: 100%;
  padding: var(--sbx-card-pad);
  background: var(--sbx-surface);
  border: 1px solid var(--sbx-border);
  border-radius: var(--sbx-radius-lg);
  text-decoration: none;
  color: var(--sbx-color-text);
  box-shadow: var(--sbx-shadow-xs);
  transition: transform var(--sbx-transition-fast), box-shadow var(--sbx-transition-fast), border-color var(--sbx-transition-fast);
}
a.sbx-workflow__card:hover {
  transform: translateY(var(--sbx-hover-lift));
  border-color: var(--sbx-teal-500);
  box-shadow: var(--sbx-shadow-md);
}
.sbx-workflow__num {
  font-family: var(--sbx-font-mono);
  font-size: var(--sbx-text-label);
  color: var(--sbx-teal-600);
}
.sbx-workflow__label { font-weight: 700; line-height: var(--sbx-leading-snug); color: var(--sbx-navy-800); }
.sbx-workflow__en {
  font-size: var(--sbx-text-label);
  letter-spacing: 0.05em;
  color: var(--sbx-text-secondary);
}
.sbx-workflow__desc {
  font-size: var(--sbx-text-sm);
  color: var(--sbx-text-secondary);
  margin-top: var(--sbx-space-2);
}
/* 步骤间连接箭头（桌面） */
.sbx-workflow--value .sbx-workflow__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: calc(-0.5 * var(--sbx-grid-gap) - 0.4em);
  top: 50%;
  transform: translateY(-50%);
  color: var(--sbx-teal-500);
  font-weight: 700;
  pointer-events: none;
}
@media (max-width: 1279px) {
  .sbx-workflow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sbx-workflow--value { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .sbx-workflow, .sbx-workflow--value { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sbx-workflow--value .sbx-workflow__step::after { content: none; }
}
@media (max-width: 599px) {
  .sbx-workflow, .sbx-workflow--value { grid-template-columns: 1fr; }
}

/* =========================================================
   Status Badge — public_product_status 五态 + 占位
   ========================================================= */
.sbx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sbx-gap-inline-md);
  padding: var(--sbx-pad-badge);
  border-radius: var(--sbx-radius-pill);
  font-size: var(--sbx-text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.sbx-badge__dot {
  width: var(--sbx-dot-size);
  height: var(--sbx-dot-size);
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* H-02：状态文字不降透明度、不缩小（桌面 14px / 移动 13px 由 .sbx-badge 控制） */
.sbx-badge__en { font-weight: 500; font-size: inherit; }
@media (max-width: 599px) {
  .sbx-badge { font-size: var(--sbx-text-sm-mobile); } /* 13px：H-02 移动端下限 */
}
.sbx-badge--available { background: var(--sbx-status-available-bg); color: var(--sbx-status-available-text); }
.sbx-badge--early     { background: var(--sbx-status-early-bg);     color: var(--sbx-status-early-text); }
.sbx-badge--dev       { background: var(--sbx-status-dev-bg);       color: var(--sbx-status-dev-text); }
.sbx-badge--pilot     { background: var(--sbx-status-pilot-bg);     color: var(--sbx-status-pilot-text); }
.sbx-badge--roadmap   { background: var(--sbx-status-roadmap-bg);   color: var(--sbx-status-roadmap-text); border: 1px dashed var(--sbx-border-strong); }
.sbx-badge--pending   { background: var(--sbx-status-pending-bg);   color: var(--sbx-status-pending-text); }
/* 旧类名兼容 */
.sbx-badge--internal  { background: var(--sbx-status-pilot-bg);     color: var(--sbx-status-pilot-text); }
.sbx-badge--ok        { background: var(--sbx-status-available-bg); color: var(--sbx-status-available-text); }

.sbx-chip {
  display: inline-block;
  padding: var(--sbx-pad-chip);
  border-radius: var(--sbx-radius-pill);
  background: var(--sbx-teal-100);
  color: var(--sbx-teal-700);
  font-size: var(--sbx-text-label);
  font-weight: 600;
}
.sbx-chip--muted { background: var(--sbx-soft-gray); color: var(--sbx-text-secondary); }

/* =========================================================
   Card — Module / Knowledge / Sample / Case
   ========================================================= */
.sbx-grid {
  display: grid;
  gap: var(--sbx-grid-gap);
}
.sbx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .sbx-grid--3, .sbx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .sbx-grid--2, .sbx-grid--3, .sbx-grid--4 { grid-template-columns: 1fr; }
}

.sbx-card {
  background: var(--sbx-surface);
  border: 1px solid var(--sbx-border);
  border-radius: var(--sbx-radius-lg);
  padding: var(--sbx-card-pad);
  box-shadow: var(--sbx-shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--sbx-space-2);
  transition: box-shadow var(--sbx-transition-fast), border-color var(--sbx-transition-fast), transform var(--sbx-transition-fast);
}
.sbx-card:hover { box-shadow: var(--sbx-shadow-sm); }
.sbx-card__title { font-size: var(--sbx-text-h3); margin: 0; }
.sbx-card__title a { color: var(--sbx-navy-800); text-decoration: none; }
.sbx-card__title a:hover { color: var(--sbx-teal-700); }
.sbx-card__desc { color: var(--sbx-text-secondary); font-size: var(--sbx-text-sm); margin: 0; }
.sbx-card__desc p { margin: 0 0 var(--sbx-space-2); font-size: var(--sbx-text-sm); }
.sbx-card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sbx-space-2); align-items: center; }

/* 卡片变体 */
.sbx-card--module { border-top: 3px solid var(--sbx-teal-500); }
.sbx-card--knowledge { background: linear-gradient(var(--sbx-grad-angle-fade), var(--sbx-soft-blue), var(--sbx-surface) 55%); }
.sbx-card--sample { background: linear-gradient(var(--sbx-grad-angle-fade), var(--sbx-soft-green), var(--sbx-surface) 55%); }
.sbx-card--case { border-left: 3px solid var(--sbx-teal-500); background: var(--sbx-surface); }

.sbx-section--navy .sbx-card {
  background: var(--sbx-navy-700);
  border-color: var(--sbx-footer-divider);
}
.sbx-section--navy .sbx-card__title a,
.sbx-section--navy .sbx-card__title { color: var(--sbx-on-accent); }
.sbx-section--navy .sbx-card__desc,
.sbx-section--navy .sbx-card__desc p { color: var(--sbx-footer-soft); }

/* =========================================================
   Evidence Block — Claim / Evidence / Verified Date / Status
   （AEO/GEO 证据呈现基础；schema-ready，不注入虚构内容）
   ========================================================= */
.sbx-evidence {
  background: var(--sbx-surface);
  border: 1px solid var(--sbx-border);
  border-left: 4px solid var(--sbx-teal-500);
  border-radius: var(--sbx-radius-md);
  padding: var(--sbx-card-pad);
  box-shadow: var(--sbx-shadow-xs);
  max-width: var(--sbx-measure-block);
}
.sbx-evidence__claim {
  font-size: var(--sbx-text-lg);
  font-weight: 600;
  color: var(--sbx-navy-800);
  margin: 0 0 var(--sbx-space-3);
}
.sbx-evidence__body {
  color: var(--sbx-text-secondary);
  font-size: var(--sbx-text-sm);
  margin: 0 0 var(--sbx-space-4);
}
.sbx-evidence__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sbx-space-3);
  align-items: center;
  font-size: var(--sbx-text-sm);
  color: var(--sbx-text-secondary);
  border-top: 1px solid var(--sbx-border);
  padding-top: var(--sbx-space-3);
  margin: 0;
}
.sbx-evidence__meta dt {
  font-size: var(--sbx-text-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sbx-text-secondary);
  margin: 0;
}
.sbx-evidence__meta dd { margin: 0 var(--sbx-space-4) 0 0; }

/* =========================================================
   表格（状态板）
   ========================================================= */
.sbx-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sbx-border);
  border-radius: var(--sbx-radius-md);
  background: var(--sbx-surface);
  box-shadow: var(--sbx-shadow-xs);
}
.sbx-table {
  width: 100%;
  border-collapse: collapse;
  min-width: var(--sbx-table-min-w);
  font-size: var(--sbx-text-sm);
}
.sbx-table th, .sbx-table td {
  text-align: left;
  padding: var(--sbx-space-3) var(--sbx-space-4);
  border-bottom: 1px solid var(--sbx-border);
  vertical-align: top;
}
.sbx-table thead th {
  background: var(--sbx-soft-gray);
  color: var(--sbx-navy-800);
  font-size: var(--sbx-text-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sbx-table tbody tr:last-child th,
.sbx-table tbody tr:last-child td { border-bottom: 0; }
.sbx-status-board__excerpt {
  display: block;
  font-weight: 400;
  color: var(--sbx-text-secondary);
  margin-top: var(--sbx-space-1);
}

/* ---------- 样品间 before/after ---------- */
.sbx-sample__visual {
  display: flex;
  align-items: stretch;
  gap: var(--sbx-space-2);
  margin-bottom: var(--sbx-space-3);
}
.sbx-sample__pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--sbx-sample-min-h);
  border-radius: var(--sbx-radius-md);
  font-size: var(--sbx-text-sm);
  font-weight: 600;
  line-height: var(--sbx-leading-normal);
}
.sbx-sample__pane small { font-weight: 400; opacity: var(--sbx-opacity-soft); }
.sbx-sample__pane--before {
  background: repeating-linear-gradient(var(--sbx-stripe-angle), var(--sbx-soft-gray), var(--sbx-soft-gray) var(--sbx-stripe-step-a), var(--sbx-stripe) var(--sbx-stripe-step-a), var(--sbx-stripe) var(--sbx-stripe-step-b));
  color: var(--sbx-text-secondary);
  border: 1px dashed var(--sbx-border-strong);
}
.sbx-sample__pane--after {
  background: linear-gradient(var(--sbx-grad-angle-tilt), var(--sbx-soft-green), var(--sbx-teal-100));
  color: var(--sbx-teal-700);
  border: 1px solid var(--sbx-teal-500);
}
.sbx-sample__arrow { align-self: center; color: var(--sbx-teal-600); font-weight: 700; }

/* ---------- 时间线（Changelog） ---------- */
.sbx-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.sbx-timeline::before {
  content: "";
  position: absolute;
  left: var(--sbx-timeline-inset);
  top: var(--sbx-timeline-inset);
  bottom: var(--sbx-timeline-inset);
  width: var(--sbx-timeline-line);
  background: var(--sbx-border);
}
.sbx-timeline__item { position: relative; padding: 0 0 var(--sbx-space-6) var(--sbx-space-6); }
.sbx-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--sbx-timeline-inset);
  width: var(--sbx-timeline-dot);
  height: var(--sbx-timeline-dot);
  border-radius: 50%;
  background: var(--sbx-teal-500);
  border: 3px solid var(--sbx-surface);
  box-shadow: var(--sbx-ring-accent);
}
.sbx-timeline__date {
  margin: 0 0 var(--sbx-space-1);
  font-size: var(--sbx-text-sm);
  color: var(--sbx-text-secondary);
  display: flex;
  gap: var(--sbx-space-2);
  align-items: center;
  flex-wrap: wrap;
}
.sbx-timeline__title { margin: 0 0 var(--sbx-space-2); font-size: var(--sbx-text-h3); }
.sbx-timeline__body { color: var(--sbx-text-secondary); font-size: var(--sbx-text-sm); max-width: var(--sbx-measure-body); }

/* ---------- 系统状态 ---------- */
.sbx-syslist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sbx-border);
  border-radius: var(--sbx-radius-md);
  background: var(--sbx-surface);
  box-shadow: var(--sbx-shadow-xs);
}
.sbx-syslist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sbx-space-3);
  padding: var(--sbx-space-4);
  border-bottom: 1px solid var(--sbx-border);
  margin: 0;
}
.sbx-syslist__item:last-child { border-bottom: 0; }
.sbx-syslist__name { font-weight: 600; color: var(--sbx-navy-800); }
@media (max-width: 599px) {
  .sbx-syslist__item { flex-direction: column; align-items: flex-start; }
}

/* ---------- FAQ ---------- */
.sbx-faq { max-width: var(--sbx-measure-block); }
.sbx-faq__item {
  border: 1px solid var(--sbx-border);
  border-radius: var(--sbx-radius-md);
  background: var(--sbx-surface);
  margin-bottom: var(--sbx-space-3);
  padding: 0;
  box-shadow: var(--sbx-shadow-xs);
}
.sbx-faq__q {
  cursor: pointer;
  font-weight: 600;
  color: var(--sbx-navy-800);
  padding: var(--sbx-space-4);
  list-style-position: inside;
}
.sbx-faq__q:hover { color: var(--sbx-teal-700); }
.sbx-faq__a { padding: 0 var(--sbx-space-4) var(--sbx-space-4); color: var(--sbx-text-secondary); }

/* ---------- 数据样例 ---------- */
.sbx-datasample {
  margin: 0;
  border-radius: var(--sbx-radius-md);
  overflow: hidden;
  border: 1px solid var(--sbx-border);
  box-shadow: var(--sbx-shadow-sm);
}
.sbx-datasample figcaption {
  background: var(--sbx-navy-800);
  color: var(--sbx-footer-heading);
  font-size: var(--sbx-text-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: var(--sbx-space-2) var(--sbx-space-4);
}
.sbx-datasample pre {
  margin: 0;
  padding: var(--sbx-space-4);
  background: var(--sbx-navy-900);
  color: var(--sbx-code-text);
  font-family: var(--sbx-font-mono);
  font-size: var(--sbx-text-sm);
  line-height: var(--sbx-leading-relaxed);
  overflow-x: auto;
}

/* ---------- CTA 横幅 ---------- */
.sbx-cta {
  background: var(--sbx-soft-blue);
  padding-block: var(--sbx-space-8);
}
.sbx-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sbx-space-5);
  flex-wrap: wrap;
  background: var(--sbx-surface);
  border: 1px solid var(--sbx-border);
  border-radius: var(--sbx-radius-xl);
  padding: var(--sbx-space-7) var(--sbx-space-6);
  box-shadow: var(--sbx-shadow-md);
}
.sbx-cta__title { color: var(--sbx-navy-800); margin: 0 0 var(--sbx-space-2); font-size: var(--sbx-text-h2); }
.sbx-cta__lead { margin: 0; color: var(--sbx-text-secondary); }

/* ---------- 表单 ---------- */
.sbx-form { max-width: var(--sbx-measure-form); }
.sbx-form__row { display: flex; flex-direction: column; gap: var(--sbx-space-2); margin-bottom: var(--sbx-space-4); }
.sbx-form label { font-weight: 600; font-size: var(--sbx-text-sm); color: var(--sbx-navy-800); }
.sbx-form__req { color: var(--sbx-teal-600); }
.sbx-form input, .sbx-form select, .sbx-form textarea {
  font: inherit;
  padding: var(--sbx-input-pad);
  border: 1px solid var(--sbx-border-input);
  border-radius: var(--sbx-radius-sm);
  background: var(--sbx-surface);
  color: var(--sbx-color-text);
}
.sbx-form input:hover, .sbx-form select:hover, .sbx-form textarea:hover {
  border-color: var(--sbx-teal-500);
}
.sbx-form__msg { font-weight: 600; color: var(--sbx-teal-700); min-height: var(--sbx-msg-min-h); }

/* =========================================================
   Design System Foundation V1 — six core semantic components
   Token → Component; page composition remains outside this file.
   ========================================================= */

/* ---------- Shared trust labels ---------- */
.sbx-evidence-type {
  display: inline-flex;
  align-items: center;
  min-height: var(--sbx-touch-target);
  padding-inline: var(--sbx-space-inline-md);
  border-radius: var(--sbx-radius-full);
  background: var(--sbx-color-signal-info-bg);
  color: var(--sbx-color-signal-info-text);
  font-size: var(--sbx-type-body-small-size);
  font-weight: 600;
  line-height: var(--sbx-type-body-small-line);
}

/* ---------- Hero V1: compact semantic stack → wide split ---------- */
.sbx-hero__inner {
  display: grid;
  gap: var(--sbx-space-stack-xl);
  max-width: var(--sbx-layout-container-content);
}
.sbx-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sbx-hero__title {
  max-width: var(--sbx-hero-title-max-width);
  font-size: var(--sbx-type-heading-1-size);
  line-height: var(--sbx-type-heading-1-line);
  letter-spacing: var(--sbx-type-tracking-heading);
}
.sbx-hero--category .sbx-hero__title {
  font-size: var(--sbx-type-display-1-size);
  line-height: var(--sbx-type-display-1-line);
  letter-spacing: var(--sbx-type-tracking-display);
}
.sbx-hero--product .sbx-hero__title {
  font-size: var(--sbx-type-display-2-size);
  line-height: var(--sbx-type-display-2-line);
}
.sbx-hero__lead {
  max-width: var(--sbx-hero-lead-max-width);
  font-size: var(--sbx-type-body-lead-size);
  line-height: var(--sbx-type-body-lead-line);
}
.sbx-hero__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sbx-space-inline-sm);
  margin-bottom: var(--sbx-space-stack-lg);
}
.sbx-hero__actions {
  align-items: stretch;
  flex-direction: column;
  width: 100%;
}
.sbx-hero__actions .sbx-btn {
  width: auto;
}
.sbx-hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sbx-space-stack-md);
  padding: var(--sbx-component-card-padding);
  border: var(--sbx-border-width-default) solid var(--sbx-component-card-border);
  border-radius: var(--sbx-radius-xl);
  background: var(--sbx-component-card-surface);
  box-shadow: var(--sbx-elevation-low);
}
.sbx-hero__media {
  margin: var(--sbx-space-0);
  overflow: hidden;
  border-radius: var(--sbx-radius-lg);
}
.sbx-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}
.sbx-hero__media figcaption,
.sbx-hero__proof {
  margin: var(--sbx-space-stack-sm) var(--sbx-space-0) var(--sbx-space-0);
  color: var(--sbx-color-text-secondary);
  font-size: var(--sbx-type-body-small-size);
  line-height: var(--sbx-type-body-small-line);
}

/* ---------- Capability Card ---------- */
.sbx-capability-card {
  display: flex;
  flex-direction: column;
  gap: var(--sbx-component-card-gap);
  height: 100%;
  padding: var(--sbx-component-card-padding);
  border: var(--sbx-border-width-default) solid var(--sbx-component-card-border);
  border-radius: var(--sbx-radius-lg);
  background: var(--sbx-component-card-surface);
  box-shadow: var(--sbx-elevation-none);
  transition: border-color var(--sbx-transition-fast), box-shadow var(--sbx-transition-fast);
}
.sbx-capability-card:hover {
  border-color: var(--sbx-color-border-brand);
  box-shadow: var(--sbx-elevation-low);
}
.sbx-capability-card--featured {
  border-color: var(--sbx-color-border-brand);
  background: var(--sbx-color-background-brand-subtle);
}
.sbx-capability-card__header,
.sbx-capability-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--sbx-space-stack-sm);
}
.sbx-capability-card__context {
  margin: var(--sbx-space-0);
  color: var(--sbx-color-text-brand);
  font-size: var(--sbx-type-label-size);
  font-weight: 600;
  line-height: var(--sbx-type-label-line);
  letter-spacing: var(--sbx-type-tracking-label);
  text-transform: uppercase;
}
.sbx-capability-card__title {
  margin: var(--sbx-space-0);
  color: var(--sbx-color-text-primary);
  font-size: var(--sbx-type-heading-3-size);
  line-height: var(--sbx-type-heading-3-line);
}
.sbx-capability-card__status,
.sbx-capability-card__definition,
.sbx-capability-card__action {
  margin: var(--sbx-space-0);
}
.sbx-capability-card__definition {
  color: var(--sbx-color-text-secondary);
  line-height: var(--sbx-type-body-line);
}
.sbx-capability-card__details {
  margin: var(--sbx-space-0);
}
.sbx-capability-card__details div {
  display: flex;
  flex-direction: column;
  gap: var(--sbx-space-stack-xs);
}
.sbx-capability-card__details dt {
  color: var(--sbx-color-text-tertiary);
  font-size: var(--sbx-type-label-size);
  font-weight: 600;
  line-height: var(--sbx-type-label-line);
}
.sbx-capability-card__details dd {
  margin: var(--sbx-space-0);
  color: var(--sbx-color-text-primary);
  line-height: var(--sbx-type-body-line);
}
.sbx-capability-card__action {
  margin-top: auto;
}
.sbx-capability-card__action a,
.sbx-sample-card__action a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sbx-touch-target);
  color: var(--sbx-color-action-link);
  font-weight: 600;
  text-decoration: underline;
}
.sbx-capability-card__action a:hover,
.sbx-sample-card__action a:hover {
  color: var(--sbx-color-action-link-hover);
}

/* ---------- Architecture Diagram ---------- */
.sbx-architecture {
  margin: var(--sbx-space-0);
  padding: var(--sbx-component-card-padding);
  border: var(--sbx-border-width-default) solid var(--sbx-component-card-border);
  border-radius: var(--sbx-radius-xl);
  background: var(--sbx-color-background-subtle);
}
.sbx-architecture__caption {
  max-width: var(--sbx-type-measure-wide);
  margin-bottom: var(--sbx-space-stack-xl);
}
.sbx-architecture__title {
  margin: var(--sbx-space-0) var(--sbx-space-0) var(--sbx-space-stack-sm);
  color: var(--sbx-color-text-primary);
  font-size: var(--sbx-type-heading-2-size);
  line-height: var(--sbx-type-heading-2-line);
}
.sbx-architecture__summary {
  max-width: var(--sbx-type-measure-body);
  margin: var(--sbx-space-0);
  color: var(--sbx-color-text-secondary);
  line-height: var(--sbx-type-body-line);
}
.sbx-architecture__stages {
  display: grid;
  gap: var(--sbx-space-grid);
  margin: var(--sbx-space-0);
  padding-left: var(--sbx-space-6);
  list-style: decimal;
}
.sbx-architecture__stage {
  position: relative;
  padding: var(--sbx-component-card-padding);
  border: var(--sbx-border-width-default) solid var(--sbx-component-card-border);
  border-left: var(--sbx-border-width-relationship) solid var(--sbx-architecture-connector);
  border-radius: var(--sbx-radius-lg);
  background: var(--sbx-architecture-node-bg);
}
.sbx-architecture__stage::marker {
  color: var(--sbx-color-text-brand);
  font-weight: 700;
}
.sbx-architecture__stage--memory {
  background: var(--sbx-architecture-memory-bg);
  border-color: var(--sbx-color-border-brand);
}
.sbx-architecture__stage-title {
  margin: var(--sbx-space-0) var(--sbx-space-0) var(--sbx-space-stack-sm);
  color: var(--sbx-color-text-primary);
  font-size: var(--sbx-type-heading-4-size);
  line-height: var(--sbx-type-heading-4-line);
}
.sbx-architecture__stage-description,
.sbx-architecture__stage-description p {
  margin: var(--sbx-space-0);
  color: var(--sbx-color-text-secondary);
  font-size: var(--sbx-type-body-small-size);
  line-height: var(--sbx-type-body-small-line);
}
.sbx-architecture__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sbx-space-stack-xs);
  margin: var(--sbx-space-stack-lg) var(--sbx-space-0) var(--sbx-space-0);
  padding-top: var(--sbx-space-stack-md);
  border-top: var(--sbx-border-width-default) solid var(--sbx-color-border-subtle);
  color: var(--sbx-color-text-secondary);
  font-size: var(--sbx-type-body-small-size);
  line-height: var(--sbx-type-body-small-line);
}

/* ---------- Evidence Card ---------- */
.sbx-evidence-card {
  padding: var(--sbx-component-card-padding);
  border: var(--sbx-border-width-default) solid var(--sbx-component-card-border);
  border-radius: var(--sbx-radius-md);
  background: var(--sbx-component-card-surface);
  box-shadow: var(--sbx-elevation-none);
}
.sbx-evidence-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sbx-space-inline-sm);
  margin-bottom: var(--sbx-space-stack-md);
}
.sbx-evidence-card__state {
  display: inline-flex;
  align-items: center;
  min-height: var(--sbx-touch-target);
  padding-inline: var(--sbx-space-inline-md);
  border-radius: var(--sbx-radius-full);
  background: var(--sbx-color-surface-muted);
  color: var(--sbx-color-text-secondary);
  font-size: var(--sbx-type-body-small-size);
  font-weight: 600;
}
.sbx-evidence-card--review-due .sbx-evidence-card__state,
.sbx-evidence-card--superseded .sbx-evidence-card__state {
  background: var(--sbx-color-signal-warning-bg);
  color: var(--sbx-color-signal-warning-text);
}
.sbx-evidence-card__layout,
.sbx-evidence-card__content,
.sbx-evidence-card__meta {
  display: grid;
  gap: var(--sbx-space-stack-md);
}
.sbx-evidence-card__claim {
  margin: var(--sbx-space-0);
  color: var(--sbx-color-text-primary);
  font-size: var(--sbx-type-heading-3-size);
  line-height: var(--sbx-type-heading-3-line);
}
.sbx-evidence-card__finding,
.sbx-evidence-card__finding p {
  margin: var(--sbx-space-0);
  color: var(--sbx-color-text-secondary);
  line-height: var(--sbx-type-body-line);
}
.sbx-evidence-card__limitation {
  margin: var(--sbx-space-0);
  padding: var(--sbx-space-stack-md);
  border-radius: var(--sbx-radius-sm);
  background: var(--sbx-evidence-limit-bg);
  color: var(--sbx-color-signal-warning-text);
  line-height: var(--sbx-type-body-line);
}
.sbx-evidence-card__meta {
  margin: var(--sbx-space-0);
  padding-top: var(--sbx-space-stack-md);
  border-top: var(--sbx-border-width-default) solid var(--sbx-color-border-subtle);
}
.sbx-evidence-card__meta div {
  display: grid;
  gap: var(--sbx-space-stack-xs);
}
.sbx-evidence-card__meta dt {
  color: var(--sbx-color-text-tertiary);
  font-size: var(--sbx-type-label-size);
  font-weight: 600;
  line-height: var(--sbx-type-label-line);
}
.sbx-evidence-card__meta dd {
  margin: var(--sbx-space-0);
  color: var(--sbx-color-text-primary);
  overflow-wrap: anywhere;
}
.sbx-evidence-card__meta a {
  color: var(--sbx-color-action-link);
  text-decoration: underline;
}
.sbx-evidence-card__meta a:hover {
  color: var(--sbx-color-action-link-hover);
}

/* ---------- Sample Room Card ---------- */
.sbx-sample-card {
  display: grid;
  gap: var(--sbx-space-stack-lg);
  height: 100%;
  padding: var(--sbx-component-card-padding);
  border: var(--sbx-border-width-default) solid var(--sbx-component-card-border);
  border-radius: var(--sbx-radius-lg);
  background: var(--sbx-component-card-surface);
}
.sbx-sample-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--sbx-space-stack-md);
}
.sbx-sample-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sbx-space-inline-sm);
}
.sbx-sample-card__domain {
  color: var(--sbx-color-text-secondary);
  font-size: var(--sbx-type-body-small-size);
  font-weight: 600;
}
.sbx-sample-card__title,
.sbx-sample-card__summary,
.sbx-sample-card__memory,
.sbx-sample-card__reviewed,
.sbx-sample-card__action {
  margin: var(--sbx-space-0);
}
.sbx-sample-card__title {
  color: var(--sbx-color-text-primary);
  font-size: var(--sbx-type-heading-3-size);
  line-height: var(--sbx-type-heading-3-line);
}
.sbx-sample-card__summary,
.sbx-sample-card__memory {
  color: var(--sbx-color-text-secondary);
  line-height: var(--sbx-type-body-line);
}
.sbx-sample-card__reviewed {
  color: var(--sbx-color-text-tertiary);
  font-size: var(--sbx-type-body-small-size);
  line-height: var(--sbx-type-body-small-line);
}
.sbx-sample-card__action {
  margin-top: auto;
}
.sbx-sample-card__artifact {
  margin: var(--sbx-space-0);
  overflow: hidden;
  border: var(--sbx-border-width-default) solid var(--sbx-color-border-subtle);
  border-radius: var(--sbx-radius-md);
  background: var(--sbx-sample-artifact-bg);
}
.sbx-sample-card__artifact img {
  display: block;
  width: 100%;
  height: auto;
}
.sbx-sample-card__artifact-fallback {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sbx-space-stack-sm);
  min-height: var(--sbx-sample-min-h);
  padding: var(--sbx-component-card-padding);
  color: var(--sbx-color-text-primary);
}
.sbx-sample-card__artifact-fallback span {
  color: var(--sbx-color-text-secondary);
}
.sbx-sample-card__artifact figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--sbx-space-stack-xs);
  padding: var(--sbx-space-stack-md);
  color: var(--sbx-color-text-secondary);
  font-size: var(--sbx-type-body-small-size);
  line-height: var(--sbx-type-body-small-line);
}
.sbx-sample-card__artifact figcaption em {
  color: var(--sbx-color-signal-info-text);
  font-style: normal;
  font-weight: 600;
}

/* ---------- CTA Module ---------- */
.sbx-cta {
  padding-block: var(--sbx-space-section-compact);
  background: var(--sbx-color-background-subtle);
}
.sbx-cta__inner {
  display: grid;
  align-items: center;
  gap: var(--sbx-space-stack-xl);
  padding: var(--sbx-component-card-padding);
  border: var(--sbx-border-width-default) solid var(--sbx-component-card-border);
  border-radius: var(--sbx-radius-xl);
  background: var(--sbx-cta-surface);
  box-shadow: var(--sbx-elevation-low);
}
.sbx-cta--early-access .sbx-cta__inner {
  border-color: var(--sbx-color-border-brand);
}
.sbx-cta__content {
  max-width: var(--sbx-type-measure-lead);
}
.sbx-cta__title {
  margin: var(--sbx-space-0) var(--sbx-space-0) var(--sbx-space-stack-sm);
  font-size: var(--sbx-type-heading-2-size);
  line-height: var(--sbx-type-heading-2-line);
}
.sbx-cta__lead {
  margin: var(--sbx-space-0);
  line-height: var(--sbx-type-body-line);
}
.sbx-cta__expectation,
.sbx-cta__note {
  margin: var(--sbx-space-stack-md) var(--sbx-space-0) var(--sbx-space-0);
  color: var(--sbx-color-text-secondary);
  font-size: var(--sbx-type-body-small-size);
  line-height: var(--sbx-type-body-small-line);
}
.sbx-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sbx-space-inline-sm);
}
.sbx-cta__actions .sbx-btn {
  width: auto;
}

/* ---------- Medium: touch-safe two-up/inline actions ---------- */
@media (min-width: 37.5rem) {
  .sbx-hero__actions,
  .sbx-cta__actions {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .sbx-hero__actions .sbx-btn,
  .sbx-cta__actions .sbx-btn {
    width: auto;
  }
  .sbx-architecture__meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sbx-space-inline-lg);
  }
  .sbx-evidence-card__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Wide: spatial relationships without shrinking text ---------- */
@media (min-width: 64rem) {
  .sbx-hero--has-aside .sbx-hero__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
  }
  .sbx-architecture--pipeline .sbx-architecture__stages {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-left: var(--sbx-space-0);
    list-style-position: inside;
  }
  .sbx-architecture--pipeline .sbx-architecture__stage:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: calc(var(--sbx-space-grid) / -2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--sbx-architecture-connector);
    font-weight: 700;
  }
  .sbx-evidence-card__layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--sbx-space-grid);
  }
  .sbx-evidence-card__meta {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--sbx-space-0);
    padding-left: var(--sbx-space-stack-lg);
    border-top: var(--sbx-border-width-default) solid transparent;
    border-left: var(--sbx-border-width-default) solid var(--sbx-color-border-subtle);
  }
  .sbx-sample-card--featured {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: stretch;
  }
  .sbx-cta__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .sbx-cta__actions {
    justify-content: flex-end;
  }
}

/* ---------- Expanded: preserve reading measure, widen relationships only ---------- */
@media (min-width: 90rem) {
  .sbx-architecture {
    max-width: var(--sbx-layout-container-wide);
  }
}