/* 五个 demo 各自的门面样式。只写与共用外壳不同的部分。 */

/* ══ 1 · agent 工作台 ══════════════════════════════ */
.ws {
  display: grid;
  /* 360 而不是 320：todo-list 的任务标题带 truncate，320 下会被截成
     「读 registry，列出 157 条条目的…」，一个字都读不全。 */
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 900px) {
  .ws {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ws-side {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 14px;
}
@media (max-width: 900px) {
  .ws-side {
    position: static;
  }
}
.ws-h {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.ws-h--mt {
  margin-top: 10px;
}
.ws-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.ws-thread {
  display: grid;
  gap: 16px;
  min-width: 0;
  /* grid 子项默认 min-width:auto，会被内部 min-content 顶出来：
     窄屏实测气泡 380px 撑在 350px 的轨道里，整页横向溢出 9px。 */
  grid-template-columns: minmax(0, 1fr);
}
.ws-thread > * {
  min-width: 0;
  max-width: 100%;
}
.ws-muted {
  color: var(--muted);
}
.ws-composer {
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
}
.ws-hint {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* ══ 2 · 数值/文字动效 ════════════════════════════ */
.nm {
  display: grid;
  /* 隐式列默认是 auto：一旦某个子块有超宽内容（marquee 的两条轨道），
     整列会被撑到 max-content，页面横向溢出 687px。锁成 minmax(0,1fr) 才收得住。 */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
}
.nm > * {
  min-width: 0;
}
.nm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border-block: 1px solid var(--rule-soft);
}
.nm-cell {
  background: var(--bg);
  padding: 26px 0 22px;
  min-width: 0;
}
@media (min-width: 720px) {
  .nm-cell {
    padding-inline: 24px;
  }
  .nm-cell:first-child {
    padding-left: 0;
  }
}
.nm-cell--wide {
  grid-column: span 2;
}
@media (max-width: 719px) {
  .nm-cell--wide {
    grid-column: auto;
  }
}
.nm-k {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  font-family: var(--mono);
}
.nm-big {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  min-height: 1.1em;
}
.nm-scramble {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  min-height: 1.3em;
}
.nm-note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--muted);
}
.nm-strip {
  border-block: 1px solid var(--rule-soft);
  padding: 20px 0;
}
.nm-pill {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 26px;
  padding: 2px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  white-space: nowrap;
}
.nm-tilt-wrap {
  max-width: 560px;
}
.nm-tilt {
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
}
.nm-tilt-body {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.nm-text-reveal {
  padding: 20px 0 8px;
}
.nm-reveal-line {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ══ 3 · 编辑式排版 ══════════════════════════════ */
.ed {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  /* 同上：隐式列 auto 会被 marquee 的固有宽度撑破，窄屏直接横向溢出 1366px */
  min-width: 0;
}
.ed > * {
  min-width: 0;
}
@media (max-width: 860px) {
  .ed {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ed-toc {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 2px;
}
@media (max-width: 860px) {
  .ed-toc {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
    max-width: 100%;
  }
}
.ed-toc-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  text-align: left;
  color: var(--muted);
  transition: color 0.2s var(--ease);
  border-bottom: 1px solid transparent;
}
.ed-toc-item[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.ed-toc-item:hover {
  color: var(--ink);
}
.ed-toc-n {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent-ink);
}
.ed-toc-t {
  font-size: 15px;
}
.ed-art {
  max-width: 46em;
}
.ed-kicker {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.ed-lede {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 96, "SOFT" 20, "WONK" 1;
}
.ed-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 34px 0;
}
.ed-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.78;
}
.ed-cols b {
  font-weight: 500;
}
.ed-cols code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 2px;
}
.ed-opsz {
  margin-top: 34px;
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border-block: 1px solid var(--rule-soft);
}
.ed-opsz-row {
  background: var(--bg);
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 12px 0;
  overflow: hidden;
}
.ed-opsz-k {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  flex: 0 0 88px;
}
.ed-opsz-s {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-quote {
  margin: 40px 0;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.5;
}
.ed-numblock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-top: 32px;
  border-top: 1px solid var(--rule-soft);
}
.ed-bignum {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(72px, 12vw, 140px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 144, "wght" 200;
}
.ed-bignum-cap {
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
  align-self: end;
  max-width: 26em;
}
.ed-marquee {
  grid-column: 1 / -1;
  border-block: 1px solid var(--rule-soft);
  padding: 18px 0;
  margin-top: 24px;
}
.ed-marquee-word {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 24px;
  white-space: nowrap;
  opacity: 0.75;
}

/* ══ 4 · 实现方式对照台 ══════════════════════════ */
.lab {
  display: grid;
  gap: 0;
}
.lab-tabs {
  display: flex;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-bottom: 0;
}
.lab-tab {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg);
  border: 0;
  padding: 14px 12px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s var(--ease);
}
.lab-tab:hover {
  background: var(--surface);
}
.lab-tab[aria-selected="true"] {
  box-shadow: inset 0 2px 0 var(--accent);
}
.lab-tab-label {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.lab-tab-sub {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab-body {
  border: 1px solid var(--rule-soft);
  padding: clamp(22px, 3vw, 34px);
  min-height: 320px;
}
.stack-k {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.stack-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--muted);
  max-width: 46em;
}
.stack-note code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 2px;
}

/* A · 纯 CSS */
.css-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 88px;
}
.css-bars span {
  flex: 1 1 0;
  background: var(--accent);
  border-radius: 1px;
  transform-origin: bottom;
  animation: stack-bounce 1.15s var(--ease) infinite alternate;
}
@keyframes stack-bounce {
  from {
    transform: scaleY(0.18);
  }
  to {
    transform: scaleY(1);
  }
}
.css-steps {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.css-step {
  font-family: var(--mono);
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  animation: stack-step 2.4s var(--ease) infinite;
  animation-fill-mode: both;
}
@keyframes stack-step {
  0%,
  70% {
    opacity: 0.35;
    transform: translateY(0);
  }
  10%,
  55% {
    opacity: 1;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
}

/* B · beUI */
.stack-b {
  display: grid;
  gap: 4px;
}
.wheel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  padding: 8px 0 4px;
}
/* WheelPicker 是块级 flex 子项，默认会吃满整行 —— 两个滚轮各占一半宽度，
   中间的数字就飘到视口外。这里给它们固定栏宽，看起来才是「时:分」。 */
.wheel-row > div[role="listbox"] {
  width: 84px;
  flex: 0 0 84px;
}
.wheel-colon {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 200;
  opacity: 0.5;
}
.wave-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  max-width: 420px;
}
.wave-val {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  min-width: 2.4em;
  text-align: right;
}
.dock-demo {
  margin-top: 26px;
}

/* C · canvas */
.canvas-field {
  width: 100%;
  height: 240px;
  display: block;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink);
}

