/* blog-essay.css — 长文的排版组件表，供 /blog 的文章页使用。
   apex/build-content.mjs 生成的 .es-* 标记全部由这一份负责画。

   三条约束，每一条都是这个站上真实存在的门，不是风格偏好：
     · **零外链**：test-blog-contract.mjs 明写「no external script/stylesheet host —
       Google Fonts included, this site uses none」，线上 CSP 也是 font-src 'self'。
       所以字体只用 apex.css 已经定义的 --serif / --sans / --mono。
     · **零新颜色**：全部走 apex.css 的 token（--paper --surface --dim --line --line-2
       --brand --brand-ink --on-brand --soft --shadow-1）。主题换了它跟着换，不需要
       第二套深色规则。
     · **零 JS**：选模型那个交互是纯 CSS（radio + :checked ~），四组价格全部预渲染在
       HTML 里，切换只是显示哪一组。禁用 JS 也能用，键盘可达，不产生任何死控件。

   --ui-radius / --ui-control / --ui-motion-* 在 apex.css 里没有定义，所以每一处都带
   fallback：同一份文件因此也能挂在 comsite 的 site.css 上而不改一个字。 */

/* ── 行内的 token 片 ── */
.es-tok {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: .9em;
  background: var(--soft); color: var(--brand-ink);
  padding: 2px 8px; border-radius: 7px; border: 1px solid var(--line);
  white-space: nowrap;
}
.es-anchors { display: flex; flex-wrap: wrap; gap: 8px }

/* ── 分词示例 ── */
.es-example { margin-block: 20px }
.es-atom {
  display: flex; flex-wrap: wrap; gap: 6px; min-width: 0;
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: 15px;
}
.es-atom span { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px }
.es-atom span.on { color: var(--brand-ink); border-color: var(--brand) }
.es-cap {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12.5px; color: var(--dim); line-height: 1.6; margin: 8px 0 0; overflow-wrap: anywhere;
}

/* ── 选模型：纯 CSS。radio 用 1px 透明而不是 display:none，键盘与读屏都还在。 ── */
.es-calc { margin-block: 22px; position: relative }
.es-calc > input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.es-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--ui-radius, 16px); padding: 12px 14px;
}
.es-tabs-label { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; color: var(--dim); letter-spacing: .04em }
.es-tabs label {
  font: 500 13px/1 var(--sans); border: 1px solid var(--line-2); background: var(--paper); color: var(--fg);
  min-block-size: var(--ui-control, 44px); display: inline-flex; align-items: center;
  padding: 0 14px; border-radius: 999px; cursor: pointer;
  transition: background-color var(--ui-motion-standard, 240ms) var(--ui-ease, ease),
              border-color var(--ui-motion-standard, 240ms) var(--ui-ease, ease);
}
.es-tabs label:hover { border-color: var(--brand) }
.es-ladder { display: grid; gap: 12px; margin-top: 14px }
.es-rung {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--ui-radius, 16px);
  padding: 18px 20px; box-shadow: var(--shadow-1);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline;
}
.es-amt {
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 5vw, 38px);
  color: var(--brand-ink); grid-row: span 2; line-height: 1; font-variant-numeric: tabular-nums;
}
.es-what { font-size: 14.5px; color: var(--dim) }
.es-cost {
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 13px; color: var(--dim);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.es-cost .w { color: var(--brand-ink); font-weight: 600 }
.es-cost .r { color: var(--fg); font-weight: 600 }
/* 每个价格槽位有四个值，被选中的那一档显示一个 */
.es-v { display: none }
#es-m-haiku:checked  ~ .es-ladder .es-v-haiku,
#es-m-sonnet:checked ~ .es-ladder .es-v-sonnet,
#es-m-opus:checked   ~ .es-ladder .es-v-opus,
#es-m-fable:checked  ~ .es-ladder .es-v-fable { display: inline }
#es-m-haiku:checked  ~ .es-tabs label[for="es-m-haiku"],
#es-m-sonnet:checked ~ .es-tabs label[for="es-m-sonnet"],
#es-m-opus:checked   ~ .es-tabs label[for="es-m-opus"],
#es-m-fable:checked  ~ .es-tabs label[for="es-m-fable"] {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 600;
}
#es-m-haiku:focus-visible  ~ .es-tabs label[for="es-m-haiku"],
#es-m-sonnet:focus-visible ~ .es-tabs label[for="es-m-sonnet"],
#es-m-opus:focus-visible   ~ .es-tabs label[for="es-m-opus"],
#es-m-fable:focus-visible  ~ .es-tabs label[for="es-m-fable"] { outline: 2px solid var(--brand-ink); outline-offset: 3px }
/* 价目表里 Opus 那一行加底色，与行云原稿的 .hot 一致。
   **这里本来想写「选哪一档就高亮哪一行」，写完发现它不可能生效**：radio 在
   .es-calc 里，表在 .es-calc 外面，`~` 到不了。一条静默不生效的规则比没有更坏，
   所以删掉了，只留这条确实成立的静态高亮。 */
