/* ════════════════════════════════════════════════════════════════════
   27-upgrade-lock.css — 订阅锁定态与升级引导
   ────────────────────────────────────────────────────────────────────
   三种形态的全部视觉（ui/upgrade-lock.js 是唯一挂载方）：
     .upgrade-lock          面板级遮罩（内容模糊预览 + 居中卡片）
     [data-plan-lock-badge] 入口级按钮锁角标
     .upgrade-toast         操作级提示 + Upgrade CTA

   模糊预览是有意的：锁定不等于空白占位，价值可见才有转化。内容仍在 DOM 里
   —— 前端门是体验门不是安全门（见 entitlements.js 头注），真正的硬拦在服务端。
   ════════════════════════════════════════════════════════════════════ */

/* ── 面板级 ───────────────────────────────────────────────────────── */

[data-plan-locked] {
  position: relative;
}

/* 模糊只作用在内容体上：标题栏 / 拖拽把手 / 关闭按钮必须保持可用，
   否则锁定面板会变成关不掉的死窗。 */
[data-plan-locked] .panel-floating-body {
  filter: blur(6px) saturate(0.65);
  pointer-events: none;
  user-select: none;
}

.upgrade-lock {
  position: absolute;
  inset: var(--panel-header-h, 38px) 0 0 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--surface-1) 62%, transparent);
  border-radius: inherit;
}

.upgrade-lock-card {
  max-width: 280px;
  padding: 16px 18px;
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: 10px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.35);
  font-family: var(--font-ui);
}

.upgrade-lock-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-3, var(--paper-deep));
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.upgrade-lock-title {
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.upgrade-lock-detail {
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.5;
}

.upgrade-lock-cta {
  margin-top: 12px;
  padding: 6px 16px;
  background: var(--ink-1);
  color: var(--surface-1);
  border: 1px solid var(--ink-1);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur-enter, 140ms) var(--ease-out, ease);
}

.upgrade-lock-cta:hover { opacity: 0.85; }

/* 订阅页尚未配置（服务端未下发 URL）——按钮保留但降调，不假装可点成功。 */
.upgrade-lock-cta[data-unconfigured="true"] {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line-2, var(--line));
}

/* ── 入口级角标 ───────────────────────────────────────────────────── */

[data-plan-lock-badge] {
  position: relative;
  opacity: 0.62;
}

[data-plan-lock-badge]::after {
  content: "🔒";
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
}

/* ── 操作级 toast ─────────────────────────────────────────────────── */
/* 与 .db-toast 同族（位置 / 反色 / 药丸），多一个内联 CTA。 */

.upgrade-toast {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 9px 10px 9px 18px;
  background: var(--ink-1);
  color: var(--surface);
  border-radius: 999px;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  font-family: var(--font-ui);
  font-size: 12px;
  opacity: 0;
  transition: opacity var(--dur-enter, 140ms) var(--ease-out, ease),
              transform var(--dur-enter, 140ms) var(--ease-out, ease);
}

.upgrade-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.upgrade-toast-text {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.upgrade-toast .upgrade-lock-cta {
  margin-top: 0;
  padding: 4px 14px;
  background: var(--surface);
  color: var(--ink-1);
  border-color: var(--surface);
  border-radius: 999px;
  white-space: nowrap;
}

.upgrade-toast .upgrade-lock-cta[data-unconfigured="true"] {
  background: transparent;
  color: var(--surface);
  border-color: color-mix(in srgb, var(--surface) 45%, transparent);
}

/* ── 品牌区 = 订阅入口 ─────────────────────────────────────────────── */
/* 顶栏**不显示**任何档位信息 —— 等级与详情全在 Plans 窗口里说。这里只是把
   品牌锁头变成可点的入口。 */

.topbar-v1 .brand {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  border-radius: 6px;
}
.topbar-v1 .brand:hover .brand-line-1 { text-decoration: underline; text-underline-offset: 2px; }
.topbar-v1 .brand:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 3px; }

