/* 细节拆封：L2 介绍与 L3 演示共用一个由访问设备决定尺寸的外框。 */

.panel-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}
.scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .28);
  backdrop-filter: blur(14px) saturate(.8);
}

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(940px, calc(100vw - 80px));
  height: auto;
  aspect-ratio: 47 / 41;
  max-height: calc(100dvh - 80px);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 28px 80px -12px rgba(17, 17, 17, .28);
}

.panel__scroll { flex: 1; min-height: 0; }

/* 进演示时窗口尺寸由 JS 钉死（inline height），这里只负责别让内容把它撑开 */
.panel.is-demo { overflow: hidden; }

/* ── 介绍与应用体验共用的控制栏 ────────────────────────── */
.panel__chrome {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  flex: none;
  height: 56px;
  padding: 8px var(--s3) 8px var(--s4);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
}
.panel__chrome button {
  box-sizing: border-box;
  height: 36px;
  border-radius: var(--r-pill);
}
.panel__experience {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: var(--ink);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
}
.panel__experience:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.panel__vote-slot {
  flex: none;
}
.panel__chrome-primary,
.panel__chrome-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.panel__share,
.panel__close {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: var(--bg-sunken);
  color: #111;
  font-size: var(--t-sm);
  transition: background-color var(--d-fast) var(--ease);
}
.panel__close:hover { background: var(--line); }
.panel__share:hover { background: var(--line); }

/* ── 分享菜单：二维码 / 复制链接 ───────────────────────── */
/* 挂在「分享」按钮上，所以它的祖先要建立定位上下文。 */
.panel__chrome-actions { position: relative; }

.share__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .45);
}
.share__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink);
  text-align: left;
  transition: background-color var(--d-fast) var(--ease);
}
.share__item:hover { background: var(--line); }
.share__item svg { flex: none; opacity: .7; }

.share__pane {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 6px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
/* 二维码必须是白底黑码——深色背景上直接贴 PNG 会扫不出来。 */
.share__qr {
  width: 160px;
  height: 160px;
  padding: 8px;
  border-radius: var(--r-sm);
  background: #fff;
}
.share__note {
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
  text-wrap: pretty;
}

/* ── 正文区 ───────────────────────────────────────────── */
.panel__body { padding: var(--s6); }
.panel__body--meta { padding-bottom: var(--s5); }
.panel__body--story { padding-top: var(--s6); padding-bottom: var(--s7); }

.panel__category {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(17, 17, 17, .08);
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.2;
}

.panel__title {
  font-size: calc(var(--t-xl) * 1.5);
  letter-spacing: -.025em;
  line-height: 1.15;
}
.panel__blurb {
  margin-top: var(--s2);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.panel__meta {
  margin-top: var(--s4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: var(--t-sm);
  color: var(--ink-3);
}
.panel__person { color: var(--ink-2); font-weight: 700; }

.vote {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border: 1.5px solid var(--heart);
  color: var(--heart);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease),
              background-color var(--d-fast) var(--ease);
}
.vote:hover:not(:disabled):not(.is-on) { background: rgba(214, 55, 55, .06); }
.vote.is-on { color: #fff; border-color: var(--heart); background: var(--heart); }
.vote:disabled { opacity: .35; cursor: not-allowed; }
.vote.is-full:disabled { opacity: 1; }

/* ── 产品故事全文 ─────────────────────────────────────── */
.story { font-size: var(--t-base); line-height: 1.75; color: var(--ink-2); max-width: 68ch; }
.story h2, .story h3, .story h4, .story h5 {
  margin: var(--s6) 0 var(--s2);
  font-size: var(--t-md);
  color: var(--ink);
}
.story h2:first-child, .story h3:first-child { margin-top: 0; }
.story p { margin-bottom: var(--s4); text-wrap: pretty; }
.story strong { color: var(--ink); font-weight: 600; }
.story ul, .story ol { margin: 0 0 var(--s4); padding-left: 1.4em; }
.story li { margin-bottom: 5px; }
.story blockquote {
  margin: 0 0 var(--s4);
  padding-left: var(--s4);
  border-left: 1px solid var(--line-strong);
  color: var(--ink-3);
}
.story hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* 表格：9 份产品故事里用了。窄屏放不下就让它自己横向滚，绝不撑破面板 */
.tablewrap {
  margin: 0 calc(-1 * var(--s6)) var(--s5);
  padding: 0 var(--s6);
  overflow-x: auto;
  scrollbar-width: thin;
}
.story table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.story th,
.story td {
  padding: 8px 14px 8px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.story th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  border-bottom-color: var(--line-strong);
}
.story tbody tr:last-child td { border-bottom: 0; }
.story td:last-child, .story th:last-child { padding-right: 0; }

/* 代码块：只有陈磊那份用到 */
.story pre {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.6;
}
.story pre code { padding: 0; background: none; }

/* 嵌套列表：4 份用到。子列表贴紧父项，不要再空一行 */
.story li > ul, .story li > ol { margin: 4px 0 0; }
.story code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-sunken);
  font-size: .92em;
}
.story__loading { color: var(--ink-3); }

/* ── 窄屏：单列 ───────────────────────────────────────── */
@media (max-width: 760px) {
  .panel-layer { padding: 0; place-items: stretch; }
  .panel {
    width: 100%;
    height: 100dvh;
    aspect-ratio: auto;
    max-height: none;
    max-width: none;
    border-radius: 0;
    border: 0;
  }
  .panel__chrome { height: 52px; padding-inline: var(--s3); }
  .panel__chrome-primary, .panel__chrome-actions { display: contents; }
  .panel__experience { padding-inline: 11px; }
  .panel__share, .panel__close { padding-inline: 8px; }
  .vote { padding-inline: 12px; }
  .vote.is-full { padding-inline: 8px; font-size: 11px; }
  .panel__body { padding: var(--s5) var(--s5) var(--s8); }
  .panel__body--meta { padding-bottom: var(--s4); }
  .panel__body--story { padding-top: var(--s5); }
  .panel__title { font-size: calc(var(--t-lg) * 1.5); }
  /* 出血量要跟着 .panel__body 的内边距走，表格滚动条才对得齐 */
  .tablewrap { margin-inline: calc(-1 * var(--s5)); padding-inline: var(--s5); }
}