.es-table tr[data-model="opus"] td { background: var(--soft) }

/* ── 表 ── */
.es-scroll {
  overflow-x: auto; margin-block: 18px; border: 1px solid var(--line);
  border-radius: var(--ui-radius, 16px); background: var(--paper);
}
.es-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 32rem }
.es-table th, .es-table td { padding: 12px 15px; text-align: left; border-top: 1px solid var(--line) }
.es-table thead th {
  background: var(--surface); font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11.5px; letter-spacing: .05em; color: var(--dim); border-top: none; font-weight: 600;
}
/* 数值列右对齐、等宽：不靠 markup 上的 class，因为文章是生成的 */
.es-table th:nth-child(2), .es-table th:nth-child(3),
.es-table td:nth-child(2), .es-table td:nth-child(3) {
  text-align: right; font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.es-table tbody td:first-child { font-weight: 600; color: var(--fg) }

/* ── 读 / 写 两块。左脊只是两种强调色，不承载语义，
      因为哪一块是「读」由文章内容决定，不由 class 名决定。 ── */
.es-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 20px }
@media (max-width: 620px) { .es-split { grid-template-columns: 1fr } }
.es-side {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: var(--ui-radius, 16px); padding: 18px 20px; box-shadow: var(--shadow-1);
}
.es-side.write { border-left-color: var(--brand) }
.es-side.read { border-left-color: var(--brand-ink) }
.es-side-label {
  margin: 0; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink);
}
.es-side-value { margin: 6px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--fg) }
.es-side-note { margin: 0; font-size: 13.5px; color: var(--dim) }

/* ── 一个大数字 ── */
.es-ratio {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--ui-radius, 16px);
  padding: 26px 24px; margin-block: 14px; text-align: center;
}
.es-ratio .big {
  margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 9vw, 64px);
  color: var(--brand-ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.es-ratio p + p { font-size: 14px; color: var(--dim); margin: 10px auto 0; max-width: 52ch }

/* ── 提示块 ── */
.es-note {
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--ui-radius, 16px);
  padding: 16px 18px; margin-block: 18px; display: grid; grid-template-columns: auto 1fr;
  gap: 10px; align-items: start;
}
.es-note-mark { font-size: 15px; line-height: 1.5 }
.es-note p { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.7 }

/* ── 三条实操 ── */
.es-lessons { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px }
.es-lessons > li {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--ui-radius, 16px); padding: 18px 20px; box-shadow: var(--shadow-1);
}
.es-kicker { margin: 0 0 6px; font-family: var(--serif); font-size: 1.15rem; color: var(--fg) }
.es-kicker b {
  display: block; font-family: var(--mono, ui-monospace, Menlo, monospace); font-weight: 600;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 4px;
}
.es-lessons > li p + p { margin: 0; font-size: 13.5px; color: var(--dim) }

/* ── 收尾 ── */
.es-stinger {
  margin-block: 34px; padding: clamp(24px, 5vw, 40px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--ui-radius, 16px);
  box-shadow: var(--shadow-1);
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 3.4vw, 28px); line-height: 1.4;
}
.es-foot { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; line-height: 1.8 }
@media (prefers-reduced-motion: reduce) { .es-tabs label { transition-duration: 1ms } }