/* ── Plans 窗口：当前档位（唯一常显内容）──────────────────────────── */
/* 两块明细都折叠了，所以这里必须极简：档位名 + 来源角标 + 一行状态。
   没有订阅记录时状态行整行不渲染（free/visitor 摆一排 "—" 只是噪声）。 */

.plans-hero {
  position: relative;
  margin: 0 0 12px;
  padding: 14px 16px;
  padding-right: 84px;          /* 给右上角角标留位，避免长档位名压上去 */
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: 10px;
}

.plans-hero-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink-1);
}

.plans-hero-badge {
  position: absolute;
  top: 15px;
  right: 16px;
  padding: 2px 9px;
  border: 1px solid var(--line-1);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.plans-hero-badge[data-plan-source="demo"],
.plans-hero-badge[data-plan-source="grace"] {
  border-color: var(--sig-warn, #BF8700);
  color: var(--sig-warn, #BF8700);
}

.plans-hero-status {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--ink-2);
}
.plans-hero-status[hidden] { display: none; }

.plans-sample-note {
  margin: 7px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--sig-warn, #BF8700);
}

/* ── Plans 窗口：订阅详情列表（折叠内） ───────────────────────────────── */

.plans-include-list {
  list-style: none;
  margin: 0;
  padding: 4px 12px 10px;
  display: grid;
  gap: 1px;
}

.plans-include-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line-soft, var(--line-1));
  font-size: 12px;
}
.plans-include-item:last-child { border-bottom: 0; }

.plans-include-label { color: var(--ink-1); }
.plans-include-value {
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
}

/* 不含 / 未建成：整行降调，一眼分得清"这一档没有"与"还没做出来"。 */
.plans-include-item[data-state="no"],
.plans-include-item[data-state="planned"] { opacity: 0.45; }
.plans-include-item[data-state="planned"] .plans-include-value { font-style: italic; }

/* ── Plans 窗口：对比表（默认折叠）──────────────────────────────────── */

.plans-compare {
  margin: 0 0 8px;
  border: 1px solid var(--line-1);
  border-radius: 8px;
  overflow: hidden;
}

.plans-compare-summary {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-1);
  background: var(--surface-2);
  list-style: none;
}
.plans-compare-summary::-webkit-details-marker { display: none; }
.plans-compare-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--ink-3);
  transition: transform var(--dur-enter, 140ms) var(--ease-out, ease);
}
.plans-compare[open] .plans-compare-summary::before { transform: rotate(90deg); }
.plans-compare-summary:hover { background: var(--paper-deep, var(--surface-2)); }
.plans-compare-summary:focus-visible { outline: 2px solid var(--ink-1); outline-offset: -2px; }

/* 宽表在自己的容器里横向滚动 —— 页面本体永远不横向滚。 */
.plans-scroll-x { overflow-x: auto; padding: 4px 10px 10px; }

/* ── Demo · Plan Switcher（Plans 窗口内一节，仅开发者模式可见）────────── */
/* 内部演示工具。视觉刻意与产品 chrome 拉开距离（琥珀边 + 等宽标题），演示时
   一眼分得清"这是演示器"而不是产品的一部分。 */

.demo-plan-section {
  margin: 12px 0 4px;
  padding: 12px 14px;
  display: grid;
  gap: 9px;
  background: var(--surface-2);
  border: 1px dashed var(--sig-warn, #BF8700);
  border-radius: 8px;
  font-family: var(--font-ui);
  color: var(--ink-1);
}
.demo-plan-section[hidden] { display: none; }
.demo-plan-section .demo-plan-list { grid-auto-flow: column; grid-auto-columns: max-content; gap: 14px; }

.demo-plan-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sig-warn, #BF8700);
}