/* ══ 5 · 页脚五种 ═══════════════════════════════ */
.ftlab {
  display: grid;
  gap: 0;
}
.ftlab-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.ftlab-tab {
  background: var(--surface);
  border: 0;
  border-radius: 2px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ftlab-tab:hover {
  color: var(--ink);
}
.ftlab-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
}
.ftlab-body {
  border: 1px solid var(--rule-soft);
  padding: clamp(22px, 3vw, 40px);
  border-radius: 3px;
  min-height: 300px;
}

.ft {
  display: grid;
  gap: 22px;
}
.ft-h {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.ft-small {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.ft-link {
  display: block;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
  transition: color 0.15s var(--ease);
}
.ft-link:hover {
  color: var(--ink);
}
.ft-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  font-size: 14px;
  color: var(--muted);
}
.ft-bar-links {
  display: flex;
  gap: 16px;
}
.ft-bar-links a:hover {
  color: var(--ink);
}

/* Typographic */
.ft-wordmark {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(88px, 18vw, 200px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 144, "wght" 200;
}
.ft-typo-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: baseline;
}

/* Grid */
.ft-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
}
.ft-form {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.ft-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
}
.ft-btn {
  border: 0;
  padding: 8px 14px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  cursor: pointer;
}

/* Large type */
.ft-huge {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(56px, 11vw, 128px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144, "wght" 200;
}
.ft-large-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ft-large-link {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(22px, 3vw, 32px);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.2s var(--ease);
}
.ft-large-link:hover {
  border-bottom-color: var(--accent);
}

/* Animated */
.ft-marquee-word {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 28px;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.ft-marquee-word:hover {
  color: var(--accent);
}
.ft-acc {
  max-width: 560px;
}

/* Small type */
.ft-small-line {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 38em;
}
.ft-small-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

/* beUI 的 todo-list 与 agent-activity 给长标题挂 truncate（组件站上宽度固定，够用）。
   落到这里侧栏只有 360px，中文任务名会被切在半句上。
   规则：可以换行，但最多两行 —— 既不横切，也不让一条任务占掉整屏。 */
.ws .truncate,
.ws .line-clamp-none {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.ws h3.truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ══ 状态色覆盖（必须放在 ui.css 之后） ═══════════
/* 状态色（Tailwind 调色板的 500 档）。
 * 500 档是为浅底设计的：emerald-500 在纸白上 2.23:1、rose-500 3.38:1。：emerald-500 在纸白上 2.23:1、rose-500 3.38:1。
   这些值出现在 diff 的 +84 / −6 与完成勾选上，字号 13–15px，必须够 4.5。
   一律压到 700 档，深色模式再单独提亮一档 —— 两套都用显式属性选择器写清，
   不用 media query，也不让 !important 与层叠顺序打架（压缩后曾把它们并成一条错误规则）。 */
.text-emerald-500,
.text-emerald-600 {
  color: #06614a;
}
.text-rose-500,
.text-rose-600,
.text-red-500 {
  color: #93231a;
}
.text-amber-500 {
  color: #8a5a00;
}

[data-theme="dark"] .text-emerald-500,
[data-theme="dark"] .text-emerald-600 {
  color: #62d6be;
}
[data-theme="dark"] .text-rose-500,
[data-theme="dark"] .text-rose-600,
[data-theme="dark"] .text-red-500 {
  color: #f7a08f;
}
[data-theme="dark"] .text-amber-500 {
  color: #eec377;
}