.demo-plan-status {
  font-size: 11.5px;
  color: var(--ink-2);
}
.demo-plan-status[data-demo="true"] { color: var(--sig-warn, #BF8700); font-weight: 600; }

.demo-plan-list { display: grid; gap: 4px; }

.demo-plan-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}

.demo-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-2);
}

.demo-plan-number {
  width: 92px;
  padding: 4px 7px;
  border: 1px solid var(--line-1);
  border-radius: 5px;
  background: var(--surface-2);
  color: inherit;
  font: inherit;
  font-size: 11.5px;
}

.demo-plan-hint {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.demo-plan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.demo-plan-btn {
  padding: 5px 11px;
  border: 1px solid var(--line-2, var(--line));
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.demo-plan-btn:hover { background: var(--surface-2); }
.demo-plan-btn--primary {
  background: var(--ink-1);
  border-color: var(--ink-1);
  color: var(--surface-1);
}


/* ── 档位对比表（ui/plans-panel.js）───────────────────────────────────── */
/* 演示订阅时的主视觉：一屏说清五档差在哪。全部由 plans.json 渲染。 */

.plans-modal {
  position: fixed;
  inset: 0;
  z-index: 1550;   /* above toasts (1500), below the demo switcher (1600) */
  /* flex 而非 grid+place-items：网格轨道由内容撑时，卡片 width 里的 100% 无从
     解析，两块明细都折叠后整个窗口会塌成一条（实测 2px）。flex 容器的内容盒
     是确定的，min(520px, 100%) 才成立。 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.42);
}
.plans-modal[hidden] { display: none; }

.plans-card[data-compare-open="true"] { --plans-card-w: 760px; }

.plans-card {
  display: flex;
  flex-direction: column;
  width: min(var(--plans-card-w, 520px), 100%);
  max-height: min(680px, 100%);
  /* 不给 width 加过渡：实测过渡期间卡片会卡在旧宽度上到不了目标值（展开对比
     表后仍是 520px，必须横拖）。窗口按内容改尺寸本来也不需要动画。 */
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: 12px;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.5);
  font-family: var(--font-ui);
  color: var(--ink-1);
  overflow: hidden;
}

.plans-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line-soft, var(--line-1));
}

.plans-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }

.plans-close {
  width: 26px; height: 26px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-2);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.plans-close:hover { background: var(--surface-2); color: var(--ink-1); }

/* 宽表在自己的容器里横向滚动 —— 页面本体永远不横向滚。 */
.plans-scroll { overflow-y: auto; padding: 12px 20px 14px; }

.plans-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;          /* 五个档位列等宽，不被最长取值拖走 */
}

.plans-table th,
.plans-table td {
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft, var(--line-1));
}

/* 档位列等分剩余宽度；行标题列固定，允许换行（不再 nowrap 撑宽）。 */
.plans-table thead th:first-child { width: 34%; }

.plans-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-1);
  font-weight: 600;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--ink-2);
  word-break: break-word;
}

.plans-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-1);
  padding-right: 10px;
}

.plans-row-label { display: block; line-height: 1.3; }

/* 单位从每一格提到行标题 —— 六列里重复 "components / scenes / dpi" 是表格
   撑宽、非横拖不可的主因。 */
.plans-row-unit {
  display: block;
  margin-top: 1px;
  font-size: 9.5px;
  font-weight: 400;
  color: var(--ink-3);
}

.plans-table tbody td {
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  word-break: break-word;
}

.plans-table [data-current="true"] {
  background: var(--surface-3, var(--paper-deep));
  color: var(--ink-1);
  font-weight: 600;
}

.plans-coming-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--line-1);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.plans-footer[hidden] { display: none; }
.plans-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line-soft, var(--line-1));
}
.plans-footer .upgrade-lock-cta { margin-top: 0; flex: none; }

/* ── 升 / 降档摘要 toast ──────────────────────────────────────────────── */
/* 「刚才发生了什么」—— 演示时切档如果只是锁悄悄开了，观众根本抓不住重点。 */

.plan-summary-toast {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(720px, calc(100vw - 32px));
  padding: 10px 10px 10px 18px;
  background: var(--ink-1);
  color: var(--surface);
  border-radius: 999px;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  font-family: var(--font-ui);
  font-size: 12px;
  opacity: 0;
  transition: opacity var(--dur-enter, 140ms) var(--ease-out, ease),
              transform var(--dur-enter, 140ms) var(--ease-out, ease);
}
.plan-summary-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.plan-summary-toast strong { font-weight: 600; white-space: nowrap; }
.plan-summary-detail { color: color-mix(in srgb, var(--surface) 72%, transparent); }
.plan-summary-toast .upgrade-lock-cta {
  margin-top: 0;
  padding: 4px 14px;
  background: var(--surface);
  color: var(--ink-1);
  border-color: var(--surface);
  border-radius: 999px;
  white-space: nowrap;
}
/* 降档用琥珀左缘标记方向，但不用红色 —— 降档不是错误，数据也没丢。 */
.plan-summary-toast[data-direction="down"] {
  border-left: 3px solid var(--sig-warn, #BF8700);
}

.upgrade-lock-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.upgrade-lock-actions .upgrade-lock-cta { margin-top: 0; }
.upgrade-lock-cta--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line-2, var(--line));
}

/* ── 画布平铺水印（低档位，ui/upgrade-lock.js setupViewportWatermark）──── */
/* 导出 PNG 加水印挡不住随手截屏 —— 所以在视口本身铺一层。DOM 覆盖层而非画进
   WebGL：零渲染成本、不碰 renderer、不影响任何物理读数，而屏幕截图是对页面截
   的，照样把它拍进去。Publication Figure 走 WebGL canvas，不受这层影响（那条
   路另有 stampWatermark），不会出现双水印。
   透明度刻意压低：能在截图里认出来，但不妨碍看光路 —— 这是防随手转发，不是
   把产品做得难用。 */

#viewport[data-plan-watermark]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;              /* 盖住画布，低于面板(1000+)与 dock */
  pointer-events: none;    /* 绝不吃掉任何拖拽 / 点选 */
  user-select: none;
  opacity: 0.12;
  background-repeat: repeat;
  background-size: 260px 150px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='260' height='150'>\
<text x='130' y='75' fill='%230D0D0F' font-family='system-ui,-apple-system,Segoe UI,sans-serif' \
font-size='15' font-weight='600' text-anchor='middle' \
transform='rotate(-24 130 75)'>Photonics Nexus</text></svg>");
}

/* 暗色主题下换成浅色字，否则黑底上的黑字等于没有。 */
[data-theme="dark"] #viewport[data-plan-watermark]::after,
html.dark #viewport[data-plan-watermark]::after {
  opacity: 0.14;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='260' height='150'>\
<text x='130' y='75' fill='%23FFFFFF' font-family='system-ui,-apple-system,Segoe UI,sans-serif' \
font-size='15' font-weight='600' text-anchor='middle' \
transform='rotate(-24 130 75)'>Photonics Nexus</text></svg>");
}

/* Figure Studio 预览纸张沿用同一套平铺水印 —— 预览与导出所见即所得，
   低档位不会"预览干净、下载后突然多了水印"。 */
.figure-export-stage-paper { position: relative; }
.figure-export-stage-paper[data-plan-watermark]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;              /* 盖住 base + overlay canvas，低于内联编辑框 */
  pointer-events: none;
  opacity: 0.12;
  background-repeat: repeat;
  background-size: 200px 115px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='115'>\
<text x='100' y='58' fill='%230D0D0F' font-family='system-ui,-apple-system,Segoe UI,sans-serif' \
font-size='12' font-weight='600' text-anchor='middle' \
transform='rotate(-24 100 58)'>Photonics Nexus</text></svg>